ddcWechat/pages/rent/control/auth.vue

<template>
	<view>
		<form @submit="formSubmit">
			<view class='personal-data' :style="colorStyle">
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view>{{$t(`手机号`)}}</view>
						<view class='input'>
							<input type='nickname' placeholder="请输入手机号" name='nickname' :maxlength="16" v-model='phone'></input>
						</view>
					</view>
					<picker mode="selector" range-key='text' :range="timeList" @change="changeTime">
						<view class='item acea-row row-between-wrapper'>
							<view>{{$t(`授权时长`)}}</view>
							<view class='input'>
								{{time||'请选择时间'}}
							</view>
						</view>
					</picker>
					<view class='item acea-row row-between-wrapper'>
						<view>{{$t(`备注`)}}</view>
						<view class='input'><input placeholder="备注信息填写" type='nickname' name='nickname' :maxlength="16"
								v-model='mask'></input>
						</view>
					</view>

				</view>
				<button class='modifyBnt bg-color' formType="submit">{{$t(`保存修改`)}}</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		postCarAuth,
	} from '@/api/rent.js';
	import {
		mapGetters
	} from "vuex";
	import colors from '@/mixins/color.js';
	export default {
		mixins: [colors],
		data() {
			return {
				id: '',
				phone: '',
				indexTime: '',
				mask:'',
				time:'',
				timeList: [{
						type: 0,
						text: '长期'
					},
					{
						type: 1,
						text: '1天'
					},
					{
						type: 3,
						text: '3天'
					},
					{
						type: 7,
						text: '7天'
					},
					{
						type: 30,
						text: '30天'
					}
				],
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			this.id = options.id
			if (!this.isLogin) {
				toLogin();
			}
		},
		methods: {
			// 切换
			changeTime(e) {
				this.time = this.timeList[e.detail.value].text
				this.indexTime = e.detail.value;
			},
			// 提交
			formSubmit(e) {
				let obj = this;
				if (!obj.phone) {
					uni.showToast({
						title: '请输入授权用户手机号',
						icon: 'none'
					})
					return
				}
				if (obj.time == '授权时长') {
					uni.showToast({
						title: '请选择授权时长',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '授权申请中',
					mask: true
				});
				postCarAuth({
						 phone: obj.phone,
						car_id: obj.id,
						day: obj.indexTime,
						nickname: obj.mask
					})
					.then(({
						data
					}) => {
						uni.hideLoading()
						uni.showToast({
							title: '授权成功',
							icon: 'success'
						})
						setTimeout(function() {
							uni.redirectTo({
								url:'./authList?id='+obj.id,
								fail(e){
									console.log(e)
								}
							});
						}, 1000);
					})
					.catch(err => {
						uni.hideLoading()
						uni.showToast({
							title: err,
							icon:"error"
						});
					});
			},
		}
	}
</script>

<style scoped lang="scss">
	.personal-data .list {
		/* #ifndef H5 */
		margin-top: 15rpx;
		/* #endif */
		background-color: #fff;

		.item {
			padding: 30rpx 30rpx 30rpx 0;
			border-bottom: 1rpx solid #f2f2f2;
			margin-left: 30rpx;
			font-size: 28rpx;
			color: #282828;

			.input {
				flex-grow: 1;
				text-align: right;
				color: #868686;
				font-size: $uni-font-size-lg;
				.icon-suozi {
					margin-left: 10rpx;
				}

				.id {
					// width: 180rpx;
				}

				.iconfont {
					font-size: 24rpx;
				}
			}
		}
	}

	.modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}

	.monthslist {
		background-color: #FFF;
		border-radius: 10rpx;
		margin: 20rpx 20rpx 0rpx 20rpx;
		padding: 20rpx;

		.time,
		.peytype {
			font-size: 24rpx;
			color: #999;
		}

		.info {
			color: var(--view-theme);
		}

		.right {
			text-align: right;

			.money {
				color: var(--view-theme);
			}
		}
	}
</style>