ng_notes_mini/pages/index/honor/record.vue

<template>
	<view class="content-box">
		<form @submit="formSubmit" style="width: 100%"> 
		<view class="img-container">
			<label for="img">上传图片:</label>
			 <view class="note-image-box">
				<view class="note-image-item" v-for="(item,index) in uploadList" :key="index">
					<!-- //右上角删除图标 -->
					<view class="close-icon" @click="delPhoto(index)">
						<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
					</view>
					<view class="image-box" @click="showLarge(item)">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</view>
				<!-- //因为上传图片设置9张 使用这里做判断 -->
				<view v-if="uploadList.length < 1" class="note-image-item" @click="getImage('album')">
					<!-- //添加图片按钮 -->
					<view class="image-box">
						<uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
					</view>
				</view>
			 </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">
				<input type="text" placeholder="请输入奖项名称" name="awardName" :value="awardName" >
			</view>		
		</view>
		<view class="info-box" style="margin-top: -10rpx;margin-bottom: 15rpx;">
			<view class="info-title-box" style="margin-bottom: 15rpx;">
				<!-- <image src="/static/require-icon.png" mode="aspectFill"></image> -->
				<text>时间</text>
			</view>
			<view class="info-value-box">
				<view class="uni-list title-date-box">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db display-flex-start">
							<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>
						</view>
					</view>
				</view>
			</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,'level')"  :range="honorLevel" class="select-box" name="level">
				        <view class="uni-input">{{levelValue}}</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">
				  <picker @change="bindPickerChange($event,'from')"  :range="honorFrom" class="select-box" name="from">
				        <view class="uni-input">{{fromValue}}</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">
				  <picker @change="bindPickerChange($event,'branch')"  :range="honorBranch" :range-key="'name'" class="select-box" name="branch">
				        <view class="uni-input">{{branchValue}}</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">
				  <picker @change="bindPickerChange($event,'type')"  :range="honorType" class="select-box" name="type">
				        <view class="uni-input">{{typeValue}}</view>
						<image src="/static/arrow_down.svg" mode="aspectFill"></image>
				  </picker>
			</view>	
	<!-- 		<view class="info-value-box">
				  <picker @change="bindPickerChange($event,'education')"  :range="honorType2" class="select-box" name="education">
				        <view class="uni-input">{{typeValue2}}</view>
						<image src="/static/arrow_down.svg" mode="aspectFill"></image>
				  </picker>
			</view>	 -->
		</view>
		<view class="info-box" v-if="typeValue !== '集体荣誉'">
			<view class="info-title-box">
				<!-- <image src="/static/require-icon.png" mode="aspectFill"></image> -->
				<text>选择成员</text>
			</view>
			<!-- <view class="info-value-box display-flex-start select-member">
				<input type="text" placeholder="请输入手机号" name="selfName">
				<button type="primary" class="submit-bth" style="background-color: #169bd5;" @click="addMember()">添加</button>
			</view>-->
		   <view>
			   <checkbox-group @change="checkboxChange" class="display-wrap">
					  <label class="display-flex-start"  v-for="(item,index) in memberList" :key="item.member_id" style="margin-right:10rpx;transform:scale(.8);">
							<view>
								<checkbox :value="item.member_id" :checked="item.checked"/>
							</view>
							<view>{{item.name}}</view>
							<!-- <image src="/static/del.png" mode="aspectFit"
							style="width: 30rpx; height: 30rpx;margin-left: 10rpx;" @click="delMember(index)"></image> -->
						</label> 
				</checkbox-group>
			</view>	
		</view>
		<view style="display: flex;justify-content: space-evenly;">
			<!-- <button type="default" class="submit-bth" style="background-color: #aaaaaa;">清空</button> -->
			<button type="primary" class="submit-bth" style="background-color: #169bd5;" formType="submit">提交</button>
		</view>
	</form>	
	</view>
</template>

