<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="views">
|
<view class="upload">
|
<u-upload
|
:fileList="fileList1"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="1"
|
:maxCount="1"
|
previewFullImage
|
></u-upload>
|
</view>
|
<view class="deleteImg" v-if="fileList1.length" @click="deletePic">
|
<u-icon name="close" color="#000000" ></u-icon>
|
</view>
|
</view>
|
</u-form-item>
|
</u--form>
|
</view>
|
<view class="addBtn"
|
><u-button
|
text="确认"
|
type="primary"
|
@click="addToHuoDaiOrDriver"
|
:loading="loading"
|
></u-button
|
></view>
|
</view>
|
</template>
|
|
<script>
|
// #ifdef H5
|
const BaseUrl = window.location.origin;
|
//#endif
|
//#ifdef MP-WEIXIN
|
import { BaseUrl } from "@/api/publicInterface.js";
|
//#endif
|
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);
|
console.log(this.fileList1, 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, 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;
|
}
|
.views{
|
width: 30vh;
|
height: 30vh;
|
.deleteImg {
|
width: 5vh;
|
height: 5vh;
|
background-color: #ffffff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50%;
|
position: relative;
|
left: 80%;
|
bottom: 28vh;
|
z-index: 999;
|
}
|
}
|
|
.upload {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50%;
|
overflow: hidden;
|
font-size: 3vh;
|
}
|
}
|
|
.addBtn {
|
width: 40vw;
|
position: absolute;
|
top: 80%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
/deep/ .u-upload__button{
|
margin: 0 !important;
|
}
|
/deep/ .u-upload{
|
width: 30vh;
|
height: 30vh;
|
}
|
/deep/ .u-upload__wrap__preview__image{
|
width: 30vh !important;
|
height: 30vh !important;
|
}
|
/deep/ .u-upload__button{
|
width: 30vh !important;
|
height: 30vh !important;
|
}
|
|
/deep/ .u-icon__icon {
|
font-size: 4vh !important;
|
font-weight: bold;
|
}
|
/deep/ .uicon-camera-fill{
|
font-size: 6vh !important;
|
}
|
</style>
|
