no message

.env.development

@@ -13,3 +13,4 @@ VUE_APP_BASE_PATH = '/'
 VUE_APP_HREF = 'http://localhost:3000'
 
 VUE_APP_APPID = 'wxd297bb0ccec38c0d'
+

src/packageGoods/pages/detail.vue

@@ -1,154 +1,199 @@
 <template>
-	<view class="app-container">
-
-		<view class="recommender-container" v-if="isGroupbuyGoods && !isHeadUser">
-			<view class="content">
-				<image :src="detail.groupPic"></image>
-				<view class="name ellipsis">{{detail.groupUserName}}</view>
-				<view>向你推荐</view>
-			</view>
-		</view>
-
-		<!-- <no-data v-if="!isLoaded" :showText="'加载中'"></no-data> -->
-		<no-data v-if="isLoaded && noData" :showText="'该商品已失效'"></no-data>
-		<block v-if="isLoaded && !noData">
-			<view class="swiper-container">
-				<swiper @change="changeBanner">
-					<swiper-item v-if="detail.vedio">
-						<video id="video1" :src="detail.vedio" @play="playVideo" @pause="pauseVideo" controls loop :enable-progress-gesture="false" :muted="isFixedVideo"></video>
-					</swiper-item>
-					<block v-for="(item, index) in bannerList" :key='index' v-if="bannerList.length > 0">
-						<swiper-item>
-							<!-- <image :src="item.url" mode="aspectFill" @tap="previewImage(item.url)" ></image> -->
-							<view class="image" @tap="previewImage(item.url)">
-								<image :src="item.url" mode="aspectFill" class="img"></image>
-								<image :src="detail.logo" mode="aspectFill" class="water" v-if="isShowWater"></image>
-							</view>
-						</swiper-item>
-					</block>
-				</swiper>
-				<view class="nums" v-show="(detail.vedio && bannerCurrent != 0) || !detail.vedio">{{bannerCurrent + 1}}/{{bannerList.length + (detail.vedio ? 1 : 0)}}</view>
-			</view>
-			<view class="video-container" :class="isFixedVideo ? 'isFixed':''" v-if="detail.vedio">
-				<view class="content">
-					<view class="close" @tap="closeFixedVideo"><image src="@/static/icon/close.png"></image></view>
-					<video id="video2" :src="detail.vedio" @error="videoErrorCallback" controls loop :enable-progress-gesture="false"></video>
-				</view>
-			</view>
-			<view class="seckill-container" v-if="isSeckillGoods">
-				<view class="price">
-					<view class="price-1">¥{{detail.goodsPrice | priceFilter}}</view>
-					<view class="price-2">¥{{detail.orgGoodsPrice | priceFilter}}</view>
-				</view>
-				<view class="right">
-					<text>距结束还剩：</text>
-					<view class="time"><text>{{countdownTime[0]}}</text>时<text>{{countdownTime[1]}}</text>分<text>{{countdownTime[2]}}</text>秒</view>
-				</view>
-				<view class="clock"><image src="@/static/icon/clock.png"></image></view>
-			</view>
-			<view class="main-container">
-				<view class="title">{{detail.goodsName}}</view>
-				<view class="des">{{detail.describeText ? detail.describeText : ''}}</view>
+  <view class="app-container">
+    <view class="recommender-container" v-if="isGroupbuyGoods && !isHeadUser">
+      <view class="content">
+        <image :src="detail.groupPic"></image>
+        <view class="name ellipsis">{{ detail.groupUserName }}</view>
+        <view>向你推荐</view>
+      </view>
+    </view>
+
+    <!-- <no-data v-if="!isLoaded" :showText="'加载中'"></no-data> -->
+    <no-data v-if="isLoaded && noData" :showText="'该商品已失效'"></no-data>
+    <block v-if="isLoaded && !noData">
+      <view class="swiper-container">
+        <swiper @change="changeBanner">
+          <swiper-item v-if="detail.vedio">
+            <video
+              id="video1"
+              :src="detail.vedio"
+              @play="playVideo"
+              @pause="pauseVideo"
+              controls
+              loop
+              :enable-progress-gesture="false"
+              :muted="isFixedVideo"
+            ></video>
+          </swiper-item>
+          <block v-for="(item, index) in bannerList" :key="index" v-if="bannerList.length > 0">
+            <swiper-item>
+              <!-- <image :src="item.url" mode="aspectFill" @tap="previewImage(item.url)" ></image> -->
+              <view class="image" @tap="previewImage(item.url)">
+                <image :src="item.url" mode="aspectFill" class="img"></image>
+                <image :src="detail.logo" mode="aspectFill" class="water" v-if="isShowWater"></image>
+              </view>
+            </swiper-item>
+          </block>
+        </swiper>
+        <view class="nums" v-show="(detail.vedio && bannerCurrent != 0) || !detail.vedio"
+          >{{ bannerCurrent + 1 }}/{{ bannerList.length + (detail.vedio ? 1 : 0) }}</view
+        >
+      </view>
+      <view class="video-container" :class="isFixedVideo ? 'isFixed' : ''" v-if="detail.vedio">
+        <view class="content">
+          <view class="close" @tap="closeFixedVideo"><image src="@/static/icon/close.png"></image></view>
+          <video
+            id="video2"
+            :src="detail.vedio"
+            @error="videoErrorCallback"
+            controls
+            loop
+            :enable-progress-gesture="false"
+          ></video>
+        </view>
+      </view>
+      <view class="seckill-container" v-if="isSeckillGoods">
+        <view class="price">
+          <view class="price-1">¥{{ detail.goodsPrice | priceFilter }}</view>
+          <view class="price-2">¥{{ detail.orgGoodsPrice | priceFilter }}</view>
+        </view>
+        <view class="right">
+          <text>距结束还剩：</text>
+          <view class="time"
+            ><text>{{ countdownTime[0] }}</text
+            >时<text>{{ countdownTime[1] }}</text
+            >分<text>{{ countdownTime[2] }}</text
+            >秒</view
+          >
+        </view>
+        <view class="clock"><image src="@/static/icon/clock.png"></image></view>
+      </view>
+      <view class="main-container">
+        <view class="title">{{ detail.goodsName }}</view>
+        <view class="des">{{ detail.describeText ? detail.describeText : '' }}</view>
         <view class="tags" v-if="detail.tags1 && detail.tags1.length > 0">
-        	<view class="it" v-for="(it, idx) in detail.tags1" :key="idx">{{it}}</view>
+          <view class="it" v-for="(it, idx) in detail.tags1" :key="idx">{{ it }}</view>
         </view>
-        <view class="tags2" v-if="(detail.tags2 && detail.tags2.length > 0) || detail.promotionFullPiece || detail.isTrade == 'YES'">
-        	<view class="it" v-if="detail.promotionFullPiece">满件打折</view>
+        <view
+          class="tags2"
+          v-if="(detail.tags2 && detail.tags2.length > 0) || detail.promotionFullPiece || detail.isTrade == 'YES'"
+        >
+          <view class="it" v-if="detail.promotionFullPiece">满件打折</view>
           <view class="it" v-if="detail.isTrade == 'YES'">以旧换新</view>
-        	<view class="it" v-for="(it, idx) in detail.tags2" :key="idx">{{it}}</view>
+          <view class="it" v-for="(it, idx) in detail.tags2" :key="idx">{{ it }}</view>
+        </view>
+        <view class="stock">
+          <block v-if="!isSeckillGoods">
+            <view class="left">
+              <text>剩余{{ detail.stock }}件</text>
+            </view>
+          </block>
+          <block v-if="isSeckillGoods">
+            <view class="left">
+              <text>剩余{{ detail.secStockNum }}件</text>
+              <view class="progress-box">
+                <progress
+                  :percent="(detail.secStockNum / detail.limitBuy) * 100"
+                  activeColor="#FF3F42"
+                  active
+                  stroke-width="6"
+                />
+              </view>
+            </view>
+            <view
+              class="right"
+              @tap="isOpen = !isOpen"
+              v-if="((isServiceUser || isWorkerUser) && !isGroupbuyGoods) || (isHeadUser && isGroupbuyGoods)"
+            >
+              <text>{{ isOpen ? '收起' : '展开' }}</text>
+              <image :src="isOpen ? '../../static/icon/arrow_2.png' : '../../static/icon/arrow_1.png'"></image>
+            </view>
+          </block>
         </view>
-				<view class="stock">
-					<block v-if="!isSeckillGoods">
-						<view class="left">
-							<text>剩余{{detail.stock}}件</text>
-						</view>
-					</block>
-					<block v-if="isSeckillGoods">
-						<view class="left">
-							<text>剩余{{detail.secStockNum}}件</text>
-							<view class="progress-box">
-								<progress :percent="detail.secStockNum / detail.limitBuy * 100" activeColor="#FF3F42" active stroke-width="6" />
-							</view>
-						</view>
-						<view class="right" @tap="isOpen = !isOpen" v-if="((isServiceUser || isWorkerUser) && !isGroupbuyGoods) || (isHeadUser && isGroupbuyGoods)">
-							<text>{{isOpen ? '收起':'展开'}}</text>
-							<image :src="isOpen ? '../../static/icon/arrow_2.png':'../../static/icon/arrow_1.png'"></image>
-						</view>
-					</block>
-				</view>
-				<view class="price-con" v-if="!isSeckillGoods">
+        <view class="price-con" v-if="!isSeckillGoods">
           <view class="left">
-          	<view class="price">
-          		<view class="price-1">¥{{detail.goodsPrice | priceFilter}}</view>
-          		<view class="price-2">¥{{detail.orgGoodsPrice | priceFilter}}</view>
-          	</view>
-          	<view class="box" v-if="detail.promotionFullPiece">
-          		{{detail.promotionFullPieceNum}}件单价约¥{{detail.promotionFullPiecePrice}}
-          	</view>
+            <view class="price">
+              <view class="price-1">¥{{ detail.goodsPrice | priceFilter }}</view>
+              <view class="price-2">¥{{ detail.orgGoodsPrice | priceFilter }}</view>
+            </view>
+            <view class="box" v-if="detail.promotionFullPiece">
+              {{ detail.promotionFullPieceNum }}件单价约¥{{ detail.promotionFullPiecePrice }}
+            </view>
+          </view>
+          <view
+            class="right"
+            @tap="isOpen = !isOpen"
+            v-if="((isServiceUser || isWorkerUser) && !isGroupbuyGoods) || (isHeadUser && isGroupbuyGoods)"
+          >
+            <text>{{ isOpen ? '收起' : '展开' }}</text>
+            <image :src="isOpen ? '../../static/icon/arrow_2.png' : '../../static/icon/arrow_1.png'"></image>
           </view>
-					<view class="right" @tap="isOpen = !isOpen" v-if="((isServiceUser || isWorkerUser) && !isGroupbuyGoods) || (isHeadUser && isGroupbuyGoods)">
-						<text>{{isOpen ? '收起':'展开'}}</text>
-						<image :src="isOpen ? '../../static/icon/arrow_2.png':'../../static/icon/arrow_1.png'"></image>
-					</view>
-				</view>
-				<view class="bottom" v-if="isOpen">
+        </view>
+        <view class="bottom" v-if="isOpen">
           <block v-if="detail.isMaster">
             <view class="row">
               <view>分销金额</view>
-              <view>￥{{commission | priceFilter}}{{detail.goodsSpecs.length > 1 ? '起':''}}</view>
+              <view>￥{{ commission | priceFilter }}{{ detail.goodsSpecs.length > 1 ? '起' : '' }}</view>
             </view>
             <view class="row">
               <view>内部分销金额</view>
-              <view>￥{{commission2 | priceFilter}}{{detail.goodsSpecs.length > 1 ? '起':''}}</view>
+              <view>￥{{ commission2 | priceFilter }}{{ detail.goodsSpecs.length > 1 ? '起' : '' }}</view>
             </view>
           </block>
           <block v-else-if="userInfo.innerr">
             <view class="row">
               <view>分享可获得收益</view>
-              <view>￥{{commission2 | priceFilter}}{{detail.goodsSpecs.length > 1 ? '起':''}}</view>
+              <view>￥{{ commission2 | priceFilter }}{{ detail.goodsSpecs.length > 1 ? '起' : '' }}</view>
             </view>
           </block>
           <block v-else>
             <view class="row">
               <view>分享可获得收益</view>
-              <view>￥{{commission | priceFilter}}{{detail.goodsSpecs.length > 1 ? '起':''}}</view>
+              <view>￥{{ commission | priceFilter }}{{ detail.goodsSpecs.length > 1 ? '起' : '' }}</view>
             </view>
           </block>
