|
|
@@ -1,7 +1,8 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="d-flex mt-5 list">
|
|
|
- <div v-for="(val, i) in packData" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(val, i)">
|
|
|
+ <div v-for="(val, i) in packDataList" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(val, i)">
|
|
|
+ <div v-if="val.vipFlag === userStore.userInfo?.vipFlag" class="recommend long">我的套餐</div>
|
|
|
<div v-if="val.recommend" class="recommend">推荐</div>
|
|
|
<div class="text-center font-weight-bold">{{ val.title }}</div>
|
|
|
<div class="text-center my-5">
|
|
|
@@ -11,7 +12,7 @@
|
|
|
<!-- /年 -->
|
|
|
</div>
|
|
|
<div v-if="val.cycle">￥<span class="font-weight-bold font-size-18 font-size-20">{{ val.price }}</span><span class="font-size-14 mr-3">起</span> {{ val.cycle }}</div>
|
|
|
- <div v-if="val.customized" class="font-size-20 font-weight-bold">按需定制</div>
|
|
|
+ <!-- <div v-if="val.customized" class="font-size-20 font-weight-bold">按需定制</div> -->
|
|
|
</div>
|
|
|
<v-divider></v-divider>
|
|
|
<div v-if="val.equity">
|
|
|
@@ -24,30 +25,52 @@
|
|
|
<h3 class="my-3">授权范围：</h3>
|
|
|
<div class="font-size-15">扫描下方二维码联系高级客户经理为您定制</div>
|
|
|
</div>
|
|
|
- <div class="text-center item-btn">
|
|
|
- <v-btn v-if="!val.customized" color="error" variant="outlined" rounded @click="createOrder(val)">开通会员</v-btn>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="userStore.userInfo?.vipFlag === val.vipFlag && canUse"
|
|
|
+ style="font-size: 14px;" class="mt-5"
|
|
|
+ >
|
|
|
+ 有效期：{{ timesTampChange(userStore.userInfo?.vipExpireDate, 'Y-M-D') }}
|
|
|
+ </div>
|
|
|
+ <div class="text-center item-btn" v-else>
|
|
|
+ <v-btn
|
|
|
+ color="error"
|
|
|
+ variant="outlined"
|
|
|
+ rounded
|
|
|
+ :loading="val.loading"
|
|
|
+ @click="createOrder(val)"
|
|
|
+ >开通会员</v-btn>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<CtDialog :visible="open" :widthType="1" :footer="false" titleClass="text-h6" title="开通会员" @close="open = false">
|
|
|
<m-pay
|
|
|
- :payPrice="100"
|
|
|
+ :payPrice="payPrice"
|
|
|
:qrCode="qrCode"
|
|
|
:disabled="disabled"
|
|
|
+ :expirationTime="expirationTime"
|
|
|
+ :payChannelCode="payChannelCode"
|
|
|
+ :orderId="orderId"
|
|
|
@overdue="handleOverdue"
|
|
|
@refreshQrCode="refreshQrCode"
|
|
|
+ @paySuccess="paySuccess"
|
|
|
></m-pay>
|
|
|
</CtDialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+defineOptions({name: 'purchasePackage-packageList'})
|
|
|
import { packData } from './packageList.js'
|
|
|
-import { ref } from 'vue'
|
|
|
+import { ref, computed } from 'vue'
|
|
|
// import Snackbar from '@/plugins/snackbar'
|
|
|
import MPay from '@/components/personalRecharge/pay.vue'
|
|
|
-import { orderCreated, getOrder } from '@/api/common'
|
|
|
-defineOptions({name: 'purchasePackage-packageList'})
|
|
|
+import { orderCreated, getOrder, payOrderSubmit } from '@/api/common'
|
|
|
+import Snackbar from '@/plugins/snackbar'
|
|
|
+import { useUserStore } from '@/store/user'
|
|
|
+import { timesTampChange } from '@/utils/date'
|
|
|
+
|
|
|
+const userStore = useUserStore()
|
|
|
|
|
|
|
|
|
const active = ref(2)
|
|
|
@@ -59,49 +82,96 @@ const open = ref(false)
|
|
|
const disabled = ref(false)
|
|
|
|
|
|
const qrCode = ref('')
|
|
|
+const payChannelCode = ref('wx_native')
|
|
|
+const payPrice = ref(0)
|
|
|
+
|
|
|
+const expirationTime = ref(-1)
|
|
|
+const orderId = ref('')
|
|
|
|
|
|
-// const itemInfo = ref(null)
|
|
|
+const canUse = computed(() => {
|
|
|
+ return new Date().getTime() < userStore.userInfo?.vipExpireDate
|
|
|
+})
|
|
|
|
|
|
-// 开通会员
|
|
|
-// const handleOpenMembership = (val) => {
|
|
|
-// console.log(val)
|
|
|
-// // createOrder()
|
|
|
-// // open.value = true
|
|
|
-// }
|
|
|
+const packDataList = packData.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+}).filter(e => e.vipFlag >= userStore.userInfo?.vipFlag)
|
|
|
|
|
|
// 重新获取订单
|
|
|
-const refreshQrCode = () => {
|
|
|
- // getOrder(payType)
|
|
|
+const refreshQrCode = (payType) => {
|
|
|
+ payChannelCode.value = payType
|
|
|
}
|
|
|
|
|
|
// 创建订单
|
|
|
async function createOrder (val) {
|
|
|
+ val.loading = true
|
|
|
+ payPrice.value = val.price
|
|
|
try {
|
|
|
-
|
|
|
const data = await getOrder({
|
|
|
spuId: val.spuId, // 商品编号
|
|
|
type: val.type
|
|
|
})
|
|
|
|
|
|
if (data) {
|
|
|
+ // 获取支付码
|
|
|
+ paymentCode(data)
|
|
|
return
|
|
|
}
|
|
|
|
|
|
|
|
|
- const orderId = await orderCreated({
|
|
|
+ await orderCreated({
|
|
|
spuId: val.spuId, // 商品编号
|
|
|
spuName: val.title, // 商品名称
|
|
|
- price: val.price, // 价格
|
|
|
+ price: val.price * 100, // 价格
|
|
|
type: val.type // 订单类型 0平台订单|1求职端订单|2招聘端订单|3用户会员-14天|4用户会员-30天|5用户会员-30天|6用户会员-90天|7用户会员-365天,
|
|
|
})
|
|
|
- // 获取二维码
|
|
|
- console.log(orderId)
|
|
|
+
|
|
|
+ const _data = await getOrder({
|
|
|
+ spuId: val.spuId, // 商品编号
|
|
|
+ type: val.type
|
|
|
+ })
|
|
|
+
|
|
|
+ // 获取支付码
|
|
|
+
|
|
|
+ paymentCode(_data)
|
|
|
// qrCode.value = data
|
|
|
} catch (error) {
|
|
|
- // console.log(error)
|
|
|
+ console.log(error)
|
|
|
+ } finally {
|
|
|
+ val.loading = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+async function paymentCode (param) {
|
|
|
+ try {
|
|
|
+ const res = await payOrderSubmit({
|
|
|
+ id: param.payOrder.id,
|
|
|
+ channelCode: payChannelCode.value
|
|
|
+ })
|
|
|
+ if (!res?.displayContent) {
|
|
|
+ Snackbar.error('获取支付码失败')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ orderId.value = param.payOrder.id
|
|
|
+ expirationTime.value = param.payOrder.expireTime - new Date().getTime()
|
|
|
+ // expirationTime.value = param.payOrder.expireTime - _now
|
|
|
+ qrCode.value = res.displayContent
|
|
|
+ open.value = true
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 支付成功
|
|
|
+function paySuccess () {
|
|
|
+ Snackbar.success('支付成功')
|
|
|
+ // 更新个人资料
|
|
|
+ userStore.getUserInfos()
|
|
|
+ open.value = false
|
|
|
+}
|
|
|
+
|
|
|
// 过期
|
|
|
function handleOverdue () {
|
|
|
disabled.value = true
|
|
|
@@ -173,6 +243,9 @@ ul li {
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+.long {
|
|
|
+ width: 100px;
|
|
|
+}
|
|
|
.scanCode {
|
|
|
border: 1px dashed #ccc;
|
|
|
border-radius: 10px;
|
