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 2">
          <div class="noticeTag">物业</div>
          <div class="noticeInfo">新年伊始，PAER招商开始啦啦啦啦啦啦</div>
          <div class="noticeTime">1小时前</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 === '活动'"></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">
        <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 } from "@/js_sdk/http";
export default {
  components: {
    Activity,
    vanRate,
    dynamic,
  },
  name: "enterpriseSide",
  data() {
    return {
      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/companyHouse/companyHouse",
        },
        {
          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/companyHouse/companyHouse",
        },
      ],
    };
  },
  methods: {
    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;
    },
  },
};
</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;
        }
        .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>