CommunityApp/pagesM/pages/applyToPromotion.vue

<template>
  <view class="container">
	<view class="topView">
		<!-- <view class='label1View'>
			<text>个人信息</text>
		</view> -->
		<view class='nameView'>
			<text>姓名：</text>
			<input v-model="formData.username" type="text" placeholder="请输入姓名"/>
		</view> 
		<view class="line"></view>
		<view class='nameView'>
			<text>手机：</text>
			<input v-model="formData.phone" type="number"  placeholder="请输入手机号码" />
		</view> 
		<view class="line"></view>
		<view class='nameView'>
			<text>身份证号：</text>
			<input v-model="formData.idCard" type="text"  placeholder="请输入身份证号码" />
		</view> 
		<view class="line"></view>
		<view class="cameraViewBg">
			<text>身份证：</text>
			<view class="cameraView">
				 <view style="width:156rpx;height:150rpx;">
					 <view style="width:156rpx;height:106rpx" @tap="tapToMenu(2)">
						 <image style="width:156rpx;height:106rpx" :src="formData.idCardFrontImage?formData.idCardFrontImage:'http://139.9.103.171:1888/img/image/cameraImage.png'" />
					 </view>
					 <view style="width:156rpx;text-align: center;font-size: 24upx;">正面</view>
				 </view>
				 <view style="width:156rpx;height:150rpx;margin-left: 81rpx;">
					 <view style="width:156rpx;height:106rpx" @tap="tapToMenu(3)">
						 <image style="width:156rpx;height:106rpx" :src="formData.idCardBackImage?formData.idCardBackImage:'http://139.9.103.171:1888/img/image/cameraImage.png'" />
					 </view>
					 <view style="width:156rpx;text-align: center;font-size: 24upx;">背面</view>
				 </view>
				
			</view>
		</view>
			<!-- <view class='label1View'>
				<text>团长信息</text>
			</view> -->
			<!-- <view class='nameView' @tap="chooseImgs(3)">
				<text>开团小区头像：</text>
				<image 
				:src="formData.organizeIcon?formData.organizeIcon:'http://139.9.103.171:1888/img/image/avatar.png'" 
				mode="aspectFit" 
				style="width: 80upx;
				height: 80upx;
				border-radius: 50%;
				margin:20upx;
				background-color: #f7f7f7;"
				></image>
			</view>
			<view class="line"></view> -->
			<view class='nameView'>
				<text>开团小区名字：</text>
				<input v-model="formData.organizeName" type="text" placeholder="请输入姓名"/>
			</view>
			<view class="line"></view>
			<view class='nameView'>
				<text>工作时间：</text>
				<view style="display: flex;">
					<picker  mode="multiSelector" :range="timeArr" :value="startTimeArrIndex" @change="bindStartChange">
						<view class="time">
							{{startTime}}
						</view>
					</picker>
					<view class="timeCenter">至</view>
					<picker  mode="multiSelector" :range="timeArr" :value="endTimeArrIndex" @change="bindEndChange">
						<view class="time">
							{{endTime}}
						</view>
					</picker>
				</view>
			</view>
			<view class="line"></view>
			<view class='nameView' @tap="selectAddress">
				<text>小区地址：</text>
				<view 
				v-if="receiverAddress && receiverAddress.consignee" 
				class="time" 
				style="height: 100upx;line-height: 100upx;width:500upx;">{{ receiverAddress.areaName + receiverAddress.address }}</view>
				<view v-else class="time" style="height: 100upx;line-height: 100upx;">
					请选择
				</view>
			</view>
	</view>
	
	<view class="btnView">
			 <view   class="btn" @tap="tapToMenu(0)">
			 	<Text>提交申请</text>
			 </view>
			 <view   class="btn1" @tap="tapToMenu(1)">
			 	<Text>取消申请</text>
			 </view>
	</view>
	
  </view>
</template>

<script>
 

