初始版本

business_uniapp/src/packages/pages/bond/components/bond_main.vue

@@ -0,0 +1,95 @@
+<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>