-				</view>
-			</view>
-
-			<view class="line-container">
-				<view>运费：包邮</view>
-				<view>销量：<text>{{detail.soldNum}}</text></view>
-			</view>
-
-			<view class="evaluate-container" v-if="evaluateList.length">
-				<view class="title">
-					<view class="left">用户评价({{evaluateList.length}})</view>
-					<view class="right" @tap="toAllEvaluate">查看全部<text class="iconfont icon-jinru"></text></view>
-				</view>
-				<view class="list">
-					<view class="item" v-for="(item, index) in evaluateList.filter((o, i) => i === 0)" :key="index">
-						<view class="top">
-							<view class="user">
-								<image :src="item.avatar" mode="aspectFill" v-if="item.avatar.indexOf('http') >= 0"></image>
-								<image :src="imageUrl + item.avatar" mode="aspectFill" v-else></image>
-								<view class="right">
-									<view class="name ellipsis">{{item.userName}}</view>
-									<view class="date">{{item.createTime}}</view>
-								</view>
-							</view>
-						</view>
-						<view class="tags">
-							<view class="it" v-for="(it, idx) in item.tags" :key="idx">{{it}}</view>
-						</view>
-						<view class="content">{{item.content}}</view>
-						<view class="images" v-if="item.imgs && item.imgs.length > 0">
-							<image v-for="(it, idx) in item.imgs" :key="idx" :src="it" @tap="previewEvaluateImage(it, item.imgs)"></image>
-						</view>
-					</view>
-				</view>
-			</view>
+        </view>
+      </view>
+
+      <view class="line-container">
+        <view>运费：包邮</view>
+        <view
+          >销量：<text>{{ detail.soldNum }}</text></view
+        >
+      </view>
+
+      <view class="evaluate-container" v-if="evaluateList.length">
+        <view class="title">
+          <view class="left">用户评价({{ evaluateList.length }})</view>
+          <view class="right" @tap="toAllEvaluate">查看全部<text class="iconfont icon-jinru"></text></view>
+        </view>
+        <view class="list">
+          <view class="item" v-for="(item, index) in evaluateList.filter((o, i) => i === 0)" :key="index">
+            <view class="top">
+              <view class="user">
+                <image :src="item.avatar" mode="aspectFill" v-if="item.avatar.indexOf('http') >= 0"></image>
+                <image :src="imageUrl + item.avatar" mode="aspectFill" v-else></image>
+                <view class="right">
+                  <view class="name ellipsis">{{ item.userName }}</view>
+                  <view class="date">{{ item.createTime }}</view>
+                </view>
+              </view>
+            </view>
+            <view class="tags">
+              <view class="it" v-for="(it, idx) in item.tags" :key="idx">{{ it }}</view>
+            </view>
+            <view class="content">{{ item.content }}</view>
+            <view class="images" v-if="item.imgs && item.imgs.length > 0">
+              <image
+                v-for="(it, idx) in item.imgs"
+                :key="idx"
+                :src="it"
+                @tap="previewEvaluateImage(it, item.imgs)"
+              ></image>
+            </view>
+          </view>
+        </view>
+      </view>
 
       <view class="tradein-container" v-if="detail.isTrade == 'YES'">
         <view class="left">
@@ -162,18 +207,18 @@
         <view class="right" @tap="clickCartOrBuy(5)">立即换新<text class="iconfont icon-jinru"></text></view>
       </view>
 
-			<view class="detail-container">
-				<view class="title">商品详情</view>
-				<view class="content" v-if="detail.pubCommonTemplate">
-					<u-parse :content="detail.pubCommonTemplate.content"></u-parse>
-				</view>
-				<view class="content" v-if="detail.commonTemplate">
-					<u-parse :content="detail.commonTemplate.content"></u-parse>
-				</view>
-				<view class="content">
-					<u-parse :content="detail.content"></u-parse>
-				</view>
-			</view>
+      <view class="detail-container">
+        <view class="title">商品详情</view>
+        <view class="content" v-if="detail.pubCommonTemplate">
+          <u-parse :content="detail.pubCommonTemplate.content"></u-parse>
+        </view>
+        <view class="content" v-if="detail.commonTemplate">
+          <u-parse :content="detail.commonTemplate.content"></u-parse>
+        </view>
+        <view class="content">
+          <u-parse :content="detail.content"></u-parse>
+        </view>
+      </view>
 
       <view class="allBottom-container">
         <view class="tradeinBottom-container" v-if="detail.isTrade == 'YES'">
@@ -188,118 +233,129 @@
         </view>
 
         <view class="bottom-container">
-        	<view class="left">
-        		<view class="item" @tap="clickShare">
-        			<view class="iconfont icon-fenxiang"></view>
-        			<text>分享</text>
-        		</view>
-        		<view class="item" @tap="handleCollect" v-if="!isGroupbuyGoods">
-        			<block v-if="detail.favorite">
-        				<view class="iconfont icon-shoucang2 active"></view>
-        				<text>已收藏</text>
-        			</block>
-        			<block v-else>
-        				<view class="iconfont icon-shoucang"></view>
-        				<text>收藏</text>
-        			</block>
-        		</view>
-        		<view class="item" @tap="$navPage(`/packageGoods/pages/cart`)">
-        			<view class="iconfont icon-gouwuche1"></view>
-        			<text>购物车</text>
-        			<view class="dot" v-if="cartCount > 0">{{cartCount <= 99 ? cartCount : '99+'}}</view>
-        		</view>
-        	</view>
-        	<view class="right" v-if="!isSeckillGoods && !isGroupbuyGoods">
-        		<view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
-        		<view class="button buy" @tap="clickCartOrBuy(2)">立即购买</view>
-        	</view>
-        	<view class="right" v-if="!isSeckillGoods && isGroupbuyGoods">
-        		<view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
-        		<view class="button buy" @tap="clickCartOrBuy(4)">立即拼团</view>
-        	</view>
-        	<view class="right" v-if="isSeckillGoods">
-        		<view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
-        		<view class="button buy" @tap="clickCartOrBuy(3)">马上抢购</view>
-        	</view>
+          <view class="left">
+            <view class="item" @tap="clickShare">
+              <view class="iconfont icon-fenxiang"></view>
+              <text>分享</text>
+            </view>
+            <view class="item" @tap="handleCollect" v-if="!isGroupbuyGoods">
+              <block v-if="detail.favorite">
+                <view class="iconfont icon-shoucang2 active"></view>
+                <text>已收藏</text>
+              </block>
+              <block v-else>
+                <view class="iconfont icon-shoucang"></view>
+                <text>收藏</text>
+              </block>
+            </view>
+            <view class="item" @tap="$navPage(`/packageGoods/pages/cart`)">
+              <view class="iconfont icon-gouwuche1"></view>
+              <text>购物车</text>
+              <view class="dot" v-if="cartCount > 0">{{ cartCount <= 99 ? cartCount : '99+' }}</view>
+            </view>
+          </view>
+          <view class="right" v-if="!isSeckillGoods && !isGroupbuyGoods">
+            <view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
+            <view class="button buy" @tap="clickCartOrBuy(2)">立即购买</view>
+          </view>
+          <view class="right" v-if="!isSeckillGoods && isGroupbuyGoods">
+            <view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
+            <view class="button buy" @tap="clickCartOrBuy(4)">立即拼团</view>
+          </view>
+          <view class="right" v-if="isSeckillGoods">
+            <view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
+            <view class="button buy" @tap="clickCartOrBuy(3)">马上抢购</view>
+          </view>
         </view>
       </view>
 
-			<u-popup
-				:round="10"
-				:closeable="true"
-				:show="isBuyDialog"
-				@close="isBuyDialog = false">
-				<view class="cart-container">
-					<view class="main">
-						<image :src="specList[specCurrent].imgUrl" mode="aspectFill"></image>
-						<view class="right">
-							<view class="title ellipsis-2">{{detail.goodsName}}</view>
-							<block v-if="isGroupbuyGoods">
+      <u-popup :round="10" :closeable="true" :show="isBuyDialog" @close="isBuyDialog = false">
+        <view class="cart-container">
+          <view class="main">
+            <image :src="specList[specCurrent].imgUrl" mode="aspectFill"></image>
+            <view class="right">
+              <view class="title ellipsis-2">{{ detail.goodsName }}</view>
+              <block v-if="isGroupbuyGoods">
                 <view class="price">
-                	<view class="price-con">
-                		<view class="price-1">¥{{specList[specCurrent].price}}</view>
-                		<view class="price-2">¥{{specList[specCurrent].orgPrice}}</view>
-                	</view>
-                	<view class="box" v-if="detail.promotionFullPiece">
-                		{{specList[specCurrent].promotionFullPieceNum}}件单价约¥{{specList[specCurrent].promotionFullPiecePrice}}
-                	</view>
+                  <view class="price-con">
+                    <view class="price-1">¥{{ specList[specCurrent].price }}</view>
+                    <view class="price-2">¥{{ specList[specCurrent].orgPrice }}</view>
+                  </view>
+                  <view class="box" v-if="detail.promotionFullPiece">
+                    {{ specList[specCurrent].promotionFullPieceNum }}件单价约¥{{
+                      specList[specCurrent].promotionFullPiecePrice
+                    }}
+                  </view>
                 </view>
-								<view class="stock">剩余{{specList[specCurrent].stockNum}}件</view>
-							</block>
-							<block v-else-if="isSeckillGoods">
+                <view class="stock">剩余{{ specList[specCurrent].stockNum }}件</view>
+              </block>
+              <block v-else-if="isSeckillGoods">
                 <view class="price">
-                	<view class="price-con">
-                		<view class="price-1">¥{{specList[specCurrent].secPrice}}</view>
-                		<view class="price-2">¥{{specList[specCurrent].price}}</view>
-                	</view>
-                	<view class="box" v-if="detail.promotionFullPiece">
-                		{{specList[specCurrent].promotionFullPieceNum}}件单价约¥{{specList[specCurrent].promotionFullPiecePrice}}
-                	</view>
+                  <view class="price-con">
+                    <view class="price-1">¥{{ specList[specCurrent].secPrice }}</view>
+                    <view class="price-2">¥{{ specList[specCurrent].price }}</view>
+                  </view>
+                  <view class="box" v-if="detail.promotionFullPiece">
+                    {{ specList[specCurrent].promotionFullPieceNum }}件单价约¥{{
+                      specList[specCurrent].promotionFullPiecePrice
+                    }}
+                  </view>
                 </view>
-								<view class="stock">剩余{{detail.secStockNum}}件</view>
-							</block>
-							<block v-else>
+                <view class="stock">剩余{{ detail.secStockNum }}件</view>
+              </block>
+              <block v-else>
                 <view class="price">
-                	<view class="price-con">
-                		<view class="price-1">¥{{specList[specCurrent].price}}</view>
-                		<view class="price-2">¥{{detail.orgGoodsPrice}}</view>
-                	</view>
-                	<view class="box" v-if="detail.promotionFullPiece">
-                		{{specList[specCurrent].promotionFullPieceNum}}件单价约¥{{specList[specCurrent].promotionFullPiecePrice}}
-                	</view>
+                  <view class="price-con">
+                    <view class="price-1">¥{{ specList[specCurrent].price }}</view>
+                    <view class="price-2">¥{{ detail.orgGoodsPrice }}</view>
+                  </view>
+                  <view class="box" v-if="detail.promotionFullPiece">
+                    {{ specList[specCurrent].promotionFullPieceNum }}件单价约¥{{
+                      specList[specCurrent].promotionFullPiecePrice
+                    }}
+                  </view>
                 </view>
-								<view class="stock">剩余{{specList[specCurrent].stockNum}}件</view>
-							</block>
-						</view>
-					</view>
-					<view class="attr">
-						<view class="title">已选属性</view>
-						<view class="list">
-							<block v-for="(item, index) in specList" :key='index'>
-								<view class="item" @tap="changeSpec(index)" :class="specCurrent == index ? 'current':''">{{item.specValue}}</view>
-							</block>
-						</view>
-					</view>
-					<view class="num">
-						<view class="title">购买数量</view>
-						<u-number-box
-							v-model="buyNum"
+                <view class="stock">剩余{{ specList[specCurrent].stockNum }}件</view>
+              </block>
+            </view>
+          </view>
+          <view class="attr">
+            <view class="title">已选属性</view>
+            <view class="list">
+              <block v-for="(item, index) in specList" :key="index">
+                <view class="item" @tap="changeSpec(index)" :class="specCurrent == index ? 'current' : ''">{{
+                  item.specValue
+                }}</view>
+              </block>
+            </view>
+          </view>
+          <view class="num">
+            <view class="title">购买数量</view>
+            <u-number-box
+              v-model="buyNum"
               :disabled="isTradeTag"
-							:min="1"
-							:buttonSize="26"
-							iconStyle="font-size: 12px;">
-						</u-number-box>
-					</view>
+              :min="1"
+              :buttonSize="26"
+              iconStyle="font-size: 12px;"
+            >
+            </u-number-box>
+          </view>
           <view class="tradein" v-if="dialogType == 5">
             <view class="top">
               <view class="name">以旧换新：</view>
-              <view class="text">{{detail.tradeRemark}}</view>
+              <view class="text">{{ detail.tradeRemark }}</view>
             </view>
-            <view class="tag" :class="isTradeTag ? 'active' : ''" @click="changeTradeTag">旧机拆运免费，新机补贴可立减！</view>
+            <view class="tag" :class="isTradeTag ? 'active' : ''" @click="changeTradeTag"
+              >旧机拆运免费，新机补贴可立减！</view
+            >
 
             <view class="agreement">
               <view class="content" v-if="isTradeTag">
-                <text class="iconfont" :class="isTradeAgree ? 'icon-danxuan2' : 'icon-danxuan'" @click="isTradeAgree = !isTradeAgree"></text>
+                <text
+                  class="iconfont"
+                  :class="isTradeAgree ? 'icon-danxuan2' : 'icon-danxuan'"
+                  @click="isTradeAgree = !isTradeAgree"
+                ></text>
                 <view class="text">我已阅读并同意<text @click="toAgreement">《以旧换新协议》</text></view>
               </view>
             </view>
@@ -309,39 +365,42 @@
             <view class="button buy" v-if="isTradeTag" @tap="toTradein">立即换新</view>
             <view class="button buy" v-if="!isTradeTag" @tap="nowBuy">立即购买</view>
           </block>
