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('预览弹窗打开成功');
});