396 lines
11 KiB
Vue
396 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<uititle title="升级会员"></uititle>
|
||
<el-card>
|
||
<view class="grade-list">
|
||
<view class="item pointer" v-for="(item,index) in gradeList" :key="index"
|
||
:class="[parseInt(gradeIndex) === index ? 'active' : '', item.disabled ? 'disabled' : '']"
|
||
@click="onChange(index)">
|
||
<view class="flex justify-between items-center p-20">
|
||
<view class="title">{{ item.name }}</view>
|
||
<view class="flex flex-col justify-center items-end text-25" style="margin-right: 50rpx">
|
||
<p>{{ item.amount }}元/年</p>
|
||
<p class="mt-20" v-if="parseFloat(item.ensureAmount) > 0">+交易保证金({{ item.ensureAmount }}元)</p>
|
||
</view>
|
||
</view>
|
||
<view class="select">
|
||
<view class="icon">
|
||
<i class="el-icon-check"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item pointer" @click="onChange(-2)"
|
||
:class="[parseInt(gradeIndex) === -2 ? 'active' : '']">
|
||
<view class="flex justify-between items-center p-20">
|
||
<view class="title">交易保证金缴纳</view>
|
||
<view class="flex flex-col justify-center items-end text-25" style="margin-right: 50rpx">
|
||
<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>
|
||
</view>
|
||
</view>
|
||
<view class="select">
|
||
<view class="icon">
|
||
<i class="el-icon-check"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="flex justify-start items-center mt-20" v-if="gradeIndex === 2">
|
||
<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>
|
||
<view class="mt-20">
|
||
<u-button type="primary" size="mini" v-if="gradeIndex > -1" @click="show = true">权益详情</u-button>
|
||
</view>
|
||
<view class="bzj-readme">
|
||
<view class="sub-title">保证金协议</view>
|
||
<u-parse :content="desc"></u-parse>
|
||
</view>
|
||
<view class="payment">
|
||
<view class="sub-title">支付方式</view>
|
||
<view 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>-->
|
||
<view class="flex justify-start items-center">
|
||
<image src="@/static/img/unionpay.png" style="width: 70rpx; height: 30rpx" mode="widthFix"></image>
|
||
<text class="ml-15 text-28 text-main">银联支付</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pay-price">
|
||
<view class="sub-title">支付金额：￥{{ amount }}元</view>
|
||
</view>
|
||
<view class="pay-price" v-if="billQRCode">
|
||
<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
|
||
<view class="pay-desc">请打开手机微信，扫一扫完成支付</view>
|
||
<el-button type="success" @click="onPayStatus">已完成支付</el-button>
|
||
</view>
|
||
<el-button v-else type="danger" @click="onPay">立即支付</el-button>
|
||
</el-card>
|
||
<u-popup :show="show" mode="bottom" round="15" closeable @close="show = false">
|
||
<view class="p-50 text-25" v-if="gradeIndex > -1">
|
||
<view class="flex justify-start items-center border-bottom py-15">
|
||
<u-icon :name="gradeList[gradeIndex].icon[0]" size="100rpx" :label="gradeList[gradeIndex].name"/>
|
||
</view>
|
||
<view class="p-15 flex justify-between items-center">
|
||
<text>获得身份方式</text>
|
||
<text>
|
||
购买{{ gradeList[gradeIndex].amount }}元/年{{
|
||
`${gradeList[gradeIndex].ensureAmount > 0 ? `+交易保证金(${gradeList[gradeIndex].ensureAmount})` : ``}`
|
||
}}
|
||
</text>
|
||
</view>
|
||
<view class="p-15 flex justify-between items-center">
|
||
<text>升级方式</text>
|
||
<text>交易额每{{ parseFloat(gradeList[gradeIndex].upgradeAmount) / 10000 }}万升一级,共十级</text>
|
||
</view>
|
||
<view class="p-15 flex justify-between items-center">
|
||
<text>询报价权益</text>
|
||
<text>{{
|
||
parseInt(gradeList[gradeIndex].offerOffRate) === 0 ? '不限次数,免费' :
|
||
(parseInt(gradeList[gradeIndex].offerOffRate) === 100 ? '-' : `${parseInt(gradeList[gradeIndex].offerOffRate) / 10}折`)
|
||
}}
|
||
</text>
|
||
</view>
|
||
<view class="p-15 flex justify-between items-center">
|
||
<text>增值服务</text>
|
||
<text>
|
||
{{
|
||
(parseInt(gradeList[gradeIndex].valueAddRate) === 100 ? '-' : `${parseInt(gradeList[gradeIndex].valueAddRate) / 10}折`)
|
||
}}
|
||
</text>
|
||
</view>
|
||
<view class="p-15 flex justify-between items-center">
|
||
<text>加工厂店铺</text>
|
||
<text>可授权</text>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import uititle from "@/components/common/title.vue";
|
||
|
||
const OpenSdk = require('@/lib/base').default;
|
||
|
||
const sdk = new OpenSdk({
|
||
appId: '10037e6f6823b20801682b6a5e5a0006',
|
||
appKey: '1c4e3b16066244ae9b236a09e5b312e8'
|
||
})
|
||
export default {
|
||
components: {uititle},
|
||
data() {
|
||
return {
|
||
paymentIndex: 0,
|
||
payment: ["银联支付"],
|
||
showQrcode: false,
|
||
billQRCode: '',
|
||
gradeIndex: null,
|
||
gradeList: [],
|
||
desc: '',
|
||
ensureList: [],
|
||
ensureAmount: null,
|
||
ensureIndex: 0,
|
||
show: false,
|
||
}
|
||
},
|
||
created() {
|
||
this.getDesc()
|
||
this.getEnsureConfig()
|
||
this.getUserLevelList()
|
||
},
|
||
methods: {
|
||
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
|
||
},
|
||
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
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
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/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()
|
||
}
|
||
});
|
||
}
|
||
},
|
||
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;
|
||
|
||
.item-box {
|
||
display: flex;
|
||
|
||
.title {
|
||
padding: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.info {
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 230px;
|
||
|
||
.price {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.desc {
|
||
color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
|
||
.select {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
border: 2px solid #bf2b28 !important;
|
||
|
||
.item-box {
|
||
.title {
|
||
color: #bf2b28;
|
||
}
|
||
|
||
.info {
|
||
.price {
|
||
color: #bf2b28;
|
||
}
|
||
|
||
.desc {
|
||
color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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>
|