合并

MrShi

20 小时以前 825418425a91c4cf95e56c3fbaf06ea9fb5a37d8

 mini-program/pages/zhuanqu/zhuanqu.vue

@@ -1,6 +1,23 @@
<template>
   <view class="box">
		
      <view class="quality">
         <view class="quality-item" @click="jumpShopZ(specialZone1[0])" v-if="specialZone1.length >= 1">
            <image class="quality-item-image" :src="specialZone1[0].imgUrl || '/static/icon/default2.png'" mode="widthFix"></image>
         </view>
         <view class="quality-item" v-if="specialZone1.length >= 2">
            <view class="quality-item-row" @click="jumpShopZ(specialZone1[1])" v-if="specialZone1.length >= 2">
               <image class="quality-item-row-image" :src="specialZone1[1].imgUrl || '/static/icon/default2.png'" mode="widthFix"></image>
            </view>
            <view class="quality-item-row" @click="jumpShopZ(specialZone1[2])" v-if="specialZone1.length >= 3">
               <image class="quality-item-row-image" :src="specialZone1[2].imgUrl || '/static/icon/default2.png'" mode="widthFix"></image>
            </view>
         </view>
      </view>
      <view class="quality-item1" v-if="specialZone2.length > 0">
         <view class="quality-item-row1" @click="jumpShopZ(item)" v-for="(item, index) in specialZone2" :key="index">
            <image class="quality-item-row-image1" :src="item.imgUrl || '/static/icon/default2.png'" mode="widthFix"></image>
         </view>
      </view>
   </view>
</template>

@@ -8,8 +25,29 @@
   export default {
      data() {
         return {
				
            specialZone1: [],
            specialZone2: []
         };
      },
      onLoad() {
         this.getLabels()
      },
      methods: {
         // 获取分类
         getLabels() {
            this.$u.api.getGoodsLabelsByType({ type: 12 })
               .then(res => {
                  if (res.code === 200) {
                     this.specialZone1 = res.data.slice(0, 3)
                     this.specialZone2 = res.data.slice(3, res.data.length)
                  }
               })
         },
         jumpShopZ(item) {
            uni.navigateTo({
               url: '/pages/special-zone/special-zone?qualityId=' + item.id
            })
         }
      }
   }
</script>
@@ -17,5 +55,69 @@
<style lang="scss" scoped>
   .box {
      width: 100%;
      padding: 0 30rpx;
      box-sizing: border-box;
		
      .quality-item1 {
         width: 100%;
         display: flex;
         align-items: center;
         flex-wrap: wrap;
         justify-content: space-between;
         margin-top: 20rpx;
         .quality-item-image1 {
            width: 100%;
         }
				
         .quality-item-row1 {
            width: 334rpx;
            height: 178rpx;
            border-radius: 16rpx;
            overflow: hidden;
            border-radius: 16rpx;
            margin-bottom: 20rpx;
				
            .quality-item-row-image1 {
               width: 100%;
            }
         }
      }
		
      .quality {
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex-wrap: wrap;
         margin-top: 30rpx;
		
         .quality-item {
            width: 334rpx;
            height: 372rpx;
            border-radius: 16rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
				
            .quality-item-image {
               width: 100%;
            }
		
            .quality-item-row {
               width: 100%;
               height: 176rpx;
               display: flex;
               align-items: center;
               justify-content: center;
               overflow: hidden;
               border-radius: 16rpx;
					
               .quality-item-row-image {
                  width: 100%;
               }
            }
         }
      }
   }
</style>