9 changed files with 595 additions and 318 deletions
Unified View
Diff Options
-
12apis/clientDetailApi.js
-
9common/css/reset.scss
-
45pages.json
-
658pages/client-detail/basic-information.vue
-
61pages/client-detail/custom-header.vue
-
128pages/client-detail/index.vue
-
BINstatic/imgs/client-detail/address-icon.png
-
BINstatic/imgs/client-detail/arrow-down-icon.png
-
BINstatic/imgs/client-detail/arrow-up-icon.png
@ -0,0 +1,12 @@ |
|||||
|
import http from '../utils/http/index.js' |
||||
|
|
||||
|
// 纸掌柜--客户详情--基础信息
|
||||
|
export function getBaseInfo(data) { |
||||
|
return http.get( |
||||
|
{ |
||||
|
url: '/yyt-uec/get/customer/detail/base-info', |
||||
|
data |
||||
|
} |
||||
|
) |
||||
|
} |
||||
|
|
||||
@ -1,238 +1,540 @@ |
|||||
<template> |
<template> |
||||
<view class="warpper"> |
<view class="warpper"> |
||||
<view class="card-box"> |
|
||||
<view class="card-header"> |
|
||||
<view class="left-text">基本信息</view> |
|
||||
<view class="right-text">跟进记录</view> |
|
||||
</view> |
|
||||
<view class="card-content"> |
|
||||
<view class="info"> |
|
||||
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" |
|
||||
mode=""></image> |
|
||||
<view class="content"> |
|
||||
<view class="title"> |
|
||||
<text class="text">广州市金骏彩色印务有限公司</text> |
|
||||
<image class="icon" |
|
||||
:src="info.registrationStatus ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"> |
|
||||
</image> |
|
||||
</view> |
|
||||
<view class="desc"> |
|
||||
<text>主营:生产画册、书刊、包装盒、手提袋子、手机钢化膜盒子、蛋糕盒等。</text> |
|
||||
|
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;"> |
||||
|
<view class="card-box"> |
||||
|
<view class="card-header"> |
||||
|
<view class="left-text">基本信息</view> |
||||
|
<view class="right-text">跟进记录</view> |
||||
|
</view> |
||||
|
<view class="card-content"> |
||||
|
<view class="info"> |
||||
|
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image> |
||||
|
<view class="content"> |
||||
|
<view class="title"> |
||||
|
<text class="text">{{info.name}}</text> |
||||
|
<image |
||||
|
class="icon" |
||||
|
:src="info.registrationStatus ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'" |
||||
|
></image> |
||||
|
</view> |
||||
|
<view class="desc u-line-2"> |
||||
|
<text>主营:{{ info.mainBusiness }}</text> |
||||
|
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
|
||||
<view class="company-box"> |
|
||||
<view> |
|
||||
|
<view class="company-box"> |
||||
<view> |
<view> |
||||
<text class="title">法定代表人</text> |
|
||||
|
<view><text class="title">法定代表人</text></view> |
||||
|
<view class="value">{{ info.legalPersonName }}</view> |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<view><text class="title">注册资本</text></view> |
||||
|
<view class="value">{{ info.registeredCapital }}万</view> |
||||
</view> |
</view> |
||||
<view class="value"> |
|
||||
曹孟德 |
|
||||
|
<view class=""> |
||||
|
<view><text class="title">成立时间</text></view> |
||||
|
<view class="value">{{ transformDate(info.foundDate) }}</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
<view class=""> |
|
||||
<view> |
|
||||
<text class="title">注册资本</text> |
|
||||
|
<view class="site"> |
||||
|
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
||||
|
<text class="text">{{ info.locProvinceName }}{{ info.locCityName }} {{ info.locDetail }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<uGap></uGap> |
||||
|
<view class="card-box"> |
||||
|
<view class="card-header"><view class="left-text">工商信息</view></view> |
||||
|
<view class="card-content"> |
||||
|
<view class="gs-info"> |
||||
|
<view class="row"> |
||||
|
<view class="info-title"> |
||||
|
<text> |
||||
|
社会统一 |
||||
|
<br /> |
||||
|
信用代码: |
||||
|
</text> |
||||
|
</view> |
||||
|
<view class="info-value"><text>{{info.uniformSocialCreditCode}}</text></view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="info-title"><text>营业执照:</text></view> |
||||
|
<view class="look-over" @tap="previewImg(info.businessLicenseImg, [info.businessLicenseImg])"><text>点击查看</text></view> |
||||
</view> |
</view> |
||||
<view class="value"> |
|
||||
1727.2万 |
|
||||
|
<view class="row"> |
||||
|
<view class="info-title"><text>所属行业:</text></view> |
||||
|
<view class="info-value"><text>{{info.belongIndustry}}</text></view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="info-title"><text>登记状态:</text></view> |
||||
|
<view class="info-value"><text>{{info.registrationStatus}}</text></view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
<view class=""> |
|
||||
<view> |
|
||||
<text class="title">成立时间</text> |
|
||||
|
</view> |
||||
|
</view> |
||||
|
<uGap></uGap> |
||||
|
<view class="card-box"> |
||||
|
<view class="card-header"><view class="left-text">厂房信息</view></view> |
||||
|
<view class="card-content"> |
||||
|
<view class="cf-info"> |
||||
|
<view class="row"> |
||||
|
<view class="left"> |
||||
|
<view class="info-title"><text>产房面积:</text></view> |
||||
|
<view class="info-value"><text>{{info.plantArea}}m²</text></view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class="info-title"><text>年营业额:</text></view> |
||||
|
<view class="info-value"><text>{{info.annualTurnover}}万</text></view> |
||||
|
</view> |
||||
</view> |
</view> |
||||
<view class="value"> |
|
||||
2021/12/22 |
|
||||
|
<view class="row"> |
||||
|
<view class="left"> |
||||
|
<view class="info-title"><text>产房照片:</text></view> |
||||
|
<view class="look-over" @tap="previewImg(info.factoryImgList[0], info.factoryImgList)"><text>点击查看</text></view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class="info-title"><text>租赁合同:</text></view> |
||||
|
<view class="look-over" @tap="previewImg(info.leaseContract, [info.leaseContract])"><text>点击查看</text></view> |
||||
|
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
<view class="site"> |
||||
|
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
||||
|
<text class="text">{{info.factoryAddress}}</text> |
||||
|
</view> |
||||
</view> |
</view> |
||||
<view class="site"> |
|
||||
<image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image> |
|
||||
<text class="text">广东省广州市天河区车陂街道联合社区西区8栋8408</text> |
|
||||
|
</view> |
||||
|
<uGap></uGap> |
||||
|
<view class="card-box"> |
||||
|
<view class="card-header"><view class="left-text">法律诉讼</view></view> |
||||
|
<view class="card-content" style="margin: 20rpx 0rpx;"> |
||||
|
<view class="fl-info" v-for="(item, index) in 2" :key="index"> |
||||
|
<view class="row"> |
||||
|
<view class="title"> |
||||
|
<view class="left"> |
||||
|
<view class="dot"></view> |
||||
|
<view><text>买卖合同纠纷案件执行首次执行裁定书</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>案件:</text></view> |
||||
|
<view><text>金融借款合同纠纷</text></view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>案号:</text></view> |
||||
|
<view><text>(2019)鲁0911执1608号</text></view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>裁判日期:</text></view> |
||||
|
<view><text>2019/12/09</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="see-more"> |
||||
|
<view class="" @tap="seemoreTap"> |
||||
|
<text>查看更多</text> |
||||
|
<image class="icon" :src="!seemoreFlag ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<uGap></uGap> |
||||
|
<view class="card-box"> |
||||
|
<view class="card-header"><view class="left-text">经营异常</view></view> |
||||
|
<view class="card-content" style="margin: 20rpx 0rpx;"> |
||||
|
<view class="fl-info" v-for="(item, index) in 2" :key="index"> |
||||
|
<view class="row"> |
||||
|
<view class="title"> |
||||
|
<view class="left"> |
||||
|
<view class="dot"></view> |
||||
|
<view><text>编号 44012020013906</text></view> |
||||
|
</view> |
||||
|
<view class="valid"><text>有效</text></view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>抵押人:</text></view> |
||||
|
<view><text>金融借款合同纠纷</text></view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>抵押权人:</text></view> |
||||
|
<view><text>(2019)鲁0911执1608号</text></view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>债务期限:</text></view> |
||||
|
<view><text>2020/01/24~2023/01/24</text></view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>债务数额:</text></view> |
||||
|
<view><text>243.95万人民币</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
<uGap></uGap> |
<uGap></uGap> |
||||
</view> |
|
||||
|
<view class="card-box"> |
||||
|
<view class="card-header"><view class="left-text">征信信息</view></view> |
||||
|
<view class="card-content" style="margin: 20rpx 0rpx;"> |
||||
|
<view class="fl-info" v-for="(item, index) in 2" :key="index"> |
||||
|
<view class="row"> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>立案日期:</text></view> |
||||
|
<view><text>2021/07/21</text></view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>案号:</text></view> |
||||
|
<view><text>(2019)鲁0911执1608号</text></view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>执行标准:</text></view> |
||||
|
<view><text>24563345元</text></view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="left-text"><text>执行法院:</text></view> |
||||
|
<view><text>太原市杏花岭区人民法院</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-list> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import uGap from '@/components/u-gap/u-gap.vue' |
|
||||
export default { |
|
||||
components: { |
|
||||
uGap |
|
||||
|
import uGap from '@/components/u-gap/u-gap.vue' |
||||
|
import { getBaseInfo } from '@/apis/clientDetailApi' |
||||
|
export default { |
||||
|
components: { |
||||
|
uGap |
||||
|
}, |
||||
|
props: { |
||||
|
customerId: { |
||||
|
type: String, |
||||
|
default: null |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
option: { |
||||
|
size: 10, |
||||
|
auto: true, |
||||
|
emptyText: '暂无数据~', |
||||
|
background: '#F7F8FA', |
||||
|
disabled: true |
||||
|
}, |
||||
|
info: { |
||||
|
annualTurnover: 0, |
||||
|
belongIndustry: 'string', |
||||
|
businessLicenseImg: 'string', |
||||
|
factoryAddress: 'string', |
||||
|
factoryImgList: ['string'], |
||||
|
foundDate: '2022-01-05T02:20:30.776Z', |
||||
|
id: 0, |
||||
|
leaseContract: 'string', |
||||
|
legalPersonName: 'string', |
||||
|
locCityId: 0, |
||||
|
locCityName: 'string', |
||||
|
locDetail: 'string', |
||||
|
locDistriceName: 'string', |
||||
|
locDistrictId: 0, |
||||
|
locProvinceId: 0, |
||||
|
locProvinceName: 'string', |
||||
|
locStreetId: 0, |
||||
|
locStreetName: 'string', |
||||
|
mainBusiness: 'string', |
||||
|
name: 'string', |
||||
|
plantArea: 0, |
||||
|
registeredCapital: 0, |
||||
|
registrationStatus: 'string', |
||||
|
shortName: 'string', |
||||
|
uniformSocialCreditCode: 'string' |
||||
|
}, |
||||
|
seemoreFlag: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getBaseInfo() { |
||||
|
getBaseInfo({customerId: this.customerId }).then(res => { |
||||
|
console.log('基础信息', res) |
||||
|
this.info = res |
||||
|
}) |
||||
}, |
}, |
||||
data() { |
|
||||
return { |
|
||||
info: { |
|
||||
"annualTurnover": 0, |
|
||||
"belongIndustry": "string", |
|
||||
"businessLicenseImg": "string", |
|
||||
"factoryAddress": "string", |
|
||||
"factoryImgList": [ |
|
||||
"string" |
|
||||
], |
|
||||
"foundDate": "2022-01-05T02:20:30.776Z", |
|
||||
"id": 0, |
|
||||
"leaseContract": "string", |
|
||||
"legalPersonName": "string", |
|
||||
"locCityId": 0, |
|
||||
"locCityName": "string", |
|
||||
"locDetail": "string", |
|
||||
"locDistriceName": "string", |
|
||||
"locDistrictId": 0, |
|
||||
"locProvinceId": 0, |
|
||||
"locProvinceName": "string", |
|
||||
"locStreetId": 0, |
|
||||
"locStreetName": "string", |
|
||||
"mainBusiness": "string", |
|
||||
"name": "string", |
|
||||
"plantArea": 0, |
|
||||
"registeredCapital": 0, |
|
||||
"registrationStatus": "string", |
|
||||
"shortName": "string", |
|
||||
"uniformSocialCreditCode": "string" |
|
||||
} |
|
||||
} |
|
||||
|
seemoreTap() { |
||||
|
this.seemoreFlag = !this.seemoreFlag |
||||
}, |
}, |
||||
methods: { |
|
||||
|
|
||||
} |
|
||||
|
transformDate(date) { |
||||
|
if (date) { |
||||
|
return `${date[0]}/${date[1]}/${date[2]}` |
||||
|
} |
||||
|
return '' |
||||
|
}, |
||||
|
previewImg(index, list) { |
||||
|
uni.previewImage({ |
||||
|
urls: list, |
||||
|
current: index |
||||
|
}); |
||||
|
}, |
||||
|
downCallback() {}, |
||||
|
upCallback() {} |
||||
} |
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
.warpper { |
|
||||
width: 750rpx; |
|
||||
height: 100%; |
|
||||
|
.warpper { |
||||
|
width: 750rpx; |
||||
|
height: 100%; |
||||
|
|
||||
.card-box { |
|
||||
.card-header { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
height: 88rpx; |
|
||||
line-height: 88rpx; |
|
||||
border-bottom: 2rpx solid #DDDDDD; |
|
||||
padding: 0rpx 32rpx; |
|
||||
|
.card-box { |
||||
|
.card-header { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
height: 88rpx; |
||||
|
line-height: 88rpx; |
||||
|
border-bottom: 2rpx solid #dddddd; |
||||
|
padding: 0rpx 32rpx; |
||||
|
|
||||
.left-text { |
|
||||
font-size: 30rpx; |
|
||||
color: #000000; |
|
||||
letter-spacing: 0; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
.left-text { |
||||
|
font-size: 30rpx; |
||||
|
color: #000000; |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
.right-text { |
|
||||
font-size: 28rpx; |
|
||||
color: #007AFF; |
|
||||
letter-spacing: 0; |
|
||||
text-align: right; |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
|
.right-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #007aff; |
||||
|
letter-spacing: 0; |
||||
|
text-align: right; |
||||
|
font-weight: 400; |
||||
} |
} |
||||
} |
} |
||||
|
} |
||||
|
|
||||
.card-content { |
|
||||
.info { |
|
||||
width: 750rpx; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
padding: 20rpx 32rpx; |
|
||||
|
.card-content { |
||||
|
.info { |
||||
|
width: 750rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
padding: 20rpx 32rpx; |
||||
|
|
||||
.image { |
|
||||
width: 140rpx; |
|
||||
height: 140rpx; |
|
||||
flex: 0 0 140rpx; |
|
||||
margin-right: 20rpx; |
|
||||
} |
|
||||
|
.image { |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
flex: 0 0 140rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
.title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
|
||||
.content { |
|
||||
.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; |
|
||||
} |
|
||||
|
.text { |
||||
|
font-size: 32rpx; |
||||
|
color: #000000; |
||||
|
font-weight: 600; |
||||
} |
} |
||||
|
|
||||
.desc { |
|
||||
margin-top: 14rpx; |
|
||||
font-size: 26rpx; |
|
||||
color: #333333; |
|
||||
line-height: 1.6; |
|
||||
|
.icon { |
||||
|
width: 100rpx; |
||||
|
height: 32rpx; |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 8rpx; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
|
.desc { |
||||
|
margin-top: 14rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #333333; |
||||
|
line-height: 1.6; |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
|
} |
||||
|
|
||||
.company-box { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-around; |
|
||||
align-items: center; |
|
||||
|
.company-box { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
padding: 34rpx 0rpx; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 24rpx; |
||||
|
color: #888888; |
||||
|
letter-spacing: 0; |
||||
text-align: center; |
text-align: center; |
||||
padding: 34rpx 0rpx; |
|
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
.title { |
|
||||
font-size: 24rpx; |
|
||||
color: #888888; |
|
||||
letter-spacing: 0; |
|
||||
text-align: center; |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
|
.value { |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
letter-spacing: 0; |
||||
|
text-align: center; |
||||
|
padding-top: 16rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
|
||||
.value { |
|
||||
font-size: 28rpx; |
|
||||
color: #333333; |
|
||||
letter-spacing: 0; |
|
||||
text-align: center; |
|
||||
padding-top: 16rpx; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
.site { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
background: #ffffff; |
||||
|
border-top: 2rpx solid #dddddd; |
||||
|
padding: 0rpx 32rpx; |
||||
|
|
||||
|
.icon { |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 10rpx; |
||||
} |
} |
||||
|
|
||||
.site { |
|
||||
|
.text { |
||||
|
font-size: 26rpx; |
||||
|
color: #333333; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
line-height: 32rpx; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
} |
||||
|
.see-more { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
background: #ffffff; |
||||
|
border-top: 2rpx solid #dddddd; |
||||
|
padding: 0rpx 32rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #007aff; |
||||
|
letter-spacing: 0; |
||||
|
text-align: center; |
||||
|
font-weight: 400; |
||||
|
.icon { |
||||
|
width: 24rpx; |
||||
|
height: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
.gs-info { |
||||
|
padding: 20rpx 32rpx; |
||||
|
.row { |
||||
display: flex; |
display: flex; |
||||
flex-direction: row; |
flex-direction: row; |
||||
align-items: center; |
align-items: center; |
||||
height: 80rpx; |
|
||||
line-height: 80rpx; |
|
||||
background: #FFFFFF; |
|
||||
border-top: 2rpx solid #DDDDDD; |
|
||||
padding: 0rpx 32rpx; |
|
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
.cf-info { |
||||
|
padding: 20rpx 32rpx; |
||||
|
|
||||
.icon { |
|
||||
width: 32rpx; |
|
||||
height: 32rpx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
margin-right: 10rpx; |
|
||||
} |
|
||||
|
.row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
.left { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.right { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
} |
||||
|
|
||||
.text { |
|
||||
font-size: 26rpx; |
|
||||
|
.fl-info { |
||||
|
padding-bottom: 20rpx; |
||||
|
padding-left: 32rpx; |
||||
|
padding-right: 32rpx; |
||||
|
.row { |
||||
|
background: #f7f8fa; |
||||
|
border-radius: 8px; |
||||
|
padding: 24rpx; |
||||
|
.title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
color: #333333; |
color: #333333; |
||||
letter-spacing: 0; |
letter-spacing: 0; |
||||
text-align: left; |
|
||||
line-height: 32rpx; |
|
||||
|
font-weight: 500; |
||||
|
margin-bottom: 20rpx; |
||||
|
.left { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.dot { |
||||
|
width: 10rpx; |
||||
|
height: 10rpx; |
||||
|
border-radius: 50%; |
||||
|
background: #adbac9; |
||||
|
margin-right: 8rpx; |
||||
|
} |
||||
|
.valid { |
||||
|
font-size: 28rpx; |
||||
|
color: #36cfc9; |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
.other { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #888888; |
||||
|
letter-spacing: 0; |
||||
font-weight: 400; |
font-weight: 400; |
||||
|
margin-bottom: 16rpx; |
||||
|
.left-text { |
||||
|
width: 140rpx; |
||||
|
margin-right: 8rpx; |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
} |
} |
||||
|
.info-title { |
||||
|
font-size: 28rpx; |
||||
|
color: #888888; |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 400; |
||||
|
margin-right: 8rpx; |
||||
|
width: 140rpx; |
||||
|
} |
||||
|
.info-value { |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.look-over { |
||||
|
font-size: 28rpx; |
||||
|
color: #007aff; |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
@ -1,45 +1,42 @@ |
|||||
<template> |
<template> |
||||
<view |
|
||||
class="header" |
|
||||
:style="{ |
|
||||
height: `${statusBarHeight + 44}px`, |
|
||||
paddingTop: `${statusBarHeight}px` |
|
||||
}" |
|
||||
> |
|
||||
<slot name="icon"> |
|
||||
<uni-icons type="back" size="28" @click="back" /> |
|
||||
</slot> |
|
||||
<slot> |
|
||||
</slot> |
|
||||
</view> |
|
||||
|
<view |
||||
|
class="header" |
||||
|
:style="{ |
||||
|
height: `${statusBarHeight + 44}px`, |
||||
|
paddingTop: `${statusBarHeight}px` |
||||
|
}" |
||||
|
> |
||||
|
<slot name="icon"><uni-icons type="back" size="28" @click="back" /></slot> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { back } from '@/utils/hook.js' |
import { back } from '@/utils/hook.js' |
||||
export default { |
export default { |
||||
data() { |
|
||||
return { |
|
||||
statusBarHeight: 20 |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight - 0 |
|
||||
}, |
|
||||
methods: { |
|
||||
back |
|
||||
} |
|
||||
|
data() { |
||||
|
return { |
||||
|
statusBarHeight: 20 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight - 0 |
||||
|
}, |
||||
|
methods: { |
||||
|
back |
||||
|
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
.header { |
.header { |
||||
width: 750rpx; |
|
||||
padding: 0 32rpx 10rpx 20rpx; |
|
||||
background-color: #fff; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
border-bottom: 2rpx solid #d8d8d8; |
|
||||
|
width: 750rpx; |
||||
|
padding: 0 32rpx 10rpx 20rpx; |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
border-bottom: 2rpx solid #d8d8d8; |
||||
} |
} |
||||
</style> |
</style> |
||||
@ -1,80 +1,82 @@ |
|||||
<template> |
<template> |
||||
<view class="warpper"> |
<view class="warpper"> |
||||
<customHeader> |
|
||||
<view class="header-title"> |
|
||||
客户详情 |
|
||||
</view> |
|
||||
<view class="right-title"> |
|
||||
客户授信 |
|
||||
</view> |
|
||||
</customHeader> |
|
||||
|
<qnHeader class="header"> |
||||
|
<!-- <view class="header"> --> |
||||
|
<view class="header-title">客户详情</view> |
||||
|
<view class="right-title">客户授信</view> |
||||
|
<!-- </view> --> |
||||
|
</qnHeader> |
||||
<view> |
<view> |
||||
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" |
|
||||
activeColor="#007AFF"></uni-segmented-control> |
|
||||
<view class="content"> |
|
||||
<view v-show="current === 0"> |
|
||||
<basicInformation></basicInformation> |
|
||||
|
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control> |
||||
|
|
||||
|
<view class="content"> |
||||
|
<view v-show="current === 0"><basicInformation ref="basicInformationRef" :customerId="customerId"></basicInformation></view> |
||||
|
<view v-show="current === 1"><equipmentInformation></equipmentInformation></view> |
||||
|
<view v-show="current === 2"><basePaperDeals></basePaperDeals></view> |
||||
|
<view v-show="current === 3"><wastePaperTrading></wastePaperTrading></view> |
||||
</view> |
</view> |
||||
<view v-show="current === 1"> |
|
||||
<equipmentInformation></equipmentInformation> |
|
||||
</view> |
|
||||
<view v-show="current === 2"> |
|
||||
<basePaperDeals></basePaperDeals> |
|
||||
</view> |
|
||||
<view v-show="current === 3"> |
|
||||
<wastePaperTrading></wastePaperTrading> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import customHeader from './custom-header.vue' |
|
||||
import basicInformation from './basic-information.vue' |
|
||||
import equipmentInformation from './equipment-information.vue' |
|
||||
import basePaperDeals from './base-paper-deals.vue' |
|
||||
import wastePaperTrading from './waste-paper-trading.vue' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
customHeader, |
|
||||
basicInformation, |
|
||||
equipmentInformation, |
|
||||
basePaperDeals, |
|
||||
wastePaperTrading |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
current: 0, |
|
||||
items: ['基础信息', '设备信息', '原纸交易', '废纸交易'] |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
onClickItem(e) { |
|
||||
console.log('e', e) |
|
||||
this.current = e.currentIndex |
|
||||
} |
|
||||
|
import qnHeader from '@/components/qn-header/qn-header.vue' |
||||
|
import basicInformation from './basic-information.vue' |
||||
|
import equipmentInformation from './equipment-information.vue' |
||||
|
import basePaperDeals from './base-paper-deals.vue' |
||||
|
import wastePaperTrading from './waste-paper-trading.vue' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
qnHeader, |
||||
|
basicInformation, |
||||
|
equipmentInformation, |
||||
|
basePaperDeals, |
||||
|
wastePaperTrading |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
current: 0, |
||||
|
items: ['基础信息', '设备信息', '原纸交易', '废纸交易'], |
||||
|
customerId: null, |
||||
|
|
||||
} |
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.customerId = option.id || '800890' |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.basicInformationRef.getBaseInfo() |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
onClickItem(e) { |
||||
|
console.log('e', e) |
||||
|
this.current = e.currentIndex |
||||
|
}, |
||||
} |
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.warpper { |
|
||||
.header-title { |
|
||||
font-size: 36rpx; |
|
||||
color: #000000; |
|
||||
letter-spacing: 0; |
|
||||
text-align: center; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
.warpper { |
||||
|
.header { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.header-title { |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
letter-spacing: 0; |
||||
|
text-align: center; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
.right-title { |
|
||||
font-size: 28rpx; |
|
||||
color: #007AFF; |
|
||||
text-align: center; |
|
||||
line-height: 40rpx; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
.right-title { |
||||
|
font-size: 28rpx; |
||||
|
color: #007aff; |
||||
|
text-align: center; |
||||
|
line-height: 40rpx; |
||||
|
font-weight: 500; |
||||
} |
} |
||||
|
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save