最新代码
parent
dfc4a926a2
commit
b1494d01ae
|
|
@ -0,0 +1,390 @@
|
||||||
|
<template>
|
||||||
|
<view class="">
|
||||||
|
<view class='t-toptips' :style="{top: top,background: cubgColor}" :class="[show?'t-top-show':'']">
|
||||||
|
<view v-if="loading" class="flex flex-sub">
|
||||||
|
<view class="cu-progress flex-sub round striped active sm">
|
||||||
|
<view :style="{ background: color,width: value + '%'}"></view>
|
||||||
|
</view>
|
||||||
|
<text class="margin-left">{{value}}%</text>
|
||||||
|
</view>
|
||||||
|
<block v-else>{{msg}}</block>
|
||||||
|
</view>
|
||||||
|
<view ref="input" class="input">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
top: {
|
||||||
|
type: String,
|
||||||
|
default: 'auto'
|
||||||
|
},
|
||||||
|
bgColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'rgba(49, 126, 243, 0.5)',
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#e54d42',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cubgColor: '',
|
||||||
|
loading: false,
|
||||||
|
value: 5,
|
||||||
|
show: false,
|
||||||
|
msg: '执行完毕~',
|
||||||
|
hParam: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// #ifdef H5
|
||||||
|
var input = document.createElement('input')
|
||||||
|
input.type = 'file'
|
||||||
|
// input.accept = '.zip'
|
||||||
|
input.style.display = 'none'
|
||||||
|
input.id = 'file'
|
||||||
|
input.multiple = "multiple"
|
||||||
|
input.onchange = (event) => {
|
||||||
|
// 上传附件 获取文件信息
|
||||||
|
this.fileinfo = event.target.files[0];
|
||||||
|
// console.log("文件信息", this.fileinfo);
|
||||||
|
//this.upload();
|
||||||
|
this.hRequest(this.hParam)
|
||||||
|
}
|
||||||
|
this.$refs.input.$el.appendChild(input);
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toast(title = '', {
|
||||||
|
duration = 2000,
|
||||||
|
icon = 'none'
|
||||||
|
} = {}) {
|
||||||
|
uni.showToast({
|
||||||
|
title,
|
||||||
|
duration,
|
||||||
|
icon
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getRequest(url) {
|
||||||
|
let theRequest = new Object();
|
||||||
|
let index = url.indexOf("?");
|
||||||
|
if (index != -1) {
|
||||||
|
let str = url.substring(index + 1);
|
||||||
|
let strs = str.split("&");
|
||||||
|
for (let i = 0; i < strs.length; i++) {
|
||||||
|
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return theRequest;
|
||||||
|
},
|
||||||
|
|
||||||
|
/*
|
||||||
|
上传说明：
|
||||||
|
currentWebview: 当前窗口webview对象
|
||||||
|
url：上传接口地址
|
||||||
|
name：上传文件key值
|
||||||
|
header: 上传接口请求头
|
||||||
|
...：body内其他参数
|
||||||
|
*/
|
||||||
|
appChooseFile({
|
||||||
|
currentWebview,
|
||||||
|
url,
|
||||||
|
name = 'file',
|
||||||
|
header,
|
||||||
|
...formData
|
||||||
|
} = {}) {
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
let wv = plus.webview.create("", "/hybrid/html/index.html", {
|
||||||
|
'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
|
||||||
|
top: 0,
|
||||||
|
height: '100%',
|
||||||
|
background: 'transparent'
|
||||||
|
}, {
|
||||||
|
url,
|
||||||
|
header,
|
||||||
|
formData,
|
||||||
|
key: name,
|
||||||
|
});
|
||||||
|
wv.loadURL("/hybrid/html/index.html")
|
||||||
|
currentWebview.append(wv);
|
||||||
|
wv.overrideUrlLoading({
|
||||||
|
mode: 'reject'
|
||||||
|
}, (e) => {
|
||||||
|
let {
|
||||||
|
fileName,
|
||||||
|
id
|
||||||
|
} = this.getRequest(e.url);
|
||||||
|
fileName = unescape(fileName);
|
||||||
|
id = unescape(id);
|
||||||
|
return this.onCommit(
|
||||||
|
this.$emit('up-success', {
|
||||||
|
fileName,
|
||||||
|
data: {
|
||||||
|
id,
|
||||||
|
statusCode: 200
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
wxChooseFile({
|
||||||
|
url,
|
||||||
|
name = 'file',
|
||||||
|
header,
|
||||||
|
...formData
|
||||||
|
} = {}) {
|
||||||
|
wx.chooseMessageFile({
|
||||||
|
count: 2,
|
||||||
|
type: 'file',
|
||||||
|
success: ({
|
||||||
|
tempFiles
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
let [{
|
||||||
|
path: filePath,
|
||||||
|
name: fileName
|
||||||
|
}] = tempFiles;
|
||||||
|
this.setdefUI();
|
||||||
|
|
||||||
|
return uni.uploadFile({
|
||||||
|
url,
|
||||||
|
name,
|
||||||
|
filePath,
|
||||||
|
formData,
|
||||||
|
header,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode == 200) {
|
||||||
|
|
||||||
|
let data = JSON.parse(res.data);
|
||||||
|
|
||||||
|
//可自行添加后台返回状态验证
|
||||||
|
return this.onCommit(this.$emit('up-success', {
|
||||||
|
fileName,
|
||||||
|
data
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
return this.errorHandler('文件上传失败', this.upErr);
|
||||||
|
},
|
||||||
|
fail: () => this.errorHandler('文件上传失败', this.upErr)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: () => this.errorHandler('文件选择失败', this.upErr)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
hChooseFile({
|
||||||
|
url,
|
||||||
|
name = 'file',
|
||||||
|
header,
|
||||||
|
...formData
|
||||||
|
} = {}) {
|
||||||
|
// #ifdef H5
|
||||||
|
// this.hRequest()
|
||||||
|
document.getElementById("file").click();
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// h5上传请求
|
||||||
|
hRequest({
|
||||||
|
url,
|
||||||
|
name = 'file',
|
||||||
|
header,
|
||||||
|
...formData
|
||||||
|
} = {}) {
|
||||||
|
// let mask = document.querySelector(".mask");
|
||||||
|
// let fileDom = document.querySelector(".file");
|
||||||
|
// let tis = document.querySelector(".tis");
|
||||||
|
// let progress = document.querySelector(".tis-progress");
|
||||||
|
// let cancel = document.querySelector(".cancel-btn");
|
||||||
|
var file = document.getElementById("file").files[0];
|
||||||
|
let createUpload = (file, url, key = 'file', header = {}, data = {}) => {
|
||||||
|
console.log(`上传地址:${url}\n请求头:${JSON.stringify(header)}\n参数:${JSON.stringify(data)}`);
|
||||||
|
if (!url) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//tis.style.display = 'flex';
|
||||||
|
let formData = new FormData();
|
||||||
|
formData.append(key, file);
|
||||||
|
for (let keys in data) {
|
||||||
|
formData.append(keys, data[keys]);
|
||||||
|
}
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
xhr.open("POST", url, true);
|
||||||
|
for (let keys in header) {
|
||||||
|
xhr.setRequestHeader(keys, header[keys]);
|
||||||
|
}
|
||||||
|
xhr.upload.addEventListener("progress", function(event) {
|
||||||
|
if (event.lengthComputable) {
|
||||||
|
let percent = Math.ceil(event.loaded * 100 / event.total) + "%";
|
||||||
|
// progress.innerText = `努力上传中..${percent}`;
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
xhr.ontimeout = function() {
|
||||||
|
// xhr请求超时事件处理
|
||||||
|
// progress.innerText = '请求超时';
|
||||||
|
};
|
||||||
|
xhr.onreadystatechange = (ev) => {
|
||||||
|
if (xhr.readyState == 4) {
|
||||||
|
console.log('status：' + xhr.status);
|
||||||
|
if (xhr.status == 200) {
|
||||||
|
let fileName = file.name;
|
||||||
|
// progress.innerText = '上传成功';
|
||||||
|
console.log('返回数据：' + xhr.responseText);
|
||||||
|
//location.href = `callback?fileName=${escape(file.name)}&id=${escape(xhr.responseText)}`;
|
||||||
|
return this.onCommit(
|
||||||
|
this.$emit('up-success', {
|
||||||
|
fileName,
|
||||||
|
data: JSON.parse(xhr.response)
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return this.errorHandler('文件上传失败', this.upErr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send(formData);
|
||||||
|
}
|
||||||
|
createUpload(file, url, this.filename, header, {});
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
上传
|
||||||
|
*/
|
||||||
|
upload(param = {}) {
|
||||||
|
if (!param.url) {
|
||||||
|
this.toast('上传地址不正确');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.loading) {
|
||||||
|
this.toast('还有个文件玩命处理中，请稍候..');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
return this.appChooseFile(param);
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
this.hParam = param;
|
||||||
|
return this.hChooseFile(param);
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
return this.wxChooseFile(param);
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
打开文件
|
||||||
|
*/
|
||||||
|
open(filePath) {
|
||||||
|
let system = uni.getSystemInfoSync().platform;
|
||||||
|
if (system == 'ios') {
|
||||||
|
filePath = encodeURI(filePath);
|
||||||
|
}
|
||||||
|
uni.openDocument({
|
||||||
|
filePath,
|
||||||
|
success: (res) => {
|
||||||
|
console.log('打开文档成功');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
下载
|
||||||
|
type: temporary=返回临时地址，local=长期保存到本地
|
||||||
|
*/
|
||||||
|
download(url, type = 'temporary') {
|
||||||
|
if (this.loading) {
|
||||||
|
this.toast('还有个文件玩命处理中，请稍候..');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.setdefUI();
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let downloadTask = uni.downloadFile({
|
||||||
|
url,
|
||||||
|
success: ({
|
||||||
|
statusCode,
|
||||||
|
tempFilePath
|
||||||
|
}) => {
|
||||||
|
if (statusCode === 200) {
|
||||||
|
if (type == 'local') {
|
||||||
|
uni.saveFile({
|
||||||
|
tempFilePath,
|
||||||
|
success: ({
|
||||||
|
savedFilePath
|
||||||
|
}) => this.onCommit(resolve(savedFilePath)),
|
||||||
|
fail: () => this.errorHandler('下载失败', reject)
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.onCommit(resolve(tempFilePath))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: () => this.errorHandler('下载失败', reject)
|
||||||
|
});
|
||||||
|
downloadTask.onProgressUpdate(({
|
||||||
|
progress = 0
|
||||||
|
}) => {
|
||||||
|
if (progress <= 100) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.value = progress;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onCommit(resolve) {
|
||||||
|
this.msg = '执行完毕~';
|
||||||
|
this.loading = false;
|
||||||
|
this.cubgColor = 'rgba(57, 181, 74, 0.5)';
|
||||||
|
setTimeout(() => {
|
||||||
|
this.show = false;
|
||||||
|
}, 1500);
|
||||||
|
return resolve;
|
||||||
|
},
|
||||||
|
setdefUI() {
|
||||||
|
this.cubgColor = this.bgColor;
|
||||||
|
this.value = 0;
|
||||||
|
this.loading = true;
|
||||||
|
this.show = true;
|
||||||
|
},
|
||||||
|
upErr(errText) {
|
||||||
|
this.$emit('up-error', errText);
|
||||||
|
},
|
||||||
|
errorHandler(errText, reject) {
|
||||||
|
this.msg = errText;
|
||||||
|
this.loading = false;
|
||||||
|
this.cubgColor = 'rgba(229, 77, 66, 0.5)';
|
||||||
|
setTimeout(() => {
|
||||||
|
this.show = false;
|
||||||
|
}, 1500);
|
||||||
|
return reject(errText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.t-toptips {
|
||||||
|
width: 100%;
|
||||||
|
padding: 18upx 30upx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 90;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30upx;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
word-break: break-all;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateZ(0) translateY(-100%);
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-top-show {
|
||||||
|
transform: translateZ(0) translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -67,6 +67,10 @@
|
||||||
<text @tap="previewImageEv(2)">查看</text>
|
<text @tap="previewImageEv(2)">查看</text>
|
||||||
<image @tap="uploadImgEv(2)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
|
<image @tap="uploadImgEv(2)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- <view style="color: #f26803;" class="width100 disjbac">
|
||||||
|
<text @tap="previewFileEv(2)">查看</text>
|
||||||
|
<image @tap="uploadFileEv(2)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
|
||||||
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="bacf pad-sx30 pad-zy40 disac bbot">
|
<view class="bacf pad-sx30 pad-zy40 disac bbot">
|
||||||
<view class="bold flexs mar-y40">签署工程师合作协议</view>
|
<view class="bold flexs mar-y40">签署工程师合作协议</view>
|
||||||
|
|
@ -86,15 +90,19 @@
|
||||||
<view class="person-btn" @tap="sumbmitData">提交保存</view>
|
<view class="person-btn" @tap="sumbmitData">提交保存</view>
|
||||||
</view>
|
</view>
|
||||||
</container-subgroup-two>
|
</container-subgroup-two>
|
||||||
|
<!-- 文件上传 -->
|
||||||
|
<l-file ref="lFile" @up-success="upSuccess"></l-file>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
||||||
|
import lFile from '@/components/l-file/l-file.vue';
|
||||||
import { uploadImg } from '@/jsFile/public-api.js';
|
import { uploadImg } from '@/jsFile/public-api.js';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
containerSubgroupTwo
|
containerSubgroupTwo,
|
||||||
|
lFile
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -107,6 +115,9 @@
|
||||||
imgList:[],
|
imgList:[],
|
||||||
flag:true,
|
flag:true,
|
||||||
temporaryImg:[],
|
temporaryImg:[],
|
||||||
|
imgUploadList:[],
|
||||||
|
fileUploadList:[],
|
||||||
|
uploadIndex:0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -239,6 +250,8 @@
|
||||||
uploadImgEv(index){
|
uploadImgEv(index){
|
||||||
if(index==0 || index==1){
|
if(index==0 || index==1){
|
||||||
var countNum = 1;
|
var countNum = 1;
|
||||||
|
}else{
|
||||||
|
var countNum = 9;
|
||||||
}
|
}
|
||||||
uni.chooseImage({
|
uni.chooseImage({
|
||||||
count:countNum,
|
count:countNum,
|
||||||
|
|
@ -263,6 +276,7 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 预览图片
|
// 预览图片
|
||||||
previewImageEv(current){
|
previewImageEv(current){
|
||||||
let arr = [];
|
let arr = [];
|
||||||
|
|
@ -270,7 +284,6 @@
|
||||||
this.imgList.forEach((item,index)=>{
|
this.imgList.forEach((item,index)=>{
|
||||||
if(current==index){
|
if(current==index){
|
||||||
arr = item.split(',');
|
arr = item.split(',');
|
||||||
console.log(arr,33333)
|
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
if(arr.length) {
|
if(arr.length) {
|
||||||
|
|
@ -282,7 +295,79 @@
|
||||||
} else {
|
} else {
|
||||||
this.$toolAll.tools.showToast('请上传，再查看')
|
this.$toolAll.tools.showToast('请上传，再查看')
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 文件上传
|
||||||
|
uploadFileEv(index) {
|
||||||
|
const that = this;
|
||||||
|
if(that.imgList[index].length >= 9){
|
||||||
|
this.$toolAll.tools.showToast('最多上传9张')
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
that.$refs.lFile.upload({
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
currentWebview: that.$mp.page.$getAppWebview(),
|
||||||
|
// #endif
|
||||||
|
url: `${getApp().globalData.hostapi}/universal/api.upload/upload`, //你的上传附件接口地址
|
||||||
|
name: 'file',
|
||||||
|
dir:'files',
|
||||||
|
header: {
|
||||||
|
token:uni.getStorageSync('token') || ''
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//上传成功
|
||||||
|
upSuccess(res) {
|
||||||
|
console.log(res,'上传附件')
|
||||||
|
let url = res.root.url;
|
||||||
|
let name = res.root.originalName;
|
||||||
|
let fileType = this.isFileType(res.root.type);
|
||||||
|
let size = res.root.size;
|
||||||
|
if(fileType == 'image'){
|
||||||
|
this.imgUploadList.push({url,name,fileType,size});
|
||||||
|
}else{
|
||||||
|
this.fileUploadList.push({url,name,fileType,size})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//根据文件后缀名来判断，展示对应的图标
|
||||||
|
isImage(type){
|
||||||
|
return ['png','jpg','jpeg','gif','svg'].includes(type.toLowerCase());
|
||||||
|
},
|
||||||
|
isDocx(type){
|
||||||
|
return ['doc','docx'].includes(type.toLowerCase());
|
||||||
|
},
|
||||||
|
isXsls(type){
|
||||||
|
return ['xsls','xsl'].includes(type.toLowerCase());
|
||||||
|
},
|
||||||
|
isText(type){
|
||||||
|
return ['text','txt'].includes(type.toLowerCase());
|
||||||
|
},
|
||||||
|
isFileType(type){
|
||||||
|
if(this.isImage(type)) return 'image';
|
||||||
|
if(this.isXsls(type)) return 'excel';
|
||||||
|
if(type == 'pdf') return 'pdf';
|
||||||
|
if(this.isDocx(type)) return 'word';
|
||||||
|
if(this.isText(type)) return "text";
|
||||||
|
// return "#icon-file-b--6";
|
||||||
|
},
|
||||||
|
|
||||||
|
//文件预览
|
||||||
|
previewFileEv(item){
|
||||||
|
uni.downloadFile({
|
||||||
|
url: item.url,
|
||||||
|
success: (res) => {
|
||||||
|
let filePath = res.tempFilePath;
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: filePath,
|
||||||
|
success: (res) => {
|
||||||
|
console.log('打开文档成功');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue