更新

components/WaterfallsFlowItem/WaterfallsFlowItem.vue

@@ -3,25 +3,33 @@
     <view class='pictrue'>
       <easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
       <view v-if="item.stock == 0" class="sell_out">已售罄</view>
-			<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view>
+      <view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture">
+      </view>
     </view>
     <view class="text">
       <view class='name line2'>{{item.store_name}}</view>
+      <view class="acea-row row-middle">
+        <view><text class="store_info">{{item.store_info}}</text></view>
+      </view>
       <view class="item_tags">
         <!-- 后端返回的标签 -->
-        <text class="tags_item delivery" :class="{'delivery_yellow': sale_type==2&&i==0}" v-for="(e, i) in item.mer_label_name" :key="i">{{e}}</text>
+        <text class="tags_item delivery" :class="{'delivery_yellow': sale_type==2&&i==0}"
+          v-for="(e, i) in item.mer_label_name" :key="i">{{e}}</text>
         <!-- 商品标签 -->
         <!-- <text v-if="item.product_type == 0 && item.merchant.type_name" class="font-bg-red b-color">{{item.merchant.type_name}}</text>
 				<text v-else-if="item.product_type == 0 && item.merchant.is_trader" class="font-bg-red b-color">自营</text> -->
-				<text v-if="item.product_type != 0" :class="'font_bg-red type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
+        <text v-if="item.product_type != 0"
+          :class="'font_bg-red type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
         <text class="tags_item ticket" v-if="item.issetCoupon">领券</text>
         <text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text>
       </view>
       <view class="acea-row row-middle" style="display: flex;justify-content: space-between;">
-				<view class='money'>￥<text class='num'>{{item.price}}</text></view>	
+        <view class='money'>￥<text class='num'>{{item.price}}</text><text
+            style="color: #ccc;">/{{item.unit_name}}</text></view>
         <image class="car" src="@/static/assets/car.png"></image>
       </view>
-			<view v-if="item.show_svip_info && item.show_svip_info.show_svip_price && item.svip_price" class="acea-row row-middle svip">
+      <view v-if="item.show_svip_info && item.show_svip_info.show_svip_price && item.svip_price"
+        class="acea-row row-middle svip">
         <text class='vip-money'>￥{{item.svip_price}}</text>
         <view class="vipImg">
           <image :src="`${domain}/static/images/svip.png`"></image>
@@ -33,23 +41,29 @@
     <view class='pictrue'>
       <easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
       <view v-if="item.stock == 0" class="sell_out">已售罄</view>
-			<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture"></view>
+      <view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture">
+      </view>
     </view>
     <view class='text'>
       <view class='name line2'>{{item.store_name}}</view>
+      <view class="acea-row row-middle">
+        <view class="store_info"><text>{{item.store_info}}</text></view>
+      </view>
       <view class="item_tags acea-row">
         <text class="tags_item delivery_yellow" v-if="sale_type == 2">批发价</text>
         <!-- 商品标签 -->
         <!-- <text v-if="item.merchant.type_name && item.product_type == 0" class="font-bg-red b-color">{{item.merchant.type_name}}</text>
 				<text v-else-if="item.merchant.is_trader && item.product_type == 0" class="font-bg-red b-color">自营</text> -->
-				<text v-if="item.product_type != 0" :class="'font_bg-red type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
+        <text v-if="item.product_type != 0"
+          :class="'font_bg-red type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
         <text class="tags_item ticket" v-if="item.issetCoupon">领券</text>
         <text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text>
       </view>
       <view class='money'>
         ￥<text class='num'>{{item.price}}</text>
       </view>
-      <view v-if="item.show_svip_info.show_svip && item.show_svip_info.show_svip_price" class="acea-row row-middle svip">
+      <view v-if="item.show_svip_info.show_svip && item.show_svip_info.show_svip_price"
+        class="acea-row row-middle svip">
         <text class='vip-money'>￥{{item.svip_price}}</text>
         <view class="vipImg">
           <image :src="`${domain}/static/images/svip.png`"></image>
@@ -129,7 +143,6 @@ export default {
       }
     }
   }
