From 75ff2f3b19d76f87a0f6761db21bfaf950fec687 Mon Sep 17 00:00:00 2001 From: fanfan Date: Thu, 1 Aug 2024 22:22:54 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=86=E8=8A=82=E9=80=89=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/gamll/index.vue | 288 ++++++++++++++---------------------------- 1 file changed, 94 insertions(+), 194 deletions(-) diff --git a/pages/gamll/index.vue b/pages/gamll/index.vue index fa865c0..f31235f 100644 --- a/pages/gamll/index.vue +++ b/pages/gamll/index.vue @@ -2,7 +2,7 @@ - + @@ -18,14 +18,14 @@ - - - - {{item}} + + + + {{item}} + - @@ -38,6 +38,10 @@ ¥{{Number(item.retail_original_price)}} + + 立减 ¥{{Number(item.jian)}}元 + @@ -63,6 +67,7 @@ ¥{{item.price}} + @@ -73,9 +78,8 @@ - - 1、持有本卡用户可享受先洗衣，后付费服务
2、享受全国服务商家门店9折洗衣服务
3、本卡仅限绑定手机号本人使用
4、本卡一经出售，恕不退换！。
5、本套餐不自动续订，过期用户请再次购买会员 - + + @@ -87,7 +91,7 @@ - + {{a.name}} @@ -101,8 +105,8 @@ - + @@ -113,8 +117,8 @@ - + @@ -125,8 +129,8 @@ - + + @@ -236,7 +240,9 @@ retail: null, show: false, content_description: '', - feature_name: '' + feature_name: '', + retail:'', + wholesale:'' } }, onLoad() { @@ -387,172 +393,27 @@ status, message, data - } = await api.describe(); + } = await api.describe({type:this.tabIndex==0?10:20}); if (status == 200) { - let all = { - feature: '功能', - air: 'air', - airIndex: 1, - pro: 'pro', - proIndex: 1, - H5: 'H5', - H5Index: 1, - function_description: '说明', - plate_id: 1 - } - - let list = [{ - name: '商品', + let list = Object.values(data.group) + let all = [{ + name: '板块', list: [{ - H5: "1998元/年", - air: "2998元/年", - create_time: "2024-07-30 20:54:45", - description_status: 10, - feature: "指导价格", - function_description: "", - id: 1, - plate_id: 1, - pro: "3998元/年", - sort: 0, - type: 10, - update_time: "2024-07-30 20:54:45", - }, { - H5: "H5网页", - air: "小程序", - create_time: "2024-07-30 20:54:45", - description_status: 10, - feature: "呈现载体", - function_description: "", - id: 2, - plate_id: 1, - pro: "小程序", - sort: 0, - type: 10, - update_time: "2024-07-30 20:54:45", - }, { - H5: "20", - air: "20", - create_time: "2024-07-30 20:54:45", - description_status: 10, - feature: "商品上架2", - function_description: "支持批量多电商平台多数量的商品一键上架，需先进行API接口配置444", - id: 4, - plate_id: 1, - pro: "10", - sort: 0, - type: 10, - update_time: "2024-07-30 20:54:45", - }, { - H5: "10", - air: "10", - create_time: "2024-07-30 20:54:45", - description_status: 10, - feature: "批量上架", - function_description: "通过PC端EXCEL表一键导入商品到系统，实现自动上架，高效快捷", - id: 5, - plate_id: 1, - pro: "10", - sort: 0, - type: 10, - update_time: "2024-07-30 20:54:45", - }] - }, { - name: '订单', - list: [{ - H5: "10", - air: "10", - create_time: "2024-07-30 20:54:45", - description_status: 10, - feature: "全部订单", - function_description: "展示全部商品订单", - id: 26, - plate_id: 3, - pro: "10", - sort: 0, - type: 10, - update_time: "2024-07-30 20:54:45", - }, { - H5: "10", - air: "10", - create_time: "2024-07-30 20:54:45", - description_status: 10, - feature: "订单详情", - function_description: "展示订单的商品型号、价格、数量、运费、支付方式、配送方式、付款状态、发货状态、收货状态、订单状态、订单留言、商家备注", - id: 27, - plate_id: 3, - pro: "10", - sort: 0, - type: 10, - update_time: "2024-07-30 20:54:45", - }, { - H5: "10", - air: "10", - create_time: "2024-07-30 20:54:45", - description_status: 10, - feature: "复制订单", - function_description: "可以一键复制订单号、商品名称、商品编码、单价、数量、总价、收件人、电话、地址，方便复制粘贴调货下单代发使用", - id: 28, - plate_id: 3, - pro: "10", - sort: 0, - type: 10, - update_time: "2024-07-30 20:54:45", - }, { - H5: "10", - air: "10", - create_time: "2024-07-30 20:54:45", - description_status: 10, - feature: "订单备注", - function_description: "订单状态以及处理订单的每一个环节或者步骤，都可以自由备注文字和图片，系统会自动记录备注人和备注日期，方便更好的服务", - id: 29, - plate_id: 3, - pro: "10", - sort: 0, - type: 10, - update_time: "2024-07-30 20:54:45", - }] - }, { - name: '其他', - list: [{ - H5: "20", - air: "10", - create_time: "2024-07-30 20:54:45", - description_status: 10, - feature: "回收列表", - function_description: "家电回收、手机回收、平板回收、电脑回收等回收类目，可以自建更多回收商品类型", - id: 51, - plate_id: 5, - pro: "10", - sort: 0, - type: 10, - update_time: "2024-07-30 20:54:45", - }, { - H5: "20", - air: "10", - create_time: "2024-07-30 20:54:45", - description_status: 10, - feature: "回收分类", - function_description: "商家自定义回收分类，比如：电视回收、空调回收、洗衣机回收、手机回收、平板回收、手表回收、电脑回收等", - id: 52, - plate_id: 5, - pro: "10", - sort: 0, - type: 10, - update_time: "2024-07-30 20:54:45", + feature: '功能', + air: 'air', + airIndex: 1, + pro: 'pro', + proIndex: 1, + H5: 'H5', + H5Index: 1, + function_description: '说明', + plate_id: 1 }] + }] - list[0].list.unshift(all) - this.equityList = list + list = all.concat(list) console.log(list) - // const objectData = data.group.reduce((acc, item, index) => { - // acc[index]=[item] - // return acc; - // }, {}); - // console.log(acc) - // // data.group[1].unshift(all) - // // this.equityList = data.group - // // console.log(this.equityList) - + this.equityList = list } else { that.$toast(message) @@ -572,8 +433,13 @@ } = await api.retailList(pames); if (status == 200) { that.userInfo = data.list.personal; + data.list.list.forEach(item => { + item.jian=Number((Number(item.retail_original_price)-Number(item.retail_current_price)).toFixed(2)) + }) that.tabType = data.list.list - that.paymentMethods = data.list.paymentMethods + that.paymentMethods = data.list.paymentMethods; + that.retail=data.list.retail + that.wholesale=data.list.wholesale that.getBan() } else { that.$toast(message) @@ -754,17 +620,17 @@ margin: 0 17rpx; .tab-pro-active { - border: 4rpx solid rgba(251, 197, 198, 1) !important; + background: linear-gradient(180deg, rgba(255, 238, 237, 1) 0%, rgba(255, 202, 201, 1) 66.15%, rgba(255, 173, 173, 1) 100%) !important; + border: 4rpx solid rgba(243, 74, 64, 1) !important; } .tab-pro { margin: 20rpx 13rpx 0 13rpx; width: 214rpx; height: 248rpx; - border-radius: 48rpx; - background-color: rgba(255, 255, 255, 1); - background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 217, 217, 0.01) 100%); - border: 4rpx solid #D6D6D6; + border-radius: 20rpx; + background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(255, 217, 217, 0.01) 100%); + border: 4rpx solid rgba(255, 235, 235, 1); overflow: hidden; position: relative; @@ -775,7 +641,7 @@ letter-spacing: 0rpx; line-height: 42rpx; color: rgba(51, 51, 51, 1); - margin-top: 40rpx; + margin-top: 35rpx; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; @@ -789,9 +655,9 @@ width: 100%; font-size: 48rpx; font-weight: 700; - line-height: 68rpx; + line-height: 55rpx; color: rgba(243, 74, 64, 1); - margin: 8rpx 0; + margin: 8rpx 0 0 0; } .tab-line { @@ -815,6 +681,27 @@ right: -50rpx; bottom: -50rpx; } + + .tab-jian-active { + background: rgba(243, 74, 64, 1) !important; + } + + .tab-jian { + position: absolute; + bottom: 0; + width: 100%; + height: 48rpx; + opacity: 1; + border-radius: 0rpx 0rpx, 20rpx, 20rpx; + background: rgba(255, 161, 162, 1); + line-height: 48rpx; + text-align: center; + opacity: 1; + font-size: 24rpx; + font-weight: 400; + color: rgba(255, 255, 255, 1); + + } } } @@ -834,10 +721,21 @@ width: 336rpx; height: 144rpx; border-radius: 20rpx; - background: rgba(243, 74, 64, 0.06); - border: 2rpx solid #D6D6D6; + background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 243, 242, 0.89) 100%); + border: 4rpx solid rgba(255, 235, 235, 1); position: relative; + // .tab-quan { + // border-radius: 50%; + // width: 132rpx; + // height: 132rpx; + // transform: rotate(-44.85deg); + // border: 40rpx solid rgba(243, 74, 64, 0.06); + // position: absolute; + // right: -50rpx; + // bottom: -50rpx; + // overflow: hidden; + // } .favour_active { z-index: 99; top: -20rpx; @@ -852,7 +750,6 @@ font-weight: 400; letter-spacing: 0rpx; color: rgba(255, 255, 255, 1); - } .favour_infor { @@ -889,8 +786,11 @@ } } + + .favourActive { - border: 2rpx solid rgba(243, 74, 64, 1) !important; + background: linear-gradient(91.32deg, rgba(255, 248, 247, 0.56) 0%, rgba(255, 185, 181, 1) 100%) !important; + border: 4rpx solid rgba(243, 74, 64, 1) !important; } } @@ -920,9 +820,9 @@ .equity { margin-bottom: 60rpx; position: relative; + max-height: 1800rpx; + overflow: auto; - // max-height: 1400rpx; - // overflow: auto; .table_box { overflow: hidden; border-radius: 20rpx;