sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
							<!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{
			margin-top: -.8rem;
	}
		.section-title{
			padding: .26rem;
			border-bottom: 1px solid #E6E6E6;
		}
			.section-title span{
				padding: 0 .26rem;
				border-left: 4px 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;
					text-align: center;
				}
</style>

<body>
	 <!-- v-cloak -->
	<div id="app" v-cloak>
		<div class="pageView monthAccounts col filterpage">
			<div class="mescroll-touch-y mescroll" id="mescroll">
				<div class=" info-container">

					<div class="base-wrap flex white-text">
						<div class="perc60">
							<div class="strong-title">{{agentInfo.storeName}}</div>
							<!-- <div class="progress-container"><van-progress :percentage="50" stroke-width="16"/></div>
							<div class="msg-text">本月扫码入库量打败了全国50%的用户</div> -->
						</div>
						<div class="perc40 avatar-container flex"><img :src="agentInfo.storeImageUrl"></div>
					</div>
					<div class="section first">
						<div class="section-title black-text"><span>销量统计</span></div>
						<div class="section-content flex">
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.inbound?monthInfo.inbound:0}}<span>条</span></div>
								<div class="item-text">入库量</div>
							</div>
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.outbound?monthInfo.outbound:0}}<span>条</span></div>
								<div class="item-text">出库量</div>
							</div>
						</div>
					</div>
					<div class="section">
						<div class="section-title black-text"><span>返利情况</span></div>
						<div class="section-content flex">
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.earlyrebate?monthInfo.earlyrebate:0}}<span>元</span></div>
								<div class="item-text">期初返利</div>
							</div>
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.monthrebate?monthInfo.monthrebate:0}}<span>元</span></div>
								<div class="item-text">本月返利</div>
							</div>
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.consumedrebate?monthInfo.consumedrebate:0}}<span>元</span></div>
								<div class="item-text">已核销返利</div>
							</div>
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.remainrebate?monthInfo.remainrebate:0}}<span>元</span></div>
								<div class="item-text">返利余额</div>
							</div>
						</div>
					</div>
					<div class="section">
						<div class="section-title black-text"><span>积分情况</span></div>
						<div class="section-content flex">
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.earlypoint?monthInfo.earlypoint:0}}</div>
								<div class="item-text">期初返利</div>
							</div>
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.monthpoint?monthInfo.monthpoint:0}}</div>
								<div class="item-text">本月积分</div>
							</div>
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.consumedpoint?monthInfo.consumedpoint:0}}</div>
								<div class="item-text">已使用积分</div>
							</div>
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.remainpoint?monthInfo.remainpoint:0}}</div>
								<div class="item-text">剩余积分</div>
							</div>
						</div>
					</div>
					<div class="section">
						<div class="section-title black-text"><span>轮胎保情况</span></div>
						<div class="section-content flex">
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.registtire?monthInfo.registtire:0}}<span>条</span></div>
								<div class="item-text">注册轮胎保</div>
							</div>
							<div class="section-content-item">
								<div class="item-number blue-text flex">{{monthInfo.claimtire?monthInfo.claimtire:0}}<span>条</span></div>
								<div class="item-text">理赔轮胎保</div>
							</div>
						</div>
					</div>
					<div style="margin: 16px;" v-if="nowMonth.month&&nowMonth.status==0">
					 <van-button round block type="info" native-type="submit" v-if="" @click="handleConfirm">确认</van-button>
				 </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: {
				agentInfo: {},
				nowYear: 0,
				nowMonth: {
					month: 0,
					status: 0,
				},
				storeId: "",
				monthInfo: {
					"id": null,
					"storeid": null,
					"inbound": 0,
					"outbound": 0,
					"earlyrebate": 0,
					"monthrebate": 30,
					"consumedrebate": null,
					"remainrebate": 0,
					"earlypoint": 0,
					"monthpoint": 0,
					"consumedpoint": null,
					"remainpoint": 0,
					"registtire": 0,
					"claimtire": 0,
					"month": null
				}
			},
			watch: {
				keyword: function(nw, od) {
					this.current = 1;
				}
			},
			methods: {
				//  打开新页面
				openWin: function (src) {
					var dateParams = {
						paramsY: this.nowYear,
						paramsM: this.nowMonth
					};
					this.goWin(src, src + '_win.html', dateParams);
				},
				getAgentInfo: function (mescroll) {
					var _this = this,
						url = "getAgentInfoU",
						data = {
							"loginId": this.userId,
							"appVersion": parseFloat(api.appVersion),
							"mobileSystem": api.systemType,
							"type": 'body',
							"url": 'json'
						}
					if (this.userId == null) { //  个人不存在
						$api.clearStorage();
						_this.goWin("login", "login.html", "");
					}
					this.$postuser(url, data, function (ret) {
						if (ret.code == 0) {
							$api.setStorage("status",ret.data.status);
						    if(ret.data.status==5){
								api.alert({
										title: '系统提示',
										msg: '门店账号无效！',
									}, function (ret, err) {
										if (ret) {
										$api.clearStorage();
										_this.goWin("login", "login.html", "");
									}
								});
							}
							_this.agentInfo = ret.data;
						}
					});
				},
				handleInit: function(){
					var monthStr = this.nowYear+"."+this.nowMonth.month+".1"+"-"+ this.nowYear+"."+this.nowMonth.month+"."+this.formatMonthLastDay(this.nowYear+"-"+this.nowMonth.month)
					var data = {
									"storeId": parseInt(this.storeId),
									"month": monthStr,
									"url": "json",
									"type": "body"
							},
							_this = this,
							url = "getMonthDetail";
					var paramStr = "storeId="+parseInt(this.storeId)+"&month="+monthStr;
					this.$getOption(url, paramStr, function(ret) {
						if(ret.code==0||ret.code=="0"){
							_this.monthInfo = ret.monthInfo;
						}else{
							api.toast({
							    msg: ret.msg,
							    duration: 2000,
							    location: 'center'
							});
						}
					})
				},
				handleConfirm: function(){
					var data = {
									"storeid": parseInt(this.storeId),
									"year": this.nowYear,
									"month": this.nowMonth.month,
									"url": "json",
									"type": "body"
							},
							_this = this,
							url = "confirmMonthDetail";
					// var paramStr = "storeId="+parseInt(this.storeId)+"&month="+monthStr;
					this.$post(url, data, function(ret) {
						if(ret.code==0||ret.code=="0"){
							api.toast({
									msg: _this.nowYear+"年"+_this.nowMonth.month+"月月度结算明细 完成确认！",
									duration: 2000,
									location: 'center'
							});
							api.sendEvent({
									name: 'refreshMonth',
									extra: {}
							});
							api.closeWin({});
						}else{
							api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'center'
							});

						}
					})
				}
			},
			filters: {

			},
			mounted: function() {
					if (typeof api.pageParam.paramsY != 'undefined' && api.pageParam.paramsY != [] && api.pageParam.paramsY != null) {
						this.nowYear = api.pageParam.paramsY;
					}else{
						api.toast({
								msg: "年份获取异常",
								duration: 2000,
								location: 'center'
						});
					};
					if (typeof api.pageParam.paramsM != 'Object' && api.pageParam.paramsM != {} && api.pageParam.paramsM != null) {
						this.nowMonth = api.pageParam.paramsM;
					}else{
						api.toast({
								msg: "月份获取异常",
								duration: 2000,
								location: 'center'
						});
					};
				this.userId = $api.getStorage('loginid');
				this.storeId = $api.getStorage('userid')
				this.handleInit();
				this.getAgentInfo();
			}
		})
}
</script>

</html>