ng_notes_mini/pages/index/activity/files.vue

<template>
	<view class="content-box">
		<view class="info-box">
			<view class="img-container">
				<label for="img">上传文件</label>
				 <view class="note-image-box">
					<view class="note-image-item" v-for="(item,index) in uploadList" :key="index">
						<!-- //右上角删除图标 -->
						<view class="close-icon" @click="delFile(index)">
							<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
						</view>
						<view class="image-box display-around-column" @click="openFile(item.url)">
							<image src="../../../static/file.png" mode="aspectFill" style="width: 90rpx;height: 70rpx;"></image>
							<view class="margin-top-3">{{item.name}}</view>
						</view>
					</view>
					<view v-if="uploadList.length < 3" class="note-image-item" @click="chooseFile()">
						<!-- //添加图片按钮 -->
						<view class="image-box">
							<uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
						</view>
					</view>
				 </view>
			</view>	
		</view>
		
		<view class="info-box">
			<view class="info-title-box">
				<!-- <image src="/static/require-icon.png" mode="aspectFill"></image> -->
				<text>文件备注</text>
			</view>
			<view class="info-value-box">
				<textarea type="text" class="textarea-box" v-model="contentDesc"></textarea>
			</view>		
		</view>
		
		<view class="footer-box">
			<!-- <button type="primary" class="submit-bth" style="background-color: #aaaaaa;" @click="goStep()">清空</button> -->
			<button type="primary" class="submit-bth" style="background-color: #169bd5;" @click="addOrEditActiveFiles()">提交</button>
		</view>
<!-- 		<view class="mask-share-box" v-if="isShowShare">
			<image src="/static/share-arrow.png" mode="aspectFit"></image>
			<view>点击右上角分享</view>
			<button @click="closeShare">关闭</button>
		</view> -->
		<!-- <share-modal  @closeShare="closeShare" :isShowShare="isShowShareModal"></share-modal> -->
	</view>
</template>

