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

<template>
  <view class="content">
	<top-title :titleValue="title" style="width: 100%;"></top-title>  
    <view class="page-section-spacing" style="width: 100%; position: relative">
      <swiper
        class="swiper"
        indicator-dots="false"
        autoplay="true"
        duration="500"
        style="height: 440rpx"
        @change="swiperChange"
      >
        <swiper-item
          v-for="(item, index) in swiperList"
          :key="index"
          class="swiper-content"
        >
          <image
            :src="item.pic_path"
            mode="aspectFill"
            style="width: 100%; height: 100%"
          ></image>
        </swiper-item>
      </swiper>
      <image src="../../static/Intersect.svg" class="groove-img"></image>
      <view class="rowDot">
        <view v-for="(item, index) in swiperList" :key="index" class="dots">
          <view
            :class="['dot', index === swiperCurrent ? 'active' : '']"
          ></view>
        </view>
      </view>
    </view>

    <view class="page-nav-box">
      <navigator
        v-for="(item, index) in navList"
        :key="index"
        :url="item.path"
        open-type="navigate"
        class="nav-content"
      >
        <image
          :src="item.url"
          mode="aspectFit"
          style="width: 38px; height: 38px"
        ></image>
        <view>{{ item.content }}</view>
      </navigator>
    </view>

    <view class="notice-box">
      <view class="notice-title-box">
        <view class="notice-font">通知公告</view>
        <view class="notice-more-font">
          <view style="margin-right: 8rpx; font-size: 22rpx" @click="goNotice"
            >更多</view
          >
          <image
            src="../../static/right-arrow-blue.png"
            mode="aspectFill"
            style="width: 12rpx; height: 16rpx"
          ></image>
        </view>
      </view>
      <view
        class="notice-content-box"
        style="justify-content: flex-start"
        v-for="(item, index) in noticeList"
        :key="index"
        @click="goNoticeDeatil(item.id)"
      >
        <image
          :src="item.icon"
          mode="aspectFit"
          style="width: 34px; height: 34px"
        ></image>
        <view class="notice-content display-around-column" style="width: 88%">
          <view class="notice-content-font" style="margin-left: 40rpx">{{
            item.title
          }}</view>
          <view class="notice-content-time" style="margin-left: 40rpx">{{
            item.publish_time | globalTime
          }}</view>
        </view>
      </view>
    </view>

    <view class="notice-box" style="margin-top: 40rpx">
      <view class="notice-title-box">
        <view class="notice-font">推荐园区</view>
        <navigator
          class="notice-more-font"
          url="../park/index"
          open-type="navigate"
        >
          <view style="margin-right: 8rpx; font-size: 22rpx">更多</view>
          <image
            src="/static/right-arrow-blue.png"
            mode="aspectFill"
            style="width: 12rpx; height: 16rpx"
          ></image>
        </navigator>
      </view>
      <view
        class="display-flex-start"
        style="overflow-x: scroll; overflow-y: hidden; position: relative"
      >
        <view
          class="park-box"
          v-for="(item, index) in parkList"
          :key="item.id"
          @click="goParkDetailFn(item.id)"
        >
          <image
            :src="item.park_pics[0].pic_path || '/static/park/1.png'"
            mode="aspectFill"
            style="
              width: 452rpx;
              height: 250rpx;
              border-radius: 32rpx 32rpx 0 0;
            "
          ></image>
          <view class="park-content-box">
            <view class="park-title">{{ item.name }}</view>
            <view class="park-address display-flex-start">
              <view class="display-flex-start" style="margin-right: 10rpx"
                ><image
                  src="/static/park/park-time.png"
                  mode="aspectFill"
                  class="park-title-img"
                ></image
                >{{ item.addtime | globalTime }}建成</view
              >
              <view class="display-flex-start"
                ><image
                  src="/static/park/park-name.png"
                  mode="aspectFill"
                  class="park-title-img"
                ></image
                >{{ item.manager }}</view
              >
            </view>
            <view class="park-footer-box display-between">
              <view class="display-between-column width-30">
                <view class="display-flex-start"
                  ><image
                    src="/static/park/park-num.png"
                    mode="aspectFill"
                    class="park-footer-img"
                  ></image
                  >{{ item.company_count }}</view
                >
                <view class="park-footer-font">企业数量</view>
              </view>
              <view class="display-between-column width-30">
                <view class="display-flex-start">
                  <image
                    src="/static/park/park-area.png"
                    mode="aspectFill"
                    class="park-footer-img"
                  ></image>
                  {{ item.cover_area
                  }}<text style="font-size: 12rpx">万㎡</text></view
                >
                <view class="park-footer-font">占地面积</view>
              </view>
              <view class="display-between-column width-30">
                <view class="display-flex-start">
                  <image
                    src="/static/park/park-area2.png"
                    mode="aspectFill"
                    class="park-footer-img"
                  ></image>
                  {{ item.building_area
                  }}<text style="font-size: 12rpx">万㎡</text></view
                >
                <view class="park-footer-font">建设面积</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="notice-box" style="margin-top: 20rpx">
      <view class="notice-title-box">
        <view class="notice-font">招商专区</view>
        <view class="notice-more-font">
          <view style="margin-right: 8rpx; font-size: 22rpx" @click="goAttract"
            >更多</view
          >
          <image
            src="/static/right-arrow-blue.png"
            mode="aspectFill"
            style="width: 12rpx; height: 16rpx"
          ></image>
        </view>
      </view>

      <view
        class="notice-content-box"
        v-for="(item, index) in attractList"
        :key="index"
        style="justify-content: start"
        @click="goAttractDeatil(item.id)"
      >
        <image
          :src="item.url"
          mode="aspectFit"
          style="width: 112rpx; height: 112rpx; margin-right: 20rpx"
        ></image>
        <view class="notice-content">
          <view class="notice-content-font">{{ item.title }}</view>
          <view class="attract-content">{{ item.subtitle }}</view>
          <view class="notice-content-time" style="margin-top: 20rpx">{{
            item.time
          }}</view>
        </view>
      </view>
    </view>

    <view class="notice-box" style="margin-top: 20rpx">
      <view class="notice-title-box">
        <view class="notice-font">区内活动</view>
        <view class="notice-more-font">
          <view style="margin-right: 8rpx; font-size: 22rpx">更多</view>
          <image
            src="/static/right-arrow-blue.png"
            mode="aspectFill"
            style="width: 12rpx; height: 16rpx"
          ></image>
        </view>
      </view>

      <view
        class="notice-content-box"
        v-for="(item, index) in activityList"
        :key="index"
        style="justify-content: start; padding: 30rpx 0 30rpx 30rpx"
      >
        <image
          :src="item.url"
          mode="aspectFit"
          style="width: 128rpx; height: 128rpx; margin-right: 20rpx"
        ></image>
        <view class="notice-content" style="width: 70%">
          <view class="notice-content-font" style="white-space: break-spaces">{{
            item.title
          }}</view>
          <view class="display-flex-start" style="margin-top: 20rpx">
            <view
              class="notice-content-time display-flex-start color-a7adba"
              v-show="item.isOnline"
              ><view class="online-box"></view>线上</view
            >
            <view
              class="notice-content-time display-flex-start color-a7adba"
              v-show="!item.isOnline"
              ><view class="offline-box"></view>线下</view
            >
            <view class="notice-content-time color-a7adba">{{
              item.department
            }}</view>
            <view class="notice-content-time color-a7adba">{{
              item.time
            }}</view>
          </view>
          <view class="display-flex-end" style="margin-top: 20rpx">
            <view class="notice-content-time">浏览 {{ item.browe }}</view>
            <view class="notice-content-time">分享 {{ item.share }}</view>
          </view>
        </view>
      </view>
    </view>
    <foot-tabs :selectedIndex="0"></foot-tabs>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import topTitle from '@/components/top-title/top-title.vue';
