服务单接口联调

queenwuli

2020-12-27 cc499362b6eba119792e113796e4da029a70fc6d

 hive-app/pages/workbench/confirmService.vue

@@ -2,56 +2,59 @@
   <!-- 确认服务单 -->
   <view>
      <view class="header flex align-center">
         <image class="header-img" src="../../static/images/head-img.jpg"></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>
         <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>
   </view>
</template>

@@ -63,21 +66,107 @@
      },
      data(){
         return{
            time:'2020-12-12 19:06',
            technicianList:['赵姐','钱姐','孙姐'],
            technician:'赵姐'
            id: '',
            list: [],
            yyTime: '',
            employeeList:[],
            curEmployee: {},
            memberInfo: {},
            remark: '',
            isDisabled: 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;
         }
      },
      onLoad(options) {
         this.id = options.id;
         this.list = JSON.parse(decodeURIComponent(options.list));
         this.loadMemberInfo();
      },
      methods:{
         selectDatePicker () {
         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){
            this.curEmployee = this.employeeList[e.detail.value];
         },
         valid(){
            if(!this.yyTime){
               this.$toast.info('请预约时间');
               return false
            }
            if(!this.curEmployee.id){
               this.$toast.info('请预约美疗师');
               return false
            }
         },
         createOrder(){
            if(this.valid() === false){
               return;
            }
            this.isDisabled = 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
            }, 'POST').then((res) => {
               if(res.status == 200){
                  uni.navigateTo({
                     url: './submitSucceed'
                  })
               }
               this.$toast.info(res.info);
               this.isDisabled = false;
            }).catch(() => {
               this.isDisabled = false;
            })
         }
      }
   }
</script>
@@ -86,6 +175,7 @@
   page{
      background: #F6F6F8;
      padding-top: 10px;
      padding-bottom: 70px;
   }
   .header{
      background: #FFFFFF;
@@ -128,4 +218,12 @@
      font-size: 14px;
      flex: 1;
   }
   .footer{
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: 0;
      padding-bottom: 20px;
      background: #F6F6F8;
   }
</style>