<!--
|
* @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="up-div">
|
<p>合约办理凭证截图</p>
|
<van-uploader :after-read="afterRead">
|
<div class="upload-div">
|
<img :src="pic" alt v-if="pic" />
|
<i class="iconfont iconzhaoxiang" v-else></i>
|
</div>
|
</van-uploader>
|
<p>合约手机号</p>
|
<Ipt v-model="form.contMblNo" :max="11" :placeholder="'请输入手机号'" :type="'text'"></Ipt>
|
</div>
|
<button class="btn" @click="submit">提交</button>
|
<!-- <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";
|
import Vue from "vue";
|
import { Uploader } from "vant";
|
import Ipt from "../../../../components/common/h-ipt";
|
Vue.use(Uploader);
|
export default {
|
name: "xyg_upload",
|
data() {
|
return {
|
pic: "",
|
showSelect: false,
|
nav: [
|
{
|
name: "拍照"
|
},
|
{
|
name: "从手机相册选择"
|
}
|
],
|
form: {
|
orderId: "",
|
contMblNo: "",
|
fileIds: []
|
},
|
fileTypeArr: [],
|
currentItem: {}
|
};
|
},
|
components: {
|
Actionsheet,
|
Ipt
|
},
|
props: ["orderId"],
|
created() {
|
this.form.orderId = this.orderId;
|
this.$api.h_getXygFileType().then(res => {
|
let list = res.body || [];
|
this.fileTypeArr = list.map(item => {
|
return {
|
...item,
|
fileIds: []
|
};
|
});
|
console.log(this.fileTypeArr)
|
});
|
},
|
methods: {
|
uploadSectionFile(f, t) {
|
// 图片上传
|
let self = this;
|
let Orientation;
|
let ndata;
|
let pic;
|
if (t.size <= 1 * 1024 * 1024) {
|
console.log("未压缩");
|
//判断图片是否小于1M,是就直接上传
|
ndata = f;
|
self.postImg(ndata);
|
} else {
|
//反之压缩图片
|
//BASE64转图片
|
var arr = f.split(","),
|
mime = arr[0].match(/:(.*?);/)[1],
|
bstr = atob(arr[1]),
|
n = bstr.length,
|
u8arr = new Uint8Array(n);
|
while (n--) {
|
u8arr[n] = bstr.charCodeAt(n);
|
}
|
pic = new File([u8arr], t.name, { type: mime });
|
let reader = new FileReader();
|
// 将图片将转成 base64 格式
|
reader.readAsDataURL(pic);
|
// 读取成功后的回调
|
reader.onloadend = function() {
|
let result = this.result;
|
//let result = f;
|
let img = new Image();
|
img.src = result;
|
img.onload = function() {
|
let data = self.compress(img, Orientation);
|
self.headerImage = data;
|
ndata = self.compress(img, Orientation);
|
//console.log('111',self.headerImage)
|
self.postImg(ndata);
|
};
|
};
|
}
|
},
|
|
async postImg(ndata) {
|
let self = this;
|
var FileUpload = function(ndata) {
|
//console.log(index)
|
self.$api
|
.uploadFile({
|
fileType:6304,
|
base64Data: ndata.split(",")[1], // 文件base64
|
suffix: ndata
|
.split(",")[0]
|
.split(";")
|
["0"].split("/")[1]
|
})
|
.then(res => {
|
console.log("res", res.body);
|
console.log("self.fileTypeAr", self.fileTypeAr);
|
self.pic = ndata
|
//self.currentItem.fileIds.push(res.body)
|
//self.fileTypeArr.fileIds.push(res.body)
|
if(self.form.fileIds.length<1){
|
self.form.fileIds.push(res.body.id)
|
}else{
|
self.form.fileIds.shift()
|
self.form.fileIds.push(res.body.id)
|
}
|
});
|
};
|
await FileUpload(ndata);
|
},
|
compress(img, Orientation) {
|
let canvas = document.createElement("canvas");
|
let ctx = canvas.getContext("2d");
|
//瓦片canvas
|
let tCanvas = document.createElement("canvas");
|
let tctx = tCanvas.getContext("2d");
|
let initSize = img.src.length;
|
let width = img.width;
|
let height = img.height;
|
//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
|
let ratio;
|
if ((ratio = (width * height) / 4000000) > 1) {
|
console.log("大于400万像素");
|
ratio = Math.sqrt(ratio);
|
width /= ratio;
|
height /= ratio;
|
} else {
|
ratio = 1;
|
}
|
canvas.width = width;
|
canvas.height = height;
|
// 铺底色
|
ctx.fillStyle = "#fff";
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
//如果图片像素大于100万则使用瓦片绘制
|
let count;
|
if ((count = (width * height) / 1000000) > 1) {
|
console.log("超过100W像素");
|
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
|
// 计算每块瓦片的宽和高
|
let nw = ~~(width / count);
|
let nh = ~~(height / count);
|
tCanvas.width = nw;
|
tCanvas.height = nh;
|
for (let i = 0; i < count; i++) {
|
for (let j = 0; j < count; j++) {
|
tctx.drawImage(
|
img,
|
i * nw * ratio,
|
j * nh * ratio,
|
nw * ratio,
|
nh * ratio,
|
0,
|
0,
|
nw,
|
nh
|
);
|
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
|
}
|
}
|
} else {
|
ctx.drawImage(img, 0, 0, width, height);
|
}
|
//修复ios上传图片的时候 被旋转的问题
|
if (Orientation != "" && Orientation != 1) {
|
switch (Orientation) {
|
case 6: //需要顺时针（向左）90度旋转
|
this.rotateImg(img, "left", canvas);
|
break;
|
case 8: //需要逆时针（向右）90度旋转
|
this.rotateImg(img, "right", canvas);
|
break;
|
case 3: //需要180度旋转
|
this.rotateImg(img, "right", canvas); //转两次
|
this.rotateImg(img, "right", canvas);
|
break;
|
}
|
}
|
//进行最小压缩
|
let ndata = canvas.toDataURL("image/jpeg", 0.1);
|
|
//console.log("压缩前：" + initSize);
|
//console.log("压缩后：" + ndata.length);
|
//console.log("ndata:" + ndata);
|
|
console.log(
|
"压缩率：" + ~~((100 * (initSize - ndata.length)) / initSize) + "%"
|
);
|
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
|
|
return ndata;
|
},
|
afterRead(file) {
|
this.uploadSectionFile(file.content, file.file)
|
},
|
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
|
};
|
console.log(fileType)
|
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;
|
console.log(this.fileTypeArr)
|
// for (let index = 0; index < len; index++) {
|
// const item = this.fileTypeArr[index];
|
// if (item.fileIds.length === 0) {
|
// this.$tool.toast(`请上传${item.name}`);
|
// return;
|
// }
|
// }
|
if(form.fileIds.length<1){
|
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: this.form.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_uploadXygProtocol(params).then(res => {
|
this.$tool.toast("提交成功");
|
this.$router.go(-1);
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.zxh-upload-box {
|
padding-top: 56px;
|
background-color: #f1f1f1;
|
.up-div {
|
width: 100%;
|
height: 250px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 1px 5px 13px 0px rgba(0, 0, 0, 0.08);
|
padding: 20px;
|
box-sizing: border-box;
|
p:nth-of-type(1) {
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
margin-bottom: 10px;
|
}
|
.upload-div {
|
width: 100px;
|
height: 100px;
|
background: rgba(249, 250, 255, 1);
|
border: 1px dashed rgba(205, 211, 246, 1);
|
border-radius: 4px;
|
text-align: center;
|
line-height: 100px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
i {
|
font-size: 30px;
|
color: #8365e1;
|
}
|
}
|
p:nth-of-type(2) {
|
margin: 16px 0 10px 0;
|
font-size: 13px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
}
|
.btn {
|
width: 88%;
|
height: 44px;
|
background: rgba(137, 110, 219, 1);
|
border-radius: 22px;
|
color: white;
|
outline: none;
|
border: 0;
|
margin-left: 6%;
|
margin-top: 37px;
|
}
|
}
|
|
.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>
|
