city-gather/src/subPack-djk/confirmOrder/index.vue

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

definePage({
  name: 'djk-confirmOrder',
  islogin: true,
  style: {
    navigationBarTitleText: '提交订单',
  },
})
const orderInfo = ref<Api.PmsDjkGoods>()
const isPay = ref(false)
const isAllow = ref(true)
const phone = ref(useUserStore().userInfo.mobile)
const isEdit = ref(false)
const points = ref(0)
const price = ref(0)
const goodsId = ref()
onLoad((options: any) => {
  goodsId.value = options.order
  getGoodsDetaile()
})
async function getCore() {
  const res = await Apis.djk.djkAppletOrderConfirm({ data: { goodsId: orderInfo.value?.id, channelId: useUserStore().userInfo.channelId } })
  points.value = res.data.points
  price.value = res.data.price
}
async function getGoodsDetaile() {
  const res = await Apis.djk.goodsInfo({ data: { goodsId: goodsId.value } })
  orderInfo.value = res.data
  getCore()
}
async function handleH5PayResult(orderNumber: string) {
  const isPaySuccess = await useUserStore().pollOrderPaySuccess(orderNumber)
  if (isPaySuccess) {
    isPay.value = false
    router.replace({ name: 'djk-homeTabbar', params: { pay: '1' } })
    return
  }

  useGlobalToast().show({ msg: '暂未查询到支付成功，请稍后在订单列表查看' })
  isPay.value = false
}

async function handlePay() {
  if (!orderInfo.value) {
    useGlobalToast().show({ msg: '网络异常！请联系客服' })
    return
  }
  isPay.value = true
  try {
    const data = await Apis.djk.addDJKOrder({ data: { shopId: orderInfo.value.shopId, channelId: useUserStore().userInfo.channelId, phone: phone.value, goodsId: orderInfo.value.id, goodsNum: 1, customerAuthorization: boolToNumber(isAllow.value) } })
    const payMent = await useUserStore().getPayMent(data.data)
    if (payMent.payType !== 'point') {
      try {
        // #ifdef MP-WEIXIN
        const res = await useUserStore().handleCommonPayMent(data.data)
        await useUserStore().getWxCommonPayment(res)
        await useUserStore().paySuccess('djk-homeTabbar', 'subPack-djk/commonTab/index')
        // #endif
        // #ifdef H5
        useUserStore().handleCommonWechatPay(data.data)
        await handleH5PayResult(data.data)
        // #endif
        isPay.value = false
      }
      catch {
        useUserStore().payError('djk-homeTabbar', 'subPack-djk/commonTab/index')
      }
    }
    else {
      await useUserStore().handleCommonPayMent(data.data)
      await useUserStore().paySuccess('djk-homeTabbar', 'subPack-djk/commonTab/index')
    }
  }
  catch (error) {
    console.log('error', error)
    isPay.value = false
  }
}
</script>

<template>
  <view v-if="orderInfo" class="page px20rpx py20rpx">
    <view class="flex items-center rounded-16rpx bg-white p24rpx">
      <image
        :src="orderInfo.goodsImg?.split(',')[0]"
        class="h160rpx w160rpx flex-shrink-0 rounded-16rpx"
      />
      <view class="ml20rpx flex-1">
        <view class="text-32rpx font-semibold">
          {{ orderInfo.goodsName }}
        </view>
        <view class="mt16rpx text-24rpx text-gray">
          有效期{{ orderInfo.effectiveTime }}天·需提前{{ orderInfo.advanceBookingTime }}天预约
        </view>
        <view class="mt16rpx flex items-center justify-between">
          <view class="text-36rpx text-#FF4D3A font-semibold">
            <text class="text-20rpx">
              ￥
            </text> {{ orderInfo.price }}
          </view>
          <view class="text-24rpx text-gray">
            x1
          </view>
        </view>
      </view>
    </view>
    <view class="mt20rpx rounded-16rpx bg-white p24rpx">
      <view class="flex items-center justify-between">
        <view class="text-28rpx text-gray">
          商品金额
        </view>
        <view class="text-28rpx font-semibold">
          ￥{{ orderInfo.price }}
        </view>
      </view>
      <view class="mt20rpx flex items-center justify-between">
        <view class="text-28rpx text-gray">
          积分{{ points ? `(${points})` : '' }}
        </view>
        <view class="text-28rpx font-semibold" :class="[points ? '' : 'text-gray']">
          {{ points ? `-￥${points / 100}` : '不可用' }}
        </view>
      </view>
      <view class="my20rpx h2rpx w-full bg-#F0F0F0" />
      <view class="mt20rpx flex items-center justify-between">
        <view class="text-28rpx text-gray">
          总计
        </view>
        <view class="text-28rpx font-semibold">
          ￥{{ price }}
        </view>
      </view>
    </view>
    <view class="mt20rpx rounded-16rpx bg-white p24rpx">
      <view class="flex items-center justify-between">
        <view class="text-28rpx text-gray">
          允许商户通过此号码致电沟通到店时间
        </view>
        <wd-checkbox v-model="isAllow" />
      </view>
      <view class="mt16rpx flex items-center text-28rpx">
        <view v-if="!isEdit" class="mr10rpx">
          {{ phoneFormat(String(phone)) }}
        </view>
        <view v-else>
          <input v-model="phone" type="number" :maxlength="11" :focus="isEdit" @blur="isEdit = false">
        </view>
        <view v-if="!isEdit" class="flex items-center" @click="isEdit = true">
          <view class="mr5rpx">
            修改
          </view>
          <wd-icon name="arrow-right" size="18px" color="#000" />
        </view>
      </view>
    </view>
    <view class="mt20rpx rounded-16rpx bg-white p24rpx">
      <view class="text-32rpx font-semibold">
        购买须知
      </view>
      <view class="mt20rpx text-24rpx text-gray">
        有效期
      </view>
      <view class="mt16rpx text-28rpx">
        购买之日起{{ orderInfo.effectiveTime }}天有效
      </view>
      <view class="mt20rpx text-24rpx text-gray">
        预约信息
      </view>
      <view class="mt16rpx text-28rpx">
        请您提前{{ orderInfo.advanceBookingTime }}天预定
      </view>
      <view class="mt20rpx text-24rpx text-gray">
        可用时间
      </view>
      <view class="mt16rpx text-28rpx">
        {{ orderInfo.useStartTime }} 至 {{ orderInfo.useEndTime }}
      </view>
      <view class="mt20rpx text-24rpx text-gray">
        消费流程
      </view>
      <view class="mt16rpx text-28rpx">
        {{ orderInfo.usageProcess }}
      </view>
      <view class="mt20rpx text-24rpx text-gray">
        购买人群
      </view>
      <view class="mt16rpx text-28rpx">
        {{ orderInfo.buyNotice }}
      </view>
    </view>
    <view class="h250rpx" />
    <view class="ios footer fixed bottom-0 left-0 box-border w-full rounded-t-16rpx bg-white px24rpx">
      <view class="box-border w-full flex items-center justify-between py20rpx">
        <view class="flex items-center text-#FF4D3A">
          <view class="font-semibold10 flex items-baseline text-36rpx">
            <text class="text-24rpx">
              ￥
            </text> {{ price }}
          </view>
          <view class="ml20rpx text-22rpx">
            共减￥ {{ points / 100 }}
          </view>
        </view>
        <view class="w180rpx">
          <wd-button size="large" :loading="isPay" loading-color="#9ED605" @click="handlePay">
            立即支付
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .footer{
    box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.05);
  }
  .page{
    :deep(){
      .wd-button{
        width: 180rpx !important;
      }
    }
  }
</style>