<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>
|
|
<script>
|
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>
|
|
<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>
|
