kgMini-new/pages/metrics/projectPage/index.vue

<template>
	
	<view class="content-box">
		
		<view class="policy-item-box">
		  <view v-for="(item, idx) in projectList" :key="idx"  :class="{ active: active === idx }"  class="policy-item-name" @click="changeProjectTabs(idx)">
		    {{ item }}
		  </view>
		</view>
		
		<view class="project-box">
			<view class="project-content display-around-column" v-for="(item, idx) in projectData" :key="idx" 
			:class="{ borderBottom: idx == projectData.length - 1 }" @click="enterProjectDeatil(item.id)">
				<view class="display-between items-center pos-class"  :class="{ marginTop20: active === 2 }" >
					<view style="font-size: 30rpx;">{{item.name}}</view>
					<image v-show="item.importent === '1'" src="/static/important_icon.png" mode="aspectFit" style="width:80rpx;height: 80rpx;"></image>
				</view>
				<view class="display-flex-start pos-class">
					<view class="left-title">业主名称</view>
					<view>{{item.owner}}</view>
				</view>
				<view class="display-flex-start pos-class" style="margin-bottom: 20rpx;" v-show="active !== 2">
					<view class="left-title">总投资</view>
					<view>{{item.investment_count || '-'}}(万元)</view>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import md5 from "@/common/md5.js";
	export default {
	  data() {
	    return {
	      swiperList: [],
	      projectList: ["在库", "技改", "在谈"],
	      active: 0,
	  //     projectData: new Array(5).fill({
	  //       title:"普汇中金生命科学国际合作中心",
	  //       name: "普汇中金国际控股有限公司",
	  //       maxMony: "160000（万元）",
			// id:'1'
	  //     }),
		  projectData:[],
		  dateYear:'',
		  dateMonth:''
	    };
	  },
	  onLoad(option) {
		  this.active = Number(option.idx)
		  this.dateYear = option.year
		  this.dateMonth = option.month
		  this.getProjectList(this.active,this.dateYear,this.dateMonth)
	  },
	  methods: {
	    enterProjectDeatil(id) {
			if(this.active == '2'){
				return
			}
	      uni.navigateTo({
			url:"/pages/metrics/projectPage/detail?id=" + id + '&year=' + this.dateYear + '&month=' + this.dateMonth
	      });
	    },
		getProjectList(tabVal,y,m){
			let tabObj = {
				0:'在库',
				1:'技改',
				2:'在谈'
			}
			let md5Sign = md5(
			  "method=" +
			    "stat" +
			    "&timestamp=" +
			    getApp().globalData.globalTimestamp +
			    "&secret=" +
			    getApp().globalData.secret
			);
			let url =
			  getApp().globalData.shareUrl +
			  "api/api.php" +
			  "?method=stat&action=project_list&timestamp=" +
			  getApp().globalData.globalTimestamp +
			  "&sign=" +
			  md5Sign;
			uni.request({
			  url: url,
			  method: "POST",
			  header: {
			    "content-type": "application/x-www-form-urlencoded",
			  },
			  data: {
				tab : tabObj[tabVal],
				year:y,
				month:m
			  },
			  success: (res) => {
			    if (res.data.code === 200) {
                       this.projectData = res.data.data
					   this.$forceUpdate();
			    }
			  },
			  fail: () => {
			    console.log("连接失败");
			  },
			});
		},
	    changeProjectTabs(idx) {
	      let that = this;
	      that.active = idx;
	      switch (idx) {
	        case 0:
	       that.getProjectList(idx,this.dateYear,this.dateMonth);
	          break;
	        case 1:
	       that.getProjectList(idx,this.dateYear,this.dateMonth);
	          break;
	        case 2:
	       that.getProjectList(idx,this.dateYear,this.dateMonth);
	          break;
	      }
	    },
	  },
	};
</script>

<style lang="scss">
	.content-box {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.policy-item-box {
	  display: flex;
	  justify-content: space-between;
	  margin: 0 20rpx;
	  margin-top: 20rpx;
	  .policy-item-name {
		    padding-bottom: 10rpx;
		    font-size: 30rpx;
		    width: 25%;
		    text-align: center;
	  }
	  .active {
	    font-weight: 600;
	    border-bottom: 7rpx solid #02a7f0;
	  }
	}
	.project-content {
		border-top: 1px solid #f2f2f2;
	}
	.pos-class {
		padding-left: 10rpx;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}
	.left-title {
		width: 20%;
		color: #7F7F7F;
		font-size: 26rpx;
	}
	.borderBottom {
		border-bottom: 1px solid #f2f2f2;
	}
	.marginTop20 {
		margin-top: 20rpx;
	}
</style>