337 lines
10 KiB
Vue
337 lines
10 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div class="nav_bar_bg" :class="{ 'status_wait': supplierInfo?.state == 0, 'status_danger': supplierInfo?.state == 99, 'status_success': supplierInfo?.state == 1 }">
|
||
<template v-if="supplierInfo?.state == 0">
|
||
<div class="status_wrap">
|
||
<img class="wait_icon" src="@/assets/supplier/waitIcon.png" alt="">
|
||
<span class="wait_status">审批中</span>
|
||
</div>
|
||
</template>
|
||
<template v-if="supplierInfo?.state == 1">
|
||
<div class="status_wrap">
|
||
<img class="wait_icon" src="@/assets/supplier/successIcon.png" alt="">
|
||
<span class="wait_status success_status">恭喜你，审核通过！</span>
|
||
</div>
|
||
</template>
|
||
<template v-if="supplierInfo?.state == 99">
|
||
<div class="status_wrap">
|
||
<img class="wait_icon" src="@/assets/supplier/failIcon.png" alt="">
|
||
<span class="wait_status danger_status">审核不通过</span>
|
||
</div>
|
||
<div class="danger_tip">
|
||
{{supplierInfo?.failReason}}
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="supplier_content">
|
||
<div class="credentials_info">
|
||
<div class="common_title">证件照信息</div>
|
||
<div class="credentials_wrap">
|
||
<div class="credentials_item">
|
||
<div class="credentials_title">1. 法人身份证正面</div>
|
||
<img :src="supplierInfo?.idCardFrontUrl" alt="">
|
||
</div>
|
||
<div class="credentials_item ml2">
|
||
<div class="credentials_title">2. 法人身份证反面</div>
|
||
<img :src="supplierInfo?.idCardBackUrl" alt="">
|
||
</div>
|
||
<div class="credentials_item ml2">
|
||
<div class="credentials_title">3. 营业执照</div>
|
||
<img :src="supplierInfo?.businessLicense" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="company_info">
|
||
<div class="common_title">公司信息</div>
|
||
<div class="info_wrap">
|
||
<div class="info_item">
|
||
<div class="label">服务商名称：</div>
|
||
<div class="content">{{supplierInfo?.name}}</div>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">法人姓名：</div>
|
||
<div class="content">{{supplierInfo?.legalName}}</div>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">联系人姓名：</div>
|
||
<div class="content">{{supplierInfo?.linkName}}</div>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">联系电话：</div>
|
||
<div class="content">{{supplierInfo?.linkPhone}}</div>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">服务能力：</div>
|
||
<div class="content service_color">{{supplierInfo?.serviceName}}</div>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">拖车数量：</div>
|
||
<div class="content">{{supplierInfo?.trailCount || ''}}</div>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">抢修车数量：</div>
|
||
<div class="content">{{supplierInfo?.minorCount || ''}}</div>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">服务区域：</div>
|
||
<div class="content">{{supplierInfo?.serviceAreaName}}</div>
|
||
</div>
|
||
<template v-if="type == 'audit'">
|
||
<div class="info_item">
|
||
<div class="label"><span style="color: red;margin-right: 2px">*</span>审批：</div>
|
||
<div class="content">
|
||
<van-radio-group v-model="form.state" direction="horizontal" icon-size="18px">
|
||
<van-radio name="1">审批通过</van-radio>
|
||
<van-radio name="99">审批不通过</van-radio>
|
||
</van-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="info_item" v-if="form.state == 1">
|
||
<div class="label"><span style="color: red;margin-right: 2px">*</span>服务商简称：</div>
|
||
<div class="content">
|
||
<el-input style="width: 100%" v-model.trim="form.abbr" placeholder="请输入服务商简称"></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="info_item" v-if="form.state == 99">
|
||
<div class="label"><span style="color: red;margin-right: 2px">*</span>不通过原因：</div>
|
||
<div class="content">
|
||
<textarea class="report_textarea" rows="4" maxlength="200" show-word-limit placeholder="点击这里输入不通过原因" v-model.trim="form.failReason"></textarea>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="btn_wrap" v-if="type == 'show' && supplierInfo?.state == 99">
|
||
<div class="btn" @click="goModifyPage">修改信息</div>
|
||
</div>
|
||
<div class="btn_wrap" v-if="type == 'audit'">
|
||
<div class="btn" v-if="type == 'audit'" @click="auditSupplier">保 存</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getSupplierInfo, auditSupplier } from "@/api/mine"
|
||
import {myMixins} from "@/utils/myMixins"
|
||
export default {
|
||
name: "supplierInfo",
|
||
mixins:[myMixins],
|
||
data() {
|
||
return {
|
||
id:'', //车辆Id
|
||
form: {
|
||
state: '',
|
||
abbr: '',
|
||
failReason: '',
|
||
},
|
||
supplierInfo: {},
|
||
type: 'show',
|
||
}
|
||
},
|
||
async mounted() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
this.id=this.$route.query.id || urlParams.get('id');
|
||
this.type=this.$route.query.type || urlParams.get('type') || 'show';
|
||
await this.getInfoHandler();
|
||
},
|
||
methods: {
|
||
goModifyPage() {
|
||
this.goPage('supplierAdd', { id : this.id })
|
||
},
|
||
async auditSupplier() {
|
||
if( !this.form.state ) {
|
||
this.$toast('请选择审批结果')
|
||
return
|
||
}
|
||
if( this.form.state == 99 && !this.form.failReason ) {
|
||
this.$toast('请输入不通过原因')
|
||
return
|
||
}
|
||
if( this.form.state == 1 ) {
|
||
const reg = /^[\u4e00-\u9fa5]{2}$/;
|
||
if(!this.form.abbr) {
|
||
this.$toast('请输入服务商简称')
|
||
return
|
||
}
|
||
if(!(reg.test(this.form.abbr))) {
|
||
this.$toast('服务商简称请输入两位汉字')
|
||
return
|
||
}
|
||
}
|
||
try {
|
||
await auditSupplier({
|
||
id: this.id,
|
||
...this.form,
|
||
wechatId: 'test', // 参数将会被去掉
|
||
})
|
||
} finally {
|
||
this.closeParentDialog();
|
||
}
|
||
},
|
||
async getInfoHandler() {
|
||
let res = await getSupplierInfo({
|
||
id: this.id,
|
||
});
|
||
this.supplierInfo = res?.data;
|
||
console.log('res', res)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "@/styles/mixin.scss";
|
||
@import "@/styles/common.scss";
|
||
.report_textarea {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
border-radius: 6px;
|
||
min-height: 95px;
|
||
border: 1px solid #E2EAF6;
|
||
padding: 10px;
|
||
font-size: 13px;
|
||
}
|
||
.wrap{
|
||
@include wh(100%,100%);
|
||
box-sizing: border-box;
|
||
padding-bottom: 100px;
|
||
overflow-y: auto;
|
||
}
|
||
.nav_bar_bg {
|
||
width: 100%;
|
||
height: 125px;
|
||
padding-top: 50px;
|
||
}
|
||
.status_wait {
|
||
background: linear-gradient( 180deg, #FFE4C9 0%, rgba(255,248,233,0) 100%);
|
||
}
|
||
.status_success {
|
||
background: linear-gradient( 180deg, #DAFFF8 0%, rgba(237,255,233,0) 100%);
|
||
}
|
||
.status_danger {
|
||
background: linear-gradient( 180deg, #FFE8DA 0%, rgba(255,233,233,0) 100%);
|
||
}
|
||
.status_wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
.wait_icon {
|
||
width: 34px;
|
||
height: 34px;
|
||
margin-left: 31px;
|
||
}
|
||
.wait_status {
|
||
color: #E69B0B;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
margin-left: 11px;
|
||
}
|
||
.success_status {
|
||
color: #37B864;
|
||
}
|
||
.danger_status {
|
||
color: #ED440C;
|
||
}
|
||
}
|
||
.danger_tip {
|
||
font-size: 12px;
|
||
color: #FF553B;
|
||
line-height: 18px;
|
||
padding-left: 38px;
|
||
padding-right: 23px;
|
||
margin-top: 5px;
|
||
}
|
||
.supplier_content {
|
||
padding: 0 24px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.common_title {
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: rgba(50, 54, 67, 0.66);
|
||
padding-left: 2px;
|
||
}
|
||
.common_title::after {
|
||
content: '';
|
||
display: block;
|
||
width: 100%;
|
||
border: 1px solid;
|
||
margin-top: 10px;
|
||
opacity: 0.16;
|
||
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
|
||
}
|
||
.credentials_wrap {
|
||
display: flex;
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
.credentials_item {
|
||
width: 32%;
|
||
text-align: center;
|
||
.credentials_title {
|
||
font-size: 12px;
|
||
color: #4A4A4A;
|
||
padding: 10px 0;
|
||
}
|
||
img {
|
||
width: 97px;
|
||
height: 64px;
|
||
}
|
||
}
|
||
.ml2 {
|
||
margin-left: 2%;
|
||
}
|
||
}
|
||
.company_info {
|
||
margin-top: 20px;
|
||
/*.company_wrap {*/
|
||
.info_wrap {
|
||
margin-top: 10px;
|
||
.info_item {
|
||
display: flex;
|
||
padding: 10px 2px;
|
||
.label {
|
||
font-size: 13px;
|
||
color: rgba(50, 54, 67, 0.6);
|
||
width: 90px;
|
||
flex-shrink: 0;
|
||
}
|
||
.content {
|
||
font-size: 13px;
|
||
color: #323643;
|
||
/*font-weight: bold;*/
|
||
flex: 1;
|
||
}
|
||
.service_color {
|
||
color: rgba(230, 155, 11, 0.9);
|
||
}
|
||
}
|
||
/*}*/
|
||
}
|
||
}
|
||
.btn_wrap {
|
||
width: 100%;
|
||
padding: 15px 0;
|
||
position: fixed;
|
||
bottom: 0;
|
||
background: #F7F7F9;
|
||
box-shadow: 0px -7px 24px 0px rgba(0, 0, 0, 0.11);
|
||
z-index: 10000 !important;
|
||
left: 0;
|
||
.btn {
|
||
width: calc(100% - 80px);
|
||
margin-left: 40px;
|
||
height: 46px;
|
||
background: #0E76F4;
|
||
border-radius: 5px;
|
||
font-size: 15px;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 46px;
|
||
}
|
||
}
|
||
</style>
|