You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

170 lines
6.2 KiB

<template>
<view class="category-list">
<view v-for="(item, index) in homepageCategoryList" :key="index" class="category" @tap="jumpList(item)">
<view class="class_img"><image :class="item.jumpTargetType==16? 'mix':''" :src="item.iconUrl" class="imgs "></image></view>
<view class="text" :style="item.jumpTargetType==16? 'font-size:11px':''" >{{ item.name }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
"homepageCategoryList": [
{
"iconUrl": "https://p0.meituan.net/mallimages/7725f825efb14c613a7ef53882bf2fc342550.png",
"name": "蔬菜豆制品",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40488",
"jumpTargetType": 3
},
{
"iconUrl": "https://p0.meituan.net/mallimages/65a404f1fb66da5eae1b43adac8794da41080.png",
"name": "肉禽蛋",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40581",
"jumpTargetType": 3
},
{
"iconUrl": "https://p0.meituan.net/mallimages/2a9d96c2b396d97e425d60e182a5a8da13882.png",
"name": "海鲜水产",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40652",
"jumpTargetType": 3,
"bubble": {
"id": 1011,
"type": 1,
"text": "抢波龙",
"priority": 1,
"utime": 1610624525256
}
},
{
"iconUrl": "https://p0.meituan.net/mallimages/8bf2a444e426d0205f1e7a50a034e2d234560.png",
"name": "水果",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40532",
"jumpTargetType": 3
},
{
"iconUrl": "https://p0.meituan.net/mallimages/6a5bba31dd8720e66ac5c90399b647f430483.png",
"name": "乳品烘焙",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40461",
"jumpTargetType": 3
},
{
"iconUrl": "https://p1.meituan.net/mallimages/752d4d5ed15ea9b418268dbbb58f730838543.png",
"name": "速食冻品",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40478",
"jumpTargetType": 3
},
{
"iconUrl": "https://p0.meituan.net/mallimages/cc71321c6617da6b7b941763208a011332548.png",
"name": "粮油调味",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40472",
"jumpTargetType": 3
},
{
"iconUrl": "https://p0.meituan.net/mallimages/ac948daefceb0c71735868d1accbe22031714.png",
"name": "酒水饮料",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40455",
"jumpTargetType": 3
},
{
"iconUrl": "https://p0.meituan.net/mallimages/a59a09667218f46722803f78ef720e5910801.png",
"name": "休闲零食",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40485",
"jumpTargetType": 3
},
{
"iconUrl": "https://p1.meituan.net/mallimages/4f6e7f3657a9741571ad809c021ad98b48763.png",
"name": "餐饮熟食",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40916",
"jumpTargetType": 3
},
{
"iconUrl": "https://p0.meituan.net/mallimages/61c91165616fcecb6148f841b35c85c46003.png",
"name": "年货大街",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=41755",
"jumpTargetType": 16
},
{
"iconUrl": "https://p0.meituan.net/mallimages/5d24618a6160c550ccfe13942ba620c36288.png",
"name": "美团奶站",
"jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2Fe7b70154317467246531%2F93534%2Findex.html%3FpoiId%3D1865",
"jumpTargetType": 16
},
{
"iconUrl": "https://p1.meituan.net/mallimages/4799fc4c5ed9e7b06e3eb01d5f73ae0432224.png",
"name": "打边炉",
"jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2F56eae497a65b9470558c%2F97032%2Findex.html%3FpoiId%3D1865",
"jumpTargetType": 16
},
{
"iconUrl": "https://p0.meituan.net/mallimages/adf27d98c79b4ee210381b85bdb0121228333.png",
"name": "煲靓汤",
"jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2F121e7c13425aa76e8d97%2F97034%2Findex.html%3FpoiId%3D1865",
"jumpTargetType": 16
},
{
"iconUrl": "https://p0.meituan.net/mallimages/36d8e40e80ead870bce26f6a5311c4996010.png",
"name": "家居个护",
"jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40482",
"jumpTargetType": 16
}
],
};
},
props: {
},
methods: {
jumpList(item) {
uni.navigateTo({
url: '/pages/views/home/classList?classId=' + item.id
});
}
}
};
</script>
<style scoped lang="scss">
.category-list {
width: 94%;
margin: 0 3%;
padding: 0 0 30upx 0;
border-bottom: solid 2rpx #f6f6f6;
display: flex;
flex-wrap: wrap;
box-shadow: 0upx 0upx 10rpx #d0d0d0;
margin-top: 20upx;
border-radius: 10upx;
}
.category {
width: 20%;
margin-top: 50upx;
display: flex;
flex-wrap: wrap;
}
.category:active{
opacity: 0.8;
}
.category .class_img {
width: 100%;
display: flex;
justify-content: center;
.imgs {
width: 12vw;
height: 12vw;
}
}
.mix{
width: 9vw !important;
height: 9vw !important;
}
.text {
margin-top: 16upx;
width: 100%;
display: flex;
justify-content: center;
font-size: 24upx;
color: #3c3c3c;
font-weight: 500;
}
</style>