-					<view class="button cart" v-if="dialogType == 1" @tap="addToCart">加入购物车</view>
-					<view class="button buy" v-if="dialogType == 2" @tap="nowBuy">立即购买</view>
-					<view class="button sec" v-if="dialogType == 3" @tap="rushBuy">马上抢购</view>
-					<view class="button sec" v-if="dialogType == 4" @tap="nowBuy">马上拼团</view>
-				</view>
-			</u-popup>
-
-			<u-popup
-				:round="10"
-				:closeable="false"
-				:show="isShareDialog"
-				@close="isShareDialog = false">
-				<view class="sharelist-container">
-					<view class="item" v-if="isH5" @tap="isShareDialog = false; isShowShareGuideDialog = true;">
-						<image src="@/static/icon/wechat.png"></image>
-						<text>分享给微信好友</text>
-					</view>
-
-					<view class="item" @tap="markImage">
-						<image src="@/static/icon/image.png"></image>
-						<text>生成图片分享</text>
-					</view>
-				</view>
-			</u-popup>
-
-			<view class="global-mask" v-show="isShowCanvas" @tap="closeCanvas"></view>
-			<view class="canvas-container" v-show="isShowCanvas">
-				<view class="content">
-          <image style="width: 300px; height: 520px;" :src="canvasImg" v-if="canvasImg"></image>
-					<canvas style="width: 300px; height: 520px;" canvas-id="myCanvas" id="myCanvas" v-else></canvas>
-				</view>
-				<view class="button"><text>长按图片保存</text></view>
-			</view>
+          <view class="button cart" v-if="dialogType == 1" @tap="addToCart">加入购物车</view>
+          <view class="button buy" v-if="dialogType == 2" @tap="nowBuy">立即购买</view>
+          <view class="button sec" v-if="dialogType == 3" @tap="rushBuy">马上抢购</view>
+          <view class="button sec" v-if="dialogType == 4" @tap="nowBuy">马上拼团</view>
+        </view>
+      </u-popup>
+
+      <u-popup :round="10" :closeable="false" :show="isShareDialog" @close="isShareDialog = false">
+        <view class="sharelist-container">
+          <view
+            class="item"
+            v-if="isH5"
+            @tap="
+              isShareDialog = false
+              isShowShareGuideDialog = true
+            "
+          >
+            <image src="@/static/icon/wechat.png"></image>
+            <text>分享给微信好友</text>
+          </view>
+
+          <view class="item" @tap="markImage">
+            <image src="@/static/icon/image.png"></image>
+            <text>生成图片分享</text>
+          </view>
+        </view>
+      </u-popup>
+
+      <view class="global-mask" v-show="isShowCanvas" @tap="closeCanvas"></view>
+      <view class="canvas-container" v-show="isShowCanvas">
+        <view class="content">
+          <image style="width: 300px; height: 520px" :src="canvasImg" v-if="canvasImg"></image>
+          <canvas style="width: 300px; height: 520px" canvas-id="myCanvas" id="myCanvas" v-else></canvas>
+        </view>
+        <view class="button"><text>长按图片保存</text></view>
+      </view>
 
       <view class="shareGuideDialog" v-if="isShowShareGuideDialog" @tap="isShowShareGuideDialog = false">
         <view class="content">
@@ -354,1551 +413,1587 @@
           </view>
         </view>
       </view>
-
-		</block>
-	</view>
+    </block>
+  </view>
 </template>
 
 <script>
