yiliangyiyun-app/pages/grain_pulse/my_grain_pulse.vue

<template>
	<view style='margin-bottom:70px;'>
		<scroll-view  scroll-x="true" scroll-with-animation="true" class='list-type'>
			<view  v-for='item in searchTypes' @click='changetype(item)' :class='mainBusinessType==item.name?"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" v-if='mainBusinessType=="我的企业"'>
				<image class='listitem-left' :src="item.attachmentAddress" mode=""></image>
				<view class="listitem-right">
					<view class="flex justify-between">
						<view class="companyname Medium">{{item.compName}}</view>
						<view v-if='item.status=="待审核"' class='listitemStatus audit Regular'>审核中</view>
						<view v-if='item.status=="已驳回"' class='listitemStatus notPass Regular'>未通过</view>
						<view v-if='item.status=="已通过"' class='listitemStatus pass Regular'>已通过</view>
					</view>
					<view 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>
						<view v-if='item.showFlag==2' @click.stop='showHidden(item)' class="button Regular">显示</view>
						<view v-if='item.showFlag==1' @click.stop='showHidden(item)' class="button Regular">隐藏</view>
						<view @click.stop='edit(item)' class="button Regular">编辑</view>
						<view @click.stop='del(item)' class="button Regular">删除</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="flex">
					<image class='listitem-left' :src="item.attachmentAddress" mode=""></image>
					<view class="listitem-right">
						<view class="flex justify-between">
							<view class="companyname Medium">{{item.compName}}</view>
							<image style='width:12px;height:12px;' :src="status1?'../../static/img/liangmai/my_shoucang1.png':'../../static/img/liangmai/my_shoucang.png'" mode=""></image>
						</view>
						<view class='Regular introduce'>{{item.companyProfile}}</view>
					</view>
				</view>
				<view class="flex  align-item-center justify-between">
					<view 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 class='distance Regular'>{{item._metre}}</view>
				</view>
			</view>
		</view>
		<view style='padding:10px;text-align:center;' v-if='datalist.length==0'>
			当前暂无入驻的粮脉
		</view>
		<view v-show='mainBusinessType=="我的企业"' class='exitloginwrap'>
			<button @click.stop='enterclick()' class='exitlogin'>新增</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
        components: {
            
        },
		data() {
			return {
				status:0,
				mainBusinessType:'我的企业',
				pageSize: 10,
				currentPage: 1,
				datalist:[],
				status1:true,
				isLoadMore:false,
				position:{},
				searchTypes:[
				{name:'我的企业',value:'1'},{name:'我的收藏',value:'1'}
				],
			}
		},
		onPullDownRefresh() {
		    this.getList()
		     setTimeout(function () {
		         uni.stopPullDownRefresh();  //关闭下拉刷新
		     }, 1000);
		 },
		onShow(){
			this.getList()
			uni.getStorage({
			key: 'setLocaltion',
			success: (res) => {
				console.log(res.data)
				this.position = res.data
				// uni.removeStorage({
				// 	key: 'setLocaltion'
				// })
			},
		
		})
		},
		onLoad(){
			
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.currentPage += 1
			}
				this.getList()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		
		methods: {
			getList(){
				this.isLoadMore=true
				if(this.mainBusinessType=='我的企业'){
					this.$api.doRequest('get','/settledCompanyInfo/selectSettledCompanyInfo',{mainBusinessType:'',pageSize: this.pageSize,
							currentPage: this.currentPage,pcFlag:2,createPhone:this.userInfo.phone}).then(res => {
					if(res.data.code==200){
						this.isLoadMore=false
						this.datalist=res.data.data.records
						
					}
				})
				}else{
					this.$api.doRequest('get','/settledCompanyInfo/myCollection',{phone:this.userInfo.phone,pageSize:this.pageSize,
							currentPage: this.currentPage,pcFlag:2}).then(res => {
					if(res.data.code==200){
						this.datalist=res.data.data.records
						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)
						}
					}
					})
				}
			},
			del(item){
				this.$api.doRequest('post','/settledCompanyInfo/api/deleteSettledCompanyInfo',{id:item.id}).then(res => {
					if(res.data.code==200){
						this.$api.msg('删除成功')
					}else{
						this.$api.msg('删除失败')
					}
				})
			},
			edit(item){
				if(item.status=='已驳回'||item.status=='已通过'){
					uni.navigateTo({
						url:'/pages/grain_pulse/editcompany?id='+item.id
					})
				}
				
			},
			showHidden(item){
				this.$api.doRequest('post','/settledCompanyInfo/api/showHidden',{id:item.id}).then(res => {
					if(res.data.code==200){
						if(item.showFlag==1){
							item.showFlag=2
							this.$api.msg('隐藏成功')
						}else{
							item.showFlag=1
							this.$api.msg('显示成功')
						}
						
					}else{
						if(item.showFlag==1){
							this.$api.msg('隐藏失败')
						}else{
							this.$api.msg('显示失败')
						}
					}
				})
			},
			friendcircle(){
				uni.navigateTo({
					url:'/pages/grain_pulse/friendcircle'
				})
			},
			todetails(item) {
				uni.navigateTo({
					url: '/pages/grain_pulse/details?id=' + item.id
				})
			},
			naviageToPage(item){
				uni.navigateTo({
					url:item
				})
			},
			enterclick(){
				//入驻
				uni.navigateTo({
					url:'/pages/grain_pulse/enter'
				})
			},
			changetype(item){
				this.mainBusinessType=item.name
				this.getList()
			}
		}
	}
</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;
	}
	/* 内容--》 */
	/* 《--类型 */
	.list-type{
		background: #fff;
		width:100vw;
		padding-top:5px;
		height:49px;
		overflow-x: scroll;
		white-space: nowrap;
	}
	.typeitem{
		margin:10px;
		position:relative;
		display:inline-block;
		padding-bottom:10px;
		font-size:17px;
	}
	.typeitem.active:after{
		content:'';
		display:block;
		position:absolute;
		height:3px;
		bottom:0;
		background:#22C572;
		width:18px;
		left:50%;
		transform: translateX(-50%);
	}
	/* 类型--》 */
	/* 《--数据 */
	.listitem{
		background:#fff;
		margin:10px;
		padding:15px 19px;
		border-radius:10px;
	}
	.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;
		font-size:12px;
		margin-top:8px;
		padding:4px 9px;
	}
	.distance{
		color:#AFB3BF;
		padding:4px;
		margin-top:8px;
	}
	/* 数据--》 */
	.button{
		display:inline-block;
		border:1px solid #CDCDCD;
		padding:6px 15px;
		border-radius:15px;
		margin:5px 3px;
	}
	.listitemStatus{
		margin-left:2px;
	}
	.listitemStatus.audit{
		color:#FE6430;
	}
	.listitemStatus.notPass{
		color:#FB1E1E;
	}
	.listitemStatus.pass{
		color:#22C572;
	}
	.exitloginwrap{
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		padding-bottom:20px;
	}
	.exitlogin{
		width:90%;
		background:#22C572;
		border-radius:30px;
		color:#fff;
		font-size:17px;
	}
	.exitlogin:after{
		border:none;
	}
</style>