From 4f2ce27ddc7bba70dff4ae435f5b1c9cf9902b66 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Mon, 12 Jul 2021 18:00:29 +0800
Subject: [PATCH] add style

---
 src/components/site/order_modal/order_modal.vue  | 167 +++++++++++++++++++++++
 src/pages.json                                   |   6 +
 src/pages/site/manage/manage.vue                 | 151 ++++++++++++++------
 src/pages/site/occupy_success/occupy_success.vue |  35 +++++
 4 files changed, 317 insertions(+), 42 deletions(-)
 create mode 100644 src/components/site/order_modal/order_modal.vue
 create mode 100644 src/pages/site/occupy_success/occupy_success.vue

diff --git a/src/components/site/order_modal/order_modal.vue b/src/components/site/order_modal/order_modal.vue
new file mode 100644
index 0000000..aef911a
--- /dev/null
+++ b/src/components/site/order_modal/order_modal.vue
@@ -0,0 +1,167 @@
+<template>  
+    <view class="order-modal">
+        <view class="om-title">小程序预定</view>
+		<image class="om-close"></image>
+		<view class="om-name-line">
+			<view class="onl-view">欧轩智能羽毛球馆（永泰店）</view>
+			<view class="onl-view">待使用</view>
+		</view>
+		<view class="om-info-line">
+			<view class="oil-view">订单编号：</view>
+			<view class="oil-view">
+				<view class="ov-view">12345</view>
+			</view>
+		</view>
+		<view class="om-info-line">
+			<view class="oil-view">创建时间：</view>
+			<view class="oil-view">
+				<view class="ov-view">2019-05-17 11:12:58</view>
+			</view>
+		</view>
+		<view class="om-info-line">
+			<view class="oil-view">手机号码：</view>
+			<view class="oil-view">
+				<view class="ov-view">18316553872</view>
+			</view>
+		</view>
+		<view class="om-info-line">
+			<view class="oil-view">验证码：</view>
+			<view class="oil-view">
+				<view class="ov-view">1223 5512 4534</view>
+			</view>
+		</view>
+
+		<view class="om-border"></view>
+
+		<view class="om-name-line">
+			<view class="onl-view">预订信息</view>
+		</view>
+		<view class="om-info-line">
+			<view class="oil-view">预订项目：</view>
+			<view class="oil-view">
+				<view class="ov-view">羽毛球</view>
+			</view>
+		</view>
+		<view class="om-info-line">
+			<view class="oil-view">预订日期：</view>
+			<view class="oil-view">
+				<view class="ov-view">2019-07-16（周五）</view>
+			</view>
+		</view>
+		<view class="om-info-line">
+			<view class="oil-view">预订场次：</view>
+			<view class="oil-view">
+				<view class="ov-view">1号馆   10:00-12:00   （￥80 ）</view>
+				<view class="ov-view">1号馆   10:00-12:00   （￥80 ）</view>
+			</view>
+		</view>
+		<view class="om-total">实付款 ￥240</view>
+		<view class="om-btns">
+			<view class="ob-view">分享给朋友</view>
+			<view class="ob-view">取消占用</view>
+		</view>
+    </view>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
+
+<style scoped lang="scss">
+	@import '~style/public.scss';
+    .order-modal{
+		position: relative;
+		padding-left: 30upx;
+		padding-right: 30upx;
+		padding-top: 48upx;
+		padding-bottom: 0upx;
+		padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+		padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+        background-color: #f00;
+		.om-close{
+			position: absolute;
+			right: 30upx;
+			top: 30upx;
+			width: 34upx;
+			height: 34upx;
+			background-color: skyblue;
+		}
+		.om-title{
+			margin-bottom: 34upx;
+			text-align: center;
+			font-size: 32upx;
+			line-height: 44upx;
+			color: #1a1a1a;
+			font-weight: 500;
+		}
+		.om-name-line{
+			margin-bottom: 12upx;
+			@include centerFlex(space-between);
+			.onl-view{
+				&:first-child{
+					line-height: 40upx;
+					font-size: 28upx;
+					color: #1a1a1a;
+				}
+				&+.onl-view{
+					line-height: 40upx;
+					font-size: 28upx;
+					color: $themeColor;	
+				}
+			}
+		}
+		.om-info-line{
+			display: flex;
+			align-items: baseline;
+			.oil-view{
+				font-size: 28upx;
+				line-height: 40upx;
+				color: #9C9C9F;
+				&:first-child{
+					flex-shrink: 0;
+				}
+				&+.oil-view{
+					flex-grow: 1;
+					.ov-view{
+						font-size: 28upx;
+						line-height: 40upx;
+						color: #1a1a1a;
+						@include textHide(1);
+					}
+				}
+			}
+		}
+		.om-border{
+			margin-top: 20upx;
+			margin-bottom: 18upx;
+			height: 2upx;
+			background-color: #D8D8D8;
+		}
+		.om-total{
+			margin-top: 20upx;
+			margin-bottom: 40upx;
+			text-align: right;
+			line-height: 40upx;
+			font-size: 28upx;
+			color: #1a1a1a;
+		}
+		.om-btns{
+			margin-bottom: 10upx;
+			@include centerFlex(flex-end);
+			.ob-view{
+				margin-left: 20upx;
+				width: 210upx;
+				height: 80upx;
+				border: 2upx solid $themeColor;
+				text-align: center;
+				line-height: 76upx;
+				border-radius: 10upx;
+				font-size: 32upx;
+				font-weight: 500;
+				color: $themeColor;
+			}
+		}
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 48ed0e8..7859b8b 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,6 +1,12 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+			"path": "pages/site/occupy_success/occupy_success",
+			"style": {
+				"navigationBarTitleText": "占用场地"
+			}
+		},
+		{
 			"path": "pages/index/index",
 			"style": {
 			}
diff --git a/src/pages/site/manage/manage.vue b/src/pages/site/manage/manage.vue
index 5076c54..3cccfe1 100644
--- a/src/pages/site/manage/manage.vue
+++ b/src/pages/site/manage/manage.vue
@@ -17,14 +17,14 @@
                 <view class="st-tip">{{curTypeInfo.rule_text || '-'}}</view>
             </view>
             <view class="sh-date">
-                <picker>
+                <picker mode="date">
                     <view class="sd-box">
                         <text>2020年5月16日</text>
                         <view></view>
                     </view>
                 </picker>
                 <text>至</text>
-                <picker>
+                <picker mode="date">
                     <view class="sd-box">
                         <text>2020年5月16日</text>
                         <view></view>
@@ -53,8 +53,9 @@
         </scroll-view>
         <view class="sm-venue">
             <view class="sv-time-interval">
-                <view class="sti-item"></view>
-                <view class="sti-item" v-for="(e,i) in venueList[0].items" :key="i">{{e.duration || '-'}}</view>
+                <view class="sti-item" v-for="(e,i) in venueTimeList" :key="i">
+                    <view>{{ e || '-' }}</view>
+                </view>
             </view>
             <scroll-view class="sti-venue-list" enable-flex scroll-x :style="venueAreaSize">
                 <view class="svl-list" v-for="(e, i) in venueList" :key="i">
@@ -62,7 +63,7 @@
                     <view class="sl-item" v-for="(k,j) in e.items" :key="j" @click="venueSelect(i,j)">
                         <view
                             :class="[
-                                k._isSelect?'green':
+                                k._isSelect?'cyan':
                                 k.is_take_up?'black':
                                 !k.is_valid?'grey':''
                             ]"
