1.商品限购，只有有数据的才展示 2.花店-设置布局重写 3.花店-广告功能

陶杰

2024-10-14 fe80801123abe5096dae9c5ad1c443c10124d435

 pages/home/components/home-banner-imgs.vue

@@ -1,11 +1,32 @@
<template>
   <view class="flex home-banner-imgs">
      <view class="flex1 m-r-5">
         <image class="p1 img100" src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/b1/b1e7dc929b53412bbea72c9ca3f9aa25%E4%BD%8D%E5%9B%BE@2x%20(1).png" ></image>
   <view class=" home-banner-imgs">
      <view class="flex" v-if="list&&list.length>=3">
         <view class="flex1 m-r-5">
            <image class="p1 img100" :src="list[0].url" mode="scaleToFill" @click="toDetail(list[0])">
            </image>
         </view>
         <view class="flex1 m-l-5">
            <image class="p2 img100" :src="list[1].url" mode="scaleToFill" @click="toDetail(list[1])">
            </image>
            <image class="p3 img100" :src="list[2].url" mode="scaleToFill" @click="toDetail(list[2])">
            </image>
         </view>
      </view>
      <view class="flex1 m-l-5">
         <image class="p2 img100" src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/86/86605e258843479f828ce6749010d791%E4%BD%8D%E5%9B%BE@2x%20(2).png"></image>
         <image class="p3 img100" src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/76/76532c632d28449a9f93a4228a7b851e%E4%BD%8D%E5%9B%BE@2x%20(3).png"></image>
      <view class="flex l-2" v-else-if="list&&list.length>=2" mode="scaleToFill">
         <view class="flex1 m-r-5">
            <image class="p1 img100" :src="list[0].url" mode="scaleToFill" @click="toDetail(list[0])">
            </image>
         </view>
         <view class="flex1 m-l-5">
            <image class="p1 img100" :src="list[1].url" mode="scaleToFill" @click="toDetail(list[1])">
            </image>
         </view>
      </view>
      <view class="flex l-1" v-else-if="list&&list.length>=1" mode="scaleToFill">
         <view class="flex1 m-r-5">
            <image class="p1 img100" :src="list[0].url" mode="scaleToFill" @click="toDetail(list[0])">
            </image>
         </view>
      </view>
   </view>
</template>
@@ -14,29 +35,80 @@
   export default {
      data() {
         return {
				
            list: [],
         };
      },
      methods: {
         async init() {
            const {
               data,
               code
            } = await this.$http.request('get', '/api/pub/advertisement/list', {

            })
            if (code === 0) {
               this.list = data || []
               for (var item of this.list) {
                  item.url = item.cover
                  try {
                     if (item.url) {
                        var t = JSON.parse(item.url)
                        if (Array.isArray(t)) {
                           item.url = t[0] || ''
                        } else {
                           item.url = t.url || ''
                        }
                     }

                  } catch (e) {
                     // console.log('error',e)
                  }
                  // item.url = item.cover
               }
               console.log(this.list)
            }
         },
         toDetail(item) {
            uni.navigateTo({
               url: `/pages/advertising/advertising?id=${item.id}`
            })
         }
      },
      async mounted() {
         this.init()

      }
   }
</script>

<style lang="scss">
.home-banner-imgs{
   .p1{
      // width: 334rpx;
      height: 308rpx;
      width: 100%;
   .home-banner-imgs {

      // background-color: #fff;
      .p1 {
         // width: 334rpx;
         height: 308rpx;
         width: 100%;
      }

      .p2 {
         // width: 334rpx;
         width: 100%;
         height: 142rpx;
      }

      .p3 {
         width: 100%;
         margin-top: 18rpx;
         // width: 334rpx;
         height: 142rpx;
      }

      // .l-1{
      //    .p1{
      //       min-height: 308rpx;
      //       height: 308rpx;
      //    }
      // }
   }
   .p2{
      // width: 334rpx;
      width: 100%;
      height: 142rpx;
   }
   .p3{
      width: 100%;
      margin-top: 18rpx;
      // width: 334rpx;
      height: 142rpx;
   }
}
</style>
</style>