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

<template>
  <view class="content">
    <view class="swiper-box" style="width: 100%">
      <swiper
        class="swiper"
        indicator-dots="true"
        autoplay="true"
        duration="500"
        style="height: 300rpx"
      >
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image
            :src="item.pic_path"
            mode="aspectFill"
            style="width: 100%; height: 100%"
          ></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="input-box">
      <image src="/static/policy/u377.png" alt="" />
      <input
        type="text"
        placeholder="请输入政策关键词搜索"
        confirm-type="search"
        @confirm="searchPoliy()"
        v-model="searchVal"
        @focus="search"
      />
    </view>
    <view class="policy-box">
      <view class="policy-title"><p>最新政策</p></view>
      <view class="policy-item-box">
        <view
          v-for="(item, idx) in policyList"
          :key="idx"
          :class="{ active: active === idx }"
          class="policy-item-name"
          @click="changePolicyTabs(idx)"
        >
          {{ item }}
        </view>
      </view>
      <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"
                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>
          <view class="policy-content-item-img">
            <image :src="item.pic_url" alt="" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      swiperList: [],
      policyList: ["省级政策", "市级政策", "区级政策", "新城政策"],
      active: 0,
      searchVal: "",
      policyData: new Array(5).fill({
        title:
          "工业金额信息化部办公厅 组织开2021念工业互联网平台创新互联网工业文化产业项目征集工作。",
        moment: "2021-07-12",
        maxMony: "最高500.00万",
        leftDay: "剩5天",
        img: "/static/policy/u388.jpg",
      }),
    };
  },
  onLoad() {
    this.getPolicySwiper();
    this.getPolicyList();
  },
  methods: {
    search() {
      uni.redirectTo({
        url: "./search",
      });
    },
    enterPolicyDeatil(id) {
      uni.navigateTo({
        url: "/pages/policy/policy_deatil?id=" + id,
      });
    },
    changePolicyTabs(idx) {
      let that = this;
      that.active = idx;
      switch (idx) {
        case 0:
          that.getPolicyList("1");
          break;
        case 1:
          that.getPolicyList("2");
          break;
        case 2:
          that.getPolicyList("3");
          break;
        case 3:
          that.getPolicyList("4");
          break;
      }
    },
    getPolicySwiper() {
      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_pics&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          order_by: "weight desc",
          s_status: 1,
          // page: 1,
          // page_size: 7,
        },
        success: (res) => {
          console.log(res);
          if (res.data.code === 200) {
            res.data.data.list.forEach((item) => {
              item.pic_path = getApp().globalData.shareUrl + item.pic_path;
            });
            this.swiperList = res.data.data.list;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getPolicyList(level) {
      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: {
          s_level: level || "1", //1.省 2.市 3.区 4.新城
        },
        success: (res) => {
          console.log(res);
          if (res.data.code === 200) {
            res.data.data.list.forEach((item) => {
              item.pic_url = getApp().globalData.shareUrl + item.pic_url;
            });
            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: 26rpx;
      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: 28rpx;
        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: 27rpx;
      }
      .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;
        .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>