<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>
|
