图片替换

zhiyangdu
1 parent bf545917
Showing 11 changed files with 131 additions and 96 deletions
src/components/goodsItem_7/goodsItem_7.less
src/components/goodsItem_7/goodsItem_7.vue
src/pages/pointsMall/pointsMall.less
src/pages/pointsMall/pointsMall.vue
static/img/pointsBack.png
static/img/points_icon_grey_right.png
static/img/points_icon_pice.png
static/img/points_icon_white_right.png
static/img/points_item01.png
static/img/points_item02.png
static/img/points_item03.png
@@ -28,12 +28,13 @@
       // 积分商城需要商品是否有货显示补货中
       .goods_active{
         width: 100%;
-        height: 58px;
-        line-height: 58px;
-        background: #000000;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
         color: #fff;
         font-size: 30px;
-        opacity: 0.39;
         text-align: center;
         position: absolute;
         left: 0;
@@ -5,7 +5,7 @@
 				<img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
         <!-- 补货中按钮 -->
         <div v-show="item.time_state == 2 && item.stock == 0" class="goods_active">
-          补货中
+          已售罄
         </div>
 			</div>
 			<div class="content-box">
 @charset "UTF-8";
 .main_box{
-  background: #fff;
-}
+  width: 100%;
+  // min-height: 1840px;
+  background:#fff url("../../../static/img/pointsBack.png") no-repeat
+  center top;
+  background-size: 100%;
+  overflow: hidden;
   // 头部
   .top_main{
     margin:40px 30px;
@@ -150,4 +154,5 @@
         font-weight: 400;
         border-radius: 6px;
     }
-}
 \ No newline at end of file
+  }
+}  
 \ No newline at end of file
 <template>
 <div>
-  <div class="main_box">
-      <div class="top_main">
-        <!-- 头部 -->
-        <div class="top">
-          <div class="left">
-            我的积分: <span>2800</span>
-          </div>
-          <div class="right">
-            兑换记录
-            <!-- 返回图标 -->
-            <img class="back_right_iocn" src="static/img/back_right.png" alt=""/> 
-          </div>
-        </div>
-        <!-- 商品类型 -->
-        <div class="item_box">
-          <div class="item">
-            <img src="static/img/1.png" alt=""/>
-            <div class="text">实物商品</div>
-          </div>
-          <div class="item">
-            <img src="static/img/1.png" alt=""/>
-            <div class="text">虚拟商品</div>
-          </div>
-          <div class="item">
-            <img src="static/img/1.png" alt=""/>
-            <div class="text">满减红包</div>
-          </div>
-        </div>
-        <!--积分赚取  -->
-        <div class="earn_points_box">
-          <img class="earn_icon" src="static/img/1.png" alt="">
-          <div class="desc">赚取更多积分，兑换精美礼品～</div>
-          <div class="btn">赚取积分  <img class="earn_right_back" src="static/img/back_right.png" alt=""/></div>
-        </div>
-      </div>
-      <!-- 为你推荐 -->
-      <div class="tab_item_box">
-        <div class="item active">为你推荐</div>
-        <!-- 分割线 -->
-        <div class="line"> </div>
-        <div class="item">热门商品</div>
-      </div>
-      <!-- 为你推荐商品列表 -->
-      <div class="list-box">
-          <!-- 商品展示样式 2 -->
-          <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDiscountList(item)"
-              :item="item"
-              pid="4">
-          </goods-item-2>
-      </div>
+         <!-- H5唤起App组件 -->
+        <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value"
+            :callApps="$parent.callApps">
+        </call-app-box>
  
+        <!-- 后退导航 -->
+        <back-box class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" ref="backBox" v-if="isCNLive.value && $route.query.showBack == true" @back="back"
+            :backs="backs">
+        </back-box>
  
