Compare commits

...

5 Commits

Author SHA1 Message Date
张 元山
6618cd2966 Merge branch 'master' of http://192.168.12.3:3000/xingyy/uni-admission-fee 2023-10-30 10:43:22 +08:00
张 元山
dbc683e089 fix pageheader 2023-10-30 10:42:28 +08:00
张 元山
4d1e61ea55 fix ticket style 2023-10-28 17:05:10 +08:00
张 元山
dc4780b061 fix ticket 2023-10-28 16:56:32 +08:00
张 元山
181a62b159 add ticket 2023-10-27 16:43:30 +08:00
60 changed files with 4716 additions and 185 deletions

34
App.vue
View File

@ -1,19 +1,25 @@
<script>
export default {
onLaunch: function() {
uni.hideTabBar();
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
export default {
onLaunch: function () {
uni.hideTabBar();
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import "uview-ui/index.scss";
/*每个页面公共css */
@import "uview-ui/index.scss";
@import "@/common/default.scss";
page {
background: url("./static/bg-common.png") no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
</style>

700
common/default.scss Normal file
View File

@ -0,0 +1,700 @@
.flex,
.row {
display: flex;
flex-wrap: wrap;
}
.flex > .col,
.flex > .col-0,
.flex > .col-1,
.flex > .col-2,
.flex > .col-3,
.flex > .col-4,
.flex > .col-5,
.flex > .col-6,
.flex > .col-7,
.flex > .col-8,
.flex > .col-9,
.flex > .col-10,
.flex > .col-11,
.flex > .col-12,
.flex > .col-auto,
.flex > .col-grow,
.flex > .col-shrink,
.flex > .col-xs,
.flex > .col-xs-0,
.flex > .col-xs-1,
.flex > .col-xs-2,
.flex > .col-xs-3,
.flex > .col-xs-4,
.flex > .col-xs-5,
.flex > .col-xs-6,
.flex > .col-xs-7,
.flex > .col-xs-8,
.flex > .col-xs-9,
.flex > .col-xs-10,
.flex > .col-xs-11,
.flex > .col-xs-12,
.flex > .col-xs-auto,
.flex > .col-xs-grow,
.flex > .col-xs-shrink,
.row > .col,
.row > .col-0,
.row > .col-1,
.row > .col-2,
.row > .col-3,
.row > .col-4,
.row > .col-5,
.row > .col-6,
.row > .col-7,
.row > .col-8,
.row > .col-9,
.row > .col-10,
.row > .col-11,
.row > .col-12,
.row > .col-auto,
.row > .col-grow,
.row > .col-shrink,
.row > .col-xs,
.row > .col-xs-0,
.row > .col-xs-1,
.row > .col-xs-2,
.row > .col-xs-3,
.row > .col-xs-4,
.row > .col-xs-5,
.row > .col-xs-6,
.row > .col-xs-7,
.row > .col-xs-8,
.row > .col-xs-9,
.row > .col-xs-10,
.row > .col-xs-11,
.row > .col-xs-12,
.row > .col-xs-auto,
.row > .col-xs-grow,
.row > .col-xs-shrink {
width: auto;
min-width: 0;
max-width: 100%;
}
.flex > .col,
.flex > .col-0,
.flex > .col-1,
.flex > .col-2,
.flex > .col-3,
.flex > .col-4,
.flex > .col-5,
.flex > .col-6,
.flex > .col-7,
.flex > .col-8,
.flex > .col-9,
.flex > .col-10,
.flex > .col-11,
.flex > .col-12,
.flex > .col-auto,
.flex > .col-grow,
.flex > .col-shrink,
.flex > .col-xs,
.flex > .col-xs-0,
.flex > .col-xs-1,
.flex > .col-xs-2,
.flex > .col-xs-3,
.flex > .col-xs-4,
.flex > .col-xs-5,
.flex > .col-xs-6,
.flex > .col-xs-7,
.flex > .col-xs-8,
.flex > .col-xs-9,
.flex > .col-xs-10,
.flex > .col-xs-11,
.flex > .col-xs-12,
.flex > .col-xs-auto,
.flex > .col-xs-grow,
.flex > .col-xs-shrink {
height: auto;
min-height: 0;
max-height: 100%;
}
.col,
.col-xs {
flex: 10000 1 0%;
}
.col-0,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-auto,
.col-xs-0,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-auto {
flex: 0 0 auto;
}
.col-grow,
.col-xs-grow {
flex: 1 0 auto;
}
.col-shrink,
.col-xs-shrink {
flex: 0 1 auto;
}
.row > .col-0,
.row > .col-xs-0 {
height: auto;
width: 0%;
}
.row > .offset-0,
.row > .offset-xs-0 {
margin-left: 0%;
}
.row > .col-1,
.row > .col-xs-1 {
height: auto;
width: 8.3333%;
}
.row > .offset-1,
.row > .offset-xs-1 {
margin-left: 8.3333%;
}
.row > .col-2,
.row > .col-xs-2 {
height: auto;
width: 16.6667%;
}
.row > .offset-2,
.row > .offset-xs-2 {
margin-left: 16.6667%;
}
.row > .col-3,
.row > .col-xs-3 {
height: auto;
width: 25%;
}
.row > .offset-3,
.row > .offset-xs-3 {
margin-left: 25%;
}
.row > .col-4,
.row > .col-xs-4 {
height: auto;
width: 33.3333%;
}
.row > .offset-4,
.row > .offset-xs-4 {
margin-left: 33.3333%;
}
.row > .col-5,
.row > .col-xs-5 {
height: auto;
width: 41.6667%;
}
.row > .offset-5,
.row > .offset-xs-5 {
margin-left: 41.6667%;
}
.row > .col-6,
.row > .col-xs-6 {
height: auto;
width: 50%;
}
.row > .offset-6,
.row > .offset-xs-6 {
margin-left: 50%;
}
.row > .col-7,
.row > .col-xs-7 {
height: auto;
width: 58.3333%;
}
.row > .offset-7,
.row > .offset-xs-7 {
margin-left: 58.3333%;
}
.row > .col-8,
.row > .col-xs-8 {
height: auto;
width: 66.6667%;
}
.row > .offset-8,
.row > .offset-xs-8 {
margin-left: 66.6667%;
}
.row > .col-9,
.row > .col-xs-9 {
height: auto;
width: 75%;
}
.row > .offset-9,
.row > .offset-xs-9 {
margin-left: 75%;
}
.row > .col-10,
.row > .col-xs-10 {
height: auto;
width: 83.3333%;
}
.row > .offset-10,
.row > .offset-xs-10 {
margin-left: 83.3333%;
}
.row > .col-11,
.row > .col-xs-11 {
height: auto;
width: 91.6667%;
}
.row > .offset-11,
.row > .offset-xs-11 {
margin-left: 91.6667%;
}
.row > .col-12,
.row > .col-xs-12 {
height: auto;
width: 100%;
}
.row > .offset-12,
.row > .offset-xs-12 {
margin-left: 100%;
}
.row > .col-all {
height: auto;
flex: 0 0 100%;
}
.cursor {
cursor: pointer;
}
.link-cursor {
cursor: pointer;
text-decoration: underline;
color: #027be3;
}
.bg-grey {
background: #c7bfbf !important;
}
.bg-primary {
background-color: #3aace8 !important;
}
.bg-danger {
background-color: #ef136e;
}
.bg-231 {
background-color: #e7e7e7;
}
.bg-blue {
background: #2196f3 !important;
}
.h-100 {
height: 100vh;
}
.w-100 {
width: 100vw;
}
.height-100 {
height: 100%;
}
.width-100 {
width: 100%;
}
.fl-page-width {
max-width: 1200px;
margin: auto;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow-auto {
overflow: auto;
}
/*下三角*/
.tip-bottom {
position: relative;
/*设置圆角*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.tip-bottom:after {
content: "";
display: block;
border-width: 25px;
position: absolute;
bottom: -30px;
left: 50px;
border-style: solid dashed dashed solid;
border-color: rgb(255, 255, 255) transparent transparent transparent;
font-size: 0;
line-height: 0;
transform: rotate(224deg);
}
.tip-bottom:after {
bottom: -20px;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
.text-left {
text-align: left !important;
}
.align-center {
align-items: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.column {
flex-direction: column;
}
.items-start {
align-items: flex-start !important;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.fl-pa-sm {
padding: 8px !important;
}
.fl-pb-xs {
padding-bottom: 4px !important;
}
.fl-mx-xs {
margin-left: 4px !important;
margin-right: 4px !important;
}
.fl-my-xs {
margin-top: 4px !important;
margin-bottom: 4px !important;
}
.fl-ml-xs {
margin-left: 4px !important;
}
.fl-mt-xs {
margin-top: 4px !important;
}
.fl-pt-xs {
padding-top: 4px !important;
}
.fl-pl-xs {
padding-left: 4px !important;
}
.fl-pl-sm {
padding-left: 8px !important;
}
.fl-pr-sm {
padding-right: 8px !important;
}
.fl-pt-sm {
padding-top: 8px !important;
}
.fl-pb-sm {
padding-bottom: 8px !important;
}
.fl-px-sm {
padding-left: 8px !important;
padding-right: 8px !important;
}
.fl-px-xs {
padding-left: 4px !important;
padding-right: 4px !important;
}
.fl-py-sm {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.fl-pa-md {
padding: 16px !important;
}
.fl-pl-md {
padding-left: 16px !important;
}
.fl-pr-md {
padding-right: 16px !important;
}
.fl-pt-md {
padding-top: 16px !important;
}
.fl-pb-md {
padding-bottom: 16px !important;
}
.fl-px-md {
padding-left: 16px !important;
padding-right: 16px !important;
}
.fl-py-md {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.fl-pa-lg {
padding: 24px !important;
}
.fl-pl-lg {
padding-left: 24px !important;
}
.fl-pr-lg {
padding-right: 24px !important;
}
.fl-pt-lg {
padding-top: 24px !important;
}
.fl-pb-lg {
padding-bottom: 24px !important;
}
.fl-px-lg {
padding-left: 24px !important;
padding-right: 24px !important;
}
.fl-py-lg {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.fl-ma-sm {
margin: 8px !important;
}
.fl-ma-xs {
margin: 4px !important;
}
.fl-ml-sm {
margin-left: 8px !important;
}
.fl-mr-sm {
margin-right: 8px !important;
}
.fl-mt-sm {
margin-top: 8px !important;
}
.fl-mb-sm {
margin-bottom: 8px !important;
}
.fl-mx-sm {
margin-left: 8px !important;
margin-right: 8px !important;
}
.fl-my-sm {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.fl-ma-md {
margin: 16px !important;
}
.fl-ml-md {
margin-left: 16px !important;
}
.fl-mr-md {
margin-right: 16px !important;
}
.fl-mt-md {
margin-top: 16px !important;
}
.fl-mb-md {
margin-bottom: 16px !important;
}
.fl-mx-md {
margin-left: 16px !important;
margin-right: 16px !important;
}
.fl-my-md {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.fl-ma-lg {
margin: 24px !important;
}
.fl-ml-lg {
margin-left: 24px !important;
}
.fl-mr-lg {
margin-right: 24px !important;
}
.fl-mt-lg {
margin-top: 24px !important;
}
.fl-mb-lg {
margin-bottom: 24px !important;
}
.fl-mx-lg {
margin-left: 24px !important;
margin-right: 24px !important;
}
.fl-my-lg {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center,
.flex-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center,
.flex-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.box-border {
box-sizing: border-box;
}
.box-content {
box-sizing: content-box;
}
.width-140 {
width: 280rpx;
}
.width-300 {
width: 600rpx;
}
.no-shadow {
box-shadow: none !important;
}
.border-20 {
border-radius: 20rpx;
}
.fl-link {
cursor: pointer;
text-decoration: underline;
color: #027be3;
}
.border-radius-4 {
border-radius: 4px !important;
}
.border-radius-8 {
border-radius: 8px !important;
}
.border-radius-16 {
border-radius: 16px !important;
}
.margin-auto {
margin: auto;
}
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
.font-12 {
font-size: 24rpx;
}
.font-14 {
font-size: 28rpx;
}
.font-16 {
font-size: 32rpx;
}
.font-18 {
font-size: 36rpx;
}
.font-20 {
font-size: 40rpx;
}
.font-bold {
font-weight: bold;
}

View File

@ -0,0 +1,73 @@
<template>
<view>
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<view style="height: 110upx">
<u-navbar :bgColor="bgColor"
@rightClick="rightClick"
:autoBack="autoback">
<view v-if="left"
slot="left">
<slot name="left"></slot>
</view>
<view v-if="center"
slot="center">
<slot name="center"></slot>
</view>
<view v-if="right"
slot="right">
<slot name="right"></slot>
</view>
</u-navbar>
</view>
</view>
</template>
<script>
export default {
props: {
left: {
type: Boolean,
default () {
return true;
},
},
center: {
type: Boolean,
default () {
return true;
},
},
right: {
type: Boolean,
default () {
return true;
},
},
autoback: {
type: Boolean,
default () {
return true;
},
},
},
data () {
return {
bgColor: "null",
};
},
methods: {
leftClick () { },
rightClick () { },
},
};
</script>
<style lang="scss" scoped>
::v-deep .u-navbar__content {
background: #efefef !important;
}
</style>

View File

@ -1,71 +1,90 @@
<template>
<view class="content">
<u-tabbar
:value="value4"
@change="change"
: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"
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"
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>
<view>
<u-tabbar :value="current"
@change="changeTab"
:fixed="true"
:placeholder="false"
: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="item.iconPath"></image>
<image class="u-page__item__slot-icon"
slot="active-icon"
:src="item.selectedIconPath"></image>
</u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
value4: 0,
}
props: {
currentPage: String
},
onLoad() {
data () {
return {
current: 0,
tabBarList: [{
pagePath: "pages/ticket/index",
iconPath: "../../static/tabbar/icon-ticket.png",
selectedIconPath: "../../static/tabbar/icon-ticket-active.png",
text: '场馆',
customIcon: false,
},
{
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){
uni.switchTab({
url: '/pages/index/index'
});
}else if (name===1){
uni.switchTab({
url: '/pages/my/my'
});
}
this.value4 = name
}
}
changeTab (e) {
let page = '/' + this.tabBarList[e].pagePath
console.log(page);
uni.switchTab({
url: page,
success: () => {
},
fail: (e) => {
console.log(e);
}
})
}
},
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>

View File

@ -0,0 +1,135 @@
<template>
<u-picker :show="show" :columns="priceColumns" keyName="price" title="请选择价位" @cancel="cancel" @confirm="confirm"
@change="change" :defaultIndex="defaultIndex">
<view slot="header">
<view class="header">价位/</view>
</view>
<view slot="footer">
<u-transition :show="chooseText === '其他'" mode="fade" duration="900">
<view class="other">
<view class="left">*已选择其他</view>
<view class="right">
<text>请填需求价位</text>
<u--input type="number" class="input" v-model="value"></u--input>
<text>/</text>
</view>
</view>
</u-transition>
</view>
</u-picker>
</template>
<script>
export default {
data() {
return {
priceColumns: [],
chooseUuid: '',
chooseText: '',
value: null,
defaultIndex: [],
priceClass: 0
}
},
props: ['show', 'priceList', 'choosePriceClass'],
watch: {
priceList: {
immediate: true,
handler(newValue) {
this.priceColumns = [[...newValue, ...[{ uuid: newValue[0]?.uuid, price: '其他', priceClass: 0 }]]]
// console.log('priceColumns', this.priceColumns)
},
},
chooseText: {
// immediate: true,
handler(newValue) {
this.chooseText = newValue
},
},
// PriceClass
choosePriceClass: {
handler(newValue) {
this.priceClass = newValue.split('@')[0]
const choose = this.priceColumns[0].find((item) => item.priceClass === +this.priceClass)
console.log(choose)
this.$emit("onConfirm", { value: this.value, uuid: choose.uuid, price: choose.price, priceClass: choose.priceClass });
},
}
},
methods: {
cancel() {
this.chooseText = '';
this.defaultIndex = [];
this.$emit("update:show", false);
},
confirm(item) {
this.defaultIndex = [this.priceColumns[0]?.findIndex((n) => n.price === item.value[0].price)]
if (this.chooseText === '其他') {
this.$emit("onConfirm", { value: this.value, uuid: item.value[0].uuid, price: item.value[0].price, priceClass: item.value[0].priceClass });
this.$emit("update:show", false);
} else {
this.value = null
this.$emit("onConfirm", { uuid: item.value[0].uuid, price: item.value[0].price, priceClass: item.value[0].priceClass });
this.$emit("update:show", false);
}
},
change(item) {
if (item.value[0].price === '其他') {
this.chooseText = item.value[0].price;
this.chooseUuid = item.value[0].uuid
} else {
this.chooseText = ''
}
}
},
}
</script>
<style lang="scss">
.header {
text-align: center;
border-bottom: 1rpx solid #868686;
border-top: 1rpx solid #868686;
font-size: 36rpx;
font-weight: 600;
padding: 10rpx 0;
width: 90%;
margin: auto;
color: #1936C9;
}
.other {
box-sizing: border-box;
border: 1px solid #1936C9;
width: 90%;
padding: 20rpx 30rpx;
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-radius: 20rpx;
margin-bottom: 20rpx;
.left {
color: #1936C9;
font-weight: 600;
}
.right {
width: 380rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 24rpx;
.input {
width: 50rpx;
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,526 @@
<template>
<view class="w-picker-view">
<view
style="
display: flex;
justify-content: space-around;
font-size: 18px;
font-weight: 700;
padding: 30upx 0;
border-bottom: 1rpx solid rgb(134 134 134);
border-top: 1rpx solid rgb(134 134 134);
color:#1936C9
"
>
<view>年份</view>
<view></view>
<view></view>
<view>场次</view>
</view>
<picker-view
class="d-picker-view"
:indicator-style="itemHeight"
:value="pickVal"
@change="handlerChange"
>
<picker-view-column>
<view
class="w-picker-item"
v-for="(item, index) in range.years"
:key="index"
>{{ item }}</view
>
</picker-view-column>
<picker-view-column>
<view
class="w-picker-item"
v-for="(item, index) in range.months"
:key="index"
>{{ item }}</view
>
</picker-view-column>
<picker-view-column>
<view
class="w-picker-item"
v-for="(item, index) in range.days"
:key="index"
>{{ item }}</view
>
</picker-view-column>
<picker-view-column>
<view
class="w-picker-item"
v-for="(item, index) in range.sections"
:key="index"
>{{ item }}</view
>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
pickVal: [],
range: {},
checkObj: {},
};
},
props: {
itemHeight: {
type: String,
default: "44px",
},
startYear: {
type: String,
default: "",
},
endYear: {
type: String,
default: "",
},
value: {
type: [String, Array, Number],
default: "",
},
current: {
//
type: Boolean,
default: false,
},
disabledAfter: {
//
type: Boolean,
default: false,
},
disabledBefore: {
//
type: Boolean,
default: true,
},
},
watch: {
value(val) {
this.initData();
},
},
created() {
this.initData();
},
methods: {
formatNum(n) {
return Number(n) < 10 ? "0" + Number(n) : Number(n) + "";
},
checkValue(value) {
let strReg = /^\d{4}-\d{2}-\d{2} [\u4e00-\u9fa5]{2}$/,
example;
if (!strReg.test(value)) {
console.log(
new Error(
"请传入与mode、fields匹配的value值例value=" + example + ""
)
);
}
return strReg.test(value);
},
resetData(year, month, day) {
let curDate = this.getCurrenDate();
let curFlag = this.current;
let curYear = curDate.curYear;
let curMonth = curDate.curMonth;
let curDay = curDate.curDay;
let curHour = curDate.curHour;
let months = [],
days = [],
sections = [];
let disabledAfter = this.disabledAfter;
let monthsLen = disabledAfter ? (year * 1 < curYear ? 12 : curMonth) : 12;
let totalDays = new Date(year, month, 0).getDate(); //;
let daysLen = disabledAfter
? year * 1 < curYear || month * 1 < curMonth
? totalDays
: curDay
: totalDays;
let sectionFlag = disabledAfter
? (year * 1 < curYear || month * 1 < curMonth || day * 1 < curDay) ==
true
? false
: true
: curHour > 12 == true
? true
: false;
sections = ["上午", "下午"];
for (let month = 1; month <= monthsLen; month++) {
months.push(this.formatNum(month));
}
for (let day = 1; day <= daysLen; day++) {
days.push(this.formatNum(day));
}
return {
months,
days,
sections,
};
},
getData(dVal) {
//
let curFlag = this.current;
let disabledAfter = this.disabledAfter;
let curDate = this.getCurrenDate();
let curYear = curDate.curYear;
let curMonthdays = curDate.curMonthdays;
let curMonth = curDate.curMonth;
let curDay = curDate.curDay;
let curHour = curDate.curHour;
let defaultDate = this.getDefaultDate();
let startYear = this.getStartDate().getFullYear();
let endYear = this.getEndDate().getFullYear();
let years = [],
months = [],
days = [],
sections = [];
let year = dVal[0] * 1;
let month = dVal[1] * 1;
let day = dVal[2] * 1;
let monthsLen = disabledAfter
? year < curYear
? 12
: curDate.curMonth
: 12;
let daysLen = disabledAfter
? year < curYear || month < curMonth
? defaultDate.defaultDays
: curDay
: curFlag
? curMonthdays
: defaultDate.defaultDays;
let sectionFlag = disabledAfter
? (year * 1 < curYear || month * 1 < curMonth || day * 1 < curDay) ==
true
? false
: true
: curHour > 12 == true
? true
: false;
for (
let year = startYear;
year <= (disabledAfter ? curYear : endYear);
year++
) {
years.push(year.toString());
}
for (let month = 1; month <= monthsLen; month++) {
months.push(this.formatNum(month));
}
for (let day = 1; day <= daysLen; day++) {
days.push(this.formatNum(day));
}
sections = ["上午", "下午"];
if (this.disabledBefore) {
years = years.filter((item) => item * 1 >= curYear);
months = months.filter((item) => item * 1 >= curMonth);
days = days.filter((item) => item * 1 >= curDay);
let nowcurDate = new Date();
let nowcurYear = nowcurDate.getFullYear();
let nowcurMonth = nowcurDate.getMonth() + 1;
let nowcurDay = nowcurDate.getDate();
let nowcurHour = nowcurDate.getHours();
if (
curYear === nowcurYear &&
curMonth === nowcurMonth &&
curDay === nowcurDay &&
nowcurHour > 12
) {
sections = ["下午"];
} else {
sections = ["上午", "下午"];
}
}
return {
years,
months,
days,
sections,
};
},
getCurrenDate() {
let curDate = new Date();
let curYear = curDate.getFullYear();
let curMonth = curDate.getMonth() + 1;
let curMonthdays = new Date(curYear, curMonth, 0).getDate();
let curDay = curDate.getDate();
let curHour = curDate.getHours();
let curSection = "上午";
if (curHour >= 12) {
curSection = "下午";
}
return {
curDate,
curYear,
curMonth,
curMonthdays,
curDay,
curHour,
curSection,
};
},
getDefaultDate() {
let value = this.value;
let reg = /-/g;
let defaultDate = value
? new Date(value.split(" ")[0].replace(reg, "/"))
: new Date();
let defaultYear = defaultDate.getFullYear();
let defaultMonth = defaultDate.getMonth() + 1;
let defaultDay = defaultDate.getDate();
let defaultDays = new Date(defaultYear, defaultMonth, 0).getDate() * 1;
return {
defaultDate,
defaultYear,
defaultMonth,
defaultDay,
defaultDays,
};
},
getStartDate() {
let start = this.startYear;
let startDate = "";
let reg = /-/g;
if (start) {
startDate = new Date(start + "/01/01");
} else {
startDate = new Date("1970/01/01");
}
return startDate;
},
getEndDate() {
let end = this.endYear;
let reg = /-/g;
let endDate = "";
if (end) {
endDate = new Date(end + "/12/31");
} else {
endDate = new Date();
}
return endDate;
},
getDval() {
let value = this.value;
let dVal = null;
let aDate = new Date();
let year = this.formatNum(aDate.getFullYear());
let month = this.formatNum(aDate.getMonth() + 1);
let day = this.formatNum(aDate.getDate());
let hour = aDate.getHours();
let section = "上午";
if (hour >= 12) section = "下午";
if (value) {
let flag = this.checkValue(value);
if (!flag) {
dVal = [year, month, day, section];
} else {
let v = value.split(" ");
dVal = [...v[0].split("-"), v[1]];
}
} else {
dVal = [year, month, day, section];
}
return dVal;
},
initData() {
let startDate,
endDate,
startYear,
endYear,
startMonth,
endMonth,
startDay,
endDay;
let years = [],
months = [],
days = [],
sections = [];
let dVal = [],
pickVal = [];
let value = this.value;
let reg = /-/g;
let range = {};
let result = "",
full = "",
year,
month,
day,
section,
obj = {};
let defaultDate = this.getDefaultDate();
let defaultYear = defaultDate.defaultYear;
let defaultMonth = defaultDate.defaultMonth;
let defaultDay = defaultDate.defaultDay;
let defaultDays = defaultDate.defaultDays;
let curFlag = this.current;
let disabledAfter = this.disabledAfter;
let curDate = this.getCurrenDate();
let curYear = curDate.curYear;
let curMonth = curDate.curMonth;
let curMonthdays = curDate.curMonthdays;
let curDay = curDate.curDay;
let curSection = curDate.curSection;
let dateData = [];
dVal = this.getDval();
startDate = this.getStartDate();
endDate = this.getEndDate();
startYear = startDate.getFullYear();
startMonth = startDate.getMonth();
startDay = startDate.getDate();
endYear = endDate.getFullYear();
endMonth = endDate.getMonth();
endDay = endDate.getDate();
dateData = this.getData(dVal);
years = dateData.years;
months = dateData.months;
days = dateData.days;
sections = dateData.sections;
pickVal = disabledAfter
? [
dVal[0] && years.indexOf(dVal[0]) != -1
? years.indexOf(dVal[0])
: 0,
dVal[1] && months.indexOf(dVal[1]) != -1
? months.indexOf(dVal[1])
: 0,
dVal[2] && days.indexOf(dVal[2]) != -1 ? days.indexOf(dVal[2]) : 0,
dVal[3] && sections.indexOf(dVal[3]) != -1
? sections.indexOf(dVal[3])
: 0,
]
: curFlag
? [
years.indexOf(curYear + ""),
months.indexOf(this.formatNum(curMonth)),
days.indexOf(this.formatNum(curDay)),
sections.indexOf(curSection),
]
: [
dVal[0] && years.indexOf(dVal[0]) != -1
? years.indexOf(dVal[0])
: 0,
dVal[1] && months.indexOf(dVal[1]) != -1
? months.indexOf(dVal[1])
: 0,
dVal[2] && days.indexOf(dVal[2]) != -1 ? days.indexOf(dVal[2]) : 0,
dVal[3] && sections.indexOf(dVal[3]) != -1
? sections.indexOf(dVal[3])
: 0,
];
range = { years, months, days, sections };
year = dVal[0] ? dVal[0] : years[0];
month = dVal[1] ? dVal[1] : months[0];
day = dVal[2] ? dVal[2] : days[0];
section = dVal[3] ? dVal[3] : sections[0];
result = full = `${year + "-" + month + "-" + day + " " + section}`;
obj = {
year,
month,
day,
section,
};
this.range = range;
this.checkObj = obj;
this.$nextTick(() => {
this.pickVal = pickVal;
});
this.$emit("change", {
result: result,
value: full,
obj: obj,
});
},
handlerChange(e) {
let arr = [...e.detail.value];
let data = this.range;
let year = "",
month = "",
day = "",
section = "";
let result = "",
full = "",
obj = {};
let months = null,
days = null,
sections = null;
let disabledAfter = this.disabledAfter;
year =
arr[0] || arr[0] == 0
? data.years[arr[0]] || data.years[data.years.length - 1]
: "";
month =
arr[1] || arr[1] == 0
? data.months[arr[1]] || data.months[data.months.length - 1]
: "";
day =
arr[2] || arr[2] == 0
? data.days[arr[2]] || data.days[data.days.length - 1]
: "";
section =
arr[3] || arr[3] == 0
? data.sections[arr[3]] || data.sections[data.sections.length - 1]
: "";
result = full = `${year + "-" + month + "-" + day + " " + section}`;
let resetData = this.resetData(year, month, day);
if (this.disabledAfter) {
months = resetData.months;
days = resetData.days;
sections = resetData.sections;
} else {
if (year % 4 == 0 || month != this.checkObj.month) {
days = resetData.days;
}
}
if (this.disabledBefore) {
let curDate = new Date();
let curYear = curDate.getFullYear();
let curMonth = curDate.getMonth() + 1;
let curMonthdays = new Date(curYear, curMonth, 0).getDate();
let curDay = curDate.getDate();
let curHour = curDate.getHours();
if (
year === curYear + "" &&
month * 1 === curMonth &&
day === curDay + "" &&
curHour > 12
) {
this.range.sections = ["下午"];
} else {
this.range.sections = ["上午", "下午"];
}
}
if (months) this.range.months = months;
if (days) this.range.days = days;
if (sections) this.range.sections = sections;
obj = {
year,
month,
day,
section,
};
this.checkObj = obj;
this.$emit("change", {
result: result,
value: full,
obj: obj,
});
},
},
};
</script>
<style lang="scss">
@import "./w-picker.css";
</style>

View File

@ -0,0 +1,344 @@
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.fyears" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.fmonths" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.fdays" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column class="w-picker-flex1">
<view class="w-picker-item">-</view>
</picker-view-column>
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.tyears" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.tmonths" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.tdays" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
pickVal:[],
range:{},
checkObj:{}
};
},
props:{
itemHeight:{
type:String,
default:"44px"
},
value:{
type:[String,Array],
default(){
return []
}
},
current:{//
type:Boolean,
default:false
},
startYear:{
type:[String,Number],
default:1970
},
endYear:{
type:[String,Number],
default:new Date().getFullYear()
}
},
watch:{
value(val){
this.initData();
}
},
created() {
this.initData();
},
methods:{
formatNum(n){
return (Number(n)<10?'0'+Number(n):Number(n)+'');
},
checkValue(value){
let strReg=/^\d{4}-\d{2}-\d{2}$/,example="2020-04-03";
if(!strReg.test(value[0])||!strReg.test(value[1])){
console.log(new Error("请传入与mode匹配的value值例["+example+","+example+"]"))
}
return strReg.test(value[0])&&strReg.test(value[1]);
},
resetToData(fmonth,fday,tyear,tmonth){
let range=this.range;
let tmonths=[],tdays=[];
let yearFlag=tyear!=range.tyears[0];
let monthFlag=tyear!=range.tyears[0]||tmonth!=range.tmonths[0];
let ttotal=new Date(tyear,tmonth,0).getDate();
for(let i=yearFlag?1:fmonth*1;i<=12;i++){
tmonths.push(this.formatNum(i))
}
for(let i=monthFlag?1:fday*1;i<=ttotal;i++){
tdays.push(this.formatNum(i))
}
return{
tmonths,
tdays
}
},
resetData(fyear,fmonth,fday,tyear,tmonth){
let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[];
let startYear=this.startYear;
let endYear=this.endYear;
let ftotal=new Date(fyear,fmonth,0).getDate();
let ttotal=new Date(tyear,tmonth,0).getDate();
for(let i=startYear*1;i<=endYear;i++){
fyears.push(this.formatNum(i))
}
for(let i=1;i<=12;i++){
fmonths.push(this.formatNum(i))
}
for(let i=1;i<=ftotal;i++){
fdays.push(this.formatNum(i))
}
for(let i=fyear*1;i<=endYear;i++){
tyears.push(this.formatNum(i))
}
for(let i=fmonth*1;i<=12;i++){
tmonths.push(this.formatNum(i))
}
for(let i=fday*1;i<=ttotal;i++){
tdays.push(this.formatNum(i))
}
return {
fyears,
fmonths,
fdays,
tyears,
tmonths,
tdays
}
},
getData(dVal){
let start=this.startYear*1;
let end=this.endYear*1;
let value=dVal;
let flag=this.current;
let aToday=new Date();
let tYear,tMonth,tDay,tHours,tMinutes,tSeconds,pickVal=[];
let initstartDate=new Date(start.toString());
let endDate=new Date(end.toString());
if(start>end){
initstartDate=new Date(end.toString());
endDate=new Date(start.toString());
};
let startYear=initstartDate.getFullYear();
let startMonth=initstartDate.getMonth()+1;
let endYear=endDate.getFullYear();
let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[],returnArr=[],startDVal=[],endDVal=[];
let curMonth=flag?value[1]*1:(startDVal[1]*1+1);
let curMonth1=flag?value[5][1]*1:(value[5]*1+1);
let totalDays=new Date(value[0],value[1],0).getDate();
let totalDays1=new Date(value[4],value[5],0).getDate();
for(let s=startYear;s<=endYear;s++){
fyears.push(this.formatNum(s));
};
for(let m=1;m<=12;m++){
fmonths.push(this.formatNum(m));
};
for(let d=1;d<=totalDays;d++){
fdays.push(this.formatNum(d));
};
for(let s=value[0]*1;s<=endYear;s++){
tyears.push(this.formatNum(s));
};
if(value[4]*1>value[0]*1){
for(let m=1;m<=12;m++){
tmonths.push(this.formatNum(m));
};
for(let d=1;d<=totalDays1;d++){
tdays.push(this.formatNum(d));
};
}else{
for(let m=value[1]*1;m<=12;m++){
tmonths.push(this.formatNum(m));
};
for(let d=value[2]*1;d<=totalDays1;d++){
tdays.push(this.formatNum(d));
};
};
pickVal=[
fyears.indexOf(value[0])==-1?0:fyears.indexOf(value[0]),
fmonths.indexOf(value[1])==-1?0:fmonths.indexOf(value[1]),
fdays.indexOf(value[2])==-1?0:fdays.indexOf(value[2]),
0,
tyears.indexOf(value[4])==-1?0:tyears.indexOf(value[4]),
tmonths.indexOf(value[5])==-1?0:tmonths.indexOf(value[5]),
tdays.indexOf(value[6])==-1?0:tdays.indexOf(value[6])
];
return {
fyears,
fmonths,
fdays,
tyears,
tmonths,
tdays,
pickVal
}
},
getDval(){
let value=this.value;
let fields=this.fields;
let dVal=null;
let aDate=new Date();
let fyear=this.formatNum(aDate.getFullYear());
let fmonth=this.formatNum(aDate.getMonth()+1);
let fday=this.formatNum(aDate.getDate());
let tyear=this.formatNum(aDate.getFullYear());
let tmonth=this.formatNum(aDate.getMonth()+1);
let tday=this.formatNum(aDate.getDate());
if(value&&value.length>0){
let flag=this.checkValue(value);
if(!flag){
dVal=[fyear,fmonth,fday,"-",tyear,tmonth,tday]
}else{
dVal=[...value[0].split("-"),"-",...value[1].split("-")];
}
}else{
dVal=[fyear,fmonth,fday,"-",tyear,tmonth,tday]
}
return dVal;
},
initData(){
let range=[],pickVal=[];
let result="",full="",obj={};
let dVal=this.getDval();
let dateData=this.getData(dVal);
let fyears=[],fmonths=[],fdays=[],tyears=[],tmonths=[],tdays=[];
let fyear,fmonth,fday,tyear,tmonth,tday;
pickVal=dateData.pickVal;
fyears=dateData.fyears;
fmonths=dateData.fmonths;
fdays=dateData.fdays;
tyears=dateData.tyears;
tmonths=dateData.tmonths;
tdays=dateData.tdays;
range={
fyears,
fmonths,
fdays,
tyears,
tmonths,
tdays,
}
fyear=range.fyears[pickVal[0]];
fmonth=range.fmonths[pickVal[1]];
fday=range.fdays[pickVal[2]];
tyear=range.tyears[pickVal[4]];
tmonth=range.tmonths[pickVal[5]];
tday=range.tdays[pickVal[6]];
obj={
fyear,
fmonth,
fday,
tyear,
tmonth,
tday
}
result=`${fyear+'-'+fmonth+'-'+fday+'至'+tyear+'-'+tmonth+'-'+tday}`;
this.range=range;
this.checkObj=obj;
this.$nextTick(()=>{
this.pickVal=pickVal;
});
this.$emit("change",{
result:result,
value:result.split("至"),
obj:obj
})
},
handlerChange(e){
let arr=[...e.detail.value];
let result="",full="",obj={};
let year="",month="",day="",hour="",minute="",second="",note=[],province,city,area;
let checkObj=this.checkObj;
let days=[],months=[],endYears=[],endMonths=[],endDays=[],startDays=[];
let mode=this.mode;
let col1,col2,col3,d,a,h,m;
let xDate=new Date().getTime();
let range=this.range;
let fyear=range.fyears[arr[0]]||range.fyears[range.fyears.length-1];
let fmonth=range.fmonths[arr[1]]||range.fmonths[range.fmonths.length-1];
let fday=range.fdays[arr[2]]||range.fdays[range.fdays.length-1];
let tyear=range.tyears[arr[4]]||range.tyears[range.tyears.length-1];
let tmonth=range.tmonths[arr[5]]||range.tmonths[range.tmonths.length-1];
let tday=range.tdays[arr[6]]||range.tdays[range.tdays.length-1];
let resetData=this.resetData(fyear,fmonth,fday,tyear,tmonth);
if(fyear!=checkObj.fyear||fmonth!=checkObj.fmonth||fday!=checkObj.fday){
arr[4]=0;
arr[5]=0;
arr[6]=0;
range.tyears=resetData.tyears;
range.tmonths=resetData.tmonths;
range.tdays=resetData.tdays;
tyear=range.tyears[0];
checkObj.tyears=range.tyears[0];
tmonth=range.tmonths[0];
checkObj.tmonths=range.tmonths[0];
tday=range.tdays[0];
checkObj.tdays=range.tdays[0];
}
if(fyear!=checkObj.fyear||fmonth!=checkObj.fmonth){
range.fdays=resetData.fdays;
};
if(tyear!=checkObj.tyear){
arr[5]=0;
arr[6]=0;
let toData=this.resetToData(fmonth,fday,tyear,tmonth);
range.tmonths=toData.tmonths;
range.tdays=toData.tdays;
tmonth=range.tmonths[0];
checkObj.tmonths=range.tmonths[0];
tday=range.tdays[0];
checkObj.tdays=range.tdays[0];
};
if(tmonth!=checkObj.tmonth){
arr[6]=0;
let toData=this.resetToData(fmonth,fday,tyear,tmonth);
range.tdays=toData.tdays;
tday=range.tdays[0];
checkObj.tdays=range.tdays[0];
};
result=`${fyear+'-'+fmonth+'-'+fday+'至'+tyear+'-'+tmonth+'-'+tday}`;
obj={
fyear,fmonth,fday,tyear,tmonth,tday
}
this.checkObj=obj;
this.$nextTick(()=>{
this.pickVal=arr;
})
this.$emit("change",{
result:result,
value:result.split("至"),
obj:obj
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>

View File

@ -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;
}

View File

@ -0,0 +1,285 @@
<template name="w-picker">
<view class="w-picker" :key="createKey" :data-key="createKey">
<view class="mask" :class="{ visible: visible }" @tap="onCancel" @touchmove.stop.prevent catchtouchmove="true"></view>
<view class="w-picker-cnt" :class="{ visible: visible }">
<view class="w-picker-header" @touchmove.stop.prevent catchtouchmove="true">
<text style="font-size: 18px">请选择时间</text>
<text @tap.stop.prevent="onCancel">
<u-icon name="close-circle" size="26"></u-icon>
</text>
<slot></slot>
<!-- <text :style="{ color: themeColor }" @tap.stop.prevent="pickerConfirm"
>确定</text
> -->
</view>
<date-picker v-if="mode == 'date'" class="w-picker-wrapper" :startYear="startYear" :endYear="endYear" :value="value"
:fields="fields" :item-height="itemHeight" :current="current" :disabled-after="disabledAfter"
:disabledBefore="disabledBefore"
@change="handlerChange" @touchstart="touchStart" @touchend="touchEnd">
</date-picker>
<range-picker v-if="mode == 'range'" class="w-picker-wrapper" :startYear="startYear" :endYear="endYear"
:value="value" :item-height="itemHeight" :current="current" @change="handlerChange" @touchstart="touchStart"
@touchend="touchEnd">
</range-picker>
<half-picker v-if="mode == 'half'" class="w-picker-wrapper" :startYear="startYear" :endYear="endYear" :value="value"
:item-height="itemHeight" :current="current" :disabled-after="disabledAfter" @change="handlerChange"
@touchstart="touchStart" @touchend="touchEnd">
</half-picker>
<view style="margin-bottom: 10px">
<u-button width="" text="确定" shape="circle" :style="{
color: '#fff',
width: '500upx',
backgroundColor: '#1936C9',
}" @click="pickerConfirm"></u-button>
</view>
</view>
</view>
</template>
<script>
import datePicker from "./date-picker.vue";
import rangePicker from "./range-picker.vue";
import halfPicker from "./half-picker.vue";
export default {
name: "w-picker",
components: {
datePicker,
rangePicker,
halfPicker,
},
props: {
mode: {
type: String,
default: "date",
},
value: {
//
type: [String, Array, Number],
default: "",
},
current: {
//
type: Boolean,
default: false,
},
themeColor: {
//
type: String,
default: "#f5a200",
},
fields: {
//:yearmonthdayhourminutesecond
type: String,
default: "date",
},
disabledAfter: {
//
type: Boolean,
default: false,
},
second: {
//time-picker
type: Boolean,
default: true,
},
options: {
//selector,region
type: [Array, Object],
default() {
return [];
},
},
defaultProps: {
//selector,linkagle
type: Object,
default() {
return {
label: "label",
value: "value",
children: "children",
};
},
},
defaultType: {
type: String,
default: "label",
},
hideArea: {
//mode=region
type: Boolean,
default: false,
},
level: {
//,2-4;
type: [Number, String],
default: 2,
},
timeout: {
//,
type: Boolean,
default: false,
},
expand: {
//mode=shortterm
type: [Number, String],
default: 30,
},
startYear: {
type: [String, Number],
default: 1970,
},
endYear: {
type: [String, Number],
default: new Date().getFullYear(),
},
visible: {
type: Boolean,
default: false,
},
//
timeType: {
type: String,
default: "",
},
// disabledMonth: {
// type: Number,
// default: 0,
// },
// disabledRange: {
// type: Array,
// default: ''
// },
disabledBefore: {
type: Boolean,
default: false,
}
},
created() {
this.createKey = Math.random() * 1000;
},
data() {
return {
itemHeight: `height: ${uni.upx2px(88)}px;`,
result: {},
confirmFlag: true,
};
},
methods: {
touchStart() {
if (this.timeout) {
this.confirmFlag = false;
}
},
touchEnd() {
if (this.timeout) {
setTimeout(() => {
this.confirmFlag = true;
}, 500);
}
},
handlerChange(res) {
let _this = this;
this.result = { ...res };
},
show() {
this.$emit("update:visible", true);
},
hide() {
this.$emit("update:visible", false);
},
onCancel(res) {
this.$emit("update:visible", false);
this.$emit("cancel");
},
pickerConfirm() {
if (!this.confirmFlag) {
return;
}
this.$emit("confirm", { timeType: this.timeType, ...this.result });
this.$emit("update:visible", false);
},
},
};
</script>
<style lang="scss">
.w-picker-item {
text-align: center;
width: 100%;
height: 88upx;
line-height: 88upx;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 30upx;
}
.w-picker {
z-index: 888;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
.mask.visible {
visibility: visible;
opacity: 1;
}
.w-picker-cnt {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
transition: all 0.3s ease;
transform: translateY(100%);
z-index: 3000;
background-color: #fff;
}
.w-picker-cnt.visible {
transform: translateY(0);
}
.w-picker-header {
display: flex;
align-items: center;
padding: 12upx 30upx;
height: 88upx;
background-color: #fff;
position: relative;
text-align: center;
font-size: 32upx;
justify-content: space-between;
border-bottom: solid 1px #eee;
border-radius: 10upx 0;
.w-picker-btn {
font-size: 30upx;
}
}
.w-picker-hd:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #e5e5e5;
color: #e5e5e5;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
}
</style>

View File

@ -3,19 +3,34 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [
{
"path": "pages/start"
},
//pageshttps://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"path": "pages/my/my",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/my/my",
"path": "pages/ticket/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/ticket/elector",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/ticket/reserve",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
@ -25,19 +40,21 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
"backgroundColor": "#F8F8F8",
"app-plus": {
"titleNView": false
}
},
"uniIdRouter": {},
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/index/index"
"pagePath": "pages/ticket/index",
"text": "场馆"
},
{
"pagePath": "pages/my/my"
"pagePath": "pages/my/my",
"text": "我的"
}
]
}

View File

@ -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>

View File

@ -1,5 +1,5 @@
<template>
<div class="mine" >
<div class="mine">
<div class="content2">
<div class="wrap1">
@ -14,7 +14,7 @@
<div class="wrap1_2_2">178273938123</div>
</div>
</div>
<div class="wrap2" >
<div class="wrap2">
<div class="wrap2_1">
<image src="../../static/zu609@3x.png"></image>
</div>
@ -22,10 +22,10 @@
</div>
</div>
<div class="content1">
<div class="warp1">
<div class="warp1_1">23</div>
<div class="warp1_2">历史预约门票</div>
</div>
<div class="warp1">
<div class="warp1_1">23</div>
<div class="warp1_2">历史预约门票</div>
</div>
<div class="warp1">
<div class="warp1_1">2</div>
<div class="warp1_2">未使用门票</div>
@ -36,7 +36,8 @@
</div>
</div>
<div class="content3">
<image style="height: 3rpx" src="../../static/zx303@3x.png"></image>
<image style="height: 3rpx"
src="../../static/zx303@3x.png"></image>
</div>
<div class="content4">
<div class="wrap1">·我未使用的门票</div>
@ -49,9 +50,9 @@
预约类型:单人票
</div>
<div class="wrap2_1_3">
<image src="../../static/zu762@3x.png"></image>
<image src="../../static/zu762@3x.png"></image>
</div>
<image src="../../static/zu1036@3x.png"></image>
<image src="../../static/zu1036@3x.png"></image>
</div>
<div class="wrap2_2"></div>
</div>
@ -69,7 +70,7 @@ export default {
<style scoped lang="scss">
.mine{
.mine {
box-sizing: border-box;
padding-top: 46rpx;
padding-left: 30rpx;
@ -78,10 +79,10 @@ export default {
width: 100vw;
height: 100vh;
background-image: url("../../static/tc11@3x.png");
.content2{
.content2 {
margin-top: 30rpx;
display: flex;
.wrap2{
.wrap2 {
margin-left: auto;
display: flex;
flex-direction: column;
@ -89,92 +90,90 @@ export default {
align-items: center;
width: 182rpx;
height: 204rpx;
background: #4E964D;
background: #4e964d;
border-radius: 40rpx;
.wrap2_1{
image{
.wrap2_1 {
image {
width: 40.88rpx;
height: 40.88rpx;
}
}
.wrap2_2{
.wrap2_2 {
font-size: 20rpx;
color: #fff;
}
}
.wrap1{
.wrap1 {
width: 480rpx;
height:204rpx;
height: 204rpx;
border-radius: 40rpx;
background: #fff;
display: flex;
align-items: center;
.wrap1_2{
.wrap1_2 {
margin-left: 30rpx;
display: flex;
flex-direction: column;
.wrap1_2_2{
.wrap1_2_2 {
color: #626262;
font-size: 24rpx;
}
.wrap1_2_1{
.wrap1_2_1 {
margin-bottom: 6rpx;
display: flex;
align-items: center;
.wrap1_2_1_1{
.wrap1_2_1_1 {
margin-right: 6rpx;
font-size: 28rpx;
}
.wrap1_2_1_2{
.wrap1_2_1_2 {
width: 76rpx;
height: 26rpx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background:#76C458 ;
background: #76c458;
font-size: 16rpx;
}
}
}
.wrap1_1{
.wrap1_1 {
margin-left: 68rpx;
image{
image {
width: 126rpx;
height: 126rpx;
}
}
}
}
.content4{
.content4 {
margin-top: 22rpx;
.wrap1{
color: #8CC4B2;
.wrap1 {
color: #8cc4b2;
font-size: 28rpx;
}
.wrap2{
.wrap2_1{
.wrap2 {
.wrap2_1 {
position: relative;
.wrap2_1_3{
.wrap2_1_3 {
position: absolute;
z-index: 2;
width: 150rpx;
height: 56rpx;
background: #2E765E;
background: #2e765e;
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
right: 20rpx;
bottom: 22rpx;
image{
image {
width: 119.5rpx;
height: 34rpx;
}
}
.wrap2_1_2{
.wrap2_1_2 {
white-space: pre-line;
font-size: 20rpx;
color: #fff;
@ -183,7 +182,7 @@ export default {
top: 66rpx;
left: 280rpx;
}
.wrap2_1_1{
.wrap2_1_1 {
font-size: 32rpx;
color: #fff;
top: 16rpx;
@ -192,43 +191,43 @@ export default {
position: absolute;
}
image{
height: 210rpx;
width: 100%;
}
image {
height: 210rpx;
width: 100%;
}
}
}
}
.content3{
.content3 {
display: flex;
justify-content: center;
align-items: center;
margin-top: 38rpx;
}
.content1{
.content1 {
margin-top: 26rpx;
height: 134rpx;
height: 134rpx;
background: #fff;
border-radius: 40rpx;
display: flex;
padding-top: 34rpx;
padding-bottom: 30rpx;
box-sizing: border-box;
.warp1{
.warp1 {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
border-right: 1px solid #D3E6F2;
&:last-child{
border-right: 1px solid #d3e6f2;
&:last-child {
border-right: none;
}
.warp1_1{
font-size: 28rpx;
}
.warp1_2{
.warp1_1 {
font-size: 28rpx;
}
.warp1_2 {
font-size: 20rpx;
color: #979798;
color: #979798;
}
}
}

35
pages/start.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<view>
</view>
</template>
<script>
export default {
components: {},
data () {
return {
};
},
onLoad () {
setTimeout(() => {
uni.reLaunch({
url: '/pages/ticket/index'
});
}, 1000);
},
onShow () {
},
methods: {
},
};
</script>
<style lang="scss" scope>
page {
background: url("../static/bg-start.png") no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
height: 100vh;
box-sizing: border-box;
}
</style>

141
pages/ticket/elector.vue Normal file
View File

@ -0,0 +1,141 @@
<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;
box-shadow: 0px 1px 2px #dddddd, 0px 1px 2px #ffffff, 0px 1px 2px #736f6f;
}
/deep/ .u-image__image {
border-radius: 20rpx 0 0 20rpx !important;
}
</style>

136
pages/ticket/index.vue Normal file
View File

@ -0,0 +1,136 @@
<template>
<view>
<fl-page-header :autoback="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-end item-center"
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 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-6 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 - 430rpx)"
@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-6 font-16 row justify-center items-center"
style="font-weight:bolder">{{item.name}}</view>
<view class="col-3 row justify-center items-center"
:style="{color:item.typeNum!=0?'#40BE94':'#AFAFAF'}">
{{ item.typeNum }}
</view>
<view class="col-3 row justify-center items-center cursur">
<text v-if="item.typeNum!=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/elector')">查看</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" />
<my-tabbar :currentPage="'pages/ticket/index'"></my-tabbar>
</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.ticketData
},
onShow () {
this.getPageData();
},
beforeDestroy () { },
methods: {
getPageData (scroll) {
},
handleLink (path, params = {}) {
uni.navigateTo({
url: path + calcRouteParams(params),
});
},
scrollRequest () {
console.log('scrollRequest');
this.tableParams.page++;
this.getPageData(true);
},
handleFinishAll () {
},
handlePageType () {
this.listData = [];
this.getPageData();
},
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: 34rpx 0;
box-shadow: 0px 1px 2px #dddddd, 0px 1px 2px #ffffff, 0px 1px 2px #736f6f;
}
</style>

309
pages/ticket/reserve.vue Normal file
View File

@ -0,0 +1,309 @@
<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>
<!-- <w-picker :visible.sync="dateShow"
:mode="'date'"
:current="true"
@confirm="(e) => handleDateSelectConfirm(e, 'time')"
@cancel="handleDateSelectCancel"
disabledBefore
:disabled-after="false"
:ref="'date'"
:second="false"
fields="minute"></w-picker> -->
<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;margin-bottom:60rpx">
<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] = e.result;
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;
box-shadow: 0px 1px 2px #dddddd, 0px 1px 2px #ffffff, 0px 1px 2px #736f6f;
.form-item {
display: flex;
margin-top: 7rpx;
}
}
/deep/ .u-cell__body {
padding: 10rpx 5rpx;
}
</style>

BIN
static/bg-common.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
static/bg-start.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 516 KiB

BIN
static/elector-1-view.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 394 KiB

BIN
static/elector-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
static/elector-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
static/icon-pick.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/icon-ticket-addr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

156
static/pageData.json Normal file
View File

@ -0,0 +1,156 @@
{
"ticketData": [
{
"name": "门票系统的某个场馆",
"typeNum": "3"
},
{
"name": "门票系统的某个场馆",
"typeNum": "3"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
}
],
"elector": [
{
"url": "../../static/elector-1.png",
"name": "首都博物馆门票",
"canReserve": "1023",
"total": "20000"
},
{
"url": "../../static/elector-1.png",
"name": "首都博物馆节假日门票",
"canReserve": "11123",
"total": "20000"
},
{
"url": "../../static/elector-1.png",
"name": "首都博物馆工作日门票",
"canReserve": "0",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
}
]
}

View File

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

2
unpackage/dist/index.html vendored Normal file
View File

@ -0,0 +1,2 @@
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>uni-admission-fee</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.97465e7b.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.dbfdf2e8.js></script><script src=/static/js/index.4d896bd5.js></script></body></html>

BIN
unpackage/dist/static/bg-common.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
unpackage/dist/static/bg-start.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 516 KiB

BIN
unpackage/dist/static/elector-1-view.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 394 KiB

BIN
unpackage/dist/static/elector-1.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
unpackage/dist/static/elector-2.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
unpackage/dist/static/icon-pick.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 516 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["pages-start"],{"13a4":function(n,r,t){"use strict";t.r(r);var e=t("895f"),a=t("e309");for(var u in a)["default"].indexOf(u)<0&&function(n){t.d(r,n,(function(){return a[n]}))}(u);t("9f3f");var o,i=t("f0c5"),c=Object(i["a"])(a["default"],e["b"],e["c"],!1,null,"148a4902",null,!1,e["a"],o);r["default"]=c.exports},"1f9e":function(n,r,t){n.exports=t.p+"static/img/bg-start.302a4216.png"},3254:function(n,r,t){var e=t("24fb"),a=t("1de5"),u=t("1f9e");r=e(!1);var o=a(u);r.push([n.i,'@charset "UTF-8";\r\n/**\r\n * 这里是uni-app内置的常用样式变量\r\n *\r\n * uni-app 官方扩展插件及插件市场https://ext.dcloud.net.cn上很多三方插件均使用了这些样式变量\r\n * 如果你是插件开发者建议你使用scss预处理并在插件代码中直接使用这些变量无需 import 这个文件方便用户通过搭积木的方式开发整体风格一致的App\r\n *\r\n */\r\n/**\r\n * 如果你是App开发者插件使用者你可以通过修改这些变量来定制自己的插件主题实现自定义主题功能\r\n *\r\n * 如果你的项目同样使用了scss预处理你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件\r\n */\r\n/* 颜色变量 */\r\n/* 行为相关颜色 */\r\n/* 文字基本颜色 */\r\n/* 背景颜色 */\r\n/* 边框颜色 */\r\n/* 尺寸变量 */\r\n/* 文字尺寸 */\r\n/* 图片尺寸 */\r\n/* Border Radius */\r\n/* 水平间距 */\r\n/* 垂直间距 */\r\n/* 透明度 */\r\n/* 文章场景相关 */uni-page-body[data-v-148a4902]{background:url('+o+") no-repeat;background-size:100% 100%;background-attachment:fixed;height:100vh;box-sizing:border-box}body.?%PAGE?%[data-v-148a4902]{background:url("+o+") no-repeat;background-size:100% 100%;background-attachment:fixed}",""]),n.exports=r},"4f45":function(n,r,t){"use strict";t("7a82"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var e={components:{},data:function(){return{}},onLoad:function(){setTimeout((function(){uni.reLaunch({url:"/pages/ticket/index"})}),1e3)},onShow:function(){},methods:{}};r.default=e},"895f":function(n,r,t){"use strict";var e;t.d(r,"b",(function(){return a})),t.d(r,"c",(function(){return u})),t.d(r,"a",(function(){return e}));var a=function(){var n=this,r=n.$createElement,t=n._self._c||r;return t("v-uni-view")},u=[]},"9f3f":function(n,r,t){"use strict";var e=t("f554"),a=t.n(e);a.a},e309:function(n,r,t){"use strict";t.r(r);var e=t("4f45"),a=t.n(e);for(var u in e)["default"].indexOf(u)<0&&function(n){t.d(r,n,(function(){return e[n]}))}(u);r["default"]=a.a},f554:function(n,r,t){var e=t("3254");e.__esModule&&(e=e.default),"string"===typeof e&&(e=[[n.i,e,""]]),e.locals&&(n.exports=e.locals);var a=t("4f06").default;a("12b14150",e,!0,{sourceMap:!1,shadowMode:!1})}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

BIN
unpackage/dist/static/logo.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

156
unpackage/dist/static/pageData.json vendored Normal file
View File

@ -0,0 +1,156 @@
{
"ticketData": [
{
"name": "门票系统的某个场馆",
"typeNum": "3"
},
{
"name": "门票系统的某个场馆",
"typeNum": "3"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
},
{
"name": "门票系统的某个场馆",
"typeNum": "0"
}
],
"elector": [
{
"url": "../../static/elector-1.png",
"name": "首都博物馆门票",
"canReserve": "1023",
"total": "20000"
},
{
"url": "../../static/elector-1.png",
"name": "首都博物馆节假日门票",
"canReserve": "11123",
"total": "20000"
},
{
"url": "../../static/elector-1.png",
"name": "首都博物馆工作日门票",
"canReserve": "0",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
},
{
"url": "../../static/elector-2.png",
"name": "首都博物馆元旦门票",
"canReserve": "23",
"total": "2000"
}
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

21
util/date.js Normal file
View File

@ -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
}

290
util/form.js Normal file
View File

@ -0,0 +1,290 @@
export const getParamsByObj = (params, paramsConfig, obj) => {
if (paramsConfig !== undefined && paramsConfig.length > 0 && obj !== null) {
for (let i in paramsConfig) {
let paramsItem = paramsConfig[i];
if (paramsItem.value !== undefined) {
params[paramsItem.label] = paramsItem.value;
}
if (obj && paramsItem.field !== undefined) {
params[paramsItem.label] =
obj[paramsItem.field] === undefined ? "" : obj[paramsItem.field];
params[paramsItem.label] =
paramsItem.type === "Array"
? [params[paramsItem.label]]
: params[paramsItem.label];
}
}
}
return params;
};
export const getLabelByOptions = (val, options) => {
let label = "";
let valOpt = {};
for (let i in options) {
if (options[i].value === val) {
valOpt = options[i];
break;
}
}
if (valOpt.class || valOpt.style) {
return `<div class="sf-status-label ${valOpt.class}" style="${valOpt.style}">${valOpt.label}</div>`;
}
return valOpt.label;
};
export const getFormObj = (formConfig) => {
let data = {};
formConfig.forEach((item) => {
if (item.field) {
data[item.field] = item.value;
}
});
return data;
};
export const setFormObj = (formConfig, data) => {
formConfig.forEach((item) => {
if (item.field && data[item.field] !== undefined) {
item.value = data[item.field];
}
});
};
export const clearFormObj = (formConfig) => {
formConfig.forEach((item) => {
if (item.field) {
item.value = Array.isArray(item.value)
? []
: !isNaN(item.value)
? null
: "";
}
});
};
export const visibleFormItem = (itemshow, formObj = {}) => {
let flag = true;
if (Object.prototype.toString.call(itemshow) === "[object Boolean]") {
return itemshow;
}
let mathArr = [
"+",
"-",
"/",
"*",
">",
">=",
"<",
"<=",
"==",
"===",
"!==",
"||",
"&&",
];
if (itemshow && Object.keys(formObj).length > 0) {
let expression = itemshow
.replace(/\[%=/g, "")
.replace(/%\]/g, "")
.replace(/'/g, "");
let cs = expression.split(/(\/|%|\*|\+|-|&&|\|\||>|<|>=|<=|\(|\)|===|!==)/);
for (let idx in cs) {
let csItem = cs[idx];
// 右边为''
if (formObj[csItem] === "") {
cs[idx] = "'" + formObj[csItem] + "'";
// 左边可转为数值计算
} else if (
formObj[csItem] !== undefined &&
Object.prototype.toString.call(formObj[csItem]) === "object String"
) {
cs[idx] = formObj[csItem];
} else if (
formObj[csItem] !== undefined &&
Object.prototype.toString.call(formObj[csItem]) === "object Number"
) {
cs[idx] = "'" + formObj[csItem] + "'";
// 左边字段不存在 右边字段值字符串化
} else if (!mathArr.includes(csItem) && formObj[csItem] === undefined) {
cs[idx] = "'" + csItem + "'";
// 计算公式
} else if (mathArr.includes(csItem)) {
cs[idx] = csItem;
} else {
// 左边 在obj中存在 字符串化
cs[idx] = "'" + formObj[csItem] + "'";
}
}
cs = cs.join("");
flag = flag && window.eval(cs);
}
return flag;
};
export const validateItem = (item, itemValue) => {
let validate = item.validate;
let noErr = true;
let message = "";
switch (validate) {
case "required": {
// ADD input type is number is empty is null And dropdowntable,userDropdowntable,dropdownbox is empty is []
if (itemValue === null || itemValue.length === 0) {
noErr = false;
message = "请输入内容";
}
break;
}
case "": {
// ADD input type is number is empty is null And dropdowntable,userDropdowntable,dropdownbox is empty is []
if (itemValue === null || itemValue.length === 0) {
noErr = false;
message = "请输入内容";
}
break;
}
case "email": {
const regEmail =
/^[a-zA-Z0-9_-]+([._\\-]*[a-zA-Z0-9_-])*@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if (regEmail.test(itemValue) === false) {
noErr = false;
message = "请输入正确邮箱";
}
break;
}
case "chinese": {
const regChinese = /^[^\u4e00-\u9fa5]{0,}$/;
if (regChinese.test(itemValue) === false) {
noErr = false;
message = "请输入中文字符";
}
break;
}
case "maxDecimals4": {
// let regDecimals2 = /^\d+(\.\d{2})?$/
const regDecimals4 = /^\d+(?:\.\d{1,4})?$/;
if (
itemValue !== null &&
itemValue !== "" &&
regDecimals4.test(itemValue) === false
) {
noErr = false;
message = "最多四位小数";
}
break;
}
case "english": {
// 添加英文支持-
const regEnglish = /^[a-zA-Z0-9_@-]{1,}$/;
if (regEnglish.test(itemValue) === false) {
noErr = false;
message = "请输入英文字符";
}
break;
}
case "datetime": {
const regDatetime =
/^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
if (regDatetime.test(itemValue) === false) {
noErr = false;
message = "请输入正确时间";
}
break;
}
case "date": {
const regDate = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
if (regDate.test(itemValue) === false) {
noErr = false;
message = "请输入正确日期";
}
break;
}
case "time": {
const regTime = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
if (regTime.test(itemValue) === false) {
noErr = false;
message = "请输入正确时间";
}
break;
}
case "interger": {
const regInterger = /^[1-9]\d*$/;
if (regInterger.test(itemValue) === false) {
noErr = false;
message = "请输入整数";
}
break;
}
case "positiveNumber": {
// 包括0的正数
if (itemValue < 0) {
noErr = false;
message = "请输入非负数";
}
break;
}
case "gt0Number": {
// 不包括0的正数
if (itemValue <= 0) {
noErr = false;
message = "请输入非零正数";
}
break;
}
case "telephone": {
const telephoneNumber = /^1(3|4|5|6|7|8|9)\d{9}$/;
if (telephoneNumber.test(itemValue) === false) {
noErr = false;
message = "请输入正确手机号码";
}
break;
}
case "pwdstrong": {
const forceRegex = new RegExp("(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{6,20}");
if (forceRegex.test(itemValue) === false) {
noErr = false;
message = "请输入符合格式的密码";
}
break;
}
default:
noErr = true;
}
if (!noErr) {
item.errorMessage = message;
} else {
item.errorMessage = "";
}
};
export const validataForm = (formConfig) => {
if (formConfig) {
let formHasErr = false;
formConfig.forEach((item) => {
if (item.validate !== undefined) {
validateItem(item, item.value);
}
if (item.errorMessage) {
formHasErr = true;
}
});
return formHasErr;
}
};
export function isEmpty (val) {
if (val === null || val === "" || val === undefined) {
return true;
}
return false;
}
export function calcRouteParams (obj) {
if (obj && JSON.stringify(obj) !== '{}') {
let str = '?'
for (let key in obj) {
str += key + '=' + obj[key] + '&'
}
return str.slice(0, -1)
}
return ''
}