20261008
This commit is contained in:
@@ -0,0 +1,302 @@
|
||||
<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" @click="detailLink(item._id)">
|
||||
<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)}`)
|
||||
},
|
||||
detailLink(id) {
|
||||
vk.navigateTo(`/pages/yellow/detail?id=${id}`)
|
||||
},
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user