ok商品的分类、列表，todo详情

xuxueyang

2024-07-11 28d72db591108c700e917253935dcc3bf538dca9

ok商品的分类、列表，todo详情

 common/global.scss

@@ -112,3 +112,14 @@
    }
}


.component-filter-container {
    display: flex;

    .flex1 {

        text-align: center;
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
        line-height: 34rpx;

    }

}

 common/self.scss

@@ -489,7 +489,10 @@
.el-icon-arrow-down {
    font-size: 12px;
}

.icon-arrow-down {
    width: 24rpx;
    height: 24rpx;
}
.app-tips {}

.app-tips .app-tip {

 components/button-shop/button-shop.vue

文件已删除

 components/card-list-item/card-list-item.vue

文件已删除

 components/card-list-item/main.scss

文件已删除

 components/footer/main.scss

@@ -117,6 +117,7 @@
    left:0rpx;
    right: 0rpx;
    width: 750rpx;
 
    .footer-item{
        flex: 1;
        border-radius: 50rpx;
@@ -126,27 +127,17 @@
    
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            // color: #A1A6B3;
            color: var(--topicgray);
            color: #A1A6B3;
		    
            flex-direction: column;
            align-items: center;
            text-align: center;
            min-width: 100rpx;
            font-size: 24rpx;
            color: #000000;
            line-height: 34rpx;
            color: #20613D;
			
            min-height: 40rpx;            
            // .footer-bottom-brand-icon{
            //     width: 90rpx;
            //     height:70rpx;
            // }
            // .footer-icon{
            //     width: 50rpx;
            //     height: 50rpx;
            //     margin-top: 20rpx;
            // }
	
 
            .footer-icon.0 {
              width: 37rpx;
              height: 43rpx;
@@ -164,6 +155,9 @@
                height: 38rpx
            }
        }
        .item.cur {
            color: #20613D;
        }
    }
    
}

 main.js

@@ -66,11 +66,6 @@
import footerMsg from '@/components/footer/footer-msg'
Vue.component('footer-msg', footerMsg)

import buttonShop from '@/components/button-shop/button-shop'
Vue.component('common-button-shop', buttonShop)

import cardListItem from '@/components/card-list-item/card-list-item'
Vue.component('card-list-item', cardListItem)


import selectItems from '@/components/common-select-items'

 mixin/mixin.js

