JiangningUrbanManageApp/sub-public/enterprise-new-info/enterprise-new-info.vue

<template>
  <view>
    <u-loadmore
      v-if="flag"
      :status="startStatus"
      :load-text="newLoadText"
      color="#C4CCD8"
      font-size="24"
    />
    <view v-else class="container-main">
      <view class="mapBox">
        <map
          style="height: 100%; width: 100%"
          :show-compass="true"
          :scale="scale"
          
          :markers="markers"
        ></map>
      </view>
      <popup
        @movePercentage="movePercentage"
        :isMiddle="true"
        :topSpac="40"
        :bottomSpac="92"
        :middleSpace="900"
      >
        <view slot="header">
          <view class="dragFather">
            <view class="drag"></view>
          </view>
          <view class="tabList">
            <view
              id="childElement"
              :class="current == index ? 'changeColor' : ''"
              v-for="(item, index) in list"
              :key="index"
              @click="change(index)"
            >
              {{ item.name }}
              <view class="bottomBorder" v-if="current == index"></view>
            </view>
          </view>
        </view>
        <view class="tabBox" slot="fooder">
          <view class="btn" @click="open()">导航</view>
          <view class="btn" id="message" @click="toMessage()">留言</view>
          
        </view>
      </popup>
    </view>
  </view>
</template>

<script>


import popup from "@/uni_modules/danH-threeDrawer/components/danH-threeDrawer/danH-threeDrawer.vue";
export default {
  data() {
    return {
      baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
      //地图缩放级别
      scale: 10,
      markers: [],
      //开始进入时的loading变量
      startStatus: "nomore",
      newLoadText: {
        nomore: "数据加载失败",
        loading: "努力加载中",
      },
      //地图标记点
      //最上层tab切换的数组
      list: [
        {
          name: "基本信息",
        },
        {
          name: "信用信息",
        },
        {
          name: "监管信息",
        },
        {
          name: "产品信息",
        },
      ],
      //最上层tab切换的切换索引
      current: 0,
      //信用信息的切换索引
      detailsList: [
        {
          name: "许可信息",
        },
        {
          name: "失信信息",
        },
        {
          name: "处罚信息",
        },
      ],
      //信用信息的切换索引
      cur: 0,
      newList: {},
      flag: false,
      display: true,
      loadText: {
        nomore: "已经到底了~",
        loading: "努力加载中",
      },
      //查询是否是示范企业和投保记录
      queryData: {
        code: "",
        // enterpriseName:''
      },
      //查询评价个数
      pj: {
        code: "",
        enterpriseName: "",
        pageSize: 1,
        pageNum: 1,
        type: 2,
      },
      //示范企业的显示
      show: false,
      //投保记录的显示
      look: false,
      one: null,
      two: null,
      three: null,
      four: null,
      //企业的评分
      gradeNum: 0,
      //评论总个数
      total: 0,
      //弹出框的高度468
      popupHeight: 468,
    };
  },
  components: {

    popup,
  },
  onLoad(e) {
    console.log(e);
    this.queryData.code = e.uniscid;
    // this.getIndexDetails()
  },
  onShow() {
    this.change(0);
  },
  methods: {
    //接收
    movePercentage(e) {
      this.popupHeight = e.height;
    },
    touchmoveHandle() {},
    touchstartHandle() {},
    touchendHandle() {},
    toMessage() {
      uni.navigateTo({
        url: `/sub-public/addMessage/addMessage`,
      });
    },
    //调起导航软件
    open() {
      if (this.newList.latitude && this.newList.longitude) {
        uni.openLocation({
          latitude: parseFloat(this.newList.latitude),
          longitude: parseFloat(this.newList.longitude),
          name: this.newList.mainName,
        });
      } else {
        uni.showToast({
          title: "暂无位置信息",
          icon: "error",
        });
      }
    },
    //请求进页面的详情
    getIndexDetails() {
  
    },
    //查询评价的个数
    pjSize(e) {
     
    },
    change(index) {
      this.current = index;
      if (index == 0) {
        this.display = true;
      } else if (index == 1) {
      } else if (index == 2) {
      } else if (index == 3) {
      }
    },
    detailsTab(index) {
      this.cur = index;
    },

    clickPingjia() {
     
    },
  },
};
</script>

