sishitongtang-worker/pages/detailNursing/detailNursing.vue

<template>
	<view>
		<cpn-navbar title="护理详情" :isBack="true"></cpn-navbar>

		<view>
			<!-- 用户信息 -->
			<view class="user-info" v-if="detail.customer">
				<view class="top">
					<view class="left">
						<u-image src="/static/logo.png" width="104" height="104" shape="circle"></u-image>
					</view>
					<view class="center">
						<view class="name">{{detail.customer.name}}</view>
						<view class="infos">
							<view class="age">{{ageComputed(detail.customer.birthday)}}岁
							</view>
							<view class="sex">{{detail.customer.sex}}</view>
							<view class="organ">机构护理</view>
						</view>
					</view>
					<view class="right">
						<template v-if="detail.status === 0">
							<view class="icon1"></view>
							<view>待护理</view>
						</template>
						<template v-if="detail.status === 1">
							<view class="icon3"></view>
							<view>进行中</view>
						</template>
						<template v-if="detail.status === 2">
							<view class="icon2"></view>
							<view>已完成</view>
						</template>
					</view>
				</view>

				<view class="line"></view>

				<view class="bottom">
					<view class="client">
						<u-icon name="/static/detail/people.png" width="26" height="26"></u-icon>
						<view>委托人：{{detail.customer.contact_name}}</view>
					</view>
					<view class="address">
						<u-icon name="map" width="28" height="28" color="#1479FF"></u-icon>
						<view>{{ addressFormat(detail.customer.customer_address) }}</view>
					</view>
					<view class="phone">
						<u-icon name="phone" width="28" height="28" color="#1479FF"></u-icon>
						<view>{{detail.customer.phone}}</view>
					</view>
				</view>
				<view class="re-location">
					<view class="text">更新定位</view>
					<u-image src="/static/detail/distance.png" height="34" width="34"></u-image>
				</view>
			</view>

			<!-- 今日护理 -->
			<view class="today-nursing">
				<view class="title">
					今日护理
				</view>

				<view class="line"></view>

				<view class="content">
					<view class="content-item" v-for="(item,index) in detail.product.product_skus" :key='item.id'>
						<view class="checkbox">
							<u-checkbox v-model="form[index].isSelect" shape="circle"></u-checkbox>
							<view>{{item.sku.name}}</view>
						</view>
						<view class="input">
							<u-input v-model="form[index].time" :custom-style="inputStyle" placeholder="请输入"
								placeholder-style="color:#A7AFBC;" input-align="center" :clearable="false" type="number"
								height="40">
							</u-input>
							<view>分钟</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 打卡 -->
			<view class="clock">
				<view class="btn" :class="{'btn-active':isClick && type === 1}" @click="punch">
					<view class="text1">过程打卡</view>
					<view class="text2">（1）</view>
				</view>
				<view class="btn" :class="{'btn-active':isClick && type === 2}" @click="locate">
					<view class="text1">更新定位</view>
					<view class="text2">{{$u.timeFormat(time,'hh:MM:ss')}}</view>
				</view>
			</view>

			<!-- 打卡信息 -->
			<view class="clock-info" v-if="location.lat && location.lng && location.time">
				定位时间：{{$u.timeFormat(location.time,'hh:MM:ss')}} {{location.address}}
			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '@/libs/qqmap-wx-jssdk.js'

	export default {
		data() {
			return {
				isClick: false,
				type: '',
				qqmapsdk: null,
				inputStyle: {
					fontSize: "24rpx",
					color: "#36596A",
					width: "140rpx",
					background: "#F9F9F9"
				},
				btnStyle: {
					width: '100rpx',
					height: '100rpx',
					borderRadius: '100%',
					background: 'blue'
				},
				form: [],
				detail: {},
				time: new Date(),
				location: {
					lng: '',
					lat: '',
					time: '',
					address: ''
				}
			}
		},
		methods: {
			load() {
				this.qqmapsdk = new QQMapWX({
					key: 'D5EBZ-C3BWP-HZIDG-VO6BE-P2MN5-ESFZO'
				});
			},

			async getDeatil(id) {
				let res = await this.$u.api.nurseDetail({
					id
				})
				this.detail = res
				this.form = res.product.product_skus.map(item => {
					return {
						isSelect: false,
						sku_id: item.id,
						time: ''
					}
				})
			},

			save(type) {
				this.$u.api.nurseSave({
					id: this.detail.id,
					sku_time_list: this.form.filter(item => {
						return item.isSelect
					}),
					logs: [{
						lat: this.location.lat,
						lng: this.location.lng,
						address: this.location.address,
						type
					}]
				}).then(res => {
					if (type === 1) {
						uni.showToast({
							icon: 'success',
							title: '打卡成功'
						})
					}
					if (type === 2) {
						uni.showToast({
							icon: 'success',
							title: '更新定位成功'
						})
					}
				})
			},
			punch() {
				this.$u.throttle(() => {
					this.type = 1
					this.isClick = true
					this.save(1)
					setTimeout(() => {
						this.isClick = false
					}, 10000)
				}, 10000)

			},
			//更新定位
			locate() {
				this.$u.throttle(() => {
					this.type = 2
					this.isClick = true
					setTimeout(() => {
						this.isClick = false
					}, 10000)
					uni.getLocation().then(res => {
						this.location.lat = res[1]?.latitude
						this.location.lng = res[1]?.longitude
						this.location.time = this.time

						new Promise((reject, resolve) => {
							this.qqmapsdk.reverseGeocoder({
								location: {
									latitude: this.location.lat,
									longitude: this.location.lng
								},
								success: (r) => {
									reject(r)
								}
							})
						}).then(res => {
							this.location.address = res.result.address

							this.save(2)
						})
					})
				}, 10000)
			},
		},
		computed: {
			ageComputed() {
				return function(birth) {
					return new Date().getFullYear() - new Date(birth).getFullYear()
				}
			},
			addressFormat() {
				return function(addresses) {
					return addresses.filter(item => {
						item.default === 1
					})[0]?.address || addresses[0]?.address || '无'
				}
			}
		},
		onLoad(option) {
			this.load()

			this.getDeatil(option.id)

			setInterval(() => {
				this.time = new Date()
			}, 1000)
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-checkbox {
		display: inline !important;
	}

	.user-info {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

		margin: 40rpx auto 0 auto;
		position: relative;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			padding-top: 34rpx;
			padding-bottom: 30rpx;

			.left {
				padding-left: 20rpx;
			}

			.center {
				flex: 1;

				padding-left: 24rpx;

				.name {
					height: 48rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
					line-height: 24rpx;
				}

				.infos {
					display: flex;
					align-items: center;

					padding-top: 20rpx;

					.age {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #A7AFBC;
						line-height: 34rpx;
					}

					.sex {
						width: 40rpx;
						height: 40rpx;
						background: #FDECEC;
						opacity: 0.5;
						font-size: 28rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #36596A;
						text-align: center;
						line-height: 40rpx;

						margin-left: 20rpx;
					}

					.organ {
						width: 140rpx;
						height: 40rpx;
						background: #F9F9F9;
						font-size: 28rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #36596A;
						line-height: 40rpx;
						text-align: center;

						margin-left: 20rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				padding-right: 20rpx;
			}
		}

		.line {
			width: 670rpx;
			height: 2rpx;
			border: 2rpx solid #EEEFF5;

			margin: 30rpx auto 0 auto;
		}

		.bottom {

			padding: 26rpx 0 34rpx 24rpx;
			position: relative;

			.bottom-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #36596A;

				&>view {
					padding-left: 16rpx;
				}
			}

			.client {
				@extend .bottom-item;
			}

			.address {
				@extend .bottom-item;

				padding-top: 18rpx;
			}

			.phone {
				@extend .bottom-item;

				padding-top: 18rpx;
			}
		}

		.re-location {
			display: flex;
			align-items: center;

			position: absolute;
			bottom: 36rpx;
			right: 20rpx;

			.text {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #A7AFBC;
				line-height: 34rpx;

				padding-right: 8rpx;
			}
		}
	}

	.today-nursing {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

		margin: 20rpx auto 0 auto;

		.title {
			font-size: 32rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #333333;


			padding: 24rpx 20rpx;
		}

		.line {
			width: 670rpx;
			height: 2rpx;
			border: 2rpx solid #EEEFF5;

			margin: 0 auto;
		}

		.content {

			padding: 14rpx 20rpx 24rpx 20rpx;

			.content-item {
				height: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.checkbox {
					display: flex;
					align-items: center;

					&>view {
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #36596A;
						line-height: 40rpx;

						padding-left: 16rpx;
					}
				}

				.input {
					display: flex;
					align-items: center;

					&>view {
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #36596A;
						line-height: 40rpx;

						padding-left: 20rpx;
					}
				}
			}
		}
	}

	.clock {
		display: flex;
		justify-content: space-evenly;

		margin-top: 48rpx;

		.btn {
			width: 190rpx;
			height: 190rpx;
			background: #1479FF;
			border-radius: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			position: relative;

			&::before {
				content: '';
				height: 220rpx;
				width: 220rpx;
				border-radius: 100%;
				background-color: rgba(20, 121, 255, 0.15);

				position: absolute;
				top: calc(50% - 110rpx);
				left: calc(50% - 110rpx);
			}

			.text-class {
				height: 46rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 46rpx;
			}

			.text1 {
				@extend .text-class;
			}

			.text2 {
				@extend .text-class;
			}

			&-active {

				&::after {
					content: '';
					width: 80rpx;
					height: 80rpx;
					background: rgba(180, 180, 180, 0.5);
					border-radius: 100%;
					animation: ripper 270ms linear forwards;

					position: absolute;
					top: calc(50% - 40rpx);
					left: calc(50% - 40rpx);
				}

				@keyframes ripper {
					from {
						opacity: 0.8;
					}

					to {
						opacity: 0.1;
						transform: scale(2.6, 2.6);
					}
				}
			}
		}
	}

	.clock-info {
		width: 650rpx;
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #36596A;
		line-height: 40rpx;

		margin: 46rpx auto;
	}
</style>