ZhiHuiJiaoWu_UniApp/pages/market/my/firm_info.vue

<!--企业信息-->
<template>
  <view class="assemble">
    <view style="height: 30rpx;"></view>

    <scroll-view
        class="ul"
        scroll-y="true"
        :lower-threshold="lowerThreshold"
        @scrolltolower="loadMoreData_1"
        style="height: 80vh;"
    >
      <view class="li" v-for="(v,k) in tableList" :key="k">
        <!--企业图-->
        <view class="section_1">
          <image class="pic" v-if="v.campus_preview_image" :src="v.campus_preview_image" mode="aspectFit"></image>
        </view>

        <view class="title_section">基本信息</view>
        <view class="section_2">
          <view class="item">
            <view class="title">企业名称</view>
            <view class="content">{{v.campus_name}}</view>
          </view>

          <view class="item">
            <view class="title">企业地址</view>
            <view class="content">{{v.campus_address}}</view>
          </view>
        </view>


        <view class="title_section">企业地图</view>
        <view class="section_3">
          <view class="map_box">
            <map
                :id="`shopMap_${k}`"
                :latitude="v.campus_coordinates_arr.lat"
                :longitude="v.campus_coordinates_arr.lng"
                :markers="getMarkers(k,v)"
                :scale="15"
                :show-location="false"
                style="width: 90%; height: 400rpx;"
            ></map>
          </view>
        </view>

        <view class="title_section">企业介绍</view>
        <view class="section_4">
          <view class="html" v-html="v.
campus_introduction"></view>
        </view>
      </view>
    </scroll-view>








  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

	export default {
		data() {
			return {
        dataInfo:{},//企业信息

        loading:false,//加载状态
        lowerThreshold: 100,//距离底部多远触发
        isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
        //筛选条件
        filteredData:{
          personnel_id:'',
        },
        //数据列表
        tableList:[],

        //地图相关
        //地图控件
        mapControls:{
          position:{

          },
        }
			}
		},
    onShow(){
		  this.init()
    },
		methods: {
		  //初始化
      async init(){
        await this.getUserInfo()
        await this.getPersonnelCampus()
      },

      //获取用户信息
      async getUserInfo(){
        let res = await apiRoute.getPersonnelInfo({})
        if (res.code != 1) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }
        this.filteredData.personnel_id = res.data.id//员工id

      },

      //获取校区信息
      async getPersonnelCampus(){
        let params = {...this.filteredData}
        let res = await apiRoute.common_getPersonnelCampus(params)
        if(res.code != 1){
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }

        this.tableList = res.data
        console.log(123,this.tableList)
      },

      // 获取标记点
      getMarkers(id,item) {
        return [{
          id: id,
          latitude: item.campus_coordinates_arr.lat,
          longitude: item.campus_coordinates_arr.lng,
          name: item.campus_address,
          iconPath: '/static/icon-img/ding_wei.png'
        }];
      },

		}
	}
</script>

<style lang="less" scoped>
	.assemble{
		width: 100%;
		min-height: 100vh;
		background: #333333;
    color: #fff;
	}

  .ul{
    display: flex;
    flex-direction: column;
    gap: 40rpx;
    .li{
      border-top: 1px solid #434544;
      .section_1{
        .pic{
          width: 100%;
          height: 300rpx;
        }
      }
      .title_section{
        padding: 20rpx 40rpx;
        color: #fff;
        font-size: 24rpx;
      }
      .section_2{
        background-color: #434544;
        display: flex;
        flex-direction: column;
        .item{
          padding: 40rpx;
          padding-left: 40rpx;
          display: flex;
          gap: 30rpx;
        }
      }
      .section_3{
        padding: 20rpx 22rpx;
        .html{
          color: #fff;
        }
        .map_box{
          color: #fff;
          display: flex;
          justify-content: center;
        }
      }
      .section_4{
        padding: 20rpx 22rpx;
        padding-bottom: 250rpx;
        .html{
          color: #fff;
        }
      }
    }
    .li:nth-child(1){
      border: 0px solid #434544;
    }
  }
</style>