<style lang="scss" scoped>
//tab切换
.tabList {
  display: flex;
  height: 90rpx;
  width: 100%;
  padding-top: 10rpx;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;

  #childElement {
    width: 25%;
    line-height: 70rpx;
    text-align: center;
    position: relative;
    color: #616367;
  }

  .changeColor {
    font-weight: 600;
    color: #34373b !important;
  }

  .bottomBorder {
    position: absolute;
    top: 58rpx;
    left: 72rpx;
    height: 8rpx;
    width: 45rpx;
    background: linear-gradient(270deg, #4daaf0 0%, #3976f1 100%);
    border-radius: 8rpx;
  }
}

.container-main ::v-deep .deep {
  position: relative;

  .dragFather {
    position: absolute;
    top: -40rpx;
    height: 35rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .drag {
      width: 20%;
      opacity: 0.4;
      z-index: 999;
      border-radius: 10rpx;
      height: 15rpx;
      background-color: #000000;
    }
  }
}

.container-main {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  padding: 0;

  .mapBox {
    height: calc(100vh - 88rpx + 820rpx);
    transform: translateY(-820rpx);
    position: relative;
  }

  .tabBox {
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: column;

    .btn {
      width: 100rpx;
      position: absolute;
      right: 1%;
      top: -190rpx;
      background-color: #3976f1;
      line-height: 60rpx;
      text-align: center;
      height: 60rpx;
      border: none;
      font-size: 28rpx;
      color: white;
      border-radius: 40rpx;
    }

    #message {
      right: 5%;
      top: 700rpx;
      z-index: 1000;
    }

    .tabMain {
      height: 100%;
      background-color: rgb(245, 247, 251);
    }
  }

  .tabContainer {
    // background-color: #fff;
    position: relative;

    header {
      display: flex;
      height: 160rpx;
      width: 100%;

      .headerLeftBox {
        width: 35%;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .headerRightBox {
        width: 65%;
        padding-left: 22rpx;

        .titleText {
          color: #34373b;
          font-weight: 600;
          font-size: 32rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .grade {
          display: flex;
          color: #ed7043;
          height: 70rpx;
          align-items: center;
          font-size: 28rpx;

          .score {
            margin-left: 6rpx;
          }

          .pL {
            font-size: 26rpx;
            margin-left: 32rpx;
          }
        }

        .demonstrateBox {
          width: 100%;

          section {
            border: none;
            padding: 4rpx 15rpx;
            font-size: 24rpx;
            height: 40rpx;
            float: left;
            line-height: 40rpx;
            border-radius: 10rpx;
          }

          & > section:nth-of-type(1) {
            background-color: #ecf3ff;
            color: #3976f1;
            margin-right: 15rpx;
          }

          & > section:nth-of-type(2) {
            background-color: #defaf4;
            color: #08c49d;
          }

          &:after {
            content: "";
            display: block;
            clear: both;
          }
        }
      }
    }

    footer {
      box-sizing: border-box;
      margin-top: 28rpx;

      .data-rows {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #ecf1f7;
        box-sizing: border-box;
        padding: 24rpx 0;
        font-size: 30rpx;
        font-weight: 400;

        .data-lable {
          min-width: 150rpx;
          color: #34373b;
        }

        .data-value {
          flex: 1;
          color: #616367;
        }
      }
    }
  }

  .details {
    // box-sizing: border-box;
    padding: 20rpx 26rpx 0 26rpx;

    .details-tab-header {
      width: 100%;
      margin: 0 auto;
      background-color: white;
      display: flex;
      // padding: 25rpx 0;
      border-radius: 15rpx;
      margin: 0 0 20rpx 0;

      & > view {
        height: 70rpx;
        line-height: 70rpx;
        flex: 1;
        color: #616367;
        font-size: 28rpx;
        text-align: center;
      }

      & > view:nth-of-type(2) {
        position: relative;

        &:after {
          position: absolute;
          left: 0;
          top: 20rpx;
          content: "";
          height: 25rpx;
          width: 2rpx;
          background-color: #dce3ec;
        }

        &::before {
          position: absolute;
          right: 0;
          top: 20rpx;
          content: "";
          height: 25rpx;
          width: 2rpx;
          background-color: #dce3ec;
        }
      }
    }

    .details-tab-footer {
      // .list-tab{
      // 	overflow: hidden;
      // }
    }
  }
}

//tab切换更改的字体颜色
.color {
  color: #3976f1 !important;
}

// ::v-deep .uni-scroll-view {
// 	overflow: visible !important;
// }
</style>