fix ticket
@ -1,61 +1,90 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<u-tabbar :value="value4"
|
||||
@change="change"
|
||||
<view>
|
||||
<u-tabbar :value="current"
|
||||
@change="changeTab"
|
||||
:fixed="true"
|
||||
:border="false"
|
||||
:placeholder="false"
|
||||
activeColor="#40BE94"
|
||||
:safeAreaInsetBottom="true">
|
||||
<u-tabbar-item text="场馆">
|
||||
<image style="width: 52rpx;height: 52rpx"
|
||||
class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
src="../../static/zu618@3x (1).png"></image>
|
||||
<image style="width: 52rpx;height: 52rpx"
|
||||
class="u-page__item__slot-icon"
|
||||
:safeAreaInsetBottom="true"
|
||||
:border="false"
|
||||
activeColor="#FFC748"
|
||||
inactiveColor="#1D1D1D">
|
||||
<u-tabbar-item v-for="(item,index) in tabBarList"
|
||||
:key="index"
|
||||
:text="item.text">
|
||||
<image class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
src="../../static/zu759@3x.png"></image>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item text="我的">
|
||||
<image style="width: 52rpx;height: 52rpx"
|
||||
class="u-page__item__slot-icon"
|
||||
:src="item.iconPath"></image>
|
||||
<image class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
src="../../static/zu760@3x.png"></image>
|
||||
<image style="width: 52rpx;height: 52rpx"
|
||||
class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
src="../../static/zu628@3x (1).png"></image>
|
||||
:src="item.selectedIconPath"></image>
|
||||
</u-tabbar-item>
|
||||
</u-tabbar>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
currentPage: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: 'Hello',
|
||||
value4: 0,
|
||||
}
|
||||
current: 0,
|
||||
tabBarList: [{
|
||||
pagePath: "pages/ticket/index",
|
||||
iconPath: "../../static/tabbar/icon-ticket.png",
|
||||
selectedIconPath: "../../static/tabbar/icon-ticket-active.png",
|
||||
text: '场馆',
|
||||
customIcon: false,
|
||||
},
|
||||
onLoad () {
|
||||
|
||||
{
|
||||
pagePath: "pages/my/my",
|
||||
iconPath: "../../static/tabbar/icon-mine.png",
|
||||
selectedIconPath: "../../static/tabbar/icon-mine-active.png",
|
||||
text: '我的',
|
||||
customIcon: false,
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change (name) {
|
||||
if (name === 0) {
|
||||
changeTab (e) {
|
||||
let page = '/' + this.tabBarList[e].pagePath
|
||||
console.log(page);
|
||||
uni.switchTab({
|
||||
url: '/pages/ticket/index'
|
||||
});
|
||||
} else if (name === 1) {
|
||||
uni.switchTab({
|
||||
url: '/pages/my/my'
|
||||
});
|
||||
url: page,
|
||||
success: () => {
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
this.value4 = name
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
//隐藏原生tabbar
|
||||
uni.hideTabBar();
|
||||
// 当前选中的菜单
|
||||
this.tabBarList.forEach((i, index) => {
|
||||
if (i.pagePath == this.currentPage) {
|
||||
this.current = index
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-page__item__slot-icon {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.u-tabbar /deep/ .u-tabbar--fixed {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
padding: 20px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,32 @@
|
||||
.w-picker-flex2 {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.w-picker-flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.w-picker-view {
|
||||
width: 100%;
|
||||
height: 540upx;
|
||||
overflow: hidden;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
z-index: 666;
|
||||
}
|
||||
|
||||
.d-picker-view {
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.w-picker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
/* height: 88upx; */
|
||||
/* line-height: 88upx; */
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 30upx;
|
||||
}
|
@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<my-tabbar></my-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello',
|
||||
value4: 0,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<view>
|
||||
<fl-page-header :autoback="true"
|
||||
:left="false">
|
||||
<template v-slot:center>
|
||||
<view class="row items-center">
|
||||
<text class="font-16">首都博物馆门票列表</text>
|
||||
</view>
|
||||
</template>
|
||||
</fl-page-header>
|
||||
|
||||
<view :style="{
|
||||
minHeight: 'calc(100vh - ' + filterBoxTop + ' - 226rpx'+')',
|
||||
}">
|
||||
<view class="row justify-center fl-pt-sm fl-mb-sm">
|
||||
<view class="row items-center fl-px-sm"
|
||||
style="font-size:28rpx;border-radius:20rpx;background:#40BE94;color:#fff;height:70rpx;width:calc(100% - 62rpx)">
|
||||
<text class="col-3 text-center"></text>
|
||||
<text class="col-3 text-center">门票名称</text>
|
||||
<text class="col-3 text-center">剩余数量</text>
|
||||
<text class="col-3 text-center"></text>
|
||||
</view>
|
||||
</view>
|
||||
<u-list v-if="listData.length > 0"
|
||||
class="col-12"
|
||||
height="calc(100vh - 230rpx)"
|
||||
@scrolltolower="scrollRequest">
|
||||
<u-list-item v-for="(item, index) in listData"
|
||||
:key="index"
|
||||
class="fl-mb-sm fl-px-sm">
|
||||
<view class="fl-card row">
|
||||
<view class="col-3 font-16 row justify-center items-center">
|
||||
<u-image :src="item.url"
|
||||
width="154rpx"
|
||||
height="118rpx"></u-image>
|
||||
</view>
|
||||
<view class="col-3 row justify-center items-center text-center"
|
||||
style="font-weight:bolder">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="col-3 row justify-center items-center"
|
||||
:style="{color:item.canReserve!=0?'#40BE94':'#AFAFAF'}">
|
||||
{{ item.canReserve+'/'+item.total }}
|
||||
</view>
|
||||
<view class="col-3 row justify-center items-center cursur">
|
||||
<text v-if="item.canReserve!=0"
|
||||
class="font-14 row justify-center items-center cursor"
|
||||
style="width: 108rpx; height: 56rpx;background:#40BE94;color:#fff;border-radius:20rpx"
|
||||
@click="handleLink('/pages/ticket/reserve',item)">查看</text>
|
||||
|
||||
<text v-else
|
||||
class="font-14 row justify-center items-center"
|
||||
style="width: 108rpx; height: 56rpx;background:#AFAFAF;color:#fff;border-radius:20rpx">无票</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
|
||||
<view style="width: 100%"
|
||||
class="row items-center justify-center">
|
||||
<u-line dashed
|
||||
:length="110"
|
||||
style="display: inline-block"></u-line>
|
||||
<view style="color:#9ebfb3;font-size: 26rpx; margin: 30rpx">~人家是有底线的啦~</view>
|
||||
<u-line dashed
|
||||
:length="110"
|
||||
style="display: inline-block"></u-line>
|
||||
</view>
|
||||
</u-list>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import pageData from "../../static/pageData.json";
|
||||
import { getLabelByOptions, calcRouteParams } from "@/util/form";
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
listData: [],
|
||||
filterBoxTop: null,
|
||||
pageLoading: false,
|
||||
tableParams: {
|
||||
page: 1,
|
||||
pageSize: 12,
|
||||
},
|
||||
btnLoading: false,
|
||||
};
|
||||
},
|
||||
onLoad (pageParams) {
|
||||
this.filterBoxTop = uni.getSystemInfoSync()["statusBarHeight"] + 44 + "px";
|
||||
this.listData = pageData.elector
|
||||
},
|
||||
onShow () {
|
||||
this.getPageData();
|
||||
},
|
||||
beforeDestroy () { },
|
||||
methods: {
|
||||
getPageData (scroll) {
|
||||
},
|
||||
handleLink (path, item) {
|
||||
uni.setStorageSync('elector-link', item)
|
||||
uni.navigateTo({
|
||||
url: path,
|
||||
});
|
||||
},
|
||||
scrollRequest () {
|
||||
console.log('scrollRequest');
|
||||
this.tableParams.page++;
|
||||
this.getPageData(true);
|
||||
},
|
||||
handleFinishAll () {
|
||||
},
|
||||
handlePageType () {
|
||||
this.listData = [];
|
||||
this.getPageData();
|
||||
},
|
||||
handleContractClick (rowData) {
|
||||
},
|
||||
handleLabelByOptions (val, options) {
|
||||
return getLabelByOptions(val, options);
|
||||
},
|
||||
handleTabBack (path) {
|
||||
uni.switchTab({
|
||||
url: path
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.fl-card {
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 14rpx 0;
|
||||
}
|
||||
/deep/ .u-image__image {
|
||||
border-radius: 20rpx 0 0 20rpx !important;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<view>
|
||||
<fl-page-header :autoback="true"
|
||||
:left="false">
|
||||
<template v-slot:center>
|
||||
<view class="row items-center">
|
||||
<text class="font-16 ">填写预约信息</text>
|
||||
</view>
|
||||
</template>
|
||||
</fl-page-header>
|
||||
|
||||
<view :style="{
|
||||
minHeight: 'calc(100vh - ' + filterBoxTop + ' - 226rpx'+')',
|
||||
}"
|
||||
class="fl-px-lg">
|
||||
|
||||
<view class="row justify-start item-center font-16 fl-mb-sm"
|
||||
style="color:#fff">
|
||||
<u-image src="../../static/icon-ticket-addr.png"
|
||||
width="26rpx"
|
||||
height="38rpx"></u-image>
|
||||
<text class="fl-ml-xs fl-mr-md">门票系统的某个场馆</text>
|
||||
</view>
|
||||
<view class="row justify-center">
|
||||
<u-image :src="formData.url"
|
||||
width="664rpx"
|
||||
height="354rpx"></u-image>
|
||||
</view>
|
||||
<view class="form-card"
|
||||
style="background:#63BFA1;color:#fff;margin-top:32rpx">
|
||||
<view class="form-item">
|
||||
<view style="width: 200rpx; border-right: 2rpx solid #fff">门票名称</view>
|
||||
<view style="margin-left: 32rpx">
|
||||
{{formData.name}}
|
||||
</view>
|
||||
</view>
|
||||
<u-divider lineColor="#C0DED4"></u-divider>
|
||||
<view class="form-item">
|
||||
<view style="width: 200rpx; border-right: 2rpx solid #fff">剩余数量</view>
|
||||
<view style="margin-left: 32rpx">
|
||||
{{formData.canReserve+'/'+formData.total}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-divider lineColor="#C0DED4"></u-divider>
|
||||
|
||||
<view class="form-card">
|
||||
<view class="form-item">
|
||||
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4;font-size:28rpx">预留手机号<text style="font-size:20rpx">(+86)</text></view>
|
||||
<view style="margin-left: 32rpx">
|
||||
<u--input style="width: 360rpx"
|
||||
border="none"
|
||||
placeholder="填写手机号"
|
||||
clearable
|
||||
type="number"
|
||||
v-model="formData.telNum"></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<u-divider lineColor="#C0DED4"></u-divider>
|
||||
<view class="form-item">
|
||||
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4;font-size:28rpx">验证码</view>
|
||||
<view style="margin-left: 32rpx">
|
||||
<u-input style="width: 360rpx"
|
||||
border="none"
|
||||
placeholder="填写验证码"
|
||||
v-model.trim="formData.code"
|
||||
clearable
|
||||
type="number"
|
||||
:maxlength="6">
|
||||
<template slot="suffix">
|
||||
<u-code ref="uCode"
|
||||
@change="codeChange"
|
||||
seconds="5"
|
||||
changeText="X秒重新获取"></u-code>
|
||||
<view style="color: #52b6ff; font-size: 20rpx"
|
||||
@click="goSendCode">{{ tips }}</view>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-card fl-mt-md">
|
||||
<view class="form-item">
|
||||
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4">选择类型</view>
|
||||
<view style="margin-left: 32rpx">
|
||||
<u--input style="width: 360rpx"
|
||||
v-model="formData.type"
|
||||
border="none"
|
||||
clearable
|
||||
readonly>
|
||||
<template slot="suffix">
|
||||
<u-image src="../../static/icon-pick.png"
|
||||
width="64rpx"
|
||||
height="34rpx"
|
||||
@click="typeShow = true"></u-image>
|
||||
<u-picker :show="typeShow"
|
||||
:columns="typeOption"
|
||||
@cancel="handleTypeSelectCancel"
|
||||
@confirm="(e) => handleTypeSelectConfirm(e, 'type')"></u-picker>
|
||||
|
||||
</template>
|
||||
</u--input>
|
||||
</view>
|
||||
</view>
|
||||
<u-divider lineColor="#C0DED4"></u-divider>
|
||||
<view class="form-item">
|
||||
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4">选择时间</view>
|
||||
<view style="margin-left: 32rpx">
|
||||
<u-input style="width: 360rpx"
|
||||
v-model="formData.time"
|
||||
border="none"
|
||||
clearable
|
||||
readonly>
|
||||
<template slot="suffix">
|
||||
|
||||
<u-image src="../../static/icon-pick.png"
|
||||
width="64rpx"
|
||||
height="34rpx"
|
||||
@click="dateShow = true"></u-image>
|
||||
<u-datetime-picker :show="dateShow"
|
||||
mode="datetime"
|
||||
:minDate="Date.now()"
|
||||
@confirm="(e) => handleDateSelectConfirm(e, 'time')"
|
||||
@cancel="handleDateSelectCancel"></u-datetime-picker>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="row justify-center"
|
||||
style="margin-top:182rpx">
|
||||
<u-button text="预约"
|
||||
style="
|
||||
background-color: #40BE94;
|
||||
border: transparent
|
||||
font-weight: bolder;
|
||||
font-size: 40rpx;
|
||||
width: 436rpx;
|
||||
height: 60rpx;
|
||||
color:#fff;"
|
||||
shape="circle"
|
||||
:loading="btnLoading"
|
||||
@click="handleReserve('/pages/ticket/index')"></u-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getTheDate } from "@/util/date";
|
||||
import pageData from "../../static/pageData.json";
|
||||
import { getLabelByOptions, calcRouteParams } from "@/util/form";
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filterBoxTop: null,
|
||||
formData: {
|
||||
url: '',
|
||||
name: '',
|
||||
canReserve: '',
|
||||
total: '',
|
||||
telNum: "",
|
||||
code: "",
|
||||
time: null,
|
||||
type: ''
|
||||
},
|
||||
tips: "获取验证码",
|
||||
btnLoading: false,
|
||||
dateShow: false,
|
||||
typeShow: false,
|
||||
typeOption: [['双人', '单人票', '亲子票', '6人团队']
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad (pageParams) {
|
||||
this.filterBoxTop = uni.getSystemInfoSync()["statusBarHeight"] + 44 + "px";
|
||||
},
|
||||
onShow () {
|
||||
let data = uni.getStorageSync('elector-link')
|
||||
Object.assign(this.formData, data)
|
||||
console.log('data', data);
|
||||
this.getPageData();
|
||||
},
|
||||
beforeDestroy () { },
|
||||
methods: {
|
||||
codeChange (text) {
|
||||
this.tips = text;
|
||||
},
|
||||
async goSendCode () {
|
||||
if (!this.formData.telNum) {
|
||||
this.$refs.uToast.show({
|
||||
type: "error",
|
||||
message: "请输入手机号",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
uni.showLoading({
|
||||
title: "正在获取验证码",
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$refs.uToast.show({
|
||||
type: "success",
|
||||
message: "发送成功",
|
||||
});
|
||||
this.$refs.uCode.start();
|
||||
}, 1000)
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
handleTypeSelectConfirm (e, field) {
|
||||
this.formData[field] = e.value[0]
|
||||
this.typeShow = false;
|
||||
},
|
||||
handleTypeSelectCancel (e) {
|
||||
this.typeShow = false;
|
||||
},
|
||||
handleDateSelectConfirm (e, field) {
|
||||
this.formData[field] = getTheDate(e.value);
|
||||
this.dateShow = false;
|
||||
},
|
||||
handleDateSelectCancel (e) {
|
||||
this.dateShow = false;
|
||||
},
|
||||
handleReserve (path, params) {
|
||||
if (!this.formData.telNum || !this.formData.code || !this.formData.time || !this.formData.type) {
|
||||
this.$refs.uToast.show({
|
||||
type: "error",
|
||||
message: "请完善信息!",
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.switchTab({
|
||||
url: path,
|
||||
});
|
||||
// uni.navigateTo({
|
||||
// url: path,
|
||||
// });
|
||||
},
|
||||
getPageData (scroll) {
|
||||
},
|
||||
handleLink (path, params = {}) {
|
||||
uni.navigateTo({
|
||||
url: path + calcRouteParams(params),
|
||||
});
|
||||
},
|
||||
scrollRequest () {
|
||||
console.log('scrollRequest');
|
||||
this.tableParams.page++;
|
||||
this.getPageData(true);
|
||||
},
|
||||
handleFinishAll () {
|
||||
},
|
||||
handlePageType () {
|
||||
this.getPageData();
|
||||
},
|
||||
handleContractClick (rowData) {
|
||||
},
|
||||
handleLabelByOptions (val, options) {
|
||||
return getLabelByOptions(val, options);
|
||||
},
|
||||
handleTabBack (path) {
|
||||
uni.switchTab({
|
||||
url: path
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .u-image__image {
|
||||
border-radius: 20rpx !important;
|
||||
}
|
||||
.form-card {
|
||||
padding: 30rpx 32rpx;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
margin-top: 7rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .u-cell__body {
|
||||
padding: 10rpx 5rpx;
|
||||
}
|
||||
</style>
|
After Width: | Height: | Size: 394 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,21 @@
|
||||
/**
|
||||
*
|
||||
* @param {*} time 时间戳
|
||||
*/
|
||||
|
||||
export const getTheDate = function (time) {
|
||||
let date = new Date(time);
|
||||
let y = date.getFullYear();
|
||||
let MM = date.getMonth() + 1;
|
||||
MM = MM < 10 ? ('0' + MM) : MM;
|
||||
let d = date.getDate();
|
||||
d = d < 10 ? ('0' + d) : d;
|
||||
let h = date.getHours();
|
||||
h = h < 10 ? ('0' + h) : h;
|
||||
let m = date.getMinutes();
|
||||
m = m < 10 ? ('0' + m) : m;
|
||||
let s = date.getSeconds();
|
||||
s = s < 10 ? ('0' + s) : s;
|
||||
// return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
|
||||
return y + '-' + MM + '-' + d + '-' + h + '-' + m
|
||||
}
|