uk_front/components/product-builder/DialogSelectAddr.vue

<template>
  <div
    class=""
    id="dialogSelectAddr">
    <el-dialog :lock-scroll="false"
      title="Choose a delivery address"
      :visible.sync="show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="true"
      @close="close"
      width="50%">
      <el-table
        height="300"
        :data="computedList"
        @row-click="handleCurrentChange"
        :row-class-name="'row-cursor'"
        style="width: 100%"
        ref="table">
        <el-table-column
          label="checked"
          width="80px">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.selected"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="address">
          <template slot-scope="scope">
            {{ scope.row.name }}&nbsp;{{ scope.row.address }},&nbsp;{{
              scope.row.city
            }},&nbsp;{{ scope.row.post_code }},&nbsp;{{
              scope.row.country
            }},&nbsp;Phone number: {{ scope.row.phone }}
          </template>
        </el-table-column>
      </el-table>
      <br />
      <div>
        <el-button
          @click="newAddr"
          size="mini"
          type="text"
          plain
          >Add Shipping Address</el-button
        >
      </div>
      <br />
      <el-button
        size="small"
        type="primary"
        @click="submit"
        >Deliver to this address</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogSelectAddr',
  components: {},
  filters: {},
  props: {
    addressDetail: {
      type: Object,
      default: function () {
        return {}
      },
    },
    visible: {
      type: Boolean,
      default: false,
    },
    addressList: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {
      show: false,
      selectedId: -1,
      computedList: [],
    }
  },
  computed: {},
  watch: {
    visible() {
      this.show = this.visible
      if (this.visible) {
        this.generateAddressList()
      }
    },
    addressList() {
      this.generateAddressList()
    },
  },
  mounted() {},
  methods: {
    generateAddressList() {
      this.computedList = this.addressList.map(item => {
        return {
          ...item,
          selected: false,
        }
      })
    },
    submit() {
      if (this.selectedId === -1) {
        this.$message.error('Please check address before click this button')
        return
      }
      this.$emit('select-addr', this.selectedId)

      this.close()
    },
    close() {
      this.selectedId = -1
      this.computedList = []
      this.$emit('close', false)
    },
    newAddr() {
      this.$emit('add-new-addr')
      this.close()
    },
    handleCurrentChange(value, row, p3) {
      this.selectedId = value.id || -1
      this.$refs.table.setCurrentRow(value)
      this.computedList = this.addressList.map(item => {
        return {
          ...item,
          selected: item.id === value.id,
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
#dialogSelectAddr {
  .el-dialog__body {
    padding-top: 0;
  }
  :deep(.row-cursor) {
    cursor: pointer;
  }
}
</style>