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="now"
					style="width: 100%;height:65rpx; flex;align-items: center;border-bottom: 1px solid #eeeeee;">
					<view class="title now">
						购买后立即生效,有效时间
						<input type="number" style="background-color:#F7F8FC ;" v-model="expirationDays" /> 天
					</view>
				</u-radio>
				<u-radio @change="radioChange" name="date" style="width: 100%;margin-top: 16rpx;">
					<view class="title now">
						指定消费日期
						<view class="picker">
							<u-input placeholder="去设置" v-model="showDate" @click="selectDate" />
							<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" @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: ''
			}
		},
		methods: {
			//返回
			back() {
				console.log('1111')
				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() {
				if (this.availableStartDate !== '' && this.availableEndDate !== '') {
					uni.setStorage({
						key: 'smdate',
						data: {
							availableStartDate: this.availableStartDate,
							availableEndDate: this.availableEndDate
						}
					})
						this.back()
				} else if (this.expirationDays !== '') {
					uni.setStorage({
						key: 'smdate',
						data: {
							expirationDays: this.expirationDays
						}
					})
						this.back()
				} else {
					uni.showToast({
						title: '选择售卖时间',
						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;

		}

		.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;

				/deep/.u-input {
					text-align: right !important;
				}
			}

			input {
				width: 100rpx;
			}
		}

		.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;
	}

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