b2894lxlx/jjx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善平台权益页面和修复链接

Browse Source
This commit is contained in:
gxwebsoft
2023-12-05 19:32:39 +08:00
parent b7d83b0dae
commit e08f597845
4 changed files with 761 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/user/components/equity.vue
+400 -75
View File
@@ -1,81 +1,120 @@
<template>
<el-card>
<div slot="header" class="clearfix">
<span>交易保证金缴纳</span>
</div>
<div class="bzj-price">
<div class="item" :class="money === 5000 ? 'active' : ''" @click="onChange(5000)">
<div class="item-box">
<div class="title">保证金</div>
<div class="info">
<text class="price">￥5000</text>
<text class="desc">文字信息后台编辑</text>
</div>
</div>
<div class="select">
<div class="icon">
<i class="el-icon-check"></i>
</div>
</div>
</div>
<div class="item" :class="money === 10000 ? 'active' : ''" @click="onChange(10000)">
<div class="item-box">
<div class="title">保证金</div>
<div class="info">
<text class="price">￥10000</text>
<text class="desc">文字信息后台编辑</text>
</div>
</div>
<div class="select">
<div class="icon">
<i class="el-icon-check"></i>
</div>
</div>
</div>
<div class="item" :class="money === 20000 ? 'active' : ''" @click="onChange(20000)">
<div class="item-box">
<div class="title">保证金</div>
<div class="info">
<text class="price">￥20000</text>
<text class="desc">文字信息后台编辑</text>
</div>
</div>
<div class="select">
<div class="icon">
<i class="el-icon-check"></i>
</div>
</div>
</div>
</div>
<div class="bzj-readme">
<div class="sub-title">保证金说明</div>
<div class="content">
保证金说明内容...
</div>
</div>
<div class="payment">
<div class="sub-title">支付方式</div>
<div 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>
</div>
</div>
<div class="pay-price">
<div class="sub-title">支付金额：￥{{ money }}元</div>
</div>
<div class="pay-price" v-if="billQRCode">
<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
<div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
<el-button type="success" @click="onPayStatus">已完成支付</el-button>
</div>
<el-button v-else type="danger" @click="onPay">立即支付</el-button>
<el-card shadow="never">
<view class="welcome">
尊敬的平台商家您好，目前您是我们平台的 <text>黄金VIP LV1</text> 客户，可享受相应会员权益~
</view>
<view class="user-info">
<view class="left">
<view class="member-card">
<view class="card-name">
<text class="name">黄金VIP</text>
<text class="level">LV1</text>
<text class="grade">
当前等级
</text>
</view>
<view class="exp-time">
有效期至：2023-09-18
</view>
<view class="progress-box">
<view class="left">
<view class="total-pay">当前交易额</view>
<view class="progress">
<view class="price">60W</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">
<el-image src="https://oss.wsdns.cn/20231205/aecd46b81f8b452c9294ae36ab8404f5.png" />
</view>
</view>
</view>
</view>
<view class="right">
<view class="bzj-title">当前保证金<text>1000078</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">
<el-image src="https://oss.wsdns.cn/20231205/5ba845c9570e4fba95516b68ae661056.png" />
<!-- <i class="el-icon-minus"></i>-->
<!-- <text>可享受一下权益</text>-->
<!-- <i class="el-icon-minus"></i>-->
</view>
<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">黄金VIP</div>
<div class="title">铂金VIP</div>
<div class="title">钻石VIP</div>
<div class="title">实力厂家</div>
<div class="title">实力商家</div>
<div class="title">实力加工厂</div>
</div>
</div>
<div class="item" v-for="(item, index) in gradeList" :key="index" @click="onChange(index)">
<div class="item-box">
<div class="title">{{ item.grade }}</div>
<div class="title">{{ item.code }}</div>
<div class="title">{{ item.name }}</div>
<div class="title">{{ item.type }}</div>
<div class="title">{{ item.price }}</div>
<div class="title">{{ item.company }}</div>
<div class="title"></div>
<div class="title">{{ item.comments }}</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>
</div>
<div class="item" v-for="(item, index) in gradeList" :key="index" @click="onChange(index)">
<div class="item-box">
<div class="title">2023-01-01</div>
<div class="title">缴纳保证金</div>
<div class="title">￥20000</div>
<div class="title">钻石VIP LV1</div>
</div>
</div>
<view class="paginatio">
<el-pagination
@current-change="search"
background
layout="prev, pager, next"
:total="10">
</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";
const OpenSdk = require('../lib/base').default;
// const OpenSdk = require('ums-sdk-nodejs').default;
@@ -84,14 +123,61 @@
appKey: '1c4e3b16066244ae9b236a09e5b312e8'
})
export default {
components: {},
components: {UGap},
data() {
return {
paymentIndex: 0,
payment: ["银联支付"],
money: 5000,
showQrcode: false,
billQRCode: ''
billQRCode: '',
gradeIndex: 0,
gradeList: [
{
id: 1,
grade: '身份图标',
code: '金久信认证(图)',
name: '供应商实力考查',
type: '元/次',
price: 150,
company: '金久信',
select: 1,
comments: '实现视频并记录存档，收集相关纸质文件'
},
{
id: 2,
grade: '认证缴费',
code: '黄金VIP(图)',
name: '供应商实力考查',
type: '元/次',
price: 150,
company: '金久信',
select: 0,
comments: '实现视频并记录存档，收集相关纸质文件'
},
{
id: 3,
grade: '获得身份方式',
code: '铂金VIP(图)',
name: '供应商实力考查',
type: '元/次',
price: 150,
company: '金久信',
select: 0,
comments: '实现视频并记录存档，收集相关纸质文件'
},
{
id: 4,
grade: '获得身份方式',
code: '钻石VIP',
name: '供应商实力考查',
type: '元/次',
price: 150,
company: '金久信',
select: 0,
comments: '实现视频并记录存档，收集相关纸质文件'
},
]
}
},
created() {},
@@ -169,7 +255,36 @@
};
};
return fmt
}
},
navTo(url) {
vk.navigateTo(url);
},
showForm(index){
this.$emit('done',index);
},
search(pageIndex) {
// vk.callFunction({
// url: 'client/spot/goods/pub/getList',
// data: {
// pageIndex: pageIndex,
// pageSize: 20,
// keyword: this.keyword,
// categoryIds: this.checkCategoryList,
// provinceCodes: this.checkProvinceList
// },
// success: (data) => {
// console.log('data: ', data);
// data.rows.forEach(item => {
// try {
// item.addressStr = item.address.province.name + "-" + item.address.city.name + "-" + item.address.area.name
// } catch (err) {
// item.addressStr = ""
// }
// })
// this.goodsData = data
// }
// });
},
}
}
</script>
@@ -300,4 +415,214 @@
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;
}
}
}
}
.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;
.title {
padding: 10px;
border-right: 1px solid #eee;
display: flex;
align-items: center;
flex: 1;
justify-content: center;
text-align: center;
}
.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>