完善商品列表功能

components/goods/goodsku.vue

@@ -6,7 +6,7 @@
     v-model="value"
     :maskCloseAble="maskCloseAble"
     length="auto"
-    :safeAreaInsetBottom="safeAreaInsetBottom"
+    :safeAreaInsetBottom="true"
     @close="popupClose"
     :z-index="9999"
     close-icon="cross"
@@ -58,25 +58,25 @@
           @change="valChange"
         ></u-number-box>
       </view>
-    </view>
-    <view class="btn-box">
-      <view style="flex: 1;" v-if="optionType != 1">
-        <u-button
-          @click="joinCar"
-          :ripple="true"
-          :hair-line="false"
-          :custom-style="btn1"
-          >加入购物车</u-button
-        >
-      </view>
-      <view style="flex: 1;" v-if="optionType != 0">
-        <u-button
-          @click="buy"
-          :ripple="true"
-          :hair-line="false"
-          :custom-style="btn2"
-          >立即购买</u-button
-        >
+      <view class="btn-box">
+        <view style="flex: 1;" v-if="optionType != 1">
+          <u-button
+            @click="joinCar"
+            :ripple="true"
+            :hair-line="false"
+            :custom-style="btn1"
+            >加入购物车</u-button
+          >
+        </view>
+        <view style="flex: 1;" v-if="optionType != 0">
+          <u-button
+            @click="buy"
+            :ripple="true"
+            :hair-line="false"
+            :custom-style="btn2"
+            >立即购买</u-button
+          >
+        </view>
       </view>
     </view>
   </u-popup>
@@ -100,7 +100,7 @@ export default {
     },
     safeAreaInsetBottom: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     good: {
       type: Object,
@@ -160,7 +160,7 @@ export default {
       this.goodamount = this.skuObj.stock;
     } else {
       this.goodimage = this.g.cover_pic;
-      this.goodprice = this.g.price_min;
+      this.goodprice = this.g.price_min && this.g.price_min!="" ?this.g.price_min:this.g.price_content;
       this.goodamount = this.g.goods_stock;
     }
     this.bian = this.$utils.is_biang;
@@ -224,27 +224,29 @@ export default {
     },
     buy() {
       if (this.skuObj && this.skuObj.id) {
-        let goods=[]
-        let g={
-          id:this.skuObj.goods_id,
-          num:this.gc,
-          cart_id:0,
-          goods_attr_id:this.skuObj.id,
-          attr:[]
-        }
-        this.skuObj.attr_list.forEach(x=>{
+        let goods = [];
+        let g = {
+          id: this.skuObj.goods_id,
+          num: this.gc,
+          cart_id: 0,
+          goods_attr_id: this.skuObj.id,
+          attr: [],
+        };
+        this.skuObj.attr_list.forEach((x) => {
           g.attr.push({
-            attr_id: x.attr_id, 
-            attr_group_id: x.attr_group_id
-          })
-        })
-        goods.push(g)
-        console.log(goods)
+            attr_id: x.attr_id,
+            attr_group_id: x.attr_group_id,
+          });
+        });
+        goods.push(g);
+        console.log(goods);
         uni.navigateTo({
-           url: '/pages/order-submit/order-submit?goods='+encodeURIComponent(JSON.stringify(goods)),
-           complete(res){
-            console.log(res)
-          }
+          url:
+            "/pages/order-submit/order-submit?goods=" +
+            encodeURIComponent(JSON.stringify(goods)),
+          complete(res) {
+            console.log(res);
+          },
         });
       } else {
         uni.showToast({
@@ -289,7 +291,7 @@ export default {
         this.sku = unchosen;
         this.skuObj = null;
         this.goodimage = this.g.cover_pic;
-        this.goodprice = this.g.price_min;
+        this.goodprice = this.g.price_min && this.g.price_min!="" ?this.g.price_min:this.g.price_content;
         this.goodamount = this.g.goods_stock;
       } else {
         this.sku = chosen;
@@ -472,7 +474,7 @@ export default {
   width: 1px;
   flex: 1;
 }
-.btn-box {
+.goodsku .btn-box {
   display: flex;
   background: #fff;
   height: 60px;

components/goods/list.vue

@@ -16,22 +16,29 @@
               cx.price_content
             }}</view>
             <view class="sell">{{ cx.sales }}</view>
-            <view class="cart">
+            <view class="cart" @click.stop="showSkuHandler(cx)">
               <u-icon name="cart-o" size="40" :color="mainColor" />
             </view>
           </view>
         </view>
       </u-col>
     </u-row>
+    <good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
   </view>
 </template>
 
 <script>
+import goodSku from '../goods/goodsku'
 export default {
+  components:{
+    goodSku
+  },
   props: ["list"],
   data() {
     return {
       g: [],
+      showSku:false,
+      sku:{}
     };
   },
   mounted() {
@@ -52,6 +59,10 @@ export default {
         url: url,
       });
     },
+     showSkuHandler(g){
+      this.sku=g
+      this.showSku=true
+    }
   },
 };
 </script>

components/goods/style1.vue

@@ -48,7 +48,7 @@
           <span class="price" :style="{ color: mainColor }">{{
             goodsInfo.showGoodsPrice ? item.price_content : ""
           }}</span>
-          <span class="buy" v-if="goodsInfo.showBuyBtn">
+          <span class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
             <u-icon
               name="cart-o"
               size="40"
@@ -84,16 +84,23 @@
         </div>
       </div>
     </div>
+    <good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
   </div>
 </template>
 
 <script>
+import goodSku from '../goods/goodsku'
 export default {
+  components:{
+    goodSku
+  },
   props: ["goodList", "goodsInfo"],
   data() {
     return {
       mainColor: "",
       activeKey: 0,
+      showSku:false,
+      sku:{}
     };
   },
   created() {
@@ -105,6 +112,10 @@ export default {
          url: url
       });
     },
+    showSkuHandler(g){
+      this.sku=g
+      this.showSku=true
+    }
   },
 };
 </script>