@@ -259,13 +259,17 @@
            this.page.current = 1
            await this.getList()
        },
        async getList() {
        async getList(type='get') {
            if (this.listApi) {
                this.$message.showLoading()
                const {
                    data
                } = await this.$http.request('get', this.listApi, {
                } = await this.$http.request(type, this.listApi, {
                    params: {
                        ...this.query,
                        ...this.page
                    },
                    data:{
                        ...this.query,
                        ...this.page
                    }
@@ -292,10 +296,10 @@
            }

        },
        async getMore() {
        async getMore(type='get') {
            if (this.page.total > this.page.current * this.page.size) {
                this.page.current += 1
                await this.getList()
                await this.getList(type)
            }
        },
        backHome() {

 pages.json

@@ -4,7 +4,7 @@
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"

    },

    "pages": [

		


        // #ifdef PUB_CUSTOMER 

        {

            "path": "pages/home/home",

@@ -69,11 +69,10 @@
            }

        },

        {

            "path" : "pages/user/address/address",

            "style" : 
            {

                "navigationBarTitleText" : "收货地址",

                "enablePullDownRefresh" : false

            "path": "pages/user/address/address",

            "style": {

                "navigationBarTitleText": "收货地址",

                "enablePullDownRefresh": false

            }

        }

    ],

@@ -173,6 +172,21 @@
                    "navigationBarTitleText": "购物车",

                    "enablePullDownRefresh": true

                }

            },

            {

                "path": "trade/list",

                "style": {

                    "navigationBarTitleText": "商品列表",

                    "enablePullDownRefresh": true

                }

            },

            {

                "path": "trade/detail",

                "style": {

                    "navigationBarTitleText": "商品详情",
                    "enablePullDownRefresh": false
					
                }

            }



        ]


 pages/home/home.vue

@@ -1,275 +1,277 @@
<template>
    <view class="main-container user-home">
        <view class="bg-top-green"></view>
        <!-- 顶部，可能 -->
        <view class="school" :style="{'padding-top':(StatusBar)+'px'
        ,height:CustomBar+'rpx','line-height':CustomBar+'rpx' }">
            <picker @change="PickerChangeSchool" :value="areaIndex" :range="schools" range-key="name">
                <view class="picker flex">
                    <uni-icons type="location" class="m-r-5" size="18"></uni-icons>
                    <view>
                        {{ areaIndex>=0&&schools[areaIndex].name ? schools[areaIndex].name : '选择位置' }}
                    </view>
                </view>
            </picker>
        </view>
        <view class="search-container m-t-12 flex">
            <view class="flex1 input">
                <u--input placeholder="请输入花名" v-model="search_flow" @confirm="buttonSearchFlow" suffixIcon="search"
                    :suffixIconStyle="{'font-size':'24px','color': '#20613D'}" >
                </u--input>
            </view>
        </view>

        <!-- banner -->
        <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="currentBanner"
            :mode="'dot'" :dots-styles="dotsStyles[0]" field="content">
            <swiper class="swiper-box" @change="changeBanner" :interval="10000" :circular="true" :current="0"
                v-if="banners&&banners.length>0" :autoplay="true">
                <swiper-item v-for="(item, index) in banners" :key="index">
                    <view class="swiper-item" :class="'swiper-item' + index">
                        <image @click="previewImg(item.imageSmall||item.image)" class="home-banner-image"
                            mode="aspectFit" :src="item.imageSmall||item.image">
                        </image>
                    </view>
                </swiper-item>
            </swiper>
            <swiper class="swiper-box" @change="changeBanner" :current="0" v-if="!banners||banners.length==0">
                <swiper-item v-for="(item, index) in 1" :key="index">
                    <view class="swiper-item" :class="'swiper-item' + index">
                        <image class="home-banner-image" mode="scaleToFill"
                            src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/62/62ddac6297104e369aba646be704064dbanner@2x.png">
                        </image>
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
        <!-- tip -->
        <view class="m-t-12" @click="getNoticeMore">
            <uni-notice-bar class="notice-bar" color="#333" background-color="#fff" show-get-more show-icon
                :scrollable="scrollable" :text="currentNotice.title" :key="currentNotice.id" />
            <span v-if="!currentNotice||!currentNotice.id">&nbsp;</span>
        </view>
        <!-- 当前分类 -->
        <home-category></home-category>
        <!-- 特别的几个公告图片 -->
        <home-banner-imgs></home-banner-imgs>
        <!-- 均价情况 -->
        <home-price></home-price>
        <!-- 几个专区 -->
        <home-zones></home-zones>
        <!-- 置顶的花列表 -->
        <home-top-flow></home-top-flow>

        <view style="min-height:200rpx">
        </view>
        <common-footer flg="0"></common-footer>

    </view>
</template>

<script>
    import homePrice from './components/home-price.vue'
    import homeBannerImgs from './components/home-banner-imgs.vue'
    import homeZones from './components/home-zones.vue'
    import homeTopFlow from './components/home-top-flow.vue'
    import homeCategory from './components/home-category.vue'

    export default {
        components: {
            homeCategory,
            homePrice,
            homeBannerImgs,
            homeZones,
            homeTopFlow
        },

        data() {
            return {
                search_flow: '',
                CustomBar: uni.getStorageSync('CustomBar'),
                StatusBar: uni.getStorageSync('StatusBar'),
                // StatusBar:0,
                color: '#fff',
                schools: [],
                areaIndex: -1,
                scrollable: false,

                info: [{
                        colorClass: 'uni-bg-red',
                        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
                        content: '内容 A'
                    },
                    {
                        colorClass: 'uni-bg-green',
                        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
                        content: '内容 B'
                    },
                    {
                        colorClass: 'uni-bg-blue',
                        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
                        content: '内容 C'
                    }
                ],
                dotStyle: [{
                        backgroundColor: 'rgba(0, 0, 0, .3)',
                        border: '1px rgba(0, 0, 0, .3) solid',
                        color: '#fff',
                        selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
                        selectedBorder: '1px rgba(0, 0, 0, .9) solid'
                    },
                    {
                        backgroundColor: 'rgba(255, 90, 95,0.3)',
                        border: '1px rgba(255, 90, 95,0.3) solid',
                        color: '#fff',
                        selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
                        selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
                    },
                    {
                        backgroundColor: 'rgba(83, 200, 249,0.3)',
                        border: '1px rgba(83, 200, 249,0.3) solid',
                        color: '#fff',
                        selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
                        selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
                    }
                ],
                currentBanner: 0,
                banners: [],
                tripList: [],
                tuangouList: [],
                hide_footer: false,
                noticeList: [],
                currentNoticeIndex: 0,
                currentNotice: {

                }
            };
        },
        // onShareAppMessage() {
        // let that = this;
        // var url =
        //     `/pages/home/home?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`; //你的转发页面路径拼接参数
        // return {
        //     title: "校购GO小狗狗",
        //     path: url,
        // }
        // },
        // onShareTimeline() {
        //     let that = this;
        //     var url = "/pages/home/home" //你的分享页面路径
        //     return {
        //         title: '校购GO小狗狗',
        //         path: url,
        //         query: `shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`, //你的参数拼接，注意：不需要加?
        //         // imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg' //你分享的封面
        //     };
        // },

        onLoad() {
            // console.log('home created')
            //这里进行一次初始化即可
            // this.$http.request('get', '/api/school/area/list', {

            // }).then(res => {
            //     if (res.code == 0) {
            //         this.schools = res.data || []
            //     }
            // })
            //获取banner图
            this.$http.request('get', '/api/ua/banner/list', {

            }).then(res => {
                if (res.code == 0) {
                    this.banners = res.data.records || []
                }
            })

            var areaIndex = uni.getStorageSync('areaIndex')
            if (!areaIndex && areaIndex !== 0) {

            } else {
                this.areaIndex = areaIndex
            }



            //公告
            this.$http.request('get', '/api/ua/announcement/list', {
                params: {
                    size: 5,
                    status: 'A'
                }
            }).then(res => {
                if (res.code == 0) {
                    this.noticeList = (res.data && res.data.records || [])
                    console.log('this.noticeList', this.noticeList)
                    if (this.noticeList.length > 0) {
                        this.currentNotice = this.noticeList[0]
                        if (this.currentNotice.title && this.currentNotice.title.length >= 30) {
                            this.scrollable = true
                        } else {
                            this.scrollable = false
                        }
                        let that = this
                        if (this.noticeList.length >= 1) {
                            setInterval(() => {
                                console.log('interval,1')
                                that.currentNoticeIndex += 1
                                that.currentNoticeIndex %= that.noticeList.length
                                that.currentNotice = that.noticeList[that.currentNoticeIndex]
                                that.scrollable = false
                                that.$nextTick(() => {
                                    if (that.currentNotice.title && that.currentNotice.title
                                        .length >= 30) {
                                        that.scrollable = true
                                    } else {
                                        that.scrollable = false
                                    }
                                })

                            }, 8000)
                        }

                    }
                }
            })


        },
        methods: {
            buttonSearchFlow() {
                console.log('buttonSearchFlow')
            },
            pop(status) {
                this.hide_footer = !!status
            },
            changeBanner(e) {
                this.currentBanner = e.detail.current
            },

            getNoticeMore() {
                uni.navigateTo({
                    url: '/pages/notice/list?id=' + this.currentNotice.id
                })
            },
            PickerChangeSchool(e) {
                if (e.detail.value == '-1') {
                    this.$message.showToast('未选择位置')
                    return
                }
                console.log(' this.schools', this.schools, parseInt(e.detail.value), e);


                this.areaIndex = parseInt(e.detail.value)
                uni.setStorageSync('areaId', this.schools[parseInt(e.detail.value)].id);
                uni.setStorageSync('areaIndex', parseInt(e.detail.value));

            },

        }
    }
</script>

<style lang="scss" scoped>
    @import "./home.scss";
<template>

    <view class="main-container user-home">

        <view class="bg-top-green"></view>

        <!-- 顶部，可能 -->

        <view class="school" :style="{'padding-top':(StatusBar)+'px'

        ,height:CustomBar+'rpx','line-height':CustomBar+'rpx' }">

            <picker @change="PickerChangeSchool" :value="areaIndex" :range="schools" range-key="name">

                <view class="picker flex">

                    <uni-icons type="location" class="m-r-5" size="18"></uni-icons>

                    <view>

                        {{ areaIndex>=0&&schools[areaIndex].name ? schools[areaIndex].name : '选择位置' }}

                    </view>

                </view>

            </picker>

        </view>

        <view class="search-container m-t-12 flex">

            <view class="flex1 input">

                <u-input placeholder="请输入花名" v-model="search_flow">

                    <template slot="suffix">

                        <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>

                    </template>

                </u-input>

            </view>

        </view>



        <!-- banner -->

        <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="currentBanner"

            :mode="'dot'" :dots-styles="dotsStyles[0]" field="content">

            <swiper class="swiper-box" @change="changeBanner" :interval="10000" :circular="true" :current="0"

                v-if="banners&&banners.length>0" :autoplay="true">

                <swiper-item v-for="(item, index) in banners" :key="index">

                    <view class="swiper-item" :class="'swiper-item' + index">

                        <image @click="previewImg(item.imageSmall||item.image)" class="home-banner-image"

                            mode="aspectFit" :src="item.imageSmall||item.image">

                        </image>

                    </view>

                </swiper-item>

            </swiper>

            <swiper class="swiper-box" @change="changeBanner" :current="0" v-if="!banners||banners.length==0">

                <swiper-item v-for="(item, index) in 1" :key="index">

                    <view class="swiper-item" :class="'swiper-item' + index">

                        <image class="home-banner-image" mode="scaleToFill"

                            src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/62/62ddac6297104e369aba646be704064dbanner@2x.png">

                        </image>

                    </view>

                </swiper-item>

            </swiper>

        </uni-swiper-dot>

        <!-- tip -->

        <view class="m-t-12" @click="getNoticeMore">

            <uni-notice-bar class="notice-bar" color="#333" background-color="#fff" show-get-more show-icon

                :scrollable="scrollable" :text="currentNotice.title" :key="currentNotice.id" />

            <span v-if="!currentNotice||!currentNotice.id">&nbsp;</span>

        </view>

        <!-- 当前分类 -->

        <home-category></home-category>

        <!-- 特别的几个公告图片 -->

        <home-banner-imgs></home-banner-imgs>

        <!-- 均价情况 -->

        <home-price></home-price>

        <!-- 几个专区 -->

        <home-zones></home-zones>

        <!-- 置顶的花列表 -->

        <home-top-flow></home-top-flow>



        <view style="min-height:200rpx">

        </view>

        <common-footer flg="0"></common-footer>



    </view>

