maishidaSJ/pages/tixian/Zhanghumingxi.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('zhanghu.zhanghumingxi')" tinColor="white" jiantou="1" titledetl=''></customNav>
		<view class="toptalbar">
			<view class="contentInRowS" style="width:100%;">
				<view style="width: 33%;" v-for="(item,index) in tableList">
					<view :class="index==toptableindex?'tableselect tableLab':'tableLab'" @click="tableselct(item.value,index)">
						<text>{{item.text}}</text>
					</view>
					
				</view>
			</view>
			<view class="contentInRowS" style="width: 100%;margin-top: 22rpx;">
				<view v-if="toptableindex==0" style="width: 20%;" v-for="(item,index) in dateList">
					<view class="contentColumnC" :class="index==itemSelectIndex?'itemView itemViewSel':'itemView'" @click="itemselctday(item,index)">
						<text style="font-size: 28rpx;">{{item.date}}</text>
						<text style="font-size: 28rpx;">{{item.week}}</text>
					</view>
				</view>
				<view v-if="toptableindex==1" style="width: 20%;" v-for="(item,index) in dayList">
					<view class="contentColumnC" :class="index==itemSelectIndex?'itemView itemViewSel':'itemView'" @click="itemselctweek(item,index)">
						<text style="font-size: 28rpx;">{{item.bdate}}</text>
						<text style="font-size: 28rpx;">{{item.ndate}}</text>
					</view>
				</view>
				<view v-if="toptableindex==2" style="width: 20%;" v-for="(item,index) in monthList">
					<view class="contentColumnC" :class="index==itemSelectIndex?'itemView itemViewSel':'itemView'" @click="itemselctmonth(item,index)">
						<text style="font-size: 28rpx;">{{item.month}}</text>
					</view>
				</view>
			</view>
			
		</view>
		<view class="listContent" :style="'margin-top: '+topheight+'rpx;'">
			<view class="contentInRowS" @click="gotomingxi" style="padding: 10rpx;background-color: antiquewhite;height: 50rpx;">
				<text>{{$t('zhanghu.shujutj')}}</text>
				<text >{{$t('zhanghu.chakanmx')}}>></text>
			</view>
			<view class="contentColumn">
				<text class="notTitle" style="color: chocolate;">{{$t('zhanghu.benqleijsr')}}：</text>
				<text class="notshuliang" style="color: chocolate;">{{$formPr(sum)}}{{$t('locale.huobidw')}}</text>
			</view>
			<view class="contentColumn" style="margin-top: 20rpx;">
				<text class="notTitle" style="color: #006AFF;">{{$t('zhanghu.benqiwcdl')}}：</text>
				<text class="notshuliang" style="color: #006AFF;">{{shul}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	import api from "@/pages/api/api.js";
	export default {
		data() {
			return {
				tableList:[],
				toptableindex:0,
				itemSelectIndex:4,
				topheight:0,
				balanceList:'',
				dateList:[],
				dayList:[],
				monthList:[],
				riqi:'',
				sum:0,
				shul:0
			}
		},
		onLoad() {
			this.tableList=[
				{ value: 0, text:this.$t('order.tian')},
				{ value: 1, text:this.$t('order.xingqi')},
				{ value: 2, text:this.$t('order.yue')},
			];
			this.topheight=160;
			
			this.getDayList();
			this.getweekDay();
			this.getmonthList();
			
		},
		onShow() {
			this.toptableindex=0;
			this.itemselctday(this.dateList[4],4);
		},
		methods: {
			tableselct(id,index){
				this.toptableindex=index;
				this.itemSelectIndex=4;
				if(index==0){
					this.itemselctday(this.dateList[4],4);
				}
				if(index==1){
					this.itemselctweek(this.dayList[4],4);
				}
				if(index==2){
					this.itemselctmonth(this.monthList[4],4);
				}
			},
			
			itemselctday(item,index){
				this.itemSelectIndex = index;
				console.log(item)
				this.riqi=item.riqi;
				api('getzddaylist',{
					page:1,
					size:10,
					riqi:this.riqi
				},res=>{
					console.log('getzddaylist',res)
					if(res.data.code==200){
						this.shul=res.data.data.shul;
						this.sum=res.data.data.sum;
					}
					else{
						
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
				
			},
			itemselctweek(item,index){
				this.itemSelectIndex = index;
				console.log(item)
				this.riqi=item.riqi;
				
				api('getzdmeeklist',{
					page:1,
					size:10,
					riqi:this.riqi
				},res=>{
					console.log('getzdmeeklist',res)
					if(res.data.code==200){
						this.shul=res.data.data.shul;
						this.sum=res.data.data.sum;
					}
					else{
						
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			itemselctmonth(item,index){
				this.itemSelectIndex = index;
				console.log(item)
				this.riqi=item.month
				
				api('getzdmatlist',{
					page:1,
					size:10,
					riqi:this.riqi
				},res=>{
					console.log('getzdmatlist',res)
					if(res.data.code==200){
						this.shul=res.data.data.shul;
						this.sum=res.data.data.sum;
					}
					else{
						
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
			getDayList(){
				
				var weeks=[];
				var language = uni.getStorageSync('language');
				if(language==='yuenan'){
					weeks=['Chủ Nhật','Thứ hai','Thứ ba','Thứ Tư','Thứ năm','Thứ sáu','Thứ bảy'];
				}
				else if(language==='zh-Hant'){
					weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
				}
				else{
					weeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
				}
				
				// 获取当前日期
				var today = new Date();
				var date = today.getDate() + "-" + (today.getMonth() + 1);
				var week = today.getDay();
				var year = today.getFullYear();
				
				this.dateList.push({
					date:date,
					year:year,
					week:weeks[week],
					riqi:year+'-'+(today.getMonth() + 1)+'-'+today.getDate()
				})
				// 获取前1天
				var yesterday = new Date(today);
				yesterday.setDate(today.getDate() - 1);
				date = yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				week = yesterday.getDay();
				year = yesterday.getFullYear();
				this.dateList.push({
					date:date,
					week:weeks[week],
					year:year,
					riqi:year+'-'+(yesterday.getMonth() + 1)+'-'+yesterday.getDate()
				})
				// 获取前2天
				yesterday = new Date(today);
				yesterday.setDate(today.getDate() - 2);
				date = yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				week = yesterday.getDay();
				year = yesterday.getFullYear();
				this.dateList.push({
					date:date,
					week:weeks[week],
					year:year,
					riqi:year+'-'+(yesterday.getMonth() + 1)+'-'+yesterday.getDate()
				})
				// 获取前3天
				yesterday = new Date(today);
				yesterday.setDate(today.getDate() - 3);
				date = yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				week = yesterday.getDay();
				year = yesterday.getFullYear();
				this.dateList.push({
					date:date,
					week:weeks[week],
					year:year,
					riqi:year+'-'+(yesterday.getMonth() + 1)+'-'+yesterday.getDate()
				})
				// 获取前2天
				yesterday = new Date(today);
				yesterday.setDate(today.getDate() - 4);
				date = yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				week = yesterday.getDay();
				year = yesterday.getFullYear();
				this.dateList.push({
					date:date,
					week:weeks[week],
					year:year,
					riqi:year+'-'+(yesterday.getMonth() + 1)+'-'+yesterday.getDate()
				})
				this.dateList.reverse();
				console.log(this.dateList)
			},
			getweekDay(index){
				// 获取当前日期
				var today = new Date();
				var week = today.getDay();
				var yesterday = new Date(today);
				yesterday.setDate(today.getDate() - week);
				var bdate=yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				yesterday.setDate(today.getDate() + 6-week);
				var ndate=yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				var year = yesterday.getFullYear();
				
				this.dayList.push({
					bdate:bdate,
					ndate:ndate,
					year:year,
					riqi:year+'-'+(yesterday.getMonth() + 1)+'-'+yesterday.getDate()
				})
				
				var yesterday = new Date(today);
				yesterday.setDate(today.getDate() - week-7*1);
				var bdate=yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				yesterday.setDate(today.getDate() + 6-week-7*1);
				var ndate=yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				year = yesterday.getFullYear();
				this.dayList.push({
					bdate:bdate,
					ndate:ndate,
					year:year,
					riqi:year+'-'+(yesterday.getMonth() + 1)+'-'+yesterday.getDate()
				})
				
				var yesterday = new Date(today);
				yesterday.setDate(today.getDate() - week-7*2);
				var bdate=yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				yesterday.setDate(today.getDate() + 6-week-7*2);
				var ndate=yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				year = yesterday.getFullYear();
				this.dayList.push({
					bdate:bdate,
					ndate:ndate,
					year:year,
					riqi:year+'-'+(yesterday.getMonth() + 1)+'-'+yesterday.getDate()
				})
				var yesterday = new Date(today);
				yesterday.setDate(today.getDate() - week-7*3);
				var bdate=yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				yesterday.setDate(today.getDate() + 6-week-7*3);
				var ndate=yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				year = yesterday.getFullYear();
				this.dayList.push({
					bdate:bdate,
					ndate:ndate,
					year:year,
					riqi:year+'-'+(yesterday.getMonth() + 1)+'-'+yesterday.getDate()
				})
				var yesterday = new Date(today);
				yesterday.setDate(today.getDate() - week-7*4);
				var bdate=yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				yesterday.setDate(today.getDate() + 6-week-7*4);
				var ndate=yesterday.getDate() + "-" + (yesterday.getMonth() + 1);
				year = yesterday.getFullYear();
				this.dayList.push({
					bdate:bdate,
					ndate:ndate,
					year:year,
					riqi:year+'-'+(yesterday.getMonth() + 1)+'-'+yesterday.getDate()
				})
				this.dayList.reverse();
				console.log(this.dayList)
			},
			getmonthList(){
				this.monthList.push(this.getMonthInfo(-4));
				this.monthList.push(this.getMonthInfo(-3));
				this.monthList.push(this.getMonthInfo(-2));
				this.monthList.push(this.getMonthInfo(-1));
				this.monthList.push(this.getMonthInfo(0));
				console.log(this.monthList);
			},
			
			getMonthInfo(num) {
			    //起止日期数组
			    var startStop = new Array();
			    //当前时间
			    var currentDate = new Date();
			    var month = currentDate.getMonth() + num;
			    if (month < 0) {
			        var n = parseInt(-month / 12);
			        month += n * 12;
			        currentDate.setFullYear(currentDate.getFullYear() - n);
			    }
			    currentDate = new Date(currentDate.setMonth(month));
			    //获得当前月份0-11
			    var currentMonth = currentDate.getMonth();
			    //获得当前年份4位年
			    var currentYear = currentDate.getFullYear();
			
			    //获得上一个月的第一天
			    var currentMonthFirstDay = new Date(currentYear, currentMonth, 1);
			    //获得上一月的最后一天
			    var currentMonthLastDay = new Date(currentYear, currentMonth + 1, 0);
			//     startStop.push(getDate(currentMonthFirstDay));
			//     startStop.push(getDate(currentMonthLastDay));
			var tmoth = (currentMonth+1)<10?'0'+(currentMonth+1):currentMonth+1;
			    var month={
					month:currentYear+'-'+tmoth,
					start:this.getDate(currentMonthFirstDay),
					end:this.getDate(currentMonthLastDay)
				}
			    return month;
			},
			getDate(date) {
			    var year = '';
			    var month = '';
			    var day = '';
			    var now = date;
			    year = '' + now.getFullYear();
			    if (now.getMonth() + 1 < 10) {
			        month = '0' + (now.getMonth() + 1);
			    } else {
			        month = '' + (now.getMonth() + 1);
			    }
			    if (now.getDate() < 10) {
			        day = '0' + now.getDate();
			    } else {
			        day = '' + now.getDate();
			    }
			    return year + '-' + month + '-' + day;
			},
			getorderList(page,type){
				
				api('getUsbalance',{
					type:type,
					sort:false,
					page:page,
					size:20,
				},
				r=>{
					this.balanceList=r.data.data.list;
					uni.stopPullDownRefresh();
				},failc=>{
					//console.log('getadvertis----',failc)
					uni.stopPullDownRefresh();
				});
			},
			gotomingxi(){
				uni.navigateTo({
					url:'/pages/tixian/Mingxiqingdan?riqi='+this.riqi+'&type='+this.toptableindex
				})
			},
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				
			},
			/**
			 * 上拉加载回调函数
			 */
			onReachBottom() {
				
			},
		},
	}
</script>

<style lang="scss">
	page{
		background-color: whitesmoke;
	}
	.toptalbar{
		width: 94%;
		margin-left: 3%;
		display: flex;
		flex-direction: column;
		justify-content:flex-start;
		align-items:center;
		background-color:white;
		padding-top: 30rpx;
		height: 70rpx;
	}
	.tableLab{
		height: 60rpx;
		width: 100%;
		text-align:center;
		font-size: 32rpx;
		color: dimgray;
	}
	.tableselect{
		border: solid #006AFF;
		border-width: 0px 0px 6rpx 0px;
		color: #006AFF;
		font-weight: 600;
	}
	
	.itemView{
		height: 100rpx;
		width: 100%;
		text-align:center;
		font-size: 32rpx;
		color: dimgray;
	}
	.itemViewSel{
		border: solid darkgoldenrod;
		border-width: 0px 0px 6rpx 0px;
		color:darkgoldenrod;
		font-weight: 600;
	}
	
	.listContent{
		width: 94%;
		margin-left: 3%;
		background-color: white;
	}
	
	.ruzhangNote{
		padding-left: 10rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
	}
	.timeText{
		color: #1A1A1A;
		font-size: 26rpx;
		padding-left: 20rpx;
	}
	.yujidzText{
		color: sandybrown;
		font-size: 26rpx;
		padding-left: 20rpx;
	}
	.notTitle{
		padding-left: 10rpx;
		line-height: 70rpx;
		font-size: 26rpx;
	}
	.notshuliang{
		margin-left: 60rpx;
		line-height: 70rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
</style>