yiliangyiyun-app/pages/grain_pulse/home.vue

<template>
	<view>
		<view class="header">
			<view class="flex justify-between map">
				<view class='Medium flex align-item-center locationwrap'
					@click='naviageToPage("/pages/grain_pulse/position/position")'>
					<image class='location' src="../../static/img/liangmai/icon_ditu@2x.png" mode=""></image>
					{{position.name}}
				</view>
				<view
					@click='naviageToPage("/pages/grain_pulse/distribution/distribution?position="+JSON.stringify(position))'
					class='Regular flex align-item-center distribution justify-center'>
					<image class='cangku' src="../../static/img/liangmai/cangku.png" mode=""></image>
					分布
				</view>
			</view>
			<u-search bg-color='#F5F6F9' :show-action="true" action-text="搜索" :animation="true"></u-search>
			<!-- <view class="cu-bar search">
				<view class="search-form round" @click="naviageToPage('/pages/grain_pulse/search')">
					<image class='icon-scarch' src="../../static/img/liangmai/sousuo.png" mode=""></image>
					<view class='Regular'> 请输入货名或标题</view>
				</view>
			</view> -->
		</view>
		<view class="content">
			<!-- <view @click='friendcircle' class="friendcircle">
				<view class='title flex align-item-center Medium'>
					<image class='icon-friendcircle' src="../../static/img/liangmai/icon.png" mode=""></image>
					圈友说
				</view>
				<view class='friendcircle-content flex justify-between'>
					<image class='bg' src="../../static/img/liangmai/bg.png" mode=""></image>
					<view class='friendcircle-content-right'>
						<view v-for='item in releaseInfo'
							class='friendcircle-content-right-item Regular flex align-item-center'>
							<image class='headportrait' v-if='item.avatarUrl' :src="item.avatarUrl" mode=""></image>
							<image class='headportrait' v-else src="../../static/img/myimg/YongHu@3x.png" mode="">
							</image>
							{{item.title}}
						</view>
					</view>
				</view>
			</view> -->
			<scroll-view scroll-x="true" scroll-with-animation="true" class='list-type'>
				<view v-for='item in searchTypes' @click='mainBusinessTypechange(item)'
					:class='mainBusinessTypeKey==item.value?"Semibold active":"Regular"' class="typeitem">{{item.name}}
				</view>
			</scroll-view>
			<view v-if='datalist.length>0' v-for='item in datalist' @click='todetails(item)' class="listitem">
				<view class="flex">
					<image style='width:98px;height:97px;flex:1;' class='listitem-left' :src="item.attachmentAddress"
						mode=""></image>
					<view style='flex:2;' class="listitem-right">
						<view class="companyname Medium">{{item.compName}}</view>
						<view class='Regular introduce'>{{item.companyProfile}}</view>
					</view>
				</view>
				<view class="flex  align-item-center justify-between">
					<view @click.stop='naviageToPage1(item,"/pages/grain_pulse/localtion/localtion")'
						class='companylocation flex align-item-center Regular'>
						<image class='location' src="../../static/img/liangmai/icon_ditu.png" mode=""></image>
						{{item.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}
					</view>
					<view v-if='position.name!="未设置"' class='distance Regular'>{{item._metre}}</view>
				</view>
			</view>

			<view style='padding:10px;text-align:center;' v-if='datalist.length==0'>
				当前暂无数据
			</view>
			<view v-else-if="isLoadMore">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
		</view>
		<view class="enter" @click="enterUrl">
			<image style='width:56.5px;height:28px;' src="../../static/img/liangmai/ruzhu.png" mode=""></image>
			<view class='enter-content'>入驻</view>
		</view>
		<u-back-top :scroll-top="scrollTop" mode="circle" icon="arrow-upward"></u-back-top>
		<u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
			:content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
			:showCancelButton='false' :content="content" @confirm="alertBtn" @cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		components: {

		},
		data() {
			return {
				isShowAlert: false,
				content: '您尚未登录，是否立即登录？',
				position: {
					name: "未设置"
				},
				status: 0,
				mainBusinessType: '',
				mainBusinessTypeKey: '0',
				pageSize: 10,
				releaseInfo: [],
				currentPage: 1,
				isLoadMore: false, //是否加载中
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				searchTypes: [{
						name: '全部',
						value: '0'
					}, {
						name: '粮库',
						value: '1'
					}, {
						name: '加工厂',
						value: '2'
					},
					{
						name: '烘干塔',
						value: '3'
					}, {
						name: '饲料厂',
						value: '4'
					}, {
						name: '养殖场',
						value: '5'
					},
					{
						name: '粮贸',
						value: '6'
					}, {
						name: '期货',
						value: '7'
					}
				],
				notlist: false,
				datalist: [],
				scrollTop: 0,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			this.getList()
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.currentPage = 1
			setTimeout(function() {
				uni.stopPullDownRefresh(); //关闭下拉刷新
			}, 1000);
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.currentPage += 1
				console.log("currentPage", this.currentPage)
				this.getData()
			}
		},
		onShow(val) {
			this.isLoadMore = false
			this.currentPage = 1
			uni.hideKeyboard()
			uni.getStorage({
				key: 'setLocaltion',
				success: (res) => {
					console.log("setLocaltion", res.data)
					this.position = res.data
					// uni.removeStorage({
					// 	key: 'setLocaltion'
					// })
				},
			})
			if (this.position.name == "未设置") {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log('获取位置数据：', res);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						//拼接当前定位回显地址
						// #ifdef APP-PLUS
						that.position.name = res.address.poiName
						that.position.cityname = res.address.city
						that.position.location = res.longitude + "," + res.latitude
						uni.setStorage({
							key: 'setLocaltion',
							data: that.position
						})
						// #endif
						that.getList()
					},
					fail: function(req) {
						console.log(req)
						that.getList()
					}
				});
			} else {
				this.getList()
			}
			uni.removeTabBarBadge({
				index: 4
			})
			this.$api.doRequest('get', '/newNoticeTask/query/noticeTasks').then(res => {
				if (res.data.data) {
					let name = 'myTip';
					let value = res.data.data.total;
					that.$store.commit('$uStore', {
						name,
						value
					});
					if (value != 0 && value) {
						uni.setTabBarBadge({
							index: 4,
							text: value + ""
						})
					}
					name = 'taskTip';
					value = res.data.data.total;
					that.$store.commit('$uStore', {
						name,
						value
					});
				}
			})
		},
		onLoad(option) {
			if (option.position) {
				this.position = option.position
			}
		},
		methods: {
			getList() {

				this.$api.doRequest('get', '/settledCompanyDynamics/selectSettledCompanyDynamicsPage', {
						currentPage: 1,
						pageSize: 4,
						searchKeyWord: this.keyword,
						searchType: 2
					})
					.then(res => {
						if (res.data.code == 200) {
							this.releaseInfo = res.data.data.records
						}
					})
				this.getInfo()
			},
			getData() {
				var that = this
				uni.showLoading({
					title: "正在加载"
				})

				this.$api.doRequest('get', '/settledCompanyInfo/selectSettledCompanyInfo', {
					mainBusinessType: this.mainBusinessType,
					pageSize: this.pageSize,
					currentPage: this.currentPage,
					pcFlag: 2,
					searchType: 2,
					location: that.position.cityname
				}).then(res => {
					if (res.data.code == 200) {
						var data = res.data.data.records
						if (data.length > 0) {
							this.datalist = this.datalist.concat(data)
							if (this.position && this.position.location) {
								let lat2 = this.position.location.split(',')[1];
								let lng2 = this.position.location.split(',')[0];
								for (var i = 0; i < this.datalist.length; i++) {
									this.datalist[i]._metre = this.utils.getDistance(this.datalist[i].latitude,
										this.datalist[i].longitude, lat2, lng2)
								}
							}
							if (this.currentPage == 1 && this.datalist.length == 0) {
								this.notlist = true
							} else {
								this.notlist = false
							}
							console.log("this.datalist", this.datalist)
							that.isLoadMore = false
						} else {
							if (that.currentPage > 1) {
								that.currentPage -= 1
							}
							that.isLoadMore = true
							that.loadStatus = 'nomore'
						}

						// let _metre = this.utils.getDistance(lat1,lng1,lat2,lng2) +"千米"
					}
					uni.hideLoading()
				}).catch(res => {
					that.isLoadMore = false
					that.loadStatus = 'nomore'
					if (that.currentPage > 1) {
						that.currentPage = 1
					}
					uni.hideLoading()
				})
			},
			getInfo() {
				var that = this
				uni.showLoading({
					title: "正在加载"
				})
				this.$api.doRequest('get', '/settledCompanyInfo/selectSettledCompanyInfo', {
					mainBusinessType: this.mainBusinessType,
					pageSize: this.pageSize,
					currentPage: this.currentPage,
					pcFlag: 2,
					searchType: 2,
					location: that.position.cityname
				}).then(res => {
					if (res.data.code == 200) {
						this.datalist = res.data.data.records
						console.log(this.position)
						let lat2 = this.position.location.split(',')[1];
						let lng2 = this.position.location.split(',')[0];
						for (var i = 0; i < this.datalist.length; i++) {
							this.datalist[i]._metre = this.utils.getDistance(this.datalist[i].latitude, this
								.datalist[i].longitude, lat2, lng2)
						}
						if (this.currentPage == 1 && this.datalist.length == 0) {
							this.notlist = true
						} else {
							this.notlist = false
						}
						console.log(this.datalist)
						// let _metre = this.utils.getDistance(lat1,lng1,lat2,lng2) +"千米"
					}
					uni.hideLoading()
				}).catch(res => {
					uni.hideLoading()
				})
			},
			mainBusinessTypechange(item) {
				if (item.name != '全部') {
					this.mainBusinessType = item.name
				} else {
					this.mainBusinessType = ''
				}
				this.currentPage = 1
				this.getInfo()
				this.mainBusinessTypeKey = item.value
			},
			alertBtn() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			cancelClick() {
				this.isShowAlert = false
			},
			enterUrl() {
				if (!this.hasLogin) {
					this.isShowAlert = true;
					// uni.showModal({
					// 	title: '提示',
					// 	content: '您尚未登录，是否立即登录？',
					// 	showCancel: true,
					// 	confirmText: '登录',
					// 	success: (e) => {
					// 		if (e.confirm) {
					// 			uni.navigateTo({
					// 				url: '/pages/public/login'
					// 			})
					// 		}
					// 	},
					// 	fail: () => {},
					// 	complete: () => {}
					// })
				} else {
					//入驻
					uni.navigateTo({
						url: '/pages/grain_pulse/enter'
					})
				}

			},
			friendcircle() {
				uni.navigateTo({
					url: '/pages/grain_pulse/dynamic'
				})
			},
			todetails(item) {
				uni.navigateTo({
					url: '/pages/grain_pulse/details?id=' + item.id
				})
			},
			naviageToPage(item) {
				console.log(item)
				uni.navigateTo({
					url: item
				})
			},
			naviageToPage1(item, url) {
				uni.setStorageSync('location', item)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped>
	/* 《--头部 */
	.header {
		padding: 0 25rpx 20rpx 25rpx;
		background: #fff;
		border-radius: 0 0 10px 10px;
	}

	/* 头部--》 */
	/* 《--定位 */
	.location {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.locationwrap {
		font-size: 16px;
	}

	/* 定位 --》 */
	/* 《--分布 */
	.map {
		padding: 8.5px 0;
	}

	.cangku {
		width: 16.5px;
		height: 16.5px;
		margin-right: 5px;
	}

	.distribution {
		background: #F5F6FA;
		width: 71.5px;
		height: 32px;
		border-radius: 15px;
		font-size: 12px;
	}

	/* 分布--》 */
	/* 《--搜索 */
	.cu-bar .search-form {
		background: #F5F6F9;
		margin: 0;
		margin-bottom: 18px;
		padding: 10px 18px;
	}

	.icon-scarch {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	/* 搜索--》 */
	/* 《--内容 */
	.content {
		margin-top: 13px;
	}

	/* 内容--》 */
	/* 《--圈友说 */
	.friendcircle {
		background: #fff;
		margin: 0 9px;
		border-radius: 20rpx;
	}

	.friendcircle .title {
		font-size: 16px;
		padding: 11.5px 14.5px;
	}

	.icon-friendcircle {
		width: 17px;
		height: 17px;
		margin-right: 5.5px;
	}

	.bg {
		width: 220rpx;
		height: 248rpx;
	}

	.friendcircle-content {
		padding: 0 17px 18px;
	}

	.friendcircle-content-right {
		margin-left: 15.5px;
	}

	.friendcircle-content-right-item {
		background: linear-gradient(90deg, #F5F6FA 0%, #FFFFFF 100%);
		border-radius: 15rpx;
		margin-bottom: 10rpx;
		width: 420rpx;
		font-size: 12px;
		padding: 3px 0;
	}

	.headportrait {
		width: 22.5px;
		height: 22.5px;
		margin-right: 8.5px;
		border-radius: 10px;
	}

	/* 圈友说--》 */
	/* 《--类型 */
	.list-type {
		background: linear-gradient(180deg, #F5F6FA 0%, #FFFFFF 100%);
		width: 100vw;
		padding-top: 5px;
		height: 49px;
		overflow-x: scroll;
		white-space: nowrap;
	}

	.typeitem {
		margin: 20rpx 28rpx;
		position: relative;
		display: inline-block;
		padding-top: 8px;
		padding-bottom: 5px;
	}

	.typeitem.active {
		font-size: 16px;
	}

	.typeitem.active:after {
		content: '';
		display: block;
		position: absolute;
		height: 3px;
		bottom: 0;
		background: #22C572;
		width: 50%;
		left: 50%;
		transform: translateX(-50%);
	}

	/* 类型--》 */
	/* 《--数据 */
	.listitem {
		background: #fff;
		margin: 10px;
		padding: 15px 19px;
		border-radius: 20rpx;
	}

	.listitem-left {
		width: 400rpx;
		height: 200rpx;
		margin-right: 8px;
		border-radius: 5px;

	}

	.companyname {
		font-size: 14px;
		color: #333;
	}

	.introduce {
		font-size: 12px;
		color: #676E80;
	}

	.companylocation {
		color: #676E80;
		/* background: #F5F6FA; */
		margin-top: 8px;
		/* padding: 4px 10px; */
		border-radius: 15px;
		font-size: 12px;
		/* width: 65%; */
		background: #F5F6FA;
		padding:8rpx 14rpx ;
	}

	.distance {
		color: #AFB3BF;
		padding: 4px;
		margin-top: 8px;
		font-size: 12px;
	}

	/* 数据--》 */
	.enter {
		position: fixed;
		right: 0;
		top: 70%;
		width: 56.5px;
		height: 28px;
	}

	.enter-content {
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;

	}
</style>