|
|
@@ -0,0 +1,230 @@
|
|
|
+<script setup lang="ts">
|
|
|
+definePage({ name: 'confimOrder', islogin: true, style: { navigationBarTitleText: '下单', navigationStyle: 'custom' } })
|
|
|
+const showModel = ref(false)
|
|
|
+const refuelNumber = ref()
|
|
|
+const refuelGun = ref()
|
|
|
+const showModelJf = ref(false)
|
|
|
+const selectDk = ref()
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view class="p24rpx">
|
|
|
+ <view class="rounded-16rpx bg-white px24rpx py28rpx">
|
|
|
+ <view class="text-36rpx font-semibold">
|
|
|
+ 中国石化 | 富源加油站
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx text-#aaa">
|
|
|
+ 西湖区文三路100号
|
|
|
+ </view>
|
|
|
+ <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <view class="text-#ff4d3a font-semibold">
|
|
|
+ 平台价
|
|
|
+ </view>
|
|
|
+ <view class="text-#aaa">
|
|
|
+ 门店价:¥7.60/L
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx flex items-center justify-between">
|
|
|
+ <view class="text-32rpx text-#ff4d3a font-semibold">
|
|
|
+ ¥6.45/L
|
|
|
+ </view>
|
|
|
+ <view class="text-#aaa">
|
|
|
+ 国标价:¥7.20/L
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white px24rpx py28rpx">
|
|
|
+ <view class="text-28rpx font-semibold">
|
|
|
+ 选择油号/油枪
|
|
|
+ </view>
|
|
|
+ <view class="mt24rpx flex items-center" @click="showModel = true">
|
|
|
+ <view class="relative w47% rounded-8rpx bg-#F9F9F9 px24rpx py20rpx">
|
|
|
+ <view class="text-center text-28rpx font-semibold">
|
|
|
+ 请选择油号
|
|
|
+ </view>
|
|
|
+ <view class="absolute right-24rpx top-50% h32rpx w32rpx -transform-translate-y-50%">
|
|
|
+ <wd-icon name="arrow-down" size="32rpx" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="relative ml18rpx w47% rounded-8rpx bg-#F9F9F9 px24rpx py20rpx">
|
|
|
+ <view class="text-center text-28rpx font-semibold">
|
|
|
+ 请选择油枪
|
|
|
+ </view>
|
|
|
+ <view class="absolute right-24rpx top-50% h32rpx w32rpx -transform-translate-y-50%">
|
|
|
+ <wd-icon name="arrow-down" size="32rpx" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white px24rpx py28rpx">
|
|
|
+ <view class="text-28rpx font-semibold">
|
|
|
+ 加油金额
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx bg-#F9F9F9 px24rpx py20rpx">
|
|
|
+ <input type="number" class="w-full" placeholder="请输入加油金额,优惠价格计算">
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx text-#ff4d3a">
|
|
|
+ 最小金额10元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white px24rpx py28rpx">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view class="mr20rpx text-28rpx font-semibold">
|
|
|
+ 抵扣券
|
|
|
+ </view>
|
|
|
+ <wd-button size="small">
|
|
|
+ 去兑换
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ <view class="mt24rpx flex items-center justify-between rounded-8rpx bg-#F9F9F9 px24rpx py20rpx" @click="showModelJf = true">
|
|
|
+ <view class="text-28rpx text-#aaa">
|
|
|
+ 暂无抵扣券
|
|
|
+ </view>
|
|
|
+ <wd-icon name="arrow-down" size="32rpx" color="#aaa" />
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx">
|
|
|
+ 已选:满200元可抵扣100元(最优)
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx">
|
|
|
+ 抵扣金额:-¥100
|
|
|
+ </view>
|
|
|
+ <view class="mb20rpx mt24rpx text-32rpx font-semibold">
|
|
|
+ 价格明细
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center justify-between text-28rpx">
|
|
|
+ <view class="text-#aaa">
|
|
|
+ 加油金额
|
|
|
+ </view>
|
|
|
+ <view>¥200.00</view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx flex items-center justify-between text-28rpx">
|
|
|
+ <view class="text-#aaa">
|
|
|
+ 抵扣券
|
|
|
+ </view>
|
|
|
+ <view>-¥100</view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx flex items-center justify-between text-28rpx">
|
|
|
+ <view class="text-#aaa">
|
|
|
+ 服务费
|
|
|
+ </view>
|
|
|
+ <view>+¥1.00</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
+ <view class="flex items-center justify-between text-28rpx">
|
|
|
+ <view class="text-#aaa">
|
|
|
+ 实付金额
|
|
|
+ </view>
|
|
|
+ <view class="text-#ff4d3a font-semibold">
|
|
|
+ ¥200.00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h200rpx" />
|
|
|
+ <Zpopup v-model="showModel" bg="#fff">
|
|
|
+ <view class="px24rpx py28rpx">
|
|
|
+ <view class="text-center text-32rpx font-semibold">
|
|
|
+ 选择油号油枪
|
|
|
+ </view>
|
|
|
+ <view class="mb20rpx text-32rpx font-semibold">
|
|
|
+ 油号
|
|
|
+ </view>
|
|
|
+ <wd-radio-group v-model="refuelNumber" shape="button">
|
|
|
+ <wd-radio :value="1">
|
|
|
+ 92#
|
|
|
+ </wd-radio>
|
|
|
+ <wd-radio :value="2">
|
|
|
+ 95#
|
|
|
+ </wd-radio>
|
|
|
+ </wd-radio-group>
|
|
|
+ <view class="mb20rpx mt20rpx text-32rpx font-semibold">
|
|
|
+ 油号
|
|
|
+ </view>
|
|
|
+ <wd-radio-group v-model="refuelGun" shape="button">
|
|
|
+ <wd-radio :value="1">
|
|
|
+ 1
|
|
|
+ </wd-radio>
|
|
|
+ <wd-radio :value="2">
|
|
|
+ 2
|
|
|
+ </wd-radio>
|
|
|
+ </wd-radio-group>
|
|
|
+ </view>
|
|
|
+ <view class="h200rpx" />
|
|
|
+ <template #footer>
|
|
|
+ <view class="text-center text-28rpx text-#ff4d3a">
|
|
|
+ 请与加油员确认油枪号
|
|
|
+ </view>
|
|
|
+ <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
+ <wd-button block size="large">
|
|
|
+ 确认
|
|
|
+ </wd-button>
|
|
|
+ </template>
|
|
|
+ </Zpopup>
|
|
|
+ <Zpopup v-model="showModelJf" bg="#fff">
|
|
|
+ <view class="px24rpx py28rpx">
|
|
|
+ <view class="mb24rpx text-center text-32rpx font-semibold">
|
|
|
+ 选择抵扣券
|
|
|
+ </view>
|
|
|
+ <wd-radio-group v-model="selectDk" shape="dot">
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ 不使用抵扣券
|
|
|
+ </view>
|
|
|
+ <wd-radio :value="1" />
|
|
|
+ </view>
|
|
|
+ <view class="mt24rpx">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ 自动推荐
|
|
|
+ </view>
|
|
|
+ <view class="relative mt20rpx box-border h144rpx flex items-center justify-between rounded-16rpx bg-[rgba(255,77,58,0.1)] px28rpx py24rpx">
|
|
|
+ <view class="flex-1">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view class="text-40rpx text-#ff4d3a font-semibold">
|
|
|
+ <text class="text-24rpx">
|
|
|
+ ¥
|
|
|
+ </text> 100
|
|
|
+ </view>
|
|
|
+ <view class="ml20rpx text-32rpx font-semibold">
|
|
|
+ 满200元可用
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt24rpx flex items-center text-#aaa">
|
|
|
+ <view class="text-center text-20rpx">
|
|
|
+ 可抵扣
|
|
|
+ </view>
|
|
|
+ <view class="ml20rpx text-24rpx font-semibold">
|
|
|
+ 有效期:2022-01-01至2022-01-01
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h-full w134rpx flex items-center justify-center border-l-2rpx border-l-#FF4D3A border-l-dashed">
|
|
|
+ <wd-radio :value="1" />
|
|
|
+ </view>
|
|
|
+ <view class="absolute right-150rpx h30rpx w30rpx rounded-full bg-white -top-10rpx" />
|
|
|
+ <view class="absolute right-150rpx h30rpx w30rpx rounded-full bg-white -bottom-10rpx" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </wd-radio-group>
|
|
|
+ </view>
|
|
|
+ <view class="h200rpx" />
|
|
|
+ <template #footer>
|
|
|
+ <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
+ <wd-button block size="large">
|
|
|
+ 确认选择
|
|
|
+ </wd-button>
|
|
|
+ </template>
|
|
|
+ </Zpopup>
|
|
|
+ <FixedLayout>
|
|
|
+ <wd-button block size="large">
|
|
|
+ 立即支付
|
|
|
+ </wd-button>
|
|
|
+ </FixedLayout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+:deep(.wd-radio){
|
|
|
+ margin-top: 0 !important;
|
|
|
+}
|
|
|
+</style>
|