|
|
|
@ -1,26 +1,82 @@ |
|
|
|
<script setup> |
|
|
|
import { reactive, ref } from "vue"; |
|
|
|
import { reactive, ref, computed } from "vue"; |
|
|
|
import { accAdd } from "@/utils/calculation"; |
|
|
|
import textLine from "./text_line.vue"; |
|
|
|
const isShowSpecificTime = ref(false); |
|
|
|
const props = defineProps({ |
|
|
|
typeName: { |
|
|
|
type: String, |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
dateStr: { |
|
|
|
type: String, |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
dayStr: { |
|
|
|
type: String, |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
venueLs: { |
|
|
|
type: Array, |
|
|
|
default: [] |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
const gatherList = computed({ |
|
|
|
get(){ |
|
|
|
return formatVenueLs(props.venueLs); |
|
|
|
} |
|
|
|
}) |
|
|
|
const totalAmount = computed(_=> (props.venueLs || []).reduce((res, item, idx)=>accAdd(res, item.price), 0)); |
|
|
|
|
|
|
|
function formatVenueLs(list){ |
|
|
|
// 分类 |
|
|
|
let _tempMap = new Map(); |
|
|
|
list.forEach(e=>(_tempMap.get(e.venue_id) || _tempMap.set(e.venue_id, []).get(e.venue_id)).push(e)); |
|
|
|
|
|
|
|
let showArr = []; |
|
|
|
_tempMap.forEach(v=>{ |
|
|
|
// 排序 |
|
|
|
v.sort((a, b)=>a.index - b.index); |
|
|
|
if(!v?.length)return; |
|
|
|
let _name, start, end, lastIdx; |
|
|
|
v.forEach(ele=>{ |
|
|
|
let [ _st, _et ] = (ele.time).split('-'); |
|
|
|
if(_name&&ele.index !== (lastIdx + 1)){ |
|
|
|
showArr.push({ name: _name, duration: `${start}-${end}` }); |
|
|
|
start = _st; |
|
|
|
}else if(!_name){ |
|
|
|
_name = ele.venue_name, start = _st; |
|
|
|
} |
|
|
|
lastIdx = ele.index; |
|
|
|
end = _et; |
|
|
|
}); |
|
|
|
if(_name&&start&&end){ |
|
|
|
showArr.push({ name: _name, duration: `${start}-${end}` }); |
|
|
|
_name = undefined, start = undefined, end = undefined, lastIdx = 0; |
|
|
|
} |
|
|
|
}) |
|
|
|
return showArr |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<slot name="title"></slot> |
|
|
|
<text-line label="预定项目：">羽毛球</text-line> |
|
|
|
<text-line label="预定日期：">2019年05月17日(周五)</text-line> |
|
|
|
<text-line label="预定项目：">{{ typeName ?? '' }}</text-line> |
|
|
|
<text-line label="预定日期：">{{ dateStr ?? '' }}（{{ dayStr ?? '' }}）</text-line> |
|
|
|
<view class="soi-booking-info"> |
|
|
|
<view class="sbi-name">预定场次：</view> |
|
|
|
<view class="sbi-time-range"> |
|
|
|
<block v-for="(e, i) in 3" :key=i> |
|
|
|
<view class="str-item">{{ e.name || '几号馆' }} {{ e.time || '时间段' }}</view> |
|
|
|
<block v-for="(e, i) in gatherList" :key=i> |
|
|
|
<view class="str-item">{{ e.name || '几号馆' }} {{ e.duration || '时间段' }}</view> |
|
|
|
</block> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="vmm-line" v-if='isShowSpecificTime'> |
|
|
|
<view>具体场次：</view> |
|
|
|
<view> |
|
|
|
<view v-for="(e,i) in 3" :key="i">{{ 'venue_name' }} {{ 'duration' }} ({{ 0 }}元)</view> |
|
|
|
<view v-for="(e,i) in venueLs" :key="i">{{ e.venue_name ?? '' }} {{ e.time ?? '' }} ({{ e?.price ?? 0 }}元)</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="soi-fold-btn" @click="isShowSpecificTime = !isShowSpecificTime"> |
|
|
|
@ -28,8 +84,8 @@ const isShowSpecificTime = ref(false); |
|
|
|
<text class="sfb-icon" :class="[ isShowSpecificTime ? 'rotate' :'' ]"></text> |
|
|
|
</view> |
|
|
|
<view class="vvm-total"> |
|
|
|
<view>小计（共{{0}}场）</view> |
|
|
|
<view>￥{{ 0}}</view> |
|
|
|
<view>小计（共{{ venueLs?.length }}场）</view> |
|
|
|
<view>￥{{ totalAmount }}</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
