yiliangyiyun-app/pages/grain_pulse/my_grain_pulse.vue

<template>
	<view>
		<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-for='item in datalist' 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>
					<view class='companylocation flex align-item-center Regular'>
						<image class='location' src="../../static/img/liangmai/icon_ditu.png" mode=""></image>
						辽宁省营口市鲅鱼圈区xx路108号
					</view>
					<view>
						<view class="button Regular">隐藏</view>
						<view class="button Regular">编辑</view>
						<view class="button Regular">删除</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="flex">
					<image class='listitem-left' src="../../static/img/authentication/bankup(2).png" mode=""></image>
					<view class="listitem-right">
						<view class="flex justify-between">
							<view class="companyname Medium">中天昊元粮库中天昊元粮库</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'>我是企业介绍我是企业介绍我是企业介绍我是</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>
						辽宁省营口市鲅鱼圈区xx路108号
					</view>
					<view class='distance Regular'>50m</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
        components: {
            
        },
		data() {
			return {
				status:0,
				mainBusinessType:'我的企业',
				pageSize: 10,
				currentPage: 1,
				datalist:[],
				status1:true,
				searchTypes:[
				{name:'我的企业',value:'1'},{name:'我的收藏',value:'1'}
				],
			}
		},
		onShow(){
			this.getList()
			
		},
		onLoad(){
			
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			getList(){
				if(this.mainBusinessType=='我的企业'){
					this.$api.doRequest('get','/settledCompanyInfo/selectSettledCompanyInfo',{mainBusinessType:'',pageSize: this.pageSize,
							currentPage: this.currentPage,pcFlag:2}).then(res => {
					if(res.data.code==200){
						this.datalist=res.data.data.records
					}
				})
				}else{
					this.$api.doRequest('get','/settledCompanyInfo/myCollection',{commonId:this.userInfo.id,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
					}
					})
				}
			},
			friendcircle(){
				uni.navigateTo({
					url:'/pages/grain_pulse/friendcircle'
				})
			},
			todetails(){
				uni.navigateTo({
					url:'/pages/grain_pulse/details'
				})
			},
			naviageToPage(item){
				uni.navigateTo({
					url:item
				})
			},
			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 5px;
	}
	.listitemStatus{
		margin-left:2px;
	}
	.listitemStatus.audit{
		color:#FE6430;
	}
	.listitemStatus.notPass{
		color:#FB1E1E;
	}
	.listitemStatus.pass{
		color:#22C572;
	}
</style>