gx

queenwuli

2020-12-21 1f3406acbac28b5b98c8d9dde2557374b97c0ef9

 hive-app/pages/workbench/confirmService.vue

New file
@@ -0,0 +1,131 @@
<template>
   <!-- 确认服务单 -->
   <view>
      <view class="header flex align-center">
         <image class="header-img" src="../../static/images/head-img.jpg"></image>
         <view class="ml-10">
            <view class="font-16">
               <text>李某</text>
               <text class="ml-20">15588881111</text>
            </view>
            <text class="font-14 gray mt-5">普通会员</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>
         </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">
                  <view>
                     <text class="mr-5">{{technician}}</text>
                     <text class="iconfont iconjiantouarrow486"></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="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>
               </view>
               <view>
                  <text class="font-16">×1</text>
               </view>
            </view>
         </view>
         <view class="content-row right">
            <text class="font-16 blue">共3项服务</text>
         </view>
      </view>
      <view class="content input-row flex">
         <text class="mr-10">备注</text>
         <input type="text" value="" placeholder="客户需求" placeholder-class='placeholder'/>
      </view>
      <button class="sticky-footer blue-btn">提交服务单</button>
   </view>
</template>

<script>
   import DateTimePicker from '../../components/bory-dateTimePicker/bory-dateTimePicker.vue'
   export default{
      components:{
         DateTimePicker
      },
      data(){
         return{
            time:'2020-12-12 19:06',
            technicianList:['赵姐','钱姐','孙姐'],
            technician:'赵姐'
         }
      },
      methods:{
         selectDatePicker () {
            this.$refs['date-time'].show();
         },
         dateTimeChange(value) {
            this.time=value
         },
         technicianChange(e){
            this.technician = this.technicianList[e.detail.value];
         },
      }
   }
</script>

<style>
   page{
      background: #F6F6F8;
      padding-top: 10px;
   }
   .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;
   }
</style>