From 93e75199c8e8dccbedbade821d4a9cc78d19d364 Mon Sep 17 00:00:00 2001 From: zpc Date: Sun, 6 Apr 2025 17:36:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../detail-preview-popup.vue | 182 ++++++++++++++---- pages/shouye/detail.vue | 6 +- 2 files changed, 146 insertions(+), 42 deletions(-) diff --git a/components/detail-preview-popup/detail-preview-popup.vue b/components/detail-preview-popup/detail-preview-popup.vue index 907fed9..f66b9f9 100644 --- a/components/detail-preview-popup/detail-preview-popup.vue +++ b/components/detail-preview-popup/detail-preview-popup.vue @@ -13,36 +13,52 @@ v-if="innerTipTitle">{{ innerTipTitle }} - + - - - - - - - {{ item.shang_info ? + + + + 加载中... + + + + + + + {{ + item.shang_info ? item.shang_info.title : "" }} - {{ item.surplus_stock }}/{{ item.stock }} + {{ item.surplus_stock }}/{{ item.stock }} + + + 售罄 - + + + {{ item.title }} + + {{ item.pro }} + + + 售价：{{ item.price }} + - - + + - + - {{ !showList?innerTitle:'抽中宝箱后，会在奖品列表中随机抽取一个奖品' }} + {{ !showList ? innerTitle : '抽中宝箱后，会在奖品列表中随机抽取一个奖品' }} - + {{ innerProbability }} @@ -50,7 +66,7 @@ 产品类型: {{ innerProductType }} {{ item }} - + @@ -109,7 +125,10 @@ export default { innerExtraInfo: [], dataItem: {}, showList: false, - isTips: false + isTips: false, + children: [], + goods: null, + loading: false } }, watch: { @@ -150,19 +169,28 @@ export default { uni.$off('global-preview-event', this.handleGlobalEvent); }, methods: { + handleItemClick(item) { + console.log('点击了', item); + this.$emit('itemClick', item); + + + }, // 处理全局预览事件 handleGlobalEvent(options) { console.log('收到全局预览事件', options); this.setPreviewData(options); }, - + // 切换列表显示状态，添加动画效果 toggleList() { - if(this.isTips){ + if (this.isTips) { + if (this.children.length == 0) { + this.loadChildren(); + } this.showList = !this.showList; } }, - + // 设置预览数据并打开弹窗 setPreviewData(data) { console.log('设置预览数据', data); @@ -177,12 +205,15 @@ export default { if (data.extraInfo !== undefined) this.innerExtraInfo = data.extraInfo; this.showList = false; this.isTips = false; - if (data.dataItem !== undefined) { - this.dataItem = data.dataItem; - if (data.dataItem != null && data.dataItem.children != null && data.dataItem.children.length > 0) { - this.showList = false; + if (data.dataItem !== undefined && data.goods != null) { + console.log(data.dataItem, data.goods); + if (data.dataItem.goods_type == 4) { + this.goods = data.goods; + this.dataItem = data.dataItem; this.isTips = true; + this.children.splice(0, this.children.length); } + } // 打开弹窗 this.open(); @@ -190,10 +221,9 @@ export default { // 打开弹窗 open() { - console.log('尝试打开弹窗', this.$refs.popup); + // console.log('尝试打开弹窗', this.$refs.popup); this.visible = true; - console.log('打开弹窗', this.dataItem); - + // console.log('打开弹窗', this.dataItem); // 使用nextTick确保DOM更新后再打开弹窗 this.$nextTick(() => { console.log(' '); @@ -214,6 +244,7 @@ export default { }, 300); } }); + }, // 关闭弹窗 @@ -223,7 +254,26 @@ export default { this.$refs.popup.close(); } this.$emit('close'); - } + }, + async loadChildren() { + this.loading = true; + var res = await this.req({ + url: "goods_children", + method: "POST", + Loading:true, + data: { + goods_id: this.goods.id, + goods_num: this.goods.num, + goods_list_id: this.dataItem.id + } + }); + if (res == null || res.status !== 1) { + this.loading = false; + return; + } + this.children = res.data; + this.loading = false; + }, } } @@ -234,17 +284,17 @@ export default { width: 80vw; box-sizing: border-box; height: 850rpx; - + // 翻转卡片相关样式 .flip-container { perspective: 1000px; width: 100%; height: 598rpx; - + &.flipped .flipper { transform: rotateY(180deg); } - + .flipper { transition: 0.8s; transform-style: preserve-3d; @@ -252,8 +302,9 @@ export default { width: 100%; height: 100%; } - - .front, .back { + + .front, + .back { backface-visibility: hidden; position: absolute; top: 0; @@ -263,12 +314,12 @@ export default { border-radius: 16rpx; overflow: hidden; } - + .front { z-index: 2; transform: rotateY(0deg); } - + .back { transform: rotateY(180deg); } @@ -276,6 +327,7 @@ export default { .list { width: 100%; + padding-top: 5rpx; height: 598rpx; background-color: #ffffff; border-radius: 16rpx; @@ -285,11 +337,11 @@ export default { padding: 20rpx 10rpx; display: grid; grid-template-columns: repeat(3, 33%); - gap: 24rpx 10rpx; + gap: 20rpx 8rpx; .res-item { width: 180rpx; - height: 240rpx; + // height: 240rpx; background-color: #f8f8f8; border-radius: 16rpx; @@ -411,7 +463,7 @@ export default { // 关闭按钮 .close { width: 100%; - margin-top:40rpx; + margin-top: 40rpx; display: flex; justify-content: center; align-items: center; @@ -436,5 +488,57 @@ export default { padding: 5rpx 15rpx; border-radius: 25rpx; } + + // 售罄遮罩 + .sold-out-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + display: flex; + justify-content: center; + align-items: center; + border-radius: 16rpx 16rpx 0 0; + z-index: 10; + + text { + font-size: 32rpx; + font-weight: bold; + color: #FFFFFF; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); + } + } + + .item-title { + padding: 0px; + margin: 0px; + width: 100%; + font-size: 20rpx; + text-align: left; + padding-left: 2%; + height: 30rpx; + line-height: 30rpx; + } + + // 加载中样式 + .loading-container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #ffffff; + border-radius: 16rpx; + + .loading-text { + font-size: 28rpx; + color: #333333; + padding: 20rpx 40rpx; + background-color: rgba(0, 0, 0, 0.05); + border-radius: 40rpx; + } + } } \ No newline at end of file diff --git a/pages/shouye/detail.vue b/pages/shouye/detail.vue index dd0f1da..b7da44c 100644 --- a/pages/shouye/detail.vue +++ b/pages/shouye/detail.vue @@ -323,8 +323,7 @@ methods: { previewDetail(item) { - console.log(item); - + console.log(item,this.pageData); // 使用全局方法调用预览弹窗 this.$preview({ title: item.title, @@ -332,7 +331,8 @@ tipTitle: item.shang_info ? item.shang_info.title : '', productType: this.optData.type_text, probability: item.pro, - dataItem: item + dataItem: item, + goods: this.pageData.goods }).then(() => { console.log('预览弹窗打开成功'); });