8 changed files with 466 additions and 460 deletions
Unified View
Diff Options
-
435components/bussiness-components/packingStationItem.vue
-
1components/qn-map/qn-map.nvue
-
482pages/client-detail/base-paper-deals.vue
-
2pages/client-detail/basic-information.vue
-
2pages/client-detail/index.vue
-
2pages/mall/index.vue
-
2pages/search/index.vue
-
BINstatic/imgs/client/client-default.png
@ -1,229 +1,232 @@ |
|||||
<template> |
<template> |
||||
<view class="packing-area"> |
|
||||
<view class="info" @tap="goDetail"> |
|
||||
<image class="image" :src="info.enterpriseLogo || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'"></image> |
|
||||
<view class="content"> |
|
||||
<view class="title"> |
|
||||
<text class="text">{{ info.enterpriseName }}</text> |
|
||||
<image class="icon" :src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"></image> |
|
||||
</view> |
|
||||
<view class="desc"> |
|
||||
<text>{{ transformBusiness(info.business) }}</text> |
|
||||
</view> |
|
||||
<view v-if="info.whetherCooperation === 1" class="box-area"> |
|
||||
<view class="box"> |
|
||||
<view><text class="title">月采购量</text></view> |
|
||||
<view style="margin-top: 16rpx"> |
|
||||
<text class="value">{{ info.monthlyPurchaseQuantity ? `${info.monthlyPurchaseQuantity}吨` : '0' }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="box"> |
|
||||
<view><text class="title">月采购额</text></view> |
|
||||
<view style="margin-top: 16rpx"> |
|
||||
<text class="value">{{ info.monthlyTradingQuota ? `${info.monthlyTradingQuota}万` : '0' }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="box"> |
|
||||
<view><text class="title">最近购买</text></view> |
|
||||
<view style="margin-top: 16rpx"> |
|
||||
<text class="value">{{ transformDate(info.lastTradingDate) || '-' }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view v-if="info.whetherCooperation === 0" class="box-area"> |
|
||||
<view class="box"> |
|
||||
<view><text class="title">法定代表人</text></view> |
|
||||
<view style="margin-top: 16rpx"> |
|
||||
<text class="value">{{ info.legalPerson ? `${info.legalPerson}` : '' }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="box"> |
|
||||
<view><text class="title">注册资本</text></view> |
|
||||
<view style="margin-top: 16rpx"> |
|
||||
<text class="value">{{ info.registeredCapital ? `${info.registeredCapital}万` : '0' }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="box"> |
|
||||
<view><text class="title">成立时间</text></view> |
|
||||
<view style="margin-top: 16rpx"> |
|
||||
<text class="value">{{ transformDate(info.openingDate) || '-' }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="other"> |
|
||||
<view class="box"> |
|
||||
<image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image> |
|
||||
<text class="text">{{ info.detailedAddress || '未知' }}</text> |
|
||||
</view> |
|
||||
<view class="divide"></view> |
|
||||
<view class="box"> |
|
||||
<image class="icon" src="/static/imgs/client-list/phone-icon.png"></image> |
|
||||
<text class="text">{{ info.legalPerson + ' ' + transformPhoneNum(info.contactNumber) }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
<view class="packing-area"> |
||||
|
<view class="info" @tap="goDetail"> |
||||
|
<image class="image" :src="info.enterpriseLogo || '/static/imgs/client-default.png'"></image> |
||||
|
<view class="content"> |
||||
|
<view class="title"> |
||||
|
<text class="text">{{ info.enterpriseName }}</text> |
||||
|
<image |
||||
|
class="icon" |
||||
|
:src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'" |
||||
|
></image> |
||||
|
</view> |
||||
|
<view class="desc"> |
||||
|
<text>{{ transformBusiness(info.business) }}</text> |
||||
|
</view> |
||||
|
<view v-if="info.whetherCooperation === 1" class="box-area"> |
||||
|
<view class="box"> |
||||
|
<view><text class="title">月采购量</text></view> |
||||
|
<view style="margin-top: 16rpx"> |
||||
|
<text class="value">{{ info.monthlyPurchaseQuantity ? `${info.monthlyPurchaseQuantity}吨` : '0' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="box"> |
||||
|
<view><text class="title">月采购额</text></view> |
||||
|
<view style="margin-top: 16rpx"> |
||||
|
<text class="value">{{ info.monthlyTradingQuota ? `${info.monthlyTradingQuota}万` : '0' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="box"> |
||||
|
<view><text class="title">最近购买</text></view> |
||||
|
<view style="margin-top: 16rpx"> |
||||
|
<text class="value">{{ transformDate(info.lastTradingDate) || '-' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view v-if="info.whetherCooperation === 0" class="box-area"> |
||||
|
<view class="box"> |
||||
|
<view><text class="title">法定代表人</text></view> |
||||
|
<view style="margin-top: 16rpx"> |
||||
|
<text class="value">{{ info.legalPerson ? `${info.legalPerson}` : '' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="box"> |
||||
|
<view><text class="title">注册资本</text></view> |
||||
|
<view style="margin-top: 16rpx"> |
||||
|
<text class="value">{{ info.registeredCapital ? `${info.registeredCapital}万` : '0' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="box"> |
||||
|
<view><text class="title">成立时间</text></view> |
||||
|
<view style="margin-top: 16rpx"> |
||||
|
<text class="value">{{ transformDate(info.openingDate) || '-' }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="box"> |
||||
|
<image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image> |
||||
|
<text class="text">{{ info.detailedAddress || '未知' }}</text> |
||||
|
</view> |
||||
|
<view class="divide"></view> |
||||
|
<view class="box"> |
||||
|
<image class="icon" src="/static/imgs/client-list/phone-icon.png"></image> |
||||
|
<text class="text">{{ info.legalPerson + ' ' + transformPhoneNum(info.contactNumber) }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { go2 } from '@/utils/hook.js' |
import { go2 } from '@/utils/hook.js' |
||||
export default { |
export default { |
||||
props: { |
|
||||
info: { |
|
||||
type: Object, |
|
||||
default: () => ({ |
|
||||
enterpriseName: '广州市金骏彩色印务有限公司', |
|
||||
enterpriseLogo: '', |
|
||||
business: '生产画册、书刊、包装盒、手提袋子、快递箱', |
|
||||
whetherCooperation: 1, |
|
||||
monthlyPurchaseQuantity: 100, |
|
||||
monthlyTradingQuota: 200, |
|
||||
lastTradingDate: '2020-12-12', |
|
||||
openingDate: '2020-12-12', |
|
||||
legalPerson: '张三', |
|
||||
registeredCapital: 1000, |
|
||||
contactNumber: '13888888888', |
|
||||
detailedAddress: '广州市天河区天河路' |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
goDetail() { |
|
||||
go2('client-detail', { id: this.info.enterpriseId }) |
|
||||
}, |
|
||||
transformBusiness(business) { |
|
||||
let text = business?.trim() || '未知' |
|
||||
if (text.length > 17) { |
|
||||
text = text.substr(0, 17) + '...' |
|
||||
} |
|
||||
return '主营:' + text |
|
||||
}, |
|
||||
transformDate(date) { |
|
||||
if (date) { |
|
||||
return date.split('-').join('/') |
|
||||
} |
|
||||
return '' |
|
||||
}, |
|
||||
transformPhoneNum(phoneNum) { |
|
||||
if (phoneNum) { |
|
||||
if (this.hasLogin) { |
|
||||
return phoneNum |
|
||||
} else { |
|
||||
return phoneNum.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') |
|
||||
} |
|
||||
} |
|
||||
return '--' |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
hasLogin() { |
|
||||
return this.$store.state.qnToken != '' |
|
||||
} |
|
||||
} |
|
||||
|
props: { |
||||
|
info: { |
||||
|
type: Object, |
||||
|
default: () => ({ |
||||
|
enterpriseName: '广州市金骏彩色印务有限公司', |
||||
|
enterpriseLogo: '', |
||||
|
business: '生产画册、书刊、包装盒、手提袋子、快递箱', |
||||
|
whetherCooperation: 1, |
||||
|
monthlyPurchaseQuantity: 100, |
||||
|
monthlyTradingQuota: 200, |
||||
|
lastTradingDate: '2020-12-12', |
||||
|
openingDate: '2020-12-12', |
||||
|
legalPerson: '张三', |
||||
|
registeredCapital: 1000, |
||||
|
contactNumber: '13888888888', |
||||
|
detailedAddress: '广州市天河区天河路' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
goDetail() { |
||||
|
go2('client-detail', { id: this.info.enterpriseId }) |
||||
|
}, |
||||
|
transformBusiness(business) { |
||||
|
let text = business?.trim() || '未知' |
||||
|
if (text.length > 17) { |
||||
|
text = text.substr(0, 17) + '...' |
||||
|
} |
||||
|
return '主营:' + text |
||||
|
}, |
||||
|
transformDate(date) { |
||||
|
if (date) { |
||||
|
return date.split('-').join('/') |
||||
|
} |
||||
|
return '' |
||||
|
}, |
||||
|
transformPhoneNum(phoneNum) { |
||||
|
if (phoneNum) { |
||||
|
if (this.hasLogin) { |
||||
|
return phoneNum |
||||
|
} else { |
||||
|
return phoneNum.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') |
||||
|
} |
||||
|
} |
||||
|
return '--' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
hasLogin() { |
||||
|
return this.$store.state.qnToken != '' |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
.packing-area { |
.packing-area { |
||||
width: 750rpx; |
|
||||
background-color: #fff; |
|
||||
.info { |
|
||||
width: 750rpx; |
|
||||
padding: 30rpx 32rpx 48rpx; |
|
||||
border-bottom: 2rpx solid #dddddd; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: flex-start; |
|
||||
.image { |
|
||||
width: 140rpx; |
|
||||
height: 140rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
margin-right: 20rpx; |
|
||||
} |
|
||||
.content { |
|
||||
flex-grow: 1; |
|
||||
.title { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
.text { |
|
||||
font-size: 32rpx; |
|
||||
color: #000000; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
.icon { |
|
||||
width: 100rpx; |
|
||||
height: 32rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
margin-left: 8rpx; |
|
||||
} |
|
||||
} |
|
||||
.desc { |
|
||||
margin-top: 14rpx; |
|
||||
font-size: 26rpx; |
|
||||
color: #333333; |
|
||||
} |
|
||||
.box-area { |
|
||||
margin-top: 30rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-end; |
|
||||
.box { |
|
||||
width: 170rpx; |
|
||||
.title { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: center; |
|
||||
font-size: 24rpx; |
|
||||
color: #888888; |
|
||||
} |
|
||||
.value { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: center; |
|
||||
font-size: 28rpx; |
|
||||
color: #333333; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.other { |
|
||||
width: 750rpx; |
|
||||
padding: 24rpx 0; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
.divide { |
|
||||
width: 2rpx; |
|
||||
height: 32rpx; |
|
||||
background: #d8d8d8; |
|
||||
} |
|
||||
.box { |
|
||||
width: 340rpx; |
|
||||
margin: 0 32rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
.icon { |
|
||||
width: 52rpx; |
|
||||
height: 52rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
margin-right: 10rpx; |
|
||||
} |
|
||||
.text { |
|
||||
font-size: 24rpx; |
|
||||
color: #555555; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
width: 750rpx; |
||||
|
background-color: #fff; |
||||
|
.info { |
||||
|
width: 750rpx; |
||||
|
padding: 30rpx 32rpx 48rpx; |
||||
|
border-bottom: 2rpx solid #dddddd; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: flex-start; |
||||
|
.image { |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
.content { |
||||
|
flex-grow: 1; |
||||
|
.title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
.text { |
||||
|
font-size: 32rpx; |
||||
|
color: #000000; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.icon { |
||||
|
width: 100rpx; |
||||
|
height: 32rpx; |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 8rpx; |
||||
|
} |
||||
|
} |
||||
|
.desc { |
||||
|
margin-top: 14rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.box-area { |
||||
|
margin-top: 30rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
.box { |
||||
|
width: 170rpx; |
||||
|
.title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
font-size: 24rpx; |
||||
|
color: #888888; |
||||
|
} |
||||
|
.value { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.other { |
||||
|
width: 750rpx; |
||||
|
padding: 24rpx 0; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.divide { |
||||
|
width: 2rpx; |
||||
|
height: 32rpx; |
||||
|
background: #d8d8d8; |
||||
|
} |
||||
|
.box { |
||||
|
width: 340rpx; |
||||
|
margin: 0 32rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
.icon { |
||||
|
width: 52rpx; |
||||
|
height: 52rpx; |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
.text { |
||||
|
font-size: 24rpx; |
||||
|
color: #555555; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save