<!--
|
* @Descripttion: 上传合约凭证
|
* @Author: TM丶
|
* @LastEditors: 小明丶
|
* @Date: 2019-04-08 09:16:44
|
* @LastEditTime: 2019-09-05 17:41:40
|
-->
|
<template>
|
<div class="box h-100-g">
|
<x-header :left-options="{'backText': ''}" title="上传合约凭证" class="gradient-color"></x-header>
|
<div class="content">
|
<h4 class="title">
|
<span>合约凭证</span>
|
<div @click="showSelect = true;">
|
<i class="iconfont scene_Staging-xiangji"></i>
|
<input ref="photo" type="file" accept="image/*" @change="getFile($event.currentTarget)">
|
<input ref="picture" type="file" accept="image/*" capture="camera" @change="getFile($event.currentTarget)">
|
</div>
|
</h4>
|
<ul class="upload">
|
<li class="upload-item" v-for="(item, index) in form.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";
|
|
export default {
|
name:"order_upload",
|
data() {
|
return {
|
showSelect:false,
|
nav:[
|
{name:'拍照'},
|
{name:'从手机相册选择'},
|
],
|
form:{
|
orderId:'',
|
contMblNo:'',
|
fileIds:[]
|
}
|
}
|
},
|
props:["orderId"],
|
created(){
|
this.form.orderId = this.orderId;
|
},
|
methods:{
|
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'].click();
|
}else{
|
this.$refs['photo'].click();
|
}
|
this.showSelect = false;
|
},
|
// 删除图片
|
deleteImgItem(index){
|
this.form.fileIds.splice(index,1);
|
},
|
// 获取base64
|
getFile(el){
|
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]);
|
})
|
}
|
},
|
//上传文件
|
upload(base64,suffix){
|
let params ={
|
fileType:1,
|
suffix,
|
base64Data:base64
|
}
|
this.$api.uploadFile(params).then(res=>{
|
this.form.fileIds.push(res.body);
|
})
|
},
|
// 提交保存
|
submit(){
|
let form = this.form,
|
tel = form.contMblNo;
|
|
if(form.fileIds.length===0){
|
this.$tool.toast("请上传合约凭证")
|
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 = form.fileIds.map(item=>{
|
return item.id;
|
})
|
params.fileIds = fileIds;
|
this.$api.saveProtocol(params).then(res=>{
|
this.$tool.toast("提交成功")
|
this.$router.go(-1)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.box{
|
background-color: #f1f1f1;
|
padding-top: 54px;
|
}
|
.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>
|
