|
|
@@ -1,322 +0,0 @@
|
|
|
-<!-- -->
|
|
|
-<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