settle_down_wx/pages/index/components/enterpriseSide.vue

<template>
  <div class="enterpriseSide">
    <div style="padding: 0 24rpx; background: white">
      <div class="searchTop">
        <image :src="locationIcon" class="locationIcon"></image>
        <picker
          @change="bindPickerChange"
          :value="index"
          :range="array"
          range-key="groupName"
        >
          <input v-model="selectGroup.groupName" class="searchArea" disabled />
        </picker>
        <image :src="dhIcon" class="dhIcon" @tap="toMap"></image>
        <image :src="vector" class="vector"></image>
      </div>
      <div class="parkBgBox">
        <swiper
          :indicator-dots="false"
          circular
          style="height: 320rpx; position: relative"
          @change="changeImg"
          autoplay
        >
          <swiper-item v-for="item in envList">
            <img :src="item.imgUrl" class="swiperImg" />
            <div class="parkNameBox">{{ item.activityName }}</div>
          </swiper-item>
        </swiper>
      </div>
      <div class="map2">
        <div
          class="mapdom2"
          style="float: left"
          v-for="(item, index) in mapList"
          :key="index"
          @click="jumpPage(item.path, item.isMustCompany)"
        >
          <img class="mapIcon2" :src="item.url" />
          <div class="maptxt">{{ item.label }}</div>
        </div>
      </div>
    </div>
    <div class="noticeBody">
      <image :src="tongzhi" class="tongzhiImg"></image>
      <div class="columLine"></div>
      <div class="noticeBox">
        <div
          class="noticeItem"
          v-for="item in noticeList"
          @click="toNotice(item)"
        >
          <div class="noticeTag">{{ item.type == "1" ? "园区" : "物业" }}</div>
          <div class="noticeInfo">{{ item.title }}</div>
          <div class="noticeTime">{{ item.time }}</div>
        </div>
      </div>
    </div>
    <div class="parkDynamic">
      <div class="parkDynamicTitle">
        <div class="columLineBlue"></div>
        <div class="titleName">园区动态</div>
      </div>
      <div class="parkDynamicTab">
        <div
          v-for="(item, index) in tabList"
          :key="index"
          class="tabItem"
          :class="selectTab === item.name ? 'selectTabItem' : ''"
          @click="clickTab(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <activity v-show="selectTab === '活动'" :faMsg="faMsg"></activity>
      <dynamic v-show="selectTab === '动态'"></dynamic>
    </div>
    <div class="serviceEvaluation">
      <div class="parkDynamicTitle">
        <div class="columLineBlue"></div>
        <div class="titleName">服务评价</div>
      </div>
      <div class="wyInfo">
        <div class="wyName">
          <image :src="wyhead" class="wyhead"></image>
          <span>XXXX物业</span>
        </div>
        <span style="color: #666666; font-size: 28rpx">好评率：100%</span>
      </div>
      <div class="evaluationBox" @tap="toServiceEva">
        <div class="evaluationBoxName">点击笑脸给出您对园区服务的评价</div>
        <van-rate
          :value="value"
          :size="32"
          color="#ffd21e"
          :void-icon="voidMyIcon"
          :icon="myIcon"
          gutter="32rpx"
          void-color="#eee"
          bind:change="onChange"
        />
      </div>
    </div>
    <div class="contactInfo">
      <div class="infoBox">
        <span class="infoTitle">客服电话（24小时）</span>
        <span class="phoneNumber">{{ phone }}</span>
      </div>
      <image :src="phoneCall" class="phoneCall" @tap="call"></image>
    </div>
  </div>
</template>

