<template>
<view class="body1">
<view class="grid-item" v-for="(item, index) in productCategoryList" :key="index" >
<view class="grid-item-box" @click="navToChildrenPage(item)">
<image :src="getImgUrl(item.Icon)" lazy-load="true" mode="aspectFill"></image>
<text class="text">{{ item.Name }}</text>
</view>
</view>
<!-- <uni-grid :column="col" @change="change" >
<uni-grid-item class="grid-item" v-for="(item, index) in productCategoryList" :key="index" >
<view class="grid-item-box" @click="navToChildrenPage(item)">
<image :src="getImgUrl(item.Icon)" lazy-load="true" mode="aspectFill"></image>
<text class="text">{{ item.Name }}</text>
</view>
</uni-grid-item>
</uni-grid> -->
</view>
</template>
<script>
// import uniIndexedList from '@/components/uni-indexed-list/uni-indexed-list.vue';
// import uniGrid from '@/components/uni-grid/uni-grid.vue';
// import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
// import { mapMutations } from 'vuex';
export default {
// components: { uniIndexedList,
// uniGrid,
// uniGridItem,},
data() {
return {
productCategoryList: [],
col:3
};
},
onLoad() {
this.getProductCategoryList();
},
onShow()
{
let _this = this
uni.getSystemInfo({
success: function(res) {
if (res.windowWidth > res.windowHeight) {
// 横屏
_this.col=6;
} else {
// 竖屏
_this.col=3;
}
}
});
},
// onHide()
// {
// this.productCategoryList=[];
// },
onUnload()
{
this.productCategoryList=[];
},
methods: {
change(e) {
let { index } = e.detail;
//console.log(index);
},
getProductCategoryList() {
let that = this;
uni.request({
url: this.$store.state.siteBaseUrl + '/api/Shop/GetProductCategories?parentId=5',
data: {},
method: 'GET',
header: {
Authorization: this.$store.state.userInfo.result.Token,
'content-type': 'application/json'
},
success: function(res) {
that.productCategoryList = res.data.result;
}
});
},
getImgUrl(icon) {
if (icon) return this.$store.state.imgSiteUrl + icon;
else return '/static/list.png';
},
navToChildrenPage(item) {
uni.navigateTo({
url: `/pages/category/productcategory1?item=${JSON.stringify(item)}`
});
},
},
};
</script>
<style lang="scss">
page {
background: #f5f5f5;
}
.body1{
}
.grid-item
{
padding: 8upx 8upx;
width: 16%;
float:left;
position:relative;
.grid-item-box {
flex: 1;
/* position: relative;
*/
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 8upx;
// margin: 8upx;
border: 0upx;
background: rgba(174, 221, 229, 0.8);
/* 原图标颜色太深,不想改图了,所以加了透明度 */
image {
width: 64upx;
height: 64upx;
margin: 7upx;
border-radius: 50%;
opacity: 0.7;
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
}
text {
width: 80upx;
padding: 8upx 2upx;
text-align: center;
font-size: 13upx;
}
}
}
</style>
1 个回复
昭昭L - 开心就好
你这个片段可读性太差了,格式化一下放到code里面看着会好很多