Merge remote-tracking branch 'origin/master'
This commit is contained in:
@@ -1,81 +1,199 @@
|
||||
<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">
|
||||
<div class="item-box">
|
||||
<div class="title">身份图标</div>
|
||||
<div class="title"><el-image class="level" src="https://oss.wsdns.cn/20231205/cb35648023de4c40a0790c275962222f.png"></el-image> </div>
|
||||
<div class="title"><el-image class="level" src="https://oss.wsdns.cn/20231205/9816e24079d349068f52ba45c2786fb5.png"></el-image></div>
|
||||
<div class="title"><el-image class="level" src="https://oss.wsdns.cn/20231205/11f497e8c11d45bb97b1939ac8ed68a1.png"></el-image></div>
|
||||
<div class="title"><el-image class="level" src="https://oss.wsdns.cn/20231205/45ae2b50ca044f208edf2f411ed72da1.png"></el-image></div>
|
||||
<div class="title"><el-image class="level" src="https://oss.wsdns.cn/20231205/10ae319c1bb045d3b871046c85f97432.png"></el-image></div>
|
||||
<div class="title"><el-image class="level" src="https://oss.wsdns.cn/20231205/cea0d711c9004c57b14aec491e48c3ff.png"></el-image></div>
|
||||
<div class="title"><el-image class="level" src="https://oss.wsdns.cn/20231205/a7445b2a6c224aee9115317f29867851.png"></el-image></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-box">
|
||||
<div class="title">认证缴费</div>
|
||||
<div class="title red">去认证<i class="el-icon-arrow-right"></i></div>
|
||||
<div class="title red">去认证<i class="el-icon-arrow-right"></i></div>
|
||||
<div class="title red">去认证<i class="el-icon-arrow-right"></i></div>
|
||||
<div class="title red">去认证<i class="el-icon-arrow-right"></i></div>
|
||||
<div class="title red">去认证<i class="el-icon-arrow-right"></i></div>
|
||||
<div class="title red">去认证<i class="el-icon-arrow-right"></i></div>
|
||||
<div class="title red">去认证<i class="el-icon-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-box">
|
||||
<div class="title">获得身份方式</div>
|
||||
<div class="title">
|
||||
<div class="get-way">
|
||||
<div>企业平台认证</div>
|
||||
<div>VIP认证方法</div>
|
||||
<div class="red">去升级<i class="el-icon-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="get-way">
|
||||
<div>购买</div>
|
||||
<div>999元/年</div>
|
||||
<div class="red">去升级<i class="el-icon-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="get-way">
|
||||
<div>购买</div>
|
||||
<div>1999元/年</div>
|
||||
<div class="red">去升级<i class="el-icon-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="get-way">
|
||||
<div>购买</div>
|
||||
<div>5999元/年</div>
|
||||
<div class="red">去升级<i class="el-icon-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="get-way">
|
||||
<div>购买+交易保证金</div>
|
||||
<div>5999+20000</div>
|
||||
<div class="red">去升级<i class="el-icon-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="get-way">
|
||||
<div>购买+交易保证金</div>
|
||||
<div>5999+20000</div>
|
||||
<div class="red">去升级<i class="el-icon-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="get-way">
|
||||
<div>购买+交易保证金</div>
|
||||
<div>5999+20000</div>
|
||||
<div class="red">去升级<i class="el-icon-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-box">
|
||||
<div class="title">询报价权益</div>
|
||||
<div class="title">-</div>
|
||||
<div class="title">-</div>
|
||||
<div class="title">-</div>
|
||||
<div class="title">-</div>
|
||||
<div class="title">-</div>
|
||||
<div class="title">-</div>
|
||||
<div class="title">-</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 +202,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 +334,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>
|
||||
@@ -199,6 +393,10 @@
|
||||
width: 40px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
.level{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
@@ -300,4 +498,223 @@
|
||||
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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -4,41 +4,10 @@
|
||||
<span>会员等级</span>
|
||||
</div>
|
||||
<div class="grade-list">
|
||||
<div class="item" :class="money === 5000 ? 'active' : ''" @click="onChange(5000)">
|
||||
<div class="item" v-for="(item,index) in gradeList" :key="index" :class="gradeIndex === index ? 'active' : ''" @click="onChange(index)">
|
||||
<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 class="title">{{ item.name }}</div>
|
||||
<div class="title">{{ item.price }}</div>
|
||||
</div>
|
||||
<div class="select">
|
||||
<div class="icon">
|
||||
@@ -91,7 +60,40 @@
|
||||
payment: ["银联支付"],
|
||||
money: 5000,
|
||||
showQrcode: false,
|
||||
billQRCode: ''
|
||||
billQRCode: '',
|
||||
gradeIndex: 1,
|
||||
gradeList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '黄金VIP',
|
||||
price: '699元/年'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '铂金VIP',
|
||||
price: '1999元/年'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '钻石VIP',
|
||||
price: '2999元/年'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '实力厂家',
|
||||
price: '20000元/年+交易保证金'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '实力加工厂',
|
||||
price: '20000元/年+交易保证金'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '实力采购商',
|
||||
price: '20000元/年+交易保证金'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
@@ -108,8 +110,8 @@
|
||||
});
|
||||
|
||||
},
|
||||
onChange(money) {
|
||||
this.money = money
|
||||
onChange(index) {
|
||||
this.gradeIndex = index
|
||||
},
|
||||
onPay() {
|
||||
const date = new Date()
|
||||
@@ -182,6 +184,7 @@
|
||||
|
||||
.grade-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
@@ -193,10 +196,9 @@
|
||||
|
||||
.title {
|
||||
padding: 10px;
|
||||
border-right: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -229,7 +231,6 @@
|
||||
|
||||
.item-box {
|
||||
.title {
|
||||
border-right: 2px solid #bf2b28 !important;
|
||||
color: #bf2b28;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,303 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UQRCode from 'uqrcodejs';
|
||||
const OpenSdk = require('../lib/base').default;
|
||||
// const OpenSdk = require('ums-sdk-nodejs').default;
|
||||
|
||||
const sdk = new OpenSdk({
|
||||
appId: '10037e6f6823b20801682b6a5e5a0006',
|
||||
appKey: '1c4e3b16066244ae9b236a09e5b312e8'
|
||||
})
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
paymentIndex: 0,
|
||||
payment: ["银联支付"],
|
||||
money: 5000,
|
||||
showQrcode: false,
|
||||
billQRCode: ''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
vk.userCenter.getCurrentUserInfo({
|
||||
success: (data) => {
|
||||
if (data.userInfo.businessCard) {
|
||||
this.form1.data = data.userInfo.businessCard
|
||||
}
|
||||
// 成功后的逻辑
|
||||
console.log('用户信息: ', data);
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
onChange(money) {
|
||||
this.money = money
|
||||
},
|
||||
onPay() {
|
||||
const date = new Date()
|
||||
const requestTimestamp = this.dateFormat('YYYY-mm-dd HH:MM:SS', date)
|
||||
const timestamp = this.dateFormat('YYYYmmddHHMMSS', date)
|
||||
console.log(timestamp)
|
||||
console.log(requestTimestamp)
|
||||
let data = {
|
||||
queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
|
||||
timestamp,
|
||||
nonce: 'rp84ufhfn20yneo3tp',
|
||||
content: {
|
||||
requestTimestamp,
|
||||
mid: '898201612345678',
|
||||
tid: '88880001',
|
||||
instMid: 'QRPAYDEFAULT',
|
||||
totalAmount: 1,
|
||||
notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 调用函数
|
||||
*/
|
||||
sdk.exec(data).then(res => {
|
||||
const h = this.$createElement;
|
||||
const result = JSON.parse(res);
|
||||
if (result.errCode === 'SUCCESS') {
|
||||
this.showQrcode = true
|
||||
this.billQRCode = result.billQRCode
|
||||
// this.$alert('', '请打开手机微信，扫一扫完成支付', {
|
||||
// confirmButtonText: '确定',
|
||||
// callback: action => {
|
||||
// this.$message({
|
||||
// type: 'success',
|
||||
// message: `已完成支付`
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
}
|
||||
})
|
||||
},
|
||||
dateFormat(fmt, date) {
|
||||
const opt = {
|
||||
"Y+": date.getFullYear().toString(), // 年
|
||||
"m+": (date.getMonth() + 1).toString(), // 月
|
||||
"d+": date.getDate().toString(), // 日
|
||||
"H+": date.getHours().toString(), // 时
|
||||
"M+": date.getMinutes().toString(), // 分
|
||||
"S+": date.getSeconds().toString() // 秒
|
||||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||
};
|
||||
let ret
|
||||
for (let k in opt) {
|
||||
ret = new RegExp("(" + k + ")").exec(fmt)
|
||||
if (ret) {
|
||||
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
||||
};
|
||||
};
|
||||
return fmt
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
|
||||
.title {
|
||||
padding: 10px;
|
||||
border-right: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
+21
-12
@@ -24,27 +24,32 @@
|
||||
<i class="el-icon-wallet"></i>
|
||||
<span slot="title">平台权益</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="grade">
|
||||
<i class="el-icon-user"></i>
|
||||
<span slot="title">会员等级(临时)</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="added">
|
||||
<i class="el-icon-medal"></i>
|
||||
<span slot="title">购买增值服务(临时)</span>
|
||||
</el-menu-item>
|
||||
<!-- <el-menu-item index="grade">-->
|
||||
<!-- <i class="el-icon-user"></i>-->
|
||||
<!-- <span slot="title">会员等级(临时)</span>-->
|
||||
<!-- </el-menu-item>-->
|
||||
<!-- <el-menu-item index="added">-->
|
||||
<!-- <i class="el-icon-medal"></i>-->
|
||||
<!-- <span slot="title">购买增值服务(临时)</span>-->
|
||||
<!-- </el-menu-item>-->
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<personal v-if="currMenu === 'fadada'"></personal>
|
||||
<business-card v-else-if="currMenu === 'business-card'"></business-card>
|
||||
<seal v-else-if="currMenu === 'seal'"></seal>
|
||||
<equity v-else-if="currMenu === 'equity'"></equity>
|
||||
<grade v-else-if="currMenu === 'grade'"></grade>
|
||||
<Added v-else-if="currMenu === 'added'"></Added>
|
||||
<equity v-else-if="currMenu === 'equity'" @done="onDone"></equity>
|
||||
<payment v-else-if="currMenu === 'payment'" @done="onDone"></payment>
|
||||
<grade v-else-if="currMenu === 'grade'" @done="onDone"></grade>
|
||||
<Added v-else-if="currMenu === 'added'" @done="onDone"></Added>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</view>
|
||||
<!-- 现货市场 end -->
|
||||
<gap height="100"/>
|
||||
<common-footer></common-footer>
|
||||
<right-bar></right-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -55,9 +60,10 @@ import Seal from './components/seal'
|
||||
import Equity from './components/equity'
|
||||
import Grade from './components/grade'
|
||||
import Added from './components/added'
|
||||
import Payment from './components/payment'
|
||||
|
||||
export default {
|
||||
components: {Personal, BusinessCard, Seal, Equity, Grade, Added},
|
||||
components: {Personal, BusinessCard, Seal, Equity, Grade, Added, Payment},
|
||||
data() {
|
||||
return {
|
||||
currMenu: 'fadada',
|
||||
@@ -71,6 +77,9 @@ export default {
|
||||
methods: {
|
||||
menuSelect(e) {
|
||||
this.currMenu = e
|
||||
},
|
||||
onDone(index){
|
||||
this.currMenu = index
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user