jjx-web/pages/index/shop/shop.vue

<template>
    <view>
        <top-bar></top-bar>
        <common-header></common-header>
        <category-bar></category-bar>
        <view class="w-1200">
            <u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
            <view class="tool-bar">
                <view class="search">
                    <text>地区：</text>
                    <el-cascader :options="options" :props="{label: 'name', value: 'code'}" v-model="address"/>
                </view>
                <view class="buy-btn">
                    <image src="https://oss.wsdns.cn/20231204/bcc976f4396e437abf19deb11c1f06b4.png" mode="widthFix"/>
                </view>
            </view>
            <view class="tool-bar">
                <view class="item">分类：</view>
                <view class="item">全部</view>
                <view class="item" v-for="(item, index) in categoryList" :key="index">{{ item.name }}</view>
            </view>
        </view>

        <view class="goods-list">
            <el-row class="wrap" type="flex" :gutter="10" justify="space-between">
                <el-col :span="4" v-for="(item, index) in goodsList" :key="index">
                    <div class="grid-content bg-purple pointer"
                         @click="navTo(`/pages/index/shop/detail?id=${item._id}`)">
                        <image :src="item.cover" mode="aspectFill"/>
                        <view class="comments">
                            <view class="goods-name">
                                {{ item.name }}
                            </view>
                            <view class="goods-price">￥{{ item.amount }}</view>
                        </view>
                    </div>
                </el-col>
            </el-row>
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
                </el-pagination>
            </div>
        </view>
        <!-- 现货市场 end -->
        <gap height="50"/>
        <right-bar></right-bar>
        <common-footer></common-footer>
    </view>
</template>

<script>
import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";

export default {
    components: {UGap},
    data() {
        return {
            categoryList: [],
            goodsList: [],
            list: [
                {
                    image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
                    title: '昨夜星辰昨夜风，画楼西畔桂堂东'
                },
                {
                    image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
                    title: '身无彩凤双飞翼，心有灵犀一点通'
                },
                {
                    image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
                    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
                }
            ],
            options: [],
            address: []
        };
    },
    onLoad(options) {
        if (options && options.menu) {
            this.currMenu = options.menu
        }
        this.options = provinces.map(item => {
            item.children = [];
            return item
        })
        this.options.forEach((province, index) => {
            citys[index].forEach(city => {
                this.options[index].children.push(city)
            })
        })
        this.getCategoryList()
        this.getGoodsList()
    },
    methods: {
        menuSelect(e) {
            this.currMenu = e
        },
        navTo(url) {
            vk.navigateTo(url);
        },
        getCategoryList() {
            vk.callFunction({
                url: 'client/goods/category/pub/getList'
            }).then(res => {
                this.categoryList = res.rows
            })
        },
        getGoodsList() {
            vk.callFunction({
                url: 'client/goods/list/pub/getList'
            }).then(res => {
                this.goodsList = res.rows
            })
        },

    }
}
</script>

<style lang="scss">
.w-1200 {
    width: 1200px;
    margin: 20px auto;
    background-color: #fff;

    .test {
        height: 50px;
        color: #ffffff;
        font-size: 18px;
        background-color: #bf2b28;
        display: flex;
        align-items: center;
        justify-content: center;

        text {
            margin: 0 20px;
        }
    }

    .tool-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        font-size: 16px;

        .search {
            display: flex;
            align-items: center;
        }
    }
}

.wrap {
    flex-wrap: wrap;
}

.goods-list {
    width: 1200px;
    margin: 20px auto;

    .grid-content {
        display: flex;
        justify-content: center;
        background-color: #fff;
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        flex-direction: column;

        .comments {
            display: flex;
            flex-direction: column;
            justify-content: start;
            line-height: 2em;

            .goods-name {
                font-size: 16px;
                display: flex;
                align-items: center;
            }

            .goods-price {
                color: #bf2b28;
                font-size: 20px;
                font-weight: 600;
            }
        }
    }

    .bg-purple {
        border-top: 1px solid #f3f3f3;
        border-right: 1px solid #f3f3f3;

        image {
            width: 180px;
            height: 180px;
        }
    }
}

.pagination {
    width: 1200px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
}
</style>