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 class='friendcircle-content-right-item Regular flex align-item-center'>
							<image class='headportrait' src="../../static/img/add@3x.png" mode=""></image>中天昊元粮库中天昊元…
						</view>
						<view class='friendcircle-content-right-item Regular flex align-item-center'>
							<image class='headportrait' src="../../static/img/add@3x.png" mode=""></image>中天昊元粮库中天昊元…
						</view>
						<view class='friendcircle-content-right-item Regular flex align-item-center'>
							<image class='headportrait' src="../../static/img/add@3x.png" mode=""></image>中天昊元粮库中天昊元…
						</view>
						<view class='friendcircle-content-right-item Regular flex align-item-center'>
							<image class='headportrait' src="../../static/img/add@3x.png" mode=""></image>中天昊元粮库中天昊元…
						</view>
					</view>
				</view>
			</view>
			<scroll-view scroll-x="true" scroll-with-animation="true" class='list-type'>
				<view v-for='item in searchTypes' @click='mainBusinessTypecahnge(item)'
					:class='mainBusinessTypeKey==item.value?"Semibold active":"Regular"' class="typeitem">{{item.name}}
				</view>
			</scroll-view>
			<view v-for='item in datalist' @click='todetails(item)' class="listitem">
				<view class="flex">
					<image class='listitem-left' :src="item.attachmentAddress" mode=""></image>
					<view 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='naviageToPage("/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>
		<view v-if='datalist.length==0' class="enter" @click="enter">
			<image style='width:56.5px;height:28px;' src="../../static/img/liangmai/ruzhu.png" mode=""></image>
			<view class='enter-content'>入驻</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				position:{
					name:"未设置"
				} ,
				status: 0,
				mainBusinessType: '',
				mainBusinessTypeKey: '0',
				pageSize: 10,
				currentPage: 1,
				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'
					}
				],
				datalist: []
			}
		},
		onShow(val) {

			this.$api.doRequest('get', '/settledCompanyInfo/selectSettledCompanyInfo', {
				mainBusinessType: this.mainBusinessType,
				pageSize: this.pageSize,
				currentPage: this.currentPage,
				pcFlag: 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)
					}
					console.log(this.datalist)
					// let _metre = this.utils.getDistance(lat1,lng1,lat2,lng2) +"千米"
				}
			})
			uni.getStorage({
				key: 'setLocaltion',
				success: (res) => {
					console.log(res.data)
					this.position = res.data
					// uni.removeStorage({
					// 	key: 'setLocaltion'
					// })
				},

			})
		},
		onLoad(option) {
			if (option.position){
				this.position = option.position
				
			}
		},
		methods: {
			mainBusinessTypecahnge(item) {
				if (item.name != '全部') {
					this.mainBusinessType = item.name
				} else {
					this.mainBusinessType = ''
				}
				this.mainBusinessTypeKey = item.value
			},
			enter() {
				//入驻
				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
				})
			}
		}
	}
</script>

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

	/* 头部--》 */
	/* 《--定位 */
	.location {
		width: 15.5px;
		height: 17.5px;
		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: 110px;
		height: 124px;
	}

	.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: 12.5px;
		margin-bottom: 10px;
		width: 205.5px;
		font-size: 12px;
		padding: 3px 0;
	}

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

	/* 圈友说--》 */
	/* 《--类型 */
	.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: 98.5px;
		height: 96.5px;
		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;
	}

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

	/* 数据--》 */
	.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>