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

CRM_25-12-23#story#7473,服务商系统、调度APP新增服务商人员确认的功能

Browse Source
This commit is contained in:
zhouxueli
2025-12-15 13:07:55 +08:00
parent f9acd76fcf
commit 552b56d5da
2 changed files with 314 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/router/authentication-router.js
View File

@@ -39,5 +39,13 @@ const authenticationRouter = [
title: '银行卡信息认证',
}
},
{
path: '/personList',
name: 'personList',
component: () => import('@/views/mine/personList.vue'),
meta:{
title: '人员信息',
}
},
]
export default authenticationRouter

306
src/views/mine/personList.vue Normal file
View File

@@ -0,0 +1,306 @@
<template>
<div class="wrap" >
<div class="headerWrap">
<div v-if="isWebFunc()" style="opacity: 0;" class="back"></div>
<!-- <img v-else class="back" @click="h5GoBack" src="@/assets/secondHandCar/back.png" />-->
<span>人员信息</span>
<div style="opacity: 0;" class="back"></div>
</div>
<div :class="{'tipWrap':true,'yelBg':type==3,'greBg':type==4}">
<img v-show="[1,2].includes(type)" src="@/assets/unpass.png" />
<span v-if="type==1">请立即核对或修改以下信息：姓名/身份/电话/微信号/邮箱</span>
<span v-else-if="type==2">“角色”无法修改，如需修改“角色”请联系区域经理。提交审批后请到【管理人员】模块进行查看。</span>
<span v-else-if="type==3">当前信息正在确认中，如需调整请联系区域经理。</span>
<span v-else-if="type==4">当前信息已确认，如需调整请联系区域经理。</span>
</div>
<van-loading v-show="personList.length<=0" class="loadingWrap" type="spinner" color="#1989fa" />
<div class="contentWrap" v-show="personList.length>0">
<div class="itemWrap" v-for="(item,index) in personList" :key="index">
<div class="opaCol">人员{{(index+1)}}:</div>
<div class="line"></div>
<div class="item">
<div class="left" :class="{'opaCol':type!=2}"><span class="star">*</span><span>姓名：</span></div>
<div class="right">
<van-field :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="item.name" placeholder="请输入" />
</div>
</div>
<div class="item">
<div class="left opaCol"><span class="star" style="opacity: 0">*</span><span>角色：</span></div>
<div class="right" :class="{'opaCol':type==2}">
<van-field :input-align="type==2 ? 'right' : 'left'" readonly v-model="item.roleName" placeholder="请输入" />
</div>
</div>
<div class="item">
<div class="left" :class="{'opaCol':type!=2}"><span class="star">*</span><span>电话1：</span></div>
<div class="right">
<van-field :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="item.phone1" placeholder="请输入" />
</div>
</div>
<div class="item">
<div class="left" :class="{'opaCol':type!=2}"><span class="star" style="opacity: 0">*</span><span>电话2：</span></div>
<div class="right">
<van-field :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="item.phone2" placeholder="请输入" />
</div>
</div>
<div class="item">
<div class="left" :class="{'opaCol':type!=2}"><span class="star">*</span><span>微信号：</span></div>
<div class="right wechatRight">
<span class="reviseBtn" v-show="type==2" @click="wechatRevise(index)">修改</span>
<van-field :input-align="type==2 ? 'right' : 'left'" v-model="item.wechatId" />
</div>
</div>
<div class="item">
<div class="left" :class="{'opaCol':type!=2}"><span class="star" style="opacity: 0">*</span><span>邮箱：</span></div>
<div class="right">
<van-field :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="item.email" placeholder="请输入" />
</div>
</div>
</div>
</div>
<div class="btnWrap">
<div v-show="type==2" class="audit common" @click="auditHandle">提交审批</div>
<div v-show="type==1" class="revise common" @click="reviseHandle">立即修改</div>
<div v-show="type==1" class="confirm common" @click="confirmHandle">确认信息无误</div>
</div>
<van-dialog v-model="dialogShow" title="请先添加企微，成功添加后将更新微信号。" show-cancel-button
confirmButtonText="确认已添加" confirmButtonColor="#354E93" className="customDialog"
@confirm="wechatConfirm">
<img src="https://img01.yzcdn.cn/vant/apple-3.jpg" style="width: 90%"/>
</van-dialog>
</div>
</template>
<script>
import {myMixins} from "@/utils/myMixins"
// import {carInfoDetail,saveRecord} from "@/api/secondHandCar";
import { Dialog } from 'vant';
export default {
name: "personList",
mixins:[myMixins],
data(){
return{
noClick:true,
id:'',
type:1,//1确认信息 2修改 3审批中 4已确认
personList:[{name:'',roleName:'法人',phone1:'',phone2:'',wechatId:'',email:'',},
{name:'',roleName:'时空老板',phone1:'',phone2:'',wechatId:'',email:'',},
{name:'',roleName:'时空老板',phone1:'',phone2:'',wechatId:'',email:'',}],
dialogShow:false,
reviseIndex:-1
}
},
async mounted() {
window.addEventListener('message', (event) => {
if (event.data === 'dialogClosed') {
console.log('Dialog 已关闭 // 执行关闭后的逻辑');
}
});
const urlParams = new URLSearchParams(window.location.search);
this.id=this.$route.query.id || urlParams.get('id');
},
methods:{
async wechatConfirm(){//微信选择确认时间
this.personList[this.reviseIndex].wechatId='Nov_1122'
this.dialogShow=false
this.reviseIndex=-1
},
wechatRevise(index){
console.log('index',index)
this.reviseIndex=index
this.dialogShow=true
},
async auditHandle(){//提交审批
let flag=this.personList.every(item => item.name && item.phone1 && item.wechatId)
if(!flag){
this.$toast('必填项不可为空')
return
}
},
async reviseHandle(){//修改
this.type=2
},
async confirmHandle(){//确认信息无误
Dialog.confirm({
message:'请务必仔细确认信息是否无误。',
confirmButtonText:'确认无误',
cancelButtonText:'返回',
confirmButtonColor:'#354E93',
}).then(async() => {
console.log('去修改界面')
}).catch(() => {
});
},
handle(){
Dialog.alert({
message:'message',
confirmButtonText:this.isWebFunc() ? '确定' : '拨打电话',
showCancelButton:true,
}).then(async() => {
}).catch(() => {
});
},
}
}
</script>
<style lang="scss">
.customDialog {
.van-dialog__content{
text-align: center !important;
}
}
</style>
<style scoped lang="scss">
@import '@/styles/mixin.scss';
.wrap {
@include wh(100%, 100%);
position: relative;
background-color: #F6F6F6;
}
.tipWrap{
width: 100%;
box-sizing: border-box;
padding: 8px 8px 8px 18px;
margin-bottom: 10px;
display: flex;
background-color: #FFF6F2;
img{
width: 14px;
height: 14px;
//vertical-align: middle;
margin-right: 5px;
margin-top: 2px;
}
span{
color: #FC3C06;
}
}
.yelBg{
background-color: #FFFFED ;
span{
color: #F36708;
}
}
.greBg{
background-color: #E8FFF3;
span{
color: #19AC43;
}
}
.headerWrap{
width: 100%;
box-sizing: border-box;
padding: 15px 16px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
.back{
@include wh(15px,15px);
}
span{
font-weight: bold;
font-size: 16px;
color: #203152;
}
}
.loadingWrap{
width: 100%;
height: calc(100% - 160px);
text-align: center;
line-height: 200px;
}
.contentWrap{
height: calc(100% - 160px);
overflow-y: auto;
.itemWrap{
font-size: 14px;
width: 100%;
margin-bottom: 10px;
background-color: #FFFFFF;
box-sizing: border-box;
padding:10px 15px 10px 20px;
.line{
width: 100%;
text-align: center;
border-bottom: 2px solid;
opacity: 0.16;
margin-top: 10px;
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;
}
.item{
//line-height: 36px;
display: flex;
align-items: center;
.left{
width: 66px;
}
.right{
flex: 1;
}
.wechatRight{
display: flex;
align-items: center;
justify-content: space-between;
.reviseBtn{
display: inline-block;
width: 60px;
text-align: center;
border-radius: 4px;
background-color: #354D93;
color: #FFFFFF;
box-sizing: border-box;
padding: 2px 0;
}
}
}
.opaCol{
color: #323643;
opacity: .65;
}
.star{
font-weight: bold;
font-size: 13px;
color: #FF0808;
}
}
}
.btnWrap{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
box-sizing: border-box;
padding: 10px 19px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #F6F6F6;
.common{
background: #354D93;
height: 48px;
line-height: 48px;
text-align: center;
border-radius: 5px;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
}
.audit{
width: 100%;
}
.revise{
width: 30%;
background-color: #FFFFFF;
color: #354D93;
box-sizing: border-box;
border: 1px solid #354D93;
}
.confirm{
width: 67%;
}
}
</style>