ng_notes_mini/pages/index/activity/edit_page.vue

<template>
	<view class="content-box">
		
		<view class="step-box">
			<view class="step-1">1</view>
			<view style="color: #d7d7d7;font-size: 54rpx;">------</view>
			<view class="step-1" style="background-color:#02a7f0">2</view>
		</view>
	
	    <view class="info-box">
			<view class="info-value-box">
				<input type="text" placeholder="请输入活动标题" v-model="activeName">
			</view>		
	    </view>
		<view class="info-box">
			<view class="info-title-box">
				<!-- <image src="/static/require-icon.png" mode="aspectFill"></image> -->
				<text>选择活动类型</text>
			</view>
			<view class="info-value-box">
				  <picker @change="bindPickerChange($event,'activeType')"  :range="activeType" class="select-box">
				        <view class="uni-input">{{activeValue}}</view>
						<image src="/static/arrow_down.svg" mode="aspectFill"></image>
				  </picker>
			</view>		
		</view>
		<view class="info-box">
			<view class="info-title-box">
				<!-- <image src="/static/require-icon.png" mode="aspectFill"></image> -->
				<text>选择活动时间</text>
			</view>
			<view class="info-value-box" style=" width: 50%; margin-top: 2%;">
				<uni-datetime-picker
				    class="time-select-box"
					type="date"
					:value="activeDate"
					@change="change"
					:clear-icon="false"
				/>
			</view>		
		</view>
		<view class="info-box" v-if="leaderAuth == '1'">
			<view class="info-title-box">
				<!-- <image src="/static/require-icon.png" mode="aspectFill"></image> -->
				<text>可见范围</text>
			</view>
		   <view class="info-value-box">
			   <picker @change="bindPickerChange($event,'range')"  :range="rangeList" class="select-box">
			         <view class="uni-input">{{rangeValue}}</view>
			   		 <image src="/static/arrow_down.svg" mode="aspectFill"></image>
			   </picker>
			</view>	
		</view>
		<view class="info-box" v-if="orgList.length">
			<view class="info-title-box">
				<!-- <image src="/static/require-icon.png" mode="aspectFill"></image> -->
				<text>下级支部/组织可见</text>
			</view>
		   <view class="info-value-box">
			   <picker @change="bindPickerChange($event,'org')"  :range="orgList" :range-key="'name'" class="select-box">
			         <view class="uni-input">{{orgValue}}</view>
			   		 <image src="/static/arrow_down.svg" mode="aspectFill"></image>
			   </picker>
			</view>	
		</view>
		<view class="info-box" v-if="orgList.length">
			<view class="info-title-box">
				<!-- <image src="/static/require-icon.png" mode="aspectFill"></image> -->
				<text>下级支部/组织可见范围</text>
			</view>
		   <view class="info-value-box">
			   <picker @change="bindPickerChange($event,'orgRange')"  :range="orgRangeList" class="select-box">
			         <view class="uni-input">{{orgRangeValue}}</view>
			   		 <image src="/static/arrow_down.svg" mode="aspectFill"></image>
			   </picker>
			</view>	
		</view>
		<view class="footer-box">
			<button type="primary" class="submit-bth" style="background-color: #169bd5;" @click="submitActive()">提交</button>
		</view>
	</view>
</template>

