<template>
|
<view class="addTo-freightForwarder-drvier">
|
<view class="addForm">
|
<u--form labelPosition="top"
|
:model="form">
|
<u-form-item labelWidth="25%"
|
label=""
|
@click="beforeRead"
|
required>
|
<view class="deleteImg" v-if="fileList1.length>0" @click="deletePic">
|
<u-icon
|
name="close"
|
color="#000000"
|
size="30"
|
></u-icon>
|
</view>
|
<view class="upload">
|
<u-upload :fileList="fileList1"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="1"
|
multiple
|
:maxCount="1"
|
width="180"
|
height="180"
|
customStyle="margin-left:8px;margin-top:8px;"
|
:previewFullImage="true"></u-upload>
|
</view>
|
</u-form-item>
|
</u--form>
|
</view>
|
<view class="addBtn"><u-button text="确认"load__butto
|
type="primary"
|
@click="addToHuoDaiOrDriver"
|
:loading="loading"></u-button></view>
|
</view>
|
</template>
|
|
<script>
|
import { BaseUrl } from '@/api/publicInterface.js';
|
import { mapMutations, mapState } from 'vuex';
|
export default {
|
data() {
|
return {
|
form:{
|
userId:"",
|
imgPath:"",
|
username:""
|
},
|
loading:false,
|
fileList1: [],
|
};
|
},
|
onLoad(params) {
|
let that=this
|
if (params.id) {
|
this.form.userId = params.id
|
}
|
if (params.username) {
|
this.form.username = params.username
|
}
|
if(params.imgPath){
|
this.form.imgPath = params.imgPath
|
if (this.fileList1.length == 0 && params.imgPath) {
|
this.fileList1.push({
|
url: `${BaseUrl}${params.imgPath}`
|
});
|
}
|
}
|
},
|
onShow() {
|
this.init();
|
},
|
methods: {
|
...mapMutations(['changeisUploadimg']),
|
init() {
|
},
|
addToHuoDaiOrDriver() {
|
this.loading=true
|
if(this.form.imgPath){
|
this.$reqPut('faceEdit', this.form, 'json').then(result => {
|
if (result.code == 0) {
|
this.loading=false
|
this.$u.toast('上传成功');
|
let timer = setTimeout(() => {
|
uni.navigateBack({
|
delta: 1
|
});
|
}, 500);
|
} else {
|
this.$u.toast(result.msg ? result.msg : '上传失败');
|
}
|
});
|
}
|
},
|
beforeRead() {
|
this.changeisUploadimg(true);
|
},
|
// 新增图片
|
async afterRead(event) {
|
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
let lists = [].concat(event.file);
|
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, event.name);
|
let item = this[`fileList${event.name}`][fileListLen];
|
this[`fileList${event.name}`].splice(
|
fileListLen,
|
1,
|
Object.assign(item, {
|
status: 'success',
|
message: '上传成功',
|
url: result
|
})
|
);
|
fileListLen++;
|
}
|
},
|
// 删除
|
deletePic(event) {
|
this.fileList1.splice(0, 1);
|
},
|
uploadFilePromise(url, num) {
|
return new Promise((resolve, reject) => {
|
let a = uni.uploadFile({
|
url: BaseUrl + '/admin/sys-file/uploadUnToken',
|
filePath: url,
|
name: 'file',
|
success: res => {
|
this.form.imgPath = JSON.parse(res.data).data.url;
|
resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
|
}
|
});
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
/deep/.u-form-item__body__right__content__slot{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
/deep/u-view.u-upload__button[data-v-69e2a36e]{
|
margin: 0 !important;
|
}
|
.deleteImg{
|
width: 20px;
|
height:20px;
|
background-color: #ffffff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50%;
|
position: relative;
|
right: -80px;
|
top: -25px;
|
z-index: 999;
|
}
|
.upload{
|
width: 80px;
|
height: 77px;
|
margin:0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50%;
|
overflow: hidden;
|
}
|
}
|
|
.addBtn{
|
width: 120px;
|
position: absolute;
|
top: 80%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
</style>
|