</template>



<script>

    import homePrice from './components/home-price.vue'

    import homeBannerImgs from './components/home-banner-imgs.vue'

    import homeZones from './components/home-zones.vue'

    import homeTopFlow from './components/home-top-flow.vue'

    import homeCategory from './components/home-category.vue'



    export default {

        components: {

            homeCategory,

            homePrice,

            homeBannerImgs,

            homeZones,

            homeTopFlow

        },



        data() {

            return {

                search_flow: '',

                CustomBar: uni.getStorageSync('CustomBar'),

                StatusBar: uni.getStorageSync('StatusBar'),

                // StatusBar:0,

                color: '#fff',

                schools: [],

                areaIndex: -1,

                scrollable: false,



                info: [{

                        colorClass: 'uni-bg-red',

                        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',

                        content: '内容 A'

                    },

                    {

                        colorClass: 'uni-bg-green',

                        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',

                        content: '内容 B'

                    },

                    {

                        colorClass: 'uni-bg-blue',

                        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',

                        content: '内容 C'

                    }

                ],

                dotStyle: [{

                        backgroundColor: 'rgba(0, 0, 0, .3)',

                        border: '1px rgba(0, 0, 0, .3) solid',

                        color: '#fff',

                        selectedBackgroundColor: 'rgba(0, 0, 0, .9)',

                        selectedBorder: '1px rgba(0, 0, 0, .9) solid'

                    },

                    {

                        backgroundColor: 'rgba(255, 90, 95,0.3)',

                        border: '1px rgba(255, 90, 95,0.3) solid',

                        color: '#fff',

                        selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',

                        selectedBorder: '1px rgba(255, 90, 95,0.9) solid'

                    },

                    {

                        backgroundColor: 'rgba(83, 200, 249,0.3)',

                        border: '1px rgba(83, 200, 249,0.3) solid',

                        color: '#fff',

                        selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',

                        selectedBorder: '1px rgba(83, 200, 249,0.9) solid'

                    }

                ],

                currentBanner: 0,

                banners: [],

                tripList: [],

                tuangouList: [],

                hide_footer: false,

                noticeList: [],

                currentNoticeIndex: 0,

                currentNotice: {



                }

            };

        },

        // onShareAppMessage() {

        // let that = this;

        // var url =

        //     `/pages/home/home?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`; //你的转发页面路径拼接参数

        // return {

        //     title: "校购GO小狗狗",

        //     path: url,

        // }

        // },

        // onShareTimeline() {

        //     let that = this;

        //     var url = "/pages/home/home" //你的分享页面路径

        //     return {

        //         title: '校购GO小狗狗',

        //         path: url,

        //         query: `shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`, //你的参数拼接，注意：不需要加?

        //         // imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg' //你分享的封面

        //     };

        // },



        onLoad() {

            // console.log('home created')

            //这里进行一次初始化即可

            // this.$http.request('get', '/api/school/area/list', {



            // }).then(res => {

            //     if (res.code == 0) {

            //         this.schools = res.data || []

            //     }

            // })

            //获取banner图

            this.$http.request('get', '/api/ua/banner/list', {



            }).then(res => {

                if (res.code == 0) {

                    this.banners = res.data.records || []

                }

            })



            var areaIndex = uni.getStorageSync('areaIndex')

            if (!areaIndex && areaIndex !== 0) {



            } else {

                this.areaIndex = areaIndex

            }







            //公告

            this.$http.request('get', '/api/ua/announcement/list', {

                params: {

                    size: 5,

                    status: 'A'

                }

            }).then(res => {

                if (res.code == 0) {

                    this.noticeList = (res.data && res.data.records || [])

                    console.log('this.noticeList', this.noticeList)

                    if (this.noticeList.length > 0) {

                        this.currentNotice = this.noticeList[0]

                        if (this.currentNotice.title && this.currentNotice.title.length >= 30) {

                            this.scrollable = true

                        } else {

                            this.scrollable = false

                        }

                        let that = this

                        if (this.noticeList.length >= 1) {

                            setInterval(() => {

                                console.log('interval,1')

                                that.currentNoticeIndex += 1

                                that.currentNoticeIndex %= that.noticeList.length

                                that.currentNotice = that.noticeList[that.currentNoticeIndex]

                                that.scrollable = false

                                that.$nextTick(() => {

                                    if (that.currentNotice.title && that.currentNotice.title

                                        .length >= 30) {

                                        that.scrollable = true

                                    } else {

                                        that.scrollable = false

                                    }

                                })



                            }, 8000)

                        }



                    }

                }

            })





        },

        methods: {

            buttonSearchFlow() {

                console.log('buttonSearchFlow')

            },

            pop(status) {

                this.hide_footer = !!status

            },

            changeBanner(e) {

                this.currentBanner = e.detail.current

            },



            getNoticeMore() {

                uni.navigateTo({

                    url: '/pages/notice/list?id=' + this.currentNotice.id

                })

            },

            PickerChangeSchool(e) {

                if (e.detail.value == '-1') {

                    this.$message.showToast('未选择位置')

                    return

                }

                console.log(' this.schools', this.schools, parseInt(e.detail.value), e);





                this.areaIndex = parseInt(e.detail.value)

                uni.setStorageSync('areaId', this.schools[parseInt(e.detail.value)].id);

                uni.setStorageSync('areaIndex', parseInt(e.detail.value));



            },



        }

    }