<script>
	import md5 from "@/common/md5.js";
	// import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
	// var graceChecker = require("../../../common/graceChecker.js");
	export default {
		components: {
		},
		data() {
			return {
				isAuthPhone:getApp().globalData.user_phone,
				leaderAuth:'0',
				activeName:'',
				activeDate:'',
				activeValue:'请选择',
				activeType:['组织建设','参政议政','学习培训','社会活动'],
				rangeList:['全体成员可见','仅管理团队可见'],
				rangeValue:'全体成员可见',
				orgList:[],
				orgValue:'',
				orgId:'',
				orgRangeList:['全体成员可见','仅管理团队可见'],
				orgRangeValue:'全体成员可见',
				branchId:'',
				branchValue:'',
				lastPageLength:'',
				rangeId:'',
				orgId:'',
				orgRangeId:'',
				memberList: [],
			}
		},
		onLoad(option) {
			this.getInfoById(option.id)
			// let branchList = JSON.parse(option.list);
			// this.lastPageLength = option.length;
			// this.branchValue = branchList[0].name;
			// this.branchId = Number(branchList[0].id);
		    // this.getPowerRequest(this.branchId);
		},
		onShow() {
		},
		// onShareAppMessage() {
		// 	  return {
		// 	      title: '分销小助手',
		// 	      path:'/pages/index/index?scene=' + getApp().globalData.user_id
		// 	    }
		// },
		methods: {
			bindDateChange(e){
					this.dateYear = e.target.value
			},
			bindDateMonthChange(e){
					this.dateMonth = this.arrayMonth[e.target.value]
			},
			change(e) {
					this.activeDate = e;
					console.log("-change事件:", e);
			},
			getInfoById(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) {
						  let objInfo = res.data.data;
						  this.branchId = objInfo.branch_id;
						  this.activeId = objInfo.id;
						  this.activeName = objInfo.name;
						  this.activeDate = objInfo.start_time;
						  this.activeValue = objInfo.type;
						  this.rangeId = objInfo.post_leader_only;
						  this.orgId = objInfo.leader_only;
						  this.orgRangeId = objInfo.post_branch_level;
						  this.getPowerRequest(this.branchId);
					  }
					},
					fail: () => {
					  console.log("连接失败");
					},
				});
			},
			 goStepBack(){
				 uni.navigateBack({
				 })
			 },
			 bindPickerChange(e,type) {
				 let that = this;
				  switch (type){
					case 'activeType':
					 that.activeValue = that.activeType[e.target.value]
						break;
					case 'range':
					 that.rangeValue =  that.rangeList[e.target.value]
						break;
					case 'org':
					 that.orgValue =  that.orgList[e.target.value].name;
					 that.orgId = that.orgList[e.target.value].value;
						break;
					case 'orgRange':
					 that.orgRangeValue =  that.orgRangeList[e.target.value]
						break;	
				  }
			},
			getPowerRequest(bId){
				let rangeObj = {
					'0':'全体成员可见',
					'1':'仅管理团队可见',
				}
				let md5Sign = md5(
				  "method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
				    "&secret=" + getApp().globalData.secret
				);
				let url = getApp().globalData.shareUrl +"api/api.php" +
				  "?method=activity&action=branch_auth&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,
					branch_id:bId
				  },
				  success: (res) => {
				    if (res.data.code === 200) {
						this.leaderAuth = res.data.data.leader_auth;
						this.orgList = res.data.data.post_branch_level;
						this.rangeValue = rangeObj[this.rangeId];
						this.orgRangeValue = rangeObj[this.orgRangeId];
						if(this.orgList.length){
							this.orgValue = this.orgList.find((item)=>{return item.value == this.orgId}).name;
						}
				    }
				  },
				  fail: () => {
				    console.log("连接失败");
				  },
				});
			},
			submitActive(){
				let typeObj = {
					'组织建设':'1',
					'参政议政':'2',
					'社会活动':'3',
					'学习培训':'4',
				}
				let rangeObj = {
					'全体成员可见':'0',
					'仅管理团队可见':'1',
				}
				let md5Sign = md5(
				  "method=" +"activity" + "&timestamp=" + getApp().globalData.globalTimestamp +
				    "&secret=" + getApp().globalData.secret
				);
				let url = getApp().globalData.shareUrl +"api/api.php" +
				  "?method=activity&action=update&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:this.activeId,
					name:this.activeName,
					type:typeObj[this.activeValue], //1.组织建设；2.参政议政；3.社会活动；4.学习培训；99.其他
					start_time:this.activeDate, //开始日期
					branch_id:this.branchId, //支部ID 
					leader_only:rangeObj[this.rangeValue], //可见范围： 0，都可见；1， 仅管理层可见
					post_branch_level:this.orgId || '0', //下级支部可见层级
					post_leader_only:rangeObj[this.orgRangeValue], //下级支部可见范围： 0，都可见；1，仅管理层可见
					remark:'' //备注
				  },
				  success: (res) => {
				    if (res.data.code === 200) {
						uni.showToast({
						  title: "编辑成功",
						  icon: "none", 
						  duration: 2500,
						});
						setTimeout(()=>{
							uni.navigateBack({})
						},800)
				  }},
				  fail: () => {
				    console.log("连接失败");
				  },
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		&_list{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content:space-around;
			&_lable{
				
			}
			&_content{
				flex: 1;
				width: auto;
				text-align: right;
			}
		}
	}
	.content-box {
		width: 100%;
		/* height: 100%; */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}
	.header-box {
		width: 85%;
		height:80rpx;
		border: .5px dotted #00A1B4;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color:#00A1B4 ;
		/* font-family: PingFangSC-Regular; */
		margin-top: 2%;
	}
	.header-box image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 1%;
	}
	.self-title-box {
		width: 90%;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		letter-spacing: 2rpx;
		color:#3C3C3C ;
		/* font-family: SimHei; */
		margin: 4% auto;
		font-weight: bold;
		height: 50rpx;
		line-height: 50rpx;

	}
	.self-title-box image {
		width: 6rpx;
		height: 32rpx;
		margin-right: 2%;
	}
	.info-box {
		width: 90%;
		margin: 2% auto;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// height: 180rpx;
	}
	.info-title-box {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	.info-title-box image{
		width: 15rpx;
		height: 15rpx;
		margin-right: 2%;
	}
	.info-value-box {
		width: 100%;
	}
	.info-value-box input {
		height: 88rpx;
		background: #f7f7f7;
		font-size: 26rpx;
		padding-left: 4%;
		margin: 2% auto;
	}
	.info-value-box picker {
		position: relative;
	}
	.info-value-box picker image {
		position: absolute;
		width: 25rpx;
		height: 25rpx;
		right: 10px;
		top: 30rpx;
	}
	.select-box {
		height: 80rpx;
		background: #f7f7f7;
		font-size: 26rpx;
		padding-left: 4%;
		margin: 2% auto;
		color: #888;
		line-height: 88rpx;
	}
	.info-gender-box {
		width: 75%;
		font-size: 28rpx;
	}
	.form-radio {
			 transform: scale(0.6);
	}
	.padding-left-2 {
		// padding-left: 2%;
	}
	.margin-right-10 {
		margin-right: 10%;
	}
	.border-line-box {
		width: 100%;
		height: 20rpx;
		background: #f7f7f7;
	}
	.picker-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60rpx;
		line-height: 60rpx;
		background: #f7f7f7;
		height: 88rpx;
		line-height: 88rpx;
		background: #f7f7f7;
		font-size: 28rpx;
		padding-left: 4%;
	}
	.uni-input image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 2%;
		float: right;
	}
	.textarea-box {
		background: #f7f7f7;
		min-height: 120rpx;
		font-size: 28rpx;
		margin: 5% auto;
		padding: 4%;
		margin-bottom: 8%;
	}
	.upload-box {
	  display: flex;
	  flex-flow: column;
	  width: 25%;
	  height: 100rpx;
	  border-radius: 10rpx;
	  padding-top: 15rpx;
	  image {
	    width: 100rpx;
	    height:100rpx;
	  }
	}
	.upload-box-photo {
		width: 25%;
		height: 100rpx;
		border-radius: 10rpx;
		padding-top: 15rpx;
		position: relative;
		margin-left: 10rpx;
	}
	.del-icon {
	  position: absolute;
	  right: 0;
	  width: 30rpx;
	  height: 30rpx;
	}
	
	.update_button {
	  text-align: center;
	  display: flex;
	  flex-wrap: wrap;
	}
	.picker-class {
		border-radius: 10rpx;
		padding: 10rpx;
		width: 73%;
		font-size: 28rpx;
		background: #f5f5f5;
	}
	.picker-class image {
		width: 26rpx;
		height: 26rpx;
	}
	.submit-bth {
		width: 25%;
		font-size: 26rpx;
		margin: 0 0 5% 0;
		color: #fff;
	}
	.select-member {
		input {
			    margin: 2% 2% 2% 0;
			    height: 80rpx;
			    line-height: 80rpx;
		}
		button {
			    background-color: #169bd5;
			    margin: 0;
			    height: 60rpx;
				line-height: 60rpx;
			    width: 20%;
		}
	}
	.check-class {
		margin-right:10rpx;
		transform:scale(.8);
		width: 48%;
		margin-top: 2%;
	}
	.step-box {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 90%;
		margin: 5% 0 5% 0;
	}
	.step-1 {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color:#aaaaaa;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
	}
	.footer-box {
		margin-top: 15%;
		width: 90%;
		display: flex;
		justify-content: space-evenly;
	}
</style>