jjx-web/pages/index/self-support/self-support.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="test">
                <text class="pointer" @click="navTo('/pages/index/self-support/self-support')">自营钢城</text>
                <text class="pointer" @click="navTo('/pages/index/self-support/selectType')">平台服务</text>
                <text class="pointer" @click="navTo('/pages/index/shop/shop')">特产商城</text>
            </view>
            <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">
                    <el-button type="primary" plain class="empty-bg-plain-btn" :disabled="address.length === 0">下单询价 ></el-button>
                </view>
            </view>
            <!-- 合作单位/联营单位-->
            <view class="cooperate">
                <view class="title">合作单位/联营单位</view>
                <u-gap height="5" bg-color="#f3f3f3"/>
                <view class="flex justify-start items-start flex-wrap">
                    <view class="w-25p pointer" v-for="(item, index) in companyList" :key="index">
                        <view class="border bg-white flex flex-col justify-center items-center p-20">
                            <image :src="item.businessCard.logo" class="logo"/>
                            <span class="mt-20 line-1 w-100p text-center">
                                主营: {{ item.businessCard.mainBusiness }}
                            </span>
                        </view>
                    </view>
                </view>
                <u-gap height="5" bg-color="#f3f3f3"/>
            </view>
        </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 {
            address: [],
            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: [{
                value: 'zhinan',
                label: '广西',
                children: [{
                    value: 'shejiyuanze',
                    label: '南宁市',
                    children: [{
                        value: 'yizhi',
                        label: '良庆区'
                    }, {
                        value: 'fankui',
                        label: 'XXX'
                    }, {
                        value: 'xiaolv',
                        label: 'XXX'
                    }, {
                        value: 'kekong',
                        label: 'XXX'
                    }]
                }, {
                    value: 'daohang',
                    label: '北海市',
                    children: [{
                        value: 'cexiangdaohang',
                        label: 'XXX'
                    }, {
                        value: 'dingbudaohang',
                        label: 'XXX'
                    }]
                }]
            }],
            companyList: []
        };
    },
    onLoad(options) {
        if (options && options.menu) {
            this.currMenu = options.menu
        }
        this.getCompanyList()
        this.options = provinces.map(item => {
            item.children = [];
            return item
        })
        this.options.forEach((province, index) => {
            citys[index].forEach(city => {
                this.options[index].children.push(city)
            })
        })
    },
    methods: {
        menuSelect(e) {
            this.currMenu = e
        },
        navTo(url) {
            vk.navigateTo(url);
        },
        async getCompanyList() {
            const {rows} = await vk.callFunction({
                url: 'client/user/pub/getCompany',
                data: {isCoop: 1}
            })
            this.companyList = 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;
        }
    }

    .cooperate {
        .title {
            text-align: center;
            color: #bf2b28;
            font-size: 28px;
            line-height: 3em;
        }

        .wrap {
            flex-wrap: wrap;
        }

        .grid-content {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            flex-direction: column;

            .comments {
                line-height: 2em;
            }
        }

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

            .image {
                width: 140px;
            }
        }
    }
}

.logo {
    width: 80px;
    height: 80px;
}
</style>