zd/pages/user/myCart/authorization.vue

<template>
	<view class="container">
		<view class="listBox">
			<view class="list">
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">授权手机号</text>
					</view>
					<view class="right flex">
						<input class="input" placeholder="请输入用户手机" type="text" v-model="phone"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">授权时长</text>
					</view>
					<view class="right flex">
						<picker class="input" mode="selector" range-key='text' :range="timeList" @change="changeTime">
							<view>{{time}}</view>
						</picker>
						<image class="img" src="../../../static/icon/dom.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">对其备注</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="mask" type="text" placeholder="请输入备注信息"
							placeholder-class="placeholder" />
					</view>
				</view>
			</view>
		</view>
		<view class="base-buttom" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">授权</view>
	</view>
</template>

<script>
	import {
		add_auth_car
	} from '@/api/user.js';
	export default {
		data() {
			return {
				phone: '',
				id: '',
				time: '授权时长',
				mask: '',
				timeList: [{
						type: 0,
						text: '长期'
					},
					{
						type: 1,
						text: '1天'
					},
					{
						type: 3,
						text: '3天'
					},
					{
						type: 7,
						text: '7天'
					},
					{
						type: 30,
						text: '30天'
					}
				],
				indexTime: 0, //选中的时间对象
				loding: false
			};
		},
		onLoad: function(option) {
			this.id = option.id
		},
		methods: {
			changeTime(e) {
				this.time = this.timeList[e.detail.value].text
				this.indexTime = e.detail.value;
			},
			confirm(e) {
				let obj = this;
				if(!obj.phone){
					uni.showToast({
						title:'请输入授权用户手机号',
						icon:'none'
					})
					return
				}
				if(obj.time=='授权时长'){
					uni.showToast({
						title:'请选择授权时长',
						icon:'none'
					})
					return
				}
				obj.loding = true;
				add_auth_car({
						to_phone: obj.phone,
						car_number: obj.id,
						day: obj.indexTime,
						nickname: obj.mask
					})
					.then(({
						data
					}) => {
						uni.showToast({
							title:'授权成功',
							icon:'success'
						})
						setTimeout(function() {
							obj.loding = false;
							uni.navigateBack();
						}, 1000);
					})
					.catch(err => {
						obj.loding = false;
						console.log(err);
					});
			}
		},

	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.bg-gray {
		background-color: $color-gray;
	}
	.base-buttom{
		position: relative;
		bottom: auto;
		left: auto;
		right: auto;
	}
	.content {
		padding-top: 30rpx;
	}

	.listBox {
		margin: $page-row-spacing;
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.list {
		.input {
			text-align: right;
			font-size: $font-base;
			color: $color-gray;
			min-height: 28rpx;
			flex-grow: 1;
		}

		.listItem {
			padding: 35rpx 40rpx;
			border-bottom: 1px solid $page-color-light;
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;

			.img {
				width: 26rpx;
				margin-left: 10rpx;
			}
		}

		.titleBox {
			.title {
				color: $font-color-base;
				font-size: $font-base;
			}
		}
	}
</style>