|
|
<template>
|
|
|
<view>
|
|
|
<cpn-navbar title="预约护理" :is-back="true"></cpn-navbar>
|
|
|
|
|
|
<view style="padding-bottom: 40rpx;">
|
|
|
<!-- 用户信息 -->
|
|
|
<view class="user-info" v-if="vuex_selected_customer">
|
|
|
<view class="top">
|
|
|
<view class="left">
|
|
|
<u-image :src="vuex_selected_customer.sex === '男' ? vuex_male_img : vuex_female_img" width="104"
|
|
|
height="104" shape="circle"></u-image>
|
|
|
</view>
|
|
|
<view class="center">
|
|
|
<view class="name">{{vuex_selected_customer.name}}</view>
|
|
|
<view class="infos">
|
|
|
<view class="age">{{ageComputed(vuex_selected_customer.idcard)}}岁
|
|
|
</view>
|
|
|
<view class="sex">{{vuex_selected_customer.sex}}</view>
|
|
|
<view class="organ">机构护理</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<template v-if="vuex_selected_customer.status === 1">
|
|
|
<view class="icon1"></view>
|
|
|
<view>正常</view>
|
|
|
</template>
|
|
|
<template v-if="vuex_selected_customer.status === 2">
|
|
|
<view class="icon3"></view>
|
|
|
<view>暂停</view>
|
|
|
</template>
|
|
|
<template v-if="vuex_selected_customer.status === 3">
|
|
|
<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>委托人：{{vuex_selected_customer.contact_name}}</view>
|
|
|
</view>
|
|
|
<view class="address">
|
|
|
<u-icon name="map" width="28" height="28" color="#1479FF"></u-icon>
|
|
|
<view>{{ customerAddress(vuex_selected_customer.customer_address) }}</view>
|
|
|
</view>
|
|
|
<view class="phone">
|
|
|
<u-icon name="phone" width="28" height="28" color="#1479FF"></u-icon>
|
|
|
<view>{{vuex_selected_customer.phone}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 护理项目-->
|
|
|
<view class="sku-list">
|
|
|
<view class="title">
|
|
|
项目选择
|
|
|
</view>
|
|
|
|
|
|
<view class="line"></view>
|
|
|
|
|
|
<view class="sku-content">
|
|
|
<view class="sku-content__item"
|
|
|
:class="{ 'sku-content__item-active': form.schedule_list_skus.find(i => i.sku_id === item.id) }"
|
|
|
v-for="item in mySkus"
|
|
|
:key="item.id"
|
|
|
@click="skuPick(item)">
|
|
|
<view style="font-weight: 600;">{{ item.name }}</view>
|
|
|
<view style="transform: scale(.8,.8)">{{ productType === 2 ? item.time_lenth + '分钟' : item.worth + '工时' }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 服务时间-->
|
|
|
<view class="service-time">
|
|
|
<view class="title">
|
|
|
时间选择
|
|
|
</view>
|
|
|
|
|
|
<view class="line"></view>
|
|
|
|
|
|
<view class="time-content" @click="showTimePicker = true">
|
|
|
<view>
|
|
|
<span>预约时间</span><span style="color: red;">*</span>
|
|
|
<view style="margin-top: 10rpx;">
|
|
|
<u-tag mode="dark" type="primary" v-if="form.start_time && form.end_time" :text="`${$moment(form.start_time).format('YYYY-MM-DD HH:mm')} ~ ${$moment(form.end_time).format('HH:mm')}`"></u-tag>
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" label="请选择" label-pos="left"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 地址选择-->
|
|
|
<view class="address-select">
|
|
|
<view class="title">
|
|
|
上门地址
|
|
|
</view>
|
|
|
|
|
|
<view class="line"></view>
|
|
|
|
|
|
<view class="address-content" @click="showAddressSelect = true">
|
|
|
<view>
|
|
|
<span>地址选择</span><span style="color: red;">*</span>
|
|
|
<view style="margin-top: 10rpx;">
|
|
|
<u-tag mode="dark" type="primary" v-if="form.address && form.address_id" :text="form.address"></u-tag>
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" label="请选择" label-pos="left"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<u-button :custom-style="{ 'margin': '40rpx 20rpx' }" type="primary" :ripple="true" @click="submit">提交预约</u-button>
|
|
|
</view>
|
|
|
|
|
|
<u-picker :title="pickerType === 1 ? '开始时间' : '结束时间'"
|
|
|
mode="time"
|
|
|
v-model="showTimePicker"
|
|
|
:params="params"
|
|
|
@confirm="confirm"></u-picker>
|
|
|
<u-select v-model="showAddressSelect" :list="vuex_selected_customer.customer_address" value-name="id" label-name="address" @confirm="pickAddress"></u-select>
|
|
|
<u-toast ref="uToast" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getAgeByIdcard } from "@/common/util";
|
|
|
import {isNum} from "@/uview-ui/components/u-avatar-cropper/weCropper";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
showAddressSelect: false,
|
|
|
pickerType: 1,//1开始，2结束
|
|
|
showTimePicker: false,
|
|
|
form: {
|
|
|
schedule_list_skus: [],
|
|
|
customer_id: '',
|
|
|
product_id: '',
|
|
|
order_id: '',
|
|
|
address_id: '',
|
|
|
address: '',
|
|
|
start_time: '',
|
|
|
end_time: ''
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
serviceTime () {
|
|
|
|
|
|
},
|
|
|
|
|
|
customerAddress () {
|
|
|
return function (addresses) {
|
|
|
return addresses.find(i => i.default)?.address || addresses[0]?.address || '无'
|
|
|
}
|
|
|
},
|
|
|
ageComputed() {
|
|
|
return function(idcard) {
|
|
|
return getAgeByIdcard(idcard)
|
|
|
}
|
|
|
},
|
|
|
mySkus () {
|
|
|
const orderSku = this.getOrder()?.product?.skus || []
|
|
|
return this.vuex_user.nurse_sku_links.map(i => i.sku).filter(i => orderSku.find(j => j.id === i.id))
|
|
|
},
|
|
|
params () {
|
|
|
return this.pickerType === 1 ? {
|
|
|
year: true,
|
|
|
month: true,
|
|
|
day: true,
|
|
|
hour: true,
|
|
|
minute: true,
|
|
|
second: false,
|
|
|
timestamp: true
|
|
|
} : {
|
|
|
year: false,
|
|
|
month: false,
|
|
|
day: false,
|
|
|
hour: true,
|
|
|
minute: true,
|
|
|
second: false,
|
|
|
timestamp: true
|
|
|
}
|
|
|
},
|
|
|
|
|
|
productType () {
|
|
|
//1为价值 2为时长
|
|
|
return this.getOrder().product?.demand
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
skuPick (item) {
|
|
|
if (this.productType === 1) {
|
|
|
this.form.schedule_list_skus = [{ sku_id: item.id }]
|
|
|
} else {
|
|
|
const findSku = this.form.schedule_list_skus.find(i => i.sku_id === item.id)
|
|
|
if (findSku) {
|
|
|
this.form.schedule_list_skus.splice(this.form.schedule_list_skus.indexOf(findSku),1)
|
|
|
} else {
|
|
|
this.form.schedule_list_skus.push({
|
|
|
sku_id: item.id
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
getOrder () {
|
|
|
if (this.vuex_selected_customer.orders.length === 1) {
|
|
|
return this.vuex_selected_customer.orders[0]
|
|
|
} else if (this.vuex_selected_customer.orders.length > 1) {
|
|
|
return this.vuex_selected_customer.orders.find(i => {
|
|
|
let now = this.$moment().valueOf()
|
|
|
return (this.$moment(i.start_date).valueOf() <= now) && (this.$moment(i.end_date).valueOf() >= now)
|
|
|
})
|
|
|
} else {
|
|
|
return {}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
confirm (time) {
|
|
|
console.log(time)
|
|
|
if (this.pickerType === 1) {
|
|
|
this.form.start_time = this.$moment(time.timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')
|
|
|
} else {
|
|
|
this.form.end_time = `${this.$moment(this.form.start_time).format('YYYY-MM-DD')} ${this.$moment(time.timestamp * 1000).format('HH:mm:ss')}`
|
|
|
}
|
|
|
this.pickerType = this.pickerType === 1 ? 2 : 1
|
|
|
|
|
|
if (this.pickerType === 2) {
|
|
|
setTimeout(() => this.showTimePicker = true,500)
|
|
|
}
|
|
|
|
|
|
console.log(this.form)
|
|
|
},
|
|
|
|
|
|
pickAddress (e) {
|
|
|
this.form.address = e[0].label;
|
|
|
this.form.address_id = e[0].value;
|
|
|
},
|
|
|
|
|
|
submit () {
|
|
|
if (this.vuex_selected_customer.status !== 1) {
|
|
|
this.$refs.uToast.show({
|
|
|
title: '用户状态不为正常',
|
|
|
type: 'warning'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
if (!(this.form.start_time && this.form.end_time)) {
|
|
|
this.$refs.uToast.show({
|
|
|
title: '请选择预约时间',
|
|
|
type: 'warning'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
if (!(this.form.address && this.form.address_id)) {
|
|
|
this.$refs.uToast.show({
|
|
|
title: '请选择上门地址',
|
|
|
type: 'warning'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
if (!(this.form.schedule_list_skus instanceof Array) || this.form.schedule_list_skus.length === 0) {
|
|
|
this.$refs.uToast.show({
|
|
|
title: '请选择一项服务内容',
|
|
|
type: 'warning'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
|
|
|
const order = this.getOrder()
|
|
|
if (order.id && order.product_id) {
|
|
|
this.form.order_id = order.id
|
|
|
this.form.product_id = order.product_id
|
|
|
this.form.customer_id = this.vuex_selected_customer.id
|
|
|
this.$u.api.scheduleSave(this.form).then(res => {
|
|
|
this.$refs.uToast.show({
|
|
|
title: '预约成功',
|
|
|
type: 'success'
|
|
|
})
|
|
|
setTimeout(() => {
|
|
|
uni.navigateBack()
|
|
|
},2000)
|
|
|
})
|
|
|
} else {
|
|
|
this.$refs.uToast.show({
|
|
|
title: '无效订单',
|
|
|
type: 'warning'
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
},
|
|
|
mounted() {
|
|
|
if (this.productType === 2) {
|
|
|
this.form.schedule_list_skus = this.mySkus.map(i => ({ sku_id: i.id }))
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.line {
|
|
|
width: 670rpx;
|
|
|
height: 2rpx;
|
|
|
border: 2rpx solid #EEEFF5;
|
|
|
|
|
|
margin: 30rpx auto 0 auto;
|
|
|
}
|
|
|
.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-weight: 500;
|
|
|
color: #333333;
|
|
|
line-height: 24rpx;
|
|
|
}
|
|
|
|
|
|
.infos {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
padding-top: 20rpx;
|
|
|
|
|
|
.age {
|
|
|
height: 34rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 500;
|
|
|
color: #A7AFBC;
|
|
|
line-height: 34rpx;
|
|
|
}
|
|
|
|
|
|
.sex {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
background: #FDECEC;
|
|
|
opacity: 0.5;
|
|
|
font-size: 28rpx;
|
|
|
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-weight: 500;
|
|
|
color: #36596A;
|
|
|
line-height: 40rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
padding-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
|
|
|
padding: 26rpx 0 34rpx 24rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.bottom-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 28rpx;
|
|
|
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-weight: 500;
|
|
|
color: #A7AFBC;
|
|
|
line-height: 34rpx;
|
|
|
|
|
|
padding-right: 8rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.sku-list {
|
|
|
width: 710rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
|
|
|
|
|
|
margin: 40rpx auto 0 auto;
|
|
|
padding: 20rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.title {
|
|
|
color: #3877f6;
|
|
|
font-size: 34rpx;
|
|
|
font-weight: 600;
|
|
|
line-height: 2;
|
|
|
}
|
|
|
|
|
|
.line {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.sku-content {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
grid-gap: 40rpx;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
&__item {
|
|
|
color: #333;
|
|
|
border-radius: 10rpx;
|
|
|
border: 2rpx #ccc solid;
|
|
|
text-align: center;
|
|
|
transition: all .2s;
|
|
|
|
|
|
padding: 20rpx 0;
|
|
|
|
|
|
&-active {
|
|
|
color: #fff;
|
|
|
background: #3877f6;
|
|
|
border-color: #5086f5;
|
|
|
filter: drop-shadow(0 0 10rpx #5086f5);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.service-time {
|
|
|
width: 710rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
|
|
|
|
|
|
margin: 40rpx auto 0 auto;
|
|
|
padding: 20rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.title {
|
|
|
color: #3877f6;
|
|
|
font-size: 34rpx;
|
|
|
font-weight: 600;
|
|
|
line-height: 2;
|
|
|
}
|
|
|
.line {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
.time-content {
|
|
|
display: flex;
|
|
|
align-content: center;
|
|
|
justify-content: space-between;
|
|
|
text-indent: 10rpx;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
& > view {
|
|
|
font-weight: 600;
|
|
|
letter-spacing: 2rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.address-select {
|
|
|
width: 710rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
|
|
|
|
|
|
margin: 40rpx auto 0 auto;
|
|
|
padding: 20rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.title {
|
|
|
color: #3877f6;
|
|
|
font-size: 34rpx;
|
|
|
font-weight: 600;
|
|
|
line-height: 2;
|
|
|
}
|
|
|
.line {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
.address-content {
|
|
|
display: flex;
|
|
|
align-content: center;
|
|
|
justify-content: space-between;
|
|
|
text-indent: 10rpx;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
& > view {
|
|
|
font-weight: 600;
|
|
|
letter-spacing: 2rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
