From c93eff979aba7e4e071b3363f9146d5b4d49996e Mon Sep 17 00:00:00 2001
From: li-guang <153605324@qq.com>
Date: Mon, 21 Dec 2020 14:47:43 +0800
Subject: [PATCH] 服务单
---
hive-app/pages/workbench/orderList.vue | 25 -
hive-app/pages/workbench/confirmService.vue | 124 +++++++
/dev/null | 136 --------
hive-app/common/styles/index.css | 5
hive-app/pages.json | 13
hive-app/components/bory-dateTimePicker/bory-dateTimePicker.vue | 407 +++++++++++++++++++++++++
hive-app/pages/workbench/selectService.vue | 161 ++++++++++
hive-app/pages/workbench/selectProduct/index.vue | 1
hive-app/components/bory-dateTimePicker/uitls/util.js | 40 ++
9 files changed, 747 insertions(+), 165 deletions(-)
diff --git a/hive-app/common/styles/index.css b/hive-app/common/styles/index.css
index b98e911..44f6e45 100644
--- a/hive-app/common/styles/index.css
+++ b/hive-app/common/styles/index.css
@@ -196,20 +196,23 @@
}
/* 蓝色圆形加减按钮 */
.blue-btn-circle{
+ display: inline-block;
height: 24px;
width: 24px;
line-height: 24px;
+ text-align: center;
box-sizing: border-box;
font-size: 14px!important;
border-radius: 50%!important;
background: #518EFF;
- border-radius: 4px;
color: #FFFFFF;
}
.blue-outline-btn-circle{
+ display: inline-block;
height: 24px;
width: 24px;
line-height: 22px;
+ text-align: center;
box-sizing: border-box;
font-size: 12px!important;
border-radius: 50%;
diff --git a/hive-app/components/bory-dateTimePicker/bory-dateTimePicker.vue b/hive-app/components/bory-dateTimePicker/bory-dateTimePicker.vue
new file mode 100644
index 0000000..d315f6d
--- /dev/null
+++ b/hive-app/components/bory-dateTimePicker/bory-dateTimePicker.vue
@@ -0,0 +1,407 @@
+<template>
+ <view class="date-time-picker" v-if="visible">
+ <view class="date-time-mask" @click.stop="hide"></view>
+ <view class="date-time-container" @click.stop="handleEvent">
+ <view class="time-picker-tool" v-if='isShowToolBar'>
+ <view :class="[cancelButtonClass]" @click.stop="cancel">
+ <text>{{cancelButtonText}}</text>
+ </view>
+ <view :class="[toolBarTitleClass]">
+ <text>{{toolBarTitle}}</text>
+ </view>
+ <view :class="[confirmButtonClass]" @click.stop="confirm">
+ <text>{{confirmButtonText}}</text>
+ </view>
+ </view>
+ <picker-view class="picker-view" :indicator-style="indicatorStyleString" :value="dateTime" @change="dateTimePickerChange">
+ <picker-view-column data-id='year' v-if='isShowYear'>
+ <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
+ </picker-view-column>
+ <picker-view-column data-id='month' v-if='isShowMonth'>
+ <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
+ </picker-view-column>
+ <picker-view-column data-id='day' v-if='isShowDay'>
+ <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
+ </picker-view-column>
+ <picker-view-column data-id='hour' v-if='isShowHour'>
+ <view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
+ </picker-view-column>
+ <picker-view-column data-id='minute' v-if='isShowMinute'>
+ <view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
+ </picker-view-column>
+ <picker-view-column data-id='second' v-if='isShowSecond'>
+ <view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
+ </picker-view-column>
+ </picker-view>
+ </view>
+ </view>
+</template>
+
+<script>
+ import {
+ getOneMonthDays,
+ getTimeArray,
+ addZero,
+ getIndexOfArray
+ } from './uitls/util.js'
+ export default {
+ name: 'DateTimePicker',
+ props: {
+ startYear: {
+ type: Number,
+ default: 1900
+ },
+ endYear: {
+ type: Number,
+ default: new Date().getFullYear()
+ },
+ isShowToolBar: {
+ type: Boolean,
+ default: true
+ },
+ cancelButtonText: {
+ type: String,
+ default: '取消'
+ },
+ cancelButtonClass: {
+ type: String,
+ default: 'cancel-btn'
+ },
+ toolBarTitle: {
+ type: String,
+ default: '请选择'
+ },
+ toolBarTitleClass: {
+ type: String,
+ default: 'tool-title'
+ },
+ confirmButtonText: {
+ type: String,
+ default: '确定'
+ },
+ confirmButtonClass: {
+ type: String,
+ default: 'confirm-btn'
+ },
+ datestring: {
+ type: String,
+ default: ''
+ },
+ type: {
+ /**
+ * date 年月日
+ * year-month 年月
+ * year 年
+ * datetime 年月日 时分
+ * datetime-all 年月日 时分秒
+ * time 时分秒
+ * hour-minute 时分
+ */
+ type: String,
+ default: 'date'
+ },
+ indicatorStyle: {
+ type: Object,
+ default: null
+ }
+ },
+ data() {
+ return {
+ visible: false,
+ dateTime: [],
+ days: [],
+ indicatorStyleString: ''
+ }
+ },
+ watch: {
+ indicatorStyle(val){
+ this.getIndicatorStyle();
+ },
+ type() {
+ this.initDateTime()
+ },
+ datestring(){
+ this.initDateTime()
+ }
+ },
+ computed: {
+ years() {
+ return this.initTimeData(this.endYear, this.startYear);
+ },
+ isShowYear() {
+ return this.type !== 'time' && this.type !== 'hour-minute';
+ },
+ months() {
+ return this.initTimeData(12, 1);
+ },
+ isShowMonth() {
+ return this.type !== 'year' && this.type !== 'time' && this.type !== 'hour-minute';
+ },
+ isShowDay() {
+ return this.type === 'date' || this.type === 'datetime' || this.type === 'datetime-all';
+ },
+ hours() {
+ return this.initTimeData(23, 0);
+ },
+ isShowHour() {
+ return this.type !== 'date' && this.type !== 'year-month' && this.type !== 'year';
+ },
+ minutes() {
+ return this.initTimeData(59, 0);
+ },
+ isShowMinute() {
+ return this.type !== 'date' && this.type !== 'year-month' && this.type !== 'year';
+ },
+ seconds() {
+ return this.initTimeData(59, 0);
+ },
+ isShowSecond() {
+ return this.type === 'datetime-all' || this.type === 'time';
+ }
+ },
+ methods: {
+ getIndicatorStyle(){
+ if(this.indicatorStyle){
+ for(let key in this.indicatorStyle){
+ this.indicatorStyleString += `${key}:${this.indicatorStyle[key]};`
+ }
+ }
+ },
+ handleEvent() {
+ return;
+ },
+ cancel() {
+ this.hide();
+ },
+ confirm() {
+ this.formatDate();
+ this.hide();
+ },
+ show() {
+ this.visible = true;
+ },
+ hide() {
+ this.visible = false;
+ },
+ initDateTime() {
+ let value;
+ if (this.datestring.length > 0) {
+ if (this.type === 'year') {
+ value = new Date(this.datestring, 0);
+ } else if (this.type === 'time' || this.type === 'hour-minute') {
+ let date = new Date();
+ let ary = this.datestring.split(':');
+ ary.forEach((item, index) => {
+ if (index == 0) {
+ date.setHours(item)
+ } else if (index == 1) {
+ date.setMinutes(item)
+ } else if (index == 2) {
+ date.setSeconds(item)
+ }
+ })
+ value = date;
+ } else {
+ value = new Date(this.datestring.replace(/-/g, '/'));
+ }
+
+ } else {
+ value = new Date();
+ }
+ let len, timeArray, index;
+ let array = getTimeArray(value);
+ let [year, month, day, hour, minute, second] = array;
+ this.days = this.initTimeData(getOneMonthDays(year, month-1), 1);
+ let names = ['year', 'month', 'day', 'hour', 'minute', 'second'];
+ switch (this.type) {
+ case "date":
+ len = 3;
+ break;
+ case "year-month":
+ len = 2;
+ break;
+ case "year":
+ len = 1;
+ break;
+ case "datetime":
+ len = 5;
+ break;
+ case "datetime-all":
+ len = 6;
+ break;
+ case "time":
+ len = 3;
+ break;
+ case "hour-minute":
+ len = 2;
+ break;
+ }
+ timeArray = new Array(len).fill(0);
+ if (this.type === 'time' || this.type === 'hour-minute') {
+ names = names.slice(3);
+ array = array.slice(3);
+ }
+ timeArray = timeArray.map((item, index) => {
+ const name = names[index];
+ return getIndexOfArray(array[index], this[name + 's'])
+ })
+ this.dateTime = timeArray;
+ },
+ initTimeData(end, start) {
+ let timeArray = [];
+ while (start <= end) {
+ timeArray.push(start);
+ start++;
+ }
+ return timeArray;
+ },
+ formatDate() {
+ let names = ['year', 'month', 'day', 'hour', 'minute', 'second'];
+ let dateString, formatDateArray = [];
+ if (this.type === 'date' || this.type === 'year-month' || this.type === 'year') {
+ formatDateArray = this.dateTime.map((item, index) => {
+ return this[names[index] + 's'][item] < 10 ? addZero(this[names[index] + 's'][item]) : this[names[index] + 's'][item];
+ })
+ dateString = formatDateArray.join('-');
+ } else if (this.type === 'time' || this.type === 'hour-minute') {
+ names = names.splice(3);
+ formatDateArray = this.dateTime.map((item, index) => {
+ return this[names[index] + 's'][item] < 10 ? addZero(this[names[index] + 's'][item]) : this[names[index] + 's'][item];
+ })
+ dateString = formatDateArray.join(':');
+ } else {
+ let name1 = names.splice(0, 3);
+ formatDateArray = this.dateTime.map((item, index) => {
+ if (index > 2) {
+ return this[names[index - 3] + 's'][item] < 10 ? addZero(this[names[index - 3] + 's'][item]) : this[names[index - 3] + 's'][item];
+ } else {
+ return this[name1[index] + 's'][item] < 10 ? addZero(this[name1[index] + 's'][item]) : this[name1[index] + 's'][item];
+ }
+ })
+ dateString = formatDateArray.splice(0, 3).join('-') + ' ' + formatDateArray.join(':');
+ }
+ this.$emit('change', dateString)
+ },
+ dateTimePickerChange(e) {
+ let columns = e.target.value;
+ if (this.type === 'date' || this.type === 'datetime' || this.type === 'datetime-all') {
+ this.dateTime.splice(0, 1, columns[0]);
+ if (columns[0] != this.dateTime[0]) {
+ this.days = this.initTimeData(getOneMonthDays(this.years[this.dateTime[0]], this.months[this.dateTime[1]]), 1);
+ if (this.dateTime[1] == 1) {
+ if (this.dateTime[2] === this.days.length - 1) {
+ if (getOneMonthDays(this.years[columns[0]], this.dateTime[1]) < getOneMonthDays(this.years[this.dateTime[0]],this.dateTime[1])) {
+ this.dateTime.splice(2, 1, this.days.length - 1)
+ }
+ }
+ }
+ } else {
+ this.dateTime.splice(1, 1, columns[1]);
+ this.days = this.initTimeData(getOneMonthDays(this.years[this.dateTime[0]], this.dateTime[1]), 1);
+ if (columns[1] != this.dateTime[1]) {
+ if (this.dateTime[1] == 1) {
+ if (this.dateTime[2] === this.days.length - 1) {
+ if (getOneMonthDays(this.years[columns[0]], this.dateTime[1]) < getOneMonthDays(this.years[this.dateTime[0]],
+ this.dateTime[1])) {
+ this.dateTime.splice(2, 1, this.days.length - 1)
+ }
+ }
+ } else {
+ if (this.dateTime[2] > this.days.length - 1) {
+ this.dateTime.splice(2, 1, this.days.length - 1)
+ } else {
+ this.dateTime.splice(2, 1, columns[2])
+ }
+ }
+ } else {
+ this.dateTime.splice(2, 1, columns[2])
+ }
+ }
+ if (columns.length > 2) {
+ columns.splice(3).forEach((column, index) => {
+ this.dateTime.splice(index + 3, 1, column);
+ })
+ }
+ } else {
+ columns.forEach((column, index) => {
+ this.dateTime.splice(index, 1, column);
+ })
+ }
+ if (!this.isShowToolBar) {
+ this.formatDate();
+ }
+ },
+ },
+ mounted() {
+ this.getIndicatorStyle();
+ this.initDateTime();
+ }
+ }
+</script>
+
+<style lang='scss' scoped>
+ .date-time-picker {
+ .date-time-mask {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: rgba($color: #000000, $alpha: .5);
+ z-index: 998;
+ }
+
+ .date-time-container {
+ position: fixed;
+ height: 50%;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ background-color: #f6f6f6;
+ z-index: 1000;
+ display: flex;
+ flex-direction: column;
+
+ .time-picker-tool {
+ height: 80rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 28rpx;
+
+ .cancel-btn {
+ padding: 0 28rpx;
+ box-sizing: border-box;
+ color: #969799;
+ }
+
+ .tool-title {
+ font-weight: 500;
+ font-size: 16px;
+ max-width: 50%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .confirm-btn {
+ padding: 0 28rpx;
+ box-sizing: border-box;
+ color: #576b95;
+ }
+ }
+
+ .picker-view {
+ width: 100%;
+ flex: 1;
+
+ .item {
+ font-size: 34rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+ }
+</style>
diff --git a/hive-app/components/bory-dateTimePicker/uitls/util.js b/hive-app/components/bory-dateTimePicker/uitls/util.js
new file mode 100644
index 0000000..e0fd503
--- /dev/null
+++ b/hive-app/components/bory-dateTimePicker/uitls/util.js
@@ -0,0 +1,40 @@
+/**
+ * 获取某年某月有多少天
+ */
+export const getOneMonthDays = (year,month)=>{
+ month = Number(month);
+ const baseMonthsDays = [31,28,31,30,31,30,31,31,30,31,30,31];
+ if(year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)){
+ if(month === 1){
+ baseMonthsDays[month] = 29;
+ }
+ }
+ return baseMonthsDays[month];
+}
+
+/**
+ * 获取日期的年月日时分秒
+ */
+export const getTimeArray = (date)=>{
+ const year = date.getFullYear();
+ const month = date.getMonth()+1;
+ const day = date.getDate();
+ const hour = date.getHours();
+ const minute = date.getMinutes();
+ const second = date.getSeconds();
+ return [year,month,day,hour,minute,second];
+}
+/**
+ * 小于10的数字前面补0
+ */
+export const addZero = (num)=>{
+ return num < 10 ? '0' + num : num;
+}
+
+/**
+ * 获取当前值在数组中的索引
+ */
+export const getIndexOfArray = (value,array)=>{
+ let index = array.findIndex(item => item == value);
+ return index > -1 ? index : 0;
+}
\ No newline at end of file
diff --git a/hive-app/pages.json b/hive-app/pages.json
index 64e648c..d7124a0 100644
--- a/hive-app/pages.json
+++ b/hive-app/pages.json
@@ -211,7 +211,7 @@
}
},
{
- "path": "./pages/workbench/orderDetail",
+ "path": "pages/workbench/orderDetail",
"style": {
"navigationBarTitleText": "订单详情",
"navigationBarBackgroundColor":"#FFFFFF",
@@ -220,6 +220,17 @@
"scrollIndicator": "none"
}
}
+ },
+ {
+ "path": "pages/workbench/confirmService",
+ "style": {
+ "navigationBarTitleText": "确认订单",
+ "navigationBarBackgroundColor":"#FFFFFF",
+ "navigationBarTextStyle":"black",
+ "app-plus":{
+ "scrollIndicator": "none"
+ }
+ }
}
],
"globalStyle": {
diff --git a/hive-app/pages/workbench/confirmService.vue b/hive-app/pages/workbench/confirmService.vue
new file mode 100644
index 0000000..e71b4ca
--- /dev/null
+++ b/hive-app/pages/workbench/confirmService.vue
@@ -0,0 +1,124 @@
+<template>
+ <!-- 确认服务单 -->
+ <view>
+ <view class="header flex align-center mt-10">
+ <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-12">面部护理</text>
+ <text class="font-10 gray mt-5">时长: 30分钟</text>
+ <text class="font-10 gray mt-5">有效期至: 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;
+ }
+ .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;
+ }
+ .content-row:nth-last-child(1){
+ border: 0;
+ }
+ .product-img{
+ width: 53px;
+ height: 53px;
+ border-radius: 4px;
+ }
+ .input-row{
+ padding: 10px;
+ }
+</style>
diff --git a/hive-app/pages/workbench/orderList.vue b/hive-app/pages/workbench/orderList.vue
index 3a0e318..96857fe 100644
--- a/hive-app/pages/workbench/orderList.vue
+++ b/hive-app/pages/workbench/orderList.vue
@@ -44,31 +44,6 @@
</view>
</view>
</view>
- <view class="order">
- <view class="flex justify-between order-number">
- <text class="font-14">订单号: N202012123556</text>
- <text class="font-14 blue">已完成</text>
- </view>
- <view class="flex justify-between order-content">
- <view class="flex flex-v">
- <text class="font-12">李某某</text>
- <text class="font-12 gray mt-10">2020-12-15 18:11:01</text>
- </view>
- <view class="flex flex-v">
- <text class="font-12">应付金额</text>
- <text class="font-12 mt-10">实付金额</text>
- </view>
- <view class="flex flex-v">
- <text class="font-12">￥ 8000.00</text>
- <text class="font-12 mt-10">￥ 8000.00</text>
- </view>
- </view>
- <view class="flex justify-end">
- <navigator url="./orderDetail">
- <button class="blue-btn small-btn">查看详情</button>
- </navigator>
- </view>
- </view>
</view>
</view>
</template>
diff --git a/hive-app/pages/workbench/selectProduct.vue b/hive-app/pages/workbench/selectProduct.vue
deleted file mode 100644
index b7b3fc3..0000000
--- a/hive-app/pages/workbench/selectProduct.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
- <!-- 当前客户 -->
- <view class="container">
- <search-bar placeholder="商品名称、编号、拼音" class="ml-10 mr-10"></search-bar>
- <view class="list flex">
- <scroll-view class="list-left" scroll-y>
- <view v-for="(item,index) in list" class="list-left-row" @click="active(index)" :class="select==index?'active':''">
- <text class="font-14">{{item}}</text>
- </view>
- </scroll-view>
- <scroll-view class="list-right" scroll-y>
- <view class="flex flex-v list-right-row">
- <text class="flex justify-start font-14">肽妍氨基酸平衡基础洁面乳</text>
- <text class="flex justify-start font-14 red mt-10">￥400.00</text>
- <view class="flex align-center justify-end mt-10">
- <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
- <text>1</text>
- <text class="iconfont iconjia blue-btn-circle ml-10"></text>
- </view>
- </view>
- <view class="flex flex-v list-right-row">
- <text class="flex justify-start font-14">肽妍氨基酸平衡基础洁面乳</text>
- <text class="flex justify-start font-14 red mt-10">￥400.00</text>
- <view class="flex align-center justify-end mt-10">
- <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
- <text>1</text>
- <text class="iconfont iconjia blue-btn-circle ml-10"></text>
- </view>
- </view>
- </scroll-view>
- </view>
- <view class="shopping flex align-center justify-between">
- <view class="flex align-center">
- <view class="shopping-icon iconfont iconicongouwuche gray">
- <view class="shopping-icon-num flex align-center justify-center">
- <text class="font-10">19</text>
- </view>
- </view>
- <text class="font-14 blue ml-10">¥110.00</text>
- </view>
- <button class="blue-btn btn mr-0" @click="linkTo('./confirmOrder')">提交订单</button>
- </view>
- </view>
-</template>
-
-<script>
- import searchBar from '../../components/searchBar/index.vue';
- export default {
- components:{
- searchBar
- },
- data(){
- return{
- list:['院装产品','美容套餐','美容客装','美容试装','头皮院装'],
- select:'0'
- }
- },
- methods:{
- linkTo(val){
- uni.navigateTo({
- url:val
- })
- },
- active(index){
- this.select=index
- }
- }
- }
-</script>
-
-<style>
- page{
- height: 100%;
- }
- .container{
- display: flex;
- flex-direction: column;
- height: 100%;
- padding: 10px 0 0;
- box-sizing: border-box;
- }
- .list{
- flex: 1;
- }
- .list-left{
- width: 25%;
- height: 100%;
- text-align: center;
- background: #F6F6F8;
- border-radius: 4px;
- }
- .list-right{
- width: 75%;
- text-align: center;
- padding: 0px 10px;
- }
- .list-left-row{
- padding: 10px;
- color: #8c9fad;
- }
- .active{
- background: #FFFFFF;
- color: #000000;
- }
- .list-right-row{
- border: 1px solid #EDEAF4;
- box-shadow:0 6px 6px rgba(237,234,244,0.5);
- border-radius: 4px;
- padding: 10px;
- }
- .list-right-row:not(:first-child){
- margin-top: 10px;
- }
- .shopping{
- padding: 20px 10px;
- }
- .shopping-icon{
- font-size: 28px;
- position: relative;
- }
- .shopping-icon-num{
- width: 20px;
- height: 20px;
- background: #518EFF;
- border-radius: 50%;
- color: #FFFFFF;
- position: absolute;
- right: -10px;
- top: -10px;
- }
- .btn{
- border-radius: 20px;
- line-height: 30px;
- font-size: 14px;
- }
-</style>
diff --git a/hive-app/pages/workbench/selectProduct/index.vue b/hive-app/pages/workbench/selectProduct/index.vue
index b28c9b6..47d7715 100644
--- a/hive-app/pages/workbench/selectProduct/index.vue
+++ b/hive-app/pages/workbench/selectProduct/index.vue
@@ -58,7 +58,6 @@
<navigator url="../confirmOrder">
<button class="blue-btn btn mr-0">提交订单</button>
</navigator>
-
</view>
<uni-popup ref="popup" type="bottom">
<shopping-cart></shopping-cart>
diff --git a/hive-app/pages/workbench/selectService.vue b/hive-app/pages/workbench/selectService.vue
index 8781a2e..da35450 100644
--- a/hive-app/pages/workbench/selectService.vue
+++ b/hive-app/pages/workbench/selectService.vue
@@ -1,11 +1,170 @@
<template>
<view>
- <text>选择套餐</text>
+ <view class="header">
+ <search-bar placeholder="商品名称、编号、拼音" class="ml-10 mr-10"></search-bar>
+ </view>
+ <view class="content">
+ <view class="content-box">
+ <view class="content-box-title">
+ <text>项目</text>
+ </view>
+ <view class="flex align-center content-box-row" v-for="item in 2">
+ <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
+ <view class="flex flex-v ml-10 flex-1">
+ <text class="font-12">面部护理</text>
+ <text class="font-10 gray mt-5">时长: 30分钟</text>
+ <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
+ <view class="mt-5 flex align-center justify-between">
+ <text class="font-12 blue">剩余次数: 2次</text>
+ <view>
+ <text class="iconfont iconjian blue-outline-btn-circle mr-20"></text>
+ <text class="iconfont iconjia blue-btn-circle"></text>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ <view class="content-box mt-10">
+ <view class="content-box-title">
+ <text>套餐</text>
+ </view>
+ <view class="flex flex-v content-box-row" v-for="item in 2">
+ <view class="font-12 flex align-center justify-between">
+ <text>时尚补水套餐</text>
+ <text class="red">即将过期</text>
+ </view>
+ <view class="flex align-center mt-5">
+ <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
+ <view class="flex flex-v ml-10 flex-1">
+ <text class="font-12">面部护理</text>
+ <text class="font-10 gray mt-5">时长: 30分钟</text>
+ <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
+ <view class="mt-5 flex align-center justify-between">
+ <text class="font-12 blue">剩余次数: 2次</text>
+ <view>
+ <text class="iconfont iconjian blue-outline-btn-circle mr-20"></text>
+ <text class="iconfont iconjia blue-btn-circle"></text>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="flex align-center mt-10">
+ <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
+ <view class="flex flex-v ml-10 flex-1">
+ <text class="font-12">面部护理</text>
+ <text class="font-10 gray mt-5">时长: 30分钟</text>
+ <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
+ <view class="mt-5 flex align-center justify-between">
+ <text class="font-12 blue">剩余次数: 2次</text>
+ <view>
+ <text class="iconfont iconjian blue-outline-btn-circle mr-20"></text>
+ <text class="iconfont iconjia blue-btn-circle"></text>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="font-12 mt-5">
+ <text>有效期至: 2021-01-03</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="shopping flex align-center justify-between">
+ <view class="flex align-center">
+ <view class="shopping-icon iconfont iconicongouwuche gray" @click="openShoppingCart">
+ <view class="shopping-icon-num flex align-center justify-center">
+ <text class="font-10">19</text>
+ </view>
+ </view>
+ <text class="font-14 blue ml-10">¥110.00</text>
+ </view>
+ <navigator url="./confirmService" hover-class="none">
+ <button class="blue-btn btn mr-0">提交订单</button>
+ </navigator>
+ </view>
+ <uni-popup ref="popup" type="bottom">
+ <shopping-cart></shopping-cart>
+ </uni-popup>
</view>
</template>
<script>
+ import searchBar from '../../components/searchBar/index.vue';
+ import uniPopup from '@/components/uni-popup/uni-popup.vue'
+ import shoppingCart from './selectProduct/shoppingCart.vue'
+ export default {
+ components:{
+ searchBar,
+ uniPopup,
+ shoppingCart
+ },
+ data(){
+ return{
+ }
+ },
+ methods:{
+ openShoppingCart(){
+ this.$refs.popup.open()
+ }
+ }
+ }
</script>
<style>
+ page{
+ background: #F6F6F8;
+ }
+ .header{
+ background: #FFFFFF;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ box-shadow:0 6px 6px rgba(237,234,244,0.5);
+ padding-bottom: 5px;
+ }
+ .content{
+ padding: 10px;
+ }
+ .content-box{
+ background: #FFFFFF;
+ padding: 10px;
+ border: 1px solid #EDEAF4;
+ border-radius: 4px;
+ box-shadow:0 6px 6px rgba(237,234,244,0.5);
+ }
+ .content-box-title{
+ padding: 10px 5px;
+ border-bottom: 1px solid #EDEAF4;
+ }
+ .content-box-row{
+ padding: 10px 0;
+ border-bottom: 1px solid #EDEAF4;
+ }
+ .content-box-row:nth-last-child(1){
+ border: 0;
+ padding-bottom: 0;
+ }
+ .product-img{
+ width: 80px;
+ height: 80px;
+ border-radius: 4px;
+ }
+ .shopping{
+ background: #FFFFFF;
+ padding: 10px 10px;
+ }
+ .shopping-icon{
+ font-size: 28px;
+ position: relative;
+ }
+ .shopping-icon-num{
+ width: 20px;
+ height: 20px;
+ background: #518EFF;
+ border-radius: 50%;
+ color: #FFFFFF;
+ position: absolute;
+ right: -10px;
+ top: -10px;
+ }
</style>
--
Gitblit v1.9.1