商品详情页样式优化

zhiyangdu
1 parent fec7152e
Showing 3 changed files with 25 additions and 11 deletions
src/pages/goodDetails/goodDetails.vue
src/pages/healthGoodDetails/healthGoodDetails.less
src/pages/healthGoodDetails/healthGoodDetails.vue
@@ -117,7 +117,7 @@
           </div>
           <!-- 积分不足页脚显示 -->
           <div v-if="goodsInfo.grade<goodsInfo.num" class="footer">
-            <div class="desc">还差1000积分</div>
+            <div class="desc">还差{{goodsInfo.num-goodsInfo.grade}}积分</div>
             <div class="btn" @click="jumpClientIntegralList">
                 获取积分
             </div>
@@ -163,5 +163,9 @@
       font-weight: 500;
       color: #FFFFFF;
     }
+    .grey{
+      background: #E6E6E6;
+      color: #888888;
+    }
   }
 }
 \ No newline at end of file
@@ -97,16 +97,25 @@
             </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">还差{{goodsInfo.num-goodsInfo.grade}}积分</div>
+            <div class="btn" @click="jumpClientIntegralList">
+                获取积分
+            </div>
           </div>
-        </div> -->
-         <!-- 积分不足页脚显示 -->
-        <div class="footer">
-          <div class="desc">还差1000积分</div>
-          <div class="btn" @click="jumpClientIntegralList">
-              获取积分
+        </div>
+        <!-- 有积分商品售罄 -->
+        <div v-else-if="goodsInfo && goodsInfo.stock == 0" class="footer">
+          <div class="btn grey" @click="exchange">
+            补货中
           </div>
         </div>
         <!-- 地址信息组件 -->
@@ -400,7 +409,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"
         });