apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CRM_25-10-15#story#7316,服务商体系新增潜在服务商--曹智龙

Browse Source
This commit is contained in:
周林芳
2025-10-09 14:36:40 +08:00
parent 8f42efe226
commit 7c97210d79
15 changed files with 838 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
src/views/index/supplierAdd.vue Normal file
View File

@ -0,0 +1,299 @@
<template>
<div class="wrap">
<div class="top_banner">
<img src="@/assets/supplier/topBg.png" alt="">
</div>
<div class="content_wrap">
<div class="credentials_info">
<img class="title1" src="@/assets/supplier/title1.png" alt="">
<div class="credentials_wrap">
<div class="credentials_item">
<div class="credentials_title">1. 法人身份证正面</div>
<van-uploader
accept="image/*"
v-model="idFrontPhotoList"
:after-read="idFrontPhotoHandler"
:max-size="5 * 1024 * 1024"
max-count="1">
<div class="custom-background">
<img src="@/assets/supplier/idCardPerson.png" alt="">
</div>
</van-uploader>
</div>
<div class="credentials_item ml2">
<div class="credentials_title">2. 法人身份证反面</div>
<van-uploader
accept="image/*"
v-model="idBackPhotoList"
:after-read="idBackPhotoHandler"
:max-size="5 * 1024 * 1024"
max-count="1">
<div class="custom-background">
<img src="@/assets/supplier/idCardBack.png" alt="">
</div>
</van-uploader>
</div>
<div class="credentials_item ml2">
<div class="credentials_title">3. 营业执照</div>
<van-uploader
accept="image/*"
v-model="companyPhotoList"
:after-read="companyPhotoHandler"
:max-size="5 * 1024 * 1024"
max-count="1">
<div class="custom-background">
<img src="@/assets/supplier/companyPhoto.png" alt="">
</div>
</van-uploader>
</div>
</div>
</div>
<div class="company_info">
<img class="title2" src="@/assets/supplier/title2.png" alt="">
<div class="company_wrap">
<van-form>
<van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务商名称" placeholder="请输入" :rules="[{ required: true, message: '请输入服务商名称' }]" />
<van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="法人名称" placeholder="请输入" :rules="[{ required: true, message: '请输入法人名称' }]" />
<van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="联系人姓名" placeholder="请输入" :rules="[{ required: true, message: '请输入联系人姓名' }]" />
<van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="联系电话" placeholder="请输入" :rules="[{ required: true, message: '请输入联系电话' }]" />
<van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务能力" placeholder="请输入" :rules="[{ required: true, message: '请选择服务能力' }]" />
<van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务能力" :rules="[{ required: true, message: '请选择服务能力' }]">
<template #input>
<el-tree
show-checkbox
node-key="id"
ref="tree"
:highlight-current="true"
:expand-on-click-node="false"
:data="supplierServiceList"
:props="defaultProps">
</el-tree>
</template>
</van-field>
<van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="拖车数量" placeholder="请输入" :rules="[{ required: true, message: '请输入拖车数量' }]" />
<van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="抢修车数量" placeholder="请输入" :rules="[{ required: true, message: '请输入抢修车数量' }]" />
<van-field name="supplierName" class="required" label="服务区域" placeholder="请选择" :rules="[{ required: true, message: '请选择服务区域' }]">
<template #input>
<span @click="areaShow = true">省/市/区</span>
</template>
</van-field>
</van-form>
<div class="wei_code_wrap">
<div class="wei_title">请先添加企业微信，保证申请流程正常进行。</div>
<div class="wei_code_bg">
<img v-if="qrCodeUrl" :src="qrCodeUrl" alt="企业微信二维码" />
</div>
</div>
</div>
</div>
</div>
<div class="btn_wrap">
<div class="btn">
提交申请
</div>
</div>
<van-popup
v-model="areaShow"
position="bottom"
>
<van-area title="服务区域" :area-list="areaList" :columns-num="3" closeable="true" :value="form.areaCode ? String(form.areaCode) : ''"
@cancel="areaShow = false" @confirm="confirmHandle"/>
</van-popup>
</div>
</template>
<script>
import QRCode from 'qrcode'
import { uploadImage, supplierServiceTree } from "@/api/mine"
import {myMixins} from "@/utils/myMixins"
import {areaList} from "@vant/area-data";
export default {
name: "supplierAdd",
mixins:[myMixins],
data() {
return {
id:'', //车辆Id
idBackPhotoList: [],
idBackPhoto: '',
idFrontPhotoList: [],
idFrontPhoto: '',
companyPhotoList: [],
companyPhoto: '',
form: {
supplierName: '',
},
qrCodeUrl: '',
areaShow: false,
areaList: areaList,
region: [],
supplierServiceList: [],
defaultProps: {
children: 'children',
label: 'name'
},
}
},
mounted() {
this.getQrCode();
this.getSupplierServiceTree();
},
methods: {
async getSupplierServiceTree(){
let res = await supplierServiceTree();
this.supplierServiceList=res.data
},
confirmHandle(val){
this.region=[]
val?.forEach(item => this.region.push(item.name))
let code=[]
val?.forEach(item => code.push(item.code))
this.form.areaCode=code[code.length - 1]
this.areaShow=false
},
async getQrCode() {
try {
this.qrCodeUrl = await QRCode.toDataURL('123123', {
width: 150,
margin: 2,
color: {
dark: '#000000',
light: '#FFFFFF'
},
})
} catch (error) {
console.error('生成二维码失败:', error)
}
},
async idBackPhotoHandler(file) {
const formData = new FormData();
formData.append("file" , file.file);
let res = await uploadImage(formData);
this.idBackPhoto = res.data
},
async idFrontPhotoHandler(file) {
const formData = new FormData();
formData.append("file" , file.file);
let res = await uploadImage(formData);
this.idFrontPhoto = res.data
},
async companyPhotoHandler(file) {
const formData = new FormData();
formData.append("file" , file.file);
let res = await uploadImage(formData);
this.companyPhoto = res.data
}
},
computed: {
regionText() {
return this.region.length ? `${this.region[0]}/${this.region[1]}/${this.region[2]}` : '请选择所在地区';
}
},
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
@include wh(100%,100%);
box-sizing: border-box;
padding-bottom: 100px;
overflow-y: auto;
}
.top_banner {
width: 100%;
img {
width: 100%;
height: 169px;
}
}
.content_wrap {
padding: 0 20px;
}
.credentials_info {
height: 170px;
}
.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;
}
.custom-background img {
width: 97px;
height: 64px;
}
}
.ml2 {
margin-left: 2%;
}
}
::v-deep .van-uploader__preview-image {
width: 97px;
height: 64px;
}
.title1 {
width: 106px;
height: 19px;
margin-top: 25px;
}
.title2 {
width: 90px;
height: 18px;
margin-top: 25px;
margin-bottom: 10px;
}
.van-cell.required::before{
content: "＊";
position: absolute;
color: #F00;
left: 0px;
top: .25rem;
font-size: .3rem;
}
.wei_code_wrap {
.wei_title {
font-size: 15px;
color: #FF553B;
text-align: center;
}
.wei_code_bg {
width: 163px;
height: 173px;
background-image: url("~@/assets/supplier/weiCodeBg.png");
background-size: 100% 100%;
margin: 8px auto;
display: flex;
align-items: center;
justify-content: center;
}
}
.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;
.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>