</script>



<style lang="scss" scoped>

    @import "./home.scss";

</style>

 static/common/icon-arrow-down.png

 static/common/icon-kf.png

 static/images/customer/gwc.png

 sub_pages/customer/detail.vue

对比新文件
@@ -0,0 +1,22 @@
<template>
    <view>
		
    </view>
</template>

<script>
    export default {
        data() {
            return {
				
            }
        },
        methods: {
			
        }
    }
</script>

<style>

</style>

 sub_pages/customer/trade/list.vue

对比新文件
@@ -0,0 +1,354 @@
<template>

    <!-- 列表页面 -->

    <view class="trade-list">

        <view class="category-detail flex">

            <view class="flex1 info">

                <view class="title flex">

                    <view>牛油果泡泡</view>
                    <view>
                        <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>
						
                    </view>

                </view>

                <view class="desc">

                    规格：10支/扎

                </view>

                <view class="desc">

                    估重：1.3kg/扎

                </view>

                <view class="desc">

                    包袋：棉袋

                </view>

            </view>

            <view class="info-price">

                <view class="title">当日均价</view>

                <view class="price">19.66</view>

                <view class="flex desc">

                    <view class="m-l-a m-r-5">+0.76</view>

                    <view class="m-r-a m-l-5">+4.02%</view>

                </view>

            </view>

        </view>

        <view class="" style="min-height: calc(100vh - 260rpx);">

            <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>

            <view v-else>

                <!-- 查询条件 -->

                <view class="component-filter-container">

                    <view class="flex1">

                        等级<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>

                    </view>

                    <view class="flex1">

                        等级<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>

                    </view>

                    <view class="flex1">

                        好卖家<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>

                    </view>

                    <view class="flex1">

                        颜色<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>

                    </view>

                    <view class="flex1">

                        筛选<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>

                    </view>

                </view>

            </view>

            <view class="item flex" v-for="(item,index) of list" :key="index"
             @click="toDetail(item)">

                <view class="img">

                    <image class="img img100"

                        src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/ff/fff3027bd0a146478fd1f0aae816a028%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240710224139.png">

                    </image>

                    <view class="level">

                        A级

                    </view>

                </view>



                <view class="m-l-12 info-container flex1">

                    <view class="title">

                        橙色芭比

                        <view class="price">

                            ￥6.60/扎

                        </view>

                    </view>

                    <view class="shop-name">

                        牛油果泡泡·白色

                    </view>

                    <view class="other-info flex">

                        <view class="m-r-15">

                            已售:7

                        </view>

                        <view class="m-r-15">

                            剩余:13

                        </view>

                        <view class="m-r-15">

                            1支/扎

                        </view>

                    </view>

                    <view class="bottom-buttons  flex">



                        <view class="icons flex">

                            <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"

                                @click.stop="mulnum(item)"></uni-icons>

                            <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>

                            <uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"

                                @click.stop="addnum(item)"></uni-icons>

                        </view>

                    </view>

                </view>

            </view>



            <view class="icon-shop"  v-if="list&&list.length>0">
                <!-- 购物图标 -->
                <!-- 如果有购买的东西，就要附带数字了 -->
                <view v-if="shoptotal>0" class="number">
                    {{shoptotal}}
                </view>
            </view>

        </view>



        <!-- 判断是否到底了，自动吧 -->

        <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>

    </view>

</template>



<script>

    export default {

        data() {

            return {

                query: {

                    category: '',

                },
                shoptotal:0,
                list:[{},{},{}]

            }

        },

        async onLoad(options) {

            // this.list = [{},{}]

            console.log('options', options)

            this.query.category = options.categoryId || ''

            this.listApi = '/api/customer/flower/list'

            // await this.getList('post')

            // this.

        },

        onReachBottom() {

            this.page.current += 1

            this.getMore('post')

        },

        async onPullDownRefresh() {

            this.page.current = 1

            await this.getList('post')

            uni.stopPullDownRefresh()

        },

        methods: {

            toDetail(item) {

                uni.navigateTo({

                    url: `/sub_pages/customer/trade/detail?id=${item.id}`

                })

            },
            mulnum(item) {
                if (item.shopnum > 0) {
                    item.shopnum -= 1
                }
                this.shoptotal -= 1
                this.$forceUpdate()
			
            },
            addnum(item) {
                if (item.shopnum) {
                    item.shopnum += 1
                } else {
                    item.shopnum = 1
                }
                this.shoptotal += 1
                this.$forceUpdate()
            },

        }

    }

</script>



