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

<template>
  <view class="content">
    <view class="input-box">
      <image src="/static/policy/u377.png" alt="" />
      <input type="text" placeholder="请输入政策关键词搜索" confirm-type="search" @confirm="searchPoliy()" 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)"
        >
          <view class="policy-content-item-left">
            <p class="policy-content-item-left-title" style="height: 70rpx;">{{ item.title }}</p>
            <view class="policy-content-item-left-time">
              <p class="moment">{{ item.publish_time | globalTime }}</p>
              <p class="maxMony">{{ item.project_money }}</p>
              <p class="leftDay">{{ (item.project_end_date | globalTime) || '长期可申报' }}</p>
            </view>
          </view>
          <view class="policy-content-item-img">
            <image :src="'https://kiq.xazhima.com'+item.pic_url" alt="" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      active: 0,
	    searchVal:'',
      policyData: [],
    };
  },
  methods: {
    enterPolicyDeatil(id) {
      uni.navigateTo({
        url: "/pages/policy/policy_deatil?id=" + id,
      });
    },
	searchPoliy(){
		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:this.searchVal   //1.省 2.市 3.区 4.新城
				},
				success: (res) => {
          if (res.data.code === 200) {
            this.policyData = res.data.data.list
            console.log(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: 26rpx;
      padding-left: 80rpx;
      box-sizing: border-box;
    }
  }
  .policy-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    .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;
        .policy-content-item-left {
          display: flex;
          flex-direction: column;
          width: 70%;
          .policy-content-item-left-title {
            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: 25rpx;
            margin-bottom: 10rpx;
          }
          .policy-content-item-left-time {
            width: 100%;
            display: flex;
            align-items: center;
            .moment {
              color: #c1c1c1;
              font-size: 20rpx;
              margin-right: 20rpx;
            }
            .maxMony {
              font-size: 20rpx;
              color: #00bfbf;
              border: 1px solid #00bfbf;
              padding: 10rpx;
              margin-right: 20rpx;
              border-radius: 12rpx;
            }
            .leftDay {
              font-size: 20rpx;
              background: #f7bbc3;
              color: #e32579;
              padding: 10rpx;
              border: 1px solid #f7bbc3;
              border-radius: 12rpx;
            }
          }
        }
        .policy-content-item-img {
          image {
            width: 180rpx;
            height: 120rpx;
            border-radius: 12rpx;
          }
        }
      }
    }
  }
}
</style>