operatingCompany/operatingCompany/pages/entryReport/entryReport.vue

<template>
	<view class="content">
		<view class="zdyNav">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="nav">
				<view>
					<image src="../../static/img/baiheiback.png" mode="" class="baiheiback" @click="back"></image>
				</view>
				<view>门店列表</view>
				<view style="width:70px;"></view>
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>

		<view class="topView">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view style="height: 44px;"></view>
			<!-- 搜索 -->
			<!-- <view class="searchBox">
				<image src="../../static/img/icon_search.png" class="searchImg"></image>
				<input type="text" class="searchInput" placeholder="请输入门店名称、联系人、手机号" v-model="searchValue"
					@confirm="searchDone" />
			</view> -->

			<searchBox placeholder="请输入门店名称、联系人、手机号" @search='search($event)'></searchBox>

			<!-- 筛选条件 -->
			<view class="siftBg">
				<picker value="firstIndex" :range="firstArr" @change="bindPickerChange">
					<view class="uni-input">距上次提交 {{firstIndex == null ? '不限' : firstArr[firstIndex]}}
						<image class="downArrow" src="../../static/img/icon_downArrow.png" mode=""></image>
					</view>
				</picker>

				<!-- 筛选条件 需检测项 -->
				<view class="checkBg" @click="changeHave">
					<image class='checkImg' src="../../static/img/icon_select_def@2x.png" mode="" v-if="!isHave">
					</image>
					<image class='checkImg' src="../../static/img/icon_select_per@2x.png" mode="" v-else>
					</image>
					需检测项大于0
				</view>


			</view>


		</view>

		<!-- 门店列表 -->
		<view class="shopContent">
			<view v-for="(item,index) in shopData" :key="index">
				<!-- 需要检查项 大于0 -->
				<view class="shopBox" v-if="isHave && item.checkCount > 0">
					<view class="shopTop">
						<view class="shopName">{{item.ShopName}}</view>


						<!-- 地址 和电话 图标 -->
						<image class="tubiao" src="../../static/img/icon_daohang_def@2x.png" @click="goAddress(item)">
						</image>
						<image class="tubiao" src="../../static/img/icon_phone_def@2x.png"
							@click="call(item.ContactorPhone)">
						</image>




					</view>
					<!-- 门店类型-开业时间-联系人 -->
					<view class="shopType"><text style='color: #B98B5D;'>{{item.levelName}}</text> ·
						<text v-if="item.OpeningTime != null">{{item.OpeningTime}}</text> 联系人：{{item.Contactor}}
					</view>

					<!-- 详细地址 -->
					<view class="addressView">
						<view class="address">{{item.Address}}</view>
						<view class="distance" v-if="item.distance != 0.00">{{item.distance}}km</view>
					</view>

					<!-- 提交信息 -->
					<view class="tijao">
						<view class="time" v-if="item.maxTime">距上次提交：<text
								style='color: #FF4F00;'>{{item.maxTime}}</text>天</view>
						<view class="time" v-else-if="item.maxTime === 0">距上次提交：当天</view>
						<view class="time" v-else-if="!item.maxTime">暂无提交记录</view>



						<view class="xiangmu"><text style='color: #FF4F00;'>{{item.checkCount}}</text>项需要检测</view>
					</view>

					<!-- btns -->
					<view class="btns">
						<view class="lishi" @click="goHistory(item)">历史记录</view>
						<view class="qiandao" @click="sinnIn(item)">签到</view>
						<view class="baogao" @click="goEntered(item)" v-if="item.levelName">录入报告</view>
						<view class="baogao" @click="showLeveError" v-else-if="!item.levelName">录入报告</view>
						<view class="baogao" @click="showCheckError" v-else-if="!item.PackageName || itme.State == 0">
							录入报告</view>
					</view>
				</view>

				<!-- 展示全部数据 -->
				<view class="shopBox" v-if="!isHave">
					<view class="shopTop">
						<view class="shopName">{{item.ShopName}}</view>


						<!-- 地址 和电话 图标 -->
						<image class="tubiao" src="../../static/img/icon_daohang_def@2x.png" @click="goAddress(item)">
						</image>
						<image class="tubiao" src="../../static/img/icon_phone_def@2x.png"
							@click="call(item.ContactorPhone)">
						</image>




					</view>
					<!-- 门店类型-开业时间-联系人 -->
					<view class="shopType"><text style='color: #B98B5D;'>{{item.levelName}}</text> ·
						<text v-if="item.OpeningTime != null">{{item.OpeningTime}}</text> 联系人：{{item.Contactor}}
					</view>

					<!-- 详细地址 -->
					<view class="addressView">
						<view class="address">{{item.Address}}</view>
						<view class="distance" v-if="item.distance != 0.00">{{item.distance}}km</view>
					</view>

					<!-- 提交信息 -->
					<view class="tijao">
						<view class="time" v-if="item.maxTime">距上次提交：<text
								style='color: #FF4F00;'>{{item.maxTime}}</text>天</view>
						<view class="time" v-else-if="item.maxTime === 0">距上次提交：当天</view>
						<view class="time" v-else-if="!item.maxTime">暂无提交记录</view>



						<view class="xiangmu"><text style='color: #FF4F00;'>{{item.checkCount}}</text>项需要检测</view>
					</view>

					<!-- btns -->
					<view class="btns">
						<view class="lishi" @click="goHistory(item)">历史记录</view>
						<view class="qiandao" @click="sinnIn(item)">签到</view>

						<view class="baogao" @click="goEntered(item)" v-if="item.levelName">录入报告</view>
						<view class="baogao" @click="showLeveError" v-else-if="!item.levelName">录入报告</view>
						<view class="baogao" @click="showCheckError" v-else-if="!item.PackageName || itme.State == 0">
							录入报告</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 上拉 加载更多 -->
		<!-- <view class="noMore" v-if="noMoreShow">没有更多数据</view> -->
		<!-- 无数据空白页 -->
		<view class="nodataBox" v-if="shopData.length == 0">
			<image src="../../static/img/pic_empty_def.png" mode="widthFix" class="nodataImg"></image>
			<view class="noTxt">暂无数据</view>
		</view>

	</view>