<style lang="scss">

    .trade-list {

        padding: 24rpx 30rpx;



        .category-detail {

            padding: 22rpx 38rpx;

            margin-bottom: 10rpx;

            background-color: #E1F0E7;

            border-radius: 8rpx;



            .info {

                .title {

                    font-weight: 600;

                    font-size: 36rpx;

                    color: #000000;

                    line-height: 50rpx;

                }



                .icon-kf {

                    width: 44rpx;

                    height: 44rpx;

                }



                .desc {

                    font-weight: 400;

                    font-size: 24rpx;

                    color: #666666;

                    line-height: 34rpx;

                    margin-top: 8rpx;

                }

            }



            .info-price {

                padding: 22rpx;

                text-align: center;

                background: #FFFFFF;

                border-radius: 8rpx;

                min-width: 260rpx;

                .title {

                    font-weight: 400;

                    font-size: 24rpx;

                    color: #000000;

                    line-height: 34rpx;

                }



                .price {

                    font-weight: 600;

                    font-size: 32rpx;

                    color: #BF0000;

                    line-height: 44rpx;
                    margin-top: 12rpx;

                }



                .desc {

                    font-weight: 400;

                    font-size: 24rpx;

                    color: #666666;

                    line-height: 34rpx;
                    margin-top: 12rpx;

                }

            }

        }



        .item {

            margin-top: 20rpx;

            background: #FFFFFF;

            border-radius: 8rpx;

            padding: 10rpx;



            .info-container {

                position: relative;



                .other-info {

                    margin-top: 6rpx;

                    font-size: 24rpx;

                    color: #666666;

                    line-height: 34rpx;

                    text-align: left;

                }



                .shop-name {

                    margin-top: 14rpx;

                    font-size: 24rpx;

                    color: #666666;

                    line-height: 34rpx;

                }



                .bottom-buttons {

                    // width: 400rpx;

                    position: absolute;

                    bottom: 0rpx;



                    left: 0;

                    right: 0;



                    .icons {

                        margin-left: auto;

                        margin-right: 0rpx;

                        margin-top: -10rpx;



                        .curnums {

                            line-height: 60rpx;
                            margin-left: 12rpx;
                            margin-right: 12rpx;

                        }

                    }

                }



                .title {

                    font-weight: 600;

                    font-size: 32rpx;

                    color: #000000;

                    line-height: 44rpx;

                    margin-top: 8rpx;

                    position: relative;



                    .price {

                        position: absolute;

                        font-weight: 400;

                        font-size: 28rpx;

                        color: #CF0000;

                        line-height: 40rpx;

                        top: 0;

                        right: 0;

                    }

                }



            }



            .img {

                width: 206rpx;

                height: 206rpx;

                border-radius: 8rpx;

                position: relative;



                .level {

                    position: absolute;

                    width: 66rpx;

                    height: 44rpx;

                    background: #20613D;

                    left: 0;

                    top: 0;

                    border-top-left-radius: 8rpx;

                    border-bottom-right-radius: 8rpx;

                    color: #FFFFFF;

                    line-height: 44rpx;

                    font-size: 24rpx;

                    text-align: center;

                }



            }





        }

	
    .icon-shop {
        position: absolute;
        position: fixed;
	
        background-image: url('../../../static/images/customer/gwc.png');
        width: 140rpx;
        height: 140rpx;
        // box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.16);
        border-radius: 50%;
        right: 40rpx;
        bottom: 300rpx;
        background-size: 100% 100%;
	
        .number {
            width: 30rpx;
            height: 30rpx;
            background: #F20000;
            line-height: 30rpx;
            text-align: center;
            position: absolute;
            right: 14rpx;
            top: 14rpx;
            color: #FFFFFF;
            border-radius: 50%;
            font-size: 24rpx;
        }
	
    }
	
    }

</style>

 sub_pages/customer/trade/trade.vue

