|
|
@@ -0,0 +1,322 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+<div>
|
|
|
+ <div class="d-flex mt-5 list">
|
|
|
+ <div v-for="(val, i) in packDataList" :key="i" class="list-item cursor-pointer elevation-2" :class="{'active': active === i }" @click="handleClickItem(val, i)">
|
|
|
+ <div v-if="val.id === userStore.userInfo?.vipFlag && userStore.userInfo?.vipExpireDate && userStore.userInfo?.vipExpireDate > Date.now()" class="recommend long">我的套餐</div>
|
|
|
+ <div v-if="val.recommend" class="recommend">推荐</div>
|
|
|
+ <div class="text-center font-weight-bold">{{ val.name }}</div>
|
|
|
+ <div class="text-center my-5">
|
|
|
+ <div v-if="val.price && !val.cycle">
|
|
|
+ ￥
|
|
|
+ <span class="font-weight-bold font-size-20">{{ val.price / 100 }}</span>
|
|
|
+ <!-- /年 -->
|
|
|
+ </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-divider></v-divider>
|
|
|
+ <!-- <div v-if="val.equity">
|
|
|
+ <div class="font-weight-bold my-3">权益</div>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(k, num) in val.equity" :key="k" :class="{'greyText': num+1 > val.showLength}">{{ k }}</li>
|
|
|
+ </ul>
|
|
|
+ </div> -->
|
|
|
+ <div v-if="val.text">
|
|
|
+ <div class="font-weight-bold my-3">权益</div>
|
|
|
+ <div>
|
|
|
+ <p
|
|
|
+ v-for="v in val.list"
|
|
|
+ :key="val.name + v.text"
|
|
|
+ class="vipColor"
|
|
|
+ :class="{ active: v.active}"
|
|
|
+ >{{ v.text }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-else>
|
|
|
+ <h3 class="my-3">授权范围：</h3>
|
|
|
+ <div class="font-size-15">扫描下方二维码联系高级客户经理为您定制</div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="userStore.userInfo?.vipFlag === val.id && canUse"
|
|
|
+ style="font-size: 14px; position: absolute; bottom: 30px;" 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
|
|
|
+ :disabled="(userStore.userInfo?.vipExpireDate && userStore.userInfo?.vipExpireDate > Date.now()) && Number(val.id) < Number(userStore.userInfo?.vipFlag)"
|
|
|
+ :loading="val.loading"
|
|
|
+ @click="createOrder(val, i)"
|
|
|
+ >开通会员</v-btn>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="py-5">
|
|
|
+ <m-pay
|
|
|
+ v-if="open"
|
|
|
+ :payPrice="payPrice / 100"
|
|
|
+ :qrCode="qrCode"
|
|
|
+ :disabled="disabled"
|
|
|
+ :expirationTime="expirationTime"
|
|
|
+ :payChannelCode="payChannelCode"
|
|
|
+ :orderId="orderId"
|
|
|
+ :dredgeIndex="dredgeIndex"
|
|
|
+ @overdue="handleOverdue"
|
|
|
+ @refreshQrCode="refreshQrCode"
|
|
|
+ @paySuccess="paySuccess"
|
|
|
+ ></m-pay>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+ <!-- <CtDialog :visible="open" :widthType="3" :footer="false" titleClass="text-h6" title="开通会员" @close="open = false">
|
|
|
+ </CtDialog> -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+defineOptions({name: 'purchasePackage-packageList'})
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+// import Snackbar from '@/plugins/snackbar'
|
|
|
+import MPay from '@/components/personalRecharge/pay.vue'
|
|
|
+import { orderCreated, getOrder, payOrderSubmit } from '@/api/common'
|
|
|
+import { getMembershipPackageList } from '@/api/recruit/personal/membershipPackage.js'
|
|
|
+import Snackbar from '@/plugins/snackbar'
|
|
|
+import { useUserStore } from '@/store/user'
|
|
|
+import { timesTampChange } from '@/utils/date'
|
|
|
+
|
|
|
+const userStore = useUserStore()
|
|
|
+
|
|
|
+const active = ref(null)
|
|
|
+const handleClickItem = (val, i) => {
|
|
|
+ active.value = i
|
|
|
+}
|
|
|
+
|
|
|
+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 canUse = computed(() => {
|
|
|
+ return new Date().getTime() < userStore.userInfo?.vipExpireDate
|
|
|
+})
|
|
|
+
|
|
|
+const packDataList = ref([])
|
|
|
+const getData = async () => {
|
|
|
+ const data = await getMembershipPackageList()
|
|
|
+ if (!data?.length) return
|
|
|
+ // let vipFlagIndex = null
|
|
|
+ const list = data.map((item, index) => {
|
|
|
+ item.id = item.id?.toString()
|
|
|
+ // if (item.id === userStore.userInfo?.vipFlag) vipFlagIndex = index // 低于当前套餐的(套餐)不展示
|
|
|
+ if (item.recommend) active.value = index // 推荐套餐
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ list: JSON.parse(item.text),
|
|
|
+ type: 3, // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 低于当前套餐的(套餐)不展示
|
|
|
+ // packDataList.value = vipFlagIndex ? list.slice(vipFlagIndex) : list
|
|
|
+ packDataList.value = list
|
|
|
+}
|
|
|
+getData()
|
|
|
+
|
|
|
+// 重新获取订单
|
|
|
+const refreshQrCode = (payType) => {
|
|
|
+ payChannelCode.value = payType
|
|
|
+}
|
|
|
+
|
|
|
+const dredgeIndex = ref(0)
|
|
|
+// 创建订单
|
|
|
+async function createOrder (val, i) {
|
|
|
+ dredgeIndex.value = i
|
|
|
+ val.loading = true
|
|
|
+ payPrice.value = val.price
|
|
|
+ try {
|
|
|
+ const data = await getOrder({
|
|
|
+ spuId: val.id, // 商品编号
|
|
|
+ type: val.type
|
|
|
+ })
|
|
|
+
|
|
|
+ if (data) {
|
|
|
+ // 获取支付码
|
|
|
+ paymentCode(data)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ await orderCreated({
|
|
|
+ spuId: val.id, // 商品编号
|
|
|
+ spuName: val.name, // 商品名称
|
|
|
+ price: val.price, // 价格
|
|
|
+ type: val.type // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
|
|
|
+ })
|
|
|
+
|
|
|
+ const _data = await getOrder({
|
|
|
+ spuId: val.id, // 商品编号
|
|
|
+ type: val.type
|
|
|
+ })
|
|
|
+
|
|
|
+ // 获取支付码
|
|
|
+
|
|
|
+ paymentCode(_data)
|
|
|
+ // qrCode.value = data
|
|
|
+ } catch (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
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.greyText {
|
|
|
+ color: #774e2085 !important;
|
|
|
+}
|
|
|
+.list {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.list-item {
|
|
|
+ position: relative;
|
|
|
+ // height: 400px;
|
|
|
+ min-height: 480px;;
|
|
|
+ width: calc((100% - 120px) / 5);
|
|
|
+ min-width: calc((100% - 120px) / 5);
|
|
|
+ max-width: calc((100% - 120px) / 5);
|
|
|
+ padding: 30px 20px;
|
|
|
+ border-radius: 14px;
|
|
|
+ margin-right: 30px;
|
|
|
+ color: #774e20;
|
|
|
+ background-color: #fafafa;
|
|
|
+ &.active {
|
|
|
+ background-color: rgba(255, 251, 248, 1);
|
|
|
+ border: 1px solid #f1b17a;
|
|
|
+ box-shadow: 0px 6px 12px 0px rgba(216, 160, 82, 0.36);
|
|
|
+ }
|
|
|
+ &:nth-child(5n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .item-btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+}
|
|
|
+ul li {
|
|
|
+ list-style: none;
|
|
|
+ font-size: 15px;
|
|
|
+ margin: 10px 0;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.v-btn) {
|
|
|
+ border: 1px solid #bc8b55;
|
|
|
+ color: #c30f0f !important;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.tips {
|
|
|
+ background-color: #fffbf8;
|
|
|
+ border: 1px solid #f1b17a;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+.recommend {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 55px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ background-color: #ff8a04;
|
|
|
+ border-radius: 12px 0 18px 0;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.long {
|
|
|
+ width: 100px;
|
|
|
+}
|
|
|
+.scanCode {
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 30px;
|
|
|
+ .code-left {
|
|
|
+ border: 1px solid #f1b17a;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #ff9012;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.v-slide-group__content) {
|
|
|
+ background: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.package-title {
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(45deg, #ff8a04, transparent);
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.vipColor {
|
|
|
+ color: #774e2085;
|
|
|
+ font-size: 15px;
|
|
|
+ padding: 5px 0;
|
|
|
+ &.active {
|
|
|
+ color:#774e20;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Xiao_123