@@ -93,12 +94,16 @@
                 </view>
             </block>
             <view class="sfb-tip-list" v-else>
-                <view class="stl-item" v-for="(e,i) in ['可预订','已售完','已占用','已选择']" :key="i">
-                    <view></view>
-                    <view>{{e}}</view>
+                <view 
+                    class="stl-item" 
+                    v-for="(e,i) in tipArray" 
+                    :key="i"
+                >
+                    <view :class="[ e.c ]"></view>
+                    <view>{{ e.n || '-'}}</view>
                 </view>
             </view>
-            <view class="sfb-btn-bar">
+            <view class="sfb-btn-bar" v-if="selectedVenueList.length">
                 <view class="sbb-price"><text>¥</text>{{totalPrice || '0.00'}}</view>
                 <view class="sbb-btn" hover-class="hover-active" @click="toOrderConfirm">
                     {{selectedVenueList.length?'提交订单':'请选择场地'}}
@@ -108,15 +113,22 @@
         <view class="sm-fixed-tip" v-if="occupyTip!==''">
             <text>{{occupyTip || '-'}}</text>
         </view>
+        <view class="sm-fixed-order">
+            <order-modal></order-modal>
+        </view>
     </view>
 </template>
 
 <script>
 import { API } from '../../../js/api';
 import { servers } from '../../../js/server';
