From e08f59784538428c10b3e47b021508078e5817df Mon Sep 17 00:00:00 2001 From: gxwebsoft Date: Tue, 5 Dec 2023 19:32:39 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=B9=B3=E5=8F=B0?= =?UTF-8?q?=E6=9D=83=E7=9B=8A=E9=A1=B5=E9=9D=A2=E5=92=8C=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/user/components/equity.vue | 475 +++++++++++++++++++++++++----- pages/user/components/grade.vue | 81 ++--- pages/user/components/payment.vue | 303 +++++++++++++++++++ pages/user/user.vue | 29 +- 4 files changed, 761 insertions(+), 127 deletions(-) create mode 100644 pages/user/components/payment.vue diff --git a/pages/user/components/equity.vue b/pages/user/components/equity.vue index 1a473ca..e29c194 100644 --- a/pages/user/components/equity.vue +++ b/pages/user/components/equity.vue @@ -1,81 +1,120 @@ @@ -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; + } diff --git a/pages/user/components/grade.vue b/pages/user/components/grade.vue index f272e5d..7fbc44d 100644 --- a/pages/user/components/grade.vue +++ b/pages/user/components/grade.vue @@ -4,41 +4,10 @@ 会员等级
-
+
-
保证金
-
- ￥5000 - 文字信息后台编辑 -
-
-
-
- -
-
-
-
-
-
保证金
-
- ￥10000 - 文字信息后台编辑 -
-
-
-
- -
-
-
-
-
-
保证金
-
- ￥20000 - 文字信息后台编辑 -
+
{{ item.name }}
+
{{ item.price }}
@@ -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; } diff --git a/pages/user/components/payment.vue b/pages/user/components/payment.vue new file mode 100644 index 0000000..1a473ca --- /dev/null +++ b/pages/user/components/payment.vue @@ -0,0 +1,303 @@ + + + + + diff --git a/pages/user/user.vue b/pages/user/user.vue index b9aab05..fb83011 100644 --- a/pages/user/user.vue +++ b/pages/user/user.vue @@ -24,23 +24,24 @@ 平台权益 - - - 会员等级(临时) - - - - 购买增值服务(临时) - + + + + + + + + - - - + + + + @@ -55,9 +56,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 +73,9 @@ export default { methods: { menuSelect(e) { this.currMenu = e + }, + onDone(index){ + this.currMenu = index } } } From 6b2f34c3a12b5983b77eeaacd1e5761588b547a1 Mon Sep 17 00:00:00 2001 From: gxwebsoft Date: Tue, 5 Dec 2023 20:01:15 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=B9=B3=E5=8F=B0?= =?UTF-8?q?=E6=9D=83=E7=9B=8A=E9=A1=B5=E9=9D=A2=E5=92=8C=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/user/components/equity.vue | 110 ++++++++++++++++++++++++++++--- 1 file changed, 101 insertions(+), 9 deletions(-) diff --git a/pages/user/components/equity.vue b/pages/user/components/equity.vue index e29c194..2f229d1 100644 --- a/pages/user/components/equity.vue +++ b/pages/user/components/equity.vue @@ -67,16 +67,95 @@
实力加工厂
-
+
-
{{ item.grade }}
-
{{ item.code }}
-
{{ item.name }}
-
{{ item.type }}
-
{{ item.price }}
-
{{ item.company }}
-
-
{{ item.comments }}
+
身份图标
+
+
+
+
+
+
+
+
+
+
+
+
认证缴费
+
去认证
+
去认证
+
去认证
+
去认证
+
去认证
+
去认证
+
去认证
+
+
+
+
+
获得身份方式
+
+
+
企业平台认证
+
VIP认证方法
+
去升级
+
+
+
+
+
购买
+
999元/年
+
去升级
+
+
+
+
+
购买
+
1999元/年
+
去升级
+
+
+
+
+
购买
+
5999元/年
+
去升级
+
+
+
+
+
购买+交易保证金
+
5999+20000
+
去升级
+
+
+
+
+
购买+交易保证金
+
5999+20000
+
去升级
+
+
+
+
+
购买+交易保证金
+
5999+20000
+
去升级
+
+
+ +
+
+
+
+
询报价权益
+
-
+
-
+
-
+
-
+
-
+
-
+
-
@@ -314,6 +393,10 @@ width: 40px; justify-content: center; text-align: center; + .level{ + width: 80px; + height: 80px; + } } .info { @@ -542,6 +625,9 @@ .item-box { display: flex; font-size: 14px; + .red{ + color: #bf2b28; + } .title { padding: 10px; @@ -551,6 +637,12 @@ flex: 1; justify-content: center; text-align: center; + .get-way{ + display: flex; + flex-direction: column; + font-size: 13px; + line-height: 2em; + } } .info { From 5097ff07230fb8b81ca2fc60f9f4f0345ac1316b Mon Sep 17 00:00:00 2001 From: gxwebsoft Date: Tue, 5 Dec 2023 20:02:18 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=B9=B3=E5=8F=B0?= =?UTF-8?q?=E6=9D=83=E7=9B=8A=E9=A1=B5=E9=9D=A2=E5=92=8C=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/user/user.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/pages/user/user.vue b/pages/user/user.vue index fb83011..7426c96 100644 --- a/pages/user/user.vue +++ b/pages/user/user.vue @@ -46,6 +46,10 @@ + + + +