-
 </script>
 <style lang="scss" scoped>
   .wf-item-page {
@@ -138,6 +151,7 @@ export default {
     border-radius: 16rpx;
     padding-bottom: 20rpx;
   }
+
   .wf-page0 .coupon {
     background: rgba(255, 248, 247, 1);
     border: 1px solid rgba(233, 51, 35, 1);
@@ -146,14 +160,19 @@ export default {
     margin-left: 18rpx;
     padding: 1rpx 4rpx;
   }
+
   .wf-page0 .pictrue {
     width: 100% !important;
     height: 345rpx;
     position: relative;
-	/deep/image,/deep/.easy-loadimage,uni-image{
+
+    /deep/image,
+    /deep/.easy-loadimage,
+    uni-image {
       height: 345rpx;
       border-radius: 16rpx 16rpx 0 0;
     }
+
     .border-picture {
       position: absolute;
       top: 0;
@@ -164,29 +183,35 @@ export default {
       background: center/cover no-repeat;
     }
   }
+
   .loadfail-img {
     width: 100%;
     height: 360rpx;
   }
+
   .svip {
     margin: 5rpx 0 15rpx;
   }
+
   .vip-money {
     color: #282828;
     font-size: 22rpx;
     margin-left: 6rpx;
     font-weight: bold;
   }
+
   .vipImg {
     width: 65rpx;
     height: 28rpx;
     margin-left: 4rpx;
+
     image {
       width: 100%;
       height: 100%;
       display: block;
     }
   }
+
   .wf-page0 .name {
     color: #282828;
     margin: 20rpx 0 10rpx 0;
@@ -198,21 +223,26 @@ export default {
     -webkit-box-orient: vertical;
     text-align: left;
   }
+
   .wf-page0 .text {
     padding: 0 20rpx;
   }
+
   .wf-page0 .money {
     font-size: 20rpx;
     font-weight: bold;
     color: var(--view-priceColor);
   }
+
   .b-color {
     background-color: var(--view-theme);
     border: 1px solid var(--view-theme);
   }
+
   .wf-page0 .money .num {
     font-size: 34rpx;
   }
+
   .wf-page1 .wf-item {
     .name {
       font-size: 13px;
@@ -224,14 +254,19 @@ export default {
       text-align: left;
     }
   }
+
   .wf-page1 .pictrue {
     position: relative;
     height: 345rpx;
     width: 100% !important;
-	/deep/image,/deep/.easy-loadimage,uni-image{
+
+    /deep/image,
+    /deep/.easy-loadimage,
+    uni-image {
       height: 345rpx;
       border-radius: 20rpx 20rpx 0 0;
     }
+
     .border-picture {
       position: absolute;
       top: 0;
@@ -243,6 +278,7 @@ export default {
     }
 
   }
+
   .sell_out {
     display: flex;
     width: 150rpx;
@@ -257,6 +293,7 @@ export default {
     top: 50%;
     left: 50%;
     margin: -75rpx 0 0 -75rpx;
+
     &::before {
       content: "";
       display: block;
@@ -269,15 +306,18 @@ export default {
       left: 5rpx;
     }
   }
+
   .loading-img {
     height: 345rpx;
     max-height: 360rpx;
   }
+
   .wf-page1 .text {
     padding: 20rpx 17rpx 26rpx 17rpx;
     font-size: 30rpx;
     color: #222;
   }
+
   .wf-page1 .text .money {
     display: flex;
     align-items: center;
@@ -286,13 +326,16 @@ export default {
     margin-top: 8rpx;
     color: var(--view-priceColor);
   }
+
   .wf-page1 .text .money .num {
     font-size: 34rpx;
   }
+
   .item_tags {
     margin-top: 8rpx;
     display: flex;
   }
+
   .item_tags .tags_item {
     display: flex;
     font-size: 20rpx;
@@ -304,20 +347,24 @@ export default {
     justify-content: center;
     margin-right: 8rpx;
   }
+
   .item_tags .tags_item.ticket {
     color: var(--view-theme);
     border: 1px solid var(--view-theme);
   }
+
   .item_tags .tags_item.delivery {
     // color: #FF9000;
     // border: 1px solid #FF9000;
     color: var(--view-theme);
     border: 1px solid var(--view-theme);
   }
+
   .item_tags .tags_item.delivery_yellow {
     color: #FF9000;
     border: 1px solid #FF9000;
   }
+
   .wf-page1 .text .money .ticket-big {
     display: flex;
     align-items: center;
@@ -331,31 +378,37 @@ export default {
     font-size: 20rpx;
     font-weight: normal;
   }
+
   .wf-page1 .text .score {
     margin-top: 10rpx;
     color: #737373;
     font-size: 20rpx;
   }
+
   .wf-page1 .text .company {
     display: flex;
     align-items: center;
     color: #737373;
     font-size: 20rpx;
     margin-top: 10rpx;
+
     .line1 {
       max-width: 200rpx;
     }
+
     .flex {
       display: flex;
       align-items: center;
       margin-left: 10rpx;
       color: #282828;
+
       .iconfont {
         font-size: 16rpx;
         margin-top: 4rpx;
       }
     }
   }
+
   .foot-bar {
     width: 100%;
     height: 52rpx;
@@ -366,13 +419,29 @@ export default {
     border-radius: 0px 0px 16rpx 16rpx;
     color: #fff;
     font-size: 24rpx;
+
     .icon-fenxiang {
       font-size: 24rpx;
       margin-right: 10rpx;
     }
   }
+
   .car {
     width: 40rpx;
     height: 40rpx;
   }
+
+  .store_info {
+    width: 100%;
+    font-size: 20rpx;
+    color: #aaa;
+    white-space: pre-wrap;
+    font-weight: 400;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    /* 表示限制显示三行 */
+  }
 </style>