1

xuxueyang

2024-08-14 f21977f88d46ff73c8345d85e3a9b988b2306b2b

 pages/home/components/home-top-flow.vue

@@ -1,173 +1,195 @@
<template>
  <view class="home-top-flow">
    <view class="item flex" v-for="(item,index) of list" :key="index">
      <view class="img">
        <image class="img img100"
               :src="item.cover">
        </image>
        <view class="level">
          {{ ite.levelStr}}
        </view>
      </view>
   <view class="home-top-flow">
      <view class="item flex" v-for="(item,index) of list" :key="index" @click="toDetail(item)">
         <view class="img">
            <image class="img img100" :class="[!item.stock?'':'']" :src="item.cover" :lazy-load="true">
            </image>
            <view class="level">
               {{ item.levelStr}}
            </view>
         </view>

      <view class="m-l-12 info-container flex1">
        <view class="title">
          {{ item.name || '-' }}
          <view class="price">
            ￥{{ item.price || 0 }}/扎
          </view>
        </view>
        <view class="tags">
          <view class="tag red" v-for="(tag,k) of item.tagArr" :class="[k===0?'red':'green']" :key="tag">{{
         <view class="m-l-12 info-container flex1">
            <view class="title">
               {{ item.name || '-' }}
               <!-- <span v-if="item.categoryStr" class="m-l-10">{{item.categoryStr || '-'}}</span> -->
               <view class="price">
                  ￥{{ item.price || 0 }}/扎
               </view>
            </view>
            <view class="tags" v-if="item.tag">
               <view class="tag red" v-for="(tag,k) of item.tagArr" :class="[k===0?'red':'green']" :key="tag">{{
              tag
            }}
          </view>
          <!--               <view class="tag red">限时抢购</view>-->
          <!--               <view class="tag green">品质严选</view>-->
        </view>
        <view class="shop-name">
          {{ item.supplierName || '佚名' }}
        </view>
        <view class="other-info flex">
          <view class="m-r-15">
            已售:{{ item.sales || 0 }}
          </view>
          <view class="m-r-15">
            剩余:{{ item.stock || 0 }}
          </view>
          <view class="m-r-15">
            {{ item.unit || 0 }}
          </view>
        </view>
      </view>
    </view>
  </view>
               </view>
               <!--               <view class="tag red">限时抢购</view>-->
               <!--               <view class="tag green">品质严选</view>-->
            </view>
            <view class="shop-name">
               {{ item.supplierName || '佚名' }}
            </view>
            <view class="other-info flex">
               <view class="m-r-15">
                  已售:{{ item.sales || 0 }}
               </view>
               <view class="m-r-15">
                  剩余:{{ item.stock || 0 }}
               </view>
               <view class="m-r-15">
                  {{ item.unit || 0 }}
               </view>
            </view>
            <view class="button-buy  m-l-a m-r-0" v-if="item.status=='UP'">
               立即抢购
            </view>
         </view>
      </view>
   </view>
</template>

<script>
export default {
  data() {
    return {
      // list: [{}, {}, {}, {}]
    };
  },
  mounted() {
    this.listApi = '/api/customer/flower/list'
    this.page.size = 4
    this.page.current = 1
    this.getList('post')
  },
  methods: {
    getList_after() {
      if (this.list) {
        for (var item of this.list) {
          item.tagArr = []
          if (item.tags) {
            item.tagArr = item.tags.split(",") || []
          }
        }
      }
    }
  },
   export default {
      data() {
         return {
            // list: [{}, {}, {}, {}]
            query: {
               status: 'UP',
               recommend: true
            }
         };
      },
      mounted() {
         this.listApi = '/api/customer/flower/list'
         this.page.size = 20
         this.page.current = 1
         this.getList('post')
      },
      methods: {
         getList_after() {
            if (this.list) {
               for (var item of this.list) {
                  item.tagArr = []
                  if (item.tags) {
                     item.tagArr = item.tags.split(",") || []
                  }
               }
            }
         },
         toDetail(item) {
            uni.navigateTo({
               url: '/sub_pages/customer/trade/detail?id=' + item.id
            })
         }
      },

}
   }
</script>

<style lang="scss">
.home-top-flow {
  .item {
    margin-top: 20rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    padding: 10rpx;
   .home-top-flow {
      .item {
         margin-top: 20rpx;
         background: #FFFFFF;
         border-radius: 8rpx;
         padding: 10rpx;

    .info-container {
         .info-container {
            .button-buy {
               width: 128rpx;
               height: 48rpx;
               border-radius: 30rpx;
               border: 2rpx solid #CF0000;
               font-size: 24rpx;
               color: #CF0000;
               line-height: 48rpx;
               text-align: center;
            }

      .other-info {
        margin-top: 6rpx;
        font-size: 24rpx;
        color: #666666;
        line-height: 34rpx;
        text-align: left;
      }
            .other-info {
               margin-top: 6rpx;
               font-size: 24rpx;
               color: #666666;
               line-height: 34rpx;
               text-align: left;
            }

      .shop-name {
        margin-top: 14rpx;
        font-size: 24rpx;
        color: #666666;
        line-height: 34rpx;
      }
            .shop-name {
               margin-top: 14rpx;
               font-size: 24rpx;
               color: #666666;
               line-height: 34rpx;
            }

      .tags {
        margin-top: 12rpx;
        display: flex;
            .tags {
               margin-top: 12rpx;
               display: flex;

        .tag {
          min-width: 80rpx;
          padding-left: 20rpx;
          padding-right: 20rpx;
          line-height: 36rpx;
          background: #FEE6E6;
          border-radius: 21rpx;
          font-size: 24rpx;
          color: #CD1212;
          margin-right: 12rpx;
          text-align: center;
        }
               .tag {
                  min-width: 80rpx;
                  padding-left: 20rpx;
                  padding-right: 20rpx;
                  line-height: 36rpx;
                  background: #FEE6E6;
                  border-radius: 21rpx;
                  font-size: 24rpx;
                  color: #CD1212;
                  margin-right: 12rpx;
                  text-align: center;
               }

        .tag.green {
          color: rgba(110, 159, 102, 1);
          background: rgba(202, 229, 214, 1);
          border-radius: 21rpx;
          // opacity: 0.57;
        }
      }
               .tag.green {
                  color: rgba(110, 159, 102, 1);
                  background: rgba(202, 229, 214, 1);
                  border-radius: 21rpx;
                  // opacity: 0.57;
               }
            }

      .title {
        font-weight: 600;
        font-size: 32rpx;
        color: #000000;
        line-height: 44rpx;
        margin-top: 8rpx;
        position: relative;
            .title {
               font-weight: 600;
               font-size: 32rpx;
               color: #000000;
               line-height: 44rpx;
               margin-top: 8rpx;
               position: relative;

        .price {
          position: absolute;
          font-weight: 400;
          font-size: 28rpx;
          color: #CF0000;
          line-height: 40rpx;
          top: 0;
          right: 0;
        }
      }
               .price {
                  position: absolute;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #CF0000;
                  line-height: 40rpx;
                  top: 0;
                  right: 0;
               }
            }

    }
         }

    .img {
      width: 206rpx;
      height: 206rpx;
      border-radius: 8rpx;
      position: relative;
         .img {
            width: 206rpx;
            height: 206rpx;
            border-radius: 8rpx;
            position: relative;

      .level {
        position: absolute;
        width: 66rpx;
        height: 44rpx;
        background: #20613D;
        left: 0;
        top: 0;
        border-top-left-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
        color: #FFFFFF;
        line-height: 44rpx;
        font-size: 24rpx;
        text-align: center;
      }
            .level {
               position: absolute;
               width: 66rpx;
               height: 44rpx;
               background: #20613D;
               left: 0;
               top: 0;
               border-top-left-radius: 8rpx;
               border-bottom-right-radius: 8rpx;
               color: #FFFFFF;
               line-height: 44rpx;
               font-size: 24rpx;
               text-align: center;
            }

    }
         }


  }
}
      }
   }
</style>