<script>
	import md5 from "@/common/md5.js";
	import shareModal from '@/components/share-modal/share-modal.vue'
	// var graceChecker = require("../../../common/graceChecker.js");
	export default {
		components: {
			"share-modal": shareModal,
		},
		data() {
			return {
				globalUrl:getApp().globalData.shareUrl,
				branchId:'',
				activeId:'',
				recordId:'',
				recordObj:{},
				fileIdList: [],
				uploadList:[],
				contentDesc:'',
				contentLink:'',
				type:'add',
				isShowShareModal:false,
			}
		},
		onLoad(option) {
			console.log(option)
			this.branchId = option.bId;
			this.activeId = option.aId;
			this.type = option.types;
			if(option.types === 'edit'){
				this.getInfos(option.id)
			}
		},
		onShow() {
		},
		onShareAppMessage() {
		  return {
			  title: '农工笔记',
			  path:'/pages/index/activity/activity'
			}
		},
		methods: {
			closeShare(e){
				this.isShowShareModal = false;
				uni.showToast({
				  title: "上传成功",
				  icon: "none", 
				  duration: 2500,
				});
				setTimeout(()=>{uni.navigateBack({})},500)
			},
			getInfos(id){
				let md5Sign = md5(
					"method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
					  "&secret=" + getApp().globalData.secret
				);
				let url = getApp().globalData.shareUrl +"api/api.php" +"?method=activity&action=files_info_by_id&timestamp=" +
								getApp().globalData.globalTimestamp + "&sign=" + md5Sign;
				uni.request({
					url: url,
					method: "POST",
					header: {
					  "content-type": "application/x-www-form-urlencoded",
					},
					data: {
					  openid:getApp().globalData.open_id,
					  id:id
					},
					success: (res) => {
					  if (res.data.code === 200) {
						  let obj = res.data.data;
						  // this.recordId = obj.id;
						  // this.contentDesc = obj.content;
						  // this.contentLink = obj.web_url;
						  // this.uploadList = obj.pic_list.map((item)=>{return this.globalUrl + item.pic_url});
						  // this.imgIdList = obj.pic_list.map((item)=>{return item.pic_id})
					  }
					},
					fail: () => {
					  console.log("连接失败");
					},
				});
			}, 
			addOrEditActiveFiles(){
			    let url,data;
				let md5Sign = md5(
				  "method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
				    "&secret=" + getApp().globalData.secret
				);
				if(this.type === 'add'){
					  url = getApp().globalData.shareUrl +"api/api.php" +"?method=activity&action=files_add&timestamp=" +
					  getApp().globalData.globalTimestamp + "&sign=" + md5Sign;
					  data = {
						openid:getApp().globalData.open_id,
						branch_id:this.branchId,
						activity_id:this.activeId, 
						content:this.contentDesc,  
						attach_ids:this.fileIdList.join()
					   }
				}else {
					  url = getApp().globalData.shareUrl +"api/api.php" +"?method=activity&action=files_update&timestamp=" +
					  getApp().globalData.globalTimestamp + "&sign=" + md5Sign;
					  data = {
						openid:getApp().globalData.open_id,
						id:this.recordId,
						branch_id:this.branchId,
						activity_id:this.activeId, 
						content:this.contentDesc,  
						attach_ids:this.fileIdList.join()
					   }
				}
				uni.request({
				  url: url,
				  method: "POST",
				  header: {
				    "content-type": "application/x-www-form-urlencoded",
				  },
				  data:data,
				  success: (res) => {
				    if (res.data.code === 200) {
						if(this.type === 'edit'){
							uni.showToast({
							  title: "修改成功",
							  icon: "none", 
							  duration: 2500,
							});
							setTimeout(()=>{uni.navigateBack({})},500)
						}else {
							let types = 'add';
							let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.pageShowShare(types)
							uni.showToast({
							  title: "上传成功",
							  icon: "none", 
							  duration: 2500,
							});
							setTimeout(()=>{uni.navigateBack({delta:1})},500)
							//this.isShowShareModal = true
						}
				    }
				  },
				  fail: () => {
				    console.log("连接失败");
				  },
				});
			},
		 openFile(files){
			console.log(files)
			uni.downloadFile({
				url: files,
				success: function(res) {
					var filePath = res.tempFilePath;
					//打开文件有效值 doc, xls, ppt, pdf, docx, xlsx, pptx
					uni.openDocument({
						filePath:filePath,
						success: function(res) {
							console.log(res)
							//that.downloadFile_onoff = true;
						},
						fail(res) {
							console.log(res)
							uni.showToast({
								title: '暂不支持此类型',
								icon:'none',
								duration: 2000
							});
							//uni.hideLoading();
							//that.downloadFile_onoff = true;
						}
					}); 
					}
				});
		 },
		  chooseFile(){
		  	//chooseMessageFile
		  	let that = this;
		  	uni.chooseMessageFile({
		  	  count: 3,
		  	  type: 'file',
		  	  success (res) {
		  	    for(let i=0;i<res.tempFiles.length;i++){
		  		   res.tempFiles[i].size  = (res.tempFiles[i].size/1024) ;
		  		   res.tempFiles[i].size = Math.trunc(res.tempFiles[i].size);
				   let msg = {name:res.tempFiles[i].name,textValue:res.tempFiles[i].path,size:res.tempFiles[i].size};
				   that.uploadFileRequest(msg)
		  	   }
		  	  }
		  	})
		  	console.log('文件上传')
		  },
		  uploadFileRequest(fileVal){
		  	let that = this;
			let md5Sign = md5(
			  "method=" +"activity_file_upload" +"&timestamp=" +
				getApp().globalData.globalTimestamp +"&secret=" +getApp().globalData.secret
			);
			let url = getApp().globalData.shareUrl + "api/api.php" +"?method=activity_file_upload&timestamp=" +
			  getApp().globalData.globalTimestamp +"&sign=" + md5Sign;
			  uni.uploadFile({
		  		url:url, //需要设置为全局
		  		filePath:fileVal.textValue,
		  		name:'file',
		  		formData: {
					openid: getApp().globalData.open_id,
		  			file:fileVal.textValue,
					branch_id:this.branchId,
					file_name:fileVal.name
		  		},
		  		success: res => {
					 this.fileObj = JSON.parse(res.data);
					 console.log(this.fileObj.data)
					 this.fileObj.data.url = getApp().globalData.shareUrl + this.fileObj.data.url;
					 this.uploadList.push(this.fileObj.data);
					 this.fileIdList.push(this.fileObj.data.id);
		  		},
		  		fail:res=>{
		  			console.log("上传请求失败");
		  			console.log(res);
		  		}
		  	});
		  },
			delFile(idx) {
			  this.uploadList.splice(idx, 1);
			  this.fileIdList.splice(idx, 1);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		&_list{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content:space-around;
			&_lable{
				
			}
			&_content{
				flex: 1;
				width: auto;
				text-align: right;
			}
		}
	}
	.content-box {
		width: 100%;
		/* height: 100%; */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}
	.header-box {
		width: 85%;
		height:80rpx;
		border: .5px dotted #00A1B4;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color:#00A1B4 ;
		/* font-family: PingFangSC-Regular; */
		margin-top: 2%;
	}
	.header-box image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 1%;
	}
	.self-title-box {
		width: 90%;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		letter-spacing: 2rpx;
		color:#3C3C3C ;
		/* font-family: SimHei; */
		margin: 4% auto;
		font-weight: bold;
		height: 50rpx;
		line-height: 50rpx;

	}
	.self-title-box image {
		width: 6rpx;
		height: 32rpx;
		margin-right: 2%;
	}
	.info-box {
		width: 90%;
		margin: 3% auto;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// height: 180rpx;
	}
	.info-title-box {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	.info-title-box image{
		width: 15rpx;
		height: 15rpx;
		margin-right: 2%;
	}
	.info-value-box {
		width: 100%;
	}
	.info-value-box input {
		height: 88rpx;
		background: #f7f7f7;
		font-size: 26rpx;
		padding-left: 4%;
		margin: 2% auto;
	}
	.info-value-box picker {
		position: relative;
	}
	.info-value-box picker image {
		position: absolute;
		width: 25rpx;
		height: 25rpx;
		right: 10px;
		top: 30rpx;
	}
	.select-box {
		height: 80rpx;
		background: #f7f7f7;
		font-size: 26rpx;
		padding-left: 4%;
		margin: 2% auto;
		color: #888;
		line-height: 88rpx;
	}
	.info-gender-box {
		width: 75%;
		font-size: 28rpx;
	}
	.form-radio {
			 transform: scale(0.6);
	}
	.padding-left-2 {
		// padding-left: 2%;
	}
	.margin-right-10 {
		margin-right: 10%;
	}
	.border-line-box {
		width: 100%;
		height: 20rpx;
		background: #f7f7f7;
	}
	.picker-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60rpx;
		line-height: 60rpx;
		background: #f7f7f7;
		height: 88rpx;
		line-height: 88rpx;
		background: #f7f7f7;
		font-size: 28rpx;
		padding-left: 4%;
	}
	.uni-input image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 2%;
		float: right;
	}
	.textarea-box {
		background: #f7f7f7;
		min-height: 120rpx;
		font-size: 28rpx;
		margin: 5% auto;
		padding: 4%;
		margin-bottom: 8%;
	}
	.upload-box {
		display: flex;
		flex-flow: column;
		width: 22%;
		height: 100rpx;
		border-radius: 10rpx;
		padding-top: 15rpx;
		}
	  image {
	    width: 100rpx;
	    height:100rpx;
	  }
	.upload-box-photo {
		width: 25%;
		height: 100rpx;
		border-radius: 10rpx;
		padding-top: 15rpx;
		position: relative;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.del-icon {
	  position: absolute;
	  right: -15rpx;
	  width: 30rpx;
	  height: 30rpx;
	}
	
	.update_button {
	  text-align: center;
	  display: flex;
	  flex-wrap: wrap;
	}
	.picker-class {
		border-radius: 10rpx;
		padding: 10rpx;
		width: 73%;
		font-size: 28rpx;
		background: #f5f5f5;
	}
	.picker-class image {
		width: 26rpx;
		height: 26rpx;
	}
	.submit-bth {
		width: 25%;
		font-size: 26rpx;
		margin: 0 0 5% 0;
		color: #fff;
	}
	.select-member {
		input {
			    margin: 2% 2% 2% 0;
			    height: 80rpx;
			    line-height: 80rpx;
		}
		button {
			    background-color: #169bd5;
			    margin: 0;
			    height: 60rpx;
				line-height: 60rpx;
			    width: 20%;
		}
	}
	.check-class {
		margin-right:10rpx;
		transform:scale(.8);
		width: 48%;
		margin-top: 2%;
	}
	.step-box {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 90%;
		margin: 5% 0 5% 0;
	}
	.step-1 {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color:#aaaaaa;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
	}
	.footer-box {
		margin-top: 5%;
		width: 90%;
		display: flex;
		justify-content: space-evenly;
	}
	.textarea-box {
		background: #f7f7f7;
		min-height: 120rpx;
		font-size: 28rpx;
		margin: 3% auto;
		padding: 4%;
	}
	.img-container{
		width: 90%;
		font-size: 26rpx;
		.note-image-box{
			margin-top: 5px;
			display: flex;
			flex-wrap: wrap;
			padding: 10px;
			.note-image-item{
				position: relative;
				//这两个百分比很关键
				width: 33.33%;
				height: 0;
				padding-top: 33.33%;
				box-sizing: border-box;
				.close-icon{
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0;
					top: 0;
					width: 22px;
					height: 22px;
					border-radius: 50%;
					background-color: #d5d5d5;
					z-index: 2;
				}
				.image-box{
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 5px;
					right: 5px;
					bottom: 5px;
					left: 5px;
					border: 1px #eee solid;
					border-radius: 5px;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>