<script>
	import md5 from "@/common/md5.js";
	export default {
		components: {
		},
		data() {
			return {
				dateYear:new Date().getFullYear(),
				dateMonth:new Date().getMonth() + 1,
				arrayMonth:["1", "2","3", "4","5", "6","7", "8","9", "10","11", "12"],
				awardName:'',
				levelValue:'市级',
				honorLevel:['中央','省级','市级','区级','单位'],
				fromValue:'党内荣誉',
				honorFrom:['党内荣誉','社会荣誉','单位荣誉','行业荣誉'],
				branchValue:'',
				honorBranch:[],
				typeValue:'集体荣誉',
				honorType:['集体荣誉','个人荣誉','集体个人兼有'],
			    memberList: [],
				uploadList: [],
				imgIdList: [],
				headImgId:'',
				branchId:'',
				memberIds:[],
				editId:''
			}
		},
		onLoad(option) {
			if(option.id){
				this.editId = option.id;
				this.getBranch(option.id);
			}else {
				this.editId = '';
				this.getBranch();
			}
		},
		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.single = e;
			  console.log("-change事件:", e);
			 },
			checkboxChange: function (e) {
				// var items = this.memberList,
				// values = e.detail.value;
				this.memberIds =  e.detail.value;
				// for (var i = 0, lenI = items.length; i < lenI; ++i) {
				// 	const item = items[i]
				// 	if(values.includes(item.value)){
				// 		this.$set(item,'checked',true)
				// 	}else{
				// 		this.$set(item,'checked',false)
				// 	}
				// }
			}, 
			// addMember(){
			// 	let items = {value: '6',name: '13630230648'}
			// 	this.memberList.push(items)
			// },
			// delMember(idx){
			// 	this.memberList.splice(idx, 1);
			// },
			getImage(type) {
			  let that = this;
			  console.log(that.uploadList)
			  if (that.uploadList.length === 1) {
			    uni.showToast({
			      title: "最多上传1张图片",
			      icon: "none", 
			      duration: 2500,
			    });
			    return;
			  }
			  uni.chooseImage({
			    sourceType: [type],
			    count: 1,
			    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			    success: (res) => {
			      for (let i = 0; i < res.tempFilePaths.length; i++) {
			        that.uploadList.push(res.tempFilePaths[i]);
			        that.uploadFileRequest(res.tempFilePaths[i]);
			      }
			    },
			  });
			},
			uploadFileRequest(fileVal) {
			  uni.showLoading({
			    title: "上传中",
			    mask: true,
			  });
			  let that = this;
			  let md5Sign = md5(
			    "method=" +"glory_upload" + "&timestamp=" +getApp().globalData.globalTimestamp +"&secret=" + getApp().globalData.secret
			  );
			  let url =
			    getApp().globalData.shareUrl +
			    "api/api.php" +
			    "?method=glory_upload&timestamp=" +
			    getApp().globalData.globalTimestamp +
			    "&sign=" +
			    md5Sign;
			  uni.uploadFile({
			    url: url, //需要设置为全局
			    filePath: fileVal,
			    name: "file",
			    formData: {
				  openid: getApp().globalData.open_id,
			      file: fileVal,
				  branch_id: this.branchId
			    },
			    success: (res) => {
			      let tmpres = JSON.parse(res.data);
			      uni.hideLoading();
			      that.imgIdList.push(tmpres.data.id);
				  that.headImgId = tmpres.data.id;
			    },
			    fail: (res) => {
			      console.log("上传请求失败");
			      console.log(res);
			    },
			  });
			},
			delPhoto(idx) {
			  this.uploadList.splice(idx, 1);
			  this.imgIdList.splice(idx, 1);
			},
			showLarge(src) {
			  uni.previewImage({
			    urls: [src],
			    longPressActions: {
			      itemList: ["发送给朋友", "保存图片"],
			      success: function (data) {},
			      fail: function (err) {
			        console.log(err.errMsg);
			      },
			    },
			  });
			},
			bindPickerChange(e,type) {
				 let that = this;
				  switch (type){
					case 'branch':
					 that.branchValue = that.honorBranch[e.target.value].name;
					 that.branchId = that.honorBranch[e.target.value].branch_id;
					 that.getMemberList(that.branchId)
						break;
					case 'type':
					 that.typeValue =  that.honorType[e.target.value]
						break;
					case 'level':
					 that.levelValue =  that.honorLevel[e.target.value]
						break;	
					case 'from':
					 that.fromValue =  that.honorFrom[e.target.value]
						break;
				  }
			},
			filterChecked(list){
				let arr = this.memberList, childArr = list;
				childArr.forEach((child)=>{
					arr.forEach((item)=>{
						if(item.member_id == child.member_id){
							item.checked = true
						}
					})
				})
			},
			getHonorInfo(id) {
			  let levelObj = {
			  	'1':'中央',
			  	'2':'省级',
			  	'3':'市级',
			  	'4':'区级',
			  	'5':'单位'
			  }
			  let fromObj = {
			  	'1':'党内荣誉',
			  	'2':'社会荣誉',
			  	'3':'单位荣誉',
			  	'4':'行业荣誉'
			  }
			  let typeObj = {
			  	'1':'集体荣誉',
			  	'2':'个人荣誉',
			  	'3':'集体个人兼有',
			  }	
			  let md5Sign = md5(
			    "method=" +"glory" + "&timestamp=" + getApp().globalData.globalTimestamp +
			      "&secret=" + getApp().globalData.secret
			  );
			  let url = getApp().globalData.shareUrl +"api/api.php" +
			    "?method=glory&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 infoObj = res.data.data;
						this.branchId = infoObj.branch_id;
						this.awardName = infoObj.name;
						this.headImgId = infoObj.photo_attach_id;
						this.dateYear = infoObj.year;
						this.dateMonth = infoObj.month;
						this.uploadList.push(getApp().globalData.shareUrl + infoObj.pic_url);
						this.typeValue = typeObj[infoObj.for];
						this.fromValue = fromObj[infoObj.from];
						this.levelValue = levelObj[infoObj.level];
						this.memberIds = infoObj.member_list.map((item)=>{return item.member_id})
						this.filterChecked(infoObj.member_list);
						this.branchValue = (this.honorBranch.find((item)=>{return item.branch_id == infoObj.branch_id})).name;
			      }
			    },
			    fail: () => {
			      console.log("连接失败");
			    },
			  });
			},
			getBranch(optionId) {
			  let md5Sign = md5(
			    "method=" +"glory" + "&timestamp=" + getApp().globalData.globalTimestamp +
			      "&secret=" + getApp().globalData.secret
			  );
			  let url = getApp().globalData.shareUrl +"api/api.php" +
			    "?method=glory&action=glory_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.honorBranch = res.data.data;
						this.branchValue = res.data.data[0].name;
						this.branchId = res.data.data[0].branch_id;
						this.getMemberList(this.branchId,optionId);
			      }
			    },
			    fail: () => {
			      console.log("连接失败");
			    },
			  });
			},
			getMemberList(bId,optionId) {
				let md5Sign = md5(
				  "method=" + "glory" + "&timestamp=" + getApp().globalData.globalTimestamp +
					"&secret=" + getApp().globalData.secret
				);
				let url = getApp().globalData.shareUrl +"api/api.php" +
				  "?method=glory&action=member_by_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,
					branch_id:bId
				  },
				  success: (res) => {
					if (res.data.code === 200) {
						this.memberList = res.data.data;
						if(optionId){
							this.getHonorInfo(optionId)
						}
					}
				  },
				  fail: () => {
					console.log("连接失败");
				  },
				});
		    },
			formSubmit(e) {
			  	let formData = e.detail.value;
				this.submitRequest(formData)
			  },
			submitRequest(params){
				if(this.uploadList.length===0){
					uni.showToast({
					  title: "请选上传图片",
					  icon: "none", 
					  duration: 2500,
					});
					return
				}
				if(!params.awardName){
					uni.showToast({
					  title: "请填写名称",
					  icon: "none", 
					  duration: 2500,
					});
					return
				}
				let levelObj = {
					'中央':'1',
					'省级':'2',
					'市级':'3',
					'区级':'4',
					'单位':'5'
				}
				let fromObj = {
					'党内荣誉':'1',
					'社会荣誉':'2',
					'单位荣誉':'3',
					'行业荣誉':'4'
				}
				let typeObj = {
					'集体荣誉':'1',
					'个人荣誉':'2',
					'集体个人兼有':'3',
				}
				let md5Sign = md5("method=" + "glory" + "&timestamp=" + getApp().globalData.globalTimestamp +"&secret=" + getApp().globalData.secret)
					, url;
			    let dataParams = {
					openid:getApp().globalData.open_id,
					name:params.awardName,
					level:levelObj[this.levelValue],
					from:fromObj[this.fromValue],
					for:typeObj[this.typeValue],
					year:this.dateYear,
					month:this.dateMonth,
					branch_id:this.branchId,
					member_ids:this.memberIds.join(),
					photo_attach_id:this.headImgId,
					remark:''
				  };
				if(this.editId){
					 url = getApp().globalData.shareUrl +"api/api.php" + "?method=glory&action=update&timestamp=" 
					 +getApp().globalData.globalTimestamp + "&sign=" + md5Sign;
					 dataParams.id = this.editId;
				}else {
					url = getApp().globalData.shareUrl +"api/api.php" +
					  "?method=glory&action=add&timestamp=" +
					  getApp().globalData.globalTimestamp +
					  "&sign=" +
					  md5Sign;
				}
				uni.request({
				  url: url,
				  method: "POST",
				  header: {
					"content-type": "application/x-www-form-urlencoded",
				  },
				  data:dataParams,
				  success: (res) => {
					if (res.data.code === 200) {
						if(this.editId){
							let types = 'edit';
							let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.pageRefreshHonor(types)
							uni.showToast({
							  title: "修改成功",
							  icon: "none", 
							  duration: 2500,
							});
							setTimeout(()=>{uni.navigateBack({delta:1})},500)
						}else {
							let types = 'add';
							let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.pageRefreshHonor(types)
							uni.showToast({
							  title: "上传成功",
							  icon: "none", 
							  duration: 2500,
							});
							setTimeout(()=>{uni.navigateBack({delta:1})},500)
						}
					}
				  },
				  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: 3% auto;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// height: 180rpx;
	}
	.info-title-box {
		width: 20%;
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
	.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: -5rpx;
	  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%;
		}
	}
	.img-container{
		width: 90%;
		margin: 3% auto;
		font-size: 26rpx;
		.note-image-box{
			margin-top: 5px;
			display: flex;
			flex-wrap: wrap;
			padding: 10px;
			.note-image-item{
				position: relative;
				//这两个百分比很关键
				width: 33.33%;
				height: 0;
				padding-top: 33.33%;
				box-sizing: border-box;
				.close-icon{
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0;
					top: 0;
					width: 22px;
					height: 22px;
					border-radius: 50%;
					background-color: #d5d5d5;
					z-index: 2;
				}
				.image-box{
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 5px;
					right: 5px;
					bottom: 5px;
					left: 5px;
					border: 1px #eee solid;
					border-radius: 5px;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>