fix ticket
This commit is contained in:
张 元山
parent
181a62b159
commit
dc4780b061
@ -679,3 +679,22 @@
|
|||||||
height: var(--status-bar-height);
|
height: var(--status-bar-height);
|
||||||
width: 100%;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,61 +1,90 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view>
|
||||||
<u-tabbar :value="value4"
|
<u-tabbar :value="current"
|
||||||
@change="change"
|
@change="changeTab"
|
||||||
:fixed="true"
|
:fixed="true"
|
||||||
:border="false"
|
|
||||||
:placeholder="false"
|
:placeholder="false"
|
||||||
activeColor="#40BE94"
|
:safeAreaInsetBottom="true"
|
||||||
:safeAreaInsetBottom="true">
|
:border="false"
|
||||||
<u-tabbar-item text="场馆">
|
activeColor="#FFC748"
|
||||||
<image style="width: 52rpx;height: 52rpx"
|
inactiveColor="#1D1D1D">
|
||||||
class="u-page__item__slot-icon"
|
<u-tabbar-item v-for="(item,index) in tabBarList"
|
||||||
slot="active-icon"
|
:key="index"
|
||||||
src="../../static/zu618@3x (1).png"></image>
|
:text="item.text">
|
||||||
<image style="width: 52rpx;height: 52rpx"
|
<image class="u-page__item__slot-icon"
|
||||||
class="u-page__item__slot-icon"
|
|
||||||
slot="inactive-icon"
|
slot="inactive-icon"
|
||||||
src="../../static/zu759@3x.png"></image>
|
:src="item.iconPath"></image>
|
||||||
</u-tabbar-item>
|
<image class="u-page__item__slot-icon"
|
||||||
<u-tabbar-item text="我的">
|
|
||||||
<image style="width: 52rpx;height: 52rpx"
|
|
||||||
class="u-page__item__slot-icon"
|
|
||||||
slot="active-icon"
|
slot="active-icon"
|
||||||
src="../../static/zu760@3x.png"></image>
|
:src="item.selectedIconPath"></image>
|
||||||
<image style="width: 52rpx;height: 52rpx"
|
|
||||||
class="u-page__item__slot-icon"
|
|
||||||
slot="inactive-icon"
|
|
||||||
src="../../static/zu628@3x (1).png"></image>
|
|
||||||
</u-tabbar-item>
|
</u-tabbar-item>
|
||||||
</u-tabbar>
|
</u-tabbar>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
props: {
|
||||||
|
currentPage: String
|
||||||
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
title: 'Hello',
|
current: 0,
|
||||||
value4: 0,
|
tabBarList: [{
|
||||||
}
|
pagePath: "pages/ticket/index",
|
||||||
},
|
iconPath: "../../static/tabbar/icon-ticket.png",
|
||||||
onLoad () {
|
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: {
|
methods: {
|
||||||
change (name) {
|
changeTab (e) {
|
||||||
if (name === 0) {
|
let page = '/' + this.tabBarList[e].pagePath
|
||||||
uni.switchTab({
|
console.log(page);
|
||||||
url: '/pages/ticket/index'
|
uni.switchTab({
|
||||||
});
|
url: page,
|
||||||
} else if (name === 1) {
|
success: () => {
|
||||||
uni.switchTab({
|
},
|
||||||
url: '/pages/my/my'
|
fail: (e) => {
|
||||||
});
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
})
|
||||||
this.value4 = name
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
created () {
|
||||||
|
//隐藏原生tabbar
|
||||||
|
uni.hideTabBar();
|
||||||
|
// 当前选中的菜单
|
||||||
|
this.tabBarList.forEach((i, index) => {
|
||||||
|
if (i.pagePath == this.currentPage) {
|
||||||
|
this.current = index
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
760
components/w-picker/date-picker.vue
Normal file
760
components/w-picker/date-picker.vue
Normal file
@ -0,0 +1,760 @@
|
|||||||
|
<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>分</view>
|
||||||
|
</view>
|
||||||
|
<picker-view v-if="fields=='year'" 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>
|
||||||
|
<picker-view v-if="fields=='month'" 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>
|
||||||
|
<picker-view v-if="fields=='day'" 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>
|
||||||
|
<picker-view v-if="fields=='hour'" 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.hours" :key="index">{{item}}时</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
<picker-view v-if="fields=='minute'" 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.hours" :key="index">{{item}}时</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
<picker-view v-if="fields=='second'" 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.hours" :key="index">{{item}}时</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}分</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="w-picker-item" v-for="(item,index) in range.seconds" :key="index">{{item}}秒</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pickVal:[],
|
||||||
|
range:{
|
||||||
|
years:[],
|
||||||
|
months:[],
|
||||||
|
days:[],
|
||||||
|
hours:[],
|
||||||
|
minutes:[],
|
||||||
|
seconds:[]
|
||||||
|
},
|
||||||
|
checkObj:{}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
itemHeight:{
|
||||||
|
type:String,
|
||||||
|
default:"44px"
|
||||||
|
},
|
||||||
|
startYear:{
|
||||||
|
type:[String,Number],
|
||||||
|
default:""
|
||||||
|
},
|
||||||
|
endYear:{
|
||||||
|
type:[String,Number],
|
||||||
|
default:""
|
||||||
|
},
|
||||||
|
value:{
|
||||||
|
type:[String,Array,Number],
|
||||||
|
default:""
|
||||||
|
},
|
||||||
|
current:{//是否默认选中当前日期
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
disabledAfter:{//是否禁用当前之后的日期
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
fields:{
|
||||||
|
type:String,
|
||||||
|
default:"day"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
fields(val){
|
||||||
|
this.initData();
|
||||||
|
},
|
||||||
|
value(val){
|
||||||
|
this.initData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initData();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
formatNum(n){
|
||||||
|
return (Number(n)<10?'0'+Number(n):Number(n)+'');
|
||||||
|
},
|
||||||
|
checkValue(value){
|
||||||
|
let strReg,example
|
||||||
|
switch(this.fields){
|
||||||
|
case "year":
|
||||||
|
strReg=/^\d{4}$/;
|
||||||
|
example="2019";
|
||||||
|
break;
|
||||||
|
case "month":
|
||||||
|
strReg=/^\d{4}-\d{2}$/;
|
||||||
|
example="2019-02";
|
||||||
|
break;
|
||||||
|
case "day":
|
||||||
|
strReg=/^\d{4}-\d{2}-\d{2}$/;
|
||||||
|
example="2019-02-01";
|
||||||
|
break;
|
||||||
|
case "hour":
|
||||||
|
strReg=/^\d{4}-\d{2}-\d{2} \d{2}(:\d{2}){1,2}?$/;
|
||||||
|
example="2019-02-01 18:00:00或2019-02-01 18";
|
||||||
|
break;
|
||||||
|
case "minute":
|
||||||
|
strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2}){0,1}?$/;
|
||||||
|
example="2019-02-01 18:06:00或2019-02-01 18:06";
|
||||||
|
break;
|
||||||
|
case "second":
|
||||||
|
strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
|
||||||
|
example="2019-02-01 18:06:01";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if(!strReg.test(value)){
|
||||||
|
console.log(new Error("请传入与mode、fields匹配的value值，例value="+example+""))
|
||||||
|
}
|
||||||
|
return strReg.test(value);
|
||||||
|
},
|
||||||
|
resetData(year,month,day,hour,minute){
|
||||||
|
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 curMinute=curDate.curMinute;
|
||||||
|
let curSecond=curDate.curSecond;
|
||||||
|
let months=[],days=[],hours=[],minutes=[],seconds=[];
|
||||||
|
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 hoursLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay)?24:curHour+1):24;
|
||||||
|
let minutesLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay||hour*1<curHour)?60:curMinute+1):60;
|
||||||
|
let secondsLen=disabledAfter?((year*1<curYear||month*1<curMonth||day*1<curDay||hour*1<curHour||minute*1<curMinute)?60:curSecond+1):60;
|
||||||
|
for(let month=1;month<=monthsLen;month++){
|
||||||
|
months.push(this.formatNum(month));
|
||||||
|
};
|
||||||
|
for(let day=1;day<=daysLen;day++){
|
||||||
|
days.push(this.formatNum(day));
|
||||||
|
}
|
||||||
|
for(let hour=0;hour<hoursLen;hour++){
|
||||||
|
hours.push(this.formatNum(hour));
|
||||||
|
}
|
||||||
|
for(let minute=0;minute<minutesLen;minute++){
|
||||||
|
minutes.push(this.formatNum(minute));
|
||||||
|
}
|
||||||
|
for(let second=0;second<secondsLen;second++){
|
||||||
|
seconds.push(this.formatNum(second));
|
||||||
|
}
|
||||||
|
return{
|
||||||
|
months,
|
||||||
|
days,
|
||||||
|
hours,
|
||||||
|
minutes,
|
||||||
|
seconds
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isLeapYear (Year) {
|
||||||
|
if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getData(dVal){
|
||||||
|
//用来处理初始化数据
|
||||||
|
let curFlag=this.current;
|
||||||
|
let disabledAfter=this.disabledAfter;
|
||||||
|
let fields=this.fields;
|
||||||
|
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 curMinute=curDate.curMinute;
|
||||||
|
let curSecond=curDate.curSecond;
|
||||||
|
let defaultDate=this.getDefaultDate();
|
||||||
|
let startYear=this.getStartDate().getFullYear();
|
||||||
|
let endYear=this.getEndDate().getFullYear();
|
||||||
|
//颗粒度，禁用当前之后日期仅对year,month,day,hour生效;分钟秒禁用没有意义,
|
||||||
|
let years=[],months=[],days=[],hours=[],minutes=[],seconds=[];
|
||||||
|
let year=dVal[0]*1;
|
||||||
|
let month=dVal[1]*1;
|
||||||
|
let day=dVal[2]*1;
|
||||||
|
let hour=dVal[3]*1;
|
||||||
|
let minute=dVal[4]*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 hoursLen=disabledAfter?((year<curYear||month<curMonth||day<curDay)?24:curHour+1):24;
|
||||||
|
let minutesLen=disabledAfter?((year<curYear||month<curMonth||day<curDay||hour<curHour)?60:curMinute+1):60;
|
||||||
|
let secondsLen=disabledAfter?((year<curYear||month<curMonth||day<curDay||hour<curHour||minute<curMinute)?60:curSecond+1):60;
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
for(let hour=0;hour<hoursLen;hour++){
|
||||||
|
hours.push(this.formatNum(hour));
|
||||||
|
}
|
||||||
|
for(let minute=0;minute<minutesLen;minute++){
|
||||||
|
minutes.push(this.formatNum(minute));
|
||||||
|
}
|
||||||
|
// for(let second=0;second<(disabledAfter?curDate.curSecond+1:60);second++){
|
||||||
|
// seconds.push(this.formatNum(second));
|
||||||
|
// }
|
||||||
|
for(let second=0;second<60;second++){
|
||||||
|
seconds.push(this.formatNum(second));
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
years,
|
||||||
|
months,
|
||||||
|
days,
|
||||||
|
hours,
|
||||||
|
minutes,
|
||||||
|
seconds
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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 curMinute=curDate.getMinutes();
|
||||||
|
let curSecond=curDate.getSeconds();
|
||||||
|
return{
|
||||||
|
curDate,
|
||||||
|
curYear,
|
||||||
|
curMonth,
|
||||||
|
curMonthdays,
|
||||||
|
curDay,
|
||||||
|
curHour,
|
||||||
|
curMinute,
|
||||||
|
curSecond
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getDefaultDate(){
|
||||||
|
let value=this.value;
|
||||||
|
let reg=/-/g;
|
||||||
|
let defaultDate=value?new Date(value.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/01");
|
||||||
|
}else{
|
||||||
|
endDate=new Date();
|
||||||
|
}
|
||||||
|
return endDate;
|
||||||
|
},
|
||||||
|
getDval(){
|
||||||
|
let value=this.value;
|
||||||
|
let fields=this.fields;
|
||||||
|
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=this.formatNum(aDate.getHours());
|
||||||
|
let minute=this.formatNum(aDate.getMinutes());
|
||||||
|
let second=this.formatNum(aDate.getSeconds());
|
||||||
|
if(value){
|
||||||
|
let flag=this.checkValue(value);
|
||||||
|
if(!flag){
|
||||||
|
dVal=[year,month,day,hour,minute,second]
|
||||||
|
}else{
|
||||||
|
switch(this.fields){
|
||||||
|
case "year":
|
||||||
|
dVal=value?[value]:[];
|
||||||
|
break;
|
||||||
|
case "month":
|
||||||
|
dVal=value?value.split("-"):[];
|
||||||
|
break;
|
||||||
|
case "day":
|
||||||
|
dVal=value?value.split("-"):[];
|
||||||
|
break;
|
||||||
|
case "hour":
|
||||||
|
dVal=[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")];
|
||||||
|
break;
|
||||||
|
case "minute":
|
||||||
|
dVal=value?[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")]:[];
|
||||||
|
break;
|
||||||
|
case "second":
|
||||||
|
dVal=[...value.split(" ")[0].split("-"),...value.split(" ")[1].split(":")];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
dVal=[year,month,day,hour,minute,second]
|
||||||
|
}
|
||||||
|
return dVal;
|
||||||
|
},
|
||||||
|
initData(){
|
||||||
|
let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
|
||||||
|
let years=[],months=[],days=[],hours=[],minutes=[],seconds=[];
|
||||||
|
let dVal=[],pickVal=[];
|
||||||
|
let value=this.value;
|
||||||
|
let reg=/-/g;
|
||||||
|
let range={};
|
||||||
|
let result="",full="",year,month,day,hour,minute,second,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 curHour=curDate.curHour;
|
||||||
|
let curMinute=curDate.curMinute;
|
||||||
|
let curSecond=curDate.curSecond;
|
||||||
|
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;
|
||||||
|
hours=dateData.hours;
|
||||||
|
minutes=dateData.minutes;
|
||||||
|
seconds=dateData.seconds;
|
||||||
|
switch(this.fields){
|
||||||
|
case "year":
|
||||||
|
pickVal=disabledAfter?[
|
||||||
|
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0
|
||||||
|
]:(curFlag?[
|
||||||
|
years.indexOf(curYear+'')
|
||||||
|
]:[
|
||||||
|
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0
|
||||||
|
]);
|
||||||
|
range={years};
|
||||||
|
year=dVal[0]?dVal[0]:years[0];
|
||||||
|
result=full=`${year}`;
|
||||||
|
obj={
|
||||||
|
year
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "month":
|
||||||
|
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
|
||||||
|
]:(curFlag?[
|
||||||
|
years.indexOf(curYear+''),
|
||||||
|
months.indexOf(this.formatNum(curMonth))
|
||||||
|
]:[
|
||||||
|
dVal[0]&&years.indexOf(dVal[0])!=-1?years.indexOf(dVal[0]):0,
|
||||||
|
dVal[1]&&months.indexOf(dVal[1])!=-1?months.indexOf(dVal[1]):0
|
||||||
|
]);
|
||||||
|
range={years,months};
|
||||||
|
year=dVal[0]?dVal[0]:years[0];
|
||||||
|
month=dVal[1]?dVal[1]:months[0];
|
||||||
|
result=full=`${year+'-'+month}`;
|
||||||
|
obj={
|
||||||
|
year,
|
||||||
|
month
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "day":
|
||||||
|
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
|
||||||
|
]:(curFlag?[
|
||||||
|
years.indexOf(curYear+''),
|
||||||
|
months.indexOf(this.formatNum(curMonth)),
|
||||||
|
days.indexOf(this.formatNum(curDay)),
|
||||||
|
]:[
|
||||||
|
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
|
||||||
|
]);
|
||||||
|
range={years,months,days};
|
||||||
|
year=dVal[0]?dVal[0]:years[0];
|
||||||
|
month=dVal[1]?dVal[1]:months[0];
|
||||||
|
day=dVal[2]?dVal[2]:days[0];
|
||||||
|
result=full=`${year+'-'+month+'-'+day}`;
|
||||||
|
obj={
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "hour":
|
||||||
|
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]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0
|
||||||
|
]:(curFlag?[
|
||||||
|
years.indexOf(curYear+''),
|
||||||
|
months.indexOf(this.formatNum(curMonth)),
|
||||||
|
days.indexOf(this.formatNum(curDay)),
|
||||||
|
hours.indexOf(this.formatNum(curHour)),
|
||||||
|
]:[
|
||||||
|
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]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0
|
||||||
|
]);
|
||||||
|
range={years,months,days,hours};
|
||||||
|
year=dVal[0]?dVal[0]:years[0];
|
||||||
|
month=dVal[1]?dVal[1]:months[0];
|
||||||
|
day=dVal[2]?dVal[2]:days[0];
|
||||||
|
hour=dVal[3]?dVal[3]:hours[0];
|
||||||
|
result=`${year+'-'+month+'-'+day+' '+hour}`;
|
||||||
|
full=`${year+'-'+month+'-'+day+' '+hour+':00:00'}`;
|
||||||
|
obj={
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day,
|
||||||
|
hour
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "minute":
|
||||||
|
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]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
|
||||||
|
dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0
|
||||||
|
]:(curFlag?[
|
||||||
|
years.indexOf(curYear+''),
|
||||||
|
months.indexOf(this.formatNum(curMonth)),
|
||||||
|
days.indexOf(this.formatNum(curDay)),
|
||||||
|
hours.indexOf(this.formatNum(curHour)),
|
||||||
|
minutes.indexOf(this.formatNum(curMinute)),
|
||||||
|
]:[
|
||||||
|
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]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
|
||||||
|
dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0
|
||||||
|
]);
|
||||||
|
range={years,months,days,hours,minutes};
|
||||||
|
year=dVal[0]?dVal[0]:years[0];
|
||||||
|
month=dVal[1]?dVal[1]:months[0];
|
||||||
|
day=dVal[2]?dVal[2]:days[0];
|
||||||
|
hour=dVal[3]?dVal[3]:hours[0];
|
||||||
|
minute=dVal[4]?dVal[4]:minutes[0];
|
||||||
|
full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':00'}`;
|
||||||
|
result=`${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
|
||||||
|
obj={
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day,
|
||||||
|
hour,
|
||||||
|
minute
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "second":
|
||||||
|
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]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
|
||||||
|
dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0,
|
||||||
|
dVal[5]&&seconds.indexOf(dVal[5])!=-1?seconds.indexOf(dVal[5]):0
|
||||||
|
]:(curFlag?[
|
||||||
|
years.indexOf(curYear+''),
|
||||||
|
months.indexOf(this.formatNum(curMonth)),
|
||||||
|
days.indexOf(this.formatNum(curDay)),
|
||||||
|
hours.indexOf(this.formatNum(curHour)),
|
||||||
|
minutes.indexOf(this.formatNum(curMinute)),
|
||||||
|
seconds.indexOf(this.formatNum(curSecond)),
|
||||||
|
]:[
|
||||||
|
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]&&hours.indexOf(dVal[3])!=-1?hours.indexOf(dVal[3]):0,
|
||||||
|
dVal[4]&&minutes.indexOf(dVal[4])!=-1?minutes.indexOf(dVal[4]):0,
|
||||||
|
dVal[5]&&seconds.indexOf(dVal[5])!=-1?seconds.indexOf(dVal[5]):0
|
||||||
|
]);
|
||||||
|
range={years,months,days,hours,minutes,seconds};
|
||||||
|
year=dVal[0]?dVal[0]:years[0];
|
||||||
|
month=dVal[1]?dVal[1]:months[0];
|
||||||
|
day=dVal[2]?dVal[2]:days[0];
|
||||||
|
hour=dVal[3]?dVal[3]:hours[0];
|
||||||
|
minute=dVal[4]?dVal[4]:minutes[0];
|
||||||
|
second=dVal[5]?dVal[5]:seconds[0];
|
||||||
|
result=full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
|
||||||
|
obj={
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day,
|
||||||
|
hour,
|
||||||
|
minute,
|
||||||
|
second
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
range={years,months,days};
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
this.range=range;
|
||||||
|
this.checkObj=obj;
|
||||||
|
this.$emit("change",{
|
||||||
|
result:result,
|
||||||
|
value:full,
|
||||||
|
obj:obj
|
||||||
|
});
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.pickVal=pickVal;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlerChange(e){
|
||||||
|
let arr=[...e.detail.value];
|
||||||
|
let data=this.range;
|
||||||
|
let year="",month="",day="",hour="",minute="",second="";
|
||||||
|
let result="",full="",obj={};
|
||||||
|
let months=null,days=null,hours=null,minutes=null,seconds=null;
|
||||||
|
let disabledAfter=this.disabledAfter;
|
||||||
|
let leapYear=false,resetData={};
|
||||||
|
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]:"";
|
||||||
|
hour=(arr[3]||arr[3]==0)?data.hours[arr[3]]||data.hours[data.hours.length-1]:"";
|
||||||
|
minute=(arr[4]||arr[4]==0)?data.minutes[arr[4]]||data.minutes[data.minutes.length-1]:"";
|
||||||
|
second=(arr[5]||arr[5]==0)?data.seconds[arr[5]]||data.seconds[data.seconds.length-1]:"";
|
||||||
|
resetData=this.resetData(year,month,day,hour,minute);//重新拉取当前日期数据;
|
||||||
|
leapYear=this.isLeapYear(year);//判断是否为闰年;
|
||||||
|
switch(this.fields){
|
||||||
|
case "year":
|
||||||
|
result=full=`${year}`;
|
||||||
|
obj={
|
||||||
|
year
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case "month":
|
||||||
|
result=full=`${year+'-'+month}`;
|
||||||
|
if(this.disabledAfter)months=resetData.months;
|
||||||
|
if(months)this.range.months=months;
|
||||||
|
obj={
|
||||||
|
year,
|
||||||
|
month
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "day":
|
||||||
|
result=full=`${year+'-'+month+'-'+day}`;
|
||||||
|
if(this.disabledAfter){
|
||||||
|
months=resetData.months;
|
||||||
|
days=resetData.days;
|
||||||
|
}else{
|
||||||
|
if(leapYear||(month!=this.checkObj.month)||month==2){
|
||||||
|
days=resetData.days;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(months)this.range.months=months;
|
||||||
|
if(days)this.range.days=days;
|
||||||
|
obj={
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "hour":
|
||||||
|
result=`${year+'-'+month+'-'+day+' '+hour}`;
|
||||||
|
full=`${year+'-'+month+'-'+day+' '+hour+':00:00'}`;
|
||||||
|
if(this.disabledAfter){
|
||||||
|
months=resetData.months;
|
||||||
|
days=resetData.days;
|
||||||
|
hours=resetData.hours;
|
||||||
|
}else{
|
||||||
|
if(leapYear||(month!=this.checkObj.month)||month==2){
|
||||||
|
days=resetData.days;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(months)this.range.months=months;
|
||||||
|
if(days)this.range.days=days;
|
||||||
|
if(hours)this.range.hours=hours;
|
||||||
|
obj={
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day,
|
||||||
|
hour
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "minute":
|
||||||
|
full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':00'}`;
|
||||||
|
result=`${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
|
||||||
|
if(this.disabledAfter){
|
||||||
|
months=resetData.months;
|
||||||
|
days=resetData.days;
|
||||||
|
hours=resetData.hours;
|
||||||
|
minutes=resetData.minutes;
|
||||||
|
}else{
|
||||||
|
if(leapYear||(month!=this.checkObj.month)||month==2){
|
||||||
|
days=resetData.days;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(months)this.range.months=months;
|
||||||
|
if(days)this.range.days=days;
|
||||||
|
if(hours)this.range.hours=hours;
|
||||||
|
if(minutes)this.range.minutes=minutes;
|
||||||
|
obj={
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day,
|
||||||
|
hour,
|
||||||
|
minute
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case "second":
|
||||||
|
result=full=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
|
||||||
|
if(this.disabledAfter){
|
||||||
|
months=resetData.months;
|
||||||
|
days=resetData.days;
|
||||||
|
hours=resetData.hours;
|
||||||
|
minutes=resetData.minutes;
|
||||||
|
//seconds=resetData.seconds;
|
||||||
|
}else{
|
||||||
|
if(leapYear||(month!=this.checkObj.month)||month==2){
|
||||||
|
days=resetData.days;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(months)this.range.months=months;
|
||||||
|
if(days)this.range.days=days;
|
||||||
|
if(hours)this.range.hours=hours;
|
||||||
|
if(minutes)this.range.minutes=minutes;
|
||||||
|
//if(seconds)this.range.seconds=seconds;
|
||||||
|
obj={
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day,
|
||||||
|
hour,
|
||||||
|
minute,
|
||||||
|
second
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
this.checkObj=obj;
|
||||||
|
this.$emit("change",{
|
||||||
|
result:result,
|
||||||
|
value:full,
|
||||||
|
obj:obj
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "./w-picker.css";
|
||||||
|
</style>
|
||||||
526
components/w-picker/half-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
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
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;
|
||||||
|
}
|
||||||
311
components/w-picker/w-picker.vue
Normal file
311
components/w-picker/w-picker.vue
Normal file
@ -0,0 +1,311 @@
|
|||||||
|
<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"
|
||||||
|
@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: "half",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
||||||
10
pages.json
10
pages.json
@ -10,7 +10,6 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/my/my",
|
"path": "pages/my/my",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom",
|
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
@ -48,15 +47,14 @@
|
|||||||
},
|
},
|
||||||
"uniIdRouter": {},
|
"uniIdRouter": {},
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"custom": true,
|
|
||||||
"list": [
|
"list": [
|
||||||
{
|
{
|
||||||
"pagePath": "pages/ticket/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>
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<my-tabbar></my-tabbar>
|
<my-tabbar :currentPage="'pages/my/my'"></my-tabbar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
@ -12,5 +12,4 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<fl-page-header :autoback="true"
|
||||||
|
:left="false">
|
||||||
|
<template v-slot:center>
|
||||||
|
<view class="row items-center">
|
||||||
|
<text class="font-16">首都博物馆门票列表</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</fl-page-header>
|
||||||
|
|
||||||
|
<view :style="{
|
||||||
|
minHeight: 'calc(100vh - ' + filterBoxTop + ' - 226rpx'+')',
|
||||||
|
}">
|
||||||
|
<view class="row justify-center fl-pt-sm fl-mb-sm">
|
||||||
|
<view class="row items-center fl-px-sm"
|
||||||
|
style="font-size:28rpx;border-radius:20rpx;background:#40BE94;color:#fff;height:70rpx;width:calc(100% - 62rpx)">
|
||||||
|
<text class="col-3 text-center"></text>
|
||||||
|
<text class="col-3 text-center">门票名称</text>
|
||||||
|
<text class="col-3 text-center">剩余数量</text>
|
||||||
|
<text class="col-3 text-center"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-list v-if="listData.length > 0"
|
||||||
|
class="col-12"
|
||||||
|
height="calc(100vh - 230rpx)"
|
||||||
|
@scrolltolower="scrollRequest">
|
||||||
|
<u-list-item v-for="(item, index) in listData"
|
||||||
|
:key="index"
|
||||||
|
class="fl-mb-sm fl-px-sm">
|
||||||
|
<view class="fl-card row">
|
||||||
|
<view class="col-3 font-16 row justify-center items-center">
|
||||||
|
<u-image :src="item.url"
|
||||||
|
width="154rpx"
|
||||||
|
height="118rpx"></u-image>
|
||||||
|
</view>
|
||||||
|
<view class="col-3 row justify-center items-center text-center"
|
||||||
|
style="font-weight:bolder">
|
||||||
|
{{ item.name }}
|
||||||
|
</view>
|
||||||
|
<view class="col-3 row justify-center items-center"
|
||||||
|
:style="{color:item.canReserve!=0?'#40BE94':'#AFAFAF'}">
|
||||||
|
{{ item.canReserve+'/'+item.total }}
|
||||||
|
</view>
|
||||||
|
<view class="col-3 row justify-center items-center cursur">
|
||||||
|
<text v-if="item.canReserve!=0"
|
||||||
|
class="font-14 row justify-center items-center cursor"
|
||||||
|
style="width: 108rpx; height: 56rpx;background:#40BE94;color:#fff;border-radius:20rpx"
|
||||||
|
@click="handleLink('/pages/ticket/reserve',item)">查看</text>
|
||||||
|
|
||||||
|
<text v-else
|
||||||
|
class="font-14 row justify-center items-center"
|
||||||
|
style="width: 108rpx; height: 56rpx;background:#AFAFAF;color:#fff;border-radius:20rpx">无票</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-list-item>
|
||||||
|
|
||||||
|
<view style="width: 100%"
|
||||||
|
class="row items-center justify-center">
|
||||||
|
<u-line dashed
|
||||||
|
:length="110"
|
||||||
|
style="display: inline-block"></u-line>
|
||||||
|
<view style="color:#9ebfb3;font-size: 26rpx; margin: 30rpx">~人家是有底线的啦~</view>
|
||||||
|
<u-line dashed
|
||||||
|
:length="110"
|
||||||
|
style="display: inline-block"></u-line>
|
||||||
|
</view>
|
||||||
|
</u-list>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import pageData from "../../static/pageData.json";
|
||||||
|
import { getLabelByOptions, calcRouteParams } from "@/util/form";
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
listData: [],
|
||||||
|
filterBoxTop: null,
|
||||||
|
pageLoading: false,
|
||||||
|
tableParams: {
|
||||||
|
page: 1,
|
||||||
|
pageSize: 12,
|
||||||
|
},
|
||||||
|
btnLoading: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad (pageParams) {
|
||||||
|
this.filterBoxTop = uni.getSystemInfoSync()["statusBarHeight"] + 44 + "px";
|
||||||
|
this.listData = pageData.elector
|
||||||
|
},
|
||||||
|
onShow () {
|
||||||
|
this.getPageData();
|
||||||
|
},
|
||||||
|
beforeDestroy () { },
|
||||||
|
methods: {
|
||||||
|
getPageData (scroll) {
|
||||||
|
},
|
||||||
|
handleLink (path, item) {
|
||||||
|
uni.setStorageSync('elector-link', item)
|
||||||
|
uni.navigateTo({
|
||||||
|
url: path,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
scrollRequest () {
|
||||||
|
console.log('scrollRequest');
|
||||||
|
this.tableParams.page++;
|
||||||
|
this.getPageData(true);
|
||||||
|
},
|
||||||
|
handleFinishAll () {
|
||||||
|
},
|
||||||
|
handlePageType () {
|
||||||
|
this.listData = [];
|
||||||
|
this.getPageData();
|
||||||
|
},
|
||||||
|
handleContractClick (rowData) {
|
||||||
|
},
|
||||||
|
handleLabelByOptions (val, options) {
|
||||||
|
return getLabelByOptions(val, options);
|
||||||
|
},
|
||||||
|
handleTabBack (path) {
|
||||||
|
uni.switchTab({
|
||||||
|
url: path
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.fl-card {
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 14rpx 0;
|
||||||
|
}
|
||||||
|
/deep/ .u-image__image {
|
||||||
|
border-radius: 20rpx 0 0 20rpx !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -11,6 +11,14 @@
|
|||||||
<view :style="{
|
<view :style="{
|
||||||
minHeight: 'calc(100vh - ' + filterBoxTop + ' - 226rpx'+')',
|
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 justify-center fl-pt-sm fl-mb-sm">
|
||||||
<view class="row items-center fl-px-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)">
|
style="font-size:28rpx;border-radius:20rpx;background:#40BE94;color:#fff;height:70rpx;width:calc(100% - 62rpx)">
|
||||||
@ -21,24 +29,24 @@
|
|||||||
</view>
|
</view>
|
||||||
<u-list v-if="listData.length > 0"
|
<u-list v-if="listData.length > 0"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
height="calc(100vh - 310rpx)"
|
height="calc(100vh - 430rpx)"
|
||||||
@scrolltolower="scrollRequest">
|
@scrolltolower="scrollRequest">
|
||||||
<u-list-item v-for="(item, index) in listData"
|
<u-list-item v-for="(item, index) in listData"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="fl-mb-sm fl-px-sm">
|
class="fl-mb-sm fl-px-sm">
|
||||||
<view class="fl-card row">
|
<view class="fl-card row">
|
||||||
<view class="col-6 font-16 row justify-center items-center">{{item.name}}</view>
|
<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"
|
<view class="col-3 row justify-center items-center"
|
||||||
:style="{color:item.typeNum!=0?'#40BE94':'#AFAFAF'}">
|
:style="{color:item.typeNum!=0?'#40BE94':'#AFAFAF'}">
|
||||||
{{ item.typeNum }}
|
{{ item.typeNum }}种
|
||||||
</view>
|
</view>
|
||||||
<view class="col-3 row justify-center items-center cursur">
|
<view class="col-3 row justify-center items-center cursur">
|
||||||
<u-button v-if="item.typeNum!=0"
|
|
||||||
shape="circle"
|
<text v-if="item.typeNum!=0"
|
||||||
text="查看"
|
class="font-14 row justify-center items-center cursor"
|
||||||
style="width: 108rpx; height: 56rpx;background:#40BE94;color:#fff"
|
style="width: 108rpx; height: 56rpx;background:#40BE94;color:#fff;border-radius:20rpx"
|
||||||
:loading="item.btnLoading"
|
@click="handleLink('/pages/ticket/elector')">查看</text>
|
||||||
@click="handleContractClick(item)" />
|
|
||||||
|
|
||||||
<text v-else
|
<text v-else
|
||||||
class="font-14 row justify-center items-center"
|
class="font-14 row justify-center items-center"
|
||||||
@ -61,7 +69,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<u-toast ref="uToast" />
|
<u-toast ref="uToast" />
|
||||||
<my-tabbar></my-tabbar>
|
<my-tabbar :currentPage="'pages/ticket/index'"></my-tabbar>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -70,35 +78,7 @@ import { getLabelByOptions, calcRouteParams } from "@/util/form";
|
|||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
pageType: "unfinish",
|
|
||||||
listData: [],
|
listData: [],
|
||||||
contractTypeOptions: [
|
|
||||||
{
|
|
||||||
label: "艺术品推广及代销服务合同",
|
|
||||||
value: 1,
|
|
||||||
class: "border-primary",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "著作权代理转让服务合同",
|
|
||||||
value: 2,
|
|
||||||
class: "border-cyan",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "登记授权委托书",
|
|
||||||
value: 3,
|
|
||||||
class: "border-draft",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "作品登记承诺书",
|
|
||||||
value: 5,
|
|
||||||
class: "border-yell",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "著作权代理转让服务合同-附表",
|
|
||||||
value: 6,
|
|
||||||
class: "border-cyan",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
filterBoxTop: null,
|
filterBoxTop: null,
|
||||||
pageLoading: false,
|
pageLoading: false,
|
||||||
tableParams: {
|
tableParams: {
|
||||||
@ -133,13 +113,8 @@ export default {
|
|||||||
},
|
},
|
||||||
handlePageType () {
|
handlePageType () {
|
||||||
this.listData = [];
|
this.listData = [];
|
||||||
this.pageType === "finished"
|
|
||||||
? (this.pageType = "unfinish")
|
|
||||||
: (this.pageType = "finished");
|
|
||||||
this.getPageData();
|
this.getPageData();
|
||||||
},
|
},
|
||||||
handleContractClick (rowData) {
|
|
||||||
},
|
|
||||||
handleLabelByOptions (val, options) {
|
handleLabelByOptions (val, options) {
|
||||||
return getLabelByOptions(val, options);
|
return getLabelByOptions(val, options);
|
||||||
},
|
},
|
||||||
|
|||||||
@ -0,0 +1,295 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<fl-page-header :autoback="true"
|
||||||
|
:left="false">
|
||||||
|
<template v-slot:center>
|
||||||
|
<view class="row items-center">
|
||||||
|
<text class="font-16 ">填写预约信息</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</fl-page-header>
|
||||||
|
|
||||||
|
<view :style="{
|
||||||
|
minHeight: 'calc(100vh - ' + filterBoxTop + ' - 226rpx'+')',
|
||||||
|
}"
|
||||||
|
class="fl-px-lg">
|
||||||
|
|
||||||
|
<view class="row justify-start item-center font-16 fl-mb-sm"
|
||||||
|
style="color:#fff">
|
||||||
|
<u-image src="../../static/icon-ticket-addr.png"
|
||||||
|
width="26rpx"
|
||||||
|
height="38rpx"></u-image>
|
||||||
|
<text class="fl-ml-xs fl-mr-md">门票系统的某个场馆</text>
|
||||||
|
</view>
|
||||||
|
<view class="row justify-center">
|
||||||
|
<u-image :src="formData.url"
|
||||||
|
width="664rpx"
|
||||||
|
height="354rpx"></u-image>
|
||||||
|
</view>
|
||||||
|
<view class="form-card"
|
||||||
|
style="background:#63BFA1;color:#fff;margin-top:32rpx">
|
||||||
|
<view class="form-item">
|
||||||
|
<view style="width: 200rpx; border-right: 2rpx solid #fff">门票名称</view>
|
||||||
|
<view style="margin-left: 32rpx">
|
||||||
|
{{formData.name}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-divider lineColor="#C0DED4"></u-divider>
|
||||||
|
<view class="form-item">
|
||||||
|
<view style="width: 200rpx; border-right: 2rpx solid #fff">剩余数量</view>
|
||||||
|
<view style="margin-left: 32rpx">
|
||||||
|
{{formData.canReserve+'/'+formData.total}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-divider lineColor="#C0DED4"></u-divider>
|
||||||
|
|
||||||
|
<view class="form-card">
|
||||||
|
<view class="form-item">
|
||||||
|
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4;font-size:28rpx">预留手机号<text style="font-size:20rpx">(+86)</text></view>
|
||||||
|
<view style="margin-left: 32rpx">
|
||||||
|
<u--input style="width: 360rpx"
|
||||||
|
border="none"
|
||||||
|
placeholder="填写手机号"
|
||||||
|
clearable
|
||||||
|
type="number"
|
||||||
|
v-model="formData.telNum"></u--input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-divider lineColor="#C0DED4"></u-divider>
|
||||||
|
<view class="form-item">
|
||||||
|
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4;font-size:28rpx">验证码</view>
|
||||||
|
<view style="margin-left: 32rpx">
|
||||||
|
<u-input style="width: 360rpx"
|
||||||
|
border="none"
|
||||||
|
placeholder="填写验证码"
|
||||||
|
v-model.trim="formData.code"
|
||||||
|
clearable
|
||||||
|
type="number"
|
||||||
|
:maxlength="6">
|
||||||
|
<template slot="suffix">
|
||||||
|
<u-code ref="uCode"
|
||||||
|
@change="codeChange"
|
||||||
|
seconds="5"
|
||||||
|
changeText="X秒重新获取"></u-code>
|
||||||
|
<view style="color: #52b6ff; font-size: 20rpx"
|
||||||
|
@click="goSendCode">{{ tips }}</view>
|
||||||
|
</template>
|
||||||
|
</u-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-card fl-mt-md">
|
||||||
|
<view class="form-item">
|
||||||
|
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4">选择类型</view>
|
||||||
|
<view style="margin-left: 32rpx">
|
||||||
|
<u--input style="width: 360rpx"
|
||||||
|
v-model="formData.type"
|
||||||
|
border="none"
|
||||||
|
clearable
|
||||||
|
readonly>
|
||||||
|
<template slot="suffix">
|
||||||
|
<u-image src="../../static/icon-pick.png"
|
||||||
|
width="64rpx"
|
||||||
|
height="34rpx"
|
||||||
|
@click="typeShow = true"></u-image>
|
||||||
|
<u-picker :show="typeShow"
|
||||||
|
:columns="typeOption"
|
||||||
|
@cancel="handleTypeSelectCancel"
|
||||||
|
@confirm="(e) => handleTypeSelectConfirm(e, 'type')"></u-picker>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</u--input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-divider lineColor="#C0DED4"></u-divider>
|
||||||
|
<view class="form-item">
|
||||||
|
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4">选择时间</view>
|
||||||
|
<view style="margin-left: 32rpx">
|
||||||
|
<u-input style="width: 360rpx"
|
||||||
|
v-model="formData.time"
|
||||||
|
border="none"
|
||||||
|
clearable
|
||||||
|
readonly>
|
||||||
|
<template slot="suffix">
|
||||||
|
|
||||||
|
<u-image src="../../static/icon-pick.png"
|
||||||
|
width="64rpx"
|
||||||
|
height="34rpx"
|
||||||
|
@click="dateShow = true"></u-image>
|
||||||
|
<u-datetime-picker :show="dateShow"
|
||||||
|
mode="datetime"
|
||||||
|
:minDate="Date.now()"
|
||||||
|
@confirm="(e) => handleDateSelectConfirm(e, 'time')"
|
||||||
|
@cancel="handleDateSelectCancel"></u-datetime-picker>
|
||||||
|
</template>
|
||||||
|
</u-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="row justify-center"
|
||||||
|
style="margin-top:182rpx">
|
||||||
|
<u-button text="预约"
|
||||||
|
style="
|
||||||
|
background-color: #40BE94;
|
||||||
|
border: transparent
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 40rpx;
|
||||||
|
width: 436rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
color:#fff;"
|
||||||
|
shape="circle"
|
||||||
|
:loading="btnLoading"
|
||||||
|
@click="handleReserve('/pages/ticket/index')"></u-button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { getTheDate } from "@/util/date";
|
||||||
|
import pageData from "../../static/pageData.json";
|
||||||
|
import { getLabelByOptions, calcRouteParams } from "@/util/form";
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
filterBoxTop: null,
|
||||||
|
formData: {
|
||||||
|
url: '',
|
||||||
|
name: '',
|
||||||
|
canReserve: '',
|
||||||
|
total: '',
|
||||||
|
telNum: "",
|
||||||
|
code: "",
|
||||||
|
time: null,
|
||||||
|
type: ''
|
||||||
|
},
|
||||||
|
tips: "获取验证码",
|
||||||
|
btnLoading: false,
|
||||||
|
dateShow: false,
|
||||||
|
typeShow: false,
|
||||||
|
typeOption: [['双人', '单人票', '亲子票', '6人团队']
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad (pageParams) {
|
||||||
|
this.filterBoxTop = uni.getSystemInfoSync()["statusBarHeight"] + 44 + "px";
|
||||||
|
},
|
||||||
|
onShow () {
|
||||||
|
let data = uni.getStorageSync('elector-link')
|
||||||
|
Object.assign(this.formData, data)
|
||||||
|
console.log('data', data);
|
||||||
|
this.getPageData();
|
||||||
|
},
|
||||||
|
beforeDestroy () { },
|
||||||
|
methods: {
|
||||||
|
codeChange (text) {
|
||||||
|
this.tips = text;
|
||||||
|
},
|
||||||
|
async goSendCode () {
|
||||||
|
if (!this.formData.telNum) {
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
type: "error",
|
||||||
|
message: "请输入手机号",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$refs.uCode.canGetCode) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: "正在获取验证码",
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
type: "success",
|
||||||
|
message: "发送成功",
|
||||||
|
});
|
||||||
|
this.$refs.uCode.start();
|
||||||
|
}, 1000)
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleTypeSelectConfirm (e, field) {
|
||||||
|
this.formData[field] = e.value[0]
|
||||||
|
this.typeShow = false;
|
||||||
|
},
|
||||||
|
handleTypeSelectCancel (e) {
|
||||||
|
this.typeShow = false;
|
||||||
|
},
|
||||||
|
handleDateSelectConfirm (e, field) {
|
||||||
|
this.formData[field] = getTheDate(e.value);
|
||||||
|
this.dateShow = false;
|
||||||
|
},
|
||||||
|
handleDateSelectCancel (e) {
|
||||||
|
this.dateShow = false;
|
||||||
|
},
|
||||||
|
handleReserve (path, params) {
|
||||||
|
if (!this.formData.telNum || !this.formData.code || !this.formData.time || !this.formData.type) {
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
type: "error",
|
||||||
|
message: "请完善信息！",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
uni.switchTab({
|
||||||
|
url: path,
|
||||||
|
});
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: path,
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
getPageData (scroll) {
|
||||||
|
},
|
||||||
|
handleLink (path, params = {}) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: path + calcRouteParams(params),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
scrollRequest () {
|
||||||
|
console.log('scrollRequest');
|
||||||
|
this.tableParams.page++;
|
||||||
|
this.getPageData(true);
|
||||||
|
},
|
||||||
|
handleFinishAll () {
|
||||||
|
},
|
||||||
|
handlePageType () {
|
||||||
|
this.getPageData();
|
||||||
|
},
|
||||||
|
handleContractClick (rowData) {
|
||||||
|
},
|
||||||
|
handleLabelByOptions (val, options) {
|
||||||
|
return getLabelByOptions(val, options);
|
||||||
|
},
|
||||||
|
handleTabBack (path) {
|
||||||
|
uni.switchTab({
|
||||||
|
url: path
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/deep/ .u-image__image {
|
||||||
|
border-radius: 20rpx !important;
|
||||||
|
}
|
||||||
|
.form-card {
|
||||||
|
padding: 30rpx 32rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 7rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .u-cell__body {
|
||||||
|
padding: 10rpx 5rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
static/elector-1-view.png
Normal file
BIN
static/elector-1-view.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 394 KiB |
BIN
static/elector-1.png
Normal file
BIN
static/elector-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
static/elector-2.png
Normal file
BIN
static/elector-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
static/icon-pick.png
Normal file
BIN
static/icon-pick.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -1,98 +1,156 @@
|
|||||||
{
|
{
|
||||||
"ticketData":[
|
"ticketData": [
|
||||||
{
|
{
|
||||||
"name":"门票系统的某个场馆",
|
"name": "门票系统的某个场馆",
|
||||||
"typeNum":"3"
|
"typeNum": "3"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
{
|
"name": "门票系统的某个场馆",
|
||||||
"name":"门票系统的某个场馆",
|
"typeNum": "3"
|
||||||
"typeNum":"3"
|
},
|
||||||
},
|
{
|
||||||
|
"name": "门票系统的某个场馆",
|
||||||
{
|
"typeNum": "0"
|
||||||
"name":"门票系统的某个场馆",
|
},
|
||||||
"typeNum":"0"
|
{
|
||||||
},
|
"name": "门票系统的某个场馆",
|
||||||
|
"typeNum": "0"
|
||||||
{
|
},
|
||||||
"name":"门票系统的某个场馆",
|
{
|
||||||
"typeNum":"0"
|
"name": "门票系统的某个场馆",
|
||||||
},
|
"typeNum": "0"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name":"门票系统的某个场馆",
|
"name": "门票系统的某个场馆",
|
||||||
"typeNum":"0"
|
"typeNum": "0"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
{
|
"name": "门票系统的某个场馆",
|
||||||
"name":"门票系统的某个场馆",
|
"typeNum": "0"
|
||||||
"typeNum":"0"
|
},
|
||||||
},
|
{
|
||||||
|
"name": "门票系统的某个场馆",
|
||||||
{
|
"typeNum": "0"
|
||||||
"name":"门票系统的某个场馆",
|
},
|
||||||
"typeNum":"0"
|
{
|
||||||
},
|
"name": "门票系统的某个场馆",
|
||||||
|
"typeNum": "0"
|
||||||
{
|
},
|
||||||
"name":"门票系统的某个场馆",
|
{
|
||||||
"typeNum":"0"
|
"name": "门票系统的某个场馆",
|
||||||
},
|
"typeNum": "0"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name":"门票系统的某个场馆",
|
"name": "门票系统的某个场馆",
|
||||||
"typeNum":"0"
|
"typeNum": "0"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
{
|
"name": "门票系统的某个场馆",
|
||||||
"name":"门票系统的某个场馆",
|
"typeNum": "0"
|
||||||
"typeNum":"0"
|
}
|
||||||
},
|
],
|
||||||
|
"elector": [
|
||||||
{
|
{
|
||||||
"name":"门票系统的某个场馆",
|
"url": "../../static/elector-1.png",
|
||||||
"typeNum":"0"
|
"name": "首都博物馆门票",
|
||||||
},
|
"canReserve": "1023",
|
||||||
|
"total": "20000"
|
||||||
{
|
},
|
||||||
"name":"门票系统的某个场馆",
|
{
|
||||||
"typeNum":"0"
|
"url": "../../static/elector-1.png",
|
||||||
},
|
"name": "首都博物馆节假日门票",
|
||||||
|
"canReserve": "11123",
|
||||||
{
|
"total": "20000"
|
||||||
"name":"门票系统的某个场馆",
|
},
|
||||||
"typeNum":"0"
|
{
|
||||||
},
|
"url": "../../static/elector-1.png",
|
||||||
|
"name": "首都博物馆工作日门票",
|
||||||
{
|
"canReserve": "0",
|
||||||
"name":"门票系统的某个场馆",
|
"total": "2000"
|
||||||
"typeNum":"0"
|
},
|
||||||
},
|
{
|
||||||
|
"url": "../../static/elector-2.png",
|
||||||
{
|
"name": "首都博物馆元旦门票",
|
||||||
"name":"门票系统的某个场馆",
|
"canReserve": "23",
|
||||||
"typeNum":"0"
|
"total": "2000"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
{
|
"url": "../../static/elector-2.png",
|
||||||
"name":"门票系统的某个场馆",
|
"name": "首都博物馆元旦门票",
|
||||||
"typeNum":"0"
|
"canReserve": "23",
|
||||||
},
|
"total": "2000"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name":"门票系统的某个场馆",
|
"url": "../../static/elector-2.png",
|
||||||
"typeNum":"0"
|
"name": "首都博物馆元旦门票",
|
||||||
},
|
"canReserve": "23",
|
||||||
|
"total": "2000"
|
||||||
{
|
},
|
||||||
"name":"门票系统的某个场馆",
|
{
|
||||||
"typeNum":"0"
|
"url": "../../static/elector-2.png",
|
||||||
},
|
"name": "首都博物馆元旦门票",
|
||||||
|
"canReserve": "23",
|
||||||
{
|
"total": "2000"
|
||||||
"name":"门票系统的某个场馆",
|
},
|
||||||
"typeNum":"0"
|
{
|
||||||
}
|
"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 |
21
util/date.js
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
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user