LocalLivingServicesUniapp/pages/product/usable.vue

<template>
	<view class="usable">
		<view class="top"></view>
		<view class="head">
			<view class="head_left">
				<span class="cuIcon-back" @click="back"></span>
			</view>
			<view class="case">
				可用时间
			</view>
		</view>
		<view class="content">
			<u-radio-group v-model="value" @change="radioGroupChange"
				style="width: 100%;background-color: #ffffff;padding: 16rpx;border-radius: 16rpx;">
				<view class="title">
					可使用日期
				</view>
				<u-radio @change="radioChange" name="long" style="width: 100%;margin-top: 16rpx;">
					<view class="title now">
						长期有效
					</view>
				</u-radio>
				<u-radio @change="radioChange" name="now"
					style="width: 100%; height:65rpx; display: flex; align-items: center; margin-top: 16rpx;">
					<view class="title now">
						<text>购买后立即生效,生效后</text>
						<input class="input" type="number" v-model="expirationDays" /> 
						<text>天失效</text>
					</view>
				</u-radio>
				<u-radio @change="radioChange" name="date"
					style="width: 100%;margin-top: 16rpx;border-bottom: 1px solid #eeeeee;">
					<view class="title now">
						固定时间段
						<view class="picker" @click="selectDate">
							<u-input class="form-input" placeholder="去设置" inputAlign="right" 
								disabled
								v-model="showDate"
							/>
							<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
						</view>
					</view>
				</u-radio>
			</u-radio-group>
		</view>
		<view class="foot">
			<view class="btn" @click="save">
				保存
			</view>
		</view>
		<rangTime ref="rangTime" :mode="mode" title="选择时间" @onSubmit="onEndTimeChange" />
	</view>
</template>
<script>
import rangTime from '../../components/dengrq-datetime-picker/dateSelector/index.vue'
export default {
	components: {
		rangTime
	},
	data() {
		return {
			expirationDays: '',
			isSelectDate: false,
			selectedTime: {},
			value: 'now',
			mode: 1,
			availableStartDate: '',
			availableEndDate: '',
			showDate: ''
		}
	},
	onLoad(query) {
		if (query.useType) {
			let a = ['now', 'date', 'long']
			this.value = a[query.useType - 1]
		}
	},
	methods: {
		//返回
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			console.log(e);
			if (e == 'date') {
				this.valid = ''
			}
		},
		onEndTimeChange(val) {
			this.availableStartDate = val.startDate
			this.availableEndDate = val.endDate
			this.showDate = val.startDate + ' ~ ' + val.endDate
			this.$forceUpdate(); // 强制刷新视图
		},
		selectDate() {
			// this.isSelectDate = true
			// if (this.value == 'date') {
				this.$refs.rangTime.open()
			// }
		},
		save() {
			console.log(this.value)
			if (this.availableStartDate !== '' && this.availableEndDate !== '') {
				uni.setStorage({
					key: 'smdate',
					data: {
						availableStartDate: this.availableStartDate,
						availableEndDate: this.availableEndDate,
						useType: 2
					}
				})
				this.back()
			} else if (this.expirationDays !== '') {
				uni.setStorage({
					key: 'smdate',
					data: {
						expirationDays: this.expirationDays,
						useType: 1
					}
				})
				this.back()
			} else if (this.value == 'long') {
				uni.setStorage({
					key: 'smdate',
					data: {
						useType: 3
					}
				})
				this.back()
			} else {
				uni.showToast({
					title: this.value == 'date' ? '请选择时间' : '请输入时间',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.usable {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #F7F8FC;

	/*#ifdef APP-PLUS*/
	.top {
		width: 100%;
		height: var(--status-bar-height);
		background-color: #fff;
	}
	/*#endif*/

	.head {
		width: 100%;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.head_left {
			font-size: 40rpx;
		}

		.case {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-size: 36rpx;
			font-weight: 600;
		}
	}

	.content {
		flex: 1;
		padding: 24rpx;

		.form-input {
			pointer-events: none;
		}
		::v-deep .uni-input-input:disabled {
			pointer-events: none;
		}
	}

	.title {
		width: 100%;
		font-weight: 600;
		font-size: 30rpx;
		margin-bottom: 16rpx;
	}

	.now {
		font-weight: normal;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		margin: 0;

		.picker {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 28rpx;
			color: #999999;
		}

		.input {
			flex: 1;
			margin: 0 12rpx;
			text-align: center;
			background-color: #F7F8FC;
		}
	}

	.foot {
		width: 100%;
		height: 112rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx;

		.btn {
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
			border-radius: 75rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.btn {
	width: 80%;
	height: 80rpx;
	background-color: #ccc;
	margin: 0 auto;
	text-align: center;
	line-height: 80rpx;
}

::v-deep .u-radio__label {
	width: 100%;
}
</style>