LocalLivingServicesUniapp/pages/product/usable.vue

<template>
	<view class="usable">
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				可用时间
			</view>
		</view>
	<view class="content">
		<u-radio-group v-model="value" @change="radioGroupChange" style="width: 100%;">
			<view class="title">
				可使用日期
			</view>
			<u-radio @change="radioChange"  name="now" style="width: 100%;">
				<view class="title now">
					购买后立即生效,有效时间
					<input type="number" v-model="valid" /> 天
				</view>
			</u-radio>
			<u-radio @change="radioChange" name="date" style="width: 100%;">
				<view class="title now">
					指定消费日期
					<view class="" @click="isSelectDate = true">
						{{ Object.keys(selectedTime).length === 0 ?'去选择':selectedTime.startTime+'--'+selectedTime.endTime}}
					</view>
				</view>
			</u-radio>
		</u-radio-group>
	</view>
		<view class="btn">
			保存
		</view>
		<selectDate @confirm="handleConfirm" @close="closeSelectDate" v-if="isSelectDate" />
	</view>
</template>
<script>
	import selectDate from '@/components/product/select_date.vue'
	export default {
		components: {
			selectDate
		},
		data() {
			return {
				valid: '',
				isSelectDate: false,
				selectedTime: {},
				value: 'now'
			}
		},
		methods: {
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 处理 confirm 事件，接收子组件传递的时间段数据
			handleConfirm(time) {
				this.selectedTime = time; // 保存时间段数据
				this.isSelectDate = false
				console.log(this.selectedTime)
			},
			//隐藏弹窗
			closeSelectDate() {
				this.isSelectDate = false
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				
				console.log(e);
				if(e=='date'){
					this.valid = ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.usable {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 20rpx;
		.head {
			width: 100%;
			height: auto;
			padding: 20rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			position: relative;

			.cuIcon-back {
				font-size: 40rpx;
				margin-right: 40rpx;
			}
		}
		.content{
			flex: 1;
		}
		.title {
			width: 100%;
			height: 80rpx;
			font-weight: 600;
			line-height: 80rpx;
			border-bottom: 1px solid #ccc;
			padding: 0rpx 20rpx;
		}

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

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

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