310 lines
8.2 KiB
Vue
310 lines
8.2 KiB
Vue
<template>
|
||
<view>
|
||
<view class="layout layout-equity">
|
||
<view class="equity-title">
|
||
尊敬的平台商家您好，目前您是我们平台的
|
||
<text class="vip">{{ userLevelStr }}</text>
|
||
客户，可享受相应的会员权益~
|
||
</view>
|
||
<view class="equity-main m-top-30">
|
||
<!-- <view class="rule">会员规则</view>-->
|
||
<view class="title flex justify-start align-center">
|
||
<view class="vip">
|
||
{{ userLevelStr }}
|
||
<!-- <text class="lv m-left-10 m-right-20">LV1</text>-->
|
||
</view>
|
||
<u-tag text="当前等级" plain size="mini" color="#999" borderColor="#999"></u-tag>
|
||
</view>
|
||
<view class="date m-top-30" v-if="userInfo.upgradeExpiredAt">有效期至：{{ dayjs(userInfo.upgradeExpiredAt).format('YYYY-MM-DD HH:mm:ss') }}</view>
|
||
<view class="m-top-30">
|
||
<u--text suffixIcon="play-right-fill" color="#bfbfbf" iconStyle="font-size: 14px;color:#bfbfbf"
|
||
text="当前交易总额"></u--text>
|
||
<view class="text-30 font-bold text-white mt-20">{{ userInfo.transactionAmount }}</view>
|
||
</view>
|
||
<view class="flex justify-between align-center m-top-20">
|
||
<view class="custom-style" @click="jump('/pages/user/grade')">去续费</view>
|
||
</view>
|
||
</view>
|
||
<!-- 保证金 -->
|
||
<view class="equity-bail m-top-30 p-top-20">
|
||
<view class="title">
|
||
当前缴纳保证金
|
||
<text class="strong">{{ userInfo.paidEnsure ? userInfo.paidEnsure.toFixed(2) : '0.00' }}</text>
|
||
元
|
||
</view>
|
||
<view class="text m-top-20">
|
||
<u--text type="info"
|
||
text="金久信携手千万采购商和供应商，承诺为买家和卖家打造更优质的服务平台，缴纳诚信保证金会冻结在平台，最低保证金额度5000.00元 。"></u--text>
|
||
</view>
|
||
<view class="op flex justify-center m-top-30">
|
||
<view class="o active" @click="jump('/pages/user/grade')">升级会员 ></view>
|
||
<!-- <view class="o active" @click="jump('/pages/user/grade')">去缴纳保证金 ></view>-->
|
||
<!-- <view class="o" @click="jump('/pages/user/grade')">购买增值权益 ></view>-->
|
||
</view>
|
||
</view>
|
||
<!-- 权益 -->
|
||
<view class="equity-info m-top-30 p-top-30">
|
||
<view class="divider">
|
||
<u-divider text="可享受一下权益"></u-divider>
|
||
</view>
|
||
<view class="divider-box flex justify-start flex-wrap">
|
||
<view class="item">
|
||
<view class="icon">
|
||
<image class="full" src="/static/img/di-1.png" mode=""></image>
|
||
</view>
|
||
<view class="big m-top-10">9折报价</view>
|
||
<view class="small">精准寻找买家</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="icon">
|
||
<image class="full" src="/static/img/di-2.png" mode=""></image>
|
||
</view>
|
||
<view class="big m-top-10">10次/月询价</view>
|
||
<view class="small">每成交50万送10次</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="icon">
|
||
<image class="full" src="/static/img/di-3.png" mode=""></image>
|
||
</view>
|
||
<view class="big m-top-10">可自主交易</view>
|
||
<view class="small">交易更方便</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="icon">
|
||
<image class="full" src="/static/img/di-1.png" mode=""></image>
|
||
</view>
|
||
<view class="big m-top-10">黄页展示更丰富</view>
|
||
<view class="small">让买家快速了解我</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="icon">
|
||
<image class="full" src="/static/img/di-2.png" mode=""></image>
|
||
</view>
|
||
<view class="big m-top-10">平台增值服务享9折</view>
|
||
<view class="small">交易更划算</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="icon">
|
||
<image class="full" src="/static/img/di-3.png" mode=""></image>
|
||
</view>
|
||
<view class="big m-top-10">9折购买广告位</view>
|
||
<view class="small">平台广告位购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import dayjs from "dayjs";
|
||
|
||
export default {
|
||
props: {
|
||
userData: {
|
||
type: Object
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
userInfo: {
|
||
userLevel: -1,
|
||
userGrade: 0,
|
||
upgradeExpiredAt: '',
|
||
transactionAmount: 0,
|
||
paidEnsure: 0,
|
||
},
|
||
userLevelList: [],
|
||
userLevelStr: '普通用户',
|
||
userPayEnsureList: [],
|
||
pageSize: 10,
|
||
total: 0
|
||
};
|
||
},
|
||
methods: {
|
||
dayjs,
|
||
async getUserLevelList() {
|
||
vk.callFunction({
|
||
url: 'client/userLevel/pub/getList',
|
||
data: {
|
||
pageIndex: 1,
|
||
pageSize: 200
|
||
},
|
||
success: async (data) => {
|
||
this.userLevelList = data.rows
|
||
const {userInfo} = await vk.userCenter.getCurrentUserInfo()
|
||
this.userInfo = userInfo
|
||
if (this.userInfo.userLevel > -1) {
|
||
this.userLevelStr = this.userLevelList.find(level => parseInt(level.level) === parseInt(this.userInfo.userLevel)).name
|
||
}
|
||
}
|
||
});
|
||
},
|
||
async getUserPayEnsureList(pageIndex = 1) {
|
||
const {rows} = vk.callFunction({
|
||
url: 'client/order/kh/getList',
|
||
data: {
|
||
pageIndex,
|
||
pageSize: 500,
|
||
type: [2, 3]
|
||
},
|
||
});
|
||
this.userPayEnsureList = rows
|
||
},
|
||
jump(url) {
|
||
vk.navigateTo({url})
|
||
}
|
||
},
|
||
async mounted() {
|
||
await this.getUserLevelList()
|
||
await this.getUserPayEnsureList()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.layout-equity {
|
||
padding: 20rpx 30rpx;
|
||
|
||
.equity-title {
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
color: #101010;
|
||
|
||
.vip {
|
||
font-weight: 600;
|
||
color: #A92924;
|
||
}
|
||
}
|
||
|
||
.equity-main {
|
||
position: relative;
|
||
height: 300rpx;
|
||
padding: 30rpx 30rpx;
|
||
border-radius: 10rpx;
|
||
background: url('~@/static/img/equity.png') center no-repeat;
|
||
background-size: 100% 100%;
|
||
box-shadow: 0px 5px 10px 0px rgba(145, 145, 145, 1);
|
||
|
||
.rule {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 20rpx;
|
||
z-index: 9;
|
||
font-size: 24rpx;
|
||
line-height: 32rpx;
|
||
color: rgba(255, 255, 255, 0.68);
|
||
}
|
||
|
||
.vip {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
line-height: 32rpx;
|
||
color: #DFBA8B;
|
||
|
||
.lv {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.date {
|
||
font-size: 26rpx;
|
||
line-height: 32rpx;
|
||
color: rgba(223, 186, 139, 0.5);
|
||
}
|
||
|
||
.baibi {
|
||
width: 420rpx;
|
||
|
||
.lv {
|
||
font-size: 24rpx;
|
||
line-height: 40rpx;
|
||
color: #bfbfbf;
|
||
}
|
||
|
||
.w {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
line-height: 44rpx;
|
||
color: #bfbfbf;
|
||
}
|
||
}
|
||
|
||
.custom-style {
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
font-size: 28rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
color: #9B7341;
|
||
border-radius: 10rpx;
|
||
background: linear-gradient(rgba(223, 186, 139, 1), rgba(255, 243, 207, 1));
|
||
}
|
||
}
|
||
|
||
.equity-bail {
|
||
.title {
|
||
font-size: 30rpx;
|
||
line-height: 44rpx;
|
||
color: #101010;
|
||
|
||
.strong {
|
||
font-weight: 600;
|
||
color: #A92924;
|
||
}
|
||
}
|
||
}
|
||
|
||
.o {
|
||
width: 210rpx;
|
||
height: 68rpx;
|
||
font-size: 26rpx;
|
||
line-height: 68rpx;
|
||
color: #A92924;
|
||
text-align: center;
|
||
border: 1px solid #A92924;
|
||
}
|
||
|
||
.active {
|
||
color: #ffffff;
|
||
background: #A92924;
|
||
}
|
||
|
||
.divider {
|
||
margin: 0 auto;
|
||
width: 60%;
|
||
}
|
||
|
||
.divider-box {
|
||
padding: 20rpx 0;
|
||
|
||
.item {
|
||
width: 33.333%;
|
||
height: auto;
|
||
padding: 20rpx 0;
|
||
overflow: hidden;
|
||
|
||
.icon {
|
||
margin: 0 auto;
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
.big {
|
||
font-size: 26rpx;
|
||
line-height: 44rpx;
|
||
color: #5a5a5a;
|
||
text-align: center;
|
||
}
|
||
|
||
.small {
|
||
font-size: 24rpx;
|
||
line-height: 32rpx;
|
||
color: #bfbfbf;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|