sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
							<!DOCTYPE html>
<html class="">
<!--STATUS OK-->

<head>
	<meta name="referrer" content="always" />
	<meta charset='utf-8' />
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="x-dns-prefetch-control" content="on">
	<meta name="description" content="">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script src="js/vue.js"></script>
	<script src="js/vant-ui.js"></script>
	<script src="js/main.js"></script>
	<link rel="stylesheet" href="./mescroll/mescroll.min.css">
	<script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
	<title>月度结算</title>
</head>
<style>
	.chukujilu {
		background-color: #fff !important;
	}

	.chukujilu .chukuTimer {
		background-color: #00a0ea !important;
		color: #fff !important;
	}
	.mescroll{
		position: relative;
		/*height: 73%;/*如设置bottom:50px,则需height:auto才能生效*/*/
	}

	/*车主订单详情*/

	.monthAccounts{
		background-color: #fff !important;
		font-size: .32rem;
	}
	.info-container{
		flex-wrap: wrap;
	}
	.info-cel{
		flex-grow: 0;
		padding: 0 .24rem;
		margin-bottom: .26rem;
	}
	.perc100{
		width: 100%;
	}
	.perc80{
		width: 80%
	}
	.perc60{
		width: 60%
	}
	.perc50{
		width: 50%;
	}
	.perc40{
		width: 40%;
	}
	.perc20{
		width: 20%;
	}
	.info-column{
		display: inline-block;
	}
	.info-line{
		width: 100%;
		border-bottom: 6px solid #F5F5F5;
		margin: .16rem 0 .36rem 0;
	}
	.white-text{
		color: #ffffff;
	}
	.black-text{
		color: #333333
	}
	.blue-text{
		color: #159BF7;
	}

	.base-wrap{
		padding: .26rem;
		background: #159BF7;
		align-items: center;
		border-bottom: .87rem solid #159BF7;
		border-bottom-left-radius: 12%;
		border-bottom-right-radius: 12%;
	}
		.strong-title{
			font-size: .38rem;
			line-height: .46rem;
		}
		.progress-container{
				margin: .08rem 0;
		}
		.msg-text{
			font-size: .18rem;
		}
		.avatar-container{
			justify-content: flex-end;;
		}
			.avatar-container img{
				width: 1.6rem;
				height: 1.6rem;
				background: #F7F7F7;
				border-radius: 0.8rem;
			}

	.section{
		border-radius: .12rem;
		box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
		background: #ffffff;
		width: 7.02rem;
		margin: 0 auto .26rem auto;
		z-index: 200;
	}
	.section:first-of-type{
			margin-top: -.8rem;
	}
		.section-title{
			padding: .26rem;
			border-bottom: 1px solid #E6E6E6;
		}
			.section-title span{
				padding: 0 .26rem;
				border-left: 8px solid #159BF7;
				line-height: .34rem;
				font-size: .28rem;
				font-weight: 600;
			}
	 .section-content{
	 		justify-content: space-around;
			padding-bottom:  .26rem;
	 }
		 	.section-content-item{
		 		padding-top: .26rem;

		 	}
			 	.item-number{
			 		font-size:
					.32rem;
					width: 1.02rem;
					height: 1.02rem;
					border-radius: 50%;
					background: #F7F7F7;
					margin-bottom: .08rem;
					align-items: center;
					justify-content: center;
			 	}
					.item-number span{
						font-size: .22rem;
					}
				.item-text{
					font-size: .22rem;
					color: #999999;
				}
				.noconfirmStatus{
					color: red;
				}
				.enableclick{
					opacity: 0.6
				}
</style>

<body>
	 <!-- v-cloak -->
	<div id="app" v-cloak>
		<div class="pageView monthAccounts col filterpage">
			<div class="mescroll-touch-y mescroll" id="mescroll">
				<van-field
					style="background:#ecf0ef"
					readonly
					clickable
					label="选择年份"
					:value="currentY"
					placeholder="选择年份"
					@click="showCalendar = true"
				></van-field>
				<van-popup v-model="showCalendar" round position="bottom">
					<van-picker
						show-toolbar
						:columns="dateColumns"
						@cancel="showCalendar = false"
						@confirm="onConfirm"
					/>
				</van-popup>
				<div class=" info-container meberList">
					<div class="item flex a-center jlr" v-for="item in monthColums" :class="item.enable?'enableclick':item.status==0?'noconfirmStatus':'confirmStatus'" :key="item.month" v-on:click="openWin('monthAccountsDetails',item)">
						<h4>{{item.month}}月1日 - {{item.month}}月{{currentY+"-"+item.month | formatM}}日</h4>
						<div class="flex a-center" :class="item.enable?'enableclick':item.status==0?'noconfirmStatus':'confirmStatus'">
							{{item.status | formatStatus}}
							<i class="iconfont icon-right"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/httpRequest.js"></script>
