feat(index): 首页商品列表样式变更

pages/index/index.vue

@@ -10,33 +10,14 @@
       <!-- 商品专区入口 先别删  -->
       <!-- <view @tap="goSpecialArea">会员专区</view> -->
       <view :class="userInfo.skin ? 'index-top1' : 'index-top'">
-        <view class="index_t">
+        <!-- <view class="index_t">
           <view class="index-left">
             <view class="english">GLOBALIZATION</view>
             <view class="text">{{ '全球一体化' }}</view>
           </view>
-          <!-- <view class="index-right">
-            <view
-              class="changeLanguages"
-              v-if="isEmpty(getLanguageList) == false"
-            >
-              <picker
-                :range="getLanguageList"
-                :value="index"
-                range-key="label"
-                @change="bindPickerChange"
-              >
-                <view class="select-text">
-                  <view class="texts">{{ getLanguageList[index].label }}</view>
-                  <view class="">
           
-                  </view>
-                </view>
-              </picker>
-            </view>
         </view> -->
       </view>
-      </view>
       
       <view class="banner" v-if="isEmpty(goodsList.advertBannerList) == false">
         <view class="uni-margin-wrap">
@@ -49,7 +30,8 @@
             :duration="duration"
           >
             <swiper-item
-              v-for="item in goodsList.advertBannerList"
+              v-for="(item, index) in goodsList.advertBannerList"
+              :key="index"
               @click="bannerTap(item.link)"
             >
               <view class="swiper-item uni-bg-red">
@@ -61,10 +43,13 @@
       </view>
       <view class="goods-sort">
         <view class="goods-flexs">
+          <view
+            v-for="(item, index) in goodsList.recommendSpecialAreaList"
+            :key="index"
+          >      
             <view
               class="goods-view"
               @click="navTap(item)"
-            v-for="(item, index) in goodsList.recommendSpecialAreaList"
               v-if="item.waresList != false && (index < 8 || moreFlag == true)"
             >
               <view :class="userInfo.skin ? 'bg-color1' : 'bg-color'"></view>
@@ -92,6 +77,7 @@
               </template>
             </view>
           </view>
+        </view>
         <view v-if="isEmpty(goodsList.recommendSpecialAreaList) == false">
           <view
             class="more"
@@ -102,28 +88,11 @@
           </view>
         </view>
         <view class="goods_content">
-          <!-- banner图!-->
+          
-          <!--        <view class="goods-lists"-->
-          <!--              v-if="isEmpty(goodsList.waresCoverInfoList)==false">-->
-          <!--          <view class="uni-margin-wrap"-->
-          <!--                v-if="goodsList.waresCoverInfoList[0]">-->
-          <!--            <swiper class="swiper swiper-s"-->
-          <!--                    circular-->
-          <!--                    :indicator-dots="indicatorDots"-->
-          <!--                    :autoplay="autoplay"-->
-          <!--                    :interval="interval"-->
-          <!--                    :duration="duration">-->
-          <!--              <swiper-item v-for="item in goodsList.waresCoverInfoList[0].coverList">-->
-          <!--                <view class="swiper-items uni-bg-red">-->
-          <!--                  <image :src="item"></image>-->
-          <!--                </view>-->
-          <!--              </swiper-item>-->
-          <!--            </swiper>-->
-          <!--          </view>-->
-          <!--        </view>-->
           <view
             class="goods-center-lists"
             v-for="item in goodsList.waresVoList"
+            :key="item.waresId"
             @click="goDetails(item)"
           >
             <view
@@ -134,32 +103,30 @@
               <view class="goods-img">
                 <image :src="item.cover1"></image>
               </view>
-              <view class="padding_s">
+              <view class="padding_s goods-info">
                 <view class="goods-name">{{ item.waresName }}</view>
+                <view class="goods-sales-wrapper">
+                  <view class="goods-sales">累计销量{{ item.sales | seles }}</view>
                   <view
                     class="goods-price"
                     v-if="item.specialArea == 31 && userInfo.isMakerSpace == 1"
-                  ><span>{{ item.vipPrice | numberToCurrency | isLocal }}</span>
+                  >
+                    <span class="price-symbol">￥</span>
+                    <span>{{ item.vipPrice | numberToCurrency }}</span>
                   </view>
-                <view class="goods-price" v-if="item.specialArea != 31"
+                  <view class="goods-price" v-if="item.specialArea != 31">
-                  ><span>{{
+                    <span class="price-symbol">￥</span>
-                    item.waresPrice | numberToCurrency | isLocal
+                    <span>{{ item.waresPrice | numberToCurrency }}</span>
-                  }}</span>
                   </view>
                   <view
                     class="goods-price"
                     v-if="item.specialArea == 31 && userInfo.isMakerSpace == 0"
                   >
