502 lines
13 KiB
Vue
502 lines
13 KiB
Vue
<template>
|
|
<el-card>
|
|
<div slot="header" class="clearfix">
|
|
<span>会员等级</span>
|
|
</div>
|
|
<div class="grade-list">
|
|
<div class="item pointer" v-for="(item,index) in gradeList" :key="index"
|
|
:class="[parseInt(gradeIndex) === index ? 'active' : '', item.disabled ? 'disabled' : '']"
|
|
@click="onChange(index)">
|
|
<div class="item-box">
|
|
<div class="info">
|
|
<el-image v-if="getIcon(item)" class="level-icon" :src="getIcon(item)"></el-image>
|
|
<div class="name">{{ item.name }}</div>
|
|
</div>
|
|
<div class="detail">
|
|
<div class="price-line">
|
|
<span>{{ item.amount }}元/年</span>
|
|
<span v-if="parseFloat(item.ensureAmount) > 0">+交易保证金({{ item.ensureAmount }}元)</span>
|
|
</div>
|
|
<div class="meta-list">
|
|
<div class="meta-item">
|
|
<span class="label">升级交易额</span>
|
|
<span class="value">{{ formatUpgradeAmount(item.upgradeAmount) }}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="label">消息推送模板</span>
|
|
<span class="value">{{ formatSwitch(item.showMsg) }}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="label">报价折扣</span>
|
|
<span class="value">{{ formatOfferOffRate(item.offerOffRate) }}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="label">每月询价次数</span>
|
|
<span class="value">{{ formatEnquiryNum(item.enquiryNum) }}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="label">增值服务折扣</span>
|
|
<span class="value">{{ formatDiscount(item.valueAddRate) }}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="label">广告位折扣</span>
|
|
<span class="value">{{ formatDiscount(item.adRate) }}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="label">推荐升级</span>
|
|
<span class="value">{{ formatRecommendUpgrade(item.recommendUpgrade) }}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="label">加工厂图片数</span>
|
|
<span class="value">{{ formatFactoryPicNum(item.factoryPicNum) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="desc-line" v-if="item.upgradeDesc">
|
|
<span class="label">邀请说明</span>
|
|
<span class="value">{{ item.upgradeDesc }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="select">
|
|
<div class="icon">
|
|
<i class="el-icon-check"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item pointer"
|
|
:class="[gradeIndex === -2 ? 'active' : '']" @click="onChange(-2)">
|
|
<div class="item-box">
|
|
<div class="title">交易保证金缴纳</div>
|
|
<div class="title">
|
|
<el-select v-model="ensureAmount" size="small">
|
|
<el-option
|
|
v-for="item in ensureList"
|
|
:key="item.amount"
|
|
:label="`${item.amount.toFixed(2)}元`"
|
|
:value="item.amount">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="select">
|
|
<div class="icon">
|
|
<i class="el-icon-check"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-start items-center mt-20" v-if="gradeIndex === -999">
|
|
<div @click="ensureIndex = 0"
|
|
:style="{backgroundColor: ensureIndex === 0 ? '#a92924' : '', color: ensureIndex === 0 ? 'white' : ''}"
|
|
class="border rounded p-20">50000元保证金
|
|
</div>
|
|
<div @click="ensureIndex = 1"
|
|
:style="{backgroundColor: ensureIndex === 1 ? '#a92924' : '', color: ensureIndex === 1 ? 'white' : ''}"
|
|
class="border rounded p-20 mx-20">100000元保证金
|
|
</div>
|
|
<div @click="ensureIndex = 2"
|
|
:style="{backgroundColor: ensureIndex === 2 ? '#a92924' : '', color: ensureIndex === 2 ? 'white' : ''}"
|
|
class="border rounded p-20">200000元保证金
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bzj-readme">
|
|
<div class="sub-title">保证金协议</div>
|
|
<div class="content" v-html="desc">
|
|
</div>
|
|
</div>
|
|
<div class="payment">
|
|
<div class="sub-title">支付方式</div>
|
|
<div class="content">
|
|
<el-radio-group v-model="paymentIndex" class="ml-4">
|
|
<el-radio v-for="(item,index) in payment" :key="index" :label="index"
|
|
size="large">{{ item }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<div class="pay-price">
|
|
<div class="sub-title">支付金额：￥{{ amount }}元</div>
|
|
</div>
|
|
<div class="pay-price" v-if="billQRCode">
|
|
<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
|
|
<div class="pay-desc">微信、支付宝、云闪付扫码完成支付</div>
|
|
<el-button type="success" @click="onPayStatus">已完成支付</el-button>
|
|
</div>
|
|
<el-button v-else type="danger" @click="onPay">立即支付</el-button>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import UQRCode from 'uqrcodejs';
|
|
import dayjs from "dayjs";
|
|
|
|
const OpenSdk = require('../lib/base').default;
|
|
// const OpenSdk = require('ums-sdk-nodejs').default;
|
|
|
|
const sdk = new OpenSdk({
|
|
appId: '10037e6f6823b20801682b6a5e5a0006',
|
|
appKey: '1c4e3b16066244ae9b236a09e5b312e8'
|
|
})
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
paymentIndex: 0,
|
|
payment: ["银联支付"],
|
|
showQrcode: false,
|
|
billQRCode: '',
|
|
gradeIndex: null,
|
|
desc: '',
|
|
gradeList: [],
|
|
ensureList: [],
|
|
ensureAmount: null,
|
|
ensureIndex: 0
|
|
}
|
|
},
|
|
props: {
|
|
extra: {
|
|
type: Number,
|
|
default() {
|
|
return undefined
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getUserLevelList()
|
|
this.getDesc()
|
|
this.getEnsureConfig()
|
|
},
|
|
methods: {
|
|
getIcon(item) {
|
|
if (Array.isArray(item.icon)) return item.icon[0]
|
|
return item.icon || ''
|
|
},
|
|
formatSwitch(value) {
|
|
return parseInt(value) === 1 ? '支持' : '不支持'
|
|
},
|
|
formatOfferOffRate(value) {
|
|
const rate = parseInt(value)
|
|
if (rate === 0) return '不限次数，免费'
|
|
if (rate === 100) return '-'
|
|
return `${rate / 10}折`
|
|
},
|
|
formatDiscount(value) {
|
|
const rate = parseInt(value)
|
|
if (!rate || rate === 100) return '-'
|
|
return `${rate / 10}折`
|
|
},
|
|
formatEnquiryNum(value) {
|
|
const num = parseInt(value)
|
|
if (!num) return '-'
|
|
return `${num}次/月`
|
|
},
|
|
formatRecommendUpgrade(value) {
|
|
const num = parseInt(value)
|
|
if (!num) return '-'
|
|
return `推荐${num}位黄金会员可升级`
|
|
},
|
|
formatFactoryPicNum(value) {
|
|
const num = parseInt(value)
|
|
if (!num) return '-'
|
|
return `${num}张`
|
|
},
|
|
formatUpgradeAmount(value) {
|
|
const amount = parseFloat(value)
|
|
if (!amount) return '-'
|
|
return `每${amount / 10000}万升一级，共十级`
|
|
},
|
|
getUserInfo() {
|
|
vk.userCenter.getCurrentUserInfo({
|
|
success: (data) => {
|
|
this.gradeList.map(item => {
|
|
item.disabled = false
|
|
if (data.userInfo.userLevel && parseInt(data.userInfo.userLevel) > -1) {
|
|
item.disabled = parseInt(item.level) < parseInt(data.userInfo.userLevel)
|
|
}
|
|
return item
|
|
})
|
|
for (let i in this.gradeList) {
|
|
if (!this.gradeList[i].disabled) {
|
|
this.gradeIndex = i
|
|
break
|
|
}
|
|
}
|
|
console.log(this.extra)
|
|
if (this.extra) {
|
|
for (let i in this.gradeList) {
|
|
if (this.gradeList[i].level === this.extra) {
|
|
this.gradeIndex = i
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
onChange(index) {
|
|
if (index === -2) this.gradeIndex = index
|
|
else {
|
|
if (this.gradeList[index].disabled) return
|
|
this.gradeIndex = index
|
|
}
|
|
},
|
|
async onPay() {
|
|
let res
|
|
if (this.gradeIndex === -2) {
|
|
res = await vk.callFunction({
|
|
url: 'client/order/kh/add',
|
|
data: {
|
|
goods: {
|
|
name: `交易保证金-${this.ensureAmount}元`,
|
|
amount: this.ensureAmount,
|
|
cover: null
|
|
},
|
|
type: 2,
|
|
goodsId: null,
|
|
num: 1,
|
|
}
|
|
})
|
|
} else {
|
|
res = await vk.callFunction({
|
|
url: 'client/order/kh/add',
|
|
data: {
|
|
goods: {
|
|
name: `会员升级-${this.gradeList[this.gradeIndex].name}`,
|
|
amount: this.amount,
|
|
cover: null
|
|
},
|
|
type: 3,
|
|
goodsId: parseInt(this.gradeList[this.gradeIndex].level),
|
|
ensureIndex: this.ensureIndex,
|
|
num: 1,
|
|
}
|
|
})
|
|
}
|
|
vk.redirectTo({url: `/pages/index/shop/pay?id=${res.data}`})
|
|
},
|
|
getUserLevelList() {
|
|
vk.callFunction({
|
|
url: 'client/userLevel/pub/getList',
|
|
data: {
|
|
pageIndex: 1,
|
|
pageSize: 200
|
|
},
|
|
success: (data) => {
|
|
this.gradeList = data.rows.filter(item => parseFloat(item.amount) > 0)
|
|
this.getUserInfo()
|
|
}
|
|
});
|
|
},
|
|
async getDesc() {
|
|
const res = await vk.callFunction({
|
|
url: 'client/dict/pub/getDetail',
|
|
data: {
|
|
id: '880c33886636217300376edd5a56e1e6'
|
|
},
|
|
})
|
|
this.desc = res.content
|
|
},
|
|
async getEnsureConfig() {
|
|
const {rows} = await vk.callFunction({
|
|
url: 'client/ensureConfig/pub/getList',
|
|
})
|
|
this.ensureList = rows
|
|
this.ensureAmount = this.ensureList[0].amount
|
|
},
|
|
|
|
},
|
|
computed: {
|
|
amount() {
|
|
if (this.gradeIndex === -2) return this.ensureAmount
|
|
else if (this.gradeIndex === 2) return parseFloat(this.gradeList[this.gradeIndex].amount) + [50000, 100000, 200000][this.ensureIndex]
|
|
else return parseFloat(this.gradeList[this.gradeIndex].amount) + parseFloat(this.gradeList[this.gradeIndex].ensureAmount)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.clearfix {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.grade-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
position: relative;
|
|
border: 1px solid #eee;
|
|
margin-bottom: 12px;
|
|
|
|
.item-box {
|
|
display: flex;
|
|
align-items: stretch;
|
|
|
|
.title {
|
|
padding: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.info {
|
|
width: 180px;
|
|
min-width: 180px;
|
|
padding: 16px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right: 1px solid #eee;
|
|
text-align: center;
|
|
|
|
.level-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.name {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.detail {
|
|
padding: 16px;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.price-line {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.meta-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px 20px;
|
|
}
|
|
|
|
.meta-item,
|
|
.desc-line {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
line-height: 1.6;
|
|
|
|
.label {
|
|
color: #666;
|
|
min-width: 90px;
|
|
}
|
|
|
|
.value {
|
|
color: #333;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.desc-line {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.select {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
border: 2px solid #bf2b28 !important;
|
|
|
|
.item-box {
|
|
.info {
|
|
.name {
|
|
color: #bf2b28;
|
|
}
|
|
}
|
|
|
|
.detail {
|
|
.price-line,
|
|
.value {
|
|
color: #bf2b28;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-top: 20px solid transparent;
|
|
border-right: 20px solid #bf2b28;
|
|
border-left: 20px solid transparent;
|
|
border-bottom: 20px solid #bf2b28;
|
|
display: flex;
|
|
|
|
.icon {
|
|
position: relative;
|
|
|
|
.el-icon-check {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-card {
|
|
margin-top: 20px;
|
|
border: none;
|
|
}
|
|
|
|
.sub-title {
|
|
color: #bf2b28;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
border-left: 5px solid #bf2b28;
|
|
padding-left: 10px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.bzj-readme {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.payment {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pay-price {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pay-desc {
|
|
font-size: 16px;
|
|
line-height: 2em;
|
|
}
|
|
|
|
.disabled {
|
|
cursor: not-allowed;
|
|
background-color: #F0F0F0;
|
|
}
|
|
</style>
|