konggang-city-miniprogram/pages/policy/search.vue

<template>
  <view class="content">
    <view class="input-box">
      <image src="/static/policy/u377.png" alt=""  @click="searchPolicy(searchVal)"/>
      <input type="text" placeholder="请输入政策关键词搜索" confirm-type="search" @confirm="searchPolicy()" v-model="searchVal"/>
    </view>
     <view class="policy-box">
      <view class="policy-content">
        <view class="policy-content-item"   v-for="(item, idx) in policyData" :key="idx" @click="enterPolicyDeatil(item.id)"  >
            <p class="policy-content-item-left-title" style="height: 86rpx">
              {{ item.title }}
            </p>
            <view class="policy-content-item-left-time">
              <p class="moment">{{ item.publish_time | globalTime }}</p>
              <p class="maxMony" v-if="item.project_money!=='-' && item.project_money ">{{ item.project_money }}</p>
              <p class="leftDay" v-if=" item.project_end_date && Math.floor( new Date( new Date(item.project_end_date).getTime() -new Date().getTime() ).getTime() /(1 * 24 * 60 * 60 * 1000) ) +1 >= 1">
                剩{{ Math.floor(new Date(new Date(item.project_end_date).getTime() -new Date().getTime()).getTime() /(1 * 24 * 60 * 60 * 1000)) + 1}}天
              </p>
              <p class="leftDay"  v-if="item.project_end_date && Math.floor(new Date(new Date(item.project_end_date).getTime() - new Date().getTime()).getTime() / (1 * 24 * 60 * 60 * 1000)) + 1 < 1 ">
                申报结束
              </p>
              <p class="leftDay" v-if="!item.project_end_date">长期可申报</p>
            </view>
      <!--    <view class="policy-content-item-img">
            <image :src="item.pic_url" alt="" mode="aspectFill"/>
          </view> -->
        </view>
      </view>
    </view>
     <image src="../../static/nodata.svg" mode="aspectFit" style="width: 100%;" v-if="policyData.length === 0"></image> 
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      active: 0,
	  searchVal:'',
      policyData: [],
    };
  },
  onLoad(option) {
	 if(option.val){
	   this.searchPolicy(option.val) 
	 } 
  },
 //  onBackPress(event){
	//  uni.navigateBack();
	// },
  methods: {
    enterPolicyDeatil(id) {
      uni.navigateTo({
        url: "/pages/policy/policy_deatil?id=" + id,
      });
    },
	searchPolicy(val){
		let md5Sign = md5(
		  "method=" +
		    "common" +
		    "&timestamp=" +
		    getApp().globalData.globalTimestamp +
		    "&secret=" +
		    getApp().globalData.secret
		);
		let url = getApp().globalData.shareUrl +"api/api.php" +"?method=common&source=policy&action=list&timestamp=" +getApp().globalData.globalTimestamp +"&sign=" +md5Sign;
			  uni.request({
				url: url,
				method: "POST",
				header: {
				  "content-type": "application/x-www-form-urlencoded",
				},
				data: {
				  ss_content_text:val || this.searchVal   //1.省 2.市 3.区 4.新城
				},
				success: (res) => {
          if (res.data.code === 200) {
            this.policyData = res.data.data.list
				  }
				},
				fail: () => {
				  console.log("连接失败");
				},
		});
	},
  },
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  .input-box {
    width: 100%;
    height: 100rpx;
    background-color: #02a7f0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    image {
      position: absolute;
      left: 72rpx;
      width: 30rpx;
      height: 30rpx;
    }
    input {
      background-color: #ffffff;
      width: 90%;
      height: 70%;
      border-radius: 50rpx;
      padding: 3rpx;
      font-size: 28rpx;
      padding-left: 80rpx;
      box-sizing: border-box;
    }
  }
  .policy-box {
    margin-top: 50rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    .policy-title {
      width: 100%;
      p {
        background-color: #02a7f0;
        width: 190rpx;
        height: 70rpx;
        color: #ffffff;
        border-radius: 0 40rpx 40rpx 0rpx;
        font-size: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .policy-item-box {
      display: flex;
      justify-content: space-between;
      margin: 0 20rpx;
      margin-top: 20rpx;
      .policy-item-name {
        padding-bottom: 10rpx;
        font-size: 30rpx;
      }
      .active {
        font-weight: 600;
        border-bottom: 7rpx solid #02a7f0;
      }
    }
    .policy-content {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      margin-top: 10rpx;
      .policy-content-item {
        margin: 0 20rpx;
        display: flex;
        box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
        border-radius: 32rpx;
        padding-bottom: 10rpx;
        margin-top: 20rpx;
        padding: 30rpx;
        justify-content: space-between;
		align-items: center;
		flex-direction: column;
          .policy-content-item-left-title {
			width: 100%;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 32rpx;
            margin-bottom: 10rpx;
          }
          .policy-content-item-left-time {
            width: 100%;
            display: flex;
            align-items: center;
            .moment {
              color: #c1c1c1;
              font-size: 24rpx;
              margin-right: 20rpx;
			  white-space: nowrap;
            }
            .maxMony {
              font-size: 24rpx;
              color: #00bfbf;
              border: 1px solid #00bfbf;
              padding: 10rpx;
              margin-right: 20rpx;
              border-radius: 12rpx;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  white-space: nowrap;
			  // width: 46%;
			  // text-align: center;
            }
            .leftDay {
              font-size: 24rpx;
              background: #f7bbc3;
              color: #e32579;
              padding: 10rpx;
              border: 1px solid #f7bbc3;
              border-radius: 12rpx;
			  white-space: nowrap;
            }
          }
        .policy-content-item-img {
          image {
            width: 170rpx;
            height: 120rpx;
            border-radius: 12rpx;
          }
        }
      }
    }
  }
}
</style>