platform-customsdeclaration-ssr/components/clientPage/addressAlert.vue

<template>
  <alert @closeAlert="closeAlert" :AlertTitle="AlertTitle" v-if="showAlert">
    <ul class="form-list">
      <li class="clearfix">
        <div class="pull-left name"><span v-if="IslookOrUpdate !== 'look'">*</span>联系人姓名</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="请输入联系人姓名" v-model="chooseItem.name" clearable class="input-text">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.name}}</div>
          </template>
        </div>
      </li>

      <li class="clearfix">
        <div class="pull-left name"><span v-if="IslookOrUpdate !== 'look'">*</span>联系电话</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="请输入联系电话" v-model="chooseItem.telephone" clearable class="input-text" type="number">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.telephone}}</div>
          </template>
        </div>
      </li>
      <li class="clearfix">
        <cityarea :data="area" @setup="setup" :IslookOrUpdate="IslookOrUpdate"></cityarea>
      </li>
      <li class="clearfix">
        <div class="pull-left name"><span v-if="IslookOrUpdate !== 'look'">*</span>详细地址</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="建议您填写详细地址，例如街道/门牌号，楼层和房间号等信息" v-model="chooseItem.detailAddress" clearable class="input-text2">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.detailAddress}}</div>
          </template>
        </div>
      </li>
      <li>
        <div class="otherText" @click="setAuto">
          <i class="el-icon-circle-check" :class="{active: chooseItem.num === 1}"></i>
          {{chooseItem.num === 1 ? '当前已是默认地址' : '设置为默认发货地址'}}
        </div>
      </li>
    </ul>
    <div class="control-btn">
      <template v-if="IslookOrUpdate !== 'look'">
        <div class="save" @click="closeAlert('save')">保存</div>
        <div class="cancel" @click="closeAlert()">取消</div>
      </template>
      <template v-else>
        <div class="save" @click="closeAlert()">关闭</div>
      </template>
    </div>
  </alert>
</template>

<script>
  import { Alert } from '@/components/common'
  import Cityarea from '@/components/base/area/area.vue'
  export default {
    props: {
      IslookOrUpdate: {
        type: String,
        default: 'update'
      },
      AlertTitle: {
        type: String,
        default: '新增公司地址'
      },
      chooseItem: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        showAlert: false
      }
    },
    computed: {
      // isAuto() {
      //   console.log(this.chooseItem)
      //   return Math.abs(this.chooseItem.num)
      // },
      area() {
        return this.chooseItem.area
      }
    },
    methods: {
      closeAlert(_tp) {
        if (_tp) {
          if (!this.chooseItem.name ||this.chooseItem.name.trim() === '') {
            this.$message({
              type: 'error',
              message: '请填写联系人姓名'
            })
            return;
          } else if (!this.chooseItem.telephone ||this.chooseItem.telephone.trim() === '') {
            this.$message({
              type: 'error',
              message: '请填写联系电话'
            })
            return;
          } else if (!/^1[3|5|7|8]\d{9}$/.test(this.chooseItem.telephone)) {
            this.$message({
              type: 'error',
              message: '联系电话填写不对'
            })
            return;
          }
          else if (!this.areainfo) {
            this.$message({
              type: 'error',
              message: '请选择所在地区'
            })
            return;
          } else if (!this.chooseItem.detailAddress ||this.chooseItem.detailAddress.trim() === '') {
            this.$message({
              type: 'error',
              message: '请填写详细地址'
            })
            return;
          }
        }
        this.chooseItem.area = this.areainfo
        this.$emit('closeAlert', _tp, this.chooseItem)
      },
      setAuto() {
        if (this.IslookOrUpdate === 'look') return
        if (this.IslookOrUpdate === 'update' && this.chooseItem.num === 1) {
          this.$message.error('最少选择一个为默认地址')
          return;
        }
        if (this.chooseItem.num === 1) {
          this.chooseItem.num = 0
          return
        }
        this.chooseItem.num = 1
      },
      hide() {
        this.showAlert = false
      },
      show(item) {
        this.areainfo = item.area
        this.showAlert = true
      },
      setup(info) {
        this.areainfo = info
      }
    },
    components: {
      Alert,
      Cityarea
    }
  }
</script>

<style lang="scss">

</style>