-                  {{ item.waresPrice | numberToCurrency | isLocal }}
+                    <span class="price-symbol">￥</span>
+                    <span>{{ item.waresPrice | numberToCurrency }}</span>
                   </view>
-                <!-- <view class="goods-price1" v-show="item.specialArea == 31"
+                </view>
-                  >统一零售价:<span>{{
+                
-                    item.retailPrice | numberToCurrency | isLocal
-                  }}</span>
-                </view> -->
-                <view class="goods-sales"
-                  >{{ '累计销量' }}{{ item.sales | seles }}</view
-                >
               </view>
             </view>
           </view>
@@ -730,64 +697,90 @@ header {
   padding: 0 20rpx;
 }
 
-.goods-sales {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 10rpx;
-}
 
-.goods-price {
-  color: #f82c1a;
-  margin-top: 10rpx;
-  font-style: 22rpx;
-  margin-left: -7rpx;
 
-  span {
-    font-size: 30rpx;
-    font-weight: bold;
-  }
-}
-.goods-price1 {
-  color: #999;
-  // margin-top: 10rpx;
-  font-size: 10px;
-  margin-left: -7rpx;
 
-  span {
-    font-size: 10rpx;
-  }
-}
 
 .goods-name {
+  width: 100%;
   margin-top: 10rpx;
   color: #333;
   font-size: 26rpx;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  line-height: 1.4;
+  // min-height: calc(26rpx * 1.4 * 2);
 }
 
-.goods-img {
-  image {
-    width: 100%;
-    border-radius: 10rpx 10rpx 0 0;
-    height: 322rpx;
-  }
-}
 
-.goods-center-lists:nth-child(3) {
-  //margin-top: 0rpx;
-}
 
 .goods-center-lists {
-  width: 345rpx; // height: 450rpx;
+  width: calc(100% - 40rpx); // height: 450rpx;
   background: #ffffff;
   margin-left: 20rpx;
+  margin-right: 20rpx;
   border-radius: 15rpx;
   border-bottom: 20rpx;
   margin-bottom: 20rpx;
-  padding-bottom: 30rpx;
+  // padding-bottom: 30rpx;
   position: relative;
+  .goods-flex-s {
+    display: flex;
+    padding: 20rpx;
+    .goods-img {
+      flex-shrink: 0;
+      width: 236rpx;
+      height: 236rpx;
+      image {
+        width: 100%;
+        height: 100%;
+        border-radius: 10rpx;
+      }
+    }
+  }
+  .goods-info {
+    flex: 1;
+    padding-left: 20rpx;
+    width: 0;
+    display: flex;
+    flex-direction: column;
+    .goods-sales-wrapper {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: space-between;
+      .goods-sales {
+        font-size: 24rpx;
+        color: #999;
+        margin-top: 10rpx;
+      }
+      .goods-price {
+        color: #f82c1a;
+        margin-top: 10rpx;
+        font-style: 22rpx;
+        margin-left: -7rpx;
+        .price-symbol {
+          font-size: 22rpx;
+        }
+        span {
+          font-size: 36rpx;
+          font-weight: bold;
+        }
+      }
+      .goods-price1 {
+        color: #999;
+        font-size: 10px;
+        margin-left: -7rpx;
+        span {
+          font-size: 10rpx;
+        }
+      }
+    }
+  }
 }
 
 .goods-sort {
@@ -806,6 +799,7 @@ header {
 
 .goods_content {
   display: flex;
+  flex-direction: column;
   padding: 0;
   flex-wrap: wrap;
 }
@@ -970,7 +964,7 @@ header {
 }
 
 .banner {
-  padding: 140rpx 0 0 0;
+  padding: 30rpx 0 0 0;
   text-align: center;
   width: 100%;
 }
@@ -1028,7 +1022,7 @@ page {
   position: fixed;
   z-index: 10;
   width: 100%;
-  height: 120rpx;
+  height: 20rpx;
   .index_t {
     padding: 30rpx 20rpx;
   }
@@ -1043,7 +1037,7 @@ page {
   position: fixed;
   z-index: 10;
   width: 100%;
-  height: 120rpx;
+  height: 100%;
   .index_t {
     padding: 30rpx 20rpx;
   }

pages/other/index.vue

@@ -750,6 +750,7 @@ export default {
 
       api.memLevel(this.allGoodsData).then(res => {
         if (res.data.isEnough) {
+          console.log(res.data, 'res.data...memLevel')
           this.form.pkGradeVal = res.data.pkGradeVal
         } else {
           this.isLoading.close()