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,26 +127,16 @@
    
            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;
@@ -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

@@ -70,8 +70,7 @@
        },

        {

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

            "style" : 
            {

            "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

@@ -15,9 +15,11 @@
        </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>
                <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>


 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,45 +1,64 @@
<template>
    <view class="container-canteen" style="min-height: calc(100vh - 20rpx );">

        <view class="canteen-items" style="min-height: calc(100vh - 360rpx);">
    <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 types" @click="changeType(item)"
                        :class="[query.typeId==item.id?'current':'']" :key="index" class="p10 flex type-item">
                    <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 v-for="(item,index) of listFilter" :key="item.id" class="p10 canteen-item list"
                        style="display: flex;flex-wrap: inherit;">
                    <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.cover" mode="scaleToFill" class="cover" @click="previewImg(item.cover)">
                                <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="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">
                                <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> -->

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

@@ -68,195 +87,64 @@
                showpop: false,
                query: {
                    name: '',
                    // status:'',
                    schoolArea: '',
                    schoolAreaStr: '',
                    block: '',
                    blockStr: '',
                    typeId: '',
                    categoryId: '',

                },
                types: [{
                    name: '全部',
                    id: ''
                }],
                schools: [],
                schoolIndex: -1,
                blockIndex: -1,
                blocks: [],
                shoptotal: 0,
                cal: 0,


            }
        },

        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.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.$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 || ''

                }
            })

            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

            buttonSearchFlow() {

                //根据名称查询

                this.$message.showLoading()
                var {
                    data
                } = await this.$http.request('get', '/api/school/block/list', {
                this.$http.request('get', '/api/customer/flower/category/tree', {

                    params: {
                        schoolArea: this.query.schoolArea,
                        size: 200
                        name: this.query.name || ''

                    }
                })

                this.blocks = data && data.records || []
                // var arr = data.records || []
                // this.blocks = [{
                //     'name': '全部',
                //     'id': '',
                // }]
                // for (var item of arr) {
                //     this.blocks.push(item)
                // }
                }).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()
                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()
            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) {
@@ -267,68 +155,6 @@
                        })
                    }
                }
                //购买
                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: {
@@ -337,65 +163,37 @@
                    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) {
                if (this.query.categoryId) {

                    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)
                            if (item.id === this.query.categoryId || item.id === this.query.categoryId) {

                                // arr.push(item)

                                return item.children || []

                            }
                        }
                    }
                    return arr
                } else {
                    return this.list
                    return []

                }

            },
            // 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 {
    .container-trade {

        background-color: #FFFFFF;
        padding-top: 20rpx;



        .search-container {

            margin: 0rpx 30rpx 20rpx 30rpx;

        }



	

        .type-list {
            max-width: 178rpx;
@@ -406,7 +204,7 @@
            min-height: calc(100vh - 300rpx);
            max-height: calc(100vh - 300rpx);
            overflow-y: scroll;
            margin-left: 30rpx;
            margin-right: 16rpx;


            .type-item {
                text-align: center;
@@ -439,138 +237,82 @@
            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;
                margin: 0 auto;

                width: 164rpx;

                // width: 690rpx;
                // max-width: 690rpx;
                height: 206rpx;
                height: 266rpx;

                background: #FFFFFF;
                border-radius: 16rpx;
                display: flex;
                margin-bottom: 24rpx;
                margin-bottom: 44rpx;

                max-width: 164rpx;


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

                    height: 164rpx;

                    background-size: 100% 100%;

                    border-radius: 8rpx;

                    border: 2rpx solid #f8f8f8;

                }

                .title {
                    font-weight: 600;
                    font-size: 32rpx;
                    font-weight: 500;

                    font-size: 28rpx;

                    color: #000000;
                    line-height: 44rpx;
                    line-height: 40rpx;

                }

                .desc {
                    margin-top: 8rpx;

                    font-weight: 400;
                    font-size: 24rpx;
                    color: #666666;
                    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;

                    .icon {
                        line-height: 60rpx;
                    color: #CF0000;

                    line-height: 34rpx;

                    text-align: center;

                    }

                    .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);
                max-height: calc(100vh - 200rpx);

                overflow-y: scroll;
            }

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

                .cover {
                    width: 158rpx;
                    height: 158rpx;
            .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;

            }
        }

@@ -581,33 +323,7 @@
            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;
        }
    }
</style>