From 015b59f292b6eba38712d9461b5dd4e70590b97b Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Mon, 26 Jul 2021 18:01:37 +0800
Subject: [PATCH] add site modal

---
 src/components/site/order_modal/order_modal.vue | 176 ++++++++++++++++--------
 src/js/api.js                                   |   9 +-
 src/pages.json                                  |  10 +-
 src/pages/site/confirm/confirm.vue              |   8 +-
 src/pages/site/manage/manage.vue                | 149 +++++++++++++-------
 5 files changed, 236 insertions(+), 116 deletions(-)

diff --git a/src/components/site/order_modal/order_modal.vue b/src/components/site/order_modal/order_modal.vue
index aef911a..a4a4c17 100644
--- a/src/components/site/order_modal/order_modal.vue
+++ b/src/components/site/order_modal/order_modal.vue
@@ -1,92 +1,156 @@
 <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 class="fixed-mask" @click="modalClose">
+		<view class="order-modal" @click.stop="_=>false">
+			<view class="om-title">{{ queryInfo.venueInfo.zh_text || '-' }}</view>
+			<image class="om-close"  @click="modalClose" mode="aspectFit" src="/static/images/icon/x_close.png"></image>
+			<view class="om-name-line">
+				<view class="onl-view">{{ orderInfo.stadium_name || '-' }}</view>
+				<!-- <view class="onl-view">待使用</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 class="om-info-line">
+				<view class="oil-view">订单编号：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.order_no || '-' }}</view>
+				</view>
 			</view>
-		</view>
-		<view class="om-info-line">
-			<view class="oil-view">手机号码：</view>
-			<view class="oil-view">
-				<view class="ov-view">18316553872</view>
+			<view class="om-info-line">
+				<view class="oil-view">创建时间：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.create_at || '-' }}</view>
+				</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 class="om-info-line">
+				<view class="oil-view">手机号码：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.phone || '-' }}</view>
+				</view>
+			</view>
+			<view class="om-info-line">
+				<view class="oil-view">验证码：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.verify_code || '-' }}</view>
+				</view>
 			</view>
-		</view>
 
-		<view class="om-border"></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 class="om-name-line">
+				<view class="onl-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 class="om-info-line">
+				<view class="oil-view">预订项目：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.stadium_name || '-' }}</view>
+				</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 class="om-info-line">
+				<view class="oil-view">预订日期：</view>
+				<view class="oil-view">
+					<view class="ov-view">{{ orderInfo.date || '-' }}</view>
+				</view>
+			</view>
+			<view class="om-info-line">
+				<view class="oil-view">预订场次：</view>
+				<view class="oil-view">
+					<view class="ov-view" v-for="(e, i) in orderInfo.sessions" :key="i">
+						{{ e.venue_name || '' }}   {{ e.duration || '' }}   （￥{{ e.price || '' }} ）
+					</view>
+				</view>
+			</view>
+			<view class="om-total">实付款 ￥{{ orderInfo.amount || '0' }}</view>
+			<view class="om-btns" v-if="false">
+				<view class="ob-view">分享给朋友</view>
+				<view class="ob-view">取消占用</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>
+	</view>
+    
 </template>
 
 <script>
+import { API } from '../../../js/api'
+import { servers } from '../../../js/server'
+import util from '../../../utils/util'
 export default {
-    
+	props: {
+		queryInfo: {
+			type: Object,
+			default: {}
+		}
+	},
+	data(){
+		return {
+			orderInfo: {}
+		}
+	},
+    mounted(){
+		console.warn('2222222222222222222222', this.queryInfo)
+		this.getOrderInfo();
+	},
+	methods: {
+		modalClose(){
+			this.$emit('close');
+		},
+		getOrderInfo(){
+			util.showLoad();
+			servers.get({
+				url: API.venue.dashboardInfo,
+				data: this.queryInfo,
+				isDefaultGet: false,
+			})
+			.then(res=>{
+				util.hideLoad();
+				if(res.data.code == 0){
+					this.orderInfo = res.data.data || {}
+				}else{
+					// util.showNone(res.data.message || '加载失败！');
+					this.modalClose();
+					util.showModal({
+						title: '提示',
+						content: res.data.message || '加载失败！',
+						success: mRes=> {
+							
+						}
+					})
+				}
+			})
+			.catch(util.hideLoad)
+				
+		}
+	}
 }
 </script>
 
 <style scoped lang="scss">
 	@import '~style/public.scss';
