From 94fdca9d82e8b360e1193c5b6494ffbe84a80f6b Mon Sep 17 00:00:00 2001
From: jiazhipeng <jiazhipeng@xmainc.com>
Date: Tue, 26 Aug 2025 09:43:46 +0800
Subject: [PATCH] 1

---
 pages/info/postProductInfo/index.js   |   6 +
 pages/info/postProductInfo/index.wxml |  54 +++++---
 pages/info/postProductInfo/index.wxss | 172 ++++++++++++++++++--------
 3 files changed, 165 insertions(+), 67 deletions(-)

diff --git a/pages/info/postProductInfo/index.js b/pages/info/postProductInfo/index.js
index fdc8505..0c6d2ad 100644
--- a/pages/info/postProductInfo/index.js
+++ b/pages/info/postProductInfo/index.js
@@ -751,6 +751,12 @@ Page({
         })
         console.log(e, this.data.swiperCurrent)
     },
+    changeSwiperCurrent (e) {
+        let index = e.currentTarget.dataset.index
+        this.setData({
+            swiperCurrent: index
+        })
+    },
 
     /**
      * 生命周期函数--监听页面初次渲染完成
diff --git a/pages/info/postProductInfo/index.wxml b/pages/info/postProductInfo/index.wxml
index 7fb2e06..3f7deb1 100644
--- a/pages/info/postProductInfo/index.wxml
+++ b/pages/info/postProductInfo/index.wxml
@@ -3,7 +3,7 @@
 <title title="产品详情"></title>
 <view class="iconfont icon-fenxiang" bindtap="share"></view>
 <view class="swiper-bottom" wx:if="{{info}}">
-    <view class="swiper-bottom-item active">1/2</view>
+    <view class="swiper-bottom-item active">{{swiperCurrent+1}}/{{swiperRange.sku.max+1}}</view>
     <view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.video.min&&swiperCurrent<=swiperRange.video.max)?'active':''}}" wx:if="{{info.videourl}}">视频</view>
     <view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.picture.min&&swiperCurrent<=swiperRange.picture.max)?'active':''}}">图片</view>
     <view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.sku.min&&swiperCurrent<=swiperRange.sku.max)?'active':''}}">款式</view>
@@ -29,7 +29,9 @@
   <block wx:for="{{info.sku}}" wx:key="*this">
     <swiper-item style="position: relative;">
       <image src="{{item.headimg}}" mode="aspectFill"></image>
-      <view class="sku-tips textOver">{{item.sku_name}}</view>
+      <view class="sku-tips ">
+        <view class="textOver">{{item.sku_name}}</view>
+      </view>
     </swiper-item>
   </block>
 </swiper>
@@ -48,10 +50,13 @@
         </view>
         <view style="padding: 20rpx 20rpx 20rpx 26rpx;">
             <view class="select-img">
-                <image style="flex-shrink: 0;" src="{{info.headimg}}"></image>
+                <image class="{{(swiperCurrent>=swiperRange.picture.min&&swiperCurrent<=swiperRange.picture.max)?'active':''}}" 
+                style="flex-shrink: 0;" src="{{info.headimg}}" bind:tap="changeSwiperCurrent" data-index="{{swiperRange.picture.min}}"></image>
                 <text style="flex-shrink: 0;" class="select-img-text">款式选择</text>
                 <view class="other-imgs no-scrollbar">
-                    <image wx:for="{{info.sku}}" wx:key="index" src="{{item.headimg}}"></image>
+                    <image wx:for="{{info.sku}}" wx:key="index" bind:tap="changeSwiperCurrent" data-index="{{swiperRange.picture.max+1+index}}"
+                    class="{{item.flag!='on'?'no-stock':''}} {{swiperCurrent==swiperRange.picture.max+1+index?'active':''}}"
+                    src="{{item.headimg}}"></image>
                 </view>
  
                 <view class="select-sku">></view>
@@ -106,7 +111,6 @@
         <text style="font-weight: bold;">买家评价</text>
         <text class="score" wx:if="{{info && info.rate && commentTotal>0}}">{{info.rate}}分</text>
         <text wx:else class="no-comment">暂无评价</text>
-
         <navigator url="/pages/list/comments/index?productid={{id}}" style="display: inline;"> 
             <text class="all-comment-num">共{{commentTotal}}条 <text style="font-family: fangsong;color: #000;">></text></text>
         </navigator>
@@ -115,6 +119,7 @@
         <view>这里空空如也，快去点评吧!</view>
        <navigator url="/pages/ask/index?id={{id}}" class="empty-btn">去点评</navigator>
     </view> -->
+    <view style="width: 100%;padding: 0 26rpx;box-sizing: border-box;">
     <navigator wx:for="{{comment}}" wx:key="index" wx:for-index="index" url="/pages/list/comments/index?productid={{id}}&&index={{index}}" class="product-comment">
         <view class="product-comment-top">
             <image class="avator-img" src="{{item.user.avatar}}" mode="aspectFill"></image>
@@ -144,9 +149,15 @@
         
         <!-- <view class="sku" wx:if="{{item.sku_name}}">{{item.sku_name}}</view> -->
     </navigator>
+    </view>
     <!-- <navigator url="/pages/list/comments/index?productid={{id}}" wx:if="{{comment.length>0}}" class="more-comment-btn">
         查看全部点评<text class="iconfont icon-you"></text></navigator> -->
+</view>
 
+<view class="shop-container" wx:if="{{iShop}}">
+    <image class="shop-img" src="{{info.supplier_name}}"></image>
+    <view class="textOver2">{{info.supplier_name}}</view>
+    <navigator class="shop-btn" url="/pages/list/store/index?id={{supplierId}}">进店</navigator>
 </view>
 
 <view class="scroll-all-box" id="menus" wx:if="{{info}}">
@@ -229,22 +240,33 @@
     <view class="sku-info-box">
       <image id="skuImg" src="{{info.sku[skuIndex].headimg}}" mode="aspectFill"></image>
       <view class="sku-info">
-        <view class="sku-price">{{info.sku[skuIndex].price/100}}
-          <view class="allowance" wx:if="{{allowance_data}}">
-            补贴价：￥{{ (1 - allowance_data.discount_rate / 100) * info.sku[skuIndex].price / 100 }}</view>
+        <view>
+            <view class="sku-price">{{info.sku[skuIndex].price/100}}
+            <!-- <view class="allowance" wx:if="{{allowance_data}}">
+                补贴价：￥{{ (1 - allowance_data.discount_rate / 100) * info.sku[skuIndex].price / 100 }}</view> -->
+            </view>
+            <view class="sku-name">已选择：{{info.sku[skuIndex].sku_name}}</view>
+        </view>
+        <view style="display: flex;align-items: center;">
+            <view class="number-box">
+                <view class="iconfont icon-sami-select" bindtap="minus"></view>
+                <view class="number">{{producNum}}</view>
+                <view class="iconfont icon-add-select" bindtap="add"></view>
+            </view>
+            <view class="limit-number" wx:if="{{info.sku[skuIndex].sku_model.traveller_limit_num>0}}">限购5件</view>
         </view>
-        <view class="sku-name">已选择：{{info.sku[skuIndex].sku_name}}</view>
       </view>
     </view>
+    <view style="font-weight: bold;font-size: 33rpx;color: #060001;margin:0rpx 25rpx 27rpx">产品分类（{{info.sku.length}}）</view>
     <view class="sku-names">
-      <view bindtap="selectSku" data-index="{{index}}" class="sku-name-item textOver{{index==skuIndex?' active':''}}" wx:for="{{info.sku}}">{{item.sku_name}}</view>
-    </view>
-    <view class="number-box">
-      <text>数量</text>
-      <view class="iconfont icon-sami-select" bindtap="minus"></view>
-      <view class="number">{{producNum}}</view>
-      <view class="iconfont icon-add-select" bindtap="add"></view>
+      <view bindtap="selectSku" data-index="{{index}}" class="sku-name-item {{index==skuIndex?' active':''}}" 
+      wx:for="{{info.sku}}">
+        <image src="{{item.headimg}}"></image>
+        <view class="sku-name textOver">{{item.sku_name}}</view>
+      </view>
     </view>
+    
+    
     <view style="height:138rpx"></view>
     <view class="btn-box">
       <view class="mask-btn" bindtap="order" wx:if="{{info.sku[skuIndex].flag=='on'}}">{{skuFlag=='cart'?'确认':'立即购买'}}
diff --git a/pages/info/postProductInfo/index.wxss b/pages/info/postProductInfo/index.wxss
index ce70200..cf45b77 100644
--- a/pages/info/postProductInfo/index.wxss
+++ b/pages/info/postProductInfo/index.wxss
@@ -210,7 +210,6 @@ page {
 }
 .comment-box{
     background: #fff;
-    padding: 0 20rpx;
     margin: 20rpx 0;
     width: 100%;
     box-sizing: border-box;
@@ -227,7 +226,7 @@ page {
   border-bottom: 1rpx solid #d9d9d9;
   font-weight: 500;
   color: #000;
-  font-size: 35rpx;
+  font-size: 33rpx;
   padding: 0 20rpx;
   background: #fff;
   border-radius: 13rpx 13rpx 0 0;
@@ -271,8 +270,10 @@ page {
   /* margin: 0 20rpx; */
   border-bottom: 1rpx solid #ccc;
   /* padding: 33rpx 0; */
