operatingCompany/operatingCompany/pages/teamStore/teamStore.vue

<template>
	<view class="content">
		<!-- top -->
		<view class="topView">
			<!-- 搜索 -->
			<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>

			<!-- 条件筛选 -->
			<view class="siftBg">
				<picker @change="bindChange" mode="region">
					<view class="uni-input">{{data.address == null ? '区域筛选' : data.address}}
						<image class="downArrow" src="../../static/img/icon_downArrow.png"></image>
					</view>
				</picker>

				<picker :value="thirdIndex" mode="selector" range-key='name' :range="thirdArr"
					@change="bindPickerChange3" v-if="isDirector">
					<view class="uni-input">{{thirdIndex == null ? '运营经理' : thirdArr[thirdIndex].name}}
						<image class="downArrow" src="../../static/img/icon_downArrow.png"></image>
					</view>
				</picker>
			</view>
		</view>

		<!-- 列表 -->
		<view class="shopList">
			<view v-for="(item,index) in shopData" :key="index">

				<!-- shopBox -->
				<view class="shopBox">
					<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="manager" v-if="isDirector">运营经理：{{item.name}} {{item.AccountName}}
					</view>

					<!-- 历史记录 -->
					<view class="bottomView">
						<view class="lishi" @click="history">历史记录</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>
	export default {
		data() {
			return {
				searchValue: '',
				data: {
					provinceCode: '',
					province: '',
					cityCode: '',
					city: '',
					areaCode: '',
					area: '',
					address: null,
				},
				thirdIndex: null,
				thirdArr: [],
				managerId: '',
				shopData: [],
				page: 1,
				noMoreShow: false,
				lng: '',
				lat: '',
				isDirector:'',
			}
		},
		onLoad() {
			this.isDirector = this.$common.isDirector()
			var that = this
			uni.getLocation({
					success(res) {
						that.lng = res.longitude
						that.lat = res.latitude

						that.page = 1
						that.getShopData()
					}
				}),
				this.getManager()

		},

		methods: {
			searchDone(e) {
				this.searchValue = e.target.value
				this.page = 1
				this.getShopData()
			},
			bindChange: function(e) {
				this.data.provinceCode = e.detail.code[0]
				this.data.cityCode = e.detail.code[1]
				this.data.areaCode = e.detail.code[2]
				this.data.province = e.detail.value[0]
				this.data.city = e.detail.value[1]
				this.data.area = e.detail.value[2]
				this.data.address = this.data.province + this.data.city + this.data.area
				this.page = 1
				this.getShopData()
			},
			bindPickerChange3(e) {
				this.thirdIndex = e.target.value
				this.managerId = this.thirdArr[this.thirdIndex].ID
				this.page = 1
				this.getShopData()
			},
			goAddress(v) {

				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
					})
				}
			},
			history() {
				console.log('历史记录');
			},

			getManager() {
				uni.showLoading({
					title: '加载中'
				})
				let url = 'accompany/SuperAccounts/queryManagerListByDept',
					params = {
						name: '',
					}
				this.$http(url, params, 'GET').then(res => {
					this.thirdArr = res.data
				})
			},
			getShopData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = 'accompany/SuperAccounts/listCheckPage',
					params = {
						page: this.page,
						limit: 20,
						provinceCode: this.data.provinceCode,
						cityCode: this.data.cityCode,
						areaCode: this.data.areaCode,
						manager: this.managerId,
						shopName: this.searchValue,
						lng: this.lng,
						lat: this.lat,
					}
				this.$http(url, params, 'GET').then(res => {
					var list = res.data.Items

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

					if (this.page == 1 && list.length == 0) {
						this.noMoreShow = false
					} else if (list.length < 20) {
						this.noMoreShow = true
					}
					if (this.page == 1) {
						this.shopData = list
					} else {
						this.shopData = this.shopData.concat(list)
					}

				})
			}
		},
		// 下拉刷新 上拉加载更多
		onPullDownRefresh() {
			this.page = 1
			this.getShopData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.page++;
			this.getShopData()
		},
	}
</script>

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

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

	/* #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-around;
		height: 80rpx;
		align-items: center;
	}

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

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

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

	}

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

	}

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

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

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

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

	}

	.distance {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.manager {
		font-size: 26rpx;
		color: #999999;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 30rpx;
		
	}

	.bottomView {
		border-top: 1rpx solid #EEEEEE;
		display: flex;
		justify-content: flex-end;
	}

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

	}

	/* 空白页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>