初始版本

uniapp/src/components/order-footer/gap.vue

@@ -0,0 +1,116 @@
+<template>
+    <u-popup
+        v-model="showPopup"
+        mode="bottom"
+        :customStyle="{
+            'background': `none`
+        }"
+        :closeable="true"
+        :mask-close-able="false"
+        @close="showPopup = false"
+    >
+        <view
+            style="border-radius: 20rpx 20rpx 0 0;"
+            class="append-popup bg-white p-[30rpx] text-center"
+        >
+            <view class="py-2 font-medium text-2xl text-black">
+                {{ title }}
+            </view>
+
+            <view class="mt-3">
+
+                <view
+                    class="flex text-base bg-[#f6f7f8]"
+                    style="border-radius: 20rpx; padding: 20rpx 24rpx;"
+                >
+                    <view class="flex-none text-base font-medium">
+                        补差价金额
+                    </view>
+                    <view class="ml-2 flex-1 text-right">
+                        <input type="number" v-model="orderAmount" placeholder="¥ 0.00">
+                    </view>
+                </view>
+
+                <view
+                    class="flex text-base bg-[#f6f7f8] mt-3"
+                    style="border-radius: 20rpx; padding: 20rpx 24rpx;"
+                >
+                    <view class="flex-none text-base font-medium">
+                        备注
+                    </view>
+                    <view class="ml-2 flex-1 text-right">
+                        <input type="text" v-model="orderDesc" placeholder="请输入补差价原因">
+                    </view>
+                </view>
+
+                <view class="mt-4 text-left">
+                    <view class="text-xs font-medium text-muted">
+                        *支付前需与服务人员协商一致，如有异议，请联系平台客服。
+                    </view>
+                    <view class="mt-1 text-xs font-medium text-muted">
+                        系统只保障在线支付的项目，切勿线下支付。
+                    </view>
+                </view>
+            </view>
+
+            <view style="margin-top: 90rpx" class="footer flex-1 safe-area-inset-bottom">
+                <u-button
+                    type="primary"
+                    @click="confirm"
+                >
+                    立即支付
+                </u-button>
+            </view>
+        </view>
+    </u-popup>
+</template>
+
+<script lang="ts" setup>
+import {computed, ref} from 'vue'
+import {apiOrderGap} from "@/api/order";
+import {useRouter} from "uniapp-router-next";
+
+const props = defineProps<{
+    show: boolean
+    title: string
+    order_id: number
+}>()
+
+const emits = defineEmits<{
+    (event: 'update:show', show: boolean): void
+}>()
+
+const showPopup = computed({
+    get() {
+        return props.show
+    },
+    set(val) {
+        if (!val) {
+            orderAmount.value = null
+            orderDesc.value = ''
+        }
+        emits('update:show', val)
+    }
+})
+
+const router = useRouter()
+const orderAmount = ref<number | null>(null)
+const orderDesc = ref<string>('')
+
+const confirm = async () => {
+    const { id , type } = await apiOrderGap({
+        order_id: props.order_id,
+        order_amount: orderAmount.value,
+        remark: orderDesc.value
+    })
+    router.navigateTo({
+        url: '/bundle/pages/order_pay/order_pay',
+        query: {
+            order_id: id,
+            from: type,
+            order_amount: orderAmount.value
+        }
+    })
+    showPopup.value = false
+}
+</script>