export default {
  data() {
	  
    return {
		formData:{
			id:'',
			username:'',
			phone:'',
			idCard:'',
			idCardFrontImage:'',
			idCardBackImage:'',
			storeId:'',
			organizeName:'',
			jobTime:'',
			receiverId:'',
			organizePhone:''
		},
		formRules:{
		  id:[{
		    required:true,
		    message:'用户id不能为空'
		  }],
		  username:[{
		    required:true,
		    message:'请输入姓名'
		  }],
		  phone:[{
		    required:true,
		    message:'请输入电话号码'
		  },{
		    type:'mobile',
		    message:'手机号码有误！'
		  }],
		  idCard:[{
		    required:true,
		    message:'请输入身份证号'
		  }],
		  idCardFrontImage:[{
		    required:true,
		    message:'请上传身份证'
		  }],
		  idCardBackImage:[{
		    required:true,
		    message:'请上传身份证'
		  }],
		  organizeName:[{
			  required:true,
			  message:'请输入团长名称'
		  }],
		  jobTime:[{
			  required:true,
			  message:'请选择工作时间'
		  }],
		  receiverId:[{
			  required:true,
			  message:'请选择收货地址'
		  }]
		},
		timeArr:[
			['周一','周二','周三','周四','周五','周六','周日'],
		],
		hourArray:[],
		minuteArray:[],
		statrTimeArrIndex:[0,0,0],
		endTimeArrIndex:[0,0,0],
		startTime:'请选择开始时间',
		endTime:'请选择结束时间',
		memberInfo:'',
		userDetail:'',
		receiverAddress:null
    }
  },
  created() {
	  console.log(this.formData.receiverId)
		this.initData();
	   for(let i =0;i<24;i++){
		   if(i.toString().length==1){
		   	   i = '0'+i;
		   }
		   this.hourArray.push(i+'时')
	   }
	   for(let i =0;i<60;i++){
		   if(i.toString().length==1){
		   	   i = '0'+i;
		   }
		   this.minuteArray.push(i+'分')
	   }
	   this.timeArr.push(this.hourArray);
	   this.timeArr.push(this.minuteArray);
	   console.log(this.timeArr)
  },
  methods: {
	 
	  selectAddress() {
	  	uni.navigateTo({
	  		url: '/pagesM/pages/address_list?isFromOrder=1'
	  	});
	  },
	  async initData(){
		  this.memberId = this.$auth.getMemberId();
		   let resp = await this.$api.getMyBaseDatas({
			_isShowLoading: true,
		   	_isReject: true,
		   	_isPull: this.isPull,
		   	memberId: this.memberId
		   });
		  this.userDetail = resp;
		  console.log(resp);
		  this.userDetail = resp.user;
		  this.formData.organizeName =  this.userDetail.username;
		   this.formData.organizeIcon =  this.userDetail.avatar;
		    this.formData.phone =  this.userDetail.mobile;
	  },
	  
	  bindStartChange(e){
		  this.statrTimeArrIndex = e.target.value;
		  this.startTime = this.timeArr[0][this.statrTimeArrIndex[0]]+this.timeArr[1][this.statrTimeArrIndex[1]]+this.timeArr[2][this.statrTimeArrIndex[2]];
		  if(this.endTime!='请选择'){
		  	let startDay =  this.timeArr[0][this.statrTimeArrIndex[0]];
		  	let startTime = this.timeArr[1][this.statrTimeArrIndex[1]].replace('时','')+':'+this.timeArr[2][this.statrTimeArrIndex[2]].replace('分','');
		  	let endDay =  this.timeArr[0][this.endTimeArrIndex[0]];
		  	let endTime = this.timeArr[1][this.endTimeArrIndex[1]].replace('时','')+':'+this.timeArr[2][this.endTimeArrIndex[2]].replace('分','');
		  	this.formData.jobTime = startDay+'至'+endDay+' '+ startTime+'-'+endTime;
		  }
		  console.log(this.formData.jobTime)
	  },
		bindEndChange(e){
			this.endTimeArrIndex = e.target.value;
			this.endTime = this.timeArr[0][this.endTimeArrIndex[0]]+this.timeArr[1][this.endTimeArrIndex[1]]+this.timeArr[2][this.endTimeArrIndex[2]];
			if(this.startTime!='请选择'){
				let startDay =  this.timeArr[0][this.statrTimeArrIndex[0]];
				let startTime = this.timeArr[1][this.statrTimeArrIndex[1]].replace('时','')+':'+this.timeArr[2][this.statrTimeArrIndex[2]].replace('分','');
				let endDay =  this.timeArr[0][this.endTimeArrIndex[0]];
				let endTime = this.timeArr[1][this.endTimeArrIndex[1]].replace('时','')+':'+this.timeArr[2][this.endTimeArrIndex[2]].replace('分','');
				this.formData.jobTime = startDay+'至'+endDay+' '+ startTime+'-'+endTime;
			}
			console.log(this.formData.jobTime)
		},
 tapToMenu(idx) {
 			switch (idx) { 
 				case 0: // 提交申请
 					this.commit();
 					break;
 				case 1: // 取消申请
					uni.navigateBack({
						delta:1
					})
 					break;
				 case 2: //  正面
					this.chooseImgs(1)
					break;
				 case 3: // 背面
					this.chooseImgs(2)
					break;
 			}
 		},
    async commit() {
		if(this.receiverAddress){
			this.formData.receiverId = this.receiverAddress.id;
		}
      if(!this.validate(this.formRules,this.formData)){
        return
      }
	  let _this = this;
	  let {id,username,
	  idCard,phone,
	  idCardFrontImage,
	  idCardBackImage,
	  storeId,
		organizeName,
		organizeIcon,
		jobTime,
		receiverId} = this.formData;
      let resp = await this.$api.distributorApply({
        _isShowLoading: true,
        id: id,
		username:username,
        idCard: idCard,
        idCardImage	: idCardFrontImage +','+idCardBackImage,
		phone: phone,
		organizeName:organizeName,
		organizeIcon:organizeIcon,
		jobTime:jobTime,
		receiverId:receiverId
      })
      this.$dialog.success('申请成功', () => {
        // this.$util.refreshPage(['pages/mine','pages/mine_order_list'])
        // uni.navigateBack({
        //   delta:4
        // })
      })
    },
	async uploadImg(path,idx){
		  let promiseObj = await this.$api.uploadImg({
			_isReject:true,
			uri:path,
			name:'img_'+ this.$global.server.miniappCode +'_'+Date.now()
		  })
		  if(promiseObj){
			  if(idx==1){
				  this.formData.idCardFrontImage = promiseObj[0].path
			  }else if(idx==2){
				  this.formData.idCardBackImage = promiseObj[0].path
			  }else if(idx==3){
				  this.formData.organizeIcon = promiseObj[0].path
			  }
		  }
	},
	chooseImgs(idx) {
	  uni.chooseImage({
	    count: 1, //默认9
	    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
	    sourceType: ["album", "camera"], //从相册选择
	    success: res => {
	      let tempPaths = res.tempFilePaths;
		  this.uploadImg(tempPaths[0],idx);
	      // let imgList = this.imgList.slice(0)
	      // tempPaths.forEach((itemPath)=>{
	      //   imgList.push({
	      //     path:itemPath
	      //   })
	      // })
	      // this.imgList = imgList
	      // this.status = this.status || []
	      // for(let o of tempPaths){
	      //   this.status.push('')
	      // }
	      this.$forceUpdate()
	    },
	    fail: res => {
	      console.warn(res.errormsg || "取消选择");
	    },
	    complete: () => {
	      this.isLoading = false;
	    }
	  });
	},
	
    onLoadPage() {
      this.formData.id = this.$auth.getMemberId();
	  this.formData.storeId = this.$global.server.storeId;
    },
  }
}
</script>

