749 lines
19 KiB
Vue
749 lines
19 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.toFixed(2) }}</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="getIcon(item)"/>
|
||
</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', item.level)"
|
||
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>{{ formatUpgradeAmount(item.upgradeAmount) }}</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">{{ formatSwitch(item.showMsg) }}</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">{{ formatOfferOffRate(item.offerOffRate) }}</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">{{ formatEnquiryNum(item.enquiryNum) }}</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">{{ formatDiscount(item.valueAddRate) }}</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">{{ formatDiscount(item.adRate) }}</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">{{ formatRecommendUpgrade(item.recommendUpgrade) }}</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 class="item">
|
||
<div class="item-box">
|
||
<div class="title">加工厂图片数</div>
|
||
<div class="title" v-for="(item, index) in userLevelList" :key="index">{{ formatFactoryPicNum(item.factoryPicNum) }}</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>{{ item.upgradeDesc || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<u-gap height="80"></u-gap>
|
||
<div>
|
||
<el-select v-model="orderStatusFilter" placeholder="订单状态筛选" @change="getUserPayEnsureList(1)">
|
||
<el-option label="全部状态" :value="null"></el-option>
|
||
<el-option label="已支付" :value="4"></el-option>
|
||
<el-option label="退款审核中" :value="5"></el-option>
|
||
<el-option label="已退款" :value="6"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<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-else-if="item.orderStatus === 5">退款审核中</span>
|
||
<span v-else-if="item.orderStatus === 6">已退款</span>
|
||
<span v-else>已支付</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,
|
||
orderStatusFilter: null
|
||
}
|
||
},
|
||
created() {
|
||
this.getUserLevelList()
|
||
this.getUserPayEnsureList()
|
||
},
|
||
methods: {
|
||
dayjs,
|
||
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}万升一级，共十级`
|
||
},
|
||
getUserPayEnsureList(pageIndex = 1) {
|
||
vk.callFunction({
|
||
url: 'client/order/kh/getList',
|
||
data: {
|
||
pageIndex,
|
||
pageSize: this.pageSize,
|
||
orderStatus: this.orderStatusFilter,
|
||
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, extra) {
|
||
this.$emit('done', index, extra);
|
||
},
|
||
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>
|