From 4b80c98ef5fda8d6358778f2efe8bb35cb20ccf9 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Fri, 15 Jan 2021 16:18:21 +0800
Subject: [PATCH] gx
---
hive-app/pages/workbench/confirmService.vue | 228 ++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 201 insertions(+), 27 deletions(-)
diff --git a/hive-app/pages/workbench/confirmService.vue b/hive-app/pages/workbench/confirmService.vue
index b98ed26..297eb77 100644
--- a/hive-app/pages/workbench/confirmService.vue
+++ b/hive-app/pages/workbench/confirmService.vue
@@ -2,90 +2,256 @@
<!-- 确认服务单 -->
<view>
<view class="header flex align-center">
- <image class="header-img" src="../../static/images/head-img.png"></image>
+ <image class="header-img" :src="memberInfo.photo?memberInfo.photo:'../../static/images/default-avatar.png'"></image>
<view class="ml-10">
<view class="font-16">
- <text>李某</text>
- <text class="ml-20">15588881111</text>
+ <text>{{memberInfo.vipName}}</text>
+ <text class="ml-20">{{memberInfo.phone}}</text>
</view>
- <text class="font-14 gray mt-5">普通会员</text>
+ <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="selectDatePicker()">{{time}}</text>
+ <text class="gray" @click="showTime()">{{yyTime || '请选择预约时间'}}</text>
</view>
- <date-time-picker ref='date-time' type='datetime' @change='dateTimeChange'></date-time-picker>
+ <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="technicianList" @change="technicianChange">
+ <picker mode="selector" range-key="name" :range="employeeList" @change="employeeChange">
<view>
- <text class="mr-5">{{technician}}</text>
- <text class="iconfont iconjiantouarrow486"></text>
+ <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 3">
- <image class="product-img" src="../../static/images/product.jpg" mode="aspectFill"></image>
+ <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">面部护理</text>
- <text class="font-12 gray mt-5">时长: 30分钟</text>
- <text class="font-12 gray">有效期至: 2021-12-20</text>
+ <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">×1</text>
+ <text class="font-16">×{{item.num}}</text>
</view>
</view>
</view>
<view class="content-row right">
- <text class="font-16 blue">共3项服务</text>
+ <text class="font-16 blue">共{{totalCount}}项服务</text>
</view>
</view>
<view class="content input-row flex">
<text class="mr-10">备注</text>
- <input type="text" value="" placeholder="客户需求" placeholder-class='placeholder'/>
+ <input type="text" v-model="remark" maxlength="100" placeholder="客户需求" placeholder-class='placeholder'/>
</view>
- <button class="sticky-footer blue-btn">提交服务单</button>
+ <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
+ DateTimePicker,
+ numberKeyboard,
+ passwordInput,
+ uniPopup
},
data(){
return{
- time:'2020-12-12 19:06',
- technicianList:['赵姐','钱姐','孙姐'],
- technician:'赵姐'
+ 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:{
- selectDatePicker () {
+ 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(value) {
- this.time=value
+ dateTimeChange(val) {
+ this.yyTime = val;
+ this.loadEmployeeList()
},
- technicianChange(e){
- this.technician = this.technicianList[e.detail.value];
+ 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;
@@ -128,4 +294,12 @@
font-size: 14px;
flex: 1;
}
+ .footer{
+ position: fixed;
+ left: 10px;
+ right: 10px;
+ bottom: 0;
+ padding-bottom: 20px;
+ background: #F6F6F8;
+ }
</style>
--
Gitblit v1.9.1