20261008
This commit is contained in:
@@ -0,0 +1,395 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user