ng_notes_mini/pages/index/activity/activity.vue

<template>
  <view class="content">
    <view class="self-inf">
	  <view class="antu-box">
		<view class="img-name-box">
		  <image :src="userHeadImg" class="heade-img" mode="aspectFill"></image>
		  <p class="nickname">{{userNickName}}</p>
		  <p class="nickname">{{userPhone}}</p>
		</view>
		<view class="org-info-box" v-for="(item,index) in userPosList" :key="index">
		  <view class="org-info">{{item.name || '-'}}</view>
		  <!-- <view class="org-line"></view> -->
		  <view class="org-info">{{item.position  || '-'}}</view>
		</view>		  
	  </view>
<!-- 	  <view class="img-name-box" v-if="!isAuth" style="height: 180rpx;">
		<image src="/static/auth-icon.png" class="heade-img" mode="aspectFill" style="margin-left: 80rpx;"></image>
        <button @click="goAuthPage()" class="auth-btn">授权登录</button>
      </view> -->
    </view>
 
    <view>
		<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="publish()">+发布活动</button>
		</view>
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="active-box" v-for="(item,index) in activiList" :key="index" @click="goList()">
			<view class="active-type" :class="{'bg-yellow':item.type == '组织建设' ,'bg-red':item.type == '学习培训','bg-blue':item.type == '参政议政',}"  >
				{{item.type}}
			</view>
			<view class="active-content-box">
				<view class="active-content">
					<view class="active-name">{{item.name}}</view>
					<view class="active-date">{{item.start_time}}</view>
				</view>
				<view class="active-content">
					<view style="margin-right:10rpx;">{{item.branch}}</view>
					<view class="author-box">{{item.author}}</view>
					<view style="margin-left:10rpx;">记录数:({{item.process_count}}/<text style="color:red;">{{item.process_unread_count}}</text>)</view>
				</view>
			</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>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
	components: {
	},
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      dateYear:new Date().getFullYear(),
      dateMonth:new Date().getMonth() + 1,
	  arrayMonth:["1", "2","3", "4","5", "6","7", "8","9", "10","11", "12"],
      userHeadImg: getApp().globalData.user_headUrl,
      userNickName:getApp().globalData.user_name,
	  userPhone:getApp().globalData.user_phone.substr(0, 3) + '****' + getApp().globalData.user_phone.substr(7),
	  userPosList:[],
	  array: ['全部', '浐灞一支部', '浐灞二支部'],
	  index: 0,
	  page:1,
	  pageSize:10,
	  activiList:[]
    };
  },
  onShow() {
  },
  onLoad() {
	  this.getUserInfoBranch()
	 // this.getActivityBranch()
  },
  methods: {
	  getUserInfoBranch() {
	      let md5Sign = md5(
	        "method=" +
	          "member" +
	          "&timestamp=" +
	          getApp().globalData.globalTimestamp +
	          "&secret=" +
	          getApp().globalData.secret
	      );
	      let url =
	        getApp().globalData.shareUrl +
	        "api/api.php" +
	        "?method=member&action=my_branch&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,
	        },
	        success: (res) => {
	          if (res.data.code === 200) {
	  				  this.userPosList = res.data.data;
	          }
	        },
	        fail: () => {
	          console.log("连接失败");
	        },
	      });
	  },
	  bindDateChange(e){
			this.dateYear = e.target.value;
	  },
	  bindDateMonthChange(e){
			this.dateMonth = this.arrayMonth[e.target.value];
	  },
	  bindPickerChange: function(e) {
		  console.log('picker发送选择改变，携带值为', e.target.value)
		  this.index = e.target.value
	  },
	  upCallback(page) {
		let pageNum = page.num; // 页码, 默认从1开始
		let pageSize = page.size; // 页长, 默认每页10条
	  	let md5Sign = md5(
	  	  "method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
	  	    "&secret=" + getApp().globalData.secret
	  	);
	  	let url = getApp().globalData.shareUrl +"api/api.php" +
	  	  "?method=activity&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,
			   s:'',
			   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.activiList = []; //如果是第一页需手动制空列表
	  				// 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.activiList=this.activiList.concat(res.data.data.list); //追加新数据
	  				this.mescroll.endByPage(curPageLen || 0, totalPage); 
	  	    }
	  	  },
	  	  fail: () => {
	  	    console.log("连接失败");
	  			this.mescroll.endErr();
	  	  },
	  	});
	  },
	  publish(){
		  uni.navigateTo({
			url:'./create1'
		  })
	  },
	  goList(){
		  uni.navigateTo({
			url:'./list'
		  })
	  }
  },
};
</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;
    }
  }
}
.antu-box {
	display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    margin-left: 5%;
    margin-top: 50rpx;
    border-radius: 10rpx;
    width: 90%;
    color: #555;
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.2);
}
.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;
} 

.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: 29%;
			font-size: 25rpx;
			background: #4988fd;
			color: #fff;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
	
	
}
.active-box {
	display: flex;
	align-items: center;
	position: relative;
	font-size: 28rpx;
	padding: 30rpx;
	border-bottom: 1px solid #d7d7d7;
	.active-type {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: yellow;
		text-align: center;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #fff;
	}
	.active-content-box {
		height: 120rpx;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		justify-content: space-around;
	}
	.active-content {
		display: flex;
		align-items: center;
		height: 45rpx;
		font-size: 26rpx;	
		.author-box {
			border-left: 1px solid #d7d7d7;
			border-right: 1px solid #d7d7d7;
			padding: 0 30rpx 0 30rpx;
			margin: 0 20rpx 0 20rpx;
		}
		.active-name {
			font-size: 30rpx;
			margin-right: 10rpx;
		}
		.active-date {
			font-size: 24rpx;
			color: #ccc;
		}
	}
	.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;
	}
}
</style>