8 changed files with 466 additions and 460 deletions
Split 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> |
|||
<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> |
|||
|
|||
<script> |
|||
import { go2 } from '@/utils/hook.js' |
|||
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> |
|||
|
|||
<style lang="scss"> |
|||
.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> |
|||
Write
Preview
Loading…
Cancel
Save