fix ticket
This commit is contained in:
张 元山
parent
181a62b159
commit
dc4780b061
@ -679,3 +679,22 @@
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.font-12 {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.font-14 {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.font-16 {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.font-18 {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.font-20 {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.font-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -1,61 +1,90 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<u-tabbar :value="value4"
|
||||
@change="change"
|
||||
<view>
|
||||
<u-tabbar :value="current"
|
||||
@change="changeTab"
|
||||
:fixed="true"
|
||||
:border="false"
|
||||
:placeholder="false"
|
||||
activeColor="#40BE94"
|
||||
:safeAreaInsetBottom="true">
|
||||
<u-tabbar-item text="场馆">
|
||||
<image style="width: 52rpx;height: 52rpx"
|
||||
class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
src="../../static/zu618@3x (1).png"></image>
|
||||
<image style="width: 52rpx;height: 52rpx"
|
||||
class="u-page__item__slot-icon"
|
||||
:safeAreaInsetBottom="true"
|
||||
:border="false"
|
||||
activeColor="#FFC748"
|
||||
inactiveColor="#1D1D1D">
|
||||
<u-tabbar-item v-for="(item,index) in tabBarList"
|
||||
:key="index"
|
||||
:text="item.text">
|
||||
<image class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
src="../../static/zu759@3x.png"></image>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item text="我的">
|
||||
<image style="width: 52rpx;height: 52rpx"
|
||||
class="u-page__item__slot-icon"
|
||||
:src="item.iconPath"></image>
|
||||
<image class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
src="../../static/zu760@3x.png"></image>
|
||||
<image style="width: 52rpx;height: 52rpx"
|
||||
class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
src="../../static/zu628@3x (1).png"></image>
|
||||
:src="item.selectedIconPath"></image>
|
||||
</u-tabbar-item>
|
||||
</u-tabbar>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
currentPage: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: 'Hello',
|
||||
value4: 0,
|
||||
}
|
||||
},
|
||||
onLoad () {
|
||||
|
||||
current: 0,
|
||||
tabBarList: [{
|
||||
pagePath: "pages/ticket/index",
|
||||
iconPath: "../../static/tabbar/icon-ticket.png",
|
||||
selectedIconPath: "../../static/tabbar/icon-ticket-active.png",
|
||||
text: '场馆',
|
||||
customIcon: false,
|
||||
},
|
||||
{
|
||||
pagePath: "pages/my/my",
|
||||
iconPath: "../../static/tabbar/icon-mine.png",
|
||||
selectedIconPath: "../../static/tabbar/icon-mine-active.png",
|
||||
text: '我的',
|
||||
customIcon: false,
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change (name) {
|
||||
if (name === 0) {
|
||||
uni.switchTab({
|
||||
url: '/pages/ticket/index'
|
||||
});
|
||||
} else if (name === 1) {
|
||||
uni.switchTab({
|
||||
url: '/pages/my/my'
|
||||
});
|
||||
}
|
||||
|
||||
this.value4 = name
|
||||
changeTab (e) {
|
||||
let page = '/' + this.tabBarList[e].pagePath
|
||||
console.log(page);
|
||||
uni.switchTab({
|
||||
url: page,
|
||||
success: () => {
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
//隐藏原生tabbar
|
||||
uni.hideTabBar();
|
||||
// 当前选中的菜单
|
||||
this.tabBarList.forEach((i, index) => {
|
||||
if (i.pagePath == this.currentPage) {
|
||||
this.current = index
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-page__item__slot-icon {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.u-tabbar /deep/ .u-tabbar--fixed {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
padding: 20px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
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",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
@ -48,15 +47,14 @@
|
||||
},
|
||||
"uniIdRouter": {},
|
||||
"tabBar": {
|
||||
"custom": true,
|
||||
"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>
|
||||
<div>
|
||||
<my-tabbar></my-tabbar>
|
||||
</div>
|
||||
<div>
|
||||
<my-tabbar :currentPage="'pages/my/my'"></my-tabbar>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
@ -12,5 +12,4 @@ export default {
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</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="{
|
||||
minHeight: 'calc(100vh - ' + filterBoxTop + ' - 226rpx'+')',
|
||||
}">
|
||||
|
||||
<view class="row justify-end item-center"
|
||||
style="color:#fff">
|
||||
<u-image src="../../static/icon-ticket-addr.png"
|
||||
width="26rpx"
|
||||
height="38rpx"></u-image>
|
||||
<text class="fl-ml-xs fl-mr-md">场馆列表</text>
|
||||
</view>
|
||||
<view class="row justify-center fl-pt-sm fl-mb-sm">
|
||||
<view class="row items-center fl-px-sm"
|
||||
style="font-size:28rpx;border-radius:20rpx;background:#40BE94;color:#fff;height:70rpx;width:calc(100% - 62rpx)">
|
||||
@ -21,24 +29,24 @@
|
||||
</view>
|
||||
<u-list v-if="listData.length > 0"
|
||||
class="col-12"
|
||||
height="calc(100vh - 310rpx)"
|
||||
height="calc(100vh - 430rpx)"
|
||||
@scrolltolower="scrollRequest">
|
||||
<u-list-item v-for="(item, index) in listData"
|
||||
:key="index"
|
||||
class="fl-mb-sm fl-px-sm">
|
||||
<view class="fl-card row">
|
||||
<view class="col-6 font-16 row justify-center items-center">{{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"
|
||||
:style="{color:item.typeNum!=0?'#40BE94':'#AFAFAF'}">
|
||||
{{ item.typeNum }}
|
||||
{{ item.typeNum }}种
|
||||
</view>
|
||||
<view class="col-3 row justify-center items-center cursur">
|
||||
<u-button v-if="item.typeNum!=0"
|
||||
shape="circle"
|
||||
text="查看"
|
||||
style="width: 108rpx; height: 56rpx;background:#40BE94;color:#fff"
|
||||
:loading="item.btnLoading"
|
||||
@click="handleContractClick(item)" />
|
||||
|
||||
<text v-if="item.typeNum!=0"
|
||||
class="font-14 row justify-center items-center cursor"
|
||||
style="width: 108rpx; height: 56rpx;background:#40BE94;color:#fff;border-radius:20rpx"
|
||||
@click="handleLink('/pages/ticket/elector')">查看</text>
|
||||
|
||||
<text v-else
|
||||
class="font-14 row justify-center items-center"
|
||||
@ -61,7 +69,7 @@
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast" />
|
||||
<my-tabbar></my-tabbar>
|
||||
<my-tabbar :currentPage="'pages/ticket/index'"></my-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@ -70,35 +78,7 @@ import { getLabelByOptions, calcRouteParams } from "@/util/form";
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
pageType: "unfinish",
|
||||
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,
|
||||
pageLoading: false,
|
||||
tableParams: {
|
||||
@ -133,13 +113,8 @@ export default {
|
||||
},
|
||||
handlePageType () {
|
||||
this.listData = [];
|
||||
this.pageType === "finished"
|
||||
? (this.pageType = "unfinish")
|
||||
: (this.pageType = "finished");
|
||||
this.getPageData();
|
||||
},
|
||||
handleContractClick (rowData) {
|
||||
},
|
||||
handleLabelByOptions (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":[
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"3"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"3"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
},
|
||||
|
||||
{
|
||||
"name":"门票系统的某个场馆",
|
||||
"typeNum":"0"
|
||||
}
|
||||
]
|
||||
}
|
||||
"ticketData": [
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "3"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "3"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "0"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "0"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "0"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "0"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "0"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "0"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "0"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "0"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "0"
|
||||
},
|
||||
{
|
||||
"name": "门票系统的某个场馆",
|
||||
"typeNum": "0"
|
||||
}
|
||||
],
|
||||
"elector": [
|
||||
{
|
||||
"url": "../../static/elector-1.png",
|
||||
"name": "首都博物馆门票",
|
||||
"canReserve": "1023",
|
||||
"total": "20000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-1.png",
|
||||
"name": "首都博物馆节假日门票",
|
||||
"canReserve": "11123",
|
||||
"total": "20000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-1.png",
|
||||
"name": "首都博物馆工作日门票",
|
||||
"canReserve": "0",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
},
|
||||
{
|
||||
"url": "../../static/elector-2.png",
|
||||
"name": "首都博物馆元旦门票",
|
||||
"canReserve": "23",
|
||||
"total": "2000"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
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