From 213d666841f881d5e796762842b2a28fdc17df4d Mon Sep 17 00:00:00 2001
From: jiazhipeng <jiazhipeng@xmainc.com>
Date: Mon, 25 Aug 2025 13:36:03 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=B9=E4=BA=A7=E6=94=B9=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/info/postProductInfo/index.js   |  26 +++-
 pages/info/postProductInfo/index.wxml |  64 +++++++---
 pages/info/postProductInfo/index.wxss | 170 +++++++++++++++-----------
 3 files changed, 168 insertions(+), 92 deletions(-)

diff --git a/pages/info/postProductInfo/index.js b/pages/info/postProductInfo/index.js
index f320a6e..fdc8505 100644
--- a/pages/info/postProductInfo/index.js
+++ b/pages/info/postProductInfo/index.js
@@ -11,7 +11,7 @@ Page({
      * 页面的初始数据
      */
     data: {
-        autoPlay: true,
+        autoPlay: false,
         fixed: false,
         type: 1,
         top: 0,
@@ -37,7 +37,13 @@ Page({
         showQrCode: false,
         wxqrcode: null,
 
-        ZTPoint:''
+        ZTPoint:'',
+        swiperCurrent: 0,
+        swiperRange: {
+            video: {min:0,max:0},
+            picture: {min:0,max:0},
+            sku: {min:0,max:0}
+        }
     },
 
     /**
@@ -100,10 +106,16 @@ Page({
             }
             } catch(e) {} 
 
+            let swiperRange = this.data.swiperRange;
+            swiperRange.video = resData.videourl? { min: 0, max: 0 } : { min: -1, max: -1 }
+            swiperRange.picture = {min:swiperRange.video.max+1, max:swiperRange.video.max+1+resData.listimg.length-1}
+            swiperRange.sku = {min:swiperRange.picture.max+1,max:swiperRange.picture.max+1+resData.sku.length-1}
+            console.log(swiperRange)
             this.setData({
                 info: resData,
                 supplierId: res.data.supplier_id,
-                iShop: res.data.supplier_id ? true : false
+                iShop: res.data.supplier_id ? true : false,
+                swiperRange: swiperRange
             })
 
             // 获取补贴
@@ -732,6 +744,14 @@ Page({
         }
     },
 
+    swiperChange (e) {
+        let index = e.detail.current
+        this.setData({
+            swiperCurrent: index
+        })
+        console.log(e, this.data.swiperCurrent)
+    },
+
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
diff --git a/pages/info/postProductInfo/index.wxml b/pages/info/postProductInfo/index.wxml
index 7f02116..7fb2e06 100644
--- a/pages/info/postProductInfo/index.wxml
+++ b/pages/info/postProductInfo/index.wxml
@@ -2,11 +2,22 @@
 <wxs src="../../../utils/filter.wxs" module="tool" />
 <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 {{(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>
+</view>
+
+
 <image wx:for="{{info.sku}}" style="{{aniSkuIndex==index?('top:'+cartTop+'px;'):('top:'+top+'px;'+cartImgInfo)}}" class="headimg{{aniSkuIndex==index?' active':''}}" src="{{info.headimg}}" mode="aspectFill"></image>
-<swiper class="swiper" indicator-dots="{{true}}" wx:if="{{info}}" autoplay="{{autoPlay}}" interval="{{2000}}" duration="{{300}}">
+<swiper class="swiper" wx:if="{{info}}" autoplay="{{autoPlay}}" current="{{swiperCurrent}}"
+  interval="{{2000}}" duration="{{300}}" bindchange="swiperChange">
   <block wx:if="{{info.videourl}}" wx:key="*this">
     <swiper-item>
-      <video bindplay="playVideo" src="{{info.videourl}}" controls></video>
+      <video bindplay="playVideo" src="{{info.videourl}}"  autoplay="{{true}}" muted="{{true}}"
+       	show-mute-btn="{{true}}"  show-background-playback-button="{{false}}"
+        show-progress="{{false}}"></video>
       <!-- <image src="{{info.headimg}}" mode="aspectFill"></image> -->
     </swiper-item>
   </block>
@@ -15,6 +26,12 @@
       <image src="{{item}}" mode="aspectFill"></image>
     </swiper-item>
   </block>
+  <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>
+    </swiper-item>
+  </block>
 </swiper>
 <view class="allowance-box" wx:if="{{allowance_data}}" bindtap="changeAllowance">
   补贴价
@@ -24,14 +41,24 @@
 
 <view wx:if="{{info}}">
     <!-- 酒景套餐 -->
-    <view class="top-info" style="padding: 0;" wx:if="{{info.is_package===1}}">
-        <div class="wineScene-price-container" >
-            <div class="wineSecne-price">{{info.price/100}}<span class="wineSecne-money">￥{{info.market_price/100}}</span></div>
-            <div>已售{{info.sales_number||0}}份</div>
-        </div>
-        <view style="padding: 26rpx 26rpx 0;">
-            <view class="title" style="font-weight: bold;">{{info.title}}</view>
-            <view class="hotel-custom" style="padding:26rpx 0">
+    <view class="top-info" style="padding: 0;" >
+        <view class="wineScene-price-container" >
+            <view class="wineSecne-price">{{info.price/100}}<text class="wineSecne-money">优惠前￥{{info.market_price/100}}</text></view>
+            <view>已售{{info.sales_number>1000?"1000+":(info.sales_number||0)}}</view>
+        </view>
+        <view style="padding: 20rpx 20rpx 20rpx 26rpx;">
+            <view class="select-img">
+                <image style="flex-shrink: 0;" src="{{info.headimg}}"></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>
+                </view>
+ 
+                <view class="select-sku">></view>
+            </view>
+
+            <view class="title textOver2">{{info.title}}</view>
+            <!-- <view class="hotel-custom" style="padding:26rpx 0">
                 <view class="hotel-custom-detail" wx:for="{{info.product_data}}" wx:key="item">
                     <view class="tip-info">
                         <view class="tip">{{index}}</view>
@@ -47,10 +74,15 @@
                     </view>
                 </view>
 
+            </view> -->
+            
+            <view class="tags-box textOver">
+                <view class="tag textOver" wx:for="{{info.display_tags}}">{{item}}</view>
             </view>
         </view>
 
-        <view style="width: 100%;background:#f2f2f2;padding-top: 16rpx;margin-bottom: -8rpx;" bindtap="gotolocation">
+        <view style="width: 100%;background:#f2f2f2;padding-top: 16rpx;margin-bottom: -8rpx;"
+            bindtap="gotolocation" wx:if="{{info.is_package===1}}">
             <view class="map-container">
                 <view>
                     <view class="textOver" style="font-weight: 500;font-size: 28rpx;color: #000000;width: 600rpx;">{{info.scene_name}}</view>
@@ -64,15 +96,7 @@
             </view>
         </view>
     </view>
-    <view class="top-info" wx:else>
-        <view class="title">{{info.title}}</view>
-        <view class="subtitle">{{info.subtitle}}</view>
-        <view class="tags-box textOver">
-            <view class="tag textOver" wx:for="{{info.display_tags}}">{{item}}<view class="line"></view>
-            </view>
-            <view class="tags-price"><text>￥</text><text>{{info.price/100}}</text><text>起</text></view>
-        </view>
-    </view>
+    
 </view>
 
 <!-- 买家评价 -->
diff --git a/pages/info/postProductInfo/index.wxss b/pages/info/postProductInfo/index.wxss
index ff73fe6..ce70200 100644
--- a/pages/info/postProductInfo/index.wxss
+++ b/pages/info/postProductInfo/index.wxss
@@ -5,92 +5,66 @@ page {
 
 .swiper {
   width: 100%;
-  height: 420rpx;
+  height: 750rpx;
 }
-
-.swiper image,
-.swiper video {
-  height: 420rpx;
+.swiper image,.swiper video {
+  height: 750rpx;
   display: block;
   width: 100%;
 }
+.swiper-bottom{
+    position: absolute;
+    /* top: 750rpx; */
+    margin-top: 694rpx;
+    right: 0;
+    width: fit-content;
+    height: 56rpx;
+    line-height: 56rpx;
+    background: rgba(1, 0, 0, 0.6);
+    border-radius: 13rpx 0 0 13rpx;
+    display: flex;
+    font-weight: 500;
+    font-size: 24rpx;
+    color: rgba(255,255,255,0.5);
+    z-index: 10;
+    padding: 0 5rpx;
+    overflow: hidden;
+}
+.swiper-bottom-item{
+    padding: 0 14rpx;
+}
+.swiper-bottom-item.active{
+    color: #fff;
+}
 
 .top-info {
-  border-radius: 20rpx 20rpx 0 0;
   background: white;
   position: relative;
   z-index: 1;
-  margin-top: -20rpx;
-  padding: 20rpx 40rpx;
 }
 
 .top-info .title {
-  font-size: 32rpx;
-  font-weight: 500;
-  color: #000;
-}
-
-.top-info .subtitle {
-  color: #666;
-  font-size: 27rpx;
-  margin-top: 20rpx;
+    font-weight: bold;
+    font-size: 33rpx;
+    color: #000000;
 }
 
 .tags-box {
-  margin-top: 10rpx;
   display: flex;
   align-items: center;
+  font-weight: 500;
+  font-size: 25rpx;
   color: #0B898E;
-  font-size: 27rpx;
-  height: 50rpx;
 }
 
 .tags-box .tag {
-  position: relative;
-  line-height: 20rpx;
-  font-size: 20rpx;
-  font-weight: 500;
-  line-height: 50rpx;
-  margin-right: 10rpx;
-}
-
-.tags-box .tag .line {
-  content: "1";
-  display: block;
-  font-size: 0;
-  position: absolute;
-  left: 0;
-  right: 0;
-  background: #DAF3E9;
-  height: 8rpx;
-  top: 30rpx;
-  z-index: -1;
-}
-
-.tags-price {
-  flex: 1;
-  text-align: right;
-  color: #D62828;
-}
-
-.tags-price text:nth-child(1) {
-  font-size: 27rpx;
-}
-
-.tags-price text:nth-child(2) {
-  font-size: 40rpx;
-  font-weight: bold;
-}
-
-.tags-price text:nth-child(3) {
-  font-size: 20rpx;
-  color: #999999;
-  margin-left: 4rpx;
-}
-
-.tags-box .iconfont {
-  margin-left: 4rpx;
-  font-size: 24rpx;
+  margin-top: 27rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  margin-right: 15rpx;
+  padding: 0 14rpx;
+  background: rgba(11, 137, 142, 0.1);
+  border-radius: 4rpx;
 }
 
 .address-box {
@@ -983,8 +957,9 @@ height: 133rpx;
  .wineScene-price-container {
     width: 750rpx;
     height: 100rpx;
-    background: linear-gradient(-90deg,#FF413B, #FFAB2E);
-    border-radius: 20rpx 20rpx 0rpx 0rpx;
+    /* background: linear-gradient(-90deg,#FF413B, #FFAB2E); */
+    background: #FD3856;
+    /* border-radius: 20rpx 20rpx 0rpx 0rpx; */
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -996,13 +971,13 @@ height: 133rpx;
 
  .wineScene-price-container .wineSecne-price {
     font-weight: bold;
-    font-size: 36rpx;
+    font-size: 48rpx;
     color: #FFFFFF;
 }
 .wineScene-price-container .wineSecne-money {
     font-size: 24rpx;
     font-weight: 500;
-    text-decoration-line: line-through;
+    /* text-decoration-line: line-through; */
     padding-left: 14rpx;
 }
 .wineScene-price-container .wineSecne-price::before {
@@ -1074,3 +1049,60 @@ height: 133rpx;
     width: 29rpx;
     height: 29rpx;
 }
+
+.select-img{
+    display: flex;
+    height: 80rpx;
+    position: relative;
+    margin-bottom: 26rpx;
+}
+.select-img image{
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 13rpx;
+    margin-right:20rpx;
+    flex-shrink: 0;
+}
+.select-img .select-img-text{
+    font-weight: bold;
+    font-size: 24rpx;
+    color: #000000;
+    width: 51rpx;
+    height: 80rpx;
+    margin-right:20rpx;
+    display: flex;
+    align-items: center;
+}
+.select-img .other-imgs{
+    flex: 1;
+    width: 100rpx;
+    overflow-x: auto;
+    display: flex;
+}
+.select-img .select-sku{
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 25rpx;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+    background: white;
+    font-family: fangsong;
+    color: #999;
+}
+.sku-tips{
+    width: fit-content;
+    max-width: 533rpx;
+    height: 53rpx;
+    background: rgba(1, 0, 0, 0.6);
+    border-radius: 27rpx;
+    padding: 0 28rpx;
+    line-height: 53rpx;
+    font-weight: 500;
+    font-size: 24rpx;
+    color: #FFFFFF;
+    position: absolute;
+    bottom: 73rpx;
+    margin: 0 auto;
+}
\ No newline at end of file