积分商城优化

zhiyangdu
1 parent a6206620
Showing 6 changed files with 32 additions and 12 deletions
src/components/columnListBox/columnListBox.vue
src/components/goodsItem_7/goodsItem_7.less
src/components/goodsItem_7/goodsItem_7.vue
src/pages/healthMall/healthMall.less
src/pages/healthMall/healthMall.vue
src/pages/pointsMall/pointsMall.vue
@@ -13,6 +13,7 @@
 					<goods-item-7 v-if="com == '7'" @jump="jump" @primary="primary"
 						:item="item"
 						:goodType="goodType"
+            :company="company"
 					>
 					</goods-item-7>
 				</div>
@@ -28,6 +29,7 @@
 					<goods-item-7 v-if="com == '7'" @jump="jump" @primary="primary"
 						:item="item"
 						:goodType="goodType"
+            :company="company"
 					>
 					</goods-item-7>
 				</div>
@@ -47,7 +49,7 @@
 			};
 		},
-		props: ["lists", "com", "goodType"],
+		props: ["lists", "com", "goodType", "company"],
 		components: {
 			goodsItem7
         },
@@ -30,7 +30,7 @@
                 width: 100%;
                 height: 58px;
                 // border-radius: 26px;
-                background: rgba(0, 0, 0, 0.5);
+                background: rgba(0, 0, 0, 0.4);
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -3,9 +3,9 @@
 		<div class="item" :class="'g-' + goodType">
 			<div class="img-box">
 				<img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
-                
+        
                 <!-- 补货中按钮 -->
-                <div v-if="item.stock && item.stock == 0" class="goods_active">
+                <div v-if="item && item.stock && item.stock == 0" class="goods_active">
                     已兑完，补货中
                 </div>
@@ -24,8 +24,8 @@
         {{item.num}}<span>积分 + {{item.price}}元</span> 
         </div>
           <!-- 积分 -->
-        <div v-else class="grade-box">
-            {{item.num}}<span>积分</span>   
+        <div v-else-if="company == 1 || company == 2" class="grade-box">
+            {{item.num}}<span v-if="company==1">积分</span><span v-else>健康值</span>   
 				</div>                
           <!-- 价格 -->
 				<div v-else class="price-box">
@@ -50,7 +50,7 @@ export default {
         }
     },
-    props: ["item","goodType"],
+    props: ["item","goodType", "company"],
     computed: {
         /**
@@ -166,6 +166,19 @@
       background: #999999;
       margin: 0 16px;
     }
+    .more{
+      display: flex;
+      flex: 1;
+      justify-content: flex-end;
+      align-items: center;
+      font-size: 24px;
+      color: #999999;
+      img{
+        display: block;
+        width: 22px;
+        height: 22px;
+      }
+    }
   }
   // 为你推荐
   .list-box {
@@ -70,11 +70,13 @@
                 <!-- 分割线 -->
                 <div class="line"> </div>
                 <div class="item">热门商品 精品推荐</div>
+                <div @click="toMore(1)" class="more">更多<img src="static/img/icon_more_arrow_right.png"alt=""/></div>
               </div>
               <!-- 实物商品裂变 -->
-              <!-- 商品样式 7 列表 goodType=1为健康商城实物商品-->
+              <!-- 商品样式 7 列表 goodType=1为健康商城实物商品 company=1单位为积分2为健康值-->
               <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" 
                   :lists="phyicalGoods"
+                  company="2"
                   com="7">
               </column-list-box>
             </div>
@@ -87,10 +89,12 @@
                   <!-- 分割线 -->
                   <div class="line"> </div>
                   <div class="item">虚拟商品 精品推荐</div>
+                  <div @click="toMore(2)" class="more">更多<img src="static/img/icon_more_arrow_right.png"alt=""/></div>
                 </div>
                 <!-- 商品样式 7 列表 -->
                 <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
                     :lists="virtualGoods"
+                     company="2"
                     com="7">
                 </column-list-box>
             </div>
@@ -102,10 +106,12 @@
                   <!-- 分割线 -->
                   <div class="line"> </div>
                   <div class="item">满减红包 精品推荐</div>
+                  <div @click="toMore(3)" class="more">更多<img src="static/img/icon_more_arrow_right.png"alt=""/></div>
                 </div>
                 <!-- 商品样式 7 列表 -->
                 <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail" 
                     :lists="redEnvelopeFull"
+                     company="2"
                     com="7">
                 </column-list-box>
             </div>
@@ -52,7 +52,6 @@
               <!-- 分割线 -->
               <div class="line"> </div>
               <div class="item">满减红包 精品推荐</div>
-              <div @click="toMore(1)" class="more">更多<img src="static/img/icon_more_arrow_right.png"alt=""/></div>
             </div>
             <!-- 为你推荐商品列表 -->
             <div class="list-box">
@@ -77,7 +76,7 @@
               <!-- 商品样式 7 列表 goodType=1为积分商城实物商品-->
               <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" 
                   :lists="phyicalGoods"
-                  com="7" goodType="1">
+                  com="7" goodType="1" company="1">
               </column-list-box>
             </div>
@@ -94,7 +93,7 @@
                 <!-- 商品样式 7 列表 -->
                 <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
                     :lists="virtualGoods"
-                    com="7">
+                    com="7" company="1">
                 </column-list-box>
             </div>
@@ -110,7 +109,7 @@
                 <!-- 商品样式 7 列表 -->
                 <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail" 
                     :lists="redEnvelopeFull"
-                    com="7">
+                    com="7" company="1">
                 </column-list-box>
             </div>
         </div>