feat:0元购列表修改

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@better-scroll/core": "^2.0.0-beta.6",
-    "@qg/cherry-ui": "^2.23.5",
+    "@qg/cherry-ui": "^2.23.6",
     "@qg/js-bridge": "^1.1.9",
     "@qg/qg-scroll": "^1.4.2",
     "@qg/ui-request": "^0.0.20",

src/views/goodsDetail/components/bottomNav.vue

+<template>
+  <div class="goods-bottom">
+    <cr-button shape="circle" :disabled="disabled" type="primary" block @click="buy">
+      {{ shopBtnName }}
+    </cr-button>
+    <cr-button shape="circle" :disabled="disabled" type="primary" block @click="buy">
+      {{ shopBtnName }}
+    </cr-button>
+  </div>
+</template>
+<script>
+export default {
+  name: 'BottomNav',
+  props: {
+    type: {
+      type: String,
+      default: 'shopCar' // shoppingCar 购物车；settlement 结算;submitOrder 确认订单
+    },
+    shopBtnName: {
+      type: String,
+      default: '立即购买' // shoppingCar 购物车；settlement 结算;submitOrder 确认订单
+    },
+    info: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    goodsId: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    buy() {
+      this.$emit('buy');
+    },
+    goHome() {
+      setTimeout(() => {
+        this.$router.push({ name: 'home' });
+      }, 500);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.goods-bottom {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  width: 100%;
+  background: @white;
+  border-top: 2px solid #f7f7f7;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  button {
+    margin: 0 10px;
+  }
+}
+</style>

src/views/goodsDetail/components/goodsCell.vue

@@ -41,6 +41,7 @@ export default {
   background: #fff;
   &-left {
     display: flex;
+    align-items: center;
     .text-13();
     &-title {
       color: @gray-4;

src/views/goodsDetail/index.less

@@ -40,6 +40,9 @@
 
 .goods {
   padding-bottom: 60px;
+  &-detail-imgs {
+    padding-bottom: 40px;
+  }
   &-container {
       height: calc(100% - 60px);
       font-size: 16px;
@@ -440,64 +443,6 @@
         margin-right: 0;
      }
   }
-  &-list{
-    padding: 0 @padding-sm - 2 60px;
-  }
-  &-buoy {
-    position: fixed;
-    right: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    background: #fff;
-    border-radius: 25px;
-    border: 1px solid #EBEBEB;
-    // box-shadow: rgba(0, 0, 0, 0.4);
-  }
-  &-share {
-    bottom: 122.5px;
-    // position: absolute;
-    img {
-        width: 45px;
-        height: 45px;
-        position: absolute;
-        &::after {
-            border: none;
-        }
-    }
-    button {
-        border: none;
-        background: transparent;
-        display: flex;
-        justify-content: center;
-        // position: relative;
-        &::after {
-            border: none;
-        }
-        
-    }
-  }
-  &-like {
-    bottom: 175px;
-    img {
-        width: 45px;
-        height: 45px;
-        position: absolute;
-        &::after {
-            border: none;
-        }
-    }
-  }
-  &-top{
-    position: fixed;
-    bottom: 69px;
-    right: 10px;
-    width: 45px ;
-    height: 45px;
-    margin-bottom: 0
-  }
 }
 
 

src/views/goodsDetail/index.vue

 <template>
   <div class="goods" style="height: 100%">
     <!-- 主体 -->
-    <div v-if="!isLose" class="goods-container">
+    <div class="goods-container">
       <!-- 轮播图 -->
       <div class="goods-carousel">
         <cr-swipe class="goods-swiper" @change="onChange">
@@ -71,13 +71,6 @@
         />
       </div>
     </div>
-    <!-- 商品失效 -->
-    <div v-if="isLose" class="goods-container goods-container-lose">
-      <div class="goods-container-lose-container">
-        <img class="noImg" mode="widthFix" src="https://img.lkbang.net/xcx/lose.png" />
-        <div>您查找的商品失效了!</div>
-      </div>
-    </div>
     <cr-popup v-model="show" class="popup-head" closeable position="bottom">
       <div class="popup-title">{{ currentPopupName }}</div>
       <div v-if="currentPopupType === 'sku'" class="goods-popup">
@@ -158,6 +151,12 @@
         </div>
       </div>
     </cr-popup>
+    <bottom-nav
+      type="shoppingCar"
+      :disabled="false"
+      :shop-btn-name="buttonName"
+      @buy="goVccOrDetail"
+    />
   </div>
 </template>
 <script>
@@ -165,12 +164,14 @@ import goods from '@/api/groupBuy';
 import goodsCell from './components/goodsCell';
 import detailInfoArea from './components/detailInfo.vue';
 import Img2Thumb from '@/filters/img2Thumb.filter';
+import bottomNav from './components/bottomNav';
 export default {
   // eslint-disable-next-line vue/name-property-casing
   name: 'goodDetail',
   components: {
     detailInfoArea,
-    goodsCell
+    goodsCell,
+    bottomNav
     // tipModal
   },
   filters: {
@@ -179,7 +180,6 @@ export default {
   data() {
     return {
       flag: false,
-      isLose: false, // 商品是否已经失效
       detailParam: {
         skuNo: '',
         receiverId: '',
@@ -224,9 +224,6 @@ export default {
       }
       return arr.slice(0, 5);
     },
-    title() {
-      return this.isLose ? '猜你喜欢' : '你可能还喜欢';
-    },
     minCount() {
       return this.detailInfo.stock ? 1 : 0;
     }
@@ -332,10 +329,6 @@ export default {
         return;
       }
       this.show = false;
-      if (this.isLose) {
-        this.$toast('商品已失效');
-        return;
-      }
       const order = {
         addrReceiverId: this.selectedAddress.addrReceiverId || '',
         selectedSkuList: [

yarn.lock

@@ -918,10 +918,10 @@
   "resolved" "http://npmprivate.quantgroups.com/@popperjs%2fcore/-/core-2.9.1.tgz"
   "version" "2.9.1"
 
-"@qg/cherry-ui@^2.23.5":
-  "integrity" "sha512-l4KZO48v8PrNd3apieiZArPddi5rrOXsGSgFpW9eecnQnVGebeAadNq7qCrdmi/d90oZLoLZHiy/HAgrm0YuMQ=="
-  "resolved" "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.23.5.tgz"
-  "version" "2.23.5"
+"@qg/cherry-ui@^2.23.6":
+  "integrity" "sha512-jKv/DMHaaQyba/yR3LUdY1lVhkLjcv9hb5o5ri/jb3Xhi7mglhdAeCEFmYyyKu1QXLbGZQdGKuYsfz5o87SJcQ=="
+  "resolved" "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.23.6.tgz"
+  "version" "2.23.6"
   dependencies:
     "@popperjs/core" "^2.5.4"
     "vue-lazyload" "^1.3.3"