Task(千县名品)：产品随机列表展示

pkg_product/views/famousQianxianShop.vue

@@ -505,8 +505,8 @@
           v-if="activeIndex === 4"
           class="good-list-wrap"
         >
-          <view class="good-list-cont">
+          <view class="good-list-cont v12-d-grid-columns-2">
-            <view class="list-cont-left">
+            <!-- <view class="list-cont-left">
               <view
                 v-for="(item, index) in leftList"
                 :key="index"
@@ -537,9 +537,42 @@
                   @view="goGoodsCon(item)"
                 />
               </view>
-            </view>
+            </view> -->
             <view v-for="(item, index) in leftList" :key="index"> 
-
+              <view v-if="item.productId" class="v12-white v12-radius-20 v12-pa-2 f-wrap" @click="goGoodsCon(item)">
+                <view class="focus-img">
+                  <image :src="item.productImage"  class="img"></image>
+                </view>
+                <view class="more-t v12-pt-2" style="height: 84rpx">{{ item.productName }}</view>
+                <view class="v12-justify-between v12-algin-center v12-pt-2">
+                  <view>
+                    <text class="v12-font-bold v12-primary-text v12-font-24">￥</text>
+                    <text class="v12-font-bold v12-primary-text v12-font-28">{{ item.productPrice }}</text>
+                  </view>
+                  <view class="btn">
+                    <image
+                      :src="webUrl + '/home/icon-cart.png'"
+                      class="img"
+                    />
+                  </view>
+                </view>
+              </view>
+              <view v-if="!item.productId" class="v12-white v12-radius-20 v12-pa-2 f-wrap" @click="goStore(item)">
+                <view class="focus-img">
+                  <image :src="item.cover"  class="img" mode="heightFix|widthFix"></image>
+                  <image
+                    :src="webUrl + '/orderIcon/farmer.png'"
+                    class="mark-img"
+                  />
+                </view>
+                <view class="more-t v12-pt-2" style="height: 84rpx">{{ item.name }}</view>
+                <view class="v12-justify-start v12-align-center v12-pt-2">
+                  <view class="btn v12-mr-2">
+                    <image :src="item.logo" class="img v12-radius-100"></image>
+                  </view>
+                  <view class="one-t v12-font-24 v12-dark1-text" style="width:230rpx">{{ item.ownerName }}/{{ inn.name }}</view>
+                </view>
+              </view>
             </view>
           </view>
           <image
@@ -690,6 +723,14 @@ export default {
     this.getListReq()
   },
   methods: {
+    goStore(item) {
+      this.$yrouter.push({
+        path: '/pagesInn/inn/innHome',
+        query: {
+          id: item.farmerShopId
+        }
+      })
+    },
     load() {
       this.$refs.uReadMore.init();
     },
@@ -748,28 +789,28 @@ export default {
         if (success) {
           const products = data.products || []
           const farmerShops = data.farmerShops || []
-          // this.leftList = this.sortProductsAndStores(products, farmerShops)
+          this.leftList = this.sortProductsAndStores(products, farmerShops)
-          // console.log(this.leftList);
+          console.log(this.leftList);
-          products.map((item, index) => {
+          // products.map((item, index) => {
-            item.isOldBrand = 0
+          //   item.isOldBrand = 0
-            item.isLandmarkGoods = 0
+          //   item.isLandmarkGoods = 0
-            if (index % 2 === 0) {
+          //   if (index % 2 === 0) {
-              this.leftList.push(item)
+          //     this.leftList.push(item)
-            }
+          //   }
-            if (index % 2 === 1) {
+          //   if (index % 2 === 1) {
-              item.isFarmer = 1
+          //     item.isFarmer = 1
-              this.rightList.push(item)
+          //     this.rightList.push(item)
-            }
+          //   }
-          })
+          // })
         }
       })
     },
     shuffleArray(array) {
       for (let i = array.length - 1; i > 0; i--) {
-      let j = Math.floor(Math.random() * (i + 1));
+          let j = Math.floor(Math.random() * (i + 1));
-      [array[i], array[j]] = [array[j], array[i]];
+          [array[i], array[j]] = [array[j], array[i]];
-    }
+        }
-  return array;
+      return array;
     },
     sortProductsAndStores(products, stores) {
       const randomMap = []
@@ -1091,7 +1132,35 @@ export default {
 </script>
 
 <style scoped lang="less">
+
 @import "@/assets/css/store.less";
+.focus-img {
+  position: relative;
+  .img {
+    position: relative;
+    z-index: 2;
+    display: block;
+    width: 310rpx;
+    height: 310rpx;
+    border-radius: 20rpx;
+  }
+  .mark-img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 3;
+    display: block;
+    width: 125rpx;
+    height: 83rpx;
+  }
+}
+.btn {
+        .img {
+          display: block;
+          width: 48rpx;
+          height: 48rpx;
+        }
+      }
 .my-inn-page {
   padding: 0 0 100rpx 0;
   background-color: #f6f6f6;
@@ -1791,9 +1860,11 @@ export default {
 .good-list-cont {
   position: relative;
   z-index: 2;
-  display: flex;
+  // display: flex;
-  justify-content: space-between;
+  // justify-content: space-between;
-  padding: 0 21rpx 21rpx 21rpx;
+  padding: 20rpx;
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
   .list-cont-left,
   .list-cont-right {
     width: calc(50% - 11rpx);
@@ -1812,4 +1883,7 @@ export default {
 .no-data-loadend {
   width: 100%;
 }
+.f-wrap{
+  box-sizing: border-box;
+}
 </style>