konggang-city-miniprogram/pages/metrics/largeScale/index.vue

<template>
	<view class="content-box">
		
		<view class="uni-list title-date-box" style="border: none;">
			<view class="uni-list-cell">
				<view class="uni-list-cell-db display-flex-start" style="padding-left: 10rpx;">
					<picker :range="arraySort" :value="sortSelect"  @change="bindSortChange" class="picker-class" style="width: 35%;">
						<view class="uni-input display-between items-center" style="color: #707070;">{{sortSelect}}<image src="/static/arrow_down.svg" mode="aspectFit"></image></view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="companys">
		  <!-- <view>推荐企业</view> -->
		  <view  v-for="(company, index) in companyList" :key="index" @click="toDetail(company.id)" class="company">
			<!-- <image src="/static/selfCenter/add-icon.png" mode="aspectFit" class="addIcon"></image> -->
		    <view class="title">
		      <view class="logo">
		        <!-- <image :src="globalUrl + company.pic_url" alt="" class="logo-img" mode="aspectFit"/> -->
				<image src="/static/nodata.svg" alt="" class="logo-img" mode="aspectFit"/>
		      </view>
		      <view class="name display-around-column" style="align-items: flex-start;">
		         <view>{{ company.name }}</view>
				 <!-- <view class="isAdvanced" v-show="index === 0">先进制造业</view> -->
		      </view>
		    </view>
		    <view class="info">
		      <view class="view">
		        <view class="info_t">亩均排序</view>
		        <view class="name">
		          {{ company.representative }}
		        </view>
		      </view>
		      <view class="line"></view>
		      <view class="view">
		        <view class="info_t">总产值</view>
		        {{ company.capital }}(亿元)
			<!-- 	 <text v-if="company.capital_type == '1'">美元</text>
				 <text v-else>人民币</text> -->
		      </view>
		      <view class="line"></view>
		      <view class="view">
		        <view class="info_t">产值增速</view>
		        {{ company.found_date }}
		      </view>
		    </view>
		  </view>
		</view>
		
		
		
	</view>
</template>

<script>
	import md5 from "@/common/md5.js";
	export default {
	  data() {
		  return{
			  arraySort:['全部','一至当月产值','当月产值','一至当月产值增速','当月产值增速','亩均排序'],
			  sortSelect:'一至当月产值',
			  companyList: [],
			  globalUrl:getApp().globalData.shareUrl,
		 }
	  },
	  onLoad(option) {
		uni.setNavigationBarTitle({
			title: option.title
		})  
	    this.getCompany();
	  },
	  methods:{
		  bindSortChange(e){
			  this.sortSelect = this.arraySort[e.target.value]
		  },
		  toDetail(id){
			  console.log(id)
			  uni.navigateTo({
			  	url:'./detail' + '?id=' + id
			  })
		  },
		  getCompany() {
		    let md5Sign = md5(
		      "method=" +
		        "common" +
		        "&timestamp=" +
		        getApp().globalData.globalTimestamp +
		        "&secret=" +
		        getApp().globalData.secret
		    );
		    let url =
		      getApp().globalData.shareUrl +
		      "api/api.php" +
		      "?method=common&source=company&action=list&timestamp=" +
		      getApp().globalData.globalTimestamp +
		      "&sign=" +
		      md5Sign;
		    let postData = {
		      s_pub: "1",
		  	order_by : "weight desc,id desc"
		    };
		    uni.request({
		      url: url,
		      method: "POST",
		      header: {
		        "content-type": "application/x-www-form-urlencoded",
		      },
		      data: postData,
		      success: (res) => {
		        if (res.data.code === 200) {
		          let list = res.data.data.list;
		          console.log(res.data.data.list);
		          list.forEach((e, i) => {
		            let { pic_url, name, representative, capital, capital_type, found_date, id } = e;
		            list[i] = {
		              pic_url,
		              name,
		              representative,
		              capital,
		  			capital_type,
		              found_date,
		              id,
		            };
		          });
		          this.companyList = list;
		        }
		      },
		      fail: () => {
		        console.log("连接失败");
		      },
		    });
		  },
	  }
	};
</script>

<style lang="scss">
	.content-box {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.title-date-box {
		margin-top: 10px;
		border-bottom: 1px solid #d7d7d7;
		padding-bottom: 10px;
	}
	.picker-class {
		border-radius: 10rpx;
		padding: 10rpx;
		width: 180rpx;
		font-size: 28rpx;
		background: #f5f5f5;
		margin-left: 20rpx;
	}
	.picker-class image {
		width: 26rpx;
		height: 26rpx;
	}
	.isAdvanced {
		background-color: #F59A23;
		color: #fff;
		padding: 5rpx;
		font-size: 26rpx;
		border-radius: 5rpx;
		margin-top: 8rpx;
	}
	.companys {
	  // margin-top: 3%;
	  padding: 0 4%;
	  .company {
	    border-radius: 20rpx;
	    box-shadow: rgba(0, 0, 0, 0.35) 0rpx 5rpx 15rpx;
	    padding: 2%;
	    margin: 3% 0;
		position: relative;
		.addIcon{
			 width: 60rpx;
			 height: 60rpx;
			 position: absolute;
			 right: 20rpx;
		 }
	    .title {
	      display: flex;
	      align-items: center;
	      .logo {
	        margin-right: 30rpx;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        overflow: hidden;
	        width: 150rpx;
	        height: 100rpx;
	        overflow: hidden;
	        .logo-img {
	          max-width: 100%;
	          max-height: 100%;
	        }
	      }
	    }
	    .line {
	      width: 2rpx;
	      height: 70rpx;
	      background: rgb(175, 186, 197);
	    }
	    .info {
	      font-size: 24rpx;
	      font-weight: 100;
	      display: flex;
	      text-align: center;
	      justify-content: space-around;
	      align-items: center;
	      padding: 0 2%;
	      margin-top: 2%;
	      .view {
	        margin-top: 2%;
	        font-size: 26rpx;
	        // .name {
	        //   color: #02a7f0;
	        // }
	        .info_t {
	          margin-bottom: 10rpx;
	        }
	      }
	    }
	  }
	}
</style>