components/goods/style2.vue

@@ -22,7 +22,11 @@
           }"
         >
           <view class="tips" v-if="goodsInfo.showGoodsTag">
-            <image :src="goodsInfo.goodsTagPicUrl" mode="widthFix"  style="width:100%"  />
+            <image
+              :src="goodsInfo.goodsTagPicUrl"
+              mode="widthFix"
+              style="width: 100%;"
+            />
           </view>
           <view class="img-box">
             <view class="img-show">
@@ -42,11 +46,11 @@
               {{ item.name }}
             </view>
             <view class="good-price-info">
-              <view class="price" :style="{'color':mainColor}">{{
+              <view class="price" :style="{ color: mainColor }">{{
                 goodsInfo.showGoodsPrice ? item.price_content : ""
               }}</view>
-              <view class="buy" v-if="goodsInfo.showBuyBtn">
-                 <u-icon
+              <view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
+                <u-icon
                   name="cart-o"
                   size="40"
                   :color="mainColor"
@@ -87,16 +91,29 @@
         </view>
       </u-col>
     </u-row>
+    <good-sku
+      v-if="showSku"
+      :option-type="2"
+      borderRadius="20"
+      v-model="showSku"
+      :good="sku"
+    ></good-sku>
   </view>
 </template>
 
 <script>
+import goodSku from "../goods/goodsku";
 export default {
+  components: {
+    goodSku,
+  },
   props: ["goodList", "goodsInfo"],
   data() {
     return {
       mainColor: "",
       activeKey: 0,
+      showSku: false,
+      sku: {},
     };
   },
   created() {
@@ -105,9 +122,13 @@ export default {
   methods: {
     openGood(url) {
       uni.navigateTo({
-         url: url
+        url: url,
       });
-    }
+    },
+    showSkuHandler(g) {
+      this.sku = g;
+      this.showSku = true;
+    },
   },
 };
 </script>

components/goods/style3.vue

@@ -45,7 +45,7 @@
               <view class="price" :style="{'color':mainColor}">{{
                 goodsInfo.showGoodsPrice ? item.price_content : ""
               }}</view>
-              <view class="buy" v-if="goodsInfo.showBuyBtn">
+              <view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
                 <u-icon
                   name="cart-o"
                   size="40"
@@ -87,16 +87,23 @@
         </div>
       </u-col>
     </u-row>
+    <good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
   </div>
 </template>
 
 <script>
+import goodSku from '../goods/goodsku'
 export default {
+  components:{
+    goodSku
+  },
   props: ["goodList", "goodsInfo"],
   data() {
     return {
       mainColor: "",
       activeKey: 0,
+      showSku:false,
+      sku:{}
     };
   },
   created() {
@@ -108,6 +115,10 @@ export default {
          url: url
       });
     },
+    showSkuHandler(g){
+      this.sku=g
+      this.showSku=true
+    }
   },
 };
 </script>

components/goods/style4.vue

@@ -40,7 +40,7 @@
           <view class="price" :style="{'color':mainColor}">{{
             goodsInfo.showGoodsPrice ? item.price_content : ""
           }}</view>
-          <view class="buy" v-if="goodsInfo.showBuyBtn">
+          <view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
             <u-icon
               name="cart-o"
               size="40"
@@ -76,16 +76,23 @@
         </view>
       </view>
     </view>
+    <good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
   </view>
 </template>
 
 <script>
+import goodSku from '../goods/goodsku'
 export default {
+  components:{
+    goodSku
+  },
   props: ["goodList", "goodsInfo"],
   data() {
     return {
       mainColor: "",
       activeKey: 0,
+      showSku:false,
+      sku:{}
     };
   },
   created() {
@@ -97,6 +104,10 @@ export default {
          url: url
       });
     },
+    showSkuHandler(g){
+      this.sku=g
+      this.showSku=true
+    }
   },
 };
 </script>

