商品详情页优化

zhiyangdu
1 parent c7d67532
Showing 2 changed files with 31 additions and 12 deletions
src/pages/goodDetails/goodDetails.less
src/pages/goodDetails/goodDetails.vue
@@ -179,6 +179,10 @@
       font-weight: 500;
       color: #FFFFFF;
     }
+    .grey{
+      background: #E6E6E6;
+      color: #888888;
+    }
   }
   /*底部弹窗**/
   .popup_box{
@@ -58,7 +58,12 @@
               <div class="good-title">
                 <span class="left"></span>商品详情<span class="right"></span>
               </div>
-              <div v-if="goodsInfo && goodsInfo.content" v-html="goodsInfo.content" class="good-desc html_box">
+              <!-- 虚拟商品展示 -->
+              <div v-if="goodsInfo && goodsInfo.content &&  goodsInfo.shop_type !=1" v-html="goodsInfo.content" class="good-desc html_box">
+              </div>
+              <!-- 实物商品展示 -->
+              <div v-else-if="goodsInfo && goodsInfo.content && goodsInfo.content.length &&  goodsInfo.shop_type ==1" class="good-desc html_box">
+                <img v-for="(item,index) in goodsInfo.content" :key=" 't' + index" :src="item" alt="商品图片"/>
               </div>
               <div class="good-title">
                 <span class="left"></span>兑换规则<span class="right"></span>
@@ -66,7 +71,7 @@
               <div class="good-desc">
                 <div v-if="goodsInfo && goodsInfo.shop_type && (goodsInfo.shop_type == 1 || goodsInfo.shop_type == 2)">
                     <div class="text-left">
-                      <span class="blue" v-shwo="goodsInfo.shop_type == 1">本商品已为您选择积分+现金的最优兑换方案</span><br>
+                      <span class="blue" v-show="goodsInfo && goodsInfo.shop_type == 1">本商品已为您选择积分+现金的最优兑换方案</span><br>
                       仅限此商品使用，兑换后7天内有效；
                     </div>
                     <div class="text-left">
@@ -103,18 +108,27 @@
             </div>
         </div>
         <!-- 有积分页脚显示 -->
-        <div class="footer">
-          <div class="btn" @click="exchange">
-            立即兑换
+        <div v-if="goodsInfo && goodsInfo.stock != 0">
+          <!-- 积分充足 -->
+          <div v-if="goodsInfo.grade>goodsInfo.num || goodsInfo.grade == goodsInfo.num" class="footer">
+            <div class="btn" @click="exchange">
+              立即兑换
+            </div>
+          </div>
+          <!-- 积分不足页脚显示 -->
+          <div v-if="goodsInfo.grade<goodsInfo.num" class="footer">
+            <div class="desc">还差1000积分</div>
+            <div class="btn" @click="jumpClientIntegralList">
+                获取积分
+            </div>
           </div>
         </div>
-         <!-- 积分不足页脚显示 -->
-        <!-- <div class="footer">
-          <div class="desc">还差1000积分</div>
-          <div class="btn" @click="jumpClientIntegralList">
-              获取积分
+        <!-- 有积分商品售罄 -->
+        <div v-else-if="goodsInfo && goodsInfo.stock == 0" class="footer">
+          <div class="btn grey" @click="exchange">
+            补货中
           </div>
-        </div> -->
+        </div>
         <!-- 地址信息组件 -->
         <!-- <app-address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></app-address-toast> -->
         <!-- 底部弹出层 -->
@@ -454,7 +468,8 @@ export default {
       Indicator.open("加载中...");
       // 获取证书请求接口
       this.http("/Api/" + this.getApiVersion().LuckDraw + "/integralGoodsInfo", {
-        id: goodsId // 商品ID
+        id: goodsId, // 商品ID
+        uid: this.getStore("uid") // 用户ID
       }, this.getGoodsInfoCallback, {
           method: "POST"
         });