city-gather/src/subPack-attractions/attractionsOrderPay/attractionsOrderPay.vue

<script setup lang="ts">
import router from '@/router'

definePage({
  name: 'attractions-order-pay',
  islogin: false,
  style: {
    navigationBarTitleText: '订单支付',
  },
})
const productName = ref('')
const num = ref(0)
const orderNo = ref('')
onLoad((options: any) => {
  productName.value = options.productName || ''
  num.value = Number(options.num) || 0
  orderNo.value = options.orderNo || ''
})

onMounted(() => {
  getPayPreview()
})

const payPreviewInfo = ref<Api.ScenicPayPreviewVo>()
const payMethod = ref(['1']) // 默认选中微信支付
async function getPayPreview() {
  const res = await Apis.attractions.payPreview({ data: { orderNumber: orderNo.value } })
  payPreviewInfo.value = res.data
}

async function submitPay() {
  const res = await useUserStore().handleCommonPayMent(orderNo.value)
  if (res.payType !== 1) {
    try {
      await useUserStore().getWxCommonPayment(res)
      router.push({ name: 'attractions-order-detail' })
    }
    catch {
      await useUserStore().payError('xsb-order', 'subPack-xsb/commonTab/index')
    }
  }
  else {
    router.push({ name: 'attractions-order-detail' })
  }
}
</script>

<template>
  <view class="order-pay-page">
    <view class="px-24rpx">
      <view class="h-20rpx" />
      <view class="rounded-16rpx bg-#FFF p-24rpx">
        <view class="flex items-center justify-between gap-50rpx text-32rpx font-bold">
          <view>{{ productName }}</view>
          <view class="text-28rpx font-normal">
            x{{ num }}
          </view>
        </view>
        <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
        <view class="mt-24rpx flex items-center justify-between">
          <view class="text-28rpx font-bold">
            订单总金额
          </view>
          <view class="text-32rpx text-#FF4A39 font-bold">
            <text class="text-26rpx">
              ￥
            </text>
            {{ payPreviewInfo?.orderTotal }}
          </view>
        </view>
        <view class="mt-20rpx flex items-center justify-between text-24rpx">
          <view>积分扣减</view>
          <view class="text-#FF4A39 font-bold">
            ￥{{ payPreviewInfo?.pointsDeduct }}
          </view>
        </view>
        <view class="mt-20rpx flex items-center justify-between text-24rpx">
          <view>微信支付</view>
          <view class="text-#FF4A39 font-bold">
            ￥{{ payPreviewInfo?.wxPayMoney }}
          </view>
        </view>
      </view>
      <view v-if="(payPreviewInfo?.wxPayMoney ?? 0) > 0" class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
        <view class="text-32rpx font-bold">
          选择支付方式
        </view>
        <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
        <view>
          <wd-cell-group border>
            <wd-checkbox-group v-model="payMethod" size="large">
              <wd-cell title="微信支付" center clickable>
                <view>
                  <wd-checkbox model-value="1" custom-style="margin:0;" />
                </view>
              </wd-cell>
            </wd-checkbox-group>
          </wd-cell-group>
        </view>
      </view>
    </view>
    <view class="fixed bottom-0 h-174rpx w-full border-[1rpx_solid_#EEEEEE] bg-#FFF px-24rpx">
      <wd-button custom-class="w-702rpx mt-10rpx" block size="large" @click="submitPay">
        立即支付
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>