wx_oms/driverManagement/addDiver/addDiver.vue

<template>
	<!-- 布局 flex 组件 view -->
	<view class="addDiver_body">
		<!--  卡片  -->
		<view class="addDiver_card">

			<view class="card_title">
				<view class="tiao"></view>
				<view class="card_title_text">基础信息</view>
			</view>

			<uni-list>
				<uni-list-item>
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image>
						用户昵称
						</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right">
						<input v-model="postData.userName" placeholder="请输入昵称" class="list_right_input" />
					</view>
				</uni-list-item>
				<uni-list-item class="fg">
					<view class="list_header"  slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image>
						密码
						</view>
					<view slot="body" class="list_right">
						<view style="width: 100%;padding-right: 16px !important; ">
							<input v-model="postData.password" placeholder="请输入密码或生成随机密码" class="list_right_input" />
							<view @tap="random()"
								style="font-size: 24rpx; position: relative; color: #2866FF; justify-content: flex-end; display: flex;align-items: center;z-index: 999999;">
								<text>生成密码</text>
							</view>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item :border="false">
					<view class="list_header"  slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image>
						手机号码
						</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right">
						<view style="width: 100%; ">
							<input v-model="postData.phone" placeholder="请输入手机号码" class="list_right_input" />
							<view
								style="font-size: 24rpx; color: #2866FF; justify-content: flex-end; display: flex;align-items: center;">
								<radio style="transform:scale(0.5)" color="#2866FF" value="r1" :checked="false" />
								是否将密码发送给客户
							</view>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item link>
					<view class="list_header" slot="header">生日</view>
					<view @click="open" :style="{color:postData.birthday?'#333333':''}" slot="body" class="list_right list_nosele">
						{{postData.birthday?postData.birthday:'请选择生日日期'}}
					</view>
				</uni-list-item>
				<uni-list-item link>
					<view class="list_header" slot="header">头像</view>
					<view @click="clickfn" slot="body" :style="{color:postData.headPhoto?'#333333':''}" class="list_right list_nosele">
						{{postData.headPhoto?'已上传':'请上传'}}
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">
						<!-- <image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image> -->
						个人车牌
						</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right list_nosele">
						<input v-model="postData.plateNumber" placeholder="请输入个人车牌号码" class="list_right_input" />
					</view>
				</uni-list-item>
			</uni-list>

		</view>
		<!--  卡片  -->
		<view class="addDiver_card">

			<view class="card_title">
				<view class="tiao"></view>
				<view style="display: flex;justify-content: space-between;width: 100%;" class="card_title_text">
					<view>关联绑定企业</view>
					<view @tap="clearFn" class="clear">
						<image src="../../static/clear.png" mode="heightFix" style="height: 32rpx;margin-right: 10rpx;"></image>
						清除</view>
				</view>
			</view>

			<uni-list>
				<uni-list-item link>
					<view class="list_header" slot="header">
						<!-- <image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image> -->
						企业名称
						</view>
					<view style="" slot="body" class="list_right">
						<view @tap="jump" slot="body" :style="{color:aboutEnterprise.name?'#333333':' '}" class="list_right list_nosele">
							{{aboutEnterprise.name?aboutEnterprise.name:'请选择企业'}}
						</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header"  slot="header">
						<!-- <image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image> -->
						企业类型
						</view>
					<view slot="body" class="list_right">
						<u-radio-group iconPlacement="right" v-model="enterpriseType" placement="row"
							@change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.name" @change="radioChange">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</uni-list-item>
				<uni-list-item v-if="enterpriseType=='自营'">
					<view class="list_header"  slot="header">
						<!-- <image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image> -->
						企业车牌</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right">
						<view style="width: 100%; ">
							<input v-model="aboutEnterprise.plateNumberCompany" placeholder="请输入企业车牌" class="list_right_input" />
						</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">
						<!-- <image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image> -->
						单日金额上限
						</view>
					<view slot="body" class="list_right ">
						<view style="width: 100%;padding-right: 16px !important;display: flex; ">
							<input @input="inputFn('dayAmountToplimit')" type="number" v-model="aboutEnterprise.dayAmountToplimit"  class="list_right_input" />
							<text class="yuan">元</text>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">
						<!-- <image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image> -->
						单次金额上限
						</view>
					<view slot="body" class="list_right ">
						<view style="width: 100%;padding-right: 16px !important;display: flex; ">
							<input @input="inputFn('orderAmountToplimit')" type="number" v-model="aboutEnterprise.orderAmountToplimit"  class="list_right_input" />
							<text class="yuan">元</text>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">
						<!-- <image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image> -->
					单日加油升数上限</view>
					<view style="padding-right: 16px !important;display: flex;" slot="body" class="list_right ">
						<input @input="inputFn('dayVolumeToplimit')" type="number" v-model="aboutEnterprise.dayVolumeToplimit"  class="list_right_input" />
						<text class="yuan">升</text>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">
						<!-- <image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image> -->
					单笔加油升数上限</view>
					<view style="padding-right: 16px !important;display: flex;" slot="body" class="list_right ">
						<input @input="inputFn('orderVolumeToplimit')"  type="number" v-model="aboutEnterprise.orderVolumeToplimit" class="list_right_input" />
						<text class="yuan">升</text>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">
						<!-- <image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image> -->
						是否共享企业额度</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right">
						<u-switch :disabled='disabled' :openText='openText' asyncChange activeColor='#17A00E' inactive-color="#BBBBBB"
							size='35' v-model="switchOpen" @change="change"></u-switch>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">备注</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right ">
						<input v-model="aboutEnterprise.remark" placeholder="请输入备注" class="list_right_input" />
					</view>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- 底部按钮 -->
		<view class="list_footer">
			<button @tap="postFn" class="list_butten ">保存</button>
		</view>
		<u-picker @confirm='dateConfirm' v-model="show" mode="time"></u-picker>
	</view>
