Ci2Order.vue/App/pages/settlement/index/index.vue

<template>
	<view>
		<z-navbar hideTitle></z-navbar>
		<view class="settlement_tab flex-n fac">
			<z-tabs  v-if="!hideStateTab" width="80vw" :tabs="['场地预定','婚庆预定']" v-model="stateTab" @change="changeTab"></z-tabs>
			<view style="width:80vw;height: 98rpx;" v-else></view>
			<view class="settlement_tab_shaixuan iconfont iconxuanzhong2x" @click="gotoSearch"></view>
			<view class="settlement_tab_search iconfont iconjuxing5" @click="gotoSearchPage"></view>

		</view>
		<date-search :visible.sync="showSearch" :select="areaTimeChoose" @searchDate="searchDate"></date-search>
		<z-tabs bgcolor="white" textcolor="#999999" textselectedcolor="#333333" v-model="chooseState" shadow :tabs="['全部','待确认','待结算','已完成','已取消']"
		 @change="changeState" :colorList="['#0075ff','#FDD711','#25B5FD','#3CDF58','#77848C']"></z-tabs>


		<scroll-view scroll-y class="scroll-area" @scrolltolower="scrolltolower" :show-scrollbar="false" @scroll="scroll"
		 :scroll-anchoring="true">
			<view style="height: 30rpx;"></view>

			<template v-if="stateTab==0">
				<z-card class="mb-20 settlement_card " :class="[{settlement_card_line_1:item.confirmState=='03',settlement_card_line_2:item.confirmState=='04',settlement_card_line_3:item.confirmState=='01',settlement_card_line_4:item.confirmState=='02'}]"
				 v-for="(item,index) in dataList" :key="index" @click.native="gotoDetail(item.id)">
					<view class="flex-n fac fjb ptb-25">
						<view class="settlement_card_left ml-40">
							<view class="settlement_card_left_name">{{item.customName}}</view>
							<view class="settlement_card_left_text1 mt-20">{{item.orderDate}} {{item.activityBeginTime}}~{{item.activityEndTime}}
								{{item.houseName}}</view>
							<view class="settlement_card_left_text2 mt-20">应收：{{item.orderNeedMoney||0}}元 实收：{{item.realPayment||0}} 元</view>
						</view>
						<view class="settlement_card_right mr-20">
							<view class="flex-n fac fje">
								<view class="settlement_card_right_icon iconfont iconjuxing20" v-if="item.confirmState=='01'"></view>
								<view class="settlement_card_right_icon iconfont iconjuxing21kaobei2" v-if="item.confirmState=='02'"></view>
								<view class="settlement_card_right_icon iconfont iconjuxing44" v-if="item.confirmState=='03'"></view>
								<view class="settlement_card_right_icon iconfont iconjuxing18" v-if="item.confirmState=='04'"></view>
								<view class="settlement_card_right_state">{{item.confirmStateText}}</view>
							</view>
							<image class="settlement_card_right_image" :src="item.headImageSrc||'../../../static/touxiang_1.png'"></image>
							<view class="settlement_card_right_name">{{item.createUserName}}</view>
						</view>
					</view>
				</z-card>

			</template>
			<template v-else>
				<z-card class="mb-20 settlement_card settlement_card_line_1" :class="[{settlement_card_line_1:item.confirmState=='03',settlement_card_line_2:item.confirmState=='04',settlement_card_line_3:item.confirmState=='01',settlement_card_line_4:item.confirmState=='02'}]"
				 v-for="(item,index) in dataList" :key="index" @click.native="gotoDetail(item.orderId)">
					<view class="flex-n fac fjb ptb-25">
						<view class="settlement_card_left ml-40">
							<view class="settlement_card_left_name">{{item.maleName}}/{{item.femaleName}}</view>
							<view class="settlement_card_left_text1 mt-20">{{item.orderDate}} {{item.activityBeginTime}}~{{item.activityEndTime}}
								{{item.houseName}}</view>
							<view class="settlement_card_left_text2 mt-20">应收：{{item.orderMoney||0}}元 实收：{{item.realPayment||0}} 元</view>
						</view>
						<view class="settlement_card_right mr-20">
							<view class="flex-n fac">
								<view class="settlement_card_right_icon iconfont iconjuxing20" v-if="item.confirmState=='01'"></view>
								<view class="settlement_card_right_icon iconfont iconjuxing21kaobei2" v-if="item.confirmState=='02'"></view>
								<view class="settlement_card_right_icon iconfont iconjuxing44" v-if="item.confirmState=='03'"></view>
								<view class="settlement_card_right_icon iconfont iconjuxing18" v-if="item.confirmState=='04'"></view>
								<view class="settlement_card_right_state">{{item.confirmStateText}}</view>
							</view>
							<image class="settlement_card_right_image" :src="item.headImageSrc||'../../../static/touxiang_1.png'"></image>
							<view class="settlement_card_right_name">{{item.createUserName}}</view>
						</view>
					</view>
				</z-card>
			</template>
			<z-nodata class="mt-100" v-if="dataList.length==0"></z-nodata>
			<z-loading :showLoading="showLoading" :length="dataList.length" :total="total" v-else></z-loading>

		</scroll-view>
		<z-tabbar></z-tabbar>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import dateSearch from './sub/dateSearch.vue'
	const app = getApp({
		allowDefault: true
	});
	export default {
		components: {
			dateSearch
		},
		data() {
			return {
				stateTab: 0,
				chooseState: 0,

				total: 0,
				pageNum: 1,
				scrollTop: 0,
				showLoading: false,
				showSearch: false,

				confirmState: '',
hideStateTab:false,

				dataList: [],
				startTime: '',
				endTime: '',
				createTimeBegin:'',
				createTimeEnd:'',
				areaTimeChoose:2,
			};
		},
		mounted() {
			uni.hideTabBar();
			// this.dataList = [];
			// this.getMenu();
	
		},
		onShow() {
			// this.changeState(this.chooseState);
			this.dataList = [];
			console.log(123)
			this.getMenu();
		},
		onHide() {

		},
		methods: {
			getMenu(){
				uni.getStorage({
					key:'menu',
					success:(res)=>{
						console.log(res.data)
						if(res.data.indexOf('105')>-1){
							this.hideStateTab=false;
							this.stateTab=1;
						}else{
							this.hideStateTab=true;
							this.stateTab=0;
						}
						var beginDate = '',
							endDate = '';
						var end = new Date(),start = new Date();
						var num = start.getDay();
						if (num == 0) {
							num = 7;
						}
						start.setTime(start.getTime() - 3600 * 1000 * 24 * (num - 1));
						end.setTime(end.getTime() + 3600 * 1000 * 24 * (7 - num));
						beginDate = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
						endDate = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate();
						this.searchDate({beginDate:beginDate,endDate:endDate});
					}
				})
			},
			searchDate(data) {
				this.startTime = data.beginDate;
				this.endTime = data.endDate;
				this.createTimeBegin=data.createTimeBegin;
				this.createTimeEnd=data.createTimeEnd;
				this.dataList = [];
					console.log('空数组',this.dataList,data)
				this.pageNum = 1;
				if (this.stateTab == 0) {
					this.getData(this.confirmState);
				} else {
					this.getWeddingData(this.confirmState);
				}
			},
			changeTab(data) {
				this.stateTab = data;
				this.changeState();
			},
			changeState(idx) {
				this.chooseState = idx;
				this.pageNum = 1;
				this.dataList = [];
			
				var confirmState = '';
				this.scrollTop = 0;
				if (idx == 1) {
					confirmState = '03'
				} else if (idx == 2) {
					confirmState = '04'
				} else if (idx == 3) {
					confirmState = '01'
				} else if (idx == 4) {
					confirmState = '02'
				}
				this.confirmState = confirmState;
				if (this.stateTab == 0)
					this.getData(confirmState)
				else
					this.getWeddingData(confirmState);
			},
			getData(confirmState) {
				var houseTypeIds = uni.getStorageSync('searchField') || [];
				this.$axios.post('app/order/orderClearList', {
					"confirmState": confirmState,
					"storeId": uni.getStorageSync('storeId'),
					"pageNum": this.pageNum,
					"startTime": this.startTime,
					"endTime": this.endTime,
					"createTimeBegin":this.createTimeBegin,
					"createTimeEnd":this.createTimeEnd,
					"houseTypeIds": houseTypeIds,
					"pageSize": 10
				}).then(res => {
					console.log('普通', res)
					this.total = res.data.total;
					this.dataList = this.dataList.concat(res.data.list);
					this.showLoading = false;
				}).catch(err => {
					this.showLoading = false;
					this.$refs.uToast.error(err.msg)
				})
			},
			getWeddingData(confirmState) {
				var houseTypeIds = uni.getStorageSync('searchField') || [];
				this.$axios.post('app/wedding/orderWeddingList', {
					"confirmState": confirmState,
					"storeId": uni.getStorageSync('storeId'),
					"pageNum": this.pageNum,
					"startTime": this.startTime,
					"endTime": this.endTime,
					"createTimeBegin":this.createTimeBegin,
					"createTimeEnd":this.createTimeEnd,
					"houseTypeIds": houseTypeIds,
					"pageSize": 10
				}).then(res => {
					console.log('婚庆', res)
					this.total = res.data.total;
					this.dataList = this.dataList.concat(res.data.list);
					this.showLoading = false;
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
					this.showLoading = false;
				})
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '../detail/index?type=' + this.stateTab + '&id=' + id+'&idx='+this.chooseState,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			gotoSearchPage() {
				if (this.stateTab == 0)
					uni.navigateTo({
						url: '../../search/index?type=2',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				else {
					uni.navigateTo({
						url: '../../search/index?type=3',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			//时间段筛选
			gotoSearch() {
				this.showSearch = true;
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			scrolltolower() {
				var totalPage = Math.ceil(Number(this.total) / 10)
				if (this.pageNum < totalPage) {
					this.pageNum++;
					this.showLoading = true;
					if (this.stateTab == 0) {
						this.getData(this.confirmState);
					} else {
						this.getWeddingData(this.confirmState);
					}
				}
			},
			// scrolltoupper(){
			// 	this.pageNum = 1;
			// 	this.dataList=[];
			// 	this.showLoading = true;
			// 	if (this.stateTab == 0) {
			// 		this.getData(this.confirmState);
			// 	} else {
			// 		this.getWeddingData(this.confirmState);
			// 	}
			// }
		}
	}
</script>

<style scoped lang="scss">
	.scroll-area {
		height: calc(100vh - 294rpx - var(--status-bar-height));
		overflow-anchor: auto;
	}

	.settlement_tab {
		position: relative;
		background: #354054;

		.settlement_tab_search {
			position: fixed;
			width: 10vw;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			font-size: 38rpx;
		top:0;
			right: 0rpx;
			color: rgba(255, 255, 255, 1);
			z-index: 444;
			background: #354054;
		}

		.settlement_tab_shaixuan {
			position: fixed;
			width: 10vw;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
		top:0;
			right:10vw;
			font-size: 38rpx;
		
			color: rgba(255, 255, 255, 1);
			z-index: 444;
				background: #354054;
		}
	}

	.settlement_card {
		position: relative;

		.settlement_card_left {
			.settlement_card_left_name {
				font-size: 28rpx;
				color: #333333;
			}

			.settlement_card_left_text1 {
				font-size: 24rpx;
				color: #888888;
			}

			.settlement_card_left_text2 {
				font-size: 26rpx;
				color: #888888;
			}
		}

		.settlement_card_right {
			text-align: right;

			.settlement_card_right_icon {
				width: 22rpx;
				height: 22rpx;
				font-size: 22rpx;
				margin-right: 5rpx;
				color: #007AFF;
			}

			.settlement_card_right_state {
				font-size: 25rpx;
				transform: scale(0.8);
				color: #999999;
			}

			.settlement_card_right_image {
				width: 70rpx;
				height: 70rpx;
				min-width: 70rpx;
				border-radius: 50%;

				// border: 2rpx solid rgba(207, 207, 207, 1);
				// background: #007AFF;
			}

			.settlement_card_right_name {
				font-size: 24rpx;
				color: #555555;
			}
		}

	}

	.settlement_card_line_1 {
		border-left: 10rpx solid #FDD711;
	}

	.settlement_card_line_2 {
		border-left: 10rpx solid #25B5FD;
	}

	.settlement_card_line_3 {
		border-left: 10rpx solid #3CDF58;
	}

	.settlement_card_line_4 {
		border-left: 10rpx solid #77848C;
	}

	.state_detail {
		margin-left: 40rpx;
		margin-bottom: 40rpx;

		view {
			font-size: 28rpx;
			padding: 0 30rpx;
		}

		.state_square_1 {
			border-left: 20rpx solid #FDD711;
		}

		.state_square_2 {
			border-left: 20rpx solid #25B5FD;
		}

		.state_square_3 {
			border-left: 20rpx solid #3CDF58;
		}

		.state_square_4 {
			border-left: 20rpx solid #77848C;
		}
	}
</style>