moxuan_takeaway_user/pages/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
			},
		},
	}
</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>