jikeH5/pages/wyCar/apply.vue

<template>
	<view class="content">
		
		<!-- 自定义导航 -->
		<view class="zdyNavBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNav">
				<view class="zdyNavLeft">
					<image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback">
					</image>
		
				</view>
				<view class="zdyNavTitle">网约车优享</view>
				<view style="width: 50px;"></view>
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>
		<view class="top">
			填写认证信息
		</view>
		<view class="box">
			<view class="cont">
				<view class="line">
					<view class="lineLeft"><span class="stars">*</span>姓名</view>
					<view class="lineRight">
						<input type="text" v-model="customerName" class="lineInput" placeholder="请填写姓名"/>
					</view>
				</view>
				<view class="line">
					<view class="lineLeft"><span class="stars">*</span>手机号</view>
					<view class="lineRight">
						<input type="text" v-model="mobilePhone" class="lineInput" placeholder="请填写手机号"/>
					</view>
				</view>
				<view class="line">
					<view class="lineLeft"><span class="stars">*</span>车牌号</view>
					<view class="lineRight">
						<input type="text" v-model="plateNumber" class="lineInput" placeholder="请填写车牌号"/>
					</view>
				</view>
				<view class="line">
					<view class="lineLeft">车型</view>
					<view class="lineRight2">
						<view class="cxBox" @click="carmodel(1)">
							<img src="../../static/img/icon_checked.png" v-if="carmodelType==1" alt="" class="cxIcon"/>
							<img src="../../static/img/ckn.png" v-if="carmodelType==2" alt="" class="cxIcon"/>
							<span>丰田网约车</span>
						</view>
						<view class="cxBox" @click="carmodel(2)" style="padding-left: 20rpx;">
							<img src="../../static/img/icon_checked.png" v-if="carmodelType==2" alt="" class="cxIcon"/>
							<img src="../../static/img/ckn.png" v-if="carmodelType==1" alt="" class="cxIcon"/>
							<span>其他网约车</span>
						</view>
					</view>
				</view>
				<view class="line">
					<view class="lineLeft"><span class="stars">*</span>上传图片</view>
					<view class="lineImgBOx">
						<view class="lineimghz" v-for="(item,index) in imgListArr">
							<img src="../../static/img/del.png" alt="" class="lineimgdel" @click="delimg(index)" >
							<img :src="item" alt="" class="lineimg" @click="previewImage(item)">
						</view>
						<view class="lineimghz" @click="upimg">
							<img src="../../static/img/scimg.png" alt="" class="lineimg">
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit" @click="submit">提交</view>
		
		
		 <w-compress ref='wCompress' />
	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue'
	export default {
		components: {
		        WCompress
		},
		data() {
			return {
			    iStatusBarHeight:'',
				rzShow:false,
				imgListArr:[],
				file:'',
				customerName:'',
				mobilePhone:'',
				plateNumber:'',
				carmodelType:1,
				shopID:'86B933FF-3782-4F82-A192-176E7A45AA13',
				shopName:'fzh123',
				sourceUserID:'00958045-3341-4AF7-9460-801F5B52E3E2',
				sourceName:'姜国远',
				uid:'',
			}
		},
		onLoad(opt) {
		 //  this.shopID=opt.shopID;
		  // this.shopName=opt.shopName;
		   this.uid=opt.uid;
		   //this.sourceName=opt.sourceName;
           this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		created() {
			
		},
		methods: {
			submit(){
				this.plateNumber = this.plateNumber.replace(/\s*/g,"");
				var regex = /(^[安京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([A-HJ-NP-Z0-9]{5})|([A-HJ-NP-Z0-9]{6}))$)|(^[安京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-HJ-NP-Z0-9]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$)/u;
				if (regex.test(this.plateNumber)) {
				        
				} else {
				       uni.showToast({
				       	title: '请输入正确车牌号',
				       	icon: 'none',
				       	duration: 3000
				       });
					   return false;
				}
				//this.convertToUpperCase(this.plateNumber)
				if(!this.customerName){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				this.plateNumber=this.plateNumber.toUpperCase()
				 console.log(this.plateNumber)
				/* var reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
				if(reg.test(this.mobilePhone) == false ){
				    console.log("手机号码格式不正确");
				     uni.showToast({
				     	title: '请输入正确的手机号',
				     	icon: 'none',
				     	duration: 3000
				     });
				     return false;   
				} */
				if(this.mobilePhone.length!=11){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000
					});
					return false;  
				}
				if(!this.mobilePhone){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if(this.imgListArr.length==0){
					uni.showToast({
						title: '请上传图片',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				uni.showLoading({
					title: '加载中'
				});
				this.isload = false;
				this.$http('api/online-apply/add', {
					customerName:this.customerName,
					mobilePhone:this.mobilePhone,
					plateNumber:this.plateNumber,
					carmodelType:this.carmodelType,
					//shopID:this.shopID,
					//shopName:this.shopName,
					sourceUserID:this.uid,
					//sourceName:this.sourceName,
					imgs:this.imgListArr.join(','),
				}, 'POST').then(res => {
					uni.hideLoading();
					this.isload = true;
					if(res.code==0){
						uni.navigateTo({
							url:'/pages/wyCar/success'
						})
					}else{
						uni.showToast({
						     title: '二维码链接已过期，请重新生成二维码',
						 	 icon:'none',
						     duration: 3000,
						 });
					}
					
				
				})
			},
			convertToUpperCase(text) {
			  return text.replace(/[a-z]/g, function(match) {
			    return String.fromCharCode(match.charCodeAt(0) - 32);
			  });
			},
			carmodel(num){
				this.carmodelType=num
			},
			delimg(index){
				this.imgListArr.splice(index, 1)
			},
			previewImage(img){
						  var arr=[]
						  arr.push(img)
							uni.previewImage({
								urls: arr,
								longPressActions: {
									itemList: ['发送给朋友', '保存图片',],
									success: function(data) {},
									fail: function(err) {}
								}
							});
			},
			upimg(){
				   var that = this;
				   uni.chooseImage({
					sourceType: ['album','camera'],
					count:9, 
					sizeType:['compressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//console.log(tempFilePaths)
						that.file=tempFilePaths
						that.$refs.wCompress.start(that.file, {
									pixels: 600000,  // 最大分辨率，默认二百万
									quality: 0.9,     // 压缩质量，默认0.8
									type: 'png',      // 图片类型，默认jpg
									base64: true,     // 是否返回base64，默认false，非H5有效
								  }).then(resxx => {
									 // console.log(resxx)
									  resxx.forEach(item=>{
										  uni.uploadFile({
										  	   url: that.$request.baseUrl+'api/online-apply/uploadFile', //仅为示例，非真实的接口地址
										  	   filePath: item,
										  	   name: 'file',
										  	   formData: {
										  		   'user': 'test'
										  	   },
										  	   success: (uploadFileRes) => {
										  		 that.imgListArr=that.imgListArr.concat(JSON.parse(uploadFileRes.data).data)
										  	   }
										     });    
									  })
										       
												  
								   }).catch(e => {
												  
								   })
						
				   
						
					}
				   });
			},
			goback(){
				
					//app交互
					var standalone = window.navigator.standalone
					var userAgent = window.navigator.userAgent.toLowerCase()
					var safari = /safari/.test(userAgent)
					var ios = /iphone|ipod|ipad|mac/.test(userAgent)
					var android = /android/.test(userAgent)
					if (ios) {
									 if ( true) {//!standalone&& !safari
									   window.webkit.messageHandlers.goMyNav.postMessage(null)
									 }
					} else if (android) {
									 window.android.postMessage()
					}
				
			   
			},
		}
	}
</script>

<style scoped>
.box{
	padding: 0 24rpx;
}
.submit{
	width: 493rpx;
	height: 74rpx;
	background: #FF8130;
	border-radius: 37rpx;
	font-weight: 500;
	color: #FFFFFF;
	font-size: 30rpx;
	line-height: 74rpx;
	text-align: center;
	margin: 0 auto;
	margin-top: 40rpx;
}
.cont{
	background: #FFFFFF;border-radius: 10rpx;
	padding: 0 20rpx;
}
.cxBox{
	display: flex;line-height: 28rpx;
	padding-top: 6rpx;
}
.cxBox span{
	color: #3C3C3C;padding-left: 8rpx;
}
.cxIcon{
	width: 28rpx;
	height: 28rpx;
}
.lineImgBOx{
	display: flex;
	flex-wrap: wrap;
	width: 540rpx;
}
.lineimghz{
	margin-right: 24rpx;
	position: relative;
	margin-bottom: 24rpx;
}
.lineimg{
	width: 150rpx;
	height: 150rpx;
	border-radius: 6rpx;
}
.lineimgdel{
	width: 37rpx;
	height: 37rpx;
	position: absolute;
	top: -18rpx;
	right: -18rpx;
}
.lineRight2{
	display: flex;
}
.line{
	display: flex;font-size: 28rpx;
	color: #666666;padding: 29rpx 0;
	border-bottom: 1px solid #EEEEEE;
}
.lineLeft{
	width: 130rpx;
}
.lineInput{
	font-size: 28rpx;    color: #3c3c3c;
}
.top{
	color: #666666;font-size: 28rpx;
	line-height: 40rpx;padding: 20rpx 44rpx;
}
	.content{
		min-height: 100vh;
		background: #F6F6F6;
	}
	.zdyNavBox {
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	
	
	}
	
	.zdyNav {
		height: 44px;
		display: flex;
		justify-content: space-between;
	
		align-items: center;
	
	}
	
	.backImg {
		width: 44rpx;
		height: 44rpx;
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	
	.homeImg {
		width: 44rpx;
		height: 44rpx;
	
	}
	
	.zdyNavLeft {
		display: flex;
		align-items: center;
	}
	
	.zdyNavTitle {
	
		height: 44px;
		background: #FFFFFF;
		text-align: center;
		font-size: 34rpx;
		line-height: 44px;
	}
	
	
	
	.tab {
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		line-height: 92rpx;
		/* position: fixed; */
		width: calc(100vw - 100rpx);
		padding-left: 50rpx;
		padding-right: 50rpx;
		height: 92rpx;
		z-index: 11;
		border-top: 1px solid #EEEEEE;
	}
	
	.tabLine {
	
		font-size: 28rpx;
		color: #333333;
		text-align: center;
	}
	
	.tabActive {
		color: #FF0000;
		font-weight: bold;
		border-bottom: 4rpx solid #FF0000;
	
	}
	
	.main {
		padding-top: 260rpx;
		padding-bottom: 20rpx;
		background-color: #F4F5F7;
	}
	
	.itemBg {
		margin: 20rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	
	.itemTop {
		display: flex;
		justify-content: space-between;
	}
	
	.itemType {
		color: #999999;
		font-size: 24rpx;
	}
	
	.itemSheetState {
		font-size: 24rpx;
		color: #999999
	}
	.redColor {
		color: #FF0000;
	}
	.orangeColor {
		color: #F19D01;
	}
	.greenColor {
		color: #00A040;
	}
	
	
	.itemShopBg {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	.shopName {
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.price {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.itemName {
		color: #666666;
		font-size: 24rpx;
		padding-top: 16rpx;
		height: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.plateBg {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.plateNumber {
		color: #666666;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		display: flex;
	
	}
	
	.itemLineBottom {
		display: flex;
		justify-content: flex-end;
	
	}
	
	.itemBtn1 {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #3C3C3C;
		margin-left: 40rpx;
	}
	
	.itemBtn2 {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #FF4F00;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #FF4F00;
		margin-left: 40rpx;
	}
	
	.orderState {
		color: #F19D01;
		font-size: 24rpx;
		padding-left: 20rpx;
	}
	.renBox{
		   color: #1A1A1A;
		   background: #F7F7F7;
		   border-radius: 10rpx;
		   display: flex;
		   padding: 20rpx;font-size: 24rpx;
		   line-height: 30rpx;
		   margin-top: 16rpx;
	}
	.renimg{
		   width: 30rpx;height: 30rpx;
	}
	.renMobilePhone{
		   padding-left: 13rpx;
	}
	.itemaddress{
		font-size: 24rpx;display: flex;
		color: #3C3C3C;padding-top: 16rpx;
		line-height: 33rpx;
	}
	.addressDD{
		width: 10rpx;
		height: 10rpx;
		background: #FF0000;
		border-radius: 50%;
		margin-top: 10rpx;
		margin-right: 5rpx;
	}
	.sschahao{
		width: 40rpx;
		height: 40rpx;
		padding-top: 16rpx;
	}
	.stars{
		color: #FF2400;
	}
</style>