-  import { compareTime, wxShare, getQueryVariable, mini_env } from '@/common/utils/util.js'
-	import { toBase64src } from '@/common/utils/base.js';
-
-	export default {
-		data() {
-			return {
-				imageUrl: this.$imageUrl,
-        userInfo: {},
-				configInfo: {},
-				isLoaded: false,
-				noData: true,
-				goodsId: null, // 商品id
-				detail: {}, // 商品详情
-				commission: 0, // 分佣金额（师傅）
-				commission2: 0, // 分佣金额（分销员）
-				bannerList: [], // 轮播图列表
-				bannerCurrent: 0, // 轮播图当前值
-				specList: [], // 规格列表
-				specCurrent: 0, // 规格当前值
-				isOpen: false, // 是否展开
-				isBuyDialog: false, // 是否显示购买/加入购物车弹窗
-				dialogType: 1, // 弹窗类型: 1加入购物车，2立即购买，3秒杀抢购
-				isShareDialog: false, // 是否显示分享弹窗
-				isShowCanvas: false, // 是否显示海报弹窗
-				buyNum: 1, // 购买/加入购物车 数量
-				isSeckillGoods: false, // 是否秒杀商品
-				isGroupbuyGoods: false, // 是否团购商品
-				cartCount: 0, // 购物车内商品数
-				isFinishCanvas: false, // 是否已完成海报
-        canvasImg: '',
-				codeUrl: '', // 商品码
-				videoContext1: '', // 视频对象
-				videoContext2: '', // 视频对象
-				isFixedVideo: false, // 是否显示视频弹窗
-				isPlayVideo: false, // 视频是否播放中
-				isCloseMyself: false, // 是否亲自关闭视频弹窗
-				countdownTime: '', // 倒计时
-				endHour: 0, // 倒计时结束时间
-				evaluateList: [],
-				isShowWater: false,
-
-        isShowShareGuideDialog: false,
-
-        isH5: false,
-
-        isTradeTag: true,
-        isTradeAgree: false,
-        tradeMaxPrice: 0,
-			}
-		},
-		computed:{
-      isLogin() {
-        return this.$store.state.user.token ? true : false;
-      },
-
-			isHeadUser() { // 是否团长
-				return this.userInfo.promotionGroupLeader;
-			},
-			isServiceUser() { // 是否业务员
-				return this.userInfo.type === 'SERVICE';
-			},
-			isWorkerUser() { // 是否师傅
-				return this.userInfo.type === 'WORKER';
-			}
-		},
-		watch: {
-			countdownTime() {
-				if(this.countdownTime[0] == 0 && this.countdownTime[1] == 0 && this.countdownTime[2] == 0){
-					this.getDetail();
-				}
-			}
-		},
-		onPageScroll(res) {
-			if(res.scrollTop > 300 && this.isPlayVideo && !this.isCloseMyself && this.detail.vedio) {
-				this.isFixedVideo = true;
-				this.videoContext2.play();
-			}else {
-				this.isFixedVideo = false;
-				this.videoContext2.pause();
-			}
-			if(res.scrollTop < 300) {
-				this.isCloseMyself = false;
-			}
-		},
-		async onLoad({id}) {
-			this.goodsId = id;
-
-      uni.showLoading({
-          title: '加载中'
-      });
-
-			await this.getDetail();
-      this.configInfo = await this.$getConfigInfo();
-      this.userInfo = await this.$getUserInfo();
-			this.getEvaluateList();
-
-      mini_env((bool) => {
-        if (bool) {
-          this.isH5 = false;
-        }else {
-          this.isH5 = true;
-
-          var appid = getQueryVariable('appid') || getQueryVariable('appId');
-          wxShare({
-            configInfo: this.configInfo,
-            userInfo: this.userInfo,
-            title: `分享商品「 ${this.detail.goodsName} 」`,
-            desc: `点击前往购买`,
-            link: `${process.env.VUE_APP_HREF}/packageGoods/pages/detail?appid=${appid}&id=${this.goodsId}&serviceId=${this.$store.state.user.userId}`,
-            imgUrl: this.detail.imgUrl,
-          })
-        }
-      })
-		},
-
-		onShow() {
-			this.isBuyDialog = false;
-      this.getCartCount();
-		},
-
-		onReady() {
-			this.videoContext1 = uni.createVideoContext('video1');
-			this.videoContext2 = uni.createVideoContext('video2');
-		},
-
-		methods: {
-			// 获取详情
-			getDetail() {
-        return new Promise((resolve, reject) => {
-          this.$api.get('/goods/detail', {
+import { compareTime, wxShare, getQueryVariable, mini_env } from '@/common/utils/util.js'
+import { toBase64src } from '@/common/utils/base.js'
+
+export default {
+  data() {
+    return {
+      imageUrl: this.$imageUrl,
+      userInfo: {},
+      configInfo: {},
+      isLoaded: false,
+      noData: true,
+      goodsId: null, // 商品id
+      detail: {}, // 商品详情
+      commission: 0, // 分佣金额（师傅）
+      commission2: 0, // 分佣金额（分销员）
+      bannerList: [], // 轮播图列表
+      bannerCurrent: 0, // 轮播图当前值
+      specList: [], // 规格列表
+      specCurrent: 0, // 规格当前值
+      isOpen: false, // 是否展开
+      isBuyDialog: false, // 是否显示购买/加入购物车弹窗
+      dialogType: 1, // 弹窗类型: 1加入购物车，2立即购买，3秒杀抢购
+      isShareDialog: false, // 是否显示分享弹窗
+      isShowCanvas: false, // 是否显示海报弹窗
+      buyNum: 1, // 购买/加入购物车 数量
+      isSeckillGoods: false, // 是否秒杀商品
+      isGroupbuyGoods: false, // 是否团购商品
+      cartCount: 0, // 购物车内商品数
+      isFinishCanvas: false, // 是否已完成海报
+      canvasImg: '',
+      codeUrl: '', // 商品码
+      videoContext1: '', // 视频对象
+      videoContext2: '', // 视频对象
+      isFixedVideo: false, // 是否显示视频弹窗
+      isPlayVideo: false, // 视频是否播放中
+      isCloseMyself: false, // 是否亲自关闭视频弹窗
+      countdownTime: '', // 倒计时
+      endHour: 0, // 倒计时结束时间
+      evaluateList: [],
+      isShowWater: false,
+
+      isShowShareGuideDialog: false,
+
+      isH5: false,
+
+      isTradeTag: true,
+      isTradeAgree: false,
+      tradeMaxPrice: 0
+    }
+  },
+  computed: {
+    isLogin() {
+      return this.$store.state.user.token ? true : false
+    },
+
+    isHeadUser() {
+      // 是否团长
+      return this.userInfo.promotionGroupLeader
+    },
+    isServiceUser() {
+      // 是否业务员
+      return this.userInfo.type === 'SERVICE'
+    },
+    isWorkerUser() {
+      // 是否师傅
+      return this.userInfo.type === 'WORKER'
+    }
+  },
+  watch: {
+    countdownTime() {
+      if (this.countdownTime[0] == 0 && this.countdownTime[1] == 0 && this.countdownTime[2] == 0) {
+        this.getDetail()
+      }
+    }
+  },
+  onPageScroll(res) {
+    if (res.scrollTop > 300 && this.isPlayVideo && !this.isCloseMyself && this.detail.vedio) {
+      this.isFixedVideo = true
+      this.videoContext2.play()
+    } else {
+      this.isFixedVideo = false
+      this.videoContext2.pause()
+    }
+    if (res.scrollTop < 300) {
+      this.isCloseMyself = false
+    }
+  },
+  async onLoad({ id }) {
+    this.goodsId = id
+
+    uni.showLoading({
+      title: '加载中'
+    })
+
+    await this.getDetail()
+    this.configInfo = await this.$getConfigInfo()
+    this.userInfo = await this.$getUserInfo()
+    this.getEvaluateList()
+
+    mini_env(bool => {
+      if (bool) {
+        this.isH5 = false
+      } else {
+        this.isH5 = true
+
+        var appid = getQueryVariable('appid') || getQueryVariable('appId')
+        wxShare({
+          configInfo: this.configInfo,
+          userInfo: this.userInfo,
+          title: `分享商品「 ${this.detail.goodsName} 」`,
+          desc: `点击前往购买`,
+          link: `${process.env.VUE_APP_HREF}/packageGoods/pages/detail?appid=${appid}&id=${this.goodsId}&serviceId=${this.$store.state.user.userId}`,
+          imgUrl: this.detail.imgUrl
+        })
+      }
+    })
+  },
+
+  onShow() {
+    this.isBuyDialog = false
+    this.getCartCount()
+  },
+
+  onReady() {
+    this.videoContext1 = uni.createVideoContext('video1')
+    this.videoContext2 = uni.createVideoContext('video2')
+  },
+
+  methods: {
+    // 获取详情
+    getDetail() {
+      return new Promise((resolve, reject) => {
+        this.$api
+          .get('/goods/detail', {
             goodsId: this.goodsId,
-            userId: this.$store.state.user.userId,
-          }).then(res => {
-            this.detail = res.data;
-            this.noData = false;
-            this.isLoaded = true;
+            userId: this.$store.state.user.userId
+          })
+          .then(res => {
+            this.detail = res.data
+            this.noData = false
+            this.isLoaded = true
             // 团购
-            this.isGroupbuyGoods = res.data.promotionGroup;
+            this.isGroupbuyGoods = res.data.promotionGroup
             // 秒杀
-            this.isSeckillGoods = res.data.secType;
-            this.endHour = res.data.endHour;
-            this.countTime();
+            this.isSeckillGoods = res.data.secType
+            this.endHour = res.data.endHour
+            this.countTime()
 
-            this.bannerList = res.data.images;
-            this.specList = res.data.goodsSpecs;
-            this.specCurrent = 0;
+            this.bannerList = res.data.images
+            this.specList = res.data.goodsSpecs
+            this.specCurrent = 0
 
-            let commissionList = [];
-            let commission2List = [];
+            let commissionList = []
+            let commission2List = []
             this.specList.forEach((item, index) => {
-              item.price = item.price.toFixed(2);
-              item.orgPrice = item.orgPrice.toFixed(2);
-              commissionList.push(item.shareAmount);
-              commission2List.push(item.innerShareAmount);
+              item.price = item.price.toFixed(2)
+              item.orgPrice = item.orgPrice.toFixed(2)
+              commissionList.push(item.shareAmount)
+              commission2List.push(item.innerShareAmount)
             })
-            this.commission = Math.min(...commissionList);
-            this.commission2 = Math.min(...commission2List);
+            this.commission = Math.min(...commissionList)
+            this.commission2 = Math.min(...commission2List)
 
             // 水印
-            if(res.data.logo && res.data.logoStartTime) {
-              this.isShowWater = compareTime(res.data.logoStartTime, res.data.logoEndTime);
-            }else {
-              this.isShowWater = false;
+            if (res.data.logo && res.data.logoStartTime) {
+              this.isShowWater = compareTime(res.data.logoStartTime, res.data.logoEndTime)
+            } else {
+              this.isShowWater = false
             }
 
-            if(res.data.isTrade == 'YES') {
-              this.getMaxPrice();
+            if (res.data.isTrade == 'YES') {
+              this.getMaxPrice()
             }
-            resolve(1);
-          }).catch(res => {
-            this.noData = true;
-            this.isLoaded = true;
-            reject(0);
-          }).finally(res => {
-            uni.hideLoading();
+            resolve(1)
           })
-        })
-			},
+          .catch(res => {
+            this.noData = true
+            this.isLoaded = true
+            reject(0)
+          })
+          .finally(res => {
+            uni.hideLoading()
+          })
+      })
+    },
 
-      getMaxPrice() {
-        this.$api.get('/trade/getMaxPrice').then(res => {
-        	this.tradeMaxPrice = res.data || 0;
-        })
-      },
+    getMaxPrice() {
+      this.$api.get('/trade/getMaxPrice').then(res => {
+        this.tradeMaxPrice = res.data || 0
+      })
+    },
 
-			// 获取评价列表
-			getEvaluateList() {
-				this.$api.get('/order/comment/goods', {
+    // 获取评价列表
+    getEvaluateList() {
+      this.$api
+        .get('/order/comment/goods', {
           pageNo: 1,
           pageSize: 5,
-          goodsId: this.goodsId,
-				}).then(res => {
-					this.evaluateList = res.data.records;
-				})
-			},
-
-			// 查询结束时间
-			checkEndTime(val) {
-				let yy = new Date().getFullYear();
-				let mm = new Date().getMonth() + 1;
-				let dd = new Date().getDate();
-				// dd = val == 10 ? dd + 1 : dd;
-
-				// 每月有多少天
-				let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-				if(yy%4 == 0 && yy%100 != 0 || yy%400 == 0){
-					days[1] = 29;
-			　　	}
-
-				// 如果结束时间=10（表示第二天10点），dd需加一天
-				if(val == 10) {
-					if(dd >= days[mm - 1]) {
-						mm = mm + 1;
-					}else {
-						dd = dd + 1;
-					}
-				}
-
-				let date = yy + '/' + mm + '/' + dd;
-				let dateTime = date + ' ' + val + ':00:00';
-				return dateTime;
-			},
-
-			// 计算倒计时
-			countTime() {
-				let endDateTime = this.checkEndTime(this.endHour);
-			    var nowtime = new Date(),  //获取当前时间
-			        endtime = new Date(endDateTime);  //定义结束时间
-			    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
-			        hh = Math.floor(lefttime/(1000*60*60)),  //计算小时数
-			        mm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
-			        ss = Math.floor(lefttime/1000%60);  //计算秒数
-				function checkTime(i){
-					if (i<10) {
-						i = "0"+i;
-					}
-					return i;
-				}
-				setTimeout(() => {
-					this.countTime();
-				}, 1000);
-				this.countdownTime = [checkTime(hh), checkTime(mm), checkTime(ss)];
-			},
-
-			// 获取商品二维码
-			async getGoodsCode() {
-        return new Promise((resolve, reject) => {
-          var appid = getQueryVariable('appid') || getQueryVariable('appId');
-          this.$api.get('/goods/qrcode', {
+          goodsId: this.goodsId
+        })
+        .then(res => {
+          this.evaluateList = res.data.records
+        })
+    },
+
+    // 查询结束时间
+    checkEndTime(val) {
+      let yy = new Date().getFullYear()
+      let mm = new Date().getMonth() + 1
+      let dd = new Date().getDate()
+      // dd = val == 10 ? dd + 1 : dd;
+
+      // 每月有多少天
+      let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+      if ((yy % 4 == 0 && yy % 100 != 0) || yy % 400 == 0) {
+        days[1] = 29
+      }
+
+      // 如果结束时间=10（表示第二天10点），dd需加一天
+      if (val == 10) {
+        if (dd >= days[mm - 1]) {
+          mm = mm + 1
+        } else {
+          dd = dd + 1
+        }
+      }
+
+      let date = yy + '/' + mm + '/' + dd
+      let dateTime = date + ' ' + val + ':00:00'
+      return dateTime
+    },
+
+    // 计算倒计时
+    countTime() {
+      let endDateTime = this.checkEndTime(this.endHour)
+      var nowtime = new Date(), //获取当前时间
+        endtime = new Date(endDateTime) //定义结束时间
+      var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
+        hh = Math.floor(lefttime / (1000 * 60 * 60)), //计算小时数
+        mm = Math.floor((lefttime / (1000 * 60)) % 60), //计算分钟数
+        ss = Math.floor((lefttime / 1000) % 60) //计算秒数
+      function checkTime(i) {
+        if (i < 10) {
+          i = '0' + i
+        }
+        return i
+      }
+      setTimeout(() => {
+        this.countTime()
+      }, 1000)
+      this.countdownTime = [checkTime(hh), checkTime(mm), checkTime(ss)]
+    },
+
+    // 获取商品二维码
+    async getGoodsCode() {
+      return new Promise((resolve, reject) => {
+        var appid = getQueryVariable('appid') || getQueryVariable('appId')
+        this.$api
+          .get('/goods/qrcode', {
             url: `${process.env.VUE_APP_HREF}/packageGoods/pages/detail?appid=${appid}&id=${this.goodsId}&serviceId=${this.$store.state.user.userId}`
-          }).then(res => {
+          })
+          .then(res => {
             // this.codeUrl = 'data:image/jpeg;base64,' + res.data;
-            this.codeUrl = res.data;
-            resolve(res.data);
+            this.codeUrl = res.data
+            resolve(res.data)
           })
-        });
-			},
-
-			// 视频播放
-			playVideo(e) {
-				this.isPlayVideo = true;
-			},
-
-			// 视频暂停
-			pauseVideo(e) {
-				this.isPlayVideo = false;
-			},
-
-			// 关闭视频弹窗
-			closeFixedVideo() {
-				this.isFixedVideo = false;
-				this.isCloseMyself = true;
-				this.videoContext2.pause();
-			},
-
-			// 从个人信息获取购物车商品数量
-			getCartCount() {
-				this.$api.get('/user/user/detail', {
-					userId: this.$store.state.user.userId
-				}).then(res => {
-					this.cartCount = res.data.shoppingCartNums;
-
-					if(!res.data.openId) {
-						return this.$navToPage({
-							url: '/pages/login/index?isNotOpenid=' + true
-						})
-					}
-				})
-			},
-
-			// 查看所有评价
-			toAllEvaluate() {
-				this.$navToPage({
-					url: '/packageGoods/pages/evaluate?goodsId=' + this.goodsId
-				})
-			},
-
-			// 收藏/取消收藏
-			handleCollect() {
-				if(!this.isLogin) {
-					return this.$navToPage({
-						url: '/pages/login/index'
-					})
-				}
-				if(!this.detail.favorite) {
-					this.$api.post('/goods/favorite/add', {
+      })
+    },
+
+    // 视频播放
+    playVideo(e) {
+      this.isPlayVideo = true
+    },
+
+    // 视频暂停
+    pauseVideo(e) {
+      this.isPlayVideo = false
+    },
+
+    // 关闭视频弹窗
+    closeFixedVideo() {
+      this.isFixedVideo = false
+      this.isCloseMyself = true
+      this.videoContext2.pause()
+    },
+
+    // 从个人信息获取购物车商品数量
+    getCartCount() {
+      this.$api
+        .get('/user/user/detail', {
+          userId: this.$store.state.user.userId
+        })
+        .then(res => {
+          this.cartCount = res.data.shoppingCartNums
+
+          if (!res.data.openId) {
+            return this.$navToPage({
+              url: '/pages/login/index?isNotOpenid=' + true
+            })
+          }
+        })
+    },
+
+    // 查看所有评价
+    toAllEvaluate() {
+      this.$navToPage({
+        url: '/packageGoods/pages/evaluate?goodsId=' + this.goodsId
+      })
+    },
+
+    // 收藏/取消收藏
+    handleCollect() {
+      if (!this.isLogin) {
+        return this.$navToPage({
+          url: '/pages/login/index'
+        })
+      }
+      if (!this.detail.favorite) {
+        this.$api
+          .post('/goods/favorite/add', {
             goodsId: this.goodsId,
             userId: this.$store.state.user.userId
-					}).then(res => {
-						this.$successToast('收藏成功');
-						this.getDetail();
-					})
-				}else {
-					this.$api.post('/goods/favorite/detail/del', {
+          })
+          .then(res => {
+            this.$successToast('收藏成功')
+            this.getDetail()
+          })
+      } else {
+        this.$api
+          .post('/goods/favorite/detail/del', {
             goodsId: this.goodsId,
             userId: this.$store.state.user.userId
-					}).then(res => {
-						this.$successToast('取消收藏成功');
-						this.getDetail();
-					})
-				}
-			},
-
-			// 切换图片
-			changeBanner(e) {
-				this.bannerCurrent = e.detail.current;
-				if(this.bannerCurrent > 0 && this.detail.vedio) {
-					this.videoContext1.pause();
-				}
-			},
-
-			// 预览图片
-			previewImage(url) {
-				let imgs = [];
-				this.bannerList.forEach((item, index) => {
-					imgs.push(item.url);
-				})
-				uni.previewImage({
-					urls: imgs,
-					current: url
-				});
-			},
-
-			// 预览评价图片
-			previewEvaluateImage(url, imgs) {
-				uni.previewImage({
-					urls: imgs,
-					current: url
-				});
-			},
-
-			// 点击分享
-			clickShare() {
-				if(!this.isLogin) {
-					return this.$navToPage({
-						url: '/pages/login/index'
-					})
-				}
-				// this.getGoodsCode();
-				this.isShareDialog = true;
-			},
-
-			// 点击加入购物车/立即购买
-			clickCartOrBuy(type) {
-				if(!this.isLogin) {
-					return this.$navToPage({
-						url: '/pages/login/index'
-					})
-				}
-        if(type == 5) {
-          this.buyNum = 1;
-          this.isTradeTag = true;
-          this.isTradeAgree = false;
-        }else {
-          this.isTradeTag = false;
-        }
-				this.dialogType = type;
-				this.isBuyDialog = true;
-			},
-
-			// 切换规格
-			changeSpec(index) {
-				this.specCurrent = index;
-			},
-
-			// 加入购物车
-			addToCart() {
-				if(this.specList[this.specCurrent].stockNum == 0) {
-					return this.$toast('该规格库存不足');
-				}
-				this.$api.postJson('/shpping/cart/add/one', {
-          userId: this.$store.state.user.userId,
-          buyGoods: [{
-            goodsId: this.goodsId,
-            goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
-            num: this.buyNum,
-            secKillId: this.detail.secKillId || '',
-            promotionGroupId: this.detail.promotionGroupId || '',
-          }]
-				}).then(res => {
-					this.$successToast('添加成功');
-					this.getCartCount();
-					this.isBuyDialog = false;
-				})
-			},
-
-			// 立即购买
-			nowBuy() {
-				if(this.specList[this.specCurrent].stockNum == 0) {
-					return this.$toast('该规格库存不足');
-				}
-				let buyList = [{
-					goodsId: this.goodsId,
-					goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
-					num: this.buyNum,
-					secKillId: this.detail.secKillId || '',
-					promotionGroupId: this.detail.promotionGroupId || '',
-				}];
-				let url = '/packageGoods/pages/order';
-				if(this.detail.promotionGroupId) {
-					url = url + '?groupbuyId=' + this.detail.promotionGroupId
-				}
-
-        this.$setStorage('goodsBuyList', buyList);
-
-				this.$navToPage({
-					url
-				})
-			},
-
-			// 马上抢购（秒杀）
-			rushBuy() {
-				if(this.detail.secStockNum == 0) {
-					return this.$toast('该规格库存不足');
-				}
-				this.$api.post('/goods/sec/kill/start', {
-					secKillId: this.detail.secKillId,
-				}).then(res => {
-					if(res.data) {
-						let buyList = [{
-							goodsId: this.goodsId,
-							goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
-							num: this.buyNum,
-							secKillId: this.detail.secKillId || '',
-							promotionGroupId: this.detail.promotionGroupId || '',
-						}];
-
-            this.$setStorage('goodsBuyList', buyList);
-
-						this.$navToPage({
-							url: '/packageGoods/pages/order?secKillId=' + this.detail.secKillId + '&secKillSpecId=' + this.detail.secKillSpecId + '&secToken=' + res.data
-						})
-					}else {
-						this.$toast('活动异常');
-					}
-				})
-			},
-
-			// 去购物车
-			toCart() {
-				this.$navToPage({
-					url:'/packageGoods/pages/cart'
-				})
-			},
-
-      // 去以旧换新协议
-      toAgreement() {
-        this.$navToPage({
-        	url: `/packageMine/pages/agreement?type=4`
+          })
+          .then(res => {
+            this.$successToast('取消收藏成功')
+            this.getDetail()
+          })
+      }
+    },
+
+    // 切换图片
+    changeBanner(e) {
+      this.bannerCurrent = e.detail.current
+      if (this.bannerCurrent > 0 && this.detail.vedio) {
+        this.videoContext1.pause()
+      }
+    },
+
+    // 预览图片
+    previewImage(url) {
+      let imgs = []
+      this.bannerList.forEach((item, index) => {
+        imgs.push(item.url)
+      })
+      uni.previewImage({
+        urls: imgs,
+        current: url
+      })
+    },
+
+    // 预览评价图片
+    previewEvaluateImage(url, imgs) {
+      uni.previewImage({
+        urls: imgs,
+        current: url
+      })
+    },
+
+    // 点击分享
+    clickShare() {
+      if (!this.isLogin) {
+        return this.$navToPage({
+          url: '/pages/login/index'
         })
-      },
-
-      changeTradeTag() {
-        this.isTradeTag = !this.isTradeTag;
-        this.buyNum = 1;
-      },
-
-      toTradein() {
-        if(!this.isTradeAgree) return this.$toast('请阅读并同意《以旧换新协议》');
-
-        let buyList = [{
-        	goodsId: this.goodsId,
-        	goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
-        	num: this.buyNum,
-        	secKillId: this.detail.secKillId || '',
-        	promotionGroupId: this.detail.promotionGroupId || '',
-        }];
-        this.$setStorage('goodsBuyList', buyList);
-
-        this.$navToPage({
-        	url: `/packageGoods/pages/tradein/category?goodsId=${this.goodsId}`
+      }
+      // this.getGoodsCode();
+      this.isShareDialog = true
+    },
+
+    // 点击加入购物车/立即购买
+    clickCartOrBuy(type) {
+      if (!this.isLogin) {
+        return this.$navToPage({
+          url: '/pages/login/index'
         })
-      },
-
-			// 生成图片
-			async markImage() {
-				this.isShareDialog = false;
-				this.isShowCanvas = true;
-
-				if(this.isFinishCanvas) {
-					return false;
-				}
-
-				uni.showLoading({
-				    title: '海报生成中'
-				});
-
-				await this.getGoodsCode();
-
-        let img = this.detail.imgUrl;
-        let title = this.detail.goodsName;
-        let des = this.detail.describeText;
-        let price1 = this.detail.goodsPrice;
-        let price2 = this.detail.orgGoodsPrice;
-        let sales = this.detail.soldNum;
-        let fullPieceNum = this.detail.promotionFullPieceNum;
-        let fullPiecePrice = this.detail.promotionFullPiecePrice;
-				let fullPiece = `${fullPieceNum}件单价约¥${fullPiecePrice}`;
-        // let code = this.codeUrl;
-        // base64src(this.codeUrl , resCurrent => {
-        // 	code = resCurrent;
-        // })
-
-        var ctx = uni.createCanvasContext('myCanvas')
-
-        /**
-         * @param {Object} str 要绘制的字符串
-         * @param {Number} initX 绘制字符串起始x坐标
-         * @param {Number} initY 绘制字符串起始y坐标
-         * @param {Number} lineHeight 字行高
-         */
-        function canvasTextAutoLine(str,initX,initY,lineHeight){
-            var lineWidth = 0;
-            var canvasWidth = 260;
-            var lastSubStrIndex= 0;
-          var lineNum = 0;
-          var state = true;
-            for(let i=0;i<str.length;i++){
-                lineWidth += ctx.measureText(str[i]).width;
-                if(lineWidth>canvasWidth && lineNum < 1){
-                    ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
-                    initY+=lineHeight;
-                    lineWidth=0;
-                    lastSubStrIndex=i;
-              lineNum ++;
-                } else if(lineWidth>canvasWidth && lineNum < 2) {
-              ctx.fillText(str.substring(lastSubStrIndex+2,i)+'...',initX,initY);
-              lineNum ++;
-              state = false
-            }
-            if(i==str.length-1 && state){
-              ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
-            }
+      }
+      if (type == 5) {
+        this.buyNum = 1
+        this.isTradeTag = true
+        this.isTradeAgree = false
+      } else {
+        this.isTradeTag = false
+      }
+      this.dialogType = type
+      this.isBuyDialog = true
+    },
+
+    // 切换规格
+    changeSpec(index) {
+      this.specCurrent = index
+    },
+
+    // 加入购物车
+    addToCart() {
+      if (this.specList[this.specCurrent].stockNum == 0) {
+        return this.$toast('该规格库存不足')
+      }
+      this.$api
+        .postJson('/shpping/cart/add/one', {
+          userId: this.$store.state.user.userId,
+          buyGoods: [
+            {
+              goodsId: this.goodsId,
+              goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
+              num: this.buyNum,
+              secKillId: this.detail.secKillId || '',
+              promotionGroupId: this.detail.promotionGroupId || ''
             }
+          ]
+        })
+        .then(res => {
+          this.$successToast('添加成功')
+          this.getCartCount()
+          this.isBuyDialog = false
+        })
+    },
+
+    // 立即购买
+    nowBuy() {
+      if (this.specList[this.specCurrent].stockNum == 0) {
+        return this.$toast('该规格库存不足')
+      }
+      let buyList = [
+        {
+          goodsId: this.goodsId,
+          goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
+          num: this.buyNum,
+          secKillId: this.detail.secKillId || '',
+          promotionGroupId: this.detail.promotionGroupId || ''
         }
+      ]
+      let url = '/packageGoods/pages/order'
+      if (this.detail.promotionGroupId) {
+        url = url + '?groupbuyId=' + this.detail.promotionGroupId
+      }
 
-        // 白色背景
-        ctx.rect(0, 0, 300, 520)
-        ctx.setFillStyle('#FFFFFF')
-        ctx.fill()
-        ctx.stroke()
-
-        // 商品名称
-        ctx.setFontSize(14)
-        ctx.setFillStyle('#333333')
-        canvasTextAutoLine(title, 20, 300, 18)
-
-        // 商品描述
-        if(des) {
-          ctx.setFontSize(12)
-          ctx.setFillStyle('#999999')
-          canvasTextAutoLine(des, 20, 336, 16)
+      this.$setStorage('goodsBuyList', buyList)
+
+      this.$navToPage({
+        url
+      })
+    },
+
+    // 马上抢购（秒杀）
+    rushBuy() {
+      if (this.detail.secStockNum == 0) {
+        return this.$toast('该规格库存不足')
+      }
+      this.$api
+        .post('/goods/sec/kill/start', {
+          secKillId: this.detail.secKillId
+        })
+        .then(res => {
+          if (res.data) {
+            let buyList = [
+              {
+                goodsId: this.goodsId,
+                goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
+                num: this.buyNum,
+                secKillId: this.detail.secKillId || '',
+                promotionGroupId: this.detail.promotionGroupId || ''
+              }
+            ]
+
+            this.$setStorage('goodsBuyList', buyList)
+
+            this.$navToPage({
+              url:
+                '/packageGoods/pages/order?secKillId=' +
+                this.detail.secKillId +
+                '&secKillSpecId=' +
+                this.detail.secKillSpecId +
+                '&secToken=' +
+                res.data
+            })
+          } else {
+            this.$toast('活动异常')
+          }
+        })
+    },
+
+    // 去购物车
+    toCart() {
+      this.$navToPage({
+        url: '/packageGoods/pages/cart'
+      })
+    },
+
+    // 去以旧换新协议
+    toAgreement() {
+      this.$navToPage({
+        url: `/packageMine/pages/agreement?type=4`
+      })
+    },
+
+    changeTradeTag() {
+      this.isTradeTag = !this.isTradeTag
+      this.buyNum = 1
+    },
+
+    toTradein() {
+      if (!this.isTradeAgree) return this.$toast('请阅读并同意《以旧换新协议》')
+
+      let buyList = [
+        {
+          goodsId: this.goodsId,
+          goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
+          num: this.buyNum,
+          secKillId: this.detail.secKillId || '',
+          promotionGroupId: this.detail.promotionGroupId || ''
         }
+      ]
+      this.$setStorage('goodsBuyList', buyList)
 
-        // 现价
-        ctx.setFontSize(16)
-        ctx.setFillStyle('#FF3F42')
-        ctx.fillText('¥'+price1, 20, 380)
-
-        // 原价
-        ctx.setFontSize(13)
-        ctx.setFillStyle('#666666')
-        ctx.fillText('¥'+price2, 20, 396)
-        ctx.setStrokeStyle("#666666")
-        ctx.moveTo(20, 392)
-        ctx.lineTo(ctx.measureText('¥'+price2).width + 20, 392)
-        ctx.stroke()
-
-        // 销量
-        ctx.setFontSize(12)
-        ctx.setFillStyle('#666666')
-        ctx.fillText('销量：'+sales, 260 - ctx.measureText('销量：'+sales).width + 20, 380)
-
-        // 满件打折
-        if(fullPieceNum) {
-        	ctx.setFillStyle('#FF3F42')
-        	ctx.fillRect(ctx.measureText('¥'+price1).width + 40, 370, ctx.measureText(fullPiece).width + 16, 22)
-        	ctx.setFontSize(12)
-        	ctx.setFillStyle('#FFFFFF')
-        	ctx.fillText(fullPiece, ctx.measureText('¥'+price1).width + 48, 385)
+      this.$navToPage({
+        url: `/packageGoods/pages/tradein/category?goodsId=${this.goodsId}`
+      })
+    },
+
+    // 生成图片
+    async markImage() {
+      this.isShareDialog = false
+      this.isShowCanvas = true
+
+      if (this.isFinishCanvas) {
+        return false
+      }
+
+      uni.showLoading({
+        title: '海报生成中'
+      })
+
+      await this.getGoodsCode()
+
+      let img = this.detail.imgUrl
+      let title = this.detail.goodsName
+      let des = this.detail.describeText
+      let price1 = this.detail.goodsPrice
+      let price2 = this.detail.orgGoodsPrice
+      let sales = this.detail.soldNum
+      let fullPieceNum = this.detail.promotionFullPieceNum
+      let fullPiecePrice = this.detail.promotionFullPiecePrice
+      let fullPiece = `${fullPieceNum}件单价约¥${fullPiecePrice}`
+      // let code = this.codeUrl;
+      // base64src(this.codeUrl , resCurrent => {
+      // 	code = resCurrent;
+      // })
+
+      var ctx = uni.createCanvasContext('myCanvas')
+
+      /**
+       * @param {Object} str 要绘制的字符串
+       * @param {Number} initX 绘制字符串起始x坐标
+       * @param {Number} initY 绘制字符串起始y坐标
+       * @param {Number} lineHeight 字行高
+       */
+      function canvasTextAutoLine(str, initX, initY, lineHeight) {
+        var lineWidth = 0
+        var canvasWidth = 260
+        var lastSubStrIndex = 0
+        var lineNum = 0
+        var state = true
+        for (let i = 0; i < str.length; i++) {
+          lineWidth += ctx.measureText(str[i]).width
+          if (lineWidth > canvasWidth && lineNum < 1) {
+            ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
+            initY += lineHeight
+            lineWidth = 0
+            lastSubStrIndex = i
+            lineNum++
+          } else if (lineWidth > canvasWidth && lineNum < 2) {
+            ctx.fillText(str.substring(lastSubStrIndex + 2, i) + '...', initX, initY)
+            lineNum++
+            state = false
+          }
+          if (i == str.length - 1 && state) {
+            ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY)
+          }
         }
+      }
+
+      // 白色背景
+      ctx.rect(0, 0, 300, 520)
+      ctx.setFillStyle('#FFFFFF')
+      ctx.fill()
+      ctx.stroke()
 
-        // 二维码
-        // ctx.drawImage(code, 110, 404, 80, 80)
+      // 商品名称
+      ctx.setFontSize(14)
+      ctx.setFillStyle('#333333')
+      canvasTextAutoLine(title, 20, 300, 18)
 
-        // 提示
+      // 商品描述
+      if (des) {
         ctx.setFontSize(12)
-        ctx.setFillStyle('#FE781F')
-        ctx.fillText('打开微信扫描识别查看商品', 78, 500)
-
-        // 图片
-        // const imgRes = await toBase64src(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_BASE_API + '/redirect?url=' + img)
-        // const codeRes = await toBase64src(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_BASE_API + '/redirect?url=' + this.codeUrl)
-        if(img.indexOf('https://zf-mall.oss-cn-shenzhen.aliyuncs.com') >= 0) {
-          img = img.replace('https://zf-mall.oss-cn-shenzhen.aliyuncs.com', 'https://sxbh5.zfire.top/imgfile');
-        }
-        if(img.indexOf('https://train-2023.oss-cn-shenzhen.aliyuncs.com') >= 0) {
-          img = img.replace('https://train-2023.oss-cn-shenzhen.aliyuncs.com', 'https://jiasm.zfire.top/sxbh5/imgfile');
-        }
+        ctx.setFillStyle('#999999')
+        canvasTextAutoLine(des, 20, 336, 16)
+      }
 
-        let codeUrl = '';
-        if(this.codeUrl.indexOf('https://zf-mall.oss-cn-shenzhen.aliyuncs.com') >= 0) {
-          codeUrl = this.codeUrl.replace('https://zf-mall.oss-cn-shenzhen.aliyuncs.com', 'https://sxbh5.zfire.top/imgfile');
-        }
-        if(this.codeUrl.indexOf('https://train-2023.oss-cn-shenzhen.aliyuncs.com') >= 0) {
-          codeUrl = this.codeUrl.replace('https://train-2023.oss-cn-shenzhen.aliyuncs.com', 'https://jiasm.zfire.top/sxbh5/imgfile');
-        }
+      // 现价
+      ctx.setFontSize(16)
+      ctx.setFillStyle('#FF3F42')
+      ctx.fillText('¥' + price1, 20, 380)
+
+      // 原价
+      ctx.setFontSize(13)
+      ctx.setFillStyle('#666666')
+      ctx.fillText('¥' + price2, 20, 396)
+      ctx.setStrokeStyle('#666666')
+      ctx.moveTo(20, 392)
+      ctx.lineTo(ctx.measureText('¥' + price2).width + 20, 392)
+      ctx.stroke()
+
+      // 销量
+      ctx.setFontSize(12)
+      ctx.setFillStyle('#666666')
+      ctx.fillText('销量：' + sales, 260 - ctx.measureText('销量：' + sales).width + 20, 380)
+
+      // 满件打折
+      if (fullPieceNum) {
+        ctx.setFillStyle('#FF3F42')
+        ctx.fillRect(ctx.measureText('¥' + price1).width + 40, 370, ctx.measureText(fullPiece).width + 16, 22)
+        ctx.setFontSize(12)
+        ctx.setFillStyle('#FFFFFF')
+        ctx.fillText(fullPiece, ctx.measureText('¥' + price1).width + 48, 385)
+      }
+
+      // 二维码
+      // ctx.drawImage(code, 110, 404, 80, 80)
+
+      // 提示
+      ctx.setFontSize(12)
+      ctx.setFillStyle('#FE781F')
+      ctx.fillText('打开微信扫描识别查看商品', 78, 500)
+
+      // 图片
+      if (img.indexOf('https://zf-mall-test.oss-cn-shenzhen.aliyuncs.com') >= 0) {
+        img = img.replace(
+          'https://zf-mall-test.oss-cn-shenzhen.aliyuncs.com',
+          'https://jiasm.zfire.top/jsm-sxbh5/imgfile'
+        )
+      }
+      let codeUrl = ''
+      if (this.codeUrl.indexOf('https://zf-mall-test.oss-cn-shenzhen.aliyuncs.com') >= 0) {
+        codeUrl = this.codeUrl.replace(
+          'https://zf-mall-test.oss-cn-shenzhen.aliyuncs.com',
+          'https://jiasm.zfire.top/jsm-sxbh5/imgfile'
+        )
+      }
 
-        const imgRes = await toBase64src(img)
-        const codeRes = await toBase64src(codeUrl)
-
-        ctx.drawImage(imgRes, 20, 20, 260, 260)
-        ctx.drawImage(codeRes, 110, 404, 80, 80)
-
-        ctx.draw()
-        setTimeout(() => {
-          uni.canvasToTempFilePath({
-          	x: 0,
-          	y: 0,
-          	width: 300,
-          	height: 520,
-          	canvasId: 'myCanvas',
-          	success: res => {
-              this.canvasImg = res.tempFilePath;
-              console.log(res.tempFilePath);
-          		console.log('生成画布成功')
-              uni.hideLoading();
-              this.isFinishCanvas = true;
-          	},
+      console.log(img, codeUrl)
+
+      const imgRes = await toBase64src(img)
+      const codeRes = await toBase64src(codeUrl)
+
+      ctx.drawImage(imgRes, 20, 20, 260, 260)
+      ctx.drawImage(codeRes, 110, 404, 80, 80)
+
+      ctx.draw()
+      setTimeout(() => {
+        uni.canvasToTempFilePath(
+          {
+            x: 0,
+            y: 0,
+            width: 300,
+            height: 520,
+            canvasId: 'myCanvas',
+            success: res => {
+              this.canvasImg = res.tempFilePath
+              console.log(res.tempFilePath)
+              console.log('生成画布成功')
+              uni.hideLoading()
+              this.isFinishCanvas = true
+            },
             fail: res => {
-              console.log(res);
+              console.log(res)
             },
             complete: res => {
-              console.log(res);
+              console.log(res)
             }
-          }, this)
-        }, 500)
-			},
-
-			// 关闭canvas
-			closeCanvas() {
-				this.isShowCanvas = false;
-				uni.hideLoading();
-			},
-		}
-	}
+          },
+          this
+        )
+      }, 500)
+    },
+
+    // 关闭canvas
+    closeCanvas() {
+      this.isShowCanvas = false
+      uni.hideLoading()
+    }
+  }
+}
 </script>
 
 <style lang="scss">
-	.app-container {
-		background: #F4F2F2;
-		box-sizing: border-box;
-		padding-bottom: 100rpx;
-	}
-	.recommender-container {
-		position: fixed;
-		top: 20rpx;
-		left: 0;
-		z-index: 99;
-		display: flex;
-		justify-content: center;
-		width: 100%;
-		.content {
-			font-size: 28rpx;
-			color: #FFFFFF;
-			background: rgba($color: #000000, $alpha: 0.8);
-			display: flex;
-			padding: 0 15rpx;
-			height: 60rpx;
-			border-radius: 60rpx;
-			justify-content: center;
-			align-items: center;
-			image {
-				width: 40rpx;
-				height: 40rpx;
-				display: block;
-				border-radius: 50%;
-				margin-right: 10rpx;
-			}
-			.name {
-				max-width: 160rpx;
-				margin-right: 6rpx;
-			}
-		}
-
-
-	}
-	.swiper-container {
-		position: relative;
-		swiper {
-			height: 750rpx;
-		}
-		.image {
-			width: 750rpx;
-			height: 750rpx;
-			display: block;
-			margin: 0 auto;
-			overflow: hidden;
-			position: relative;
-			.img {
-				width: 750rpx;
-				height: 750rpx;
-				display: block;
-			}
-			.water {
-				width: 750rpx;
-				height: 750rpx;
-				display: block;
-				position: absolute;
-				left: 0;
-				top: 0;
-				z-index: 1;
-			}
-		}
-		// image {
-		// 	height: 750rpx;
-		// 	width: 750rpx;
-		// 	display: block;
-		// 	margin: 0 auto;
-		// 	overflow: hidden;
-		// }
-		video {
-			height: 750rpx;
-			width: 750rpx;
-			display: block;
-			margin: 0 auto;
-			overflow: hidden;
-		}
-		.nums {
-			position: absolute;
-			right: 20rpx;
-			bottom: 20rpx;
-			background: rgba($color: #000000, $alpha: 0.2);
-			border-radius: 8rpx;
-			line-height: 48rpx;
-			padding: 0 12rpx;
-			font-size: 28rpx;
-			color: #FFFFFF;
-		}
-	}
-	.video-container {
-		position: fixed;
-		right: 20rpx;
-		bottom: 300rpx;
-		z-index: -99;
-		&.isFixed {
-			z-index: 99;
-		}
-		.content {
-			position: relative;
-		}
-		video {
-			height: 200rpx;
-			width: 375rpx;
-		}
-		.close {
-			position: absolute;
-			right: 0;
-			top: 0;
-			z-index: 100;
-			background: rgba($color: #000000, $alpha: .4);
-			padding: 10rpx;
-			image {
-				width: 28rpx;
-				height: 28rpx;
-				display: block;
-			}
-		}
-	}
-	.seckill-container {
-		height: 120rpx;
-		background: linear-gradient(-90deg,rgba(255,37,118,1.00) 0%, #ff5648 100%);
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0 20rpx;
-		position: relative;
-		.clock {
-			position: absolute;
-			right: 220rpx;
-			top: 20rpx;
-			image {
-				width: 74rpx;
-				height: 72rpx;
-				display: block;
-			}
-		}
-		.price-1 {
-			font-size: 40rpx;
-			color: #FFFFFF;
-			line-height: 44rpx;
-		}
-		.price-2 {
-			font-size: 28rpx;
-			line-height: 32rpx;
-			color: #DDDDDD;
-			text-decoration: line-through;
-		}
-		.right {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			text {
-				font-size: 24rpx;
-				color: #FFFFFF;
-			}
-			.time {
-				font-size: 24rpx;
-				color: #FFFFFF;
-				display: flex;
-				align-items: center;
-				margin-top: 6rpx;
-				text {
-					width: 40rpx;
-					height: 40rpx;
-					background: #FFFFFF;
-					border-radius: 4rpx;
-					color: #FF2775;
-					font-size: 24rpx;
-					line-height: 40rpx;
-					text-align: center;
-					margin: 0 4rpx;
-				}
-			}
-		}
-	}
-	.main-container {
-		background: #FFFFFF;
-		padding: 20rpx 20rpx 0;
-		.title {
-			font-size: 32rpx;
-			color: #333333;
-			line-height: 40rpx;
-			font-weight: 600;
-		}
-		.des {
-			font-size: 24rpx;
-			color: #999999;
-			line-height: 28rpx;
-			margin-top: 8rpx;
-		}
-    .tags {
-    	display: flex;
-    	flex-wrap: wrap;
-    	.it {
-    		height: 28rpx;
-    		padding: 0 10rpx;
-    		line-height: 28rpx;
-    		border-radius: 10rpx;
-    		background: #e8e8e8;
-    		font-size: 20rpx;
-    		color: #666666;
-    		margin-right: 10rpx;
-    		margin-top: 10rpx;
-    	}
+.app-container {
+  background: #f4f2f2;
+  box-sizing: border-box;
+  padding-bottom: 100rpx;
+}
+.recommender-container {
+  position: fixed;
+  top: 20rpx;
+  left: 0;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  .content {
+    font-size: 28rpx;
+    color: #ffffff;
+    background: rgba($color: #000000, $alpha: 0.8);
+    display: flex;
+    padding: 0 15rpx;
+    height: 60rpx;
+    border-radius: 60rpx;
+    justify-content: center;
+    align-items: center;
+    image {
+      width: 40rpx;
+      height: 40rpx;
+      display: block;
+      border-radius: 50%;
+      margin-right: 10rpx;
     }
-    .tags2 {
-    	display: flex;
-    	flex-wrap: wrap;
-    	.it {
-    		font-size: 20rpx;
-    		height: 30rpx;
-    		line-height: 30rpx;
-    		padding: 0 6rpx;
-    		margin-right: 10rpx;
-    		border: 1px solid #FE781F;
-    		color: #FE781F;
-    		box-sizing: border-box;
-    		margin-top: 10rpx;
-    		display: flex;
-    		align-items: center;
-    		flex-direction: row;
-    		border-radius: 10rpx;
-    	}
+    .name {
+      max-width: 160rpx;
+      margin-right: 6rpx;
     }
-		.stock {
-			display: flex;
-			justify-content: space-between;
-			align-items: flex-end;
-			margin-top: 20rpx;
-			padding-bottom: 20rpx;
-			.left {
-				display: flex;
-				align-items: center;
-				text {
-					font-size: 24rpx;
-					color: #666666;
-				}
-				.progress-box {
-					width: 140rpx;
-					border-radius: 6px;
-					overflow: hidden;
-					margin-left: 10rpx;
-				}
-			}
-			.right {
-				font-size: 28rpx;
-				color: #999999;
-				display: flex;
-				align-items: center;
-				image {
-					width: 20rpx;
-					height: 20rpx;
-					display: block;
-					margin-left: 10rpx;
-				}
-			}
-		}
-		.price-con {
-			display: flex;
-			justify-content: space-between;
-			align-items: flex-end;
-			margin-top: 10rpx;
-			padding-bottom: 20rpx;
-			.left {
-				display: flex;
-				align-items: center;
-				.price {
-					display: flex;
-					flex-direction: column;
-					.price-1 {
-						color: $minor-color;
-						font-weight: 500;
-						font-size: 32rpx;
-						text {
-							font-size: 24rpx;
-						}
-					}
-					.price-2 {
-						font-size: 26rpx;
-						color: #666666;
-						line-height: 30rpx;
-						text-decoration: line-through;
-					}
-				}
-				.box {
-					background: $minor-color;
-					border-radius: 8rpx;
-					padding: 8rpx 12rpx;
-					color: #ffffff;
-					font-size: 26rpx;
-					margin-left: 20rpx;
-				}
-			}
-			.right {
-				font-size: 28rpx;
-				color: #999999;
-				display: flex;
-				align-items: center;
-				image {
-					width: 20rpx;
-					height: 20rpx;
-					display: block;
-					margin-left: 10rpx;
-				}
-			}
-		}
-		.bottom {
-      border-top: 1px solid #eaeaea;
-      .row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 76rpx;
-        font-size: 28rpx;
-        color: #666666;
+  }
+}
+.swiper-container {
+  position: relative;
+  swiper {
+    height: 750rpx;
+  }
+  .image {
+    width: 750rpx;
+    height: 750rpx;
+    display: block;
+    margin: 0 auto;
+    overflow: hidden;
+    position: relative;
+    .img {
+      width: 750rpx;
+      height: 750rpx;
+      display: block;
+    }
+    .water {
+      width: 750rpx;
+      height: 750rpx;
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+    }
+  }
+  // image {
+  // 	height: 750rpx;
+  // 	width: 750rpx;
+  // 	display: block;
+  // 	margin: 0 auto;
+  // 	overflow: hidden;
+  // }
+  video {
+    height: 750rpx;
+    width: 750rpx;
+    display: block;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+  .nums {
+    position: absolute;
+    right: 20rpx;
+    bottom: 20rpx;
+    background: rgba($color: #000000, $alpha: 0.2);
+    border-radius: 8rpx;
+    line-height: 48rpx;
+    padding: 0 12rpx;
+    font-size: 28rpx;
+    color: #ffffff;
+  }
+}
+.video-container {
+  position: fixed;
+  right: 20rpx;
+  bottom: 300rpx;
+  z-index: -99;
+  &.isFixed {
+    z-index: 99;
+  }
+  .content {
+    position: relative;
+  }
+  video {
+    height: 200rpx;
+    width: 375rpx;
+  }
+  .close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 100;
+    background: rgba($color: #000000, $alpha: 0.4);
+    padding: 10rpx;
+    image {
+      width: 28rpx;
+      height: 28rpx;
+      display: block;
+    }
+  }
+}
+.seckill-container {
+  height: 120rpx;
+  background: linear-gradient(-90deg, rgba(255, 37, 118, 1) 0%, #ff5648 100%);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20rpx;
+  position: relative;
+  .clock {
+    position: absolute;
+    right: 220rpx;
+    top: 20rpx;
+    image {
+      width: 74rpx;
+      height: 72rpx;
+      display: block;
+    }
+  }
+  .price-1 {
+    font-size: 40rpx;
+    color: #ffffff;
+    line-height: 44rpx;
+  }
+  .price-2 {
+    font-size: 28rpx;
+    line-height: 32rpx;
+    color: #dddddd;
+    text-decoration: line-through;
+  }
+  .right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text {
+      font-size: 24rpx;
+      color: #ffffff;
+    }
+    .time {
+      font-size: 24rpx;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      margin-top: 6rpx;
+      text {
+        width: 40rpx;
+        height: 40rpx;
+        background: #ffffff;
+        border-radius: 4rpx;
+        color: #ff2775;
+        font-size: 24rpx;
+        line-height: 40rpx;
+        text-align: center;
+        margin: 0 4rpx;
       }
-		}
-	}
-	.line-container {
-		background: #FFFFFF;
-		margin-top: 20rpx;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		height: 88rpx;
-		font-size: 28rpx;
-		color: #333333;
-		padding: 0 20rpx;
-		text {
-			color: #FE781F;
-		}
-	}
-
-  .tradein-container {
-    background: #ffffff;
+    }
+  }
+}
+.main-container {
+  background: #ffffff;
+  padding: 20rpx 20rpx 0;
+  .title {
+    font-size: 32rpx;
+    color: #333333;
+    line-height: 40rpx;
+    font-weight: 600;
+  }
+  .des {
+    font-size: 24rpx;
+    color: #999999;
+    line-height: 28rpx;
+    margin-top: 8rpx;
+  }
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    .it {
+      height: 28rpx;
+      padding: 0 10rpx;
+      line-height: 28rpx;
+      border-radius: 10rpx;
+      background: #e8e8e8;
+      font-size: 20rpx;
+      color: #666666;
+      margin-right: 10rpx;
+      margin-top: 10rpx;
+    }
+  }
+  .tags2 {
+    display: flex;
+    flex-wrap: wrap;
+    .it {
+      font-size: 20rpx;
+      height: 30rpx;
+      line-height: 30rpx;
+      padding: 0 6rpx;
+      margin-right: 10rpx;
+      border: 1px solid #fe781f;
+      color: #fe781f;
+      box-sizing: border-box;
+      margin-top: 10rpx;
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      border-radius: 10rpx;
+    }
+  }
+  .stock {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
     margin-top: 20rpx;
-    padding: 30rpx 20rpx;
+    padding-bottom: 20rpx;
+    .left {
+      display: flex;
+      align-items: center;
+      text {
+        font-size: 24rpx;
+        color: #666666;
+      }
+      .progress-box {
+        width: 140rpx;
+        border-radius: 6px;
+        overflow: hidden;
+        margin-left: 10rpx;
+      }
+    }
+    .right {
+      font-size: 28rpx;
+      color: #999999;
+      display: flex;
+      align-items: center;
+      image {
+        width: 20rpx;
+        height: 20rpx;
+        display: block;
+        margin-left: 10rpx;
+      }
+    }
+  }
+  .price-con {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: flex-end;
+    margin-top: 10rpx;
+    padding-bottom: 20rpx;
     .left {
-      .top {
+      display: flex;
+      align-items: center;
+      .price {
         display: flex;
-        align-items: center;
-        .iconfont {
-          color: $theme-color;
-          font-size: 36rpx;
-        }
-        .text {
-          color: $theme-color;
-          margin-left: 8rpx;
+        flex-direction: column;
+        .price-1 {
+          color: $minor-color;
           font-weight: 500;
-        }
-        ::v-deep .u-tag {
-          margin-left: 16rpx;
-          border-color: $assist-color;
-          .u-tag__text {
-            color: $assist-color;
+          font-size: 32rpx;
+          text {
+            font-size: 24rpx;
           }
         }
+        .price-2 {
+          font-size: 26rpx;
+          color: #666666;
+          line-height: 30rpx;
+          text-decoration: line-through;
+        }
       }
-      .bottom {
-        font-size: 24rpx;
-        margin-top: 20rpx;
+      .box {
+        background: $minor-color;
+        border-radius: 8rpx;
+        padding: 8rpx 12rpx;
+        color: #ffffff;
+        font-size: 26rpx;
+        margin-left: 20rpx;
       }
     }
     .right {
+      font-size: 28rpx;
+      color: #999999;
+      display: flex;
+      align-items: center;
+      image {
+        width: 20rpx;
+        height: 20rpx;
+        display: block;
+        margin-left: 10rpx;
+      }
+    }
+  }
+  .bottom {
+    border-top: 1px solid #eaeaea;
+    .row {
       display: flex;
       align-items: center;
-      color: $assist-color;
+      justify-content: space-between;
+      height: 76rpx;
       font-size: 28rpx;
+      color: #666666;
+    }
+  }
+}
+.line-container {
+  background: #ffffff;
+  margin-top: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 88rpx;
+  font-size: 28rpx;
+  color: #333333;
+  padding: 0 20rpx;
+  text {
+    color: #fe781f;
+  }
+}
+
+.tradein-container {
+  background: #ffffff;
+  margin-top: 20rpx;
+  padding: 30rpx 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .left {
+    .top {
+      display: flex;
+      align-items: center;
       .iconfont {
+        color: $theme-color;
+        font-size: 36rpx;
+      }
+      .text {
+        color: $theme-color;
         margin-left: 8rpx;
-        color: $sec-font;
+        font-weight: 500;
+      }
+      ::v-deep .u-tag {
+        margin-left: 16rpx;
+        border-color: $assist-color;
+        .u-tag__text {
+          color: $assist-color;
+        }
       }
     }
+    .bottom {
+      font-size: 24rpx;
+      margin-top: 20rpx;
+    }
   }
-
-  .allBottom-container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
+  .right {
+    display: flex;
+    align-items: center;
+    color: $assist-color;
+    font-size: 28rpx;
+    .iconfont {
+      margin-left: 8rpx;
+      color: $sec-font;
+    }
   }
-
-  .tradeinBottom-container {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 20rpx;
-    background: #E6F0FF;
+}
+
+.allBottom-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
+.tradeinBottom-container {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20rpx;
+  background: #e6f0ff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .left {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    .left {
+    .tag {
       display: flex;
       align-items: center;
-      .tag {
-        display: flex;
-        align-items: center;
-        background: $theme-color;
-        padding: 8rpx 16rpx;
-        border-radius: 8rpx;
-        .iconfont {
-          color: #ffffff;
-          font-size: 32rpx;
-        }
-        .name {
-          font-size: 24rpx;
-          color: #ffffff;
-          margin-left: 8rpx;
-        }
+      background: $theme-color;
+      padding: 8rpx 16rpx;
+      border-radius: 8rpx;
+      .iconfont {
+        color: #ffffff;
+        font-size: 32rpx;
       }
-      .text {
+      .name {
         font-size: 24rpx;
-        margin-left: 12rpx;
+        color: #ffffff;
+        margin-left: 8rpx;
       }
     }
+    .text {
+      font-size: 24rpx;
+      margin-left: 12rpx;
+    }
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    color: $assist-color;
+    font-size: 28rpx;
+    .iconfont {
+      margin-left: 8rpx;
+      color: $sec-font;
+    }
+  }
+}
+
+.detail-container {
+  background: #ffffff;
+  margin-top: 20rpx;
+  padding-bottom: 100rpx;
+  .title {
+    font-size: 32rpx;
+    color: #333333;
+    line-height: 88rpx;
+    text-align: center;
+    font-weight: 600;
+  }
+  .content {
+    image,
+    img {
+      width: 100%;
+      display: block;
+    }
+  }
+}
+.evaluate-container {
+  background: #ffffff;
+  margin-top: 20rpx;
+  padding: 0 20rpx;
+  .title {
+    height: 88rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left {
+      font-size: 32rpx;
+      text-align: center;
+      font-weight: 600;
+    }
     .right {
       display: flex;
       align-items: center;
-      color: $assist-color;
-      font-size: 28rpx;
-      .iconfont {
+      color: $sec-font;
+      text {
         margin-left: 8rpx;
-        color: $sec-font;
+        font-size: 24rpx;
       }
     }
   }
-
-	.detail-container {
-		background: #FFFFFF;
-		margin-top: 20rpx;
-    padding-bottom: 100rpx;
-		.title {
-			font-size: 32rpx;
-			color: #333333;
-			line-height: 88rpx;
-			text-align: center;
-			font-weight: 600;
-		}
-		.content {
-			image, img {
-				width: 100%;
-        display: block;
-			}
-		}
-	}
-	.evaluate-container {
-		background: #FFFFFF;
-		margin-top: 20rpx;
-		padding: 0 20rpx;
-		.title {
-			height: 88rpx;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			.left {
-				font-size: 32rpx;
-				text-align: center;
-				font-weight: 600;
-			}
-			.right {
-				display: flex;
-				align-items: center;
-				color: $sec-font;
-				text {
-					margin-left: 8rpx;
-					font-size: 24rpx;
-				}
-			}
-		}
-		.list {
-			.item {
-				padding-bottom: 30rpx;
-				.top {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					.user {
-						display: flex;
-						align-items: center;
-						image {
-							width: 80rpx;
-							height: 80rpx;
-							display: block;
-							border-radius: 50%;
-							margin-right: 20rpx;
-						}
-						.right {
-							.name {
-								max-width: 300rpx;
-								font-size: 28rpx;
-								color: #333333;
-								font-weight: 500;
-							}
-							.date {
-								font-size: 24rpx;
-								color: #999999;
-								margin-top: 12rpx;
-							}
-						}
-					}
-				}
-				.tags {
-					display: flex;
-					flex-wrap: wrap;
-					.it {
-						line-height: 44rpx;
-						padding: 0 15rpx;
-						border: 1px solid #eaeaea;
-						border-radius: 44rpx;
-						font-size: 24rpx;
-						margin-right: 14rpx;
-						margin-top: 14rpx;
-						color: #666666;
-					}
-				}
-				.content {
-					font-size: 28rpx;
-					color: #333333;
-					margin-top: 14rpx;
-				}
-				.images {
-					display: flex;
-					flex-wrap: wrap;
-					margin-top: 14rpx;
-					image {
-						width: 140rpx;
-						height: 140rpx;
-						margin-right: 20rpx;
-						margin-bottom: 20rpx;
-					}
-				}
-			}
-		}
-	}
-
-	.bottom-container {
-		width: 710rpx;
-		padding: 0 20rpx;
-		padding-bottom: env(safe-area-inset-bottom);
-		background: #FFFFFF;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		height: 100rpx;
-		border-top: 1px solid #eaeaea;
-		.left {
-			display: flex;
-			width: 280rpx;
-			.item {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				margin-right: 40rpx;
-				position: relative;
-				width: 66rpx;
-				&:last-child {
-					margin-right: 0;
-				}
-				.iconfont {
-					font-size: 48rpx;
-					&.active {
-						color: $minor-color;
-					}
-				}
-				text {
-					font-size: 20rpx;
-					color: #333333;
-					margin-top: 4rpx;
-          white-space: nowrap;
-				}
-				.dot {
-					position: absolute;
-					right: -4rpx;
-					top: -8rpx;
-					background: $minor-color;
-					width: 32rpx;
-					height: 32rpx;
-					line-height: 32rpx;
-					text-align: center;
-					border-radius: 32rpx;
-					font-size: 20rpx;
-					color: #FFFFFF;
-				}
-			}
-		}
-		.right {
-			display: flex;
-			.button {
-				width: 190rpx;
-				height: 80rpx;
-				line-height: 80rpx;
-				text-align: center;
-				border-radius: 80rpx;
-				font-size: 28rpx;
-				&.cart {
-					color: $theme-color;
-					background: #E6F0FF;
-				}
-				&.buy {
-					color: #ffffff;
-					background: $theme-color;
-					margin-left: 10rpx;
-				}
-				&.sec {
-					color: #ffffff;
-					background: $minor-color;
-					margin-left: 10rpx;
-				}
-			}
-		}
-	}
-	.cart-container {
-		padding: 60rpx 20rpx 30rpx;
-		.main {
-			display: flex;
-			padding: 20rpx 0;
-			border-bottom: 1px solid #eaeaea;
-			image {
-				width: 200rpx;
-				height: 200rpx;
-				display: block;
-				flex-shrink: 0;
-			}
-			.right {
-				margin-left: 26rpx;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-				.title {
-					font-size: 28rpx;
-          font-weight: 500;
-					line-height: 36rpx;
-				}
-				.price {
-					display: flex;
-					align-items: center;
-					.price-con {
-						display: flex;
-						flex-direction: column;
-						.price-1 {
-							color: $minor-color;
-							font-weight: 500;
-							font-size: 32rpx;
-							text {
-								font-size: 24rpx;
-							}
-						}
-						.price-2 {
-							font-size: 26rpx;
-							color: #666666;
-							line-height: 30rpx;
-							text-decoration: line-through;
-						}
-					}
-					.box {
-						background: $minor-color;
-						border-radius: 8rpx;
-						padding: 8rpx 12rpx;
-						color: #ffffff;
-						font-size: 26rpx;
-						margin-left: 20rpx;
-					}
-				}
-
-				.stock {
-					font-size: 24rpx;
-					color: #999999;
-				}
-			}
-		}
-		.attr {
-			padding: 20rpx 0;
-			border-bottom: 1px solid #eaeaea;
-			.title {
-				font-size: 28rpx;
-				color: #333333;
-			}
-			.list {
-				display: flex;
-				flex-wrap: wrap;
-				.item {
-					margin-top: 16rpx;
-					padding: 10rpx 16rpx;
-					font-size: 24rpx;
-					color: #666666;
-					background: #f5f5f5;
-					border-radius: 5rpx;
-					margin-right: 16rpx;
-					&.current {
-						color: $theme-color;
-						background: #E6F0FF;
-					}
-				}
-			}
-		}
-		.num {
-			padding: 20rpx 0;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			.title {
-				font-size: 28rpx;
-				color: #333333;
-			}
-			::v-deep .u-number-box {
-				.u-number-box__minus, .u-number-box__plus {
-					width: 26px;
-				}
-			}
-		}
-    .tradein {
-      border-top: 1px solid #eaeaea;
-      padding: 30rpx 0 0;
+  .list {
+    .item {
+      padding-bottom: 30rpx;
       .top {
         display: flex;
-        .name {
-          font-size: 28rpx;
-          flex-shrink: 0;
+        justify-content: space-between;
+        align-items: center;
+        .user {
+          display: flex;
+          align-items: center;
+          image {
+            width: 80rpx;
+            height: 80rpx;
+            display: block;
+            border-radius: 50%;
+            margin-right: 20rpx;
+          }
+          .right {
+            .name {
+              max-width: 300rpx;
+              font-size: 28rpx;
+              color: #333333;
+              font-weight: 500;
+            }
+            .date {
+              font-size: 24rpx;
+              color: #999999;
+              margin-top: 12rpx;
+            }
+          }
         }
-        .text {
+      }
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+        .it {
+          line-height: 44rpx;
+          padding: 0 15rpx;
+          border: 1px solid #eaeaea;
+          border-radius: 44rpx;
           font-size: 24rpx;
-          line-height: 32rpx;
+          margin-right: 14rpx;
+          margin-top: 14rpx;
+          color: #666666;
         }
       }
-      .tag {
-        display: inline-block;
-      	margin-top: 16rpx;
-      	padding: 12rpx 24rpx;
-      	font-size: 24rpx;
-      	color: #666666;
-      	background: #f5f5f5;
-      	border-radius: 50rpx;
-      	margin-right: 16rpx;
-      	&.active {
-      		color: $assist-color;
-      		background: rgba($color: $assist-color, $alpha: .2);
-      	}
+      .content {
+        font-size: 28rpx;
+        color: #333333;
+        margin-top: 14rpx;
       }
-      .agreement {
-        height: 80rpx;
-        padding-top: 20rpx;
+      .images {
         display: flex;
-        align-items: flex-end;
-        .content {
+        flex-wrap: wrap;
+        margin-top: 14rpx;
+        image {
+          width: 140rpx;
+          height: 140rpx;
+          margin-right: 20rpx;
+          margin-bottom: 20rpx;
+        }
+      }
+    }
+  }
+}
+
+.bottom-container {
+  width: 710rpx;
+  padding: 0 20rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+  background: #ffffff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100rpx;
+  border-top: 1px solid #eaeaea;
+  .left {
+    display: flex;
+    width: 280rpx;
+    .item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-right: 40rpx;
+      position: relative;
+      width: 66rpx;
+      &:last-child {
+        margin-right: 0;
+      }
+      .iconfont {
+        font-size: 48rpx;
+        &.active {
+          color: $minor-color;
+        }
+      }
+      text {
+        font-size: 20rpx;
+        color: #333333;
+        margin-top: 4rpx;
+        white-space: nowrap;
+      }
+      .dot {
+        position: absolute;
+        right: -4rpx;
+        top: -8rpx;
+        background: $minor-color;
+        width: 32rpx;
+        height: 32rpx;
+        line-height: 32rpx;
+        text-align: center;
+        border-radius: 32rpx;
+        font-size: 20rpx;
+        color: #ffffff;
+      }
+    }
+  }
+  .right {
+    display: flex;
+    .button {
+      width: 190rpx;
+      height: 80rpx;
+      line-height: 80rpx;
+      text-align: center;
+      border-radius: 80rpx;
+      font-size: 28rpx;
+      &.cart {
+        color: $theme-color;
+        background: #e6f0ff;
+      }
+      &.buy {
+        color: #ffffff;
+        background: $theme-color;
+        margin-left: 10rpx;
+      }
+      &.sec {
+        color: #ffffff;
+        background: $minor-color;
+        margin-left: 10rpx;
+      }
+    }
+  }
+}
+.cart-container {
+  padding: 60rpx 20rpx 30rpx;
+  .main {
+    display: flex;
+    padding: 20rpx 0;
+    border-bottom: 1px solid #eaeaea;
+    image {
+      width: 200rpx;
+      height: 200rpx;
+      display: block;
+      flex-shrink: 0;
+    }
+    .right {
+      margin-left: 26rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .title {
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 36rpx;
+      }
+      .price {
+        display: flex;
+        align-items: center;
+        .price-con {
           display: flex;
-          align-items: center;
-          .iconfont {
-            font-size: 36rpx;
-            &.icon-danxuan {
-              color: $sec-font;
-            }
-            &.icon-danxuan2 {
-              color: $theme-color;
-            }
-          }
-          .text {
-            margin-left: 8rpx;
-            font-size: 24rpx;
+          flex-direction: column;
+          .price-1 {
+            color: $minor-color;
+            font-weight: 500;
+            font-size: 32rpx;
             text {
-              color: $theme-color;
+              font-size: 24rpx;
             }
           }
+          .price-2 {
+            font-size: 26rpx;
+            color: #666666;
+            line-height: 30rpx;
+            text-decoration: line-through;
+          }
+        }
+        .box {
+          background: $minor-color;
+          border-radius: 8rpx;
+          padding: 8rpx 12rpx;
+          color: #ffffff;
+          font-size: 26rpx;
+          margin-left: 20rpx;
         }
       }
+
+      .stock {
+        font-size: 24rpx;
+        color: #999999;
+      }
     }
-		.button {
-			text-align: center;
-			line-height: 74rpx;
-			border-radius: 74rpx;
-			font-size: 28rpx;
-			margin-top: 20rpx;
-			&.cart {
-				color: #ffffff;
-				background: $theme-color;
-			}
-			&.buy {
-				color: #ffffff;
-				background: $theme-color;
-			}
-			&.sec {
-				color: #ffffff;
-				background: $minor-color;
-			}
-		}
-	}
-
-	.sharelist-container {
-		padding: 30rpx 0;
-		display: flex;
-		button {
-			background: none;
-			border-radius:0;
-			&::after {
-				border: none;
-			}
-		}
-		.item {
-			display: flex;
-			width: 50%;
-			flex-direction: column;
-			align-items: center;
-			image {
-				width: 100rpx;
-				height: 100rpx;
-				display: block;
-				margin-bottom: 20rpx;
-			}
-			text {
-				font-size: 28rpx;
-				line-height: 32rpx;
-				color: #333333;
-			}
-		}
-	}
-	.canvas-container {
-		position: fixed;
-		left: 50%;
-		top: 50%;
-		z-index: 999;
-		margin-left: -150px;
-		margin-top: -280px;
-		.button {
-			display: flex;
-			justify-content: center;
-			text {
-				display: block;
-				width: 280rpx;
-				height: 70rpx;
-				border-radius: 70rpx;
-				background: $theme-color;
-				font-size: 28rpx;
-				color: #FFFFFF;
-				text-align: center;
-				line-height: 70rpx;
-				margin-top: 20rpx;
-			}
-		}
-	}
-
-  .shareGuideDialog {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background: rgba($color: #000000, $alpha: .4);
-    display: flex;
-    justify-content: flex-end;
-    .content {
-      .icon {
-        text-align: right;
-        margin-right: 50rpx;
-        margin-top: 20rpx;
-        text {
-          font-size: 52rpx;
-          color: #ffffff;
+  }
+  .attr {
+    padding: 20rpx 0;
+    border-bottom: 1px solid #eaeaea;
+    .title {
+      font-size: 28rpx;
+      color: #333333;
+    }
+    .list {
+      display: flex;
+      flex-wrap: wrap;
+      .item {
+        margin-top: 16rpx;
+        padding: 10rpx 16rpx;
+        font-size: 24rpx;
+        color: #666666;
+        background: #f5f5f5;
+        border-radius: 5rpx;
+        margin-right: 16rpx;
+        &.current {
+          color: $theme-color;
+          background: #e6f0ff;
         }
       }
+    }
+  }
+  .num {
+    padding: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title {
+      font-size: 28rpx;
+      color: #333333;
+    }
+    ::v-deep .u-number-box {
+      .u-number-box__minus,
+      .u-number-box__plus {
+        width: 26px;
+      }
+    }
+  }
+  .tradein {
+    border-top: 1px solid #eaeaea;
+    padding: 30rpx 0 0;
+    .top {
+      display: flex;
+      .name {
+        font-size: 28rpx;
+        flex-shrink: 0;
+      }
       .text {
-        view {
-          font-size: 28rpx;
-          color: #ffffff;
-          margin-top: 12rpx;
-          text-align: center;
+        font-size: 24rpx;
+        line-height: 32rpx;
+      }
+    }
+    .tag {
+      display: inline-block;
+      margin-top: 16rpx;
+      padding: 12rpx 24rpx;
+      font-size: 24rpx;
+      color: #666666;
+      background: #f5f5f5;
+      border-radius: 50rpx;
+      margin-right: 16rpx;
+      &.active {
+        color: $assist-color;
+        background: rgba($color: $assist-color, $alpha: 0.2);
+      }
+    }
+    .agreement {
+      height: 80rpx;
+      padding-top: 20rpx;
+      display: flex;
+      align-items: flex-end;
+      .content {
+        display: flex;
+        align-items: center;
+        .iconfont {
+          font-size: 36rpx;
+          &.icon-danxuan {
+            color: $sec-font;
+          }
+          &.icon-danxuan2 {
+            color: $theme-color;
+          }
+        }
+        .text {
+          margin-left: 8rpx;
+          font-size: 24rpx;
+          text {
+            color: $theme-color;
+          }
         }
       }
     }
   }
+  .button {
+    text-align: center;
+    line-height: 74rpx;
+    border-radius: 74rpx;
+    font-size: 28rpx;
+    margin-top: 20rpx;
+    &.cart {
+      color: #ffffff;
+      background: $theme-color;
+    }
+    &.buy {
+      color: #ffffff;
+      background: $theme-color;
+    }
+    &.sec {
+      color: #ffffff;
+      background: $minor-color;
+    }
+  }
+}
+
+.sharelist-container {
+  padding: 30rpx 0;
+  display: flex;
+  button {
+    background: none;
+    border-radius: 0;
+    &::after {
+      border: none;
+    }
+  }
+  .item {
+    display: flex;
+    width: 50%;
+    flex-direction: column;
+    align-items: center;
+    image {
+      width: 100rpx;
+      height: 100rpx;
+      display: block;
+      margin-bottom: 20rpx;
+    }
+    text {
+      font-size: 28rpx;
+      line-height: 32rpx;
+      color: #333333;
+    }
+  }
+}
+.canvas-container {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  z-index: 999;
+  margin-left: -150px;
+  margin-top: -280px;
+  .button {
+    display: flex;
+    justify-content: center;
+    text {
+      display: block;
+      width: 280rpx;
+      height: 70rpx;
+      border-radius: 70rpx;
+      background: $theme-color;
+      font-size: 28rpx;
+      color: #ffffff;
+      text-align: center;
+      line-height: 70rpx;
+      margin-top: 20rpx;
+    }
+  }
+}
+
+.shareGuideDialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba($color: #000000, $alpha: 0.4);
+  display: flex;
+  justify-content: flex-end;
+  .content {
+    .icon {
+      text-align: right;
+      margin-right: 50rpx;
+      margin-top: 20rpx;
+      text {
+        font-size: 52rpx;
+        color: #ffffff;
+      }
+    }
+    .text {
+      view {
+        font-size: 28rpx;
+        color: #ffffff;
+        margin-top: 12rpx;
+        text-align: center;
+      }
+    }
+  }
+}
 </style>