@@ -1,613 +1,329 @@
<template>
    <view class="container-canteen" style="min-height: calc(100vh - 20rpx );">

        <view class="canteen-items" style="min-height: calc(100vh - 360rpx);">
            <view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;">
                &nbsp;
            </view>
            <no-data v-if="(!list||list.length==0)&&true" style="width: 100%;margin-top: 220rpx;"></no-data>
            <view class="" style="display: flex;flex-wrap: inherit;" v-else>
                <view class="type-list">
                    <view v-for="(item,index) of types" @click="changeType(item)"
                        :class="[query.typeId==item.id?'current':'']" :key="index" class="p10 flex type-item">
                        {{item.name || '-'}}
                    </view>
                </view>
                <view class="canteen-item-container">
                    <view v-for="(item,index) of listFilter" :key="item.id" class="p10 canteen-item list"
                        style="display: flex;flex-wrap: inherit;">
                        <view class="m-r-10">
                            <image :src="item.cover" mode="scaleToFill" class="cover" @click="previewImg(item.cover)">
                            </image>
                        </view>
                        <view class="cateen_infos list">
                            <view class="title">{{item.name}}</view>
                            <view class="desc">月售:{{item.monthSale || '0'}}</view>
                            <view class="flex bottom-buttons flex">
                                <view class="price flex">
                                    <view class="icon">￥</view>
                                    <view class='num'>{{item.price || '-'}}</view>
                                </view>
                                <view class="icons flex">
                                    <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
                                        @click="mulnum(item)"></uni-icons>
                                    <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>
                                    <uni-icons type="plus-filled" size="32" @click="addnum(item)"></uni-icons>
                                </view>
                            </view>
                        </view>
                        <view style="padding-bottom:100rpx">
                        </view>
                    </view>

                    <footer-msg v-if="query.block&&query.schoolArea"
                        :more="page.total>0&&page.total>page.current*page.size"></footer-msg>

                </view>
            </view>

        </view>



        <view style="min-height:200rpx">
        </view>
        <common-footer flg="1"></common-footer>

    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        data() {
            return {
                list: [],
                showpop: false,
                query: {
                    name: '',
                    // status:'',
                    schoolArea: '',
                    schoolAreaStr: '',
                    block: '',
                    blockStr: '',
                    typeId: '',
                },
                types: [{
                    name: '全部',
                    id: ''
                }],
                schools: [],
                schoolIndex: -1,
                blockIndex: -1,
                blocks: [],
                shoptotal: 0,
                cal: 0,
            }
        },
        async onLoad() {
            // this.list = [{
            //     'shopnum': 0
            // }, {
            //     'shopnum': 1
            // }]

            //加载分类
            this.$http.request('get', '/api/canteen/goods/type/list', {
                params: {
                    size: 100
                }
            }).then(async res => {
                if (res.code == 0) {
                    this.types = res.data && res.data.records || []
                    this.types.unshift({
                        name: '全部',
                        id: ''
                    });

                }
            })

            this.listApi = '/api/canteen/customer/goods/list'

            // this.getList()
            //加载校区、楼栋
            this.$http.request('get', '/api/school/area/list', {

            }).then(async res => {
                if (res.code == 0) {
                    this.schools = res.data || []
                    // this.schools = [{
                    //     'name': '全部',
                    //     'id': '',
                    // }]
                    // for (var item of arr) {
                    //     this.schools.push(item)
                    // }
                }
                console.log('schools', this.schools)
                var schoolIndex = uni.getStorageSync('schoolIndex')
                if (!schoolIndex && schoolIndex !== 0) {
                    // await this.getList()
                    // this.list.forEach(item => {
                    //     if (!item.shopnum) {
                    //         item.shopnum = 0
                    //     }
                    // })
                } else {
                    this.schoolIndex = schoolIndex
                    if (this.schoolIndex >= 0) {
                        this.PickerChangeSchool({
                            detail: {
                                value: this.schoolIndex
                            }
                        })
                        // await this.getList()
                        // this.list.forEach(item => {
                        //     if (!item.shopnum) {
                        //         item.shopnum = 0
                        //     }
                        // })
                    }
                }

            })


        },
        methods: {
            changeType(item) {
                this.query.typeId = item.id || ''
            },
            async PickerChangeSchool(e) {
                if (e.detail.value == '-1') {
                    this.$message.showToast('未选择校区')
                    return
                }
                this.schoolIndex = parseInt(e.detail.value)
                this.query.schoolArea = this.schools[this.schoolIndex].id
                this.blockIndex = -1

                this.$message.showLoading()
                var {
                    data
                } = await this.$http.request('get', '/api/school/block/list', {
                    params: {
                        schoolArea: this.query.schoolArea,
                        size: 200
                    }
                })

                this.blocks = data && data.records || []
                // var arr = data.records || []
                // this.blocks = [{
                //     'name': '全部',
                //     'id': '',
                // }]
                // for (var item of arr) {
                //     this.blocks.push(item)
                // }
                this.$message.hideLoading()
                if (this.blocks.length >= 1) {
                    this.query.block = this.blocks[0].id
                    this.query.blockStr = this.blocks[0].name
                    this.page.current = 1
                    this.blockIndex = 0
                    this.list = []
                    this.getList()
                } else {
                    this.page.current = 1
                    this.list = []
                }



            },
            async PickerChangeBlock(e) {
                if (e.detail.value == '-1') {
                    this.$message.showToast('未选择楼栋')
                    return
                }
                this.blockIndex = parseInt(e.detail.value)
                this.query.block = this.blocks[this.blockIndex].id
                this.page.current = 1
                // this.list = []
                this.list = []
                // this.getList()
                await this.getList()
                this.list.forEach(item => {
                    if (!item.shopnum) {
                        item.shopnum = 0
                    }
                })

            },
            mulnum(item) {
                if (item.shopnum > 0) {
                    item.shopnum -= 1
                }
                this.shoptotal -= 1
                this.cal += 1
                this.$forceUpdate()

            },
            addnum(item) {
                // console.log('addnum', item)
                if (item.shopnum) {
                    item.shopnum += 1
                } else {
                    item.shopnum = 1
                }
                this.shoptotal += 1
                this.cal += 1
                this.$forceUpdate()
            },
            openShopDetail() {
                // this.showpop = false
                // this.$forceUpdate()
                this.cal += 1
                this.$refs.popup_shop_detail.open()
                this.$nextTick(() => {
                    this.$refs.addressselect && this.$refs.addressselect.init()
                })
            },
            closeShopDetail() {
                // this.showpop = true
                this.$refs.popup_shop_detail.close()
            },
            async submitGood() {
                var values = []
                for (var item of this.list) {
                    if (item.shopnum > 0) {
                        values.push({
                            id: item.id,
                            num: item.shopnum
                        })
                    }
                }
                //购买
                if (!this.address.id) {
                    this.$message.showToast('请先选择收获地址')
                    return
                }

                await this.$message.confirm('确定购买吗?')
                this.$message.showLoading()
                const {
                    code,
                    data
                } = await this.$http.request('post', '/api/canteen/customer/order', {
                    data: {
                        customerAddress: (this.address.schoolAreaStr || '') + (this.address.blockStr || '') + (
                            this
                            .address.room || '') + (this.address.address || ''),
                        customerTel: this.address.tel,
                        customer: this.address.name,
                        goodsList: values, //规格
                    }
                })

                this.$message.hideLoading()
                if (code == 0) {

                    this.list.forEach(item => {
                        item.shopnum = 0
                    })
                    this.shoptotal = 0
                    this.cal += 1
                    this.$refs.popup_shop_detail.close()
                    this.$forceUpdate()

                    //todo，预支付
                    //深夜食堂的逻辑不太一样
                    if (true) {
                        const orderInfo = await this.$http.request('get', '/api/canteen/customer/payment/' + data
                            .orderId, {})
                        //支付准备
                        var info = orderInfo.data
                        let that = this
                        wx.requestPayment({
                            ...info,
                            success(res) {
                                console.log('pay success', res)
                                uni.navigateTo({
                                    url: '/pages/canteen/canteen-success/canteen-success'
                                })
                            },
                            fail(err) {
                                console.error('pay fail', err)
                                that.$message.showToast('支付失败')
                            }
                        })
                    } else {
                        uni.navigateTo({
                            url: '/pages/canteen/canteen-success/canteen-success'
                        })
                    }


                }
            }
        },
        computed: {
            ...mapState({
                address: state => {
                    return state.defaultaddress || {}
                },
            }),
            selectprices() {
                var arr = 0
                for (var item of this.list) {
                    if (item.shopnum > 0) {
                        // arr.push(item)
                        arr += (item.price >= 0 ? item.price : 0) * item.shopnum
                    }
                }
                if (this.cal > 0) {
                    return arr

                }
                return 0
            },
            selectgoods() {
                var arr = []
                for (var item of this.list) {
                    if (item.shopnum > 0) {
                        arr.push(item)
                    }
                }
                if (this.cal > 0) {
                    return arr

                }
                return arr

            },
            listFilter() {
                if (this.query.typeId) {
                    var arr = []
                    if (this.list && this.list.length > 0) {
                        for (var item of this.list) {
                            if (item.typeId === this.query.typeId || item.type === this.query.typeId) {
                                arr.push(item)
                            }
                        }
                    }
                    return arr
                } else {
                    return this.list
                }

            },
            // shoptotal() {
            //     var a = 0
            //     for (var item of this.list) {
            //         a += item.shopnum || 0
            //     }
            //     console.log('shoptotal',a,this.list)
            //     return a
            // }
        }
    }
