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 @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">
					    <view class="honor-name">{{item.name}}</view>
						<image :src="item.img_url" mode="aspectFit"></image>
					    <view class="honor-award">获奖人：{{item.award_name}}</view>
						<view class="honor-info-box">
							<text>{{item.date}}</text>
							<text>|</text>
							<text>{{item.level}}</text>
							<text>|</text>
							<text>{{item.honor_type}}</text>
							<text>|</text>
							<text>{{item.honor_self}}</text>
						</view>
				 </view>
			 </view>
			 <view v-show="current == 1">
				 <view class="active-title-box">
				 	<uni-datetime-picker
				 	    class="time-select-box"
				 		type="date"
				 		:value="single"
				 		@change="change"
				 		:clear-icon="false"
				 	/>
				    <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 myHonorList" :key="index" style="position: relative;">
						<view class="honor-name">{{item.name}}</view>
						<image :src="item.img_url" mode="aspectFit"></image>
						<view class="honor-award">获奖人：{{item.award_name}}</view>
						<view class="honor-info-box">
							<text>{{item.date}}</text>
							<text>|</text>
							<text>{{item.level}}</text>
							<text>|</text>
							<text>{{item.honor_type}}</text>
							<text>|</text>
							<text>{{item.honor_self}}</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>
		 </view>
	 </view>
  </view>
</template>


<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      id: "",
      details: "",
	  items:['支部/组织荣誉','我的荣誉'],
	  current:0,
	  array:['中央','省级','市级','区级','单位'],
	  index:2,
      imageList: [],
      time: "",
	  globalUrl:getApp().globalData.shareUrl,
	  honorList:[
           {
			   name:'荣誉名称XXXX',
			   award_name:'王谦 黄华',
			   date:'2021年12月',
			   level:'市级',
			   honor_type:'党内荣誉',
			   honor_self:'个人荣誉',
			   img_url:'/static/logo.png',
		   },
		   {
			   name:'荣誉名称XXXX',
			   award_name:'灞桥区工委 肖亮 尹嗣瑜',
			   date:'2021年12月',
			   level:'市级',
			   honor_type:'党内荣誉',
			   honor_self:'个人荣誉',
			   img_url:'/static/logo.png',
		   }
	  ],
	  myHonorList:[
	       {
			   name:'荣誉名称XXXX111',
			   award_name:'王谦 黄华',
			   date:'2021年12月',
			   level:'市级',
			   honor_type:'党内荣誉',
			   honor_self:'个人荣誉1',
			   img_url:'/static/logo.png',
	  		   },
	  		{
			   name:'荣誉名称XXXX222',
			   award_name:'灞桥区工委 肖亮 尹嗣瑜',
			   date:'2021年12月',
			   level:'市级',
			   honor_type:'党内荣誉',
			   honor_self:'个人荣誉2',
			   img_url:'/static/logo.png',
	  		 }
	  ]
    };
  },
  onLoad() {
   
  },
  methods: {
    onClickItem(e){
		this.current = e.currentIndex
	},
	change(e) {
		this.single = e;
		 console.log("-change事件:", e);
	 },
	 goRecord(){
		 uni.navigateTo({
		 	url:'./record'
		 })
	 }
  },
};
</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: 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;
   		}
   }
   
   .honor-box {
	   display: flex;
	   flex-direction: column;
	   padding: 20rpx 40rpx 20rpx 40rpx;
	   border-bottom: 1px solid #d7d7d7;
	   image {
			width: 240rpx;
			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>