Browse Source

add site modal

course
刘嘉炜 4 years ago
parent
commit
015b59f292
  1. 176
      src/components/site/order_modal/order_modal.vue
  2. 9
      src/js/api.js
  3. 10
      src/pages.json
  4. 8
      src/pages/site/confirm/confirm.vue
  5. 149
      src/pages/site/manage/manage.vue

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

9
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 核销

10
src/pages.json

@ -1,22 +1,22 @@
{
"pages": [ //pageshttps://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": {

8
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
}
})

149
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_idstadium_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>
Loading…
Cancel
Save