</template>

<script>
	/*
	 * 奕 2022/1/25
	 * @property {Object}	openText:开关组件显示的文字 one: '开启' off: '关闭'
	 * @property {String}	switchOpen:开关状态值
	 * @property {String}	enterpriseType: 单选框组件绑定的值
	 * @property {Array}	radiolist1:单选框的可选值数组
	 * @property {Function} random: 随机生成密码方法  
	 * @property {Function} randomNumberFn: 随机返回一个数字
	 * @property {Function} randomUnicodeFn: 随即返回一个通过随机数生成且值的范围控制在65-122且不为91-96的数字正对应英文字母大写到小写的Unicode编码生成随机大小写字母
	 */
	import tool from '@/utils/tool'
	import addDirver from '@/api/addDirver'
	import md5 from 'js-md5'
	export default {
		data() {
			return {
				show: false,
				disabled:false,
				postData: {
					phone: '',
					birthday: '',
					password: '',
					userName: '',
					birthday:'',
					headPhoto:'',
					plateNumber:'',
					registerMode:'1',
					userSource:'OMS-MINIAPP'
				},
				aboutEnterprise:{
					customerId:'',
					customerCode:'',
					companyId:'',
					companyNature:1,
					shareCompanyQuota:0,
					dayAmountToplimit:'0',
					orderAmountToplimit:'0',
					dayVolumeToplimit:'0',
					orderVolumeToplimit:'0',
					name:'',
					nickName:'',
					plateNumberCompany:'',
					remark:''
				},
				openText: {
					one: '开启',
					off: '关闭'
				},
				switchOpen: true,
				enterpriseType: '自营',
				radiolist1: [{
						name: '自营',
						disabled: false
					},
					{
						name: '外请',
						disabled: false
					},
				],
			}
		},
		onLoad() {
			let that = this
			uni.$on('company',function(e){
				({id:that.aboutEnterprise.companyId,name:that.aboutEnterprise.name}=e)
				console.log(e)
			})
			console.log(tool.chooseImage)
		},
		methods: {
			inputFn(e){
				console.log(e)
				if(this.aboutEnterprise[e].indexOf('.')!=-1){
					if(this.aboutEnterprise[e].split('.')[1].length>2){
						uni.showToast({
							title:'最多保留小数点后两位',
							icon:'none'
						})
						this.$nextTick(function(){
							this.aboutEnterprise[e] = Number(this.aboutEnterprise[e]).toFixed(2)
						})
					}
				}
			},
			clearFn(){
				let white = ['companyNature','shareCompanyQuota']
				Object.keys(this.aboutEnterprise).forEach(key=>{
					if(white.includes(key)) return
					this.aboutEnterprise[key] = ''
				})
				this.aboutEnterprise.shareCompanyQuota = 1
				this.switchOpen = true
				this.enterpriseType='自营'
				this.disabled=false
			},
			postFn(){
				let that = this
				let olicheck = null
				let check = null
				console.log(this.aboutEnterprise)
				let checkPage = {
					userName:{
						tacitly:'',
						WrongText:'用户昵称不能为空'
					},
					password:{
						tacitly:'',
						minLength:8,
						WrongText:'密码最少为8位'
					},
					phone:{
						custom:/^[1][3,4,5,7,8,9][0-9]{9}$/,
						WrongText:'请输入正确手机号码'
					},
					// plateNumber:{
					// 	custom:/(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/,
					// 	WrongText:'司机车牌号码错误'
					// }
				}
				 check = tool.checkFn(this.postData,[],checkPage)
				if(!check.result){
					uni.showToast({
						title:check.WrongText,
						icon:'none'
					})
					return
				}
				
				if(this.aboutEnterprise.name!==''){
					let olicheckPage = {
						plateNumberCompany:{
							tacitly:'',
							custom:/(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/,
							WrongText:'企业车牌号码错误'
						}
					}
					 olicheck = tool.checkFn(this.aboutEnterprise,[], this.enterpriseType=='自营'?olicheckPage:{})
					if(!olicheck.result){
						uni.showToast({
							title:olicheck.WrongText,
							icon:'none'
						})
						return
					}
				}
				addDirver.saveNewDriver(Object.assign(JSON.parse(JSON.stringify(this.postData)),{password:md5(this.postData.password)})).then(res=>{
					if(res.code!==20000) return
					uni.showToast({
						title:'司机新增成功',
						icon:'success'
					})
					setTimeout(()=>{
						if(olicheck!==null){
							({id:that.aboutEnterprise.customerId,userCode:that.aboutEnterprise.customerCode}=res.data);
							this.aboutEnterprise.nickName = this.postData.userName
							this.aboutEnterprise.shareCompanyQuota = this.switchOpen?1:0
							addDirver.saveOilCard(this.aboutEnterprise).then(res=>{
								if(res.code!==20000) return
								uni.showToast({
									title:'油卡新增成功',
									icon:'success'
								})
								setTimeout(()=>{
									uni.redirectTo({
										url: "/driverManagement/index/index"
									})
								},500)
							})
						}else{
							uni.redirectTo({
								url: "/driverManagement/index/index"
							})
						}
					},500)
					
					// if(this.aboutEnterprise.name!==''){
					// 	this.aboutEnterprise.shareCompanyQuota = this.switchOpen?1:0
					// 	if( !/(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/.test(this.aboutEnterprise.plateNumberCompany) ){
					// 		uni.showToast({
					// 			title:'请输入正确车牌号码',
					// 			icon:'error'
					// 		})
					// 		return
					// 	}
					// 	addDirver.saveOilCard(this.aboutEnterprise).then(res=>{
					// 		if(res.code!==20000) return
					// 	})
					// }
					// uni.navigateBack()
					
				})
			},
			jump(){
				uni.navigateTo({
					url:'../company/company'
				})
			},
			dateConfirm(e){
				this.postData.birthday = e.year + '-' + e.month + '-' + e.day
				console.log(this.postData.birthday)
			},
			open() {
				this.show = !this.show
			},
			clickfn(e) {
				if (typeof e !== "object") {
					this.postData.headPhoto = e
					uni.showToast({
						title:'上传成功'
					})
					return
				}
				tool.chooseImage(this.clickfn)
			},
			/*
			@property {Array}	mima:空数组,保存生成的参数
			@property {Boolean}	open:随机生成控制器,false:生成数字 true:生成随机大小写字母
			调用randomUnicodeFn函数需等待返回正确的编码 解决方案  Promise  setInterval es6:async await
			*/
			async random() {
				let mima = []
				let open = false
				//8位密码
				for (let i = 0; i < 8; i++) {
					/*随机生成两个0-10的数字 通过对比大小 随机控制 当前位数生成字母还是数字
					 false:生成数字 true:生成随机大小写字母*/
					open = parseInt(Math.random() * 10) > parseInt(Math.random() * 10)

					let zm = mima.join('').match(/[A-z]/g) || [] //匹配字母 match返回一个已匹配到的数组
					let nm = mima.join('').match(/[0-9]/g) || [] //匹配数字 match返回一个已匹配到的数组
					/*通过返回的匹配到的数组
					判断已需要的字母或字母是否满足最少字母或数字位数条件
					条件满足,干预随机生成条件,反之继续运行
					现在生成条件为4个数字4个随机大小写字母
					*/
					if (nm.length == 4) {
						open = false
					}
					if (zm.length == 4) {
						open = true
					}
					//执行生成
					if (open) {
						let number = this.randomNumberFn()
						mima.push(number)
					} else {
						let code = await this.randomUnicodeFn()
						mima.push(String.fromCharCode(code))
					}
				}
				this.postData.password = mima.join('')
				console.log(mima.join(''), '---')
			},
			//随机生成数字 0-10
			randomNumberFn() {
				return parseInt(Math.random() * 10);
			},
			/*
			随机生成 大小写英文字母
			如随机生成的是91-96之间的Unicode编码数字无法对应生成大小写 英文字母 则重新生成 
			*/
			randomUnicodeFn() {
				return new Promise((resolve, reject) => { // 
					let numberarry = /^9[1-6]{1}$/
					let timer = setInterval(() => {
						let code = parseInt(Math.random() * 57) + 65
						if (!numberarry.test(code)) {
							console.log(String.fromCharCode(code), code)
							clearInterval(timer)
							resolve(code)
						}
					}, 10)
				})
			},
			change() {
				this.aboutEnterprise.shareCompanyQuota = this.switchOpen?1:0
				console.log(this.switchOpen)
			},
			radioChange(e) {
				console.log(e)
			},
			groupChange() {
				this.aboutEnterprise.companyNature = this.enterpriseType=='自营'?1:0
				console.log(this.aboutEnterprise.companyNature,'----')
				if(this.enterpriseType=='外请'){
					this.aboutEnterprise.plateNumberCompany = ''
					this.switchOpen= false
					this.disabled = true
					
				}else{
					this.switchOpen= true
					this.disabled = false
				}
				console.log(this.aboutEnterprise.companyNature,this.disabled,'----')
			}
		}
	}
</script>

<style lang="scss">
	.clear{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BBBBBB;
		display: flex;
		align-items:center;
			}
	.yuan{
		font-size: 28rpx;
		margin-left: 10rpx;
	}
	.popup_body {
		padding: 20rpx;
	}

	.list_right_input {
		font-size: 28rpx;
	}

	.list_footer {
		padding-bottom: 57rpx;
		margin-top: 57rpx;
	}

	.list_butten {
		height: 100rpx;
		background: #2866FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 36pxr;
	}

	.fg {
		.uni-list-item__container {
			padding-bottom: 0px !important;
		}
	}

	.list_nosele {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #999999;
	}

	.uni-icon-wrapper {
		padding: 0px !important;
	}

	.uni-list-item__container {
		padding: 12px 0 !important;
	}

	.tiao {
		width: 8rpx;
		height: 34rpx;
		background: #2866FF;
	}

	.card_title_text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 10rpx;
	}

	.card_title {
		display: flex;
		border-bottom: 1px solid #F0F0F0;
		align-items: center;
		padding-bottom: 17rpx;
		height: 86rpx;
	}

	.list_header {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		align-items: center;
		padding-left: 16px;
		position: relative;
		height: fit-content;
	}

	.list_right_input {
		width: 100%;
		color: #333333;
		text-align: end !important;
		font-size: 28rpx;
		text-align: right !important;
		padding-left: 90rpx;
		box-sizing: border-box;
	}

	.list_right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.addDiver_body {
		padding: 0 40rpx;
	}

	.addDiver_card {

		background: #FFFFFF;
		box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
		border-radius: 20rpx;
		margin-top: 38rpx;
		overflow: hidden;
		/* padding-top: 19rpx; */
		padding: 19rpx 20rpx 0 20rpx;
		box-sizing: border-box;
	}
</style>