-      <!-- 实物商品 -->
-      <div class="tab_item_box">
-        <div class="item active">实物商品</div>
-        <!-- 分割线 -->
-        <div class="line"> </div>
-        <div class="item">实物商品实物商品实物商品实物商品</div>
-      </div>
-      <!-- 实物商品裂变 -->
-       <!-- 商品样式 7 列表 -->
-      <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" @primary="primary"
-          :lists="phyicalGoods"
-          com="7">
-      </column-list-box>
+        <!-- pl -->
+        <div class="pl" :class="{'is-cnlive': isCNLive.value && $route.query.showBack == true, 'is-open-app': $parent.isOpenApp.value}"></div>
+        <div class="main_box">
+            <div class="top_main">
+              <!-- 头部 -->
+              <div class="top">
+                <div class="left">
+                  我的积分: <span>2800</span>
+                </div>
+                <div class="right">
+                  兑换记录
+                  <!-- 返回图标 -->
+                  <img class="back_right_iocn" src="static/img/points_icon_grey_right.png" alt=""/> 
+                </div>
+              </div>
+              <!-- 商品类型 -->
+              <div class="item_box">
+                <div class="item">
+                  <img src="static/img/1.png" alt=""/>
+                  <div class="text">实物商品</div>
+                </div>
+                <div class="item">
+                  <img src="static/img/1.png" alt=""/>
+                  <div class="text">虚拟商品</div>
+                </div>
+                <div class="item">
+                  <img src="static/img/1.png" alt=""/>
+                  <div class="text">满减红包</div>
+                </div>
+              </div>
+              <!--积分赚取  -->
+              <div class="earn_points_box">
+                <img class="earn_icon" src="static/img/points_icon_pice.png" alt="">
+                <div class="desc">赚取更多积分，兑换精美礼品～</div>
+                <div class="btn">赚取积分  <img class="earn_right_back" src="static/img/points_icon_white_right.png" alt=""/></div>
+              </div>
+            </div>
+            <!-- 为你推荐 -->
+            <div class="tab_item_box">
+              <div class="item active">为你推荐</div>
+              <!-- 分割线 -->
+              <div class="line"> </div>
+              <div class="item">热门商品</div>
+            </div>
+            <!-- 为你推荐商品列表 -->
+            <div class="list-box">
+                <!-- 商品展示样式 2 -->
+                <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDiscountList(item)"
+                    :item="item"
+                    pid="4">
+                </goods-item-2>
+            </div>
  
  
-      <!-- 虚拟商品 -->
-      <div class="tab_item_box">
-        <div class="item active">虚拟商品</div>
-        <!-- 分割线 -->
-        <div class="line"> </div>
-        <div class="item">热门商品</div>
-      </div>
-       <!-- 商品样式 7 列表 -->
-      <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail" @primary="primary"
-          :lists="virtualGoods"
-          com="7">
-      </column-list-box>
+            <!-- 实物商品 -->
+            <div class="tab_item_box">
+              <div class="item active">实物商品</div>
+              <!-- 分割线 -->
+              <div class="line"> </div>
+              <div class="item">实物商品实物商品实物商品实物商品</div>
+            </div>
+            <!-- 实物商品裂变 -->
+            <!-- 商品样式 7 列表 -->
+            <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" 
+                :lists="phyicalGoods"
+                com="7">
+            </column-list-box>
  
  
-      <!-- 满减红包 -->
-      <div class="tab_item_box">
-        <div class="item active">满减红包</div>
-        <!-- 分割线 -->
-        <div class="line"> </div>
-        <div class="item">热门商品</div>
-      </div>
-       <!-- 商品样式 7 列表 -->
-      <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail" @primary="primary"
-          :lists="redEnvelopeFull"
-          com="7">
-      </column-list-box>
-  </div>
+            <!-- 虚拟商品 -->
+            <div class="tab_item_box">
+              <div class="item active">虚拟商品</div>
+              <!-- 分割线 -->
+              <div class="line"> </div>
+              <div class="item">热门商品</div>
+            </div>
+            <!-- 商品样式 7 列表 -->
+            <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
+                :lists="virtualGoods"
+                com="7">
+            </column-list-box>
+
+
+            <!-- 满减红包 -->
+            <div class="tab_item_box">
+              <div class="item active">满减红包</div>
+              <!-- 分割线 -->
+              <div class="line"> </div>
+              <div class="item">热门商品</div>
+            </div>
+            <!-- 商品样式 7 列表 -->
+            <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail" 
+                :lists="redEnvelopeFull"
+                com="7">
+            </column-list-box>
+        </div>
 </div>
 </template>
  
@@ -125,6 +137,23 @@ export default {
   },
   //方法表示一个具体的操作，主要书写业务逻辑；
   methods: {
+    /**
+            * 跳转商品详情
+            * @param {Object} item [数据对象]
+            */
+    toDetail (item) {
+
+      // 判断通用跳转函数是否存在
+      if (typeof this.$parent.gotoDetail === 'function') {
+
+
+        console.log('toDetail', item);
+
+
+        // 通用跳转
+        this.$parent.gotoDetail(item);
+      }
+    },
   },
   //请求数据
   created () {