</script>

<style lang="scss" scoped>
    .container-canteen {
        background-color: #FFFFFF;

        .type-list {
            max-width: 178rpx;
            width: 178rpx;
            min-width: 178rpx;
            background: #EEF7F5;
            border-radius: 8rpx;
            min-height: calc(100vh - 300rpx);
            max-height: calc(100vh - 300rpx);
            overflow-y: scroll;
            margin-left: 30rpx;

            .type-item {
                text-align: center;
                font-weight: 400;
                font-size: 28rpx;
                color: #000000;
                line-height: 88rpx;
                // padding-left: 30rpx;
                // padding-right: 30rpx;
            }

            .type-item.current {
                font-weight: 600;
                font-size: 28rpx;
                color: #04BA97;
            }
        }

        .title-before-blue.green {
            padding-left: 30rpx;
            padding-bottom: 0rpx;
        }

        .title-before-blue:before {
            color: #04BA97;
            font-weight: 600;
            min-width: 14rpx;
            background: #04BA97;
            border-radius: 8rpx;
            display: inline-block;
        }

        .popup_shop_detail {
            background: #FFFFFF;
            // padding: 30rpx 0rpx;
            padding-bottom: 30rpx;

            .footer-shop {
                margin: 0 auto;
                margin-top: 46rpx;
            }

            .common-address-select {
                margin-left: 20rpx;
                margin-right: 20rpx;
            }

            .close-parent {
                margin-right: 20rpx;
            }

            .canteen-items {
                .canteen-item {
                    margin-left: 20rpx;
                    margin-right: 0rpx;

                    .cateen_infos {
                        width: 440rpx;

                    }

                    .cateen_infos.list {
                        max-width: 30 0rpx;
                        min-width: 200rpx;
                    }
                }
            }
        }

        .canteen-items {
            // margin-left: 30rpx;

            .canteen-item {
                margin-left: 30rpx;
                margin-right: 30rpx;
                // width: 690rpx;
                // max-width: 690rpx;
                height: 206rpx;
                background: #FFFFFF;
                border-radius: 16rpx;
                display: flex;
                margin-bottom: 24rpx;

                .cover {
                    width: 202rpx;
                    height: 202rpx;
                }

                .title {
                    font-weight: 600;
                    font-size: 32rpx;
                    color: #000000;
                    line-height: 44rpx;
                }

                .desc {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #666666;
                    line-height: 34rpx;
                }

                .price {

                    font-size: 24rpx;

                    .icon {
                        line-height: 60rpx;
                    }

                    .num {
                        font-weight: 600;
                        font-size: 36rpx;
                        color: #000000;
                        // line-height: 50rpx;
                    }
                }

                .cateen_infos {
                    width: 400rpx;
                    position: relative;
                }

                .cateen_infos.list {
                    max-width: 300rpx;
                    min-width: 200rpx;

                }

                .bottom-buttons {
                    // width: 400rpx;
                    position: absolute;
                    bottom: 0rpx;

                    left: 0;
                    right: 0;

                    .icons {
                        margin-left: auto;
                        margin-right: 0;

                        .curnums {
                            line-height: 60rpx;
                        }
                    }
                }
            }

            .canteen-item-container {
                width: 100%;
                min-height: 300rpx;
                max-height: calc(100vh - 300rpx);
                overflow-y: scroll;
            }

            .canteen-item.list {
                margin-right: 0rpx;
                flex: 1;
                margin-bottom: 0rpx;

                .cover {
                    width: 158rpx;
                    height: 158rpx;
                }
            }
        }

        .canteen-footer-shop {
            position: absolute;
            position: fixed;
            left: 30rpx;
            bottom: 30rpx;
        }

        .area-select {
            .area {

                margin-right: 0rpx;

                .t {
                    font-weight: 400;
                    font-size: 32rpx;
                    color: #000000;
                    line-height: 44rpx;
                }

                .i {}
            }

            .area-1 {
                margin-left: auto;
            }

            .area-2 {
                margin-left: 84rpx;
            }
        }

        .canteen-banner {
            width: 750rpx;
            min-height: 360rpx;
        }
    }
<template>

    <view class="container-trade" style="min-height: calc(100vh - 20rpx );">

        <view class="search-container m-t-12 flex" v-if="!(!list||list.length==0)&&true">

            <view class="flex1 input">

                <u-input placeholder="请输入分类名称" v-model="query.name">

                    <template slot="suffix">

                        <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>

                    </template>

                </u-input>

            </view>

        </view>

        <view class="canteen-items" style="min-height: calc(100vh - 160rpx);">

            <view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;">

                &nbsp;

            </view>

            <no-data v-if="(!list||list.length==0)&&true" style="width: 100%;margin-top: 220rpx;"></no-data>

            <view class="" style="display: flex;flex-wrap: inherit;" v-else>

                <view class="type-list">

                    <view v-for="(item,index) of list" @click="changeType(item)"

                        :class="[query.categoryId==item.id?'current':'']" :key="index" class="p10 flex type-item">

                        {{item.name || '-'}}

                    </view>

                </view>

                <view class="canteen-item-container">

                    <view class="component-filter-container" style="padding-top: 12rpx;">

                        <view class="flex1">

                            销量

                        </view>

                        <view class="flex1">

                            颜色<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>

                        </view>

                        <view class="flex1">

                            筛选<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>

                        </view>

                    </view>

                    <u-divider></u-divider>

                    <view class="flex">

                        <view v-for="(item,index) of listFilter" :key="item.id" class="canteen-item list"

                            @click.stop="toDetailList(item)">

                            <view class="m-r-10">

                                <image :src="item.imageUrl" mode="scaleToFill" class="cover"

                                    @click.stop="previewImg(item.imageUrl)">

                                </image>

                            </view>

                            <view class="cateen_infos list">

                                <view class="title">{{item.name}}</view>

                                <view class="price">￥29.01-30.01</view>



                                <view class="desc">在售14410扎</view>

                                <!--                                 <view class="icons flex">

                                        <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"

                                            @click="mulnum(item)"></uni-icons>

                                        <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>

                                        <uni-icons type="plus-filled" size="32" @click="addnum(item)"></uni-icons>

                                    </view> -->

                            </view>

                            <view style="padding-bottom:100rpx">

                            </view>

                        </view>



                    </view>

                    <footer-msg v-if="query.block&&query.schoolArea"

                        :more="page.total>0&&page.total>page.current*page.size"></footer-msg>



                </view>

            </view>



        </view>







        <view style="min-height:200rpx">

        </view>

        <common-footer flg="1"></common-footer>



    </view>

