【前端】云工厂的纸掌柜app
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

366 lines
10 KiB

<template>
<view>
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="客户授信"></uni-nav-bar>
<qn-form-item type="title" label="授信客户"></qn-form-item>
<qn-form-item label="选择客户" required>
<qn-easyinput
:maxlength="20"
@blur="showCompany"
@confirm="confirmCompany"
v-model="form.name"
:inputBorder="false"
text="right"
placeholder="请选择授信的客户"
></qn-easyinput>
</qn-form-item>
<qn-form-item required label="选择账号盘商">
<qn-data-picker
v-model="form.supplierId"
text="right"
:border="false"
placeholder="请选择账号下的盘商"
popup-title="请选择盘商"
:map="{ text: 'name', value: 'id' }"
:clear-icon="false"
:localdata="supplierList"
></qn-data-picker>
</qn-form-item>
<qn-form-item type="title" label="选择授信方式"></qn-form-item>
<view class="card_area">
<view
class="card_area-item"
:class="{ selected: creditType == 'month', hasSelected: hasCreditList.includes('month') }"
@click="selectCreditType('month')"
>
<image class="selected-icon" v-if="creditType == 'month'" src="/static/imgs/client-credit/selected-icon.png"></image>
<image class="hasSelected-icon" v-if="hasCreditList.includes('month')" src="/static/imgs/client-credit/has-selected-icon.png"></image>
<image class="card_area-item-icon" src="/static/imgs/client-credit/month-credit-icon.png"></image>
<text class="card_area-item-text">月结授信</text>
</view>
<view class="card_area-item" :class="{ selected: creditType == 'fs' }" @click="selectCreditType('fs')">
<image class="selected-icon" v-if="creditType == 'fs'" src="/static/imgs/client-credit/selected-icon.png"></image>
<image class="hasSelected-icon" v-if="hasCreditList.includes('fs')" src="/static/imgs/client-credit/has-selected-icon.png"></image>
<image class="card_area-item-icon" src="/static/imgs/client-credit/fs-credit-icon.png"></image>
<text class="card_area-item-text">飞算授信</text>
</view>
</view>
<uni-popup ref="popup" type="bottom">
<view class="popup_modal">
<slot name="title">
<view class="popup_modal-title">请选择以下公司</view>
</slot>
<scroll-view scroll-y="true" class="popup_modal-scroll">
<view
@click="selectCompany(item.enterpriseId, item.enterpriseName)"
class="popup_modal-scroll-item"
v-for="item in searchList"
:key="item.enterpriseId"
>
{{ item.enterpriseName }}
</view>
</scroll-view>
</view>
</uni-popup>
<qn-footer fixed height="120rpx">
<view class="button_area">
<view :class="{ button__submit: true, 'button__submit--disabled': !canSubmit }" @click="canSubmit && next()">
<text class="text">下一步</text>
</view>
</view>
</qn-footer>
</view>
</template>
<script>
import { back, go2 } from '@/utils/hook.js'
import { getCompanyList, getCustomerCreditInfo } from '@/apis/clientCreditApi.js'
import { getBaseInfo } from '@/apis/commonApi.js'
export default {
data() {
return {
form: {
enterpriseId: null,
name: null,
supplierId: this.$store.state.supplierInfo.supplierId || null
},
creditType: null,
searchList: [],
supplierList: [],
hasCreditList: [],
isFinishedContract: false, // 是否该账户与企业签署过担保协议
timer: null
}
},
onLoad(option) {
if (option.enterpriseId) {
this.form.name = option.name
this.form.enterpriseId = option.enterpriseId
if (option.name) {
getCompanyList({ enterpriseName: option.name }).then((res) => {
if (res) {
this.searchList = res.records
}
})
}
}
},
onShow() {
if (this.form.enterpriseId && this.form.supplierId) {
console.log('onshow 获取授信信息')
this.getCreditList({ mallSupplierId: this.form.supplierId, customerEnterpriseId: this.form.enterpriseId })
}
},
methods: {
back,
showCompany(e) {
let enterpriseName = e.detail.value.trim()
if (enterpriseName) {
getCompanyList({ enterpriseName }).then((res) => {
if (res) {
this.searchList = res.records
if (this.searchList.length > 0) {
this.$refs.popup.open('bottom')
} else {
uni.showToast({
title: '没有搜索到该公司',
icon: 'none'
})
}
}
})
}
},
confirmCompany(enterpriseName) {
if (enterpriseName) {
getCompanyList({ enterpriseName }).then((res) => {
if (res) {
this.searchList = res.records
if (this.searchList.length > 0) {
this.$refs.popup.open('bottom')
}
}
})
}
},
selectCompany(enterpriseId, enterpriseName) {
this.$refs.popup.close()
this.form.name = enterpriseName
this.form.enterpriseId = enterpriseId
},
next() {
// 通过searchList获取企业信息
let target = this.searchList.find((item) => item.enterpriseId === this.form.enterpriseId)
// 月结授信直接填表授信即可
if (this.creditType === 'month') {
if (!target) {
uni.showToast({
title: '请选择客户',
icon: 'none'
})
return
}
go2('month-credit', {
enterpriseId: this.form.enterpriseId,
enterpriseName: target.enterpriseName,
legalPersonName: target.legalPerson,
mallSupplierId: this.form.supplierId
})
}
if (this.creditType === 'fs') {
go2('guarantee-agreement', {
enterpriseId: this.form.enterpriseId,
enterpriseName: target.enterpriseName,
legalPersonName: target.legalPerson,
mallSupplierId: this.form.supplierId,
isFinishedContract: this.isFinishedContract
})
}
},
selectCreditType(creditType) {
if (this.hasCreditList.includes(creditType)) {
return
}
if (!this.form.supplierId) {
uni.showToast({
title: '请选择账号下的盘商',
icon: 'none'
})
return
}
if (!this.form.enterpriseId) {
uni.showToast({
icon: 'none',
title: '请先选择客户'
})
return
}
this.creditType = creditType
},
getCreditList(data) {
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
this.timer = setTimeout(() => {
getCustomerCreditInfo(data).then((res) => {
if (res) {
this.hasCreditList = []
res.hasCredit && this.hasCreditList.push('month')
res.hasFeisuanCredit && this.hasCreditList.push('fs')
this.isFinishedContract = res.isFinishedContract
} else {
this.hasCreditList = []
this.isFinishedContract = false
}
})
}, 500)
}
},
created() {
getBaseInfo().then((res) => {
if (res) {
this.supplierList = res.enterpriseList.map((item) => ({
id: item.supplier?.id, // 暂时使用企业id
name: item.name
}))
}
})
},
computed: {
canSubmit() {
return this.form.enterpriseId != null && this.form.supplierId != null && this.creditType != null
}
},
watch: {
['form.name']() {
if (this.form.id) {
this.form.id = null
}
},
['form.enterpriseId']() {
if (this.form.enterpriseId && this.form.supplierId) {
this.getCreditList({ mallSupplierId: this.form.supplierId, customerEnterpriseId: this.form.enterpriseId })
}
},
['form.supplierId']() {
if (this.form.enterpriseId && this.form.supplierId) {
this.getCreditList({ mallSupplierId: this.form.supplierId, customerEnterpriseId: this.form.enterpriseId })
}
}
}
}
</script>
<style lang="scss" scoped>
.popup_modal {
width: 750rpx;
height: 600rpx;
background-color: #fff;
border-radius: 10px 10px 0 0;
.popup_modal-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 750rpx;
height: 88rpx;
font-weight: 600;
border-bottom: 2rpx solid #d8d8d8;
}
.popup_modal-scroll {
width: 750rpx;
height: 600rpx;
.popup_modal-scroll-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 750rpx;
height: 88rpx;
padding: 0rpx 32rpx;
border-bottom: 2rpx solid #d8d8d8;
}
}
}
.button_area {
width: 750rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 32rpx;
.button__submit {
flex-grow: 1;
height: 88rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: #007aff;
border-radius: 10rpx;
.text {
font-size: 30rpx;
color: #ffffff;
}
}
.button__submit--disabled {
opacity: 0.5;
}
}
.card_area {
width: 750rpx;
height: 350rpx;
background-color: #fff;
padding: 100rpx 32rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.card_area-item {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 331rpx;
height: 150rpx;
background: #ffffff;
border: 3rpx solid #d8d8d8;
border-radius: 10rpx;
.selected-icon {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 0;
right: 0;
}
.hasSelected-icon {
width: 159rpx;
height: 50rpx;
position: absolute;
top: 0;
right: 0;
}
.card_area-item-icon {
width: 48rpx;
height: 48rpx;
margin-right: 20rpx;
flex-grow: 0;
flex-shrink: 0;
}
.card_area-item-text {
font-size: 36rpx;
color: #000000;
letter-spacing: 2rpx;
font-weight: 600;
}
}
.selected {
border: 3rpx solid #007aff;
}
.hasSelected {
border: 3rpx solid #86e2df;
}
}
</style>