From f3080eea6b6d477f72900899b76ef5ea1d39deb8 Mon Sep 17 00:00:00 2001 From: shenyuan Date: Wed, 8 Feb 2023 16:58:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E8=A3=85=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/shopping/pages/clothDetail.vue | 200 +++++++--- .../src/views/shopping/pages/clothType.vue | 368 ++++++++++-------- 2 files changed, 361 insertions(+), 207 deletions(-) diff --git a/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue b/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue index 9ddbf7e3..aeb4c1fd 100644 --- a/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue +++ b/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue @@ -4,29 +4,33 @@
- 服装类型 - 男装 - 裤子 + 服装类型 + {{ + this.$route.query.parentName + }} + {{ + this.$route.query.name + }} {{ this.$route.query.title }}
- - + + 点击收藏（{{popularity}}人气）
- - -
- - - - + +
@@ -37,31 +41,69 @@

销量：{{sales}}件

价格：¥{{price}}

优惠：{{favour}}

-

促销：{{sell}}详情>>>

+

+ 促销： + + {{sell}} + 收起>>> + + 详情>>> +

颜色:{{color}}
- + 黑 - + 灰 - + 橙 -
尺码:尺码参照表 | 找到您的尺寸
-
- {{item.size}} +
尺码:尺码参照表 | 找到您的尺寸
+ + 这里放尺码参照表 + + 关 闭 + + +
+ + + + +
-
免费配送与退货服务更多详情
+
免费配送与退货服务更多详情
+ + text + + 关 闭 + +
-
使用花呗分期，最低每月¥1182.50。详细说明
+
使用花呗分期，最低每月¥1182.50。详细说明
+ + text + + 关 闭 + +
-
加入购物袋
-
立即购买
+
加入购物袋
+
立即购买
@@ -112,45 +154,56 @@ components: { Header,Footer }, data() { return { - radioValue: 1, + dialogVisible1: false,//控制 尺码参照表 弹窗开关 + dialogVisible2: false,//控制 更多详情 弹窗开关 + dialogVisible3: false,//控制 详细说明 弹窗开关 collectFlag:false,//是否收藏 - popularity:0,//人气 + popularity:172,//人气 title:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制',//标题 sales:2342,//销量 price:13200.00,//价格 favour:'满1100减300',//优惠 - sell:'每满300元，可减40元现金，每满600元，可减80元现金，最多可减40000元 | 距结束还剩',//促销 + sell:'每满300元，可减40元现金，最多可减40000元 | 距结束还剩每满300元，可减40元现金，最多可减40000元 | 距结束还剩 ',//促销 color:'黑色',//颜色 + radioValue: 'black',//选中的颜色 sizeList:[ { id:1, - size:"XXS" + size:"XXS", + flag:false//没有该尺码库存 }, { id:2, - size:"XS" + size:"XS", + flag:true//有该尺码库存 }, { id:3, - size:"S" + size:"S", + flag:true }, { id:4, - size:"M" + size:"M", + flag:true }, { id:5, - size:"L" + size:"L", + flag:false }, { id:6, - size:"XL" + size:"XL", + flag:true }, { id:7, - size:"XXL" + size:"XXL", + flag:true }, - ], + ],//尺码列表 + size:'',//选中的尺码 selectedClothList:[ { id:1, @@ -196,29 +249,90 @@ }; }, methods: { + collectChange(){ + if(!this.collectFlag){ + this.collectFlag = true + this.popularity+=1 + }else{ + this.collectFlag = false + this.popularity-=1 + } + }, onChange(e) { console.log('radio checked', e.target.value); }, + sizeChange(value){ + this.size = value + }, + xiangQing(flag){ + let sell = document.getElementById('sell') + let btn01 = document.getElementById('btn01') + let btn02 = document.getElementById('btn02') + if(flag){ + sell.classList.remove('textfield') + btn01.style.display = 'none' + sell.style.width = '600px' + btn02.style.display = 'inline-block' + }else{ + sell.classList.add('textfield') + sell.style.width = '300px' + + btn01.style.display = 'inline-block' + btn02.style.display = 'none' + + } + + } }, + mounted() { + // let sell = document.getElementById('sell') + // let title = document.getElementById('title') + // console.log('sell') + // console.log(sell) + // console.log(sell.getBoundingClientRect()) + // console.log(title.getBoundingClientRect()) + // console.log(sell.style.width) + } };