nxdt-uniapp/pages/newProject/newProjectAddress.vue

<template>
  <view>
    <Navbar title="新建工程地址" />
    <u-form
      class="form-container"
      labelPosition="left"
      :model="formData"
      ref="uForm"
      labelWidth="120"
      :labelStyle="{ fontWeight: 400, fontSize: '12px', color: 'rgba(15, 39, 75, 0.6)' }"
    >
      <!-- 工程地址 -->
      <u-form-item label="工程地址" prop="proAddress" borderBottom required v-if="!showMap">
        <u-input
          v-model="formData.proAddress"
          placeholder="请输入工程地址"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="200"
        />
      </u-form-item>

      <!-- 经度 -->
      <u-form-item label="经度" prop="longitude" borderBottom required v-if="!showMap">
        <u-input
          v-model="formData.longitude"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="999"
          disabled
          disabledColor="#ffffff"
        />
        <div class="right-icon" slot="right" @click="selectLatitudeLongitude">
          <div>请选择</div>
          <u-icon name="arrow-right" size="12" />
        </div>
      </u-form-item>

      <!-- 纬度 -->
      <u-form-item label="纬度" prop="latitude" borderBottom required v-if="!showMap">
        <u-input
          v-model="formData.latitude"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="999"
          disabled
          disabledColor="#ffffff"
        />
        <div class="right-icon" slot="right" @click="selectLatitudeLongitude">
          <div>请选择</div>
          <u-icon name="arrow-right" size="12" />
        </div>
      </u-form-item>

      <u-button type="primary" shape="circle" @click="submitForm" style="margin-top: 68px" v-if="!showMap">
        保存
      </u-button>
    </u-form>
    <!-- 地图 -->
    <Map v-if="showMap" @getLatitudeLongitude="getLatitudeLongitude" />
  </view>
</template>

<script>
import Map from './Map.vue'
import { addAddress, checkIsExistAddress } from '@/api/project'

export default {
  components: { Map },
  data() {
    return {
      isLoading: false,
      formData: {
        // 工程地址
        proAddress: '',
        // 经度
        longitude: '',
        // 纬度
        latitude: ''
      },
      showMap: false
    }
  },
  mounted() {},
  methods: {
    async submitForm() {
      console.log('submitForm')
      if (!this.formData.proAddress || !this.formData.longitude || !this.formData.latitude) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      const res = await checkIsExistAddress({proAddress: this.formData.proAddress})
      console.log('🚀 ~ submitForm ~ res:', res)
      if (this.isLoading) return
      this.isLoading = true
      console.log('submitForm', this.formData)
      uni.showLoading({
        title: '加载中'
      })
      addAddress(this.formData)
        .then(res => {
          console.log('addAddress', res)
          if (res.code === 200) {
            uni.showToast({
              title: '操作成功',
              icon: 'success'
            })
            setTimeout(() => {
              uni.navigateBack()
              uni.hideLoading()
              this.isLoading = false
            }, 1000)
          }
        })
        .catch(err => {
          console.log('🚀 ~ addAddress ~ err:', err)
          uni.hideLoading()
          this.isLoading = false
        })
    },
    // 选择经纬度
    selectLatitudeLongitude() {
      console.log('selectLatitudeLongitude')
      this.showMap = true
    },
    // 获取经纬度
    getLatitudeLongitude(val) {
      console.log('🚀 ~ getLatitudeLongitude ~ val:', val)
      this.formData.longitude = val[0].longitude
      this.formData.latitude = val[0].latitude
      this.formData.proAddress = val[0].projectAddress
      this.showMap = false
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  margin: 0 25px;

  .right-icon {
    margin-left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(15, 39, 75, 0.4);
    font-size: 12px;
    line-height: 16px;
  }
}
</style>