666 lines
16 KiB
Vue
666 lines
16 KiB
Vue
<template>
|
||
<el-card shadow="never">
|
||
<view class="welcome">
|
||
尊敬的平台商家您好，目前您是我们平台的
|
||
<text>{{ userLevelStr }}</text>
|
||
，可享受相应会员权益~
|
||
</view>
|
||
<view class="user-info">
|
||
<view class="left">
|
||
<view class="member-card">
|
||
<view class="card-name">
|
||
<text class="name">{{ userLevelStr }}</text>
|
||
<!-- <text class="level">LV{{ userInfo.userGrade + 1 }}</text>-->
|
||
<text class="grade">
|
||
当前等级
|
||
</text>
|
||
</view>
|
||
<view class="exp-time" v-if="userInfo.upgradeExpiredAt">
|
||
有效期至：{{ dayjs(userInfo.upgradeExpiredAt).format('YYYY-MM-DD HH:mm:ss') }}
|
||
</view>
|
||
<view class="progress-box">
|
||
<view class="left">
|
||
<view class="total-pay">当前交易额</view>
|
||
<view class="progress">
|
||
<view class="price">{{ userInfo.transactionAmount }}</view>
|
||
<!-- <view class="desc">还差40W升级LV2</view>-->
|
||
</view>
|
||
<view class="progress-line">
|
||
<el-progress :percentage="30" color="#919191" :stroke-width="8"
|
||
:show-text="false"></el-progress>
|
||
</view>
|
||
<!-- <view class="level">-->
|
||
<!-- <view class="min-level">L1</view>-->
|
||
<!-- <view class="max-level">L10</view>-->
|
||
<!-- </view>-->
|
||
</view>
|
||
<view class="xufei-btn" @click="showForm('grade')">
|
||
<el-image src="/static/images/aecd46b81f8b452c9294ae36ab8404f5.png"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="bzj-title">当前保证金
|
||
<text>{{ userInfo.paidEnsure }}</text>
|
||
元
|
||
</view>
|
||
<view class="desc">
|
||
金久信携手千万采购商和供应商，承诺为买家和卖家打造更优质的服务平台，缴纳诚信保证金会冻结在平台，最低保证金额度5000.00元
|
||
</view>
|
||
<view class="btn-box">
|
||
<el-button @click="showForm('grade')">升级会员</el-button>
|
||
<!-- <el-button @click="showForm('payment')">去缴纳保证金</el-button>-->
|
||
<!-- <el-button @click="showForm('added')">购买增值权益</el-button>-->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="equity" v-if="userInfo.userLevel > -1">-->
|
||
<!-- <el-image-->
|
||
<!-- :src="userLevelList.find(item => parseInt(item.level) === parseInt(userInfo.userLevel)).upgradeDescImg"/>-->
|
||
<!-- </view>-->
|
||
|
||
<div class="grade-list">
|
||
<div class="item">
|
||
<div class="item-box" style="background-color: #f7f7f7">
|
||
<div class="title">会员等级</div>
|
||
<div class="title" v-for="(item, index) in userLevelList" :key="index">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-box">
|
||
<div class="title">身份图标</div>
|
||
<div class="title" v-for="(item, index) in userLevelList" :key="index">
|
||
<el-image class="level"
|
||
:src="item.icon[0]"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item" v-if="parseInt(userInfo.authStatus) !== 1">
|
||
<div class="item-box" @click="toAuth">
|
||
<div class="title">认证缴费</div>
|
||
<div class="title red" v-for="(item, index) in userLevelList" :key="index">
|
||
去认证<i class="el-icon-arrow-right"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-box">
|
||
<div class="title">获得身份方式</div>
|
||
<div class="title" v-for="(item, index) in userLevelList" :key="index">
|
||
<div class="get-way">
|
||
<template v-if="parseInt(item.amount) === 0">
|
||
<div>企业平台认证</div>
|
||
<div>VIP认证方法</div>
|
||
<div class="red pointer"
|
||
v-if="parseInt(userInfo.userLevel) < item.level"
|
||
@click="showForm('fadada')">去升级<i
|
||
class="el-icon-arrow-right"></i></div>
|
||
</template>
|
||
<template v-else>
|
||
<div>购买</div>
|
||
<div>{{ item.amount }}元/年</div>
|
||
<div v-if="item.ensureAmount && item.ensureAmount > 0">+交易保证金({{ item.ensureAmount }}元)</div>
|
||
<div class="red pointer" @click="showForm('grade')"
|
||
v-if="parseInt(userInfo.userLevel) <= item.level">{{
|
||
parseInt(userInfo.userLevel) === item.level ? '去续费' : '去升级'
|
||
}}<i
|
||
class="el-icon-arrow-right"></i></div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-box">
|
||
<div class="title">升级方式</div>
|
||
<div class="title" v-for="(item, index) in userLevelList" :key="index">
|
||
<div class="get-way">
|
||
<span>交易额每{{ parseFloat(item.upgradeAmount) / 10000 }}万升一级,共十级</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-box">
|
||
<div class="title">询报价权益</div>
|
||
<div class="title" v-for="(item, index) in userLevelList" :key="index">{{
|
||
parseInt(item.offerOffRate) === 0 ? '不限次数,免费' :
|
||
(parseInt(item.offerOffRate) === 100 ? '-' : `${parseInt(item.offerOffRate) / 10}折`)
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-box">
|
||
<div class="title">增值服务</div>
|
||
<div class="title" v-for="(item, index) in userLevelList" :key="index">{{
|
||
(parseInt(item.valueAddRate) === 100 ? '-' : `${parseInt(item.valueAddRate) / 10}折`)
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-box">
|
||
<div class="title">加工厂店铺</div>
|
||
<div class="title" v-for="(item, index) in userLevelList" :key="index">可授权</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<u-gap height="80"></u-gap>
|
||
<div class="grade-list">
|
||
<div class="item">
|
||
<div class="item-box" style="background-color: #f7f7f7">
|
||
<div class="title">时间</div>
|
||
<div class="title">详情</div>
|
||
<div class="title">金额</div>
|
||
<div class="title">订单状态</div>
|
||
<div class="title">会员权益</div>
|
||
</div>
|
||
</div>
|
||
<div class="item" v-for="(item, index) in userPayEnsureList" :key="index" @click="onChange(index)">
|
||
<div class="item-box">
|
||
<div class="title">{{ item._add_time_str }}</div>
|
||
<div class="title">{{ item.type === 2 ? '缴纳保证金' : '会员升级' }}</div>
|
||
<div class="title">￥{{ item.amount }}</div>
|
||
<div class="title">
|
||
<span v-if="item.orderStatus === 0">待支付</span>
|
||
<span v-if="item.orderStatus > 0">已支付</span>
|
||
</div>
|
||
<div class="title">-</div>
|
||
</div>
|
||
</div>
|
||
<view class="paginatio">
|
||
<el-pagination
|
||
@current-change="getUserPayEnsureList"
|
||
background
|
||
layout="prev, pager, next"
|
||
:page-size="pageSize"
|
||
:total="total">
|
||
</el-pagination>
|
||
</view>
|
||
</div>
|
||
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import UQRCode from 'uqrcodejs';
|
||
import UGap from "../../../uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
|
||
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: {UGap},
|
||
data() {
|
||
return {
|
||
userInfo: {
|
||
paidEnsure: 0
|
||
},
|
||
paymentIndex: 0,
|
||
payment: ["银联支付"],
|
||
money: 5000,
|
||
showQrcode: false,
|
||
billQRCode: '',
|
||
gradeIndex: 0,
|
||
userLevelList: [],
|
||
userLevelStr: '普通用户',
|
||
userPayEnsureList: [],
|
||
pageSize: 10,
|
||
total: 0
|
||
}
|
||
},
|
||
created() {
|
||
this.getUserLevelList()
|
||
this.getUserPayEnsureList()
|
||
},
|
||
methods: {
|
||
dayjs,
|
||
getUserPayEnsureList(pageIndex = 1) {
|
||
vk.callFunction({
|
||
url: 'client/order/kh/getList',
|
||
data: {
|
||
pageIndex,
|
||
pageSize: this.pageSize,
|
||
type: [2, 3]
|
||
},
|
||
success: (res) => {
|
||
this.total = res.total
|
||
this.userPayEnsureList = res.rows
|
||
}
|
||
});
|
||
},
|
||
getUserInfo() {
|
||
vk.userCenter.getCurrentUserInfo({
|
||
success: (data) => {
|
||
this.userInfo = data.userInfo
|
||
console.log(this.userInfo.paidEnsure)
|
||
if (data.userInfo.userLevel > -1) {
|
||
this.userLevelStr = this.userLevelList.find(level => parseInt(level.level) === parseInt(data.userInfo.userLevel)).name
|
||
}
|
||
}
|
||
});
|
||
},
|
||
onChange(money) {
|
||
this.money = money
|
||
},
|
||
navTo(url) {
|
||
vk.navigateTo(url);
|
||
},
|
||
showForm(index) {
|
||
this.$emit('done', index);
|
||
},
|
||
getUserLevelList() {
|
||
vk.callFunction({
|
||
url: 'client/userLevel/pub/getList',
|
||
data: {
|
||
pageIndex: 1,
|
||
pageSize: 200
|
||
},
|
||
success: (data) => {
|
||
this.userLevelList = data.rows
|
||
this.getUserInfo()
|
||
}
|
||
});
|
||
},
|
||
toAuth() {
|
||
this.$emit('done', 'fadada')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.clearfix {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.bzj-price {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.item {
|
||
position: relative;
|
||
border: 1px solid #eee;
|
||
|
||
.item-box {
|
||
display: flex;
|
||
|
||
:first-child {
|
||
width: 100px;
|
||
}
|
||
|
||
.title {
|
||
padding: 10px;
|
||
border-right: 1px solid #eee;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 40px;
|
||
justify-content: center;
|
||
text-align: center;
|
||
|
||
.level {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
border-right: 2px solid #bf2b28 !important;
|
||
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;
|
||
}
|
||
|
||
.welcome {
|
||
color: #999999;
|
||
font-size: 16px;
|
||
|
||
text {
|
||
color: #bf2b28;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.user-info {
|
||
margin: 20px auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
.member-card {
|
||
background: url("https://oss.wsdns.cn/20231205/e080605f50d3406b84bae69088418309.png");
|
||
background-size: 100%;
|
||
background-color: #626262;
|
||
border-radius: 20px;
|
||
padding: 30px;
|
||
width: 420px;
|
||
height: 230px;
|
||
|
||
.card-name {
|
||
.name {
|
||
color: #DFBA8B;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.level {
|
||
color: #DFBA8B;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin: 0 15px;
|
||
}
|
||
|
||
.grade {
|
||
padding: 4px 7px;
|
||
color: #ffffff;
|
||
border: 1px solid #ffffff;
|
||
border-radius: 5px;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
.exp-time {
|
||
color: #DFBA8B;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.progress-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.total-pay {
|
||
margin-top: 30px;
|
||
color: #BFBFBF;
|
||
}
|
||
|
||
.progress {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
color: #BFBFBF;
|
||
font-size: 20px;
|
||
|
||
.price {
|
||
|
||
}
|
||
|
||
.desc {
|
||
font-size: 12px;
|
||
padding-bottom: 1px;
|
||
}
|
||
}
|
||
|
||
.progress-line {
|
||
width: 250px;
|
||
}
|
||
|
||
.level {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #BFBFBF;
|
||
line-height: 1.8em;
|
||
}
|
||
|
||
.xufei-btn {
|
||
width: 100px;
|
||
margin-left: 20px;
|
||
margin-top: 12px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
padding: 20px;
|
||
border-radius: 20px;
|
||
width: 420px;
|
||
|
||
.bzj-title {
|
||
font-size: 16px;
|
||
|
||
text {
|
||
color: #bf2b28;
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
color: #999999;
|
||
padding: 18px 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.equity {
|
||
text-align: center;
|
||
color: #999999;
|
||
font-size: 16px;
|
||
|
||
text {
|
||
padding: 15px;
|
||
}
|
||
|
||
.el-icon-minus {
|
||
}
|
||
}
|
||
|
||
|
||
.grade-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 12px;
|
||
|
||
.item {
|
||
position: relative;
|
||
border: 1px solid #eee;
|
||
|
||
.item-box {
|
||
display: flex;
|
||
font-size: 14px;
|
||
|
||
.red {
|
||
color: #bf2b28;
|
||
}
|
||
|
||
.title {
|
||
padding: 10px;
|
||
border-right: 1px solid #eee;
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
justify-content: center;
|
||
text-align: center;
|
||
|
||
.get-way {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 13px;
|
||
line-height: 2em;
|
||
}
|
||
|
||
.level {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
padding: 10px;
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 230px;
|
||
|
||
.price {
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.paginatio {
|
||
float: none;
|
||
margin: 20px auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
</style>
|