components/goods/style5.vue

@@ -42,7 +42,7 @@
           <view class="price" :style="{ color: mainColor }">{{
             goodsInfo.showGoodsPrice ? item.price_content : ""
           }}</view>
-          <view class="buy" v-if="goodsInfo.showBuyBtn">
+          <view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
             <u-icon
               name="cart-o"
               size="40"
@@ -79,16 +79,23 @@
       </view>
     </view>
     <view style="color: rgba(0, 0, 0, 0); font-size: 12px;">0</view>
+    <good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
   </view>
 </template>
 
 <script>
+import goodSku from '../goods/goodsku'
 export default {
+  components:{
+    goodSku
+  },
   props: ["goodList", "goodsInfo"],
   data() {
     return {
       mainColor: "",
       activeKey: 0,
+      showSku:false,
+      sku:{}
     };
   },
   created() {
@@ -100,6 +107,10 @@ export default {
         url: url,
       });
     },
+    showSkuHandler(g){
+      this.sku=g
+      this.showSku=true
+    }
   },
 };
 </script>

node_modules/uview-ui/components/u-popup/u-popup.vue

@@ -241,7 +241,7 @@
 		right: 0;
 		bottom: 0;
 		overflow: hidden;
-		z-index: 999;
+		z-index: 999999999;
 	}
 
 	.u-drawer-content {

pages/goods/goods.vue

@@ -63,9 +63,9 @@
               <u-icon name="arrow" :size="32" color="#111"></u-icon>
             </view>
           </view>
-          <view class="suk-item">
+          <view class="suk-item" style="flex-wrap:wrap">
             <template v-if="skuimage.length > 0">
-              <view v-for="(x, i) in skuimage" class="item img" :key="i">
+              <view v-for="(x, i) in skuimage" class="item img" style="margin-bottom:5px" :key="i">
                 <image :src="x" style="width: 100%; height: 100%;" />
               </view>
               <view class="item" v-if="g.attr_groups[0].attr_list.length > 1"
@@ -75,13 +75,12 @@
               >
             </template>
             <template v-else>
-              <view
-                v-for="(x, i) in g.attr_groups[0].attr_list"
-                class="item"
-                :key="i"
-              >
-                {{ x.attr_name }}
-              </view>
+              <template v-for="(x, i) in g.attr_groups[0].attr_list">
+                <view class="item" v-if="i<5" :key="i" style="margin-bottom:5px">
+                  {{ x.attr_name }}
+                </view>
+              </template>
+
               <view class="item" v-if="g.attr_groups[0].attr_list.length > 1"
                 >共{{ g.attr_groups[0].attr_list.length }}种{{
                   g.attr_groups[0].attr_group_name
@@ -226,7 +225,7 @@ export default {
       ot: 0,
       currentSku: {},
       isExsitGoods: true,
-      pageTitle:"商品详情"
+      pageTitle: "商品详情",
     };
   },
   components: {
@@ -240,7 +239,7 @@ export default {
     this.init();
     this.mc = this.$uiConfig.mainColor;
     this.secondary = this.$uiConfig.secondary;
-    this.initPage()
+    this.initPage();
   },
   methods: {
     initPage() {
@@ -258,9 +257,9 @@ export default {
         title: this.pageTitle,
       });
     },
-    clickCommentHandler(){
+    clickCommentHandler() {
       uni.navigateTo({
-         url: '/pages/goods/comment-list?id='+this.id
+        url: "/pages/goods/comment-list?id=" + this.id,
       });
     },
     init() {