import footTabs from '@/components/foot-tabs/footTabs.vue';
export default {
	components: {
		'foot-tabs': footTabs,
		'top-title': topTitle
	},
  data() {
    return {
	  title:"空i企",
      swiperList: [
        {
          img: "/static/swiper/swiper1.jpg",
        },
        {
          img: "/static/swiper/swiper2.jpg",
        },
      ],
      swiperCurrent: 0,
      navList: [
        {
          url: "/static/navList/appeal.png",
          path: "/pages/appeal/index",
          content: "提诉求",
        },
        {
          url: "/static/navList/policy.png",
          path: "/pages/policy/index",
          content: "搜政策",
        },
        {
          url: "/static/navList/park.png",
          path: "/pages/park/index",
          content: "找园区",
        },
        {
          url: "/static/navList/activity.png",
          path: "/pages/activity/index",
          content: "找活动",
        },
        {
          url: "/static/navList/supply.png",
          path: "/pages/supply/index",
          content: "发供需",
        },
        {
          url: "/static/navList/enterprise.png",
          path: "/pages/enterprise/index",
          content: "查企业",
        },
        {
          url: "/static/navList/service.png",
          path: "/pages/service/index",
          content: "找服务",
        },
      ],
      noticeList: [
        // {
        //   url: "/static/navList/policy-icon.png",
        //   title: "政策速览 | 小微企业、个体工商户税费...",
        //   time: "2021-08-05",
        // },
        // {
        //   url: "/static/navList/activity-icon.png",
        //   title: "活动预告 | 想了解跨境电商？8月5日带...",
        //   time: "2021-08-04",
        // },
        // {
        //   url: "/static/navList/notice-icon.png",
        //   title: "通知公告 | 2022年首批次重点新材料扶...",
        //   time: "2021-08-03",
        // },
      ],
      parkList: [
        // {
        // 	url:'/static/park/1.png',
        // 	title:'华潮科技产业园',
        // 	time:'2015-10-25',
        // 	num:484,
        // 	area1:1.72,
        // 	area2:1.01
        // },
        // {
        // 	url:'/static/park/1.png',
        // 	title:'华潮科技产业园',
        // 	time:'2015-10-25',
        // 	num:484,
        // 	area1:1.72,
        // 	area2:1.01
        // },
        // {
        // 	url:'/static/park/1.png',
        // 	title:'华潮科技产业园',
        // 	time:'2015-10-25',
        // 	num:484,
        // 	area1:1.72,
        // 	area2:1.01
        // },
      ],
      attractList: [
        {
          url: "/static/attract/1.png",
          title: "工业互联网",
          subtitle: "工业互联网是全球工业系统与高级计算、分析、...",
          time: "2021-09-05",
        },
        {
          url: "/static/attract/2.png",
          title: "生产性服务业",
          subtitle: "生产性服务业是指为保持工业生产过程的连续性...",
          time: "2021-09-05",
        },
      ],
      activityList: [
        {
          url: "/static/activity/2.png",
          title: "400场讲座,200门课程,免费送上门!就等你申请",
          isOnline: 1,
          department: "区人力资源局",
          time: "2021-09-05",
          browe: "322",
          share: "2",
        },
        {
          url: "/static/activity/1.png",
          title: "智能制造商标品牌培育系列培训活动",
          isOnline: 0,
          department: "市场监督管理局",
          time: "2021-09-05",
          browe: "322",
          share: "2",
        },
      ],
    };
  },
  onShow() {
    uni.hideTabBar({});
  },
  onLoad() {
    this.getSwiperList();
    this.getPark();
    this.getNotice();
    //this.getAttract(); //招商接口
  },
  onShareAppMessage() {
    url: "/pages/index/index";
  },
  methods: {
    swiperChange(e) {
      this.swiperCurrent = e.detail.current;
    },
    getSwiperList() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=main_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("连接失败");
        },
      });
    },
    getPark() {
      let md5Sign = md5(
        "method=" +
          "park" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=park&source=park&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_show: 1,
          page: 1,
          page_size: 5,
        },
        success: (res) => {
          if (res.data.code === 200) {
            res.data.data.list.forEach((item) => {
              if (item.park_pics.length) {
                item.park_pics[0].pic_path =
                  getApp().globalData.shareUrl + item.park_pics[0].pic_path;
              }
            });
            this.parkList = res.data.data.list;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getNotice() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=notice&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_show: 1,
          // page: 1,
          // page_size: 5,
        },
        success: (res) => {
          if (res.data.code === 200) {
            // console.log(res.data.data.list);
            this.noticeList = res.data.data.list.map((item) => {
              switch (item.type) {
                case "1":
                  item.icon = "/static/navList/activity-icon.png";
                  item.title = "活动预告 | " + item.title;
                  break;
                case "2":
                  item.icon = "/static/navList/policy-icon.png";
                  item.title = "政策速览 | " + item.title;
                  break;
                case "3":
                  item.icon = "/static/navList/notice-icon.png";
                  item.title = "通知公告 | " + item.title;
                  break;
              }
              return item;
            });
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getAttract() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=business&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        page: 1,
        page_size: 5,
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          console.log(res);
          if (res.data.code === 200) {
            let list = res.data.data.list;
            this.attractList = list.map((item) => {
              /*
                  title: "生产性服务业",
                  subtitle: "生产性服务业是指为保持工业生产过程的连续性...",
                  time: "2021-09-05",
             */
              let ob = {
                url: "",
                subtitle: "",
                id: "",
                title: "",
              };
              ob.url = item.pic_url;
              ob.subtitle = item.desc;
              ob.id = item.id;
              ob.title = item.title;
              return ob;
            });
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    goParkDetailFn(id) {
      uni.navigateTo({
        url: "/pages/park/park_deatil?id=" + id,
      });
    },
    goNoticeDeatil(id) {
      uni.navigateTo({
        url: "/pages/notice/notice_deatil?id=" + id,
      });
    },
    goAttractDeatil(id) {
      uni.navigateTo({
        url: "/pages/attract/attract_deatil?id=" + id,
      });
    },
    goAttract() {
      uni.navigateTo({
        url: "/pages/attract/index",
      });
    },
    goNotice() {
      uni.navigateTo({
        url: "/pages/notice/index",
      });
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.groove-img {
  width: 100%;
  height: 100rpx;
  bottom: -22rpx;
  position: absolute;
}
.rowDot {
  display: flex;
  position: absolute;
  top: 310rpx;
  left: 80rpx;
}
.dots {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.dot {
  margin-right: 8rpx;
  width: 40rpx;
  height: 8rpx;
  opacity: 1;
  border-radius: 6rpx;
  background: #fff5f9;
}
.dot.active {
  background: #ff4e54;
}
.swiper-content {
  /* border-radius: 0 0 10% 10%; */
}
.page-nav-box {
  width: 80%;
  /* height: 320rpx; */
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 10rpx 30rpx 10rpx;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
  border-radius: 32rpx;
  position: absolute;
  top: 360rpx;
  background-color: #fff;
}
.nav-content {
  width: 25%;
  height: 130rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
  font-size: 22rpx;
  justify-content: space-around;
  letter-spacing: 0.02em;
  color: #0d1937;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 600;
}
.notice-box {
  width: 83%;
  margin-top: 320rpx;
  margin-bottom: 20rpx;
}
.notice-title-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}
.notice-font {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 600;
  font-size: 32rpx;
  letter-spacing: 0.02em;
  color: #0d1937;
}
.notice-more-font {
  font-size: 24rpx;
  color: #146afb;
  display: flex;
  align-items: center;
}

.notice-content-box {
  display: flex;
  padding: 30rpx;
  background-color: #ffffff;
  box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
  border-radius: 32rpx;
  margin-top: 20rpx;
  justify-content: space-between;
}
.notice-content-font {
  font-size: 26rpx;
  color: #0d1937;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice-content-time {
  font-size: 18rpx;
  letter-spacing: 0.02em;
  color: #cfcfcf;
  margin-right: 14rpx;
}
.park-box {
  border-radius: 32rpx;
  margin-right: 20rpx;
  position: relative;
  height: 450rpx;
}
.park-content-box {
  width: 394rpx;
  background-color: #ffffff;
  border-radius: 56rpx 0px 32rpx 32rpx;
  position: absolute;
  top: 210rpx;
  font-size: 24rpx;
  padding: 30rpx;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
}
.park-title {
  font-weight: 600;
  line-height: 36rpx;
  letter-spacing: 0.02em;
  color: #0d1937;
}
.park-address {
  font-weight: 600;
  font-size: 19rpx;
  letter-spacing: 0.02em;
  color: #cfcfcf;
  margin-top: 10rpx;
}
.park-title-img {
  width: 16rpx;
  height: 16rpx;
  margin-right: 4rpx;
}
.park-footer-box {
  margin-top: 30rpx;
}
.park-footer-img {
  width: 24rpx;
  height: 24rpx;
  margin-right: 6rpx;
}
.park-footer-font {
  color: #cfcfcf;
  font-size: 19rpx;
  margin-top: 10rpx;
}
.width-30 {
  width: 30%;
}
.attract-content {
  color: #697594;
  font-weight: 600;
  font-size: 20rpx;
  margin-top: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.online-box {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #589cff;
  margin-right: 5rpx;
}
.offline-box {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #ffcf86;
  margin-right: 5rpx;
}
.color-a7adba {
  color: #a7adba;
}
</style>