product_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">
          <input v-model="searchArea" class="searchArea" disabled />
        </picker>
        <image :src="dhIcon" class="dhIcon"></image>
        <image :src="vector" class="vector"></image>
      </div>
      <div class="parkBgBox" :style="{ 'background-image': `url(${parkBg})` }">
        <div class="parkNameBox">这里是园区名称</div>
      </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">0510-680**808</span>
      </div>
      <image :src="phoneCall" class="phoneCall"></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} from "@/js_sdk/http";
export default {
  components: {
    Activity,
    vanRate,
    dynamic,
  },
  name: "enterpriseSide",
  data() {
    return {
      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",
      tabList: [
        { name: "活动" },
        { name: "周边" },
        { name: "房源" },
        { name: "动态" },
      ],
      selectTab: "活动",
      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/companyHouse/companyHouse",
          // 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()
  },
  methods: {
    getNotice(){
      newNotice().then(res=>{
        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) {
      console.log(e);
      this.searchArea = 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;
    }
  }
  .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;
  }
}
</style>