20261008
This commit is contained in:
@@ -0,0 +1,770 @@
|
||||
<template> <!-- 黄页详情 -->
|
||||
<view class="wrap">
|
||||
<!-- 吸顶 -->
|
||||
<u-sticky offset-top="0" customNavHeight="0" zIndex="9999">
|
||||
<!-- 顶部 -->
|
||||
<uititle :title="info.company.companyName ? info.company.companyName : ''"></uititle>
|
||||
</u-sticky>
|
||||
<!-- 基础信息 -->
|
||||
<view class="layout layout-base">
|
||||
<view class="company flex m-top-20">
|
||||
<view class="logo">
|
||||
<image v-if="info && info.businessCard" class="full" :src="info.businessCard.logo"
|
||||
mode="aspectFit"></image>
|
||||
<image v-else class="full" src="/static/no-logo.jpg" mode=""></image>
|
||||
</view>
|
||||
<view class="info flex-1 p-left-20">
|
||||
<view class="name flex justify-start align-center">
|
||||
<view class="name-text">{{ info.company.companyName }}</view>
|
||||
<!-- 认证图标 -->
|
||||
<!-- <view class="name-icon m-left-20">-->
|
||||
<!-- <image class="full" src="/static/img/idente.png" mode=""></image>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
<view class="zhu">
|
||||
主营业务：{{ info.company.mainSpotCategory.join() }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between align-center m-top-20">
|
||||
<u-icon name="rmb-circle" color="#A92924" size="18"></u-icon>
|
||||
<view class="half-text">平台累计交易
|
||||
<text class="red">{{ info.transactionAmount.toFixed(2) }}</text>
|
||||
元
|
||||
</view>
|
||||
<view class="flex-1"></view>
|
||||
<template v-if="info.paidEnsure && info.paidEnsure > 0">
|
||||
<u-icon name="checkmark-circle" color="#A92924" size="18"></u-icon>
|
||||
<view class="half-text">已缴纳交易保证金
|
||||
<text class="red">{{ info.paidEnsure }}</text>
|
||||
元
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<el-carousel height="210rpx`" :style="{width: '100%', height: '210rpx'}" class="m-a"
|
||||
v-if="info.businessCard && info.businessCard.album">
|
||||
<template v-if="Array.isArray(info.businessCard.album)">
|
||||
<el-carousel-item v-for="(item, index) in info.businessCard.album" :key="index" :style="{width: '100%'}">
|
||||
<u-image :src="item" mode="aspectFit" width="100%" height="210rpx"/>
|
||||
</el-carousel-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-carousel-item :style="{width: '100%'}">
|
||||
<u-image :src="info.businessCard.album" mode="aspectFit" width="100%" height="210rpx"/>
|
||||
</el-carousel-item>
|
||||
</template>
|
||||
</el-carousel>
|
||||
<!-- 企业简介 -->
|
||||
<view class="layout layout-company">
|
||||
<view class="card-title m-top-30">企业简介</view>
|
||||
<view class="company-text" v-if="info.businessCard.companyIntroduction"
|
||||
v-html="info.businessCard.companyIntroduction"/>
|
||||
<text v-else>商家暂未填写</text>
|
||||
</view>
|
||||
<view class="flex flex-col justify-start items-start mb-20 layout-company"
|
||||
v-if="info.businessCard && info.businessCard.video">
|
||||
<view class="card-title m-top-30">企业视频</view>
|
||||
<video :src="info.businessCard.video" controls style="width: 100%" autoplay/>
|
||||
</view>
|
||||
<view class="flex flex-col justify-start items-start mb-20 layout-company"
|
||||
v-if="info.businessCard && info.businessCard.productImageList">
|
||||
<view class="card-title m-top-30">产品展示</view>
|
||||
<view class="flex justify-start items-start flex-wrap">
|
||||
<el-image :src="item" v-for="(item, index) in info.businessCard.productImageList"
|
||||
:key="index" fit="cover" :preview-src-list="info.businessCard.productImageList"
|
||||
style="width: 5rem; height: 5rem; margin: 0 1rem 1rem 0"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex flex-col justify-start items-start mb-20 layout-company "
|
||||
v-if="info.businessCard && info.businessCard.exampleImageList">
|
||||
<view class="card-title m-top-30">案例展示</view>
|
||||
<view class="flex justify-start items-start flex-wrap">
|
||||
<el-image :src="item" v-for="(item, index) in info.businessCard.exampleImageList"
|
||||
:key="index" fit="cover"
|
||||
:preview-src-list="info.businessCard.exampleImageList"
|
||||
style="width: 5rem; height: 5rem; margin: 0 1rem 1rem 0"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex flex-col justify-start items-start mb-20 layout-company"
|
||||
v-if="info.businessCard && info.businessCard.longitude">
|
||||
<view class="card-title m-top-30">地图定位</view>
|
||||
<view class="mapDiv">
|
||||
<tdt-map :center="[info.businessCard.longitude, info.businessCard.latitude]" :zoom="12">
|
||||
<tdt-marker :position="[info.businessCard.longitude, info.businessCard.latitude]"
|
||||
:draggable="false"/>
|
||||
</tdt-map>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex flex-col justify-start items-start mb-20 layout-company"
|
||||
v-if="userArticle.length > 0">
|
||||
<view class="card-title m-top-30">新闻动态</view>
|
||||
<view class="flex justify-start items-start flex-col w-100p">
|
||||
<view class="flex justify-between items-center pointer w-100p mb-25"
|
||||
@click="showArticle(index)"
|
||||
v-for="(item, index) in userArticle" :key="index">
|
||||
<text>{{ item.title }}</text>
|
||||
<text class="text-gray">{{ item._add_time_str }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="layout layout-card">
|
||||
<!-- <view class="card-title m-top-10">我的名片</view> -->
|
||||
<view class="card-body">
|
||||
<!-- 联系信息 -->
|
||||
<view class="card-title m-top-30">联系我们</view>
|
||||
<view class="detail m-top-10">
|
||||
<view class="p clear">
|
||||
<view class="lb fl flex justify-start align-center">
|
||||
<u-icon name="map" size="18"></u-icon>
|
||||
<view class="text">地址：</view>
|
||||
</view>
|
||||
<view class="vl">
|
||||
{{ info.manager.address }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="p clear">
|
||||
<view class="lb fl flex justify-start align-center">
|
||||
<u-icon name="phone" size="18"></u-icon>
|
||||
<view class="text">电话：</view>
|
||||
</view>
|
||||
<view class="vl">{{
|
||||
info.businessCard.companyMobile ? info.businessCard.companyMobile : '商家暂未填写'
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="p clear">
|
||||
<view class="lb fl flex justify-start align-center">
|
||||
<u-icon name="email" size="18"></u-icon>
|
||||
<view class="text">邮箱：</view>
|
||||
</view>
|
||||
<view class="vl">{{ info.businessCard.email ? info.businessCard.email : '商家暂未填写' }}</view>
|
||||
</view>
|
||||
<view class="p clear">
|
||||
<view class="lb fl flex justify-start align-center">
|
||||
<u-icon name="kefu-ermai" size="18"></u-icon>
|
||||
<view class="text">手机：</view>
|
||||
</view>
|
||||
<view class="vl">{{ info.manager.mobile ? info.manager.mobile : '商家暂未填写' }}</view>
|
||||
</view>
|
||||
<view class="p clear" v-if="info.userLevel > 1">
|
||||
<view class="lb fl flex justify-start align-center">
|
||||
<u-icon name="ie" size="18"></u-icon>
|
||||
<view class="text">网址：</view>
|
||||
</view>
|
||||
<view class="vl">
|
||||
<u--text mode="link" :text="info.businessCard.website"
|
||||
:href="info.businessCard.website"></u--text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="p clear">-->
|
||||
<!-- <view class="lb fl flex justify-start align-center">-->
|
||||
<!-- <u-icon name="account" size="18"></u-icon>-->
|
||||
<!-- <view class="text">总经理：</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="vl">王星星</view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 发布的现货 -->
|
||||
<template v-if="parseInt(info.userLevel) > 0">
|
||||
<view class="layout-goods" v-if="info.spotList">
|
||||
<view class="card-title m-top-20 flex justify-between">
|
||||
<view class="text">发布的现货</view>
|
||||
<!-- <view class="more">查看更多</view>-->
|
||||
</view>
|
||||
<view class="goods-box m-top-20">
|
||||
<view class="item bg-white">
|
||||
<view class="askfor" @click.native="$jump('/pages/goods/detail?id=' + info.spotList._id)">
|
||||
+申请合作
|
||||
</view>
|
||||
<view class="title text-single">{{ info.spotList.name }}</view>
|
||||
<view class="text m-top-10">
|
||||
<text class="red">库存:{{ info.spotList.stock }}吨</text>
|
||||
<text
|
||||
v-if="info.spotList.address && info.spotList.address.province && info.spotList.address.area && info.spotList.address.area ">
|
||||
供货地:{{ info.spotList.address.province.name }}-{{
|
||||
info.spotList.address.city.name
|
||||
}}-{{ info.spotList.address.area.name }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="flex justify-between align-center m-top-10">
|
||||
<view class="company flex justify-center align-center flex-nowrap">
|
||||
<view class="text flex-1">{{ info.company.companyName }}</view>
|
||||
</view>
|
||||
<view class="date">{{ info.spotList._add_time_str }}发布</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 发布的询价单 -->
|
||||
<view class="layout layout-table">
|
||||
<view class="card-title m-top-20 flex justify-between">
|
||||
<view class="text">发布的询价单</view>
|
||||
<view class="more" @click.native="$jump('/pages/price/price?');">查看更多</view>
|
||||
</view>
|
||||
<view class="table-box m-top-20">
|
||||
<view class="thead">
|
||||
<view class="tr">
|
||||
<view class="th" style="width: 60%;">品名、材质</view>
|
||||
<view class="th" style="width: 20%;">采购量</view>
|
||||
<view class="th" style="width: 20%;">操作</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tbody" v-for="(item, index) in info.enquiryList" :key="index">
|
||||
<view class="tr">
|
||||
<view class="td" style="width: 60%;">{{ item.productList[0].goodsName }}</view>
|
||||
<view class="td" style="width: 20%;">{{ item.productList[0].procureNumber }}{{
|
||||
item.productList[0].procureUnit
|
||||
}}
|
||||
</view>
|
||||
<view class="td" style="width: 20%;">
|
||||
<u-button
|
||||
@click.native="$jump('/pages/price/detail?id=' + item._id);"
|
||||
class="minibtn"
|
||||
size="mini"
|
||||
type="error"
|
||||
plain
|
||||
text="查看详情"
|
||||
></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 发布的加工单 -->
|
||||
<view class="layout layout-table">
|
||||
<view class="card-title m-top-20 flex justify-between">
|
||||
<view class="text">发布的加工单</view>
|
||||
<view class="more" @click="$jump('/pages/work/work')">查看更多</view>
|
||||
</view>
|
||||
<view class="table-box m-top-20">
|
||||
<view class="thead">
|
||||
<view class="tr">
|
||||
<view class="th" style="width: 60%;">品名、材质</view>
|
||||
<view class="th" style="width: 20%;">加工量</view>
|
||||
<view class="th" style="width: 20%;">操作</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tbody">
|
||||
<view class="tr" v-for="(item, index) in info.processList" :key="index">
|
||||
<view class="td" style="width: 60%;">{{ item.title }}</view>
|
||||
<view class="td" style="width: 20%;">{{ item.num }}</view>
|
||||
<view class="td" style="width: 20%;">
|
||||
<u-button
|
||||
@click.native="$jump(`/pages/work/detail?id=${item._id}`)"
|
||||
class="minibtn"
|
||||
size="mini"
|
||||
type="error"
|
||||
plain
|
||||
text="查看详情"
|
||||
></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 发布的旧货信息 -->
|
||||
<!-- <view class="layout layout-junk">-->
|
||||
<!-- <view class="card-title m-top-20 flex justify-between">-->
|
||||
<!-- <view class="text">发布的旧货信息</view>-->
|
||||
<!-- <view class="more">查看更多</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="junk-box">-->
|
||||
<!-- <view class="item flex">-->
|
||||
<!-- <view class="img">-->
|
||||
<!-- <image class="full" src="/static/img/abc-1.png" mode=""></image>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="info flex-1 p-left-30">-->
|
||||
<!-- <view class="title text-single">直缝钢管20吨</view>-->
|
||||
<!-- <view class="flex justify-between flex-wrap">-->
|
||||
<!-- <view class="p half">-->
|
||||
<!-- <text class="lb">所属分类</text>-->
|
||||
<!-- 成品钢材-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="p half">-->
|
||||
<!-- <text class="lb">发布时间</text>-->
|
||||
<!-- 2022.12.23-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="p half">-->
|
||||
<!-- <text class="lb">所在区域</text>-->
|
||||
<!-- 广西-南宁-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="p half">-->
|
||||
<!-- <text class="lb">有效期至</text>-->
|
||||
<!-- 2022.12.23-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="item flex">-->
|
||||
<!-- <view class="img">-->
|
||||
<!-- <image class="full" src="/static/img/abc-1.png" mode=""></image>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="info flex-1 p-left-30">-->
|
||||
<!-- <view class="title text-single">直缝钢管20吨</view>-->
|
||||
<!-- <view class="flex justify-between flex-wrap">-->
|
||||
<!-- <view class="p half">-->
|
||||
<!-- <text class="lb">所属分类</text>-->
|
||||
<!-- 成品钢材-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="p half">-->
|
||||
<!-- <text class="lb">发布时间</text>-->
|
||||
<!-- 2022.12.23-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="p half">-->
|
||||
<!-- <text class="lb">所在区域</text>-->
|
||||
<!-- 广西-南宁-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="p half">-->
|
||||
<!-- <text class="lb">有效期至</text>-->
|
||||
<!-- 2022.12.23-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<el-dialog v-if="articleIndex > -1 && dialogVisible"
|
||||
title="新闻动态"
|
||||
:visible.sync="dialogVisible"
|
||||
width="100%">
|
||||
<p class="text-35 font-bold pb-20">{{ userArticle[articleIndex].title }}</p>
|
||||
<p class="text-gray text-28 pb-20 border-bottom">{{ userArticle[articleIndex]._add_time_str }}</p>
|
||||
<div v-html="userArticle[articleIndex].content" class="pt-20"></div>
|
||||
<div slot="footer">
|
||||
<u-button @click="dialogVisible = false">关 闭</u-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uititle from '@/components/common/title'
|
||||
import cmsearch from '@/components/common/search'
|
||||
import cmempty from '@/components/common/empty'
|
||||
import usnotice from '@/components/user/notice'
|
||||
import usaccount from '@/components/user/account'
|
||||
import uscard from '@/components/user/card'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uititle,
|
||||
cmsearch,
|
||||
cmempty,
|
||||
usnotice,
|
||||
usaccount,
|
||||
uscard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
info: {
|
||||
transactionAmount: 0,
|
||||
paidEnsure: 0,
|
||||
spotList: [],
|
||||
enquiryList: [],
|
||||
processList: [],
|
||||
company: {
|
||||
companyName: ''
|
||||
}
|
||||
},
|
||||
allChildCate: [],
|
||||
userArticle: [],
|
||||
articleIndex: -1,
|
||||
dialogVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
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.getInfo()
|
||||
}
|
||||
});
|
||||
},
|
||||
getInfo() {
|
||||
vk.callFunction({
|
||||
url: "client/user/pub/getDetail",
|
||||
data: {
|
||||
_id: this.id
|
||||
},
|
||||
success: (res) => {
|
||||
this.info = res.data
|
||||
this.info.company.mainSpotCategory = []
|
||||
if (this.info.company && this.info.company.mainSpotCategoryIds) {
|
||||
this.allChildCate.forEach(child => {
|
||||
if (this.info.company.mainSpotCategoryIds.includes(child._id)) {
|
||||
this.info.company.mainSpotCategory.push(child.name)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.info.enquiryList.map(val => {
|
||||
let str = ''
|
||||
if (val.addressRegion && val.addressRegion.area) {
|
||||
str = val.addressRegion.province.name + val.addressRegion.city.name + val.addressRegion.area.name
|
||||
}
|
||||
if (val.addressDetail) str += val.addressDetail
|
||||
val.address = str
|
||||
return val
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
// 获取所有的img元素
|
||||
var imgElements = document.getElementsByTagName('img');
|
||||
|
||||
// 遍历img元素数组
|
||||
for (var i = 0; i < imgElements.length; i++) {
|
||||
// 添加style属性，并设置width为100%
|
||||
imgElements[i].style.width = '100%';
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
getUserArticle() {
|
||||
vk.callFunction({
|
||||
url: 'client/userArticle/pub/getList',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
userId: this.id
|
||||
},
|
||||
success: (data) => {
|
||||
this.userArticle = data.rows
|
||||
console.log(this.userArticle)
|
||||
}
|
||||
});
|
||||
},
|
||||
showArticle(index) {
|
||||
this.articleIndex = index
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
// 获取所有的img元素
|
||||
var imgElements = document.getElementsByTagName('img');
|
||||
|
||||
// 遍历img元素数组
|
||||
for (var i = 0; i < imgElements.length; i++) {
|
||||
// 添加style属性，并设置width为100%
|
||||
imgElements[i].style.width = '100%';
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad({id}) {
|
||||
this.id = id
|
||||
this.getCategoryTreeData()
|
||||
this.getUserArticle()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
img {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.minibtn {
|
||||
width: 60rpx;
|
||||
font-size: 20rpx;
|
||||
color: #A92924 !important;
|
||||
border-color: #A92924;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
position: relative;
|
||||
padding-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 48rpx;
|
||||
color: #A92924;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
z-index: 9;
|
||||
margin-top: -14rpx;
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #A92924;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-base {
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
.name-text {
|
||||
//max-width: 380rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.name-icon {
|
||||
width: 80rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.zhu {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.half-text {
|
||||
margin-left: 6rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-company {
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
.company-text {
|
||||
padding: 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
line-height: 44rpx;
|
||||
color: #A7A7A7;
|
||||
}
|
||||
|
||||
.company-img {
|
||||
image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-card {
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
.card-tip {
|
||||
font-size: 26rpx;
|
||||
line-height: 48rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.detail {
|
||||
padding: 10rpx 0;
|
||||
|
||||
.p {
|
||||
position: relative;
|
||||
padding: 14rpx 0;
|
||||
|
||||
.lb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10rpx;
|
||||
z-index: 9;
|
||||
width: 180rpx;
|
||||
height: auto;
|
||||
|
||||
.text {
|
||||
padding-left: 6rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.vl {
|
||||
padding-left: 150rpx;
|
||||
min-height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-junk {
|
||||
padding: 30rpx 30rpx;
|
||||
|
||||
.item {
|
||||
margin-top: 30rpx;
|
||||
padding: 30rpx 30rpx;
|
||||
background: #f8f8f8;
|
||||
|
||||
.img {
|
||||
width: 160rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
.p {
|
||||
padding: 5rpx 0;
|
||||
height: 40rpx;
|
||||
overflow: hidden;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
.lb {
|
||||
padding-right: 6rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-table {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-box {
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thead {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.th, .td {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
height: 76rpx;
|
||||
color: #000;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.td {
|
||||
border-right: 1px solid #f2f2f2;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
background: #ffffff;
|
||||
// &:first-child {
|
||||
// color: #f56c6c;
|
||||
// }
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-goods {
|
||||
width: 690rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
margin-top: 30rpx;
|
||||
padding: 10rpx 20rpx 20rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.title {
|
||||
width: 90%;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 48rpx;
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
.link, .askfor {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 16rpx;
|
||||
z-index: 9;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #A92924;
|
||||
padding: 4rpx 8rpx;
|
||||
}
|
||||
|
||||
.link {
|
||||
border: 1px solid #A92924;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.red {
|
||||
margin-right: 20rpx;
|
||||
color: #A92924;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
.company {
|
||||
height: 40rpx;
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
//width: 300rpx;
|
||||
height: 40rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mapDiv {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,428 @@
|
||||
<template> <!-- 黄页 -->
|
||||
<view class="wrap">
|
||||
<!-- 吸顶 -->
|
||||
<u-sticky offset-top="0" customNavHeight="0">
|
||||
<!-- 顶部 -->
|
||||
<uiheader title="金久信黄页"></uiheader>
|
||||
<!-- 搜索栏 -->
|
||||
<cmsearch></cmsearch>
|
||||
<!-- 轮播图-传值:list="数组" -->
|
||||
<cmswiper page="yellowPage" height="320rpx"></cmswiper>
|
||||
<!-- 选择器 -->
|
||||
<view class="layout-pick flex justify-between align-center bg-white">
|
||||
<view class="ip down" @click="showIndustry = true">行业：{{ industry }}</view>
|
||||
</view>
|
||||
<view class="layout-pick flex justify-between align-center bg-white">
|
||||
<view style="max-width: 60%" class="ip down" @click="isPick = true">主营类目：{{ pickValue }}</view>
|
||||
<view style="max-width: 40%" class="ip down" @click="showAddress">省份：{{ locationValue }}</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<!-- 广告图（可封装组件） -->
|
||||
<!-- <view class="layout layout-banner">-->
|
||||
<!-- <view class="banner">-->
|
||||
<!-- <image class="full" src="/static/img/yellow-1.png" mode=""></image>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="banner">-->
|
||||
<!-- <image class="full" src="/static/img/yellow-2.png" mode=""></image>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="banner">-->
|
||||
<!-- <image class="full" src="/static/img/yellow-3.png" mode=""></image>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- 列表 -->
|
||||
<view class="layout layout-list">
|
||||
<view class="item " style="line-height: 40rpx!important;" v-for="(item, index) in companyList" :key="index"
|
||||
@click="detailLink(item._id)">
|
||||
<!-- 基础信息 -->
|
||||
<view class="company flex">
|
||||
<view class="logo">
|
||||
<image v-if="item && item.businessCard" style="width: 120rpx; height: 120rpx" mode="widthFix"
|
||||
:src="item.businessCard.logo"/>
|
||||
<image v-else class="full" src="/static/no-logo.jpg" style="width: 120rpx; height: 120rpx" mode=""></image>
|
||||
</view>
|
||||
<view class="info flex-1 flex flex-col justify-center items-start p-left-20" style="height: 120rpx">
|
||||
<view class="name flex justify-start align-center">
|
||||
<view class="name-text text-single font-bold">{{ item.company.companyName }}</view>
|
||||
<!-- 认证图标 -->
|
||||
<image src="/static/img/idente.png" class="ml-10" mode="" style="width: 80rpx; height: 28rpx"></image>
|
||||
<i class="el-icon-star-off text-main ml-20"/>
|
||||
</view>
|
||||
<!-- <view class="rate">-->
|
||||
<!-- <u-rate :count="5" v-model="rate"></u-rate>-->
|
||||
<!-- </view>-->
|
||||
<view class="people flex justify-start align-center">
|
||||
<u-icon name="account" size="18"></u-icon>
|
||||
<text class="xm p-left-10" v-if="item.manager">{{ item.manager.personName }}</text>
|
||||
<text class="job p-left-20" v-if="item.businessCard">{{ item.businessCard.position }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 联系信息 -->
|
||||
<view class="detail">
|
||||
<view class="text-25 flex justify-start items-start">
|
||||
<view class="flex justify-start align-center w-20p flex-shrink">
|
||||
<u-icon name="map" size="18"></u-icon>
|
||||
<view class="text">地址：</view>
|
||||
</view>
|
||||
<view style="line-height: 30rpx"
|
||||
v-if="item.company && item.company.addressRegion && item.company.addressRegion.province && item.company.addressRegion.city && item.company.addressRegion.area">
|
||||
{{
|
||||
item.company.addressRegion.province.name
|
||||
}}{{ item.company.addressRegion.city.name }}{{
|
||||
item.company.addressRegion.area.name
|
||||
}}{{
|
||||
item.company.addressDetail
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-10 text-25 flex justify-start items-center">
|
||||
<view class="flex justify-start items-center w-20p flex-shrink">
|
||||
<u-icon name="phone" size="18"></u-icon>
|
||||
<view class="text">电话：</view>
|
||||
</view>
|
||||
<view>{{ item.businessCard.companyMobile ? item.businessCard.companyMobile : '商家暂未填写' }}</view>
|
||||
</view>
|
||||
<view class="mt-10 text-25 flex justify-start items-center">
|
||||
<view class="flex justify-start items-center w-20p flex-shrink">
|
||||
<u-icon name="email" size="18"></u-icon>
|
||||
<view class="text">邮箱：</view>
|
||||
</view>
|
||||
<view>{{ item.businessCard.email ? item.businessCard.email : '商家暂未填写' }}</view>
|
||||
</view>
|
||||
<view class="mt-10 text-25 flex justify-start items-center">
|
||||
<view class="flex justify-start items-center w-20p flex-shrink">
|
||||
<u-icon name="kefu-ermai" size="18"></u-icon>
|
||||
<view class="text">手机：</view>
|
||||
</view>
|
||||
<view>{{ item.manager.mobile ? item.manager.mobile : '商家暂未填写' }}</view>
|
||||
</view>
|
||||
<view class="mt-10 text-25 flex justify-start items-center" v-if="item.userLevel > 1">
|
||||
<view class="flex justify-start items-center w-20p flex-shrink">
|
||||
<u-icon name="ie" size="18"></u-icon>
|
||||
<view class="text">网址：</view>
|
||||
</view>
|
||||
<view>{{ item.businessCard ? item.businessCard.website : '商家暂未填写' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 主营业务 -->
|
||||
<view class="flex justify-start mt-25 text-25">
|
||||
<text class="red w-20p flex-shrink">主营业务：</text>
|
||||
<text class="text-left" style="line-height: 30rpx">{{
|
||||
item.mainSpotCategory.length > 0 ? item.mainSpotCategory.join() : '无'
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="link mt-25">查看详情</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 没有数据 -->
|
||||
<u-empty mode="list" text="暂无更多内容~" v-if="companyList.length === 0"></u-empty>
|
||||
<!-- <cmempty></cmempty> -->
|
||||
<uiswiper :ad="23" padding="10rpx 0"></uiswiper>
|
||||
<uiswiper :ad="24" padding="10rpx 0"></uiswiper>
|
||||
<uiswiper :ad="25" padding="10rpx 0"></uiswiper>
|
||||
<uiswiper :ad="26" padding="10rpx 0"></uiswiper>
|
||||
<collapse></collapse>
|
||||
<AddressSelect ref="AddressSelect" @confirm="regionConfirm"/>
|
||||
<u-picker v-if="isPick" :show="isPick" :columns="[categoryTreeData, categoryTreeData[cateIndex[0]].children]"
|
||||
key-name="name" @confirm="handConfirmPick" @change="handleChangeCate" @cancel="isPick = false">
|
||||
<template #more>
|
||||
<text @click="resetCate">重置</text>
|
||||
</template>
|
||||
</u-picker>
|
||||
<u-picker v-if="showIndustry" :show="showIndustry" :columns="[industryList]"
|
||||
key-name="name" @confirm="handConfirmPickIndustry" @cancel="showIndustry = false">
|
||||
<template #more>
|
||||
<text @click="resetIndustry">重置</text>
|
||||
</template>
|
||||
</u-picker>
|
||||
</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 Collapse from "@/components/index/collapse.vue";
|
||||
import AddressSelect from "@/components/AddressSelect.vue";
|
||||
import uiswiper from "@/components/index/swiper.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uiswiper,
|
||||
AddressSelect,
|
||||
Collapse,
|
||||
uiheader,
|
||||
cmsearch,
|
||||
cmempty,
|
||||
cmswiper,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rate: 3,
|
||||
checkProvinceList: [],
|
||||
keyword: '',
|
||||
checkCategoryList: [],
|
||||
industryList: [],
|
||||
selectedIndustryList: [],
|
||||
categoryTreeData: [],
|
||||
allChildCate: [],
|
||||
companyList: [],
|
||||
locationValue: '全国',
|
||||
region: {
|
||||
province: {
|
||||
code: null,
|
||||
name: null,
|
||||
}
|
||||
},
|
||||
pickValue: '全部',
|
||||
isPick: false,
|
||||
showIndustry: false,
|
||||
industry: '全部',
|
||||
cateId: null,
|
||||
cateIndex: [0, 0],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChangeCate({indexs}) {
|
||||
this.cateIndex = indexs
|
||||
},
|
||||
handConfirmPick({value}) {
|
||||
this.pickValue = value[1].name
|
||||
this.cateId = value[1]._id
|
||||
this.isPick = false
|
||||
this.getCompany()
|
||||
},
|
||||
resetCate() {
|
||||
this.cateIndex = [0, 0]
|
||||
this.pickValue = '全部'
|
||||
this.cateId = null
|
||||
this.isPick = false
|
||||
this.getCompany()
|
||||
},
|
||||
handConfirmPickIndustry({value}) {
|
||||
this.industry = value[0].name
|
||||
this.showIndustry = false
|
||||
this.getCompany()
|
||||
},
|
||||
resetIndustry() {
|
||||
this.industry = '全部'
|
||||
this.showIndustry = false
|
||||
this.getCompany()
|
||||
},
|
||||
showAddress() {
|
||||
this.$refs.AddressSelect.open(this.region, 1, true);
|
||||
},
|
||||
regionConfirm({province}) {
|
||||
this.region = {province}
|
||||
this.locationValue = `${province.name}`
|
||||
this.getCompany()
|
||||
},
|
||||
detailLink(id) {
|
||||
vk.navigateTo(`/pages/yellow/detail?id=${id}`)
|
||||
},
|
||||
getCategoryTreeData() {
|
||||
vk.callFunction({
|
||||
url: 'client/spot/category/pub/getTree',
|
||||
title: '请求中...',
|
||||
data: {},
|
||||
success: (data) => {
|
||||
this.categoryTreeData = data.rows
|
||||
this.allChildCate = []
|
||||
this.categoryTreeData.forEach(item => {
|
||||
item.children.forEach(child => {
|
||||
this.allChildCate.push(child)
|
||||
})
|
||||
})
|
||||
this.getCompany()
|
||||
}
|
||||
});
|
||||
},
|
||||
getCompany() {
|
||||
vk.callFunction({
|
||||
url: 'client/user/pub/getCompany',
|
||||
title: '请求中...',
|
||||
data: {
|
||||
province: this.region.province.code ? [this.region.province.code] : null,
|
||||
keyword: this.keyword,
|
||||
mainSpotCategoryIds: this.cateId ? [this.cateId] : null,
|
||||
showInYellow: 1,
|
||||
// factoryFilter: this.factoryFilter,
|
||||
industryList: this.industry === '全部' ? null : [this.industry]
|
||||
},
|
||||
success: (data) => {
|
||||
this.companyList = data.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
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
async getIndustryList() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/industry/pub/getList'
|
||||
})
|
||||
this.industryList = rows
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
this.getIndustryList()
|
||||
this.getCategoryTreeData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-pick {
|
||||
// width: 690rpx;
|
||||
height: 68rpx;
|
||||
padding: 0 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #4F4F4F;
|
||||
|
||||
.ip {
|
||||
position: relative;
|
||||
max-width: 50%;
|
||||
height: 40rpx;
|
||||
padding-right: 25rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.down::after {
|
||||
position: absolute;
|
||||
right: 5rpx;
|
||||
top: 50%;
|
||||
z-index: 9;
|
||||
content: '';
|
||||
margin-top: -6rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10rpx solid transparent;
|
||||
border-right: 10rpx solid transparent;
|
||||
border-top: 12rpx solid #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-banner {
|
||||
padding: 0rpx 30rpx;
|
||||
|
||||
.banner {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
height: 126rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-list {
|
||||
margin: 30rpx 30rpx;
|
||||
|
||||
.item {
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx 20rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.company {
|
||||
.logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
.name-text {
|
||||
max-width: 380rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.name-icon {
|
||||
width: 80rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.rate {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.xm {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.job {
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
padding: 10rpx 0;
|
||||
|
||||
.p {
|
||||
position: relative;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.lb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10rpx;
|
||||
z-index: 9;
|
||||
width: 150rpx;
|
||||
height: auto;
|
||||
|
||||
.text {
|
||||
padding-left: 6rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.vl {
|
||||
padding-left: 120rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 10rpx 0;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.link {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
background: #A92924;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user