<script>
import vanRate from "../../../wxcomponents/weapp/dist/rate/index";
import dynamic from "./dynamic.vue";
import Activity from "./activity.vue";
import {
  getUserPower,
  getUserLocalStorageInfo,
  newNotice,
  getUserMainHouseKeeper,
  activityList,
  ParkInfoControllerListAll,
  getByGroupId,
} from "@/js_sdk/http";
export default {
  components: {
    Activity,
    vanRate,
    dynamic,
  },
  name: "enterpriseSide",
  data() {
    return {
      phone: "0510-680**808",
      selectGroup: {},
      noticeList: [],
      faMsg: "home",
      locationIcon:
        "https://www.idea-co-sf.com/gardenProduct/image/locationIcon.png",
      dhIcon: "https://www.idea-co-sf.com/gardenProduct/image/dhIcon.png",
      vector: "https://www.idea-co-sf.com/gardenProduct/image/Vector.png",
      tongzhi: "https://www.idea-co-sf.com/gardenProduct/image/tongzhi.png",
      wyhead: "https://www.idea-co-sf.com/gardenProduct/image/wyHead.png",
      myIcon: "https://www.idea-co-sf.com/gardenProduct/image/icon.png",
      voidMyIcon: "https://www.idea-co-sf.com/gardenProduct/image/voidIcon.png",
      phoneCall: "https://www.idea-co-sf.com/gardenProduct/image/phoneCall.png",
      value: "5",
      searchArea: "当前园区名称",
      index: 0,
      array: [],
      // parkBg: "https://www.idea-co-sf.com/gardenProduct/image/parkBg.png",
      envList: [
        // {url:"https://www.idea-co-sf.com/gardenProduct/image/parkBg.png"},
        // {url:"https://www.idea-co-sf.com/gardenProduct/image/parkBg.png"}
      ],
      tabList: [
        { name: "活动" },
        { name: "周边" },
        { name: "房源" },
        { name: "动态" },
      ],
      selectTab: "活动",
      pages: {
        pageSize: 10000,
        pageNum: 1,
        statusStr: "1,2",
      },
      mapList: [
        {
          label: "待办提醒",
          url: "https://www.idea-co-sf.com/gardenProduct/image/dbtxIcon.png",
          // path: "/pages/subPackages/companyHouse/companyHouse",
        },
        {
          label: "企业账单",
          url: "https://www.idea-co-sf.com/gardenProduct/image/qyzdIcon.png",
          path: "/pages/subPackages/enterPriseBill/index",
          isMustCompany: true,
        },
        {
          label: "经发填报",
          url: "https://www.idea-co-sf.com/gardenProduct/image/jftbIcon.png",
          path: "/pages/subPackages/economicDevelopmentReport/economic",
          isMustCompany: true,
        },
        {
          label: "园区周边",
          url: "https://www.idea-co-sf.com/gardenProduct/image/yqzb.png",
          path: "/pages/subPackages/peripheralService/index",
        },
        {
          label: "报事报修",
          url: "https://www.idea-co-sf.com/gardenProduct/image/bsbxIcon.png",
          path: "/pages/subPackages/reportRepair/index",
          isMustCompany: true,
        },
        {
          label: "活动报名",
          url: "https://www.idea-co-sf.com/gardenProduct/image/hdbmIcon.png",
          path: "/pages/subPackages/parkActivity/index",
          // isMustCompany: true,
        },
        {
          label: "入驻申请",
          url: "https://www.idea-co-sf.com/gardenProduct/image/rzsqIcon.png",
          path: "/pages/subPackages/companyHouse/companyHouse",
        },
        {
          label: "退租申请",
          url: "https://www.idea-co-sf.com/gardenProduct/image/tzsqIcon.png",
          path: "/pages/subPackages/companyHouse/companyHouse",
          isMustCompany: true,
        },
        {
          label: "关于园区",
          url: "https://www.idea-co-sf.com/gardenProduct/image/gyyqIcon.png",
          path: "/pages/subPackages/aboutThePark/index",
        },
        {
          label: "产业政策",
          url: "https://www.idea-co-sf.com/gardenProduct/image/cyzcIcon.png",
          path: "/pages/subPackages/industrialPolicy/index",
        },
        {
          label: "资源预约",
          url: "https://www.idea-co-sf.com/gardenProduct/image/zyyyIcon.png",
          path: "/pages/subPackages/resourceReservation_manage/index",
        },
      ],
    };
  },
  mounted() {
    // this.getNotice()
    // this.getActiveList();
    // this.getParkList();
    // this.getInfoByGroupId()
    // this.getHouseKeeper()
  },
  methods: {
    changeImg(index) {
      // this.current = index.detail.current+1
    },
    call() {
      uni.makePhoneCall({
        phoneNumber: this.phone, // 电话号码
        success: function () {
          console.log("拨打电话成功");
        },
        fail: function () {
          console.log("拨打电话失败");
        },
      });
    },
    getParkList() {
      ParkInfoControllerListAll().then((res) => {
        this.array = res;
        if (uni.getStorageSync("selectGroup")) {
          this.selectGroup = JSON.parse(uni.getStorageSync("selectGroup"));
        } else {
          this.selectGroup = res[0];
          wx.setStorageSync("selectGroup", JSON.stringify(res[0]));
        }
        // this.getInfoByGroupId();
      });
    },
    getInfoByGroupId() {
      const data = {
        groupId: JSON.parse(uni.getStorageSync("selectGroup")).groupId,
      };
      getByGroupId(data).then((res) => {
        this.briefImg = JSON.parse(res.briefImg);
        console.log("this.briefImg", this.briefImg);
        this.briefImg.forEach((item) => {
          console.log("item", item);
          this.envList.push({ imgUrl: item.url });
        });
      });
      console.log("this.envList", this.envList);
    },
    getActiveList() {
      activityList(this.pages).then((res) => {
        if (res.data.total > 0) {
          res.data.rows.forEach((item) => {
            this.envList.push({
              ...item,
              imgUrl: JSON.parse(item.annex)[0].url,
            });
          });
        }
        console.log("this.envList", this.envList);
      });
    },
    //获取管家
    getHouseKeeper() {
      let reqData = {
        userId: getUserLocalStorageInfo().userId,
      };
      getUserMainHouseKeeper(reqData).then((res) => {
        if (res.key == "200") {
          // console.log('res.data:开始')
          // console.log(res.data)
          // console.log('res.data:结束')
          if (res.data != null) {
            this.houseKeeper = res.data;
          }
        }
      });
    },
    toMap() {
      uni.openLocation({
        latitude: this.selectGroup.latitude,
        longitude: this.selectGroup.longitude,
        success: function () {
          console.log("success");
        },
      });
      // uni.getLocation({
      //   type: 'gcj02', //返回可以用于uni.openLocation的经纬度
      //   success: function (res) {
      //     const latitude = res.latitude;
      //     const longitude = res.longitude;
      //
      //   }
      // });
    },
    getNotice() {
      newNotice().then((res) => {
        if (res.code == "409") {
          uni.clearStorageSync();
          uni.reLaunch({
            url: "/pages/login/login",
          });
        }
        if (res.data) {
          const newNotice = res.data;
          newNotice.forEach((e) => {
            e.time = this.showtime(e.releaseTime);
          });
          this.noticeList.push(...res.data);
        }
      });
    },
    showtime(time) {
      const date =
        typeof time === "number"
          ? new Date(time)
          : new Date((time || "").replace(/-/g, "/"));
      const diff = (new Date().getTime() - date.getTime()) / 1000;
      const dayDiff = Math.floor(diff / 86400);
      const isValidDate =
        Object.prototype.toString.call(date) === "[object Date]" &&
        !isNaN(date.getTime());

      if (!isValidDate) {
        window.console.error("不是有效日期格式");
      }
      const formatDate = function (date) {
        const today = new Date(date);
        const year = today.getFullYear();
        const month = ("0" + (today.getMonth() + 1)).slice(-2);
        const day = ("0" + today.getDate()).slice(-2);
        const hour = today.getHours();
        const minute = today.getMinutes();
        const second = today.getSeconds();
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      };

      if (isNaN(dayDiff) || dayDiff < 0) {
        return formatDate(date);
      }
      return (
        (dayDiff === 0 &&
          ((diff < 60 && "刚刚") ||
            (diff < 120 && "1分钟前") ||
            (diff < 3600 && Math.floor(diff / 60) + "分钟前") ||
            (diff < 7200 && "1小时前") ||
            (diff < 86400 && Math.floor(diff / 3600) + "小时前"))) ||
        (dayDiff === 1 && "昨天") ||
        (dayDiff < 7 && dayDiff + "天前") ||
        (dayDiff < 31 && Math.ceil(dayDiff / 7) + "周前") ||
        (dayDiff >= 31 && Math.ceil((dayDiff - 30) / 31) + "月前")
      );
    },
    toServiceEva() {
      uni.navigateTo({
        url: "/pages/subPackages/serviceEvaluation/index",
      });
    },
    toNotice(item) {
      // 跳转传参
      uni.navigateTo({
        url: "/pages/subPackages/propertyNotice/index?type=" + item.type,
      });
    },
    bindPickerChange(e) {
      this.selectGroup = this.array[e.detail.value];
      wx.setStorageSync(
        "selectGroup",
        JSON.stringify(this.array[e.detail.value])
      );
    },
    jumpPage(path, isMustCompany) {
      console.log(path);
      if (isMustCompany && getUserLocalStorageInfo().userType == 3) {
        uni.showModal({
          title: "提示",
          cancelText: "暂不",
          confirmText: "去切换",
          content: "您还不是企业用户，请切换登录身份后再进行相关操作。",
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/login2/login",
                success: function (e) {
                  // uni.$emit('userType', 'OK')
                },
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      } else {
        uni.navigateTo({
          url: path,
          fail: (fail) => {
            console.log(fail);
          },
        });
      }
    },
    clickTab(item) {
      // this.selectTab = item.name;
      if (item.name === "周边") {
        uni.navigateTo({
          url: "/pages/subPackages/peripheralService/index",
        });
      } else if (item.name === "房源") {
        uni.navigateTo({
          url: "/pages/subPackages/housingResources/index",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.enterpriseSide {
  background: #f5f7fa;
  .searchTop {
    //margin: 24rpx;
    background: white;
    position: relative;
    display: flex;
    align-items: center;
    .searchArea {
      position: relative;
      width: 532rpx;
      height: 64rpx;
      background: #f5f7fa;
      border-radius: 32rpx;
      padding-left: 68rpx;
      font-size: 28rpx;
    }
    .locationIcon {
      position: absolute;
      width: 28rpx;
      height: 28rpx;
      left: 24rpx;
      z-index: 10;
    }
    .dhIcon {
      width: 48rpx;
      height: 48rpx;
      margin-left: 16rpx;
    }
    .vector {
      position: absolute;
      width: 16rpx;
      height: 8rpx;
      left: 552rpx;
    }
  }
  .parkBgBox {
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 702rpx;
    height: 320rpx;
    margin-top: 24rpx;
    .parkNameBox {
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      height: 64rpx;
      background: rgba(3, 19, 41, 0.6);
      display: flex;
      align-items: center;
      padding-left: 24rpx;
      bottom: 0;
      color: white;
      font-size: 28rpx;
      border-radius: 0 0 16rpx 16rpx;
      z-index: 1000;
    }
  }
  .map2 {
    box-sizing: border-box;
    //position: absolute;
    z-index: 2;
    width: 100%;
    //height: 770rpx;
    //border-radius: 48rpx 48rpx 0rpx 0rpx;
    background: white;
    //margin-top: 402rpx;
    padding: 36rpx 0 0 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .mapIcon2 {
    width: 92rpx;
    height: 92rpx;
    display: block;
    margin: auto;
  }
  .mapdom2 {
    height: 184rpx;
  }
  .noticeBody {
    padding: 24rpx 28rpx;
    background: white;
    display: flex;
    align-items: center;
    margin: 24rpx 0;
    .tongzhiImg {
      width: 86rpx;
      height: 96rpx;
    }
    .columLine {
      width: 2rpx;
      height: 80rpx;
      background: #e7eaf0;
      margin: 0 16rpx;
    }
    .noticeBox {
      display: flex;
      flex-direction: column;
      .noticeItem {
        display: flex;
        align-items: center;
        margin: 8rpx 0;
        .noticeTag {
          width: 56rpx;
          height: 30rpx;
          background: #ffffff;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          border: 2rpx solid #0365f9;
          color: #0365f9;
          font-size: 22rpx;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .noticeInfo {
          width: 326rpx;
          font-size: 24rpx;
          color: #18172a;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin: 0 24rpx;
        }
        .noticeTime {
          color: #666666;
          font-size: 24rpx;
        }
      }
    }
  }
  .parkDynamic {
    width: 100%;
    background: white;
    padding: 24rpx;
    box-sizing: border-box;
    .parkDynamicTab {
      display: flex;
      padding: 26px 0;
      .tabItem {
        color: #666666;
        font-size: 28rpx;
        margin: 0 32rpx;
      }
      .selectTabItem {
        color: #18172a;
        border-bottom: 6rpx solid #034df7;
      }
    }
  }
  .serviceEvaluation {
    width: 100%;
    background: white;
    padding: 24rpx;
    box-sizing: border-box;
    margin-top: 24rpx;
    .wyInfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .wyName {
        display: flex;
        align-items: center;
        font-size: 36rpx;
        color: rgba(24, 23, 42, 1);
        margin: 38rpx 8rpx 24rpx 8rpx;
        .wyhead {
          width: 88rpx;
          height: 88rpx;
          margin-right: 24rpx;
        }
      }
    }
    .evaluationBox {
      width: 702rpx;
      height: 196rpx;
      //margin: 24rpx;
      padding: 42rpx 0 42rpx 48rpx;
      background: #f5f7fa;
      border-radius: 8rpx;
      box-sizing: border-box;
      .evaluationBoxName {
        font-size: 28rpx;
        color: #18172a;
        margin-bottom: 32rpx;
      }
    }
  }

  .contactInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 48rpx;
    box-sizing: border-box;
    background: white;
    margin: 4rpx 0 74rpx 0;
    .infoBox {
      display: flex;
      flex-direction: column;
      .infoTitle {
        color: #666666;
        font-size: 28rpx;
        margin-bottom: 16rpx;
      }
      .phoneNumber {
        color: #18172a;
        font-size: 40rpx;
        font-weight: 600;
      }
    }
    .phoneCall {
      width: 88rpx;
      height: 88rpx;
    }
  }

  .columLineBlue {
    width: 10rpx;
    height: 32rpx;
    background: linear-gradient(180deg, #509fff 0%, #034df7 100%);
    border-radius: 1px 1px 1px 1px;
    margin-right: 16rpx;
  }
  .titleName {
    color: #18172a;
    font-size: 36rpx;
    font-weight: 500;
  }
  .parkDynamicTitle {
    display: flex;
    align-items: center;
  }
  .swiperImg {
    width: 702rpx;
    height: 320rpx;
  }
}
</style>