</template>



<script>

    import {

        mapState

    } from 'vuex'

    export default {

        data() {

            return {

                list: [],

                showpop: false,

                query: {

                    name: '',

                    categoryId: '',

                },



            }

        },

        onPullDownRefresh() {

            this.$http.request('get', '/api/customer/flower/category/tree', {}).then(res => {

                var data = res.data

                this.list = data || []

                if (this.list.length > 0) {

                    this.query.categoryId = this.list[0].id || ''

                }

            }).finally(() => {

                uni.stopPullDownRefresh()

            })

        },

        async onLoad() {



            //加载分类

            this.$http.request('get', '/api/customer/flower/category/tree', {}).then(res => {

                var data = res.data

                this.list = data || []

                if (this.list.length > 0) {

                    this.query.categoryId = this.list[0].id || ''

                }

            })

        },

        methods: {

            buttonSearchFlow() {

                //根据名称查询

                this.$message.showLoading()

                this.$http.request('get', '/api/customer/flower/category/tree', {

                    params: {

                        name: this.query.name || ''

                    }

                }).then(res => {

                    var data = res.data

                    this.list = data || []

                    if (this.list.length > 0) {

                        this.query.categoryId = this.list[0].id || ''

                    } else {

                        this.query.categoryId = ''

                    }

                }).finally(() => {

                    this.$message.hideLoading()

                })

            },

            toDetailList(item) {

                //去商品列表页面

                uni.navigateTo({

                    url: `/sub_pages/customer/trade/list?categoryId=${item.id}`

                })

            },

            changeType(item) {

                this.query.categoryId = item.id || ''

            },





            async submitGood() {

                var values = []

                for (var item of this.list) {

                    if (item.shopnum > 0) {

                        values.push({

                            id: item.id,

                            num: item.shopnum

                        })

                    }

                }

            }

        },

        computed: {

            ...mapState({

                address: state => {

                    return state.defaultaddress || {}

                },

            }),

            listFilter() {

                if (this.query.categoryId) {

                    var arr = []

                    if (this.list && this.list.length > 0) {

                        for (var item of this.list) {

                            if (item.id === this.query.categoryId || item.id === this.query.categoryId) {

                                // arr.push(item)

                                return item.children || []

                            }

                        }

                    }

                    return arr

                } else {

                    return []

                }



            },

        }

    }

</script>



<style lang="scss" scoped>

    .container-trade {

        background-color: #FFFFFF;

        padding-top: 20rpx;



        .search-container {

            margin: 0rpx 30rpx 20rpx 30rpx;

        }



	


        .type-list {

            max-width: 178rpx;

            width: 178rpx;

            min-width: 178rpx;

            background: #EEF7F5;

            border-radius: 8rpx;

            min-height: calc(100vh - 300rpx);

            max-height: calc(100vh - 300rpx);

            overflow-y: scroll;

            margin-right: 16rpx;



            .type-item {

                text-align: center;

                font-weight: 400;

                font-size: 28rpx;

                color: #000000;

                line-height: 88rpx;

                // padding-left: 30rpx;

                // padding-right: 30rpx;

            }



            .type-item.current {

                font-weight: 600;

                font-size: 28rpx;

                color: #04BA97;

            }

        }



        .title-before-blue.green {

            padding-left: 30rpx;

            padding-bottom: 0rpx;

        }



        .title-before-blue:before {

            color: #04BA97;

            font-weight: 600;

            min-width: 14rpx;

            background: #04BA97;

            border-radius: 8rpx;

            display: inline-block;

        }





        .canteen-items {

            // margin-left: 30rpx;



            .canteen-item {

                margin: 0 auto;

                width: 164rpx;

                // width: 690rpx;

                // max-width: 690rpx;

                height: 266rpx;

                background: #FFFFFF;

                margin-bottom: 44rpx;

                max-width: 164rpx;



                .cover {

                    width: 164rpx;

                    height: 164rpx;

                    background-size: 100% 100%;

                    border-radius: 8rpx;

                    border: 2rpx solid #f8f8f8;

                }



                .title {

                    font-weight: 500;

                    font-size: 28rpx;

                    color: #000000;

                    line-height: 40rpx;

                }



                .desc {

                    margin-top: 8rpx;

                    font-weight: 400;

                    font-size: 24rpx;

                    color: #6E9F66;

                    line-height: 34rpx;

                    height: 34rpx;

                    background-color: rgba(202, 229, 214, 0.57);

                    border-radius: 4rpx;

                    text-align: center;



                }



                .price {

                    font-weight: 400;

                    font-size: 24rpx;

                    color: #CF0000;

                    line-height: 34rpx;

                    text-align: center;

                }











            }



            .canteen-item-container {

                width: 100%;

                min-height: 300rpx;

                max-height: calc(100vh - 200rpx);

                overflow-y: scroll;

            }



            .canteen-item:nth-child(3n+1) {

                margin-left: 0rpx;

                margin-right: 15rpx;

            }



            .canteen-item:nth-child(3n+2) {

                margin-left: 15rpx;

                margin-right: 15rpx;

            }



            .canteen-item:nth-child(3n+3) {

                margin-left: 15rpx;

                margin-right: 0rpx;

            }

        }



        .canteen-footer-shop {

            position: absolute;

            position: fixed;

            left: 30rpx;

            bottom: 30rpx;

        }







    }

</style>