ng_notes_mini/pages/index/honor/honor.vue

<template>
  <view class="content">
	 <view>
		 <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#1c9bdc"></uni-segmented-control>
		 <view class="content">
			 <view v-show="current == 0">
				 <view class="active-title-box">
                  <!--<uni-datetime-picker
				 	    class="time-select-box"
				 		type="date"
				 		:value="single"
				 		@change="change"
				 		:clear-icon="false"
				 	/> -->
					<picker mode="date" fields="year"  @change="bindDateChange" class="picker-class">
						<view class="uni-input display-between items-center">{{dateYear}}年<image src="/static/calendar_icon.svg" mode="aspectFit" style="top: 18rpx;"></image></view>
					</picker>
					<picker :range="arrayMonth" :value="dateMonth"  @change="bindDateMonthChange" class="picker-class" style="margin-left: 2%;">
						<view class="uni-input display-between items-center" style="color: #707070;">{{dateMonth}}月<image src="/static/calendar_icon.svg" mode="aspectFit" style="top: 18rpx;"></image></view>
					</picker>
				    <picker @change="bindPickerChange" :value="index" :range="array">
				 			<view class="uni-input">{{array[index]}}</view>
				 			<image src="/static/arrow_down.svg" mode="aspectFit"></image>
				    </picker>
				    <button @click="goRecord()">+获奖记录</button>
				 </view>
				 <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				 <view class="honor-box" v-for="(item,index) in honorList" :key="index" style="position: relative;">
					    <view class="honor-name">{{item.name}}</view>
						<image :src="item.pic_url_resize" mode="aspectFill" @click="showLarge(item.pic_url)"></image>
						<view style="display: flex;">
							<view class="honor-award" style="width:120rpx;">获奖人：</view>
							<view class="honor-award">{{item.for_branch}} {{item.for_names}}</view>
						</view>
						<view class="honor-info-box">
							<text>{{item.year}}年{{item.month}}月</text>
							<text>|</text>
							<text>{{item.level_str}}</text>
							<text>|</text>
							<text>{{item.from_str}}</text>
							<text>|</text>
							<text>{{item.for_str}}</text>
						</view>
						<view class="edit-icon-box">
							  <image src="/static/edit-icon.png" mode="aspectFit" v-show="item.edit_auth" @click="goRecord(item.id)"></image>
							  <image src="/static/del-icon.png" mode="aspectFit" v-show="item.del_auth" @click="delRecord(item.id)"></image>
						</view>
				 </view>
				 </mescroll-body>
<!-- 				<view v-if="!honorList.length" class="no-data-box">
				 	<image src="/static/nodata.svg" mode="aspectFit" style="width: 300rpx;height: 300rpx;"></image>
				</view> -->
			 </view>
			 <view v-if="current == 1">
				 <view class="active-title-box">
					<picker mode="date" fields="year"  @change="bindDateChangeSelf" class="picker-class">
						<view class="uni-input display-between items-center">{{dateYearSelf}}年<image src="/static/calendar_icon.svg" mode="aspectFit" style="top: 18rpx;"></image></view>
					</picker>
					<picker :range="arrayMonth" :value="dateMonthSelf"  @change="bindDateMonthChangeSelf" class="picker-class" style="margin-left: 2%;">
						<view class="uni-input display-between items-center" style="color: #707070;">{{dateMonthSelf}}月<image src="/static/calendar_icon.svg" mode="aspectFit" style="top: 18rpx;"></image></view>
					</picker>
	<!-- 			    <picker @change="bindPickerChangeSelf" :value="indexSelf" :range="arraySelf">
				 			<view class="uni-input">{{arraySelf[index]}}</view>
				 			<image src="/static/arrow_down.svg" mode="aspectFit"></image>
				    </picker> -->
				    <button @click="goRecord()" style="margin-left: 20%;">+获奖记录</button>
				 </view>
				 <view class="honor-box" v-for="(item,index) in myHonorList" :key="index" style="position: relative;">
					    <view class="honor-name">{{item.name}}</view>
						<image :src="item.pic_url_resize" mode="aspectFill" @click="showLarge(item.pic_url)"></image>
						<view style="display: flex;">
							<view class="honor-award" style="width:120rpx;">获奖人：</view>
							<view class="honor-award">{{item.for_branch}} {{item.for_names}}</view>
						</view>
						<view class="honor-info-box">
							<text>{{item.year}}年{{item.month}}月</text>
							<text>|</text>
							<text>{{item.level_str}}</text>
							<text>|</text>
							<text>{{item.from_str}}</text>
							<text>|</text>
							<text>{{item.for_str}}</text>
						</view>
						<view class="edit-icon-box">
							  <image src="/static/edit-icon.png" mode="aspectFit" v-show="item.edit_auth" @click="goRecord(item.id)"></image>
							  <image src="/static/del-icon.png" mode="aspectFit" v-show="item.del_auth" @click="delRecord(item.id)"></image>
						</view>
				 </view>
