tiantian-care-wx/packages/packagesPro/pages/proBuy/proBuy.vue

<template>
	<view class="container">

		<view class="header">
			<text>已选择信息</text>
		</view>
		<view class="box">
			<view class="boxHeader">
				<view class="headerItem">
					<text class="headerItemInfo">{{buyInfo.selectedProject}}</text>
					<text class="headerItemInfo">{{buyInfo.selectArea}}</text>
					<text class="headerItemInfo">{{buyInfo.selectbed}}</text>
				</view>
			</view>
		</view>

		<view class="box">
			<view class="boxHeader">
				<text>陪护天数</text>
			</view>
			<view class="boxContent">
				<view class="boxForm">
					<view class="boxFormItem">
						<view class="boxFormItemLeft">
							开始日期
						</view>
						<view class="boxFormItemRight" @click="showSDate=true">
							<text>{{from_date==""?"请选择开始日期 >":from_date}}</text>
							<u-picker v-model="showSDate" @confirm="toGetDate" mode="time"></u-picker>
						</view>
					</view>
					<view class="boxFormItem">
						<view class="boxFormItemLeft">
							天数
						</view>
						<view class="boxFormItemRight">

							<u-number-box :min="1" :max="100" v-model="days" @change="toChangeDays"></u-number-box>
						</view>
					</view>

					<view class="boxFormItem">
						<view class="boxFormItemLeft">
							结束日期
						</view>
						<view class="boxFormItemRight">
							<text>{{to_date==""?"请选择开始日期 >":to_date}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="boxFooter">
				<view class="btn">下一步</view>
			</view>
		</view>

		<view class="footer">
			<view class="footerLeft">
				<text>预付金额：￥{{selectPrice==0?buyInfo.selectProduct.minPrice:selectPrice}}/ 天</text>
			</view>
			<view class="footerRight" @click="toStep" :class="{footerRightOn:buyInfo.paramedic_id!=''}">
				<text>确认下单</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSDate: false,
				from_date: "",
				to_date: "",
				days: 1,
				buyInfo: {
					"selectArea": "住院部 一楼（51急诊病区）",
					"selectbed": "101-31床",
					"selectbedID": 3348,
					"selectAreaID": 63,
					"selectSex": {
						"sex": 0,
						"isChecked": true,
						"selectImg": "/static/resource/icon/icon_boy_on.png",
						"img": "/static/resource/icon/icon_boy.png",
						"text": "男"
					},
					"selectFactors": [{
						"id": 5,
						"factor_item_id": 18
					}, {
						"id": 6,
						"factor_item_id": 25
					}, {
						"id": 18,
						"factor_item_id": 107
					}],
					"selectProduct": {
						"id": 3,
						"name": "院内陪护",
						"minPrice": "100.00",
						"maxPrice": 440
					},
					"selectProjectID": 3,
					"selectedProject": "五金中医院",
					"paramedic_id": ""
				}

			}
		},
		onShareAppMessage() {},
		onLoad() {

		},
		onReady() {},
		onHide() {},
		methods: {
			toGetDate(e) {
				this.from_date = e.year + "-" + e.month + "-" + e.day

				this.to_date = this.$moment(this.from_date).add(this.days-1, 'd').format("YYYY-MM-DD");
			},
			toChangeDays(){
				this.to_date = this.$moment(this.from_date).add(this.days-1, 'd').format("YYYY-MM-DD");
				
			}
		}
	}
</script>

<style>
	view {
		box-sizing: border-box;
	}

	.container {
		background-color: rgb(231, 245, 244) !important;
		height: 100vh;
		overflow: hidden;
		padding: 30rpx;
	}

	.header {
		font-weight: 300;
		font-size: 32rpx;
		color: #303233;
	}

	.box {
		background: #fff;
		width: 100%;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 30rpx auto;
		padding: 43rpx 20rpx;
	}

	.boxContent {}

	.headerItem {
		display: flex;
		flex-wrap: wrap;
	}

	text.headerItemInfo {
		background: #E7F5F4;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		padding: 10rpx 20rpx;
		margin-right: 10rpx;
		margin-bottom: 20rpx;
		font-size: 32rpx;
		color: #303233;
	}

	.footer {
		width: 750rpx;
		height: 92rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
	}

	.footerLeft {
		width: 60%;
		line-height: 92rpx;
		font-weight: 600;
		font-size: 30rpx;
		color: #F7723F;
		padding: 0rpx 67rpx;
	}

	.footerRight {
		width: 40%;
		height: 100%;
		line-height: 92rpx;
		text-align: center;
		background: #ccc;
		color: #fff;
	}

	.footerRightOn {
		background: linear-gradient(90deg, #0ee2ba, #0CC7A4);
	}

	.boxForm {
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
	}

	.boxFormItem {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		font-size: 28rpx;
	}

	.boxFormItemRight {
		font-size: 24rpx;

	}

	.boxHeader {
		font-size: 32rpx;
		color: #303233;
	}

	.btn {
		width: 347rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #0ee2ba, #67F7DC);
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		line-height: 72rpx;
		text-align: center;
		color: #fff;
		font-weight: 300;
		font-size: 26rpx;
		margin: 20rpx auto;
	}
</style>