gxwebsoft
721 lines
19 KiB
Vue
721 lines
19 KiB
Vue
<template>
|
||
<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;
|
||
|
||
const sdk = new OpenSdk({
|
||
appId: '10037e6f6823b20801682b6a5e5a0006',
|
||
appKey: '1c4e3b16066244ae9b236a09e5b312e8'
|
||
})
|
||
export default {
|
||
components: {UGap},
|
||
data() {
|
||
return {
|
||
paymentIndex: 0,
|
||
payment: ["银联支付"],
|
||
money: 5000,
|
||
showQrcode: false,
|
||
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() {},
|
||
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
|
||
},
|
||
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>
|
||
|
||
<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;
|
||
.level{
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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>
|