-  padding: 28rpx 20rpx;
+  padding: 28rpx 0rpx;
   background: #fff;
+  width: 100%;
+  box-sizing: border-box;
 }
 .product-comment:last-of-type{
     border-bottom: none;
@@ -319,7 +320,7 @@ page {
 .comment-content {
     width: 100%;
     padding-top: 12rpx;
-    font-size: 28rpx;
+    font-size: 27rpx;
     color: #000;
     font-weight: 500;
 }
@@ -470,38 +471,38 @@ page {
 }
 
 .sku-info-box {
-  margin: 50rpx 40rpx;
+  margin: 50rpx 25rpx;
   display: flex;
   justify-content: space-between;
 }
 
 .sku-info-box image {
-  width: 218rpx;
-  height: 180rpx;
+    width: 173rpx;
+    height: 173rpx;
   border-radius: 13rpx;
   display: block;
-  margin-right: 40rpx;
+  margin-right: 15rpx;
   flex-shrink: 0;
 }
 
 .sku-info {
   flex: 1;
+  width: 100rpx;
+  height: 173rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .sku-price {
   font-size: 40rpx;
-  font-weight: 500;
-  color: #D62828;
-  margin: 20rpx 0;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  font-weight: bold;
+  color: #F84A56;
 }
 
 .sku-price::before {
   content: "￥";
-  font-weight: 400;
-  font-size: 27rpx;
+  font-size: 24rpx;
   vertical-align: baseline;
 }
 
@@ -522,45 +523,63 @@ page {
 
 .sku-names {
   display: flex;
-  font-size: 29rpx;
-  color: #333;
-  margin: 0 40rpx;
-  text-align: center;
+  font-weight: 500;
+  font-size: 27rpx;
+  color: #333333;
+  margin: 0 25rpx;
   flex-wrap: wrap;
   margin-bottom: 20rpx;
   justify-content: space-between;
+  max-height: 800rpx;
+  min-height: 400rpx;
+  align-content: flex-start; 
 }
 
 .sku-name-item {
-  background: #EFEFEF;
-  border: 1rpx solid #EFEFEF;
-  /* width: 318rpx; */
-  line-height: 77rpx;
-  border-radius: 14rpx;
-  margin-bottom: 25rpx;
-  margin-right: 30rpx;
+    height: 67rpx;
+    border-radius: 13rpx;
+  margin-bottom: 34rpx;
   max-width: 100%;
-  padding: 0 15rpx;
-  min-width: 270rpx;
+  padding-right:15rpx;
+  min-width: 340rpx;
+  background: #EFEFEF;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
 }
-
-.sku-name-item:nth-child(2n) {
-  margin-right: 0;
+.sku-name-item>image{
+    width: 67rpx;
+    height: 67rpx;
+    border-radius: 13rpx;
+    flex-shrink: 0;
+}
+.sku-name-item .sku-name{
+    flex:1;
+    width: 100rpx;
+    padding-left: 15rpx;
+    color: #333;
 }
 
-.sku-name-item.active {
+.sku-name-item.active{
   color: #0B898E;
-  border-color: #0B898E;
+  border: 1px solid #0B898E;
   background: rgba(11, 137, 142, 0.1);
 }
+.sku-name-item.active .sku-name{
+    color: #0B898E;
+  }
 
 .number-box {
   display: flex;
   align-items: center;
-  border-top: 1rpx solid #ccc;
   justify-content: space-between;
-  margin: 0 40rpx;
-  padding: 40rpx 0;
+  background: #EFEFEF;
+border-radius: 13rpx;
+padding: 10rpx 0;
+box-sizing: border-box;
+height: 53rpx;
+width: 250rpx;
+
 }
 
 .number-box text {
@@ -570,23 +589,21 @@ page {
 }
 
 .number-box view {
-  border: 1rpx solid #666;
-  border-radius: 7rpx;
   text-align: center;
-  width: 67rpx;
-  line-height: 67rpx;
-  font-size: 33rpx;
+  width: 80rpx;
+  height: 33rpx;
+  line-height: 33rpx;
+  font-size: 31rpx;
   color: #000;
 }
 
-.number-box view.disable {
-  border-color: #ccc;
-  color: #999;
-}
-
 .number-box view.number {
   width: 94rpx;
-  margin: 0 15rpx;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+}
+.limit-number{
+    font-weight: 500;font-size: 27rpx;color: #666666;padding-left:20rpx;
 }
 
 .btn-box {
@@ -1062,6 +1079,14 @@ height: 133rpx;
     border-radius: 13rpx;
     margin-right:20rpx;
     flex-shrink: 0;
+    box-sizing: border-box;
+}
+.select-img image.active{
+    border: 2px solid #DC2525;
+}
+.select-img image.no-stock{
+    border: none;
+    opacity: 0.5;
 }
 .select-img .select-img-text{
     font-weight: bold;
@@ -1092,6 +1117,15 @@ height: 133rpx;
     color: #999;
 }
 .sku-tips{
+    width: 100%;
+    position: absolute;
+    bottom: 73rpx;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+}
+.sku-tips>view{
     width: fit-content;
     max-width: 533rpx;
     height: 53rpx;
@@ -1102,7 +1136,43 @@ height: 133rpx;
     font-weight: 500;
     font-size: 24rpx;
     color: #FFFFFF;
-    position: absolute;
-    bottom: 73rpx;
     margin: 0 auto;
-}
\ No newline at end of file
+}
+
+.shop-container{
+    display: flex;
+    align-items: center;
+    margin-top: 20rpx;
+    padding: 32rpx 23rpx;
+    width: 100%;
+    background: white;
+    box-sizing: border-box;
+}
+.shop-container .shop-img{
+    width: 113rpx;
+    height: 113rpx;
+    flex-shrink: 0;
+}
+.shop-container .shop-btn{
+    width: 135rpx;
+height: 57rpx;
+border-radius: 13rpx;
+border: 1px solid #0B898E;
+font-weight: 500;
+font-size: 31rpx;
+color: #0B898E;
+text-align: center;
+line-height: 57rpx;
+flex-shrink: 0;
+}
+.shop-container .textOver2{
+    flex: 1;
+    width: 100rpx;
+    padding: 0 50rpx 0 20rpx;
+    font-weight: bold;
+font-size: 32rpx;
+color: #010101;
+}
+
+
+