优化界面

components/detail-preview-popup/detail-preview-popup.vue

@@ -16,31 +16,47 @@
 
           <!-- 背面：赏品列表 -->
           <view class="back">
-            <view class="list"  @click="toggleList">
+            <scroll-view class="list" :scroll-y="true">
-              <scroll-view :scroll-y="true">
+              <!-- 加载中状态 -->
-                <view class="res-list">
+              <view class="loading-container center" v-if="loading">
-                  <view class="res-item" v-for="(item, i) in dataItem.children" :key="i">
+                <view class="loading-text">加载中...</view>
+              </view>
+              <!-- 赏品列表内容 -->
+              <view class="res-list" v-else>
+                <view class="res-item" v-for="(item, i) in children" :key="i" @click.stop="handleItemClick(item)">
                   <view class="pic center">
                     <image :src="item.imgurl" lazy-load></image>
                     <view class="tag center"
-                        :style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">{{ item.shang_info ?
+                      :style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">{{
+                        item.shang_info ?
                           item.shang_info.title : "" }}</view>
                     <view class="num center">{{ item.surplus_stock }}/{{ item.stock }}</view>
+                    <!-- 售罄遮罩 -->
+                    <view class="sold-out-mask center" v-if="item.surplus_stock <= 0">
+                      <text>售罄</text>
                     </view>
-                    <view class="title hang1 flex center " style="padding: 0px;margin: 0px;text-align: center;width: 100%;">
+                  </view>
+                  <view>
+                    <view class="item-title hang1" style="margin-top:5rpx;">
                       <text> {{ item.title }}</text>
                     </view>
+                    <view class="item-title hang1">
+                      <text style="color: #f39205;"> {{ item.pro }}</text>
+                    </view>
+                    <view class="item-title hang1">
+                      <text>售价：{{ item.price }}</text>
+                    </view>
+                  </view>
                 </view>
               </view>
             </scroll-view>
           </view>
         </view>
       </view>
-      </view>
 
       <!-- 商品标题 -->
       <view class="title" @click="toggleList">
-        <text class="hang1">{{ !showList?innerTitle:'抽中宝箱后，会在奖品列表中随机抽取一个奖品' }}</text>
+        <text class="hang1">{{ !showList ? innerTitle : '抽中宝箱后，会在奖品列表中随机抽取一个奖品' }}</text>
       </view>
 
       <!-- 商品信息列表 -->
@@ -109,7 +125,10 @@ export default {
       innerExtraInfo: [],
       dataItem: {},
       showList: false,
-      isTips: false
+      isTips: false,
+      children: [],
+      goods: null,
+      loading: false
     }
   },
   watch: {
@@ -150,6 +169,12 @@ export default {
     uni.$off('global-preview-event', this.handleGlobalEvent);
   },
   methods: {
+    handleItemClick(item) {
+      console.log('点击了', item);
+      this.$emit('itemClick', item);
+
+
+    },
     // 处理全局预览事件
     handleGlobalEvent(options) {
       console.log('收到全局预览事件', options);
@@ -158,7 +183,10 @@ export default {
 
     // 切换列表显示状态，添加动画效果
     toggleList() {
-      if(this.isTips){
+      if (this.isTips) {
+        if (this.children.length == 0) {
+          this.loadChildren();
+        }
         this.showList = !this.showList;
       }
     },
@@ -177,12 +205,15 @@ export default {
       if (data.extraInfo !== undefined) this.innerExtraInfo = data.extraInfo;
       this.showList = false;
       this.isTips = false;
-      if (data.dataItem !== undefined) {
+      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;
-        if (data.dataItem != null && data.dataItem.children != null && data.dataItem.children.length > 0) {
-          this.showList = false;
           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;
+    },
   }
 }
 </script>
@@ -253,7 +303,8 @@ export default {
       height: 100%;
     }
 
-    .front, .back {
+    .front,
+    .back {
       backface-visibility: hidden;
       position: absolute;
       top: 0;
@@ -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;
+    }
+  }
 }
 </style>

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