Compare commits
5 Commits
4a706b0ba2
...
6618cd2966
Author | SHA1 | Date | |
---|---|---|---|
|
6618cd2966 | ||
|
dbc683e089 | ||
|
4d1e61ea55 | ||
|
dc4780b061 | ||
|
181a62b159 |
34
App.vue
@ -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
@ -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;
|
||||
}
|
73
components/fl-page-header/fl-page-header.vue
Normal 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>
|
@ -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>
|
135
components/price-picker/price-picker.vue
Normal 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>
|
1171
components/w-picker/date-picker.vue
Normal file
526
components/w-picker/half-picker.vue
Normal 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>
|
344
components/w-picker/range-picker.vue
Normal 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>
|
32
components/w-picker/w-picker.css
Normal 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;
|
||||
}
|
285
components/w-picker/w-picker.vue
Normal 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: {
|
||||
//日期颗粒度:year、month、day、hour、minute、second
|
||||
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>
|
37
pages.json
@ -3,19 +3,34 @@
|
||||
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/start"
|
||||
},
|
||||
//pages数组中第一项表示应用启动页,参考:https://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": "我的"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -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>
|
105
pages/my/my.vue
@ -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
@ -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
@ -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
@ -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
@ -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
After Width: | Height: | Size: 1.3 MiB |
BIN
static/bg-start.png
Normal file
After Width: | Height: | Size: 516 KiB |
BIN
static/elector-1-view.png
Normal file
After Width: | Height: | Size: 394 KiB |
BIN
static/elector-1.png
Normal file
After Width: | Height: | Size: 26 KiB |
BIN
static/elector-2.png
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
static/icon-pick.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
static/icon-ticket-addr.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
156
static/pageData.json
Normal 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"
|
||||
}
|
||||
]
|
||||
}
|
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
unpackage/.automator/h5/.automator.json
Normal file
2
unpackage/dist/index.html
vendored
Normal 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
After Width: | Height: | Size: 1.3 MiB |
BIN
unpackage/dist/static/bg-start.png
vendored
Normal file
After Width: | Height: | Size: 516 KiB |
BIN
unpackage/dist/static/elector-1-view.png
vendored
Normal file
After Width: | Height: | Size: 394 KiB |
BIN
unpackage/dist/static/elector-1.png
vendored
Normal file
After Width: | Height: | Size: 26 KiB |
BIN
unpackage/dist/static/elector-2.png
vendored
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
unpackage/dist/static/icon-pick.png
vendored
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
unpackage/dist/static/icon-ticket-addr.png
vendored
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
unpackage/dist/static/img/bg-common.44573e02.png
vendored
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
unpackage/dist/static/img/bg-start.302a4216.png
vendored
Normal file
After Width: | Height: | Size: 516 KiB |
1
unpackage/dist/static/index.97465e7b.css
vendored
Normal file
18
unpackage/dist/static/js/chunk-vendors.dbfdf2e8.js
vendored
Normal file
1
unpackage/dist/static/js/index.4d896bd5.js
vendored
Normal file
1
unpackage/dist/static/js/pages-my-my.aff7c143.js
vendored
Normal file
1
unpackage/dist/static/js/pages-my-my~pages-ticket-index.f9fc3e87.js
vendored
Normal file
1
unpackage/dist/static/js/pages-start.98cee474.js
vendored
Normal 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})}}]);
|
1
unpackage/dist/static/js/pages-ticket-elector.ee6c0aa8.js
vendored
Normal file
1
unpackage/dist/static/js/pages-ticket-elector~pages-ticket-index.2ecc6294.js
vendored
Normal file
1
unpackage/dist/static/js/pages-ticket-index.e33a09a5.js
vendored
Normal file
1
unpackage/dist/static/js/pages-ticket-reserve.7849db49.js
vendored
Normal file
BIN
unpackage/dist/static/logo.png
vendored
Normal file
After Width: | Height: | Size: 3.9 KiB |
156
unpackage/dist/static/pageData.json
vendored
Normal 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"
|
||||
}
|
||||
]
|
||||
}
|
BIN
unpackage/dist/static/tabbar/icon-mine-active.png
vendored
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
unpackage/dist/static/tabbar/icon-mine.png
vendored
Normal file
After Width: | Height: | Size: 3.0 KiB |
BIN
unpackage/dist/static/tabbar/icon-ticket-active.png
vendored
Normal file
After Width: | Height: | Size: 3.5 KiB |
BIN
unpackage/dist/static/tabbar/icon-ticket.png
vendored
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
unpackage/uni-admission-fee.zip
Normal file
21
util/date.js
Normal 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
@ -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 ''
|
||||
}
|