From 1f3406acbac28b5b98c8d9dde2557374b97c0ef9 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Mon, 21 Dec 2020 17:40:58 +0800
Subject: [PATCH] gx
---
hive-app/pages/workbench/confirmService.vue | 131 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 131 insertions(+), 0 deletions(-)
diff --git a/hive-app/pages/workbench/confirmService.vue b/hive-app/pages/workbench/confirmService.vue
new file mode 100644
index 0000000..10b8304
--- /dev/null
+++ b/hive-app/pages/workbench/confirmService.vue
@@ -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>
--
Gitblit v1.9.1