300 lines
8.4 KiB
Vue
300 lines
8.4 KiB
Vue
<template>
|
||
<view class="wrap">
|
||
<!-- 吸顶 -->
|
||
<u-sticky offset-top="0" customNavHeight="0">
|
||
<!-- 顶部 -->
|
||
<uiheader></uiheader>
|
||
<!-- 搜索栏 -->
|
||
<!-- <cmsearch></cmsearch>-->
|
||
<!-- 轮播图-传值:list="数组" -->
|
||
<cmswiper page="self-support-index" height="280rpx"></cmswiper>
|
||
<view class="bar">
|
||
<text class="active">自营钢城</text>
|
||
<text class="" @click="$jump('/pages/self/supportIndex')">平台服务</text>
|
||
<text class="" @click="$jump('/pages/shop/shop')">特产商城</text>
|
||
</view>
|
||
<!-- 选择器 -->
|
||
<view class="layout-select flex justify-start align-center bg-white">
|
||
<u-icon name="map" color="#A92924" size="18"></u-icon>
|
||
<text class="text" @click="showAddress">交易区域：</text>
|
||
<view class="ip all text-center" @click="showAddress">
|
||
{{ address.province ? `${address.province.name} ${address.city.name}` : '全国' }}
|
||
</view>
|
||
<view class="mx-20" @click="showAddress">
|
||
<u-icon name="arrow-down-fill"/>
|
||
</view>
|
||
<u-icon name="reload" v-if="address.province" @click="reload"/>
|
||
</view>
|
||
<!-- 统计 -->
|
||
<view class="layout-total flex justify-between align-center">
|
||
<view class="total">
|
||
共
|
||
<text class="red">{{ companyList.length }}</text>
|
||
个合作商
|
||
</view>
|
||
<view class="flex justify-end items-center">
|
||
<view class="link" @click="makeOrder">下单询价></view>
|
||
<view class="link-plain ml-20" @click="$jump('/pages/self/list')">我的询价</view>
|
||
</view>
|
||
</view>
|
||
</u-sticky>
|
||
|
||
<!-- 列表数据 -->
|
||
<view class="layout-self flex justify-between flex-wrap bg-white">
|
||
<view class="item" v-for="(item, index) in companyList" :key="index">
|
||
<view class="company flex justify-center align-center flex-nowrap">
|
||
<view class="icon">
|
||
<image class="radius" :src="item.businessCard.logo" mode=""
|
||
v-if="item.businessCard && item.businessCard.logo"></image>
|
||
<image class="radius" src="/static/img/no-logo.jpg" mode="" v-else></image>
|
||
</view>
|
||
<view class="text flex-1 p-left-20 text-single">{{ item.name }}</view>
|
||
</view>
|
||
<view class="main text-single m-top-10">
|
||
主营：{{ item.mainSpotCategory.join() }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 没有数据 -->
|
||
<cmempty></cmempty>
|
||
<AddressSelect ref="AddressSelect" @confirm="regionConfirm"/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uiheader from '@/components/index/header'
|
||
import cmsearch from '@/components/common/search'
|
||
import cmempty from '@/components/common/empty'
|
||
import cmswiper from '@/components/common/swiper'
|
||
import AddressSelect from "@/components/AddressSelect.vue";
|
||
|
||
export default {
|
||
components: {
|
||
AddressSelect,
|
||
uiheader,
|
||
cmsearch,
|
||
cmempty,
|
||
cmswiper,
|
||
},
|
||
data() {
|
||
return {
|
||
isLogin: false,
|
||
allChildCate: [],
|
||
companyList: [],
|
||
address: {
|
||
province: null,
|
||
city: null,
|
||
}
|
||
};
|
||
},
|
||
methods: {
|
||
showAddress() {
|
||
this.$refs.AddressSelect.open(this.address);
|
||
},
|
||
regionConfirm({province, city, area}) {
|
||
this.address = {province, city, area}
|
||
this.getCompanyList()
|
||
},
|
||
getCategoryTreeData() {
|
||
vk.callFunction({
|
||
url: 'client/spot/category/pub/getTree',
|
||
title: '请求中...',
|
||
data: {},
|
||
success: (data) => {
|
||
this.allChildCate = []
|
||
data.rows.forEach(item => {
|
||
item.children.forEach(child => {
|
||
this.allChildCate.push(child)
|
||
})
|
||
})
|
||
this.getCompanyList()
|
||
}
|
||
});
|
||
},
|
||
async getCompanyList() {
|
||
const {rows} = await vk.callFunction({
|
||
url: 'client/user/pub/getCompany',
|
||
data: {
|
||
isCoop: 1,
|
||
province: this.address.province ? [this.address.province.code] : []
|
||
}
|
||
})
|
||
this.companyList = rows.map(item => {
|
||
item.name = item.company.companyName
|
||
item.mainSpotCategory = []
|
||
if (item.company && item.company.mainSpotCategoryIds) {
|
||
this.allChildCate.forEach(child => {
|
||
if (item.company.mainSpotCategoryIds.includes(child._id)) {
|
||
item.mainSpotCategory.push(child.name)
|
||
}
|
||
})
|
||
}
|
||
return item
|
||
})
|
||
},
|
||
reload() {
|
||
this.address = {
|
||
province: null,
|
||
city: null
|
||
}
|
||
this.getCompanyList()
|
||
},
|
||
makeOrder(){
|
||
if (!this.address.province) return this.$message({type: 'error', message: '请选择交易区域'})
|
||
this.$jump(`/pages/self/make?province=${JSON.stringify(this.address.province)}&city=${JSON.stringify(this.address.city)}`)
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getCategoryTreeData()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.layout-select {
|
||
// width: 690rpx;
|
||
height: 68rpx;
|
||
padding: 0 30rpx;
|
||
font-size: 24rpx;
|
||
line-height: 40rpx;
|
||
color: #101010;
|
||
|
||
.text {
|
||
color: #A92924;
|
||
}
|
||
|
||
.ip {
|
||
position: relative;
|
||
//width: 180rpx;
|
||
height: 40rpx;
|
||
padding: 0 10rpx;
|
||
overflow: hidden;
|
||
border: 1px solid #f2f2f2;
|
||
}
|
||
|
||
//.all {
|
||
// width: 70rpx !important;
|
||
//}
|
||
.down::after {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
top: 50%;
|
||
z-index: 9;
|
||
content: '';
|
||
margin-top: -6rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 12rpx solid transparent;
|
||
border-right: 12rpx solid transparent;
|
||
border-top: 12rpx solid #999999;
|
||
}
|
||
}
|
||
|
||
.layout-total {
|
||
height: 60rpx;
|
||
padding: 10rpx 30rpx;
|
||
background: #F5F9FA;
|
||
|
||
.total {
|
||
font-size: 24rpx;
|
||
line-height: 40rpx;
|
||
color: #101010;
|
||
}
|
||
|
||
.link {
|
||
padding: 0 12rpx;
|
||
font-size: 24rpx;
|
||
line-height: 44rpx;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
background: #A92924;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.link-plain {
|
||
padding: 0 12rpx;
|
||
font-size: 24rpx;
|
||
line-height: 44rpx;
|
||
color: #A92924;
|
||
text-align: center;
|
||
border-radius: 8rpx;
|
||
border: 1px solid #A92924;
|
||
}
|
||
}
|
||
|
||
.layout-self {
|
||
padding: 20rpx 30rpx;
|
||
|
||
.item {
|
||
position: relative;
|
||
width: 50%;
|
||
height: 160rpx;
|
||
padding: 20rpx 10rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #f2f2f2;
|
||
|
||
.main {
|
||
height: 36rpx;
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.company {
|
||
width: 100%;
|
||
height: 64rpx;
|
||
|
||
.icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.text {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
line-height: 48rpx;
|
||
color: #101010;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item:nth-child(2n+1) {
|
||
border-right: 1px solid #f2f2f2;
|
||
}
|
||
}
|
||
|
||
.red {
|
||
color: #A92924 !important;
|
||
}
|
||
|
||
.bar {
|
||
//height: 50px;
|
||
color: #ffffff;
|
||
font-size: 25rpx;
|
||
background-color: #bf2b28;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
padding: 20rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
text:hover {
|
||
background-color: #941411
|
||
}
|
||
|
||
.active {
|
||
background-color: #941411
|
||
}
|
||
}
|
||
</style>
|