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.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>
			<!-- <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>

	</view>
</template>

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

		},
		data() {
			return {
				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: []
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onPullDownRefresh() {
		    this.getList()
			this.isLoadMore = false
			this.loadStatus = 'loading'
		     setTimeout(function () {
		         uni.stopPullDownRefresh();  //关闭下拉刷新
		     }, 1000);
		 },
		 onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.currentPage += 1
				this.getData()
			}
		 },
		onShow(val) {
			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.location = res.longitude + "," +  res.latitude
						uni.setStorage({
							key: 'setLocaltion',
							data: that.position
						})
						// #endif
						that.getList()
					},
					fail:function(req){
						console.log(req)
					}
				});
			}
			else{
				this.getList()
			}
		},
		onLoad(option) {
			if (option.position){
				this.position = option.position
			}
		},
		methods: {
			getList(){
				
				this.$api.doRequest('get', '/settledCompanyDynamics/selectSettledCompanyDynamicsPage', {
						currentPage: 1,
						pageSize: 4,
						searchKeyWord: this.keyword
					})
					.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
				}).then(res => {
					if (res.data.code == 200) {
						var data = res.data.data.records
						if(data.length > 0){
							this.datalist = this.datalist.concat(data)
							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",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(){
				uni.showLoading({
					title:"正在加载"
				})
				this.$api.doRequest('get', '/settledCompanyInfo/selectSettledCompanyInfo', {
					mainBusinessType: this.mainBusinessType,
					pageSize: this.pageSize,
					currentPage: 1,
					pcFlag: 2,
					searchType: 2
				}).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.getInfo()
				this.mainBusinessTypeKey = item.value
			},
			enterUrl() {
				if (!this.hasLogin) {
					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 12.5px;
		background: #fff;
		border-radius: 0 0 10px 10px;
	}

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

	.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: 4px;
	}

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

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

	.bg {
		width: 200rpx;
		height: 200rpx;
	}

	.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: 20rpx;
		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: 10px;
		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;
	}

	.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;
	}

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

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

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

	}
</style>