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)"
        >
          <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";
export default {
  components: {
    Activity,
    vanRate,
    dynamic
  },
  name: "enterpriseSide",
  data(){
    return{
      locationIcon:require('../image/locationIcon.png'),
      dhIcon:require('../image/dhIcon.png'),
      vector:require('../image/Vector.png'),
      tongzhi:require('../image/tongzhi.png'),
      wyhead:require('../image/wyHead.png'),
      myIcon:require('../image/icon.png'),
      voidMyIcon:require('../image/voidIcon.png'),
      phoneCall:require('../image/phoneCall.png'),
      value:'5',
      searchArea: '当前园区名称',
      index: 0,
      array:['中国', '美国', '巴西', '日本'],
      parkBg:require('../image/parkBg.png'),
      tabList:[
        {name:'活动' },
        {name:'周边' },
        {name:'房源' },
        {name:'动态' },
      ],
      selectTab:'活动',
      mapList: [
        {
          label: "待办提醒",
          url: require("../image/dbtxIcon.png"),
          path: "/pages/subPackages/companyHouse/companyHouse",
        },
        {
          label: "企业账单",
          url: require("../image/qyzdIcon.png"),
          path: "/pages/subPackages/companyHouse/companyHouse",
        },
        {
          label: "经发填报",
          url: require("../image/jftbIcon.png"),
          path: "/pages/subPackages/companyHouse/companyHouse",
        },
        {
          label: "园区周边",
          url: require("../image/yqzb.png"),
          path: "/pages/subPackages/companyHouse/companyHouse",
        },
        {
          label: "报事报修",
          url: require("../image/bsbxIcon.png"),
          path: "/pages/subPackages/companyHouse/companyHouse",
        },
        {
          label: "活动报名",
          url: require("../image/hdbmIcon.png"),
          path: "/pages/subPackages/companyHouse/companyHouse",
        },
        {
          label: "入驻申请",
          url: require("../image/rzsqIcon.png"),
          path: "/pages/subPackages/companyHouse/companyHouse",
        },
        {
          label: "退租申请",
          url: require("../image/tzsqIcon.png"),
          path: "/pages/subPackages/companyHouse/companyHouse",
        },
        {
          label: "关于园区",
          url: require("../image/gyyqIcon.png"),
          path: "/pages/subPackages/companyHouse/companyHouse",
        },
      ],
    }
  },
  methods:{
    bindPickerChange(e){
      console.log(e)
      this.searchArea = this.array[e.detail.value]
    },
    jumpPage(path) {
      uni.navigateTo({
        url: path,
        fail: (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.60);
          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>