<style lang="scss" scoped>
 .container {
	 padding-top: 20rpx;
	 background-color: #F6F4F5;
	 width: 100vw;
	 height: 100vh;
	 font-family: 'PingFang-SC-Bold';
 } 
 .topView{
	 margin-left: 20rpx;
	 width: 709rpx;
	 // height:585rpx;
	 background-color: #ffffff;
	 border-radius: 20rpx;
 }
 .label1View{
	 margin-left: 24rpx;
	 text{
		 color:#333333;
		 font-size: 30rpx;
		 font-weight: bold;
	 } 
 }
 .nameView{
	min-height: 90upx;
	align-items: center;
 	display:flex;
 	text{
 		margin-left:20rpx;
 		color:#666666;
 		font-size:24rpx;
 	}
 	input{
 		width:500rpx;
 		color:#666666; 
 		font-size:24rpx;
		margin-left: 20rpx;
 	}
	.timeCenter{
		font-size:24rpx;
		margin-left: 20rpx;
	}
	.time{
		color:#666666; 
		font-size:24rpx;
		margin-left: 20rpx;
	}
  }
  
  .line{
	  width: 660.4rpx;
	  margin-left: 24.3rpx;
	  background-color: #EEEEEE;
	  height: 2rpx;
  }
  .cameraViewBg{
	  margin-top: 37rpx;
	  display: flex;
	  flex-direction: row;
	  
	  text{
		  margin-top: 10rpx;
		  margin-left:20rpx;
		  color:#666666;
		  font-size:24rpx;
	  }
	  .cameraView{ 
	  	  display: flex;
	  	  flex-direction: row;  
		  width: 550rpx;
		  margin-left: 20rpx;
	  	  view{  
			  justify-content: center;
			  text{
				  margin-top: 10rpx; 
				  color:#666666;
				  font-size:24rpx;
				  display: flex;
				  justify-content: center;
				  align-items: center;
			  }
	  	  }
		  
	}
  }
  .btnView{
  	  margin-top: 100rpx;
  	  width: 100vw;
  	  display: flex;
  	  flex-direction: row;  
  	  align-items: center;
  	  .btn{
  		  width: 247rpx;
  		  height:88rpx;
  		  background-color: $dt-color-primary;
  		  border-radius: 15rpx; 
  		  padding-top: 5rpx; 
  		  margin-left: 79rpx;
  		  text-align: center;
  		  text{   
  			  line-height:88rpx ;
  			  color:#ffffff;
  			  font-size: 30rpx;
  		  }
  	  }
  	  .btn1{
  			  margin-left: 104rpx;
  	  		  width: 247rpx;
  	  		  height:88rpx;
  	  		  background-color: #ffffff;
  	  		  border-radius: 15rpx; 
  	  		  padding-top: 5rpx;  
  			  text-align: center;
  	  		  text{ 
  			  line-height:88rpx ;
  	  			  color:#999999;
  	  			  font-size: 30rpx;
  	  		  }
  	  }
  }
</style>