youxi-app/components/lock.uvue

<script setup lang='ts'>
import { type PropType } from 'vue'
import { dict } from '@/.cool/store'
import { wechatPay, wechatPayRequest, wechatPayQuery, wechatPayCancel } from '@/services/user'
import { user } from '@/.cool'
import { ref } from 'vue'
const emit = defineEmits(['close'])
const props = defineProps({
  record: {
    type: Object,
    default: () => ({})
  },
  type: {
    type: String as PropType<'vip' | 'course'>,
    default: 'vip'
  },
  finish: {
    type: Boolean,
    default: true
  },
  studyUnitLock: {
    type: Boolean,
    default: false
  }
})
const visible = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
const visible4 = ref(false)
function handleOpen() {
  console.log(1)
  if (!props.finish) {
    visible2.value = true
    return
  }
  if (props.studyUnitLock) {
    visible4.value = true
    return
  }
  switch (props.type) {
    case 'course':
      visible.value = true
      break;
    case 'vip':
      visible3.value = true
      break;
  }

}
async function getPayStatus(outTradeNo: string) {
  const res = await wechatPayQuery({
    outTradeNo
  })
  if (res.code !== 1000) {
    getPayStatus(outTradeNo)
  } else {
    emit('close', true)
    await user.get()
  }
}

const handlePay = async () => {
  try {
    const { prepayId, outTradeNo } = await wechatPay({
      subjectId: props.type === 'course' ? props.record.subjectId : dict.getValueByLabelMapByType('index_subject_id')['物理'],
    })
    const { signature, timestamp, nonceStr } = await wechatPayRequest({
      prepayId, outTradeNo
    })
    console.log(signature)
    uni.requestPayment({
      provider: "wxpay",
      timeStamp: timestamp,
      nonceStr: nonceStr,
      package: "prepay_id=" + prepayId,
      paySign: signature,
      signType: "RSA",
      success: (res) => {
        console.log('res: ', res)
        uni.showToast({
          title: "支付成功",
          icon: 'success'
        });
        // 支付成功后，查询支付结果
        getPayStatus(outTradeNo)
      },
      fail: (err) => {
        console.error("err", err);
        uni.hideLoading();
        // 支付失败后，取消订单
        wechatPayCancel({
          outTradeNo
        }).then(res => {
          if (res.code === 200) {
            uni.showToast({
              title: "订单已取消",
              icon: 'success'
            });
            emit('close', false)
          }
        })
      }
    });
  } catch (err: any) {
    uni.showToast({
      title: err.message,
      icon: 'error'
    });
  }

}

</script>
<template>
  <view class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg1" @tap.stop="handleOpen">
    <cl-image src="https://oss.xiaoxiongcode.com/static/home/lock.png" mode="widthFix" width="30%" height="auto" />
  </view>
  <cl-popup v-model="visible" showClose :size="400" :show-header="false" direction="center">
    <view class="p-[40px] ">
      <cl-text class="text-center" color="#000" :size="20"> 小朋友，快叫爸爸妈妈帮忙，解锁更多精彩内容吧！ </cl-text>
      <cl-button class="mt-4" size="large" type="warn" block @tap="handlePay"> 前往购课 </cl-button>
    </view>
  </cl-popup>
  <cl-popup v-model="visible2" showClose :size="400" :show-header="false" direction="center">
    <view class="p-[40px] ">
      <cl-text class="text-center" color="#000" :size="20"> 请先学习完前面章节再来解锁！ </cl-text>
      <cl-button class="mt-4" size="large" type="warn" block @tap="visible2 = false"> 返回 </cl-button>
    </view>
  </cl-popup>

  <cl-popup v-model="visible3" showClose :size="400" :show-header="false" direction="center">
    <view class="p-[40px] ">
      <cl-text class="text-center" color="#000" :size="20"> 小朋友，快叫爸爸妈妈帮忙成为会员，解锁更多精彩内容吧！ </cl-text>
      <cl-text class="text-center" color="#666" :size="14"> 购买物理AI课后自动成为会员</cl-text>
      <cl-button class="mt-4" size="large" type="warn" block @tap="handlePay"> 前往购课 </cl-button>
    </view>
  </cl-popup>
  <cl-popup v-model="visible4" showClose :size="400" :show-header="false" direction="center">
    <view class="p-[40px] ">
      <cl-text class="text-center" color="#000" :size="20"> 一周后解锁！ </cl-text>
      <cl-button class="mt-4" size="large" type="warn" block @tap="visible4 = false"> 返回 </cl-button>
    </view>
  </cl-popup>
</template>
<style lang="scss" scoped>
.bg1 {
  background-color: rgba(255, 255, 255, 0.5);
}
</style>