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>
				 <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" mode="aspectFit" @click="showLarge(item.pic_url_resize)"></image>
					    <view class="honor-award">获奖人：{{item.for_branch}} {{item.for_names}}</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"></image>
							  <image src="/static/del-icon.png" mode="aspectFit" v-show="item.del_auth"></image>
						</view>
				 </view>
				 <view v-if="!honorList.length" style="text-align: center;">
				 	<image src="/static/nodata.svg" mode="aspectFit" style="width: 300rpx;height: 300rpx;"></image>
				 </view>
			 </view>
			 <view v-show="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" >
					    <view class="honor-name">{{item.name}}</view>
						<image :src="item.pic_url" mode="aspectFit" @click="showLarge(item.pic_url_resize)"></image>
					    <view class="honor-award">获奖人：{{item.for_branch}} {{item.for_names}}</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"></image>
							  <image src="/static/del-icon.png" mode="aspectFit"></image>
						</view> -->
				 </view>
				 <view v-if="!honorList.length" style="text-align: center;">
				   	<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";
export default {
  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:[]
    };
  },
  onLoad() {
      this.getHonorList(this.dateYear,this.dateMonth,this.index)
  },
  methods: {
    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)	 
	 // },
	 goRecord(){
		 uni.navigateTo({
		 	url:'./record'
		 })
	 },
	 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: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.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 {
		   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;	
		   }
	   }
   }
   
   
}
</style>