<script type="text/javascript" src="../script/vue_plugins.js"></script>
<script type="text/javascript">
apiready = function() {
		new Vue({
			el: '#app',
			data: {
				storeId: "",
				showCalendar: false,
				currentY: 0,//默认年份
				dateColumns: [],
				startY: 2020,//开始年份
				defaultindexY: 0,//默认选中的年份下标
				registTime: ['2020','06','09'],
				monthColums: [{
					month: 1,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 2,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 3,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 4,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 5,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 6,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 7,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 8,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 9,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 10,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 11,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				},{
					month: 12,
					status: 0,//确认状态；0未确认，1确认
					enable: false
				}] //默认年份所在的列
			},
			watch: {
				keyword: function(nw, od) {
					this.current = 1;
				}
			},
			methods: {
				//  打开新页面
				openWin: function (src,monthObi) {
					var dateParams = {
						paramsY: this.currentY,
						paramsM: monthObi
					};
					if(monthObi.enable){
						api.toast({
								msg: '该时间段不在您的注册时间【'+this.registTime[0]+'-'+this.registTime[1]+'-'+this.registTime[2]+'】范围内',
								duration: 2000,
								location: 'center'
						});
					}else{
						this.goWin(src, src + '_win.html', dateParams);
					}
				},
				// 获取门店注册时间
				handleGetRegistTime: function(){
					var data = {
									"storeId": parseInt(this.storeId),
									"url": "json",
									"type": "body"
							},
							_this = this,
							url = "getRegistTime";
					var paramStr = "storeId="+parseInt(this.storeId);
					this.$getOption(url, paramStr, function(ret) {
						if(ret.code==0||ret.code=="0"){
							_this.registTime = ret.registTime.split(".");
							_this.startY = parseInt(_this.registTime[0]);
							//设置时间选项  [注册年开始，当前年结束]
							var endY = new Date().getFullYear();
							var rangeY = new Date().getFullYear() - _this.startY;
							if(rangeY<=0){
									_this.dateColumns.push( _this.startY);
							}else{
								for(var i=0; i<=rangeY; i++){
									_this.dateColumns.push(_this.startY+i);
								}
							};
							// 设置年份选择器是当前年份
							_this.defaultindexY = _this.dateColumns.length-1;
							_this.currentY = _this.dateColumns[_this.defaultindexY];
							// 设置是否可点击，如果在注册月份之前的话是置灰，不能点击
							_this.handleSetEnable();
							_this.handleInit();
						}else{
							api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'center'
							});
						}
					})
				},
					// 设置是否可点击，如果在注册月份之前的话是置灰，不能点击
				handleSetEnable: function(){
					var _this = this;
					_this.monthColums.map(function(v){
						if(_this.currentY<_this.registTime[0]){
							_this.monthColums[v.month-1].enable = true
						}else if(v.month<_this.registTime[1]){
							_this.monthColums[v.month-1].enable = true
						}else{
							_this.monthColums[v.month-1].enable = false
						}
					});
				},
				// 获取已确认月份
				handleInit: function(){
					var data = {
									"storeId": parseInt(this.storeId),
									"year": this.currentY+"",
									"url": "json",
									"type": "body"
							},
							_this = this,
							url = "getConfirmMonth";
					var paramStr = "storeId="+parseInt(this.storeId)+"&year="+this.currentY;
					this.$getOption(url, paramStr, function(ret) {
						if(ret.code==0||ret.code=="0"){
							if (typeof ret.monthList != 'undefined' && ret.monthList != [] && ret.monthList != null) {
								ret.monthList.map(function(v){
									_this.monthColums[parseInt(v)-1].status = 1;
								})
							}else{
								_this.monthColums.map(function(v){
									v.status = 1;
								})
							};
						}else{
							api.toast({
							    msg: ret.msg,
							    duration: 2000,
							    location: 'center'
							});
						}
					})
				},
				onConfirm: function(v){
					this.currentY = v;
					this.showCalendar = false;
					this.handleSetEnable();
					this.handleInit();
					this.$forceUpdate();
				}
			},
			filters: {
				formatM: function(v){
					// 计算二月份的最后一天
					let dateStr = v +"-1"; //需要获取此月最后一天的日期
					let dateObj = new Date(dateStr);
					let nextMonth = dateObj.getMonth()+1; //0-11，下一个月
					//设置当前日期为下个月的1号
					dateObj.setMonth(nextMonth);
					dateObj.setDate(1);  //1-31

					let nextMonthFirstDayTime = dateObj.getTime(); //下个月一号对应毫秒

					let theMonthLastDayTime = nextMonthFirstDayTime-24*60*60*1000;  //下个月一号减去一天，正好是这个月最后一天

					let theMonthDay = (new Date(theMonthLastDayTime)).getDate();

					val = theMonthDay;
					return val;
				},
				formatStatus: function(v){
					switch (v) {
						case 0:
							return "未确认"
							break;
						default:
							return "已确认"
					}
				}
			},
			mounted: function() {

				this.storeId = $api.getStorage('userid');
				this.handleGetRegistTime();
				var _this = this;
				this.addEvent("refreshMonth",function(){
						_this.handleInit();
				})
			}
		})
}
</script>

</html>