xmhjc-applet/pages/index/base/shoppingMalls.vue

<template>
    <view>
        <view class="title" >
            <view class="title_text">商场分类</view>
            <view @click="linkto('commodity')" class="title_more">更多></view>
        </view>

        <view class="box" >
            <u-grid :border="false" col="4" >
                <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" >
                    <view class="box_grid">
                        <u--image width="80rpx" @click="clickItem(listItem)" height="80rpx" :src="listItem.imgUrl" ></u--image>
                        <text class="grid-text">{{listItem.columnIdName}}</text>
                    </view>
                </u-grid-item>
            </u-grid>
            
            <view class="box_two">
                <view v-if="rexiaoList.length>0" class="box_two_item">
                    <view class="bt_item_title">热销心选</view>
                    <view class="flex">
                        <view @click="linkto(item)" v-for="(item,index) in rexiaoList" :key="index">
                            <view class="bt_item_img">
                                <u--image width="130rpx" height="130rpx" :src="item.fileList[0].fileUrl" ></u--image>
                            </view>
                            <view class="bt_item_text">
                                <text style="font-size: 16rpx;">￥</text>{{item.price}}
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="haowuList.length>0" class="box_two_item">
                    <view class="bt_item_title">好物推荐</view>
                    <view class="flex">
                        <view @click="linkto(item)" v-for="(item,index) in haowuList" :key="index">
                            <view class="bt_item_img">
                                 <u--image width="130rpx" height="130rpx" :src="item.fileList[0].fileUrl" ></u--image>
                            </view>
                            <view class="bt_item_text">
                                <text style="font-size: 16rpx;">￥</text>{{item.price}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import {toastFunc} from '@/pages/util/util.js'
import {moduleBySix,productPage} from '@/http/api/common.js'
export default {
data() {
    return {
        list: [],
        rexiaoList:[],
        haowuList:[],
    }
},
async mounted() {
   this.getmoduleBySix()
   this.getProductPage()
},
methods: {
    async getmoduleBySix(){
        //获取模块6
        let res = await moduleBySix()
        this.list = []
        if (res.data.code == 200) {
            this.list = res.data.data.subList.map(v =>{
                return {
                    ...v,
                    imgUrl:v.coverList[0].fileUrl
                }
            })

        }
    },
    async getProductPage(categoryId=''){
        
        // 标签；1=热销心选；2=好物推荐
        let res =  await productPage({
            tag:1,
            pageSize:2,
            pageNum:1,
        })
        let res2 =  await productPage({
            tag:2,
            pageSize:2,
            pageNum:1,
        })
        
        if (res.data.code == 200) {
            this.rexiaoList = res.data.data.rows
            this.haowuList = res2.data.data.rows
        }
    },
    clickItem(item){
        console.log(item);
        // toastFunc('点击了'+item.columnIdName)
        uni.setStorageSync('categoryId', item.columnId)
        uni.setStorageSync('columnIdName', item.columnIdName)
        uni.switchTab({
            url: '/pages/market/commodity',
        });
    },
    linkto(item){
        if (item == 'commodity') {
            uni.switchTab({
                url: '/pages/market/commodity',
            });
        }else{
            uni.navigateTo({
                url: '/pages/market/ProductDetails?id=' + item.id
            });
        }
        
    }
}
}
</script>

<style>
.title{
    display: flex;
    width: 90vw;
    justify-content: space-between;
    margin: 0 auto;
}
.title_text{
    width: 128rpx;
    height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 45rpx;
}
.title_more{
    width: 80rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 40rpx;
}
.box{
    margin: 80rpx 0 20rpx 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #ECF6FF 100%);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;
    width: 95vw;
}
.box_grid{
    margin: 20rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.grid-text{
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    margin-top: 16rpx;
}
.box_two{
    display: flex;
    display: flex;
    justify-content: space-around;
    padding: 40rpx 20rpx;
}
.box_two_item{
    width: 327rpx;
    height: 283rpx;
    background: #FFFFFF;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    opacity: 1;
    /* padding: 10rpx; */
}
.bt_item_title{
    width: 128rpx;
    height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin: 24rpx;
}
.bt_item_img{
    width: 130rpx;
    height: 130rpx;
    background: #EEEEEE;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
}
.bt_item_text{
    width: 130rpx;
    height: 28rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #F6514F;
    text-align: center;
}
</style>