</template>

<script>
	import searchBox from '@/components/searchBox/searchBox.vue'
	export default {
		components: {
			searchBox
		},
		data() {
			return {
				searchValue: '',
				lng: '',
				lat: '',
				firstIndex: null,
				firstArr: ['不限', '1-15天', '15-30天', '30天以上'],
				isHave: false,
				shopData: [],
				page: 1,
				noMoreShow: false,
				iStatusBarHeight: '',
			}
		},
		onLoad() {
			//页面加载初始化生命周期函数
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		onShow() {
			this.firstIndex = null
			this.isHave = false
			var that = this
			uni.getLocation({
				success(res) {
					that.lng = res.longitude
					that.lat = res.latitude

					that.page = 1
					that.getShopData()
				},
				fail() {

				}
			})
			//#ifdef H5 

			that.lng = '117.06533'
			that.lat = '36.68013'
			that.getShopData()
			// #endif
		},
		methods: {
			showLeveError() {
				uni.showToast({
					title: '该门店未设置门店类型',
					icon: 'none',
					duration: 2000,
				});
			},
			showCheckError() {
				uni.showToast({
					title: '未查询到检测套餐信息',
					icon: 'none',
					duration: 2000,
				});
			},
			back() {
				uni.reLaunch({
					url: '../index/index'
				})
			},
			goHistory(item) {
				uni.navigateTo({
					url: 'historyReport?shopId=' + item.shopId
				})
			},
			sinnIn(item) {
				uni.navigateTo({
					url: 'signIn?shopId=' + item.shopId
				})
			},
			goEntered(item) {
	            console.log(item)
				if(item.State){
					this.$http('accompany/SuperAccounts/queryManagerTodaySign', {
						shopId:item.shopId,
						
					}, 'GET').then(res => {
					   if(res.data.today){
						   if(item.maxTime<30){
						   	var that=this;
						   	console.log(item.maxTime)
						   	if(item.maxTime == null||item.maxTime===''){
						   		that.$store.commit('mutationsCategoryList', '');
						   		that.$store.commit('mutationssuggestList', '')
						   		uni.navigateTo({
						   			url: 'entered?shopId=' + item.shopId + '&ShopName=' + item.ShopName + '&Contactor=' + item.Contactor
						   		})
						   	}else{
						   	uni.showModal({
						   	    title: '提示',
						   	    content: '距上次提交报告：'+item.maxTime+'天，是否继续录入？',
						   	    success: function (res) {
						   	        if (res.confirm) {
						   	          that.$store.commit('mutationsCategoryList', '');
						   	          that.$store.commit('mutationssuggestList', '')
						   	          uni.navigateTo({
						   	          	url: 'entered?shopId=' + item.shopId + '&ShopName=' + item.ShopName + '&Contactor=' + item.Contactor
						   	          })
						   								 
						   	        } else if (res.cancel) {
						   	            console.log('用户点击取消');
						   	        }
						   	    }
						   	});	
						   	}
						   	
						   	
						   	
						   }else{
						   	this.$store.commit('mutationsCategoryList', '');
						   	this.$store.commit('mutationssuggestList', '')
						   	uni.navigateTo({
						   		url: 'entered?shopId=' + item.shopId + '&ShopName=' + item.ShopName + '&Contactor=' + item.Contactor
						   	})
						   }
					   }else{
						   setTimeout(function() {
						      uni.showToast({
									title: '请先进行签到',
									icon: 'none',
									duration: 3000,
						      });
						   }, 300);
						  
					   }
					})
					return false;
					
				} else {
					uni.showToast({
						title: '未查询到检测套餐信息',
						icon: 'none',
						duration: 3000,
					});
				}



			},
			search(val) {
				// console.log(val);
				this.searchValue = val
				this.page = 1
				this.getShopData()
			},
			bindPickerChange(e) {
				this.firstIndex = Number(e.target.value)
				this.page = 1
				this.getShopData()
			},

			changeHave() {
				this.isHave = !this.isHave

			},
			goAddress(v) {
				console.log(v)
				if (!v.lat) {
					uni.showToast({
							title: '该门店未设置定位',
							icon: 'none',
							duration: 3000,
						});
						return
				}
				uni.openLocation({
					latitude: Number(v.lat),
					longitude: Number(v.lng),
					name: v.ShopName,
					address: v.Address,
				});
			},
			call(e) {
				if (e.length != 0) {
					uni.makePhoneCall({
						phoneNumber: e
					})
				}
			},

			getShopData() {
				uni.showLoading({
					title: '加载中'
				})
				var maxTime = ''
				if (this.firstIndex == 0) {
					maxTime = ''
				} else {
					maxTime = Number(this.firstIndex)
				}


				let url = 'accompany/SuperAccounts/queryShopListByMyTeam',
					params = {
						// page: this.page,
						// limit: 20,
						shopName: this.searchValue,
						lng: this.lng,
						lat: this.lat,
						maxTime: maxTime,

					}
				this.$http(url, params, 'GET').then(res => {
					var list = res.data

					// 处理 undefined和null转为空白字符串
					list.forEach((item, index) => {
						for (const key in item) {
							item[key] = this.$praseStrEmpty(item[key])
						}
					})
					this.shopData = list

					console.log(this.shopData);


					// if (this.page == 1) {
					// 	this.shopData = list
					// } else {
					// 	this.shopData = this.shopData.concat(list)
					// }

					// if(list.length < 10){
					// 	this.noMoreShow = false
					// }
					// else {
					// 	this.noMoreShow = true
					// }

				})
			},
		},
		// 下拉刷新 上拉加载更多

		onPullDownRefresh() {
			this.getShopData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// onReachBottom() {
		// 	this.page++;
		// 	this.getShopData()
		// },
	}
</script>

<style scoped>
	.content {
		background-color: #F4F5F7;
		min-height: 100vh;
	}

	.zdyNav {
		position: fixed;
		left: 0;
		top: 0;
		background: #FFFFFF;
		z-index: 99;
	}

	.nav {
		width: 100vw;
		height: 44px;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		font-size: 34rpx;
		line-height: 44px;
	}

	.status_bar {
		background: #FFFFFF;
	}

	.baiheiback {
		width: 70px;
		height: 44px;
	}

	.topView {
		width: 100%;
		background-color: #FFFFFF;
		left: 0rpx;
		top: 0rpx;
		position: fixed;
		z-index: 98;
	}

	/* #ifdef H5 */
	.topView {
		/* top: 44px; */
	}

	/* #endif */

	.searchBox {
		height: 72rpx;
		margin: 24rpx;
		background-color: #F4F5F7;
		border-radius: 36rpx;
		display: flex;
	}

	.searchImg {
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.searchInput {
		height: 72rpx;
		font-size: 28rpx;
		padding-left: 16rpx;
		width: 85%;
	}

	.siftBg {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		padding: 0rpx 24rpx;
		align-items: center;
	}

	.siftBg,
	.checkBg {
		font-size: 28rpx;
		color: #3C3C3C;
	}

	.downArrow {
		width: 16rpx;
		height: 12rpx;
		padding: 6rpx 8rpx;
	}

	.checkBg {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 72rpx;
		padding: 0rpx 24rpx;
	}

	.checkImg {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;

	}

	.shopContent {
		background-color: #F4F5F7;
		padding: 0rpx 24rpx;
		padding-top: 200rpx;
	}

	.shopBox {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx 0rpx;

	}

	.shopTop {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;

	}

	.shopName {
		font-size: 30rpx;
		font-weight: bold;
		color: #3C3C3C;
		margin-right: 20rpx;
		width: 500rpx;
	}

	.tubiao {
		width: 48rpx;
		height: 48rpx;
		padding-left: 40rpx;
	}


	.shopType {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		color: #3C3C3C;
	}

	.addressView {
		padding: 10rpx 20rpx;
		display: flex;
		font-size: 26rpx;
		color: #999999;
		display: flex;
		justify-content: space-between;
	}

	.address {
		margin-right: 20rpx;
	}

	.tijao {
		padding: 10rpx 20rpx 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #999999;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.btns {
		display: flex;
		justify-content: flex-end;


	}

	.lishi,
	.qiandao,
	.baogao {
		margin: 20rpx;
		color: #3C3C3C;
		font-size: 28rpx;
		width: 150rpx;
		height: 56rpx;
		border-radius: 28rpx;
		border: 2rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
	}

	.baogao {
		border: 2rpx solid #FF4F00;
		color: #FF4F00;
	}

	/* 空白页css */
	.nodataBox {
		text-align: center;
	}

	.nodataImg {
		width: 400rpx;
		padding-top: 300rpx;
	}

	.noTxt {
		font-size: 30rpx;
		color: #999999;
		padding-top: 50rpx;
	}

	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
</style>