aluminium-trading-uniapp-240925/pages_order/components/address/redactAddress.vue

<template>
  <uv-popup round="40rpx" ref="addressPopup" :customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}">
    <view class="redact-address">
      <view class="redact-address-title">{{ title }}</view>

      <uv-form label-width="210rpx" :model="addressDetail" ref="form">
        <uv-form-item label="联系人" prop="name">
          <uv-input v-model="addressDetail.name" placeholder="请输入联系人姓名" border="none">
          </uv-input>
        </uv-form-item>

        <uv-form-item label="手机号" prop="phone">
          <uv-input v-model="addressDetail.phone" placeholder="请输入手机号" border="none">
          </uv-input>
        </uv-form-item>

        <uv-form-item label="所在地区" prop="address">
          <uv-input v-model="addressDetail.address" placeholder="请选择所在地区" border="none">
          </uv-input>
          <template #right>
            <view style="padding-right: 40rpx;color: #FBAB32;" @click.stop="selectAddr">
              <image src="../../static/address/selectIcon.png" mode="aspectFit"></image>
              定位
            </view>
          </template>
        </uv-form-item>

        <uv-form-item label="详细地址" prop="addressDetail">
          <uv-input v-model="addressDetail.addressDetail" placeholder="请输入详细地址" border="none">
          </uv-input>
        </uv-form-item>
      </uv-form>

      <view @click="onSubmit" class="save">{{ addressDetail.id ? '修改地址' : '新增地址' }}</view>

    </view>
  </uv-popup>
</template>

<script>
import Position from '@/utils/position.js'

export default {
  data() {
    return {
      addressDetail: {}
    }
  },
  props: {
    title: {
      type: String,
      default: '新增地址'
    }
  },
  methods: {
    open(addressDetail) {
      this.addressDetail = addressDetail
      this.$refs.addressPopup.open('bottom')
    },
    close() {
      this.$refs.addressPopup.close()
    },
    //新增和修改地址
    onSubmit() {
      let isOk = this.parameterVerification(this.addressDetail)
      if (isOk && !isOk.auth) {
        return uni.showToast({
          icon: 'none',
          title: isOk.title,
          'zIndex': 10000
        })
      }
      this.$emit('saveOrUpdate', this.addressDetail)
    },
    //验证用户参数合法性
    parameterVerification(addressDetaila) {
      let {
        name,
        phone,
        address,
        addressDetail
      } = addressDetaila
      if (name.trim() == '') {
        return {
          title: '请填写联系人',
          auth: false
        }
      } else if (phone.trim() == '') {
        return {
          title: '请填写手机号',
          auth: false
        }
      } else if (address.trim() == '') {
        return {
          title: '请填写所在地区',
          auth: false
        }
      } else if (addressDetail.trim() == '') {
        return {
          title: '请填写详细地址',
          auth: false
        }
      } else if (phone.trim() != '') {
        if (!this.$utils.verificationPhone(phone)) {
          return {
            title: '手机号格式不合法',
            auth: false
          }
        }
      }
      return {
        title: '验证通过',
        auth: true
      }
    },

    //地图上选择地址
    selectAddr() {
      Position.getLocation(res => {
        Position.selectAddress(res.longitude, res.latitude, success => {
          this.setAddress(success)
        })
      })
    },

    //提取用户选择的地址信息复制给表单数据
    setAddress(res) {
      //经纬度信息
      this.addressDetail.latitude = res.latitude
      this.addressDetail.longitude = res.longitude

      if (!res.address && res.name) { //用户直接选择城市的逻辑
        return this.addressDetail.address = res.name
      }
      if (res.address || res.name) {
        return this.addressDetail.address = res.address + res.name
      }
      this.addressDetail.address = '' //用户啥都没选就点击勾选
    },
  }
}
</script>

<style lang="scss" scoped>
.redact-address {
  box-sizing: border-box;

  .redact-address-title {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    color: #333333;
    font-weight: 600;
  }

  .save {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 80rpx;
    border-radius: 40rpx;
    color: white;
    font-size: 28rpx;
    margin: 0rpx auto;
    background: $uni-color;
    margin-top: 150rpx;
  }

  image {
    width: 25rpx;
    height: 25rpx;
  }


  //修改组件默认样式
  .uv-form {
    padding: 30rpx 0rpx;
  }

  &::v-deep .uv-cell {
    padding: 0rpx 0rpx;
    font-size: 26rpx;

    &::after {
      border: none !important;
    }

    .uv-field__label {
      display: flex;
      align-items: center;
      height: 80rpx;

    }

    .uv-field__control,
    .uv-field__right-icon {
      height: 80rpx;
      font-size: 26rpx;
      border-bottom: 2rpx solid #cbc8c8;
    }

    .uv-field__right-icon {
      display: flex;
      align-items: center;
      height: 78rpx;
      color: #5FCC9F;
    }

    .uv-cell__value {
      height: 120rpx;
    }

  }

  &::v-deep .uv-field__error-message {
    color: #5AC796;
    font-size: 20rpx;
    margin-top: 10rpx;
  }
}
</style>