<template>
|
<!-- 确认服务单 -->
|
<view>
|
<view class="header flex align-center">
|
<image class="header-img" :src="memberInfo.photo?memberInfo.photo:'../../static/images/default-avatar.png'"></image>
|
<view class="ml-10">
|
<view class="font-16">
|
<text>{{memberInfo.vipName}}</text>
|
<text class="ml-20">{{memberInfo.phone}}</text>
|
</view>
|
<text class="font-14 gray mt-5">{{memberInfo.vipLevel || '-'}}</text>
|
</view>
|
</view>
|
<view class="font-16 content">
|
<view class="content-row flex align-center justify-between">
|
<text>预约时间</text>
|
<text class="gray" @click="showTime()">{{yyTime || '请选择预约时间'}}</text>
|
</view>
|
<date-time-picker ref='date-time' :startDate="startDate" type='datetime' @change='dateTimeChange'></date-time-picker>
|
<view class="content-row flex align-center justify-between">
|
<text>预约技师</text>
|
<view class="blue">
|
<picker mode="selector" range-key="name" :range="employeeList" @change="employeeChange">
|
<view>
|
<text v-if="curEmployee.name">{{curEmployee.name}}</text>
|
<text v-else class="gray">请选择美疗师</text>
|
<text class="iconfont iconjiantouarrow486 ml-5"></text>
|
</view>
|
</picker>
|
</view>
|
</view>
|
</view>
|
<view class="content">
|
<view class="content-row flex align-center" v-for="item in list">
|
<image class="product-img" :src="item.img?item.img:'../../static/images/no-img.png'" mode="aspectFill"></image>
|
<view class="flex justify-between align-center flex-1 ml-10">
|
<view class="flex flex-v">
|
<text class="font-14">{{item.name}}</text>
|
<text class="font-12 gray mt-5">时长: {{item.timeLength}}分钟</text>
|
<text class="font-12 gray">有效期至: {{item.invalidTime || '-'}}</text>
|
</view>
|
<view>
|
<text class="font-16">×{{item.num}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="content-row right">
|
<text class="font-16 blue">共{{totalCount}}项服务</text>
|
</view>
|
</view>
|
<view class="content input-row flex">
|
<text class="mr-10">备注</text>
|
<input type="text" v-model="remark" maxlength="100" placeholder="客户需求" placeholder-class='placeholder'/>
|
</view>
|
<view class="footer">
|
<button :disabled="isDisabled" class="blue-btn" @click="createOrder">提交服务单</button>
|
</view>
|
|
<uni-popup ref="popup" type="center" @change="popupChange">
|
<view class="popup-container">
|
<view class="popup-title">请输入资金密码</view>
|
<password-input :numLng='password'></password-input>
|
</view>
|
</uni-popup>
|
<number-keyboard ref='KeyboarHid' :topBarShow="false" @input='changePwd' psdLength='6' :value="password"></number-keyboard>
|
</view>
|
</template>
|
|
<script>
|
import numberKeyboard from '@/components/number-keyboard/number-keyboard.vue'
|
import passwordInput from '@/components/password-input/password-input.vue'
|
import DateTimePicker from '../../components/bory-dateTimePicker/bory-dateTimePicker.vue'
|
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
export default{
|
components:{
|
DateTimePicker,
|
numberKeyboard,
|
passwordInput,
|
uniPopup
|
},
|
data(){
|
return{
|
id: '',
|
list: [],
|
yyTime: '',
|
employeeList:[],
|
curEmployee: {},
|
memberInfo: {},
|
remark: '',
|
isDisabled: false,
|
password: '',
|
isExistPwd: false
|
}
|
},
|
computed:{
|
totalCount(){
|
let count = 0;
|
this.list.forEach((item) => {
|
count += item.num;
|
})
|
return count;
|
},
|
totalTime(){
|
let timeLength = 0;
|
this.list.forEach((item) => {
|
timeLength += item.timeLength * item.num;
|
})
|
return timeLength;
|
},
|
startDate(){
|
return this.$utils.formmatTime('YY-mm-dd')
|
}
|
},
|
onLoad(options) {
|
this.id = options.id;
|
this.list = JSON.parse(decodeURIComponent(options.list));
|
this.loadIsExistFundPassword();
|
this.loadMemberInfo();
|
},
|
methods:{
|
loadIsExistFundPassword(){
|
this.$httpUtils.request('/api/vip/isExistFundPassword/'+this.id).then((res) => {
|
if(res.status == 200){
|
this.isExistPwd = res.mapInfo.isExist;
|
}
|
})
|
},
|
loadMemberInfo(){
|
this.$httpUtils.request('/api/vip/findVipInfoById/'+this.id).then((res) => {
|
if(res.status == 200){
|
this.memberInfo = res.mapInfo.vipInfo;
|
}
|
})
|
},
|
loadEmployeeList(){
|
this.$httpUtils.request('/api/user/findBeauticianList', {
|
startTime: this.yyTime
|
}, 'POST').then((res) => {
|
if(res.status == 200){
|
this.employeeList = res.rows;
|
if(!this.employeeList.length){
|
this.$toast.info('暂无可预约的美疗师')
|
}
|
}
|
})
|
},
|
showTime () {
|
this.$refs['date-time'].show();
|
},
|
dateTimeChange(val) {
|
this.yyTime = val;
|
this.loadEmployeeList()
|
},
|
employeeChange(e){
|
if(!this.employeeList.length){
|
return;
|
}
|
this.curEmployee = this.employeeList[e.detail.value];
|
},
|
valid(){
|
if(!this.yyTime){
|
this.$toast.info('请预约时间');
|
return false
|
}
|
if(!this.curEmployee || !this.curEmployee.id){
|
this.$toast.info('请预约美疗师');
|
return false
|
}
|
},
|
// 弹窗状态change
|
popupChange(e) {
|
if(!e.show){
|
this.password = '';
|
this.$refs.KeyboarHid.close();
|
}
|
},
|
changePwd(val){
|
this.password = val;
|
if(this.password.length == 6){
|
this.submit()
|
}
|
},
|
createOrder(){
|
if(this.valid() === false){
|
return;
|
}
|
// 未设置资金密码，不弹出密码框
|
if(!this.isExistPwd){
|
this.submit();
|
return;
|
}
|
this.$refs.popup.open();
|
setTimeout(() => {
|
this.$refs.KeyboarHid.open()
|
}, 50);
|
},
|
submit(){
|
if(this.isRequesting){
|
return;
|
}
|
this.isRequesting = true;
|
let projItems = this.list.map((item) => {
|
return {
|
"count": item.num,
|
"puseId": item.id
|
}
|
})
|
this.$httpUtils.request('/api/serviceOrder/createServiceOrder', {
|
beautyId: this.curEmployee.id,
|
projItems: projItems,
|
remark: this.remark,
|
totalTime: this.totalTime,
|
yyTime: this.yyTime,
|
vipId: this.id,
|
password: this.password
|
}, 'POST').then((res) => {
|
if(res.status == 200){
|
uni.navigateTo({
|
url: './submitSucceed?type=2'
|
})
|
}else{
|
this.password = '';
|
}
|
this.$toast.info(res.info);
|
this.isRequesting = false;
|
}).catch(() => {
|
this.isRequesting = false;
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.popup-container{
|
background: #FFFFFF;
|
width: 500rpx;
|
padding: 20px 20px 30px;
|
border-radius: 6px;
|
}
|
.popup-title{
|
font-size: 16px;
|
text-align: center;
|
margin-bottom: 15px;
|
}
|
.popup-sub-title{
|
font-size: 15px;
|
text-align: center;
|
padding: 10px 0;
|
}
|
page{
|
background: #F6F6F8;
|
padding-top: 10px;
|
padding-bottom: 70px;
|
}
|
.header{
|
background: #FFFFFF;
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
padding: 10px;
|
}
|
.header-img{
|
width: 48px;
|
height: 48px;
|
border-radius: 50%;
|
}
|
.content{
|
margin: 10px;
|
padding: 0 10px;
|
background: #FFFFFF;
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
.content-row{
|
border-bottom: 1px solid #EDEAF4;
|
padding: 10px 5px;
|
font-size: 14px;
|
}
|
.content-row:nth-last-child(1){
|
border: 0;
|
}
|
.product-img{
|
width: 53px;
|
height: 53px;
|
border-radius: 4px;
|
}
|
.input-row{
|
padding: 10px;
|
font-size: 14px;
|
}
|
.input-row input{
|
font-size: 14px;
|
flex: 1;
|
}
|
.footer{
|
position: fixed;
|
left: 10px;
|
right: 10px;
|
bottom: 0;
|
padding-bottom: 20px;
|
background: #F6F6F8;
|
}
|
</style>
|
