moxuan_takeaway_user/my/qinglv/orderX.vue

<template>
	<view class="content">
		<!-- 套餐内容 -->
		<view class="neirong">
			<view class="title title1">套餐内容</view>
			<view class="title title2" style="margin-top: 23rpx">
				<view class="cicle"></view>
				<view style="margin-left: 16rpx">创海便利店（二食堂1楼) 13267827921</view>
			</view>
			<view class="xiangnei" v-for="(item, index) in 2" :key="index">例假期每天一杯红糖姜茶 x1</view>
		</view>
		<!-- 例假设置 -->
		<view class="neirong">
			<view class="title title1">例假设置</view>
			<view class="lijia_ques" style="margin-top: 27rpx">您的月经大概持续几天？</view>
			<view class="custom-item">
				<view class="item-label">经期长度</view>
				<view class="item-value">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{ array[index] }}</view>
					</picker>
					<!-- 箭头图标，可使用 uni-app 内置图标或自定义图片 -->
					<uni-icons type="right" color="#808080" />
				</view>
			</view>
			<view class="lijia_ques" style="margin-top: 27rpx">您的月经开始日大概间隔多久？</view>
			<view class="custom-item">
				<view class="item-label">周期长度</view>
				<view class="item-value">
					<picker @change="bindPickerChange2" :value="index2" :range="array2">
						<view class="uni-input">{{ array2[index2] }}</view>
					</picker>
					<!-- 箭头图标，可使用 uni-app 内置图标或自定义图片 -->
					<uni-icons type="right" color="#808080" />
				</view>
			</view>
			<view class="lijia_ques" style="margin-top: 27rpx">您的另一半上一次月经的开始结束时间是什么时候？</view>
			<view class="custom-item">
				<view class="item-label">
					<uni-datetime-picker v-model="datetimerange" :border="false" type="daterange" rangeSeparator="~" />
				</view>
				<view class="item-value">
					<!-- 箭头图标，可使用 uni-app 内置图标或自定义图片 -->
					<uni-icons type="calendar" color="#000000" />
				</view>
			</view>
			<view class="lijia_ques" style="margin-top: 27rpx">下次生理期？</view>
			<view class="custom-item">
				<view class="item-label">
					<uni-datetime-picker v-model="datetimerange" :border="false" type="daterange" rangeSeparator="~" />
				</view>
				<view class="item-value">
					<!-- 箭头图标，可使用 uni-app 内置图标或自定义图片 -->
					<uni-icons type="calendar" color="#000000" />
				</view>
			</view>
			<view style="width: 100%; height: 30rpx"></view>
		</view>
		<!-- 配送信息 -->
		<view class="neirong">
			<view class="title title1">配送信息</view>
			<view class="lijia_ques" style="margin-top: 27rpx">您的另一半姓名</view>
			<view class="custom-item">
				<input class="uni-input" focus type="text" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="lijia_ques" style="margin-top: 27rpx">联系电话</view>
			<view class="custom-item">
				<input class="uni-input" focus type="tel" v-model="phone" placeholder="请输入姓名" />
			</view>
			<view style="width: 100%; height: 52px"></view>
		</view>
		<!-- 提交订单 -->
		<view class="goorder">
			<view class="goorder_but" @click="toSettlement_throttle">提交订单</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			array: ['3天', '4天', '5天', '6天', '7天', '8天', '9天', '10天', '11天', '11天', '13天', '14天', '15天'], //经期长度
			index: 0,
			array2: [
				'17天',
				'18天',
				'19天',
				'20天',
				'21天',
				'22天',
				'23天',
				'24天',
				'25天',
				'26天',
				'27天',
				'28天',
				'29天',
				'30天',
				'31天',
				'32天',
				'33天',
				'34天',
				'35天',
				'36天',
				'37天',
				'38天',
				'39天',
				'40天',
				'41天',
				'42天',
				'43天',
				'44天',
				'45天',
				'46天',
				'47天',
				'48天',
				'49天',
				'50天',
				'51天',
				'52天',
				'53天',
				'54天',
				'55天',
				'56天',
				'57天',
				'58天',
				'59天',
				'60天'
			], //月经周期
			index2: 0,
			datetimerange: [],
			// 配送信息
			name: '',
			phone: ''
		}
	},
	onLoad() {},
	methods: {
		//经期长度
		bindPickerChange: function (e) {
			console.log('picker发送选择改变，携带值为', e.detail.value)
			this.index = e.detail.value
		},
		//月经周期
		bindPickerChange2: function (e) {
			this.index2 = e.detail.value
		},
		toSettlement_throttle() {
			console.log(1)
		}
	}
}
</script>

<style>
.content {
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
}
.title {
	padding: 13rpx 0 0 23rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
}
/* //套餐内容 */
.neirong {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
}
.title1 {
	margin: 14rpx 0 0 19rpx;
}
.cicle {
	margin: 12rpx 0 0 0;
	width: 10rpx;
	height: 10rpx;
	background: #cccccc;
	border-radius: 50%;
}
.title2 {
	display: flex;
	font-size: 28rpx;
}
.xiangnei {
	width: 633rpx;
	display: flex;
	/* 让子元素两端对齐，价格居左，按钮居右 */
	justify-content: space-between;
	/* 垂直方向居中（可选，根据需求调整） */
	margin: 0 0 0 45rpx;
	padding-bottom: 10rpx;
	font-size: 24rpx;
	color: rgba(102, 102, 102, 1);
}
/* 例假设置 */
.lijia_ques {
	margin: 21rpx 0 0 45rpx;
	font-size: 28rpx;
	color: rgba(102, 102, 102, 1);
}
.custom-item {
	margin: 17rpx 0 0 42rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12rpx 16rpx;
	width: 671rpx;
	height: 83rpx;
	opacity: 1;
	border-radius: 130rpx;
	background: rgba(242, 242, 242, 1);
}
.item-label {
	font-size: 28rpx;
	color: rgba(0, 0, 0, 1);
}
.item-value {
	display: flex;
	font-size: 28rpx;
	color: rgba(0, 0, 0, 1);
}
.arrow-icon {
	width: 20px;
	height: 20px;
}
/* 配送信息 */
/* 提交订单 */
.goorder {
	width: 100%;
	padding: 2% 7%;
	position: fixed;
	bottom: 0;
	z-index: 3;
}
.goorder_but {
	width: 626rpx;
	height: 90rpx;
	opacity: 1;
	border-radius: 117rpx;
	background: rgba(241, 135, 49, 1);
	line-height: 90rpx;
	text-align: center;
	font-size: 32rpx;
	color: rgba(255, 255, 255, 1);
}
</style>