|
@@ -0,0 +1,384 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <uni-navbar title="完善信息"></uni-navbar>
|
|
|
+ <view class="box">
|
|
|
+ <u--form :model="form" ref="uForm" :rules="rules" labelWidth="0"
|
|
|
+ class="formStyle addHeight commonBj commonMt">
|
|
|
+ <u-form-item prop="driverName">
|
|
|
+ <view class="redCircle"></view>
|
|
|
+ <text class="itemText">姓  名</text>
|
|
|
+ <u-input class="inputStyle" v-model="form.driverName" placeholder="请输入司机姓名" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item prop="decryptCardNum">
|
|
|
+ <view class="redCircle"></view>
|
|
|
+ <text class="itemText">身份证号</text>
|
|
|
+ <u-input class="inputStyle" v-model="form.decryptCardNum" placeholder="请输入身份证号" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item prop="phone">
|
|
|
+ <view class="redCircle"></view>
|
|
|
+ <text class="itemText">联系电话</text>
|
|
|
+ <u-input class="inputStyle" v-model="form.phone" placeholder="请输入联系电话" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item prop="driverType" @click="clickType">
|
|
|
+ <view class="redCircleNo"></view>
|
|
|
+ <text class="itemText">驾照类型</text>
|
|
|
+ <u-input disabled disabledColor="rgba(0,0,0,0)" class="inputStyle" v-model="form.driverType"
|
|
|
+ suffixIcon="arrow-right" suffixIconStyle="color: #495B93" placeholder="请选择驾照类型" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item>
|
|
|
+ <view class="uploadBox">
|
|
|
+ <view class="textBox">
|
|
|
+ <view class="redCircleNo"></view>
|
|
|
+ <text class="itemText">驾驶证件(<text class="redText">确保证件清晰完整 </text>)</text>
|
|
|
+ </view>
|
|
|
+ <xfx-image-upload uploadTitle="上传驾驶证主页" uploadType="0" :max="1" :chooseNum="1"
|
|
|
+ v-model="fileList1" @uploadSuccess="UploadSuccessTruckCertificate"
|
|
|
+ @imgDelete="delTruckCertificate" mediaType="image">
|
|
|
+ </xfx-image-upload>
|
|
|
+ <xfx-image-upload uploadTitle="上传驾驶证副页" uploadType="0" :max="1" :chooseNum="1"
|
|
|
+ v-model="fileList2" @uploadSuccess="UploadSuccessTruckCertificate2"
|
|
|
+ @imgDelete="delTruckCertificate2" mediaType="image">
|
|
|
+ </xfx-image-upload>
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ </u--form>
|
|
|
+ <!-- <buttonNew @click="submit" class="add-button commonMb" text="确认新增"></buttonNew> -->
|
|
|
+ <u-button @click="submit" shape="circle" color="linear-gradient(to top, #F59A02, #FFD334 )"
|
|
|
+ class="add-button buttonLang commonMb">确 认</u-button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <selectNew :isShow="isShowType" :valueData="form.typeValue" :oldList="driverTypeData"
|
|
|
+ @changSelect="changSelectType"></selectNew>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getDriverType,
|
|
|
+ getTeuckList,
|
|
|
+ driverInfo,
|
|
|
+ driverUpadate,
|
|
|
+ } from '../../api/company/user.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShow: false,
|
|
|
+ isShowType: false,
|
|
|
+ form: {
|
|
|
+ // id: this.$store.state.user.userId,
|
|
|
+ id: null,
|
|
|
+ truckId: null,
|
|
|
+ carValue: null,
|
|
|
+ driverName: null,
|
|
|
+ decryptCardNum: null,
|
|
|
+ phone: null,
|
|
|
+ driverType: null,
|
|
|
+ // companyId: '1023271044427829248',
|
|
|
+ companyId:null,
|
|
|
+ typeValue: null,
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ truckId: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择车辆',
|
|
|
+ trigger: ['change']
|
|
|
+ }, ],
|
|
|
+ driverName: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入司机姓名',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }, ],
|
|
|
+ decryptCardNum: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入身份证号',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }, ],
|
|
|
+ phone: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入联系电话',
|
|
|
+ trigger: ['blur', 'change']
|
|
|
+ }, ],
|
|
|
+ driverType: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择驾照类型',
|
|
|
+ trigger: ['change']
|
|
|
+ }, ],
|
|
|
+ },
|
|
|
+ fileList1: [],
|
|
|
+ fileList2: [],
|
|
|
+ fileListData1: [],
|
|
|
+ fileListData2: [],
|
|
|
+ teuckList: [],
|
|
|
+ driverTypeData: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.form.id = option.id;
|
|
|
+ this.getDriverType();
|
|
|
+ this.driverInfo();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ driverInfo() {
|
|
|
+ driverInfo(this.form.id).then(res => {
|
|
|
+ this.form = res.data;
|
|
|
+ if(this.form.imgList)
|
|
|
+ {
|
|
|
+ if(this.form.imgList[0]){
|
|
|
+ this.fileListData1.push(this.form.imgList[0])
|
|
|
+ this.fileList1.push(this.form.imgList[0].url)
|
|
|
+ }
|
|
|
+ if(this.form.imgList[1]){
|
|
|
+ this.fileListData2.push(this.form.imgList[1])
|
|
|
+ this.fileList2.push(this.form.imgList[1].url)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.fileList1,'his.fileList1');
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 删除图片
|
|
|
+ delTruckCertificate(del, tempFilePaths) {
|
|
|
+ this.fileList1 = [];
|
|
|
+ this.fileListData1 = [];
|
|
|
+ },
|
|
|
+ delTruckCertificate2(del, tempFilePaths) {
|
|
|
+ this.fileList2 = [];
|
|
|
+ this.fileListData2 = [];
|
|
|
+ },
|
|
|
+ UploadSuccessTruckCertificate(res) {
|
|
|
+ /****************
|
|
|
+ 因为上传接口返回的结构不一致,所以以下代码需要根据实际的接口返回结构开发,在此只是展示如果给数组里添加的过程,仅供参考
|
|
|
+ ***************/
|
|
|
+ var _res = JSON.parse(res.data);
|
|
|
+ console.log(_res);
|
|
|
+ if (_res.code == 200) {
|
|
|
+ this.fileListData1.push(_res.data);
|
|
|
+ this.fileList1.push(_res.data.url)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ UploadSuccessTruckCertificate2(res) {
|
|
|
+ /****************
|
|
|
+ 因为上传接口返回的结构不一致,所以以下代码需要根据实际的接口返回结构开发,在此只是展示如果给数组里添加的过程,仅供参考
|
|
|
+ ***************/
|
|
|
+ var _res = JSON.parse(res.data);
|
|
|
+ console.log(_res);
|
|
|
+ if (_res.code == 200) {
|
|
|
+ this.fileListData2.push(_res.data);
|
|
|
+ this.fileList2.push(_res.data.url)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDriverType() {
|
|
|
+ getDriverType().then(res => {
|
|
|
+ this.driverTypeData = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ name: item.dictLabel,
|
|
|
+ value: item.dictValue
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickCar() {
|
|
|
+ this.isShow = true
|
|
|
+ },
|
|
|
+ changSelect(data) {
|
|
|
+ this.isShow = false
|
|
|
+ if (data && data.value) {
|
|
|
+ this.form.truckId = data.value;
|
|
|
+ this.form.carValue = data.name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clickType() {
|
|
|
+ this.isShowType = true
|
|
|
+ },
|
|
|
+ changSelectType(data) {
|
|
|
+
|
|
|
+ this.isShowType = false
|
|
|
+ if (data && data.value) {
|
|
|
+ this.form.driverType = data.name;
|
|
|
+ this.form.typeValue = data.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除图片
|
|
|
+ deletePic(event) {
|
|
|
+
|
|
|
+ this[`fileList${event.name}`].splice(event.index, 1)
|
|
|
+ },
|
|
|
+ // 新增图片
|
|
|
+ async afterRead(event) {
|
|
|
+ // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
|
|
|
+ let lists = [].concat(event.file)
|
|
|
+ console.log(event, 'event');
|
|
|
+ let fileListLen = this[`fileList${event.name}`].length
|
|
|
+ lists.map((item) => {
|
|
|
+ this[`fileList${event.name}`].push({
|
|
|
+ ...item,
|
|
|
+ status: 'uploading',
|
|
|
+ message: '上传中'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ for (let i = 0; i < lists.length; i++) {
|
|
|
+ const result = await this.uploadFilePromise(lists[i].url)
|
|
|
+ let item = this[`fileList${event.name}`][fileListLen]
|
|
|
+ this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
|
+ status: 'success',
|
|
|
+ message: '',
|
|
|
+ url: result
|
|
|
+ }))
|
|
|
+ fileListLen++
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadFilePromise(url) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let a = uni.uploadFile({
|
|
|
+ url: 'http://192.168.2.21:7001/upload', // 仅为示例,非真实的接口地址
|
|
|
+ filePath: url,
|
|
|
+ name: 'file',
|
|
|
+ formData: {
|
|
|
+ user: 'test'
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ resolve(res.data.data)
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ driverUpadate(){
|
|
|
+ let imgList=[];
|
|
|
+ if(this.fileListData1.length>0)
|
|
|
+ {
|
|
|
+ imgList.push(this.fileListData1[0])
|
|
|
+ }
|
|
|
+ if(this.fileListData2.length>0)
|
|
|
+ {
|
|
|
+ imgList.push(this.fileListData2[0])
|
|
|
+ }
|
|
|
+ driverUpadate({...this.form,imgList:imgList,cardNum:this.form.decryptCardNum}).then(res=>{
|
|
|
+ this.$tab.navigateBack()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ submit() {
|
|
|
+ this.$refs.uForm.validate().then(res => {
|
|
|
+ console.log(res,'111')
|
|
|
+ this.driverUpadate();
|
|
|
+ }).catch(errors => {
|
|
|
+ console.log(errors,'222')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .formStyle {
|
|
|
+ padding: 41rpx 39rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadImg {
|
|
|
+ width: 599rpx !important;
|
|
|
+ height: 270rpx !important;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 2rpx solid #495B93;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+
|
|
|
+ /deep/ .u-upload__wrap__preview {
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .u-upload__deletable {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ // background-color: #FC5536;
|
|
|
+ background-image: url(../../static/images/user/redClose.png);
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ top: -20rpx;
|
|
|
+ right: -20rpx;
|
|
|
+
|
|
|
+ .u-upload__deletable__icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .u-icon__icon {
|
|
|
+ font-size: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 上传组件样式
|
|
|
+ .uploadBox {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .u-upload__wrap__preview__image {
|
|
|
+ width: 598rpx !important;
|
|
|
+ height: 250rpx !important;
|
|
|
+ border-radius: 13rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.xfx-image-upload-list {
|
|
|
+ display: block;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ border: 2rpx solid #495B93;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ height: 250rpx;
|
|
|
+
|
|
|
+ .xfx-image-upload-Item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .xfx-image-upload-Item-add {
|
|
|
+ padding-top: 84rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .textBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .plus-icon {
|
|
|
+ width: 599rpx;
|
|
|
+ height: 270rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mt {
|
|
|
+ margin-top: 31rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #495B93;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgAdd {
|
|
|
+ width: 51rpx;
|
|
|
+ height: 51rpx;
|
|
|
+ background-image: url(../../static/images/user/add.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-button {
|
|
|
+ margin-top: 27rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ uni-image {
|
|
|
+ border-radius: 15rpx;
|
|
|
+ }
|
|
|
+</style>
|