+	.fixed-mask{
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		z-index: 10;
+		width: 100%;
+		background-color: rgba($color: #000000, $alpha: .5);
+	}
     .order-modal{
-		position: relative;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		width: 100%;
 		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;
+        background-color: #fff;
 		.om-close{
 			position: absolute;
 			right: 30upx;
 			top: 30upx;
 			width: 34upx;
 			height: 34upx;
-			background-color: skyblue;
 		}
 		.om-title{
 			margin-bottom: 34upx;
diff --git a/src/js/api.js b/src/js/api.js
index 90f0a4b..abc6d31 100644
--- a/src/js/api.js
+++ b/src/js/api.js
@@ -60,10 +60,17 @@ API['employee'] = {
 
 API['venue'] = {
   venueTypes: `${ORIGIN}/stadium/venue/types`,  // 场馆类型
-  venueList: `${ORIGIN}/stadium/book/list`,  // 场地列表
+  // venueList: `${ORIGIN}/stadium/book/list`,  // 场地列表
+
   venueTakeUp: `${ORIGIN}/admin/assistant/venue/takeUp`,  // 商家助手-占用场地提交
   takeUpList: `${ORIGIN}/admin/timeSelect/list/4`,  // 商家助手-占用场地列表
   setStatus: `${ORIGIN}/admin/timeSelect/setStatus`,  // 商家助手-占用场地列表
+
+  // 20210726 新增
+  venueList: `${ORIGIN}/admin/stadium/venue/dashboard/list`,  // 场地列表 20210726 看板新增修改
+  dashboardInfo: `${ORIGIN}/admin/stadium/venue/dashboard/detail`,  // 商家助手-占用场地列表
+  
+
 }
 
 // 2.1 核销
diff --git a/src/pages.json b/src/pages.json
index e413226..b7eec50 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,22 +1,22 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		
 		{
-			"path": "pages/site/occupy_share/occupy_share",
+			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "分享"
 			}
 		},
 		{
-			"path": "pages/index/index",
+			"path": "pages/login/login",
 			"style": {
 			}
 		},
 		{
-			"path": "pages/login/login",
+			"path": "pages/site/occupy_share/occupy_share",
 			"style": {
+				"navigationBarTitleText": "分享"
 			}
 		},
-		
 		{
 			"path": "pages/site/occupy_success/occupy_success",
 			"style": {
diff --git a/src/pages/site/confirm/confirm.vue b/src/pages/site/confirm/confirm.vue
index 10e03d1..76a887a 100644
--- a/src/pages/site/confirm/confirm.vue
+++ b/src/pages/site/confirm/confirm.vue
@@ -24,7 +24,7 @@
                     <view>预定场次：</view>
                     <view>
                         <block v-for="(e, i) in occupyInfo.venueList" :key="i">
-                            <view>{{e.parentObj.name || '-'}} {{e.time || '-'}} (¥{{e.price || '-'}})</view>
+                            <view>{{e.parentObj.venue_name || '-'}} {{e.durations || '-'}} (¥{{e.price || '-'}})</view>
                         </block>
                     </view>
                 </view>
@@ -84,9 +84,9 @@ export default {
                     date: dateInfo.dateStr,
                     items: venueList.map(el=>{
                         return {
-                            venue_id: el.parentObj.id,
-                            venue_name: el.parentObj.name,
-                            duration: el.time,
+                            venue_id: el.parentObj.venue_id,
+                            venue_name: el.parentObj.venue_name,
+                            duration: el.duration,
                             price: el.price
                         }
                     })
diff --git a/src/pages/site/manage/manage.vue b/src/pages/site/manage/manage.vue
index 1e5d35e..c9a4121 100644
--- a/src/pages/site/manage/manage.vue
+++ b/src/pages/site/manage/manage.vue
@@ -16,17 +16,25 @@
                 </picker>
                 <view class="st-tip">{{curTypeInfo.rule_text || '-'}}</view>
             </view>
-            <view class="sh-date">
-                <picker mode="date">
+            <view class="sh-date" v-if="dateList.length">
+                <picker 
+                    mode="date" 
+                    :value="dateList[0].dateStr" 
+                    data-type='start' 
+                    @change="datePickerChange">
                     <view class="sd-box">
-                        <text>2020年5月16日</text>
+                        <text>{{ dateList[0].ZhDateStr || '-' }}</text>
                         <view></view>
                     </view>
                 </picker>
                 <text>至</text>
-                <picker mode="date">
+                <picker 
+                    mode="date" 
+                    :value="dateList[dateList.length - 1].dateStr" 
+                    data-type="end"
+                    @change="datePickerChange">
                     <view class="sd-box">
-                        <text>2020年5月16日</text>
+                        <text>{{ dateList[dateList.length - 1].ZhDateStr || '-' }}</text>
                         <view></view>
                     </view>
                 </picker>
@@ -59,19 +67,12 @@
             </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">
-                    <view class="sl-item">{{e.name || '-'}}</view>
+                    <view class="sl-item">{{e.venue_name || '-'}}</view>
                     <view class="sl-item" v-for="(k,j) in e.items" :key="j" @click="venueSelect(i,j)">
                         <view
-                            :class="[
-                                k._isSelect?'cyan':
-                                k.is_take_up?'black':
-                                !k.is_valid?'grey':''
-                            ]"
+                            :class="[ k._isSelect? 'cyan' : '', getVenueStatusnInfo(k).className ]"
                         >
-                            {{
-                                k.is_take_up?'已占用':
-                                !k.is_valid?'已售':`¥${k.price || 0}`
-                            }}
+                            {{ getVenueStatusnInfo(k).zh_text || '-' }}
                         </view>
                     </view>
                 </view>
@@ -87,8 +88,8 @@
                     </view>
                     <scroll-view class="sss-list" scroll-y>
                         <view class="sl-item" v-for="(e,i) in selectedVenueList" :key="i">
-                            <view class="si-time">{{e.time || '-'}}</view>
-                            <view class="si-name">{{e.parentObj.name || '-'}}</view>
+                            <view class="si-time">{{e.durations || '-'}}</view>
+                            <view class="si-name">{{e.parentObj.venue_name || '-'}}</view>
                         </view>
                     </scroll-view>
                 </view>
@@ -113,9 +114,7 @@
         <view class="sm-fixed-tip" v-if="occupyTip!==''">
             <text>{{occupyTip || '-'}}</text>
         </view>
-        <view class="sm-fixed-order" v-if="false">
-            <order-modal></order-modal>
-        </view>
+        <order-modal @close="boardInfo=null"  v-if="boardInfo!=null" :query-info="boardInfo"></order-modal>
     </view>
 </template>
 
@@ -149,16 +148,18 @@ export default {
                 { n: '固定场锁定', c: 'blue' },
                 { n: '已占用', c: 'black' },
             ],
+            // 订场看板信息
+            boardInfo: null, // { brand_id，stadium_id, venue_id, date, duration }
+
         }
     },
     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=>{
+            return ([].concat(...venueList[0].items.map(e=>e.durations&&e.durations.split('-')))).filter(e=>{
                 let _bol = !!_obj[e];
                 !_bol?_obj[e] = true:'';
                 return !_bol;
@@ -188,15 +189,10 @@ export default {
             let _dateArr = this.getDateList({}) || [];
             this.dateList = _dateArr;
             this.curDateInfo = _dateArr[0] || {};
+            console.warn(_dateArr,'_dateArr')
             util.hideLoad();
             return  this.$nextTick(_=>this.refreshVenues());
-            // let _venueList = await this.getVenueList({
-            //     type_key: _curType.key,
-            //     stadium_id: _curStore.id,
-            //     date: _dateArr[0].dateStr,
-            // })
-            // if(!_venueList.length)return util.showNone('没有场地信息！')
-            // this.venueList = _venueList || [];
+            
             
         }catch(err){
             util.hideLoad();
@@ -204,12 +200,57 @@ export default {
         }
     },
     methods: {
+        getVenueStatusnInfo(info){
+            switch(info.type){
+                case 'no_price_venue':
+                    return { zh_text: '无法订场', type: info.type, className: 'grey', }
+                case 'empty_venue':
+                    return { zh_text: info.message, type: info.type, className: '', }
+                case 'mini_program':
+                    return { zh_text: '小程序订场', type: info.type, className: 'green', }
+                case 'take_up_venue':
+                    return { zh_text: '管理员占用', type: info.type, className: 'black', }
+                case 'course_venue':
+                    return { zh_text: '课程预定', type: info.type, className: 'pistac', }
+                case 'pay_venue':
+                    return { zh_text: '约玩占用', type: info.type, className: 'black', }
+                case 'fixed_venue':
+                    return { zh_text: '固定场', type: info.type, className: 'blue', }
+                default: return {}
+                    
+                    
+            }
+        },
+        // 20210726 时间范围选择，兼容旧逻辑
+        datePickerChange(e){
+            let { dateList } = this;
+            let _type = e.currentTarget.dataset.type;
+            let _value = e.detail.value;
+            let _selectedDateTimestamp = new Date(_value.replace(/\-/g, '/')).getTime(); // 选择当天0点时间戳
+            let _todayTimestamp = new Date(new Date().toLocaleDateString().replace(/\-/g, '/')).getTime(); // 当天0点
+            let _oneDateTimestamp = 24*60*60*1000;
+            if(_selectedDateTimestamp<_todayTimestamp)return util.showNone(`请选择${new Date().toLocaleDateString().replace(/\-/g, '/')}之后日期`); 
+            let _startTimestamp = _type == 'start' ? _selectedDateTimestamp : new Date(dateList[0].dateStr.replace(/\-/g, '/')).getTime();
+            let _endTimestamp =  _type == 'end' ? _selectedDateTimestamp: new Date(dateList[dateList.length-1].dateStr.replace(/\-/g, '/')).getTime();
+            if(_endTimestamp<_startTimestamp)return util.showNone('请选择正常范围！');
+            let _dateLength = +(((_endTimestamp - _startTimestamp) /_oneDateTimestamp + 1).toFixed());
+            let _dateArr = this.getDateList({
+                startTimestamp: _startTimestamp,
+                length: _dateLength
+            }) || [];
+            this.dateList = _dateArr;
+            this.curDateInfo = _dateArr[0] || {};
+            this.$nextTick(_=>this.refreshVenues());
+            // if(_type=='end'&&_selectedDateTimestamp-_todayTimestamp<_oneDateTimestamp)return util.showNone('时间段最小一天！'); 
+
+            console.warn(e);
+        },
         timeSlotChange(e){
             console.log(e);
             let _timestamp = new Date(e.detail.value.replace(/\-/g, '/')).getTime(); // 当天0点时间
             if(new Date().getTime() - _timestamp > 24*60*60*1000)return util.showNone('请选择正确时间！'); // 一天前
             let _dateArr = this.getDateList({
-                dateTimeStamp: _timestamp,
+                startTimestamp: _timestamp,
             }) || [];
             this.dateList = _dateArr;
             this.curDateInfo = _dateArr[0] || {};
@@ -222,14 +263,15 @@ export default {
             try{
                 util.showLoad();
                 this.venueList = [];
-                let _venueList = await this.getVenueList({
+                let _res = await this.getVenueList({
                     type_key: curTypeInfo.key || '',
                     stadium_id: curStoreInfo.id || '',
                     date: curDateInfo.dateStr || '',
                 })
-                if(!_venueList.length)return util.showNone('没有场地信息！');
+                let _list = _res.dashboard || [];
+                if(!_list.length)return util.showNone('没有场地信息！');
 
-                this.venueList = _venueList || [];
+                this.venueList = _list || [];
                 this.$nextTick(_=>{
                     this.getSelectedVenues();
                     this.setVenueAreaSize();
@@ -258,19 +300,33 @@ export default {
             let { venueList } = this;
             let _venueList = venueList.slice();
             let _curTarget = { ..._venueList[i].items[j] };
-            if(_curTarget.is_take_up){
-                let _str = `操作人:${_curTarget.operator || '-'}\n收取金额: ${_curTarget.price || 0}\n原因: ${_curTarget.take_up_reason || '-'}`;
-                this.showOccupyTip(_str)
-                return
+            // if(_curTarget.is_take_up){
+            //     let _str = `操作人:${_curTarget.operator || '-'}\n收取金额: ${_curTarget.price || 0}\n原因: ${_curTarget.take_up_reason || '-'}`;
+            //     this.showOccupyTip(_str)
+            //     return
+            // }
+            // 设置看板信息
+            if(_curTarget.type !== 'empty_venue'&& _curTarget.type !== 'no_price_venue'){
+                let { curStoreInfo } = this;
+                let _venueInfo = { ..._venueList[i] };
+                return this.boardInfo = {
+                    brand_id: curStoreInfo.curStoreInfo,
+                    stadium_id: curStoreInfo.id,
+                    venue_id: _venueInfo.venue_id,
+                    date: _venueInfo.date,
+                    duration: _curTarget.duration,
+                    venueInfo: {...this.getVenueStatusnInfo(_curTarget)},
+                }
             }
-            if(!_curTarget.is_valid)return;
+            if(_curTarget.type !== 'empty_venue')return;
             _venueList[i].items[j]._isSelect = !_curTarget._isSelect;
             let _ctnList = []; // 提示用, 连场列表
+
             // 连场判断, 需要循环当前列表
             _venueList[i].items = _venueList[i].items.map(e=>{
 
                 let _flag = e.time_arrow_id&&   // 不连场为空
-                            e.is_valid&&        // 已售为false
+                            // e.is_valid&&        // 已售为false
                             e.time_arrow_id == _curTarget.time_arrow_id;
 
                 if(_flag)e._isSelect = !_curTarget._isSelect;
@@ -314,10 +370,10 @@ export default {
             this.$nextTick(_=>this.refreshVenues());
         },
         //  获取近7天列表
-        getDateList({ dateTimeStamp = new Date().getTime(), length = 8 }){
+        getDateList({ startTimestamp = new Date().getTime(), length = 8 }){
             let _dayTimeStamp = 24*60*60*1000;
             return new Array(length).fill(1).map((e,i)=>{
-                let _curStamp = dateTimeStamp + (i*_dayTimeStamp);
+                let _curStamp = startTimestamp + (i*_dayTimeStamp);
                 return {
                     showDateStr: util.formatDate({date: _curStamp, partition: 'zh'}).substr(5),
                     dateStr: util.formatDate({date: _curStamp}),
@@ -353,10 +409,10 @@ export default {
             util.routeTo(`/pages/site/confirm/confirm`, 'rT');
         },
         // 场馆列表
-        getVenueList({type_key,stadium_id,date}){
+        getVenueList({ type_key, stadium_id, date }){
             return servers.get({
                 url: API.venue.venueList,
-                data: {stadium_id,type_key,date},
+                data: { stadium_id, type_key, date },
                 failMsg: '加载分类失败！'
             })
         },
@@ -813,12 +869,5 @@ 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