jiliangxiaochengxu/components/companiesRegistered/companiesInformation.vue

<!-- @format -->

<template>
  <view class="container">
    <view style="color: #3c9cff" class="informationTitle">企业信息</view>
    <view class="informationContent">
      <view class="contentItems">
        <u-form>
          <view class="content">
            <view class="title">单位类别 </view>
            <view class="message">{{ formdData.companiesOrcResult.type }}</view>
          </view>
          <view class="content">
            <view class="title">统一社会信用代码 </view>
            <view class="message">{{
              formdData.companiesOrcResult.regNum
            }}</view>
          </view>
          <view class="content">
            <view class="title">单位名称</view>
            <view class="message">{{ formdData.companiesOrcResult.name }}</view>
          </view>
          <!-- <view class="content">
          <view class="title">登录用户名</view>
          <view class="message">{{ formdData.companiesOrcResult.regNum }}</view>
        </view> -->
          <view
            class="content"
            style="
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <view class="title">单位所属区域 </view>
            <view>
              <vvSelectArea
                :list="areas"
                v-model="formdData.companiesOrcResult.region"
                placeholder="请选择所在区域"
              ></vvSelectArea>
            </view>
          </view>

          <view class="content">
            <view class="title">单位注册地址</view>
            <view class="message">{{
              formdData.companiesOrcResult.address
            }}</view>
          </view>
          <view class="content">
            <view class="title">法人代表/负责人</view>
            <view class="message">{{
              formdData.companiesOrcResult.person
            }}</view>
          </view>
          <view
            class="content"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <view class="title">单位地理位置</view>
            <u-icon
              v-if="!formdData.companiesOrcResult.location"
              @click="handleGetMap"
              name="map-fill"
              color="#2979ff"
              size="28"
            ></u-icon>
            <view v-else @click="handleGetMap" class="message">
              {{ formdData.companiesOrcResult.location }}
            </view>
          </view>
          <view class="content">
            <view class="title">单位通讯地址</view>
            <view class="message">{{
              formdData.companiesOrcResult.postalAddress
            }}</view>
          </view>
        </u-form>
      </view>
    </view>
  </view>
</template>

<script>
import vvSelectArea from "@/components/vv-select-area/vv-select-area";
import { getRegiong } from "@/api/personRegistered";
export default {
  components: {
    vvSelectArea,
  },
  async created() {
    try {
      let { data } = await getRegiong();
      this.areas = data;
    } catch (error) {}
  },
  data() {
    return {
      show: true,
      areas: [], // 地址list
    };
  },
  props: {
    formdData: {
      type: Object,
      default: () => ({}),
    },
  },

  methods: {
    //获取位置
    handleGetMap() {
      uni.authorize({
        scope: "scope.userLocation",
        success: (res) => {
          uni.chooseLocation({
            success: (res) => {
              this.$emit(
                "update:formdData",
                Object.assign({
                  ...this.formdData,
                  companiesOrcResult: {
                    ...this.formdData.companiesOrcResult,
                    location: `${res.latitude},${res.longitude}`,
                    postalAddress: res.address,
                  },
                })
              );

              // console.log("位置名称：" + res.name);
              // console.log("详细地址：" + res.address);
              // console.log("纬度：" + res.latitude);
              // console.log("经度：" + res.longitude);
            },
          });
        },
        fail(err) {},
      });
    },
  },
};
</script>

<style lang="scss">
.informationTitle {
  margin-bottom: 30rpx;
  font-size: 30;
}

.contentItems {
  width: 100%;
  border-radius: 6px;
  background: #fff;
  margin: 0rpx auto 30rpx;
  padding: 20rpx 30rpx 20rpx;

  .content {
    border-bottom: 1px solid rgb(242, 242, 242);
    padding: 30rpx 0;
    display: flex;
    justify-content: space-between;
  }

  .content:last-child {
    border-bottom: none;
  }

  .title {
    font-size: 30rpx;
    color: black;
    letter-spacing: 3rpx;
  }

  .message {
    text-align: right;
    width: 380rpx;
    font-size: 30rpx;
    color: rgb(146, 146, 146);
    white-space: nowrap;
    /* 禁止文本换行 */
    overflow: hidden;
    /* 隐藏超出容器的文本 */
    text-overflow: ellipsis;
    /* 使用省略号表示被截断的文本 */
  }
}
</style>