tiantian-care-wx/packages/packagesPro/pages/proService/index.vue

<template>
	<view class="container">
		<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 class="headerPrice">
					<text>服务金额</text>
					<text class="headerPriceInfo">￥{{buyInfo.selectProduct.minPrice}}起</text>
				</view>
			</view>

			<view class="boxContent">
				<view class="boxTitle">当日预定
				</view>
				<view class="boxContentList">
					<view class="boxItem"   :class="{ boxItem_on: mod.isChecked}"  @click="toChange" data-type="t" :data-item="mod" :data-index="index"
						v-for="(mod,index) in list.t" :key="index">
						<view class="boxItemLeft">
							<image style="width: 149rpx;height: 149rpx;border-radius: 149rpx;" :src="mod.avatar_url">
						</view>

						<view class="boxItemRight">
							<view class="boxItemRight_r">
								<view>
									<text>{{mod.name}}</text>
									<text style="color: #F7723F;">￥{{mod.price}}/天</text>
								</view>
								<view>
									<text style="font-size: 24rpx;color: #696766;">{{mod.age}}岁</text>
								</view>
								<view>
									<text style="font-size: 24rpx;color: #696766;">{{mod.work_years}}年护理经验</text>
									<text></text>
								</view>
							</view>
							<view class="boxItemRight_l">
								<checkbox style="transform:scale(0.8)" activeBackgroundColor="#0EE2BA"
									backgroundColor="#FFFFFF"  :checked="mod.isChecked"/>
							</view>
						</view>
					</view>


				</view>
				<view class="boxTitle">明日预定
				</view>
				<view class="boxContentList">
					<view class="boxItem" :class="{ boxItem_on: mod.isChecked}" @click="toChange" :data-item="mod" :data-index="index" data-type="n"
						v-for="(mod,index) in list.n" :key="index">
						<view class="boxItemLeft">
							<image style="width: 149rpx;height: 149rpx;border-radius: 149rpx;" :src="mod.avatar_url">
						</view>

						<view class="boxItemRight">
							<view class="boxItemRight_r">
								<view>
									<text>{{mod.name}}</text>
									<text style="color: #F7723F;">￥{{mod.price}}/天</text>
								</view>
								<view>
									<text style="font-size: 24rpx;color: #696766;">{{mod.age}}岁</text>
								</view>
								<view>
									<text style="font-size: 24rpx;color: #696766;">{{mod.work_years}}年护理经验</text>
									<text></text>
								</view>
							</view>
							<view class="boxItemRight_l">
								<checkbox style="transform:scale(0.8)" activeBackgroundColor="#0EE2BA"
									backgroundColor="#FFFFFF" :checked="mod.isChecked" />
							</view>
						</view>
					</view>


				</view>

			</view>
		</view>
		<view class="footer">
			<view class="footerLeft">
				<text>单价：￥180/ 天</text>
			</view>
			<view class="footerRight">
				<text>继续</text>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "../../../../utils/util.js";
	export default {
		data() {
			return {
				loading: true,
				list: {
					t: [],
					n: []
				},
				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": "五金中医院"
				}
			}
		},
		onShareAppMessage() {},
		onLoad() {
			this.loadParamedics("t");
			this.loadParamedics("n");
		},
		onReady() {},
		onHide() {},
		methods: {
			toChange(t) {
				var i = t.currentTarget.dataset.index;
				var type = t.currentTarget.dataset.type;
				for(var mod of this.list.t){
					mod.isChecked=false;
				}
				for(var mod of this.list.n){
					mod.isChecked=false;
				}
				this.list[type][i].isChecked=true;
				this.$forceUpdate()
			},
			loadParamedics: function(x) {
				var that = this;
				var t = this.$moment().format('YYYY-MM-DD');
				var n = this.$moment().add(1, 'd').format('YYYY-MM-DD');
				var d = (x == "t" ? t : n);
				util.request({
					api: 'customer/get-available-paramedics',
					data: {
						bed_id: that.buyInfo.selectbedID,
						sex: that.buyInfo.selectSex,
						start_date: d,
						factors: that.buyInfo.selectFactors
					},
					utilSuccess: function(data) {

						that.list[x] = data[d]
						that.loading = false;
					},
					utilFail: function(t) {
						util.alert(t);
					}
				});
			},

		}
	}
</script>

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

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

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

	.boxContent {

		overflow-y: auto;
		height: 65vh;
		padding: 4rpx;
		margin-top: 20rpx;
	}

	.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%;
		background: linear-gradient(90deg, #0ee2ba, #0CC7A4);
		height: 100%;
		line-height: 92rpx;
		text-align: center;
		color: #fff;
	}

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

	.headerPriceInfo {
		color: #F7723F;
		margin-left: 20rpx;
	}

	.boxItem {
		background: #FFFFFF;
		box-shadow: 2rpx 0rpx 20rpx 0rpx #56626D;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 3rpx solid #FFFFFF;
		padding: 20rpx 15rpx;
		display: flex;
		width: 100%;
		margin-bottom: 30rpx;
	}

	.boxItem_on {
		border: 3rpx solid #0EE2BA !important;
		box-shadow: 3rpx 0rpx 20rpx 0rpx #16A78C !important;
	}

	.boxContentList {
		display: flex;
		flex-direction: column;
	}

	.boxItemRight {
		display: flex;
		flex: 1;
		margin-left: 21rpx;
	}

	.boxItemRight_r {
		display: flex;
		width: 75%;
		flex-direction: column;
		justify-content: space-around;
	}

	.boxItemRight_r view {
		display: flex;
		width: 100%;
		justify-content: space-between;
		font-weight: 300;
		font-size: 26rpx;
		color: #303233;
	}

	.boxItemRight_l {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 30%;
	}

	.boxTitle {
		font-size: 32rpx;
		color: #303233;
		margin: 30rpx 0rpx;
	}
</style>