<!-- 				<view v-if="!honorList.length" class="no-data-box">
				   	<image src="/static/nodata.svg" mode="aspectFit" style="width: 300rpx;height: 300rpx;"></image>
				 </view> -->
			 </view>
		 </view>
	 </view>
  </view>
</template>


<script>
import md5 from "@/common/md5.js";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      id: "",
      details: "",
	  items:['支部/组织荣誉','我的荣誉'],
	  current:0,
	  shareUrl:getApp().globalData.shareUrl,
	  array:['全部','中央','省级','市级','区级','单位'],
	  index:0,
	  indexSelf:0,
	  dateYear:new Date().getFullYear(),
	  dateMonth:new Date().getMonth() + 1,
	  dateYearSelf:new Date().getFullYear(),
	  dateMonthSelf:new Date().getMonth() + 1,
	  arraySelf:['全部','中央','省级','市级','区级','单位'],
	  arrayMonth:["1", "2","3", "4","5", "6","7", "8","9", "10","11", "12"],
      imageList: [],
      time: "",
	  globalUrl:getApp().globalData.shareUrl,
	  honorList:[],
	  myHonorList:[],
	  page:1,
	  pageSize:10,
    };
  },
  onLoad() {
     // this.getHonorList(this.dateYear,this.dateMonth,this.index)
  },
  onShow(){
	  //this.getHonorList(this.dateYear,this.dateMonth,this.index)
  },
  methods: {
	pageRefreshHonor(object) {
	        if (object === 'add') {
				if(this.current){
					this.getMyHonor(this.dateYearSelf,this.dateMonthSelf)
				}else {
					this.getHonorList(this.dateYear,this.dateMonth,this.index)
				}
	        }else if (object === 'edit'){
				if(this.current){
					this.getMyHonor(this.dateYearSelf,this.dateMonthSelf)
				}else {
					return
					//this.getHonorList(this.dateYear,this.dateMonth,this.index)
				}
			}
			 else {
	            return
	        }
	},
    onClickItem(e){
		 this.current = e.currentIndex
		 this.current ? 
		 this.getMyHonor(this.dateYearSelf,this.dateMonthSelf) : 
		 this.getHonorList(this.dateYear,this.dateMonth,this.index) 
	},
	 bindDateChange(e){
	 	this.dateYear = e.target.value;
		this.getHonorList(this.dateYear,this.dateMonth,this.index)
	 },
	 bindDateMonthChange(e){
	 	this.dateMonth = this.arrayMonth[e.target.value];
		this.getHonorList(this.dateYear,this.dateMonth,this.index)
	 },
	 bindPickerChange(e){
		 this.index = e.detail.value
		 this.getHonorList(this.dateYear,this.dateMonth,e.detail.value)
	 },
	 bindDateChangeSelf(e){
	 	this.dateYearSelf = e.target.value;
	 	this.getMyHonor(this.dateYearSelf,this.dateMonthSelf,this.indexSelf)
	 },
	 bindDateMonthChangeSelf(e){
	 	this.dateMonthSelf = this.arrayMonth[e.target.value];
	 	this.getMyHonor(this.dateYearSelf,this.dateMonthSelf,this.indexSelf)
	 },
	 // bindPickerChangeSelf(e){
		//  this.indexSelf = e.detail.value
		//  this.getMyHonor(this.dateYearSelf,this.dateMonthSelf,e.detail.value)	 
	 // },
	 upCallback(page) {
		let pageNum = page.num; // 页码, 默认从1开始
		let pageSize = page.size; // 页长, 默认每页10条
	 	let md5Sign = md5(
	 	  "method=" +"glory" + "&timestamp=" + getApp().globalData.globalTimestamp +
	 	    "&secret=" + getApp().globalData.secret
	 	);
	 	let url = getApp().globalData.shareUrl +"api/api.php" +
	 	  "?method=glory&action=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,
			   year:this.dateYear,
			   month:this.dateMonth,
			   level:this.index,
			   page:pageNum,
			   page_size:pageSize
	 	  },
	 	  success: (res) => {
	 	    if (res.data.code === 200) {
			    // 接口返回的当前页数据列表 (数组)
				let curPageData = res.data.data.list; 
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				let curPageLen = curPageData.length; 
				// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				let totalPage = res.data.data.page_count; 
				// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
				let totalSize = res.data.data.count;  
				// // 接口返回的是否有下一页 (true/false)
				// let hasNext = data.xxx; 
				if(page.num == 1) this.honorList = []; //如果是第一页需手动制空列表
				let list = res.data.data.list;
				list.forEach((item)=>{
					item.pic_url = this.shareUrl + item.pic_url;
					item.pic_url_resize = this.shareUrl + item.pic_url_resize;
				})
				this.honorList=this.honorList.concat(res.data.data.list); //追加新数据
				this.mescroll.endByPage(curPageLen || 0, totalPage); 
	 	    }
	 	  },
	 	  fail: () => {
	 	    console.log("连接失败");
			this.mescroll.endErr();
	 	  },
	 	});
	 },
	 goRecord(id){
		 if(id){
			uni.navigateTo({
				url:'./record?id=' + id
			}) 
		 }else {
			uni.navigateTo({
				url:'./record'
			}) 
		 }
	 },
	 delRecordRequest(delId){
		 let md5Sign = md5(
		   "method=" +"glory" + "&timestamp=" + getApp().globalData.globalTimestamp +
		     "&secret=" + getApp().globalData.secret
		 );
		 let url = getApp().globalData.shareUrl +"api/api.php" +
		   "?method=glory&action=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:()=>{
					 if(this.current){
					 	this.getMyHonor(this.dateYearSelf,this.dateMonthSelf)
					 }else {
					 	this.getHonorList(this.dateYear,this.dateMonth,this.index)
					 }
				  }
				});
		     }
		   },
		   fail: () => {
		     console.log("连接失败");
		   },
		 });
	 },
	 delRecord(id){
		 let that = this;
		 uni.showModal({
		   title: "确定删除此荣誉吗?",
		   success(res) {
		 	if (res.confirm) {
		 	  that.delRecordRequest(id);
		 	} else if (res.cancel) {
		 	  console.log("用户点击取消");
		 	}
		   },
		 });
	 },
	 showLarge(src) {
	   uni.previewImage({
	     urls: [src],
	     longPressActions: {
	       itemList: ["发送给朋友", "保存图片"],
	       success: function (data) {},
	       fail: function (err) {
	         console.log(err.errMsg);
	       },
	     },
	   });
	 },
	 getHonorList(y,m,level) {
	   let md5Sign = md5(
	     "method=" +"glory" + "&timestamp=" + getApp().globalData.globalTimestamp +
	       "&secret=" + getApp().globalData.secret
	   );
	   let url = getApp().globalData.shareUrl +"api/api.php" +
	     "?method=glory&action=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,
	 	   year:y,
		   month:m,
		   level:level,
		   page:this.page,
		   page_size:this.pageSize 
	     },
	     success: (res) => {
	       if (res.data.code === 200) {
			    let list = res.data.data.list;
				list.forEach((item)=>{
					item.pic_url = this.shareUrl + item.pic_url;
					item.pic_url_resize = this.shareUrl + item.pic_url_resize;
				})
	 			this.honorList = list;
	       }
	     },
	     fail: () => {
	       console.log("连接失败");
	     },
	   });
	 },
	 getMyHonor(y,m) {
	   let md5Sign = md5(
	     "method=" +"glory" + "&timestamp=" + getApp().globalData.globalTimestamp +
	       "&secret=" + getApp().globalData.secret
	   );
	   let url = getApp().globalData.shareUrl +"api/api.php" +
	     "?method=glory&action=my_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,
	 	   year:y,
		   month:m,
		   // level:level,
		   // page:1,
		   // page_size:10
	     },
	     success: (res) => {
	       if (res.data.code === 200) {
				let list = res.data.data.list;
				list.forEach((item)=>{
					item.pic_url = this.shareUrl + item.pic_url;
					item.pic_url_resize = this.shareUrl + item.pic_url_resize;
				})
				this.myHonorList = list;
	       }
	     },
	     fail: () => {
	       console.log("连接失败");
	     },
	   });
	 },
  },
};
</script>
<style lang="scss" scoped>
.content {
   .active-title-box {
	   display: flex;
       align-items: center;
       margin-top: 10rpx;
       font-size: 26rpx;
       height: 100rpx;
       border-bottom: 1px solid #d7d7d7;
       margin-top: 10rpx;
   		.time-select-box {
   			width: 32%;
   			margin-left: 5%;
   		}
   		picker {
   		    width: 20%;
   			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: 25%;
			font-size: 25rpx;
			background: #4988fd;
			color: #fff;
			margin-left: 20rpx;
			margin-right: 20rpx;
   		}
   }
   
   .honor-box {
	   display: flex;
	   flex-direction: column;
	   padding: 20rpx 40rpx 20rpx 40rpx;
	   border-bottom: 1px solid #d7d7d7;
	   image {
			width: 360rpx;
			height: 160rpx;
			margin: 20rpx auto;
	   }
	   .honor-award {
		   width: 80%;
		   color: #ccc;
		   font-size: 28rpx;
		   margin: 20rpx 0 10rpx 0;
	   }
	   .honor-info-box {
		  display: flex;
		  align-items: center;
		  font-size: 26rpx;
		  color: #ccc;
		  text {
			  margin-right: 20rpx;
		  }
	   }
	   .edit-icon-box {
		   position: absolute;
		   right: 10px;
		   top: 10px;
		   image {
		   	width: 35rpx;
		   	height: 35rpx;
		   	margin-right: 10rpx;	
		   }
	   }
   }
   
   .no-data-box {
	   position: fixed;
	   top: 100px;
	   left: 30%;
   }
}
</style>