519 lines
12 KiB
Vue
519 lines
12 KiB
Vue
<template>
|
|
<view class="color-333 u-font-28">
|
|
<view class="fixed-top bg-fff ">
|
|
<view class="u-p-l-28 u-p-r-28 u-p-t-32 ">
|
|
<my-tabs :list="tabs.list" @change="tabsChage" :defaultIndex="tabs.active"></my-tabs>
|
|
</view>
|
|
<template v-if="tabs.active===0">
|
|
<view class="u-p-l-28 u-p-r-28 u-m-t-8 u-flex u-row-between u-relative">
|
|
<view class="u-flex u-p-l-8 no-wrap">
|
|
<view class="u-flex u-p-t-30 u-p-b-30 u-row-center" @tap="showTypesToggle">
|
|
<text class="u-m-r-12">状态</text>
|
|
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg"
|
|
class="icon-arrow-down-fill" mode="">
|
|
</image>
|
|
</view>
|
|
<view class="u-flex u-m-l-60 u-p-t-30 u-p-b-30 u-row-center" @tap="timeToggle">
|
|
<text class="u-m-r-12">筛选时间</text>
|
|
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg"
|
|
class="icon-arrow-down-fill" mode="">
|
|
</image>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view style="width: 164rpx;"></view>
|
|
<view class="search-box">
|
|
<view class="search-btn u-flex" @tap="showSearch"
|
|
:style="{width:search.show?'694rpx':'164rpx'}">
|
|
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
|
<view class="u-flex-1 u-p-l-10"><input v-model="search.keyword" @confirm="searchConfirm"
|
|
type="text" placeholder-style="font-size:28rpx;" placeholder="搜索" /></view>
|
|
<view @tap.stop="hideSearch" v-if="search.show">取消</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view :style="{height:types.show?typesHeight:0}" class="tranistion types overflow-hide">
|
|
<view @tap="changeTypesActive(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
|
v-for="(item,index) in types.list" :key="index">
|
|
<view>{{item}}</view>
|
|
<uni-icons v-if="types.active===index" type="checkmarkempty"
|
|
:color="color.ColorMain"></uni-icons>
|
|
</view>
|
|
<view :style="{height: types.bottomHeight+'px'}"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<template v-if="tabs.active===1">
|
|
|
|
<view class="u-flex u-m-t-20 u-p-l-28 ">
|
|
<view>查询日期</view>
|
|
<view class="u-flex-1 u-flex u-m-l-60 bg-gray u-p-t-18 u-p-b-14 u-p-l-32 u-p-r-32"
|
|
@tap="dateToggle">
|
|
<image src="/pageReserveSeat/static/images/icon-calender.svg" class="icon-default-size" mode="">
|
|
</image>
|
|
<view class="line"></view>
|
|
<uni-dateformat format="yyyy-MM-dd" :date="filters.time1.start"></uni-dateformat>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-32 u-p-l-28 u-flex quickTimeSels u-p-b-32">
|
|
<view class="item u-m-r-30" :class="{'active':index===quickTimeSels.active}"
|
|
@tap="changeFiltersTime(index,item.value)" v-for="(item,index) in quickTimeSels.list"
|
|
:key="index">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<template v-if="tabs.active===2">
|
|
<view style="height: 32rpx;"></view>
|
|
</template>
|
|
</view>
|
|
|
|
<template v-if="tabs.active===0">
|
|
<view class=" min-page bg-gray list ">
|
|
<view class="u-flex u-m-b-30" v-if="filters.time.start&&filters.time.end">
|
|
<view class="time-area u-font-24 color-main u-flex">
|
|
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.start"></uni-dateformat>
|
|
<text class="u-p-l-10 u-p-r-10">至</text>
|
|
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.end"></uni-dateformat>
|
|
<view class="u-m-l-10 u-flex" @tap="clearTime">
|
|
<uni-icons type="clear" size="18" :color="color.ColorMain"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="recoreds color-fff ">
|
|
<view class="u-font-32">数据统计</view>
|
|
<view class="u-flex u-row-between u-m-t-48">
|
|
<view class="u-flex u-flex-col u-flex-1 u-row-center u-col-top">
|
|
<view>今日预约数</view>
|
|
<view class="u-font-32 u-p-l-26 u-m-t-10 font-bold">0</view>
|
|
</view>
|
|
<view class="u-flex u-flex-col border-l-r u-flex-1 u-row-center u-col-center">
|
|
<view>明日预约数</view>
|
|
<view class="u-font-32 u-m-t-10 font-bold">0</view>
|
|
</view>
|
|
<view class="u-flex u-flex-col u-flex-1 u-row-center u-col-center">
|
|
<view>已核销</view>
|
|
<view class="u-font-32 u-m-t-10 font-bold">0</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-row-between u-m-t-24">
|
|
<view class="u-flex u-flex-1 u-flex-col u-row-center u-col-top">
|
|
<view>未核销</view>
|
|
<view class="u-font-32 u-p-l-26 u-m-t-10 font-bold">0</view>
|
|
</view>
|
|
<view class="u-flex u-flex-1 u-flex-col border-l-r u-flex-1 u-row-center u-col-center">
|
|
<view>总预约数</view>
|
|
<view class="u-font-32 u-m-t-10 font-bold">0</view>
|
|
</view>
|
|
<view class="u-flex u-flex-1 u-flex-col u-row-center u-col-center">
|
|
<view>已收定金(元)</view>
|
|
<view class="u-font-32 u-m-t-10 font-bold">0</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-row-between u-m-t-24">
|
|
<view class="u-flex u-flex-col u-row-center u-col-top">
|
|
<view>已退定金(元)</view>
|
|
<view class="u-font-32 u-p-l-26 u-m-t-10 font-bold">0</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<template v-if="page.list.length">
|
|
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in page.list" :key="index">
|
|
<list-item></list-item>
|
|
</view>
|
|
<uni-load-more :status="page.status" />
|
|
</template>
|
|
<template v-else>
|
|
<view class="" style="margin-top: 150rpx;">
|
|
<!-- <my-empty tips="暂无出库记录"></my-empty> -->
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
<view class="u-fix bottom">
|
|
<my-button shape="circle" type="primary" @tap="saoma">扫码核销</my-button>
|
|
</view>
|
|
</template>
|
|
|
|
<template v-if="tabs.active===1">
|
|
<view class=" min-page bg-gray list " style="padding-top: 172px;">
|
|
|
|
<template v-if="yuyue.list.length">
|
|
<view class="bg-fff">
|
|
<view class="color-333 u-font-28 table u-text-center">
|
|
<view class="u-flex head">
|
|
<view class="">人数</view>
|
|
<view class="u-flex-1">时间</view>
|
|
<view class="">当天剩余预约数(个)</view>
|
|
</view>
|
|
<view class="u-flex item" v-for="(item,index) in yuyue.list" :key="index">
|
|
<view>1-2人</view>
|
|
<view class="u-flex-1">
|
|
<view>11:00-14:00</view>
|
|
<view class="u-m-t-24">17:00-21:00</view>
|
|
</view>
|
|
<view>99</view>
|
|
</view>
|
|
</view>
|
|
<uni-load-more :status="yuyue.status" />
|
|
</view>
|
|
<view style="height: 100px;"></view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="" style="margin-top: 150rpx;">
|
|
<!-- <my-empty tips="暂无出库记录"></my-empty> -->
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<template v-if="tabs.active===2">
|
|
<view class="min-page bg-gray list " style="padding-top: 83px;">
|
|
<function-settings></function-settings>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<my-date-pickerview @confirm="datePickerConfirm" ref="dateAreaPicker"></my-date-pickerview>
|
|
|
|
<!-- 剩余预约查询时间筛选 -->
|
|
<my-date-pickerview @confirm="dateConfirm" :selTime="filters.time1.start" :isArea="false" mode="date"
|
|
ref="datePicker"></my-date-pickerview>
|
|
|
|
|
|
<my-mask ref="mask" @close="hideType"></my-mask>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onLoad,
|
|
onReady,
|
|
onShow,
|
|
onPageScroll,
|
|
onPullDownRefresh
|
|
} from '@dcloudio/uni-app';
|
|
import color from '@/commons/color';
|
|
// import myEmpty from '../components/empty';
|
|
import listItem from './components/list-item';
|
|
import myMask from '@/components/my-components/my-mask'
|
|
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
|
import myTabs from '@/components/my-components/my-tabs'
|
|
import myButton from '@/components/my-components/my-button'
|
|
import functionSettings from './components/function-settings'
|
|
import {
|
|
ref,
|
|
reactive,
|
|
computed
|
|
} from 'vue';
|
|
|
|
const datePicker = ref(null)
|
|
|
|
function dateToggle() {
|
|
datePicker.value.toggle()
|
|
}
|
|
|
|
function dateConfirm(e) {
|
|
console.log(e);
|
|
filters.time1.start = e
|
|
}
|
|
|
|
|
|
const yuyue = reactive({
|
|
list: [1, 2],
|
|
status: 'noMore'
|
|
})
|
|
|
|
const quickTimeSels = reactive({
|
|
list: [{
|
|
name: '今天',
|
|
value: 0
|
|
},
|
|
{
|
|
name: '明天',
|
|
value: 1
|
|
},
|
|
{
|
|
name: '后天',
|
|
value: 2
|
|
}
|
|
],
|
|
active: 0
|
|
})
|
|
|
|
function changeFiltersTime(index, day) {
|
|
quickTimeSels.active = index
|
|
const daytemp = 1000 * 60 * 60 * 24
|
|
filters.time1.start = new Date().getTime() + daytemp * day
|
|
}
|
|
|
|
const tabs = reactive({
|
|
list: ['预约列表', '剩余预约查询', '功能设置'],
|
|
active: 2
|
|
})
|
|
|
|
function tabsChage(i) {
|
|
tabs.active = i
|
|
}
|
|
const search = reactive({
|
|
keyword: '',
|
|
show: false
|
|
})
|
|
|
|
function searchConfirm() {
|
|
|
|
}
|
|
|
|
function hideSearch() {
|
|
search.show = false
|
|
maskHide()
|
|
}
|
|
|
|
function showSearch() {
|
|
search.show = true
|
|
types.show = false
|
|
maskShow()
|
|
}
|
|
|
|
const page = reactive({
|
|
list: [],
|
|
status: 'noMore'
|
|
})
|
|
|
|
|
|
const types = reactive({
|
|
list: ['全部', '待处理','已同意','已拒绝','已核销','已取消','已失效'],
|
|
active: 0,
|
|
show: false,
|
|
bottomHeight: 14
|
|
})
|
|
|
|
function hideType() {
|
|
types.show = false
|
|
search.show = false
|
|
}
|
|
const typesHeight = computed(() => {
|
|
return 30 * types.list.length + types.bottomHeight + 'px'
|
|
})
|
|
|
|
function changeTypesActive(i) {
|
|
types.active = i
|
|
types.show = false
|
|
toggleMask()
|
|
}
|
|
|
|
function showTypesToggle() {
|
|
types.show = !types.show
|
|
if (types.show) {
|
|
maskShow()
|
|
} else {
|
|
maskHide()
|
|
}
|
|
}
|
|
|
|
const $basicfilters = {
|
|
time: {
|
|
start: new Date().getTime(),
|
|
end: ''
|
|
},
|
|
time1: {
|
|
start: new Date().getTime(),
|
|
end: ''
|
|
}
|
|
}
|
|
const filters = reactive({
|
|
...$basicfilters
|
|
})
|
|
|
|
function clearTime() {
|
|
filters.time.start = ''
|
|
filters.time.end = ''
|
|
}
|
|
|
|
|
|
|
|
const dateAreaPicker = ref(null)
|
|
|
|
function timeToggle() {
|
|
dateAreaPicker.value.toggle()
|
|
}
|
|
|
|
function datePickerConfirm(e) {
|
|
console.log(e);
|
|
filters.time.start = e.start
|
|
filters.time.end = e.end
|
|
}
|
|
|
|
const mask = ref(null)
|
|
|
|
function toggleMask(show) {
|
|
mask.value.toggle()
|
|
}
|
|
|
|
function maskShow() {
|
|
mask.value.open()
|
|
}
|
|
|
|
function maskHide() {
|
|
mask.value.close()
|
|
}
|
|
|
|
onLoad(opt => {})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.table {
|
|
border-radius: 12rpx 12rpx 0rpx 0rpx;
|
|
overflow: hidden;
|
|
font-size: 24rpx;
|
|
|
|
.head {
|
|
padding: 24rpx;
|
|
background: #AEBAD2;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.item {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.item:nth-of-type(2n+1) {
|
|
background-color: rgb(249, 249, 249);
|
|
}
|
|
}
|
|
|
|
.quickTimeSels {
|
|
.item {
|
|
color: #666;
|
|
padding: 8rpx 28rpx;
|
|
border-radius: 100rpx;
|
|
background: #F7F7FA;
|
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
}
|
|
|
|
.active {
|
|
background: #E6F0FF;
|
|
color: $my-main-color;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 1px;
|
|
background-color: #999;
|
|
margin-left: 18rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
|
|
.bottom {
|
|
bottom: calc(env(safe-area-inset-bottom) + 32rpx);
|
|
left: 110rpx;
|
|
right: 110rpx;
|
|
}
|
|
|
|
.fixed-top {
|
|
z-index: 10;
|
|
}
|
|
|
|
.recoreds {
|
|
background: linear-gradient(127deg, #33A0FF 0%, #6699FF 100%);
|
|
box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
|
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
|
padding: 32rpx 40rpx 40rpx 48rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
content: '';
|
|
top: -112rpx;
|
|
border-radius: 50%;
|
|
display: block;
|
|
position: absolute;
|
|
right: 56rpx;
|
|
width: 224rpx;
|
|
box-shadow: 0 0 1px #666;
|
|
height: 224rpx;
|
|
background: linear-gradient(180deg, rgba(103, 204, 254, 0.6) 0%, rgba(144, 87, 255, 0) 100%);
|
|
}
|
|
|
|
.border-l-r {
|
|
position: relative;
|
|
|
|
&::after,
|
|
&::before {
|
|
position: absolute;
|
|
content: '';
|
|
display: block;
|
|
top: 18rpx;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background-color: rgba(255, 255, 255, 0.37);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
&::before {
|
|
left: 0;
|
|
}
|
|
|
|
&::after {
|
|
right: 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
background-color: #fff;
|
|
padding: 16rpx 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
display: flex;
|
|
|
|
.search-btn {
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
// width: 164rpx;
|
|
transition: all .3s ease-in-out;
|
|
background-color: rgb(247, 247, 247);
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
|
|
.types {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.time-area {
|
|
background: #E6F0FF;
|
|
border-radius: 100px;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.icon-arrow-down-fill {
|
|
width: 16rpx;
|
|
height: 10rpx;
|
|
}
|
|
|
|
.list {
|
|
padding: 120px 30rpx 30rpx 30rpx;
|
|
}
|
|
</style> |