ng_notes_mini/pages/index/activity/list.vue

<template>
  <view class="content">
<!-- 	  <view>
	  </view> -->
	<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#1c9bdc"></uni-segmented-control>
    <view v-show="current == 0">
		<view class="active-title-box">
			<view class="header-title">{{activeDesc.name}}</view>
			<view style="color: gray;margin-left: 3%;">{{activeDesc.start_time}}</view>
		</view>
		<view class="active-box" v-for="(item,index) in activiList" :key="index" style="flex-direction: column;" :class="index===activiList.length-1?'marginB40':''">
			<view class="active-header">
			<!-- 	<view class="active-type">
					<text style="margin: 0 auto;">头像</text>
				</view> -->
				<view class="active-content-box">
					<view class="active-content margin-top-3">
						<view class="active-name">{{item.author}}</view>
						<!-- <view class="active-date">{{item.addtime}}</view> -->
					</view>
					<view class="active-content">
						<view class="active-date">{{item.addtime}}</view>
					</view>
				</view>
			</view>
			<view class="active-content-box">
				<view class="active-content">
					<view class="active-title">{{item.content}}</view>
				</view>
			</view>
			<view class="active-content-box-img margin-top-3">
				<view v-for="(img,indexImg) in item.pic_list" :key="indexImg" class="marginR5">
					<image :src="img.pic_url_resize" mode="aspectFill" @click="showLarge(item.pic_list,indexImg)"></image>
				</view>
			</view>
			
		    <view class="margin-top-3" style="color: #007AFF;word-break: break-all;" @click="tonewurl(item.web_url)" v-if="item.web_url">
		    	{{item.web_url}}
		    </view>
			<view v-if="item.web_url" style="font-size: 24rpx;color: #ccc;">
				点击链接可进行复制，前往浏览器查看。
			</view>
			
			<view class="edit-icon-box">
				  <image src="/static/edit-icon.png" mode="aspectFit" v-if="item.edit_auth" @click="goEditPage(item.id,'record')"></image>
				  <image src="/static/del-icon.png" mode="aspectFit" v-if="item.del_auth" @click="delProcess(item.id,'record')"></image>
			</view>
		</view>
		
		<button class="footer-box-record" @click="goRecord()">上传记录</button>
	</view>
	<view v-if="current == 1">
		 <view class="active-box active-box-comment" v-for="(item,index) in fileList" :key="index" style="flex-direction: column;" :class="index===fileList.length-1?'marginB40':''">
		 				<view class="active-header-comment">
		 					<view class="active-content">
		 						<view class="active-type-comment">
		 							<image :src="item.avatar_url || '/static/auth-icon.png'" mode="aspectFit"></image>
		 						</view>
		 						<view class="active-name">{{item.author}}</view>
		 					</view>
		 					<view class="active-date-comment">{{item.addtime}}</view>
		 				</view>	
		 				<view class="active-content-files files-class-box">
						     	<view class="show-file-box display-evenly-column .items-center" v-for="(file,index) in item.file_list" :key="file.id" @click="()=>openFileFn(file.url)">
						     		<image :src="fileType[file.type] || '../../../static/file.png'" mode="aspectFill" style="width: 70rpx;height: 70rpx;"></image>
						     		<view class="margin-top-3 file-font-box">{{file.name}}</view>
						     	</view>
						</view>
						<view class="files-desc-box">{{item.content}}</view>
		 				<view class="edit-icon-box-comment">
		 					  <image src="/static/edit-icon.png" mode="aspectFit" v-if="item.edit_auth" @click="goEditPage(item.id,'files')"></image>
		 					  <image class="margin-right-0" src="/static/del-icon.png" mode="aspectFit" v-if="item.del_auth" @click="delProcess(item.id,'files')"></image>
		 				</view>
		 </view>
		 <button class="footer-box-record" @click="goFiles()">上传文件</button>
	</view>
	<view v-if="current == 2">
		 <view class="active-box active-box-comment" v-for="(item,index) in commentList" :key="index" style="flex-direction: column;" :class="index===commentList.length-1?'marginB40':''">
				<view class="active-header-comment">
					<view class="active-content">
						<view class="active-type-comment">
							<image :src="item.avatar_url" mode="aspectFit"></image>
						</view>
						<view class="active-name">{{item.author}}</view>
					</view>
					<view class="active-date-comment">{{item.addtime}}</view>
				</view>	
				<view class="active-content-comment margin-top-1">{{item.content}}</view>
				<view class="edit-icon-box-comment">
					 <!-- <image src="/static/edit-icon.png" mode="aspectFit" v-if="item.edit_auth" @click="goEditPage(item.id,'comment')"></image> -->
					  <image class="margin-right-0" src="/static/del-icon.png" mode="aspectFit" v-if="item.del_auth" @click="delProcess(item.id,'comment')"></image>
				</view>
		 </view>
		<button class="footer-box-record" @click="goComment()">上传评论</button>
	</view>
    <share-modal  @closeShare="closeShare" :isShowShare="isShowShareModal" :class="{ shareParent: isShowShareModal}"></share-modal>
 
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import shareModal from '@/components/share-modal/share-modal.vue'
export default {
	components: {
		"share-modal": shareModal,
	},
   data() {
    return {
      isAuth:getApp().globalData.globalAuth,
      userHeadImg: getApp().globalData.user_headUrl,
      userNickName:getApp().globalData.user_name,
	  globalUrl:getApp().globalData.shareUrl,
	  activeId:'',
	  branchId:'',
	  recordId:'',
	  activeDesc:{},
	  activiList:[],
	  commentList:[],
	  fileList:[],
	  fileObj:{},
	  isShowShareModal:false,
	  items:['记录','文件','评论'],
	  current:0,
	  fileType:{
		  'docx':'../../../static/files-icon/word.png',
		  'doc':'../../../static/files-icon/word.png',
		  'pdf':'../../../static/files-icon/pdf.png',
		  'xlsx':'../../../static/files-icon/excel.png',
		  'xls':'../../../static/files-icon/excel.png',
		  'ppt':'../../../static/files-icon/ppt.png',
	  }
    };
  },
  onLoad(option) {
	this.recordId = option.id;
	this.readDesc(this.recordId);
	this.readActive(this.recordId);
  },
  onShow() {
	// this.readActive(this.recordId);
	 //this.getFileList(this.recordId);
  },
  onShareAppMessage() {
    return {
  	  title: '农工笔记',
  	  path:'/pages/index/activity/activity'
  	}
  },
  methods: {
	      goEditPage(id,type){
			switch (type){
				case 'record':
					uni.navigateTo({
						url:'./record?id='+ id + '&bId=' + this.branchId + '&aId=' + this.activeId + '&types=edit'
					}) 
					break;
				case 'files':
				   uni.navigateTo({
				   		url:'./files?id='+ id + '&bId=' + this.branchId + '&aId=' + this.activeId + '&types=edit'
				   }) 
				   break;
				case 'comment':
				   uni.navigateTo({
						url:'./comment?id='+ id + '&bId=' + this.branchId + '&aId=' + this.activeId + '&types=edit'
				   }) 
				   break;
			}  
		  },
		  pageShowShare(obj,tabs){
			  console.log(obj,tabs)
			  switch (tabs){
				case 'record':
				this.readActive(this.recordId)
				  	break;
			  	case 'files':
				   this.getFileList(this.recordId)
			  		break;
				case 'comment':
				   this.getCommentList(this.recordId)
					break;
			  }
			  this.isShowShareModal = true;
		  },
		  closeShare(e){
		  	this.isShowShareModal = false;
		  },
		  onClickItem(e){
		  	 this.current = e.currentIndex;
			 if(e.currentIndex == '0'){
			 	 this.readActive(this.recordId)
			 }
			 if(e.currentIndex == '1'){
				 this.getFileList(this.recordId)
			 }
			 if(e.currentIndex == '2'){
				 this.getCommentList(this.recordId)
			 }
		  },
		  //打开文件
		  openFileFn(files){
			uni.showLoading({
				mask:true,
				title:'加载中...',
				icon:'none'
			})  
		  	uni.downloadFile({
		  		url: getApp().globalData.shareUrl + files,
		  		success: function(res) {
		  			var filePath = res.tempFilePath;
		  			//打开文件有效值 doc, xls, ppt, pdf, docx, xlsx, pptx
		  			uni.openDocument({
		  				filePath:filePath,
		  				success: function(res) {
		  					//that.downloadFile_onoff = true;
							uni.hideLoading();
		  				},
		  				fail(res) {
		  					uni.showToast({
		  						title: '暂不支持此类型',
		  						icon:'none',
		  						duration: 2000
		  					});
		  					uni.hideLoading();
		  					//that.downloadFile_onoff = true;
		  				}
		  			}); 
		  			}
		  		});
		  },
		  showLarge(urlList,index) {
			  let imgList = urlList,imgArr = [];
			  imgList.forEach((item,index)=>{
				  imgArr.push(item.pic_url)
			  })
		    uni.previewImage({
		      urls:imgArr,
			  current:imgArr[index],
		      longPressActions: {
		        itemList: ["发送给朋友", "保存图片"],
		        success: function (data) {},
		        fail: function (err) {
		          console.log(err.errMsg);
		        },
		      },
		    });
		  }, 
		  delProcessRequeset(delId){
			  let md5Sign = md5(
			    "method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
			      "&secret=" + getApp().globalData.secret
			  );
			  let url = getApp().globalData.shareUrl +"api/api.php" +
			    "?method=activity&action=process_del&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:delId
			    },
			    success: (res) => {
			      if (res.data.code === 200) {
					uni.showToast({
					  title: "删除成功",
					  icon: "none", 
					  duration: 2500,
					  success:()=>{
						 this.readActive(this.activeId)
					  }
					});
			      }
			    },
			    fail: () => {
			      console.log("连接失败");
			    },
			  });
		  },
		  delCommentRequeset(delId){
			  let md5Sign = md5(
				"method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
				  "&secret=" + getApp().globalData.secret
			  );
			  let url = getApp().globalData.shareUrl +"api/api.php" +
				"?method=activity&action=comment_del&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:delId
				},
				success: (res) => {
				  if (res.data.code === 200) {
					uni.showToast({
					  title: "删除成功",
					  icon: "none", 
					  duration: 2500,
					  success:()=>{
						 this.getCommentList(this.activeId)
					  }
					});
				  }
				},
				fail: () => {
				  console.log("连接失败");
				},
			  });
		  },
		  delFilesRequeset(delId){
			  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_del&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:delId
				},
				success: (res) => {
				  if (res.data.code === 200) {
					uni.showToast({
					  title: "删除成功",
					  icon: "none", 
					  duration: 2500,
					  success:()=>{
						 this.getFileList(this.activeId)
					  }
					});
				  }
				},
				fail: () => {
				  console.log("连接失败");
				},
			  });
		  },
		  delProcess(id,type){
		  		 let that = this;
				 let typeTitle;
				 switch (type){
				 	case 'record':
					 typeTitle = '确定删除此记录吗'
				 		break;
					case 'comment':
					 typeTitle = '确定删除此评论吗'
						break;	
					case 'files':
					 typeTitle = '确定删除此文件吗'
						break;	
				 }
		  		 uni.showModal({
		  		   title: typeTitle,
		  		   success(res) {
		  		 	if (res.confirm) {
						if(type === 'record') {
							that.delProcessRequeset(id);
						}
		  		 	    else if (type === 'comment') {
							that.delCommentRequeset(id);
						}
						else if (type === 'files') {
							that.delFilesRequeset(id);
						}
		  		 	} else if (res.cancel) {
		  		 	  console.log("用户点击取消");
		  		 	}
		  		   },
		  		 });
		  },
		  readDesc(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=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) {
					  this.activeDesc = res.data.data;
					  this.branchId = res.data.data.branch_id;
					  this.activeId = res.data.data.id;
				  }
				},
				fail: () => {
				  console.log("连接失败");
				},
			  });
		  },
		  getCommentList(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=comment_list&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,
				  activity_id : id
				},
				success: (res) => {
				  if (res.data.code === 200) {
					  console.log(res.data.data)
					  this.commentList = res.data.data.list;
				  }
				},
				fail: () => {
				  console.log("连接失败");
				},
			  });
		  },
		  splitFileName(fileList){
			  let arr = fileList;
			  arr.forEach((item,index)=>{
				  item.file_list.forEach((child,childIndex)=>{
					  child.type = child.name.split('.').pop().toLowerCase();
				  })
			  })
			  return arr;
		  },
		  getFileList(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_list&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,
				  activity_id : id
				},
				success: (res) => {
				  if (res.data.code === 200) {
					  let fileArr = res.data.data.list;
					  this.fileList = this.splitFileName(fileArr);
					  console.log(this.fileList)
				  }
				},
				fail: () => {
				  console.log("连接失败");
				},
			  });
		  },
		  readActive(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=process_list&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,
				  activity_id:id
			    },
			    success: (res) => {
			      if (res.data.code === 200) {
					  let listArr = res.data.data.list;
					  listArr.forEach((item)=>{
						  item.pic_list.forEach((child)=>{
							  child.pic_url = this.globalUrl + child.pic_url;
							  child.pic_url_resize = this.globalUrl + child.pic_url_resize;
						  })
					  })
					  this.activiList = listArr;
			      }
			    },
			    fail: () => {
			      console.log("连接失败");
			    },
			  });
		  },
		  tonewurl(urls) {
			  uni.setClipboardData({
			        data: urls,
			        success: function (res) {
			          uni.showToast({
			            title: '复制成功,请在手机浏览器中打开',
						icon:"none"
			          });
			        }
			      })
			  // uni.navigateTo({
				 //  url:'/pages/index/webview/web-view?url=' + urls
			  // });
		  },
		  goRecord(){
			  uni.navigateTo({
			  	url:'./record?bId=' + this.branchId + '&aId=' + this.activeId + '&types=add'
			  })
		  },
		  goFiles(){
			  uni.navigateTo({
				url:'./files?bId=' + this.branchId + '&aId=' + this.activeId + '&types=add'
			  })
		  },
		  goComment(){
			  uni.navigateTo({
				url:'./comment?bId=' + this.branchId + '&aId=' + this.activeId + '&types=add'
			  })
		  },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  .self-inf {
    // border-radius: 0rpx 0rpx 100% 100%;
    .img-name-box {
		height: 150rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		width: 85%;
      .auth-btn {
		margin-left: 30rpx;
		margin-top: 20rpx;
        font-size: 28rpx;
        background-color: #02a7f0;
        color: #fff;
      }
      .heade-img {
        z-index: 1;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        // margin-left: 80rpx;
      }
    }
    .nickname {
      font-weight: 600;
      font-size: 28rpx;
      margin-left: 30rpx;
      margin-top: 20rpx;
      color: #555;
      letter-spacing: 1rpx;
    }
  }
}
.org-info-box {
    display: flex;
    justify-content: space-evenly;
    height: 80rpx;
    align-items: center;
    width: 100%;
    border-top: 1px solid #d4d4d4;
    color: #555;
    font-size: 28rpx;
    background: #fff;
} 
.org-line {
	width: 1px;
	height: 82rpx;
	background: #d4d4d4;
} 
.header-title {
	font-size: 32rpx;
	font-weight: bold;
	margin: 3% 0 1% 3%;
}
.active-title-box {
    font-size: 26rpx;
    height: 100rpx;
    border-bottom: 4px solid #eeeeee;
		.time-select-box {
			width: 32%;
			margin-left: 5%;
		}
		picker {
		    width: 25%;
			border: 1px solid #d7d7d7;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 10rpx;
			margin-left: 20rpx;
			padding: 0 10rpx;
			position: relative;
			image {
				width: 20rpx;
				height: 20rpx;
				position: absolute;
				top: 11px;
				right: 5px;
			}
		}
		button {
			width: 24%;
			font-size: 25rpx;
			background: #4988fd;
			color: #fff;
			margin-left: 25rpx;
		}
}
.margin-top-3 {
	margin-top: 3%;
}
.active-box {
	display: flex;
    position: relative;
    font-size: 28rpx;
    padding: 20rpx;
    width: 92%;
    margin-left: 1.5%;
    margin-bottom: 1%;
    box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
	.active-header {
		display: flex;
		width: 100%;
	}
	.active-header-comment {
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
	}
	.active-type {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #ccc;
		text-align: center;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #fff;
	}
	.active-type-comment {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		margin-right: 15rpx;
			image {
				width: 100%;
			    height: 100%;
			    border-radius: 10rpx;
			}
	}
	.active-content-box{
		display: flex;
		flex-direction: column;
		// margin-left: 20rpx;
	}
	.active-content-box-img {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		image {
			width: 220rpx;
			height: 300rpx;
		}
	}
	.active-content {
		display: flex;
		align-items: center;
		// height: 45rpx;
		font-size: 26rpx;	
		.active-title {
			font-size: 28rpx;
			margin-right: 10rpx;
			font-weight: bold;
			word-break: break-all;
		}
		.active-name {
			font-size: 26rpx;
			margin-right: 10rpx;
		}
		.active-date {
			color: #ccc;
		}
	}
	.active-date-comment {
		font-size: 26rpx;
		color: #8590a6;
	}
	.edit-icon-box {
		position: absolute;
		right: 10px;
		top: 10px;
		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 10rpx;	
		}
	}
	.bg-yellow {
		background-color: #ffdd40;
	}
	.bg-red {
		background-color: #ec808d;
	}
	.bg-blue {
		background-color: #81d3f8;
	}
}   
    .marginB40 {
		margin-bottom: 80rpx;
	}
	.marginR5{
		margin-right: 5rpx;
	}
	.footer-box-record{
		position: fixed;
		bottom: 0;
		background-color:#f59a23;
		width: 100%;
		border-radius: 0;
		color: #fff;
		font-size: 32rpx;
	}
	.img-container{
		display: flex;
		flex-direction: column;
		width: 90%;
		margin: 3% auto;
		font-size: 26rpx;
		label {
			width: 20%;
			margin-left: 2%;
			margin-bottom: 2%;
		}
		.note-image-box{
			width: 75%;
			display: flex;
			flex-wrap: wrap;
			.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%;
					}
				}
			}
		}
	}
	.active-box-comment {
		border-bottom: 1px solid #d7d7d7;
		box-shadow: none;
	}
    .active-content-comment {
		font-size: 28rpx;
		margin-right: 10rpx;
		// font-weight: bold;
		word-break: break-all;
		margin-left: 70rpx;
		width: 85%;
	}
	.edit-icon-box-comment {
		position: absolute;
		right: 10px;
		bottom: 5px;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;	
		} 
	}
	.active-content-files {
		font-size: 28rpx;
		margin-right: 10rpx;
		// font-weight: bold;
		word-break: break-all;
		margin-left: 70rpx;
		width: 85%;
		height: 150rpx;
	}
	.edit-icon-box-file {
		position: absolute;
		right: 10px;
		bottom: 5px;
		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 10rpx;	
		} 
	}
	.files-class-box {
		display: flex;
		justify-content: flex-start;
		margin-top: 10px;
		width: 80%;
	}
	.files-desc-box {
		text-align: center;
		margin-top: 10px;
	}
    .show-file-box {
		width: 30%;
		margin-right: 20rpx;
	}
	.file-font-box {
		width: 60%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 24rpx;
	}
</style>