96 lines
3.3 KiB
Vue
96 lines
3.3 KiB
Vue
<template>
|
|
<view>
|
|
<view class="bg-white rounded-lg flex items-center mt-4 py-[20rpx] px-[32rpx]">
|
|
<text class="text-[40rpx] font-bold">¥</text>
|
|
<u-input placeholder="请输入自定义金额" class="ml-2" v-model="money"></u-input>
|
|
</view>
|
|
<view class="mt-[50rpx]">
|
|
<view class="flex items-center">
|
|
<view class="block"></view>
|
|
<view class="text-lg font-medium ml-2">支付方式</view>
|
|
</view>
|
|
<view class="mt-[28rpx]" v-for="item in payWayList" :key="item.pay_way" @click="choosePayWay = item.pay_way">
|
|
<view class="bg-white rounded-lg py-[26rpx] px-[32rpx] flex items-center">
|
|
<u-image width="50" height="50" :src="item.image"></u-image>
|
|
<view class="ml-2 font-semibold">{{ item.extra }}</view>
|
|
<checkboxMark background="#7E5008" class="ml-auto" :select="choosePayWay == item.pay_way"></checkboxMark>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mt-[50rpx]">
|
|
<view class="flex items-center">
|
|
<view class="block"></view>
|
|
<view class="text-lg font-medium ml-2">保证金套餐</view>
|
|
</view>
|
|
<view class="grid grid-cols-3 gap-2 mt-[28rpx]">
|
|
<view
|
|
v-for="(item, index) in listData"
|
|
:key="index"
|
|
class="relative bg-white p-[50rpx] flex flex-col items-center rounded-lg"
|
|
style="overflow: hidden;"
|
|
@click="money = item.money"
|
|
>
|
|
<view class="text-[28rpx] mb-[6rpx]">{{ item.name }}</view>
|
|
<view class="mb-[40rpx] text-center">
|
|
<price
|
|
fontWeight="900"
|
|
:content="item.money"
|
|
color="#7E5008"
|
|
main-size="48rpx"
|
|
minor-size="28rpx"
|
|
></price>
|
|
</view>
|
|
<view class="absolute bottom-0 bg-[#F9F1E6] w-full text-center text-[#7E5008] text-[24rpx] py-[6rpx]">
|
|
日限{{ item.order_limit }}单
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import checkboxMark from '@/components/checkbox-mark/index.vue'
|
|
import { getPayWay } from '@/api/pay'
|
|
import { ref, watch } from 'vue'
|
|
|
|
const payWayList = ref<any>([])
|
|
const choosePayWay = ref(0)
|
|
const money = ref()
|
|
|
|
const emit = defineEmits(['change'])
|
|
|
|
const getPayWayList = async () => {
|
|
const data = await getPayWay()
|
|
choosePayWay.value = data.lists.find(element => element.is_default == 1)?.pay_way || 0
|
|
payWayList.value = data.lists
|
|
}
|
|
|
|
const prop = defineProps({
|
|
listData: {
|
|
type: Array,
|
|
default: () => [] as any
|
|
}
|
|
})
|
|
|
|
getPayWayList()
|
|
|
|
watch(
|
|
() => [money.value,choosePayWay.value],
|
|
([value1,value2]) => {
|
|
emit('change',{pay_way:choosePayWay.value,money:money.value})
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.block {
|
|
width: 4px;
|
|
height: 36rpx;
|
|
background-color: #7e5008;
|
|
}
|
|
</style>
|