<!--
|
* @Descripttion: 上传合约凭证
|
* @Author: TM丶
|
* @LastEditors: 小明丶
|
* @Date: 2019-04-08 09:16:44
|
* @LastEditTime: 2019-09-03 09:25:14
|
-->
|
<template>
|
<div class="zxh-upload-box h-100-g">
|
<x-header :left-options="{'backText': ''}" title="上传合约凭证" class="gradient-color"></x-header>
|
<div class="content" v-for="(item, index) in fileTypeArr" :key="index">
|
<h4 class="title">
|
<span>{{item.name}}</span>
|
<div @click="changeShowselect(item)">
|
<i class="iconfont scene_Staging-xiangji"></i>
|
<input ref="photo" type="file" accept="image/*" @change="getFile($event.currentTarget,item.code)">
|
<input ref="picture" type="file" accept="image/*" capture="camera"
|
@change="getFile($event.currentTarget,item.code)">
|
</div>
|
</h4>
|
<ul class="upload">
|
<li class="upload-item" v-for="(item, index) in item.fileIds" :key="index"
|
:style="{'background-image':`url(${item.fileUrl})`}">
|
<i class="iconfont scene_Staging-shibai1" @click="deleteImgItem(index)"></i>
|
</li>
|
</ul>
|
</div>
|
<group>
|
<x-input title="手机号" v-model="form.contMblNo" placeholder="请输入" text-align="right" :max="11"></x-input>
|
</group>
|
<f-button @on-click="submit()">提交</f-button>
|
|
|
<van-action-sheet v-model="showSelect" :close-on-click-overlay="false" cancel-text="取消" :actions="nav"
|
@select="handleSelect">
|
</van-action-sheet>
|
</div>
|
</template>
|
|
<script>
|
import {
|
compress
|
} from "@/utils/index";
|
import {
|
Actionsheet
|
} from "vux";
|
|
export default {
|
name: "heyd_upload",
|
data() {
|
return {
|
showSelect: false,
|
nav: [{
|
name: '拍照'
|
},
|
{
|
name: '从手机相册选择'
|
},
|
],
|
form: {
|
orderId: '',
|
contMblNo: '',
|
fileIds: []
|
},
|
fileTypeArr: [],
|
currentItem: {}
|
}
|
},
|
components: {
|
Actionsheet
|
},
|
props: ["orderId"],
|
created() {
|
this.form.orderId = this.orderId;
|
this.$api.h_getFileType().then(res => {
|
let list = res.body || [];
|
this.fileTypeArr = list.map(item => {
|
return {
|
...item,
|
fileIds: []
|
}
|
})
|
})
|
},
|
methods: {
|
changeShowselect(item) {
|
if (item.fileIds.length) {
|
this.$tool.toast(`最多上传一张照片~`)
|
return
|
}
|
this.showSelect = true;
|
this.currentItem = item;
|
},
|
imgCompress(path, options = {}) {
|
return new Promise((resolve, reject) => {
|
let img = new Image();
|
img.src = path;
|
img.onload = function () {
|
let that = this,
|
w = that.width,
|
h = that.height,
|
scale = w / h, // 默认按比例压缩
|
quality = options.quality || 0.92,
|
canvas = document.createElement('canvas'),
|
ctx = canvas.getContext('2d');
|
|
w = options.width || w;
|
h = options.height || (w / scale);
|
canvas.width = w;
|
canvas.height = h;
|
ctx.drawImage(that, 0, 0, w, h);
|
if (options.quality && options.quality <= 1 && options.quality > 0) {
|
quality = options.quality;
|
}
|
let base64 = canvas.toDataURL('image/jpeg', quality);
|
resolve(base64);
|
}
|
})
|
},
|
handleSelect(item, index) {
|
if (index === 0) {
|
this.$refs['picture'][0].click();
|
} else {
|
this.$refs['photo'][0].click();
|
}
|
this.showSelect = false;
|
},
|
// 删除图片
|
deleteImgItem(index) {
|
this.currentItem.fileIds.splice(index, 1);
|
},
|
// 获取base64
|
getFile(el, fileType) {
|
let file = el.files[0];
|
if (typeof file === 'undefined') return;
|
let reader = new FileReader(),
|
that = this;
|
reader.readAsDataURL(file);
|
reader.onload = function () {
|
that.imgCompress(this.result).then(base64 => {
|
that.upload(base64.split(',')[1], file.type.split('/')[1], fileType);
|
})
|
}
|
},
|
//上传文件
|
upload(base64, suffix, fileType) {
|
let params = {
|
fileType,
|
suffix,
|
base64Data: base64
|
}
|
this.$api.uploadFile(params).then(res => {
|
this.currentItem.fileIds.push(res.body);
|
})
|
},
|
// 提交保存
|
submit() {
|
let form = this.form,
|
tel = form.contMblNo;
|
|
let len = this.fileTypeArr.length;
|
for (let index = 0; index < len; index++) {
|
const item = this.fileTypeArr[index];
|
if (item.fileIds.length === 0) {
|
this.$tool.toast(`请上传${item.name}`)
|
return
|
}
|
}
|
|
|
if (tel.length === 0) {
|
this.$tool.toast("请输入电话号码")
|
return;
|
}
|
|
if (!this.$tool.checkPhone(tel)) {
|
this.$tool.toast("请输入正确的电话号码")
|
return
|
}
|
let params = {
|
orderId: form.orderId,
|
contMblNo: tel,
|
fileIds: []
|
};
|
|
|
let fileIds = [];
|
|
for (let k = 0; k < len; k++) {
|
const item = this.fileTypeArr[k];
|
let arr = item.fileIds;
|
arr.forEach(child => {
|
fileIds.push(child.id)
|
})
|
// fileIds.push(...item.fileIds);
|
}
|
|
params.fileIds = fileIds;
|
this.$api.h_uploadProtocol(params).then(res => {
|
this.$tool.toast("提交成功")
|
this.$router.go(-1)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.zxh-upload-box {
|
padding-top: 54px;
|
background-color: #f1f1f1;
|
}
|
|
.content {
|
margin-bottom: 10px;
|
padding-bottom: 12px;
|
background-color: @color-white;
|
|
.title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 12px;
|
height: 49px;
|
line-height: 49px;
|
font-size: @font-size-base;
|
font-weight: @font-weight-base;
|
|
input {
|
display: none;
|
}
|
}
|
}
|
|
.upload {
|
margin: 5px 12px 0;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
flex-wrap: wrap;
|
|
.upload-item {
|
margin-right: 12px;
|
width: 109px;
|
height: 109px;
|
position: relative;
|
background-position: center;
|
background-size: contain;
|
background-repeat: no-repeat;
|
margin-bottom: 12px;
|
|
&:nth-child(3n) {
|
margin-right: 0;
|
}
|
|
.iconfont {
|
position: absolute;
|
right: 3Px;
|
top: 0;
|
}
|
}
|
}
|
|
#file {
|
display: none;
|
}
|
|
.scene_Staging-xiangji {
|
fill: @color-border-theme;
|
color: @color-border-theme;
|
font-size: 20px;
|
}
|
</style>
|