-import util from '../../../utils/util'
+import util from '../../../utils/util';
+import order_modal from '../../../components/site/order_modal/order_modal.vue';
 let tipTimer = null;
 export default {
+    components: {
+        'order-modal': order_modal
+    },
     data(){
         return {
             storeList: [],          // 店铺列表
@@ -130,10 +142,28 @@ export default {
             totalPrice: 0,
             occupyTip: '', // 占用提示
             venueAreaSize: '', // 场地滚动区域大小
+            tipArray: [
+                { n: '空场', c: '' },
+                { n: '小程序预定', c: 'green' },
+                { n: '课程预定', c: 'pistac' },
+                { n: '固定场锁定', c: 'blue' },
+                { n: '已占用', c: 'black' },
+            ],
         }
     },
     computed: {
-        
+        // 场地时间间隔列表
+        venueTimeList(){
+            let { venueList } = this;
+            console.warn(venueList)
+            if(!venueList.length || !venueList[0] || !venueList[0].items || !venueList[0].items.length)return [];
+            let _obj = {};
+            return ([].concat(...venueList[0].items.map(e=>e.time.split('-')))).filter(e=>{
+                let _bol = !!_obj[e];
+                !_bol?_obj[e] = true:'';
+                return !_bol;
+            })
+        }
     },
     onUnload(){
         this.occupyTip = '';
@@ -198,6 +228,7 @@ export default {
                     date: curDateInfo.dateStr || '',
                 })
                 if(!_venueList.length)return util.showNone('没有场地信息！');
+
                 this.venueList = _venueList || [];
                 this.$nextTick(_=>{
                     this.getSelectedVenues();
@@ -517,12 +548,21 @@ export default {
                 .sti-item{
                     position: relative;
                     width: 112upx;
-                    height: 84upx;
-                    text-align: center;
-                    line-height: 84upx;
-                    font-size: 24upx;
-                    color: #333;
+                    height: 90upx;
                     border-right: 2upx solid #d8d8d8;
+                    >view{
+                        position: absolute;
+                        left: 0;
+                        top: 50%;
+                        padding: 0 10upx;
+                        height: 100%;
+                        width: 100%;
+                        text-align: center;
+                        line-height: 84upx;
+                        font-size: 24upx;
+                        color: #333;
+                        @include textHide(1);
+                    }
                     &::after{
                         content: '';
                         position: absolute;
@@ -540,7 +580,9 @@ export default {
                     }
                     &:first-child{
                         height: 72upx;
-                        border-right-color: transparent;
+                        >view{
+                            line-height: 72upx;
+                        }
                         
                     }
                 }
@@ -553,21 +595,22 @@ export default {
                 white-space: nowrap;
                 .svl-list{
                     display: inline-block;
-                    width: 136upx;
+                    width: 196upx;
                     .sl-item{
-                        height: 84upx;
+                        height: 90upx;
                         &:not(:first-child){
                             @include centerFlex(center);
                             >view{
                                 padding: 0 10upx;
-                                width: 116upx;
-                                height: 44upx;
-                                line-height: 40upx;
+                                width: 176upx;
+                                height: 72upx;
+                                line-height: 68upx;
                                 text-align: center;
                                 border: 2upx solid $themeColor;
-                                border-radius: 22upx;
+                                border-radius: 10upx;
                                 font-size: 28upx;
                                 color: $themeColor;
+                                background-color: #fff;
                                 @include textHide(1);
                                 &.grey{
                                     color: #9A9A9D;
@@ -579,21 +622,33 @@ export default {
                                     border-color: $themeColor;
                                     background-color: $themeColor;
                                 }
+                                &.cyan{
+                                    background-color: rgba($color: #33CCA9, $alpha: .18);
+                                }
                                 &.black{
                                     color: #FFF;
                                     border-color: #333333;
                                     background-color: #333333;
                                 }
+                                &.blue{
+                                    color: #fff;
+                                    border-color: #4F7CC7;
+                                    background-color: #4F7CC7;
+                                }
+                                .pistac{
+                                    color: #fff;
+                                    background-color: #68C43B;
+                                    border-color: #68C43B;
+                                }
                             }
                         }
                         &:first-child{
                             height: 72upx;
-                            
                             line-height: 70upx;
                             text-align: center;
                             font-size: 24upx;
                             font-weight: 500;
-                            border-bottom: 2upx solid #F2F2F7;
+                            border-bottom: 2upx solid #D8D8D8;
                             background-color: #fff;
                             color: #333;
                             @include textHide(1);
@@ -677,33 +732,38 @@ export default {
                 height: 182upx;
                 @include centerFlex(center);
                 .stl-item{
-                    &:nth-child(2)>view:first-child{
-                        border-color: #D7D7DD;
-                        background-color: #D7D7DD;
-                    }
-                    &:nth-child(3)>view:first-child{
-                        border-color: #333333;
-                        background-color: #333333;
-                    }
-                    &:nth-child(4)>view:first-child{
-                        background-color: $themeColor;
-                    }
                     >view{
                         margin: 0 14upx;
                         &:first-child{
-                            width: 116upx;
-                            height: 44upx;
-                            border-radius: 22upx;
-                            border: 2upx solid $themeColor;
-                            margin-bottom: 14upx;
+                            margin: 0 auto;
+                            width: 40upx;
+                            height: 22upx;
+                            border-radius: 6upx;
+                            border: 1upx solid $themeColor;
+                            margin-bottom: 8upx;
 
                         }
                         &:nth-child(2){
-                            line-height: 40upx;
+                            line-height: 34upx;
                             text-align: center;
                             font-size: 28upx;
                             color: #9a9a9d;
                         }
+                        &.green{
+                            background-color: $themeColor;
+                        }
+                        &.pistac{
+                            background-color: #68C43B;
+                            border-color: #68C43B;
+                        }
+                        &.blue{
+                            background-color: #4F7CC7;
+                            border-color: #4F7CC7;
+                        }
+                        &.black{
+                            background-color: #333333;
+                            border-color: #333333;
+                        }
                     }
                 }
             }
@@ -753,5 +813,12 @@ export default {
             line-height: 44upx;
             color: #fff;
         }
+        .sm-fixed-order{
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            z-index: 2;
+            width: 100%;
+        }
     }
 </style>
\ No newline at end of file
diff --git a/src/pages/site/occupy_success/occupy_success.vue b/src/pages/site/occupy_success/occupy_success.vue
new file mode 100644
index 0000000..ae22c07
--- /dev/null
+++ b/src/pages/site/occupy_success/occupy_success.vue
@@ -0,0 +1,35 @@
+<template>
+    <view class="occupy-success">
+        <view class="os-address">欧轩智能场馆(羽毛球馆永泰店)</view>
+        <image class="os-code"></image>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .occupy-success{
+        padding: 0 24upx;
+        .os-address{
+            margin-bottom: 80upx;
+            height: 92upx;
+            line-height: 90upx;
+            border-bottom: 2upx solid #D8D8D8;
+            font-size: 32upx;
+            color: #333;
+            @include textHide(1);
+        }
+        .os-code{
+            margin: 0 auto 40upx;
+            display: block;
+            width: 400upx;
+            height: 400upx;
+            background-color: skyblue;
+        }
+    }
+</style>
\ No newline at end of file