index.vue

<template>
  <el-dialog
    :title="$t('选择联系人')"
    visible
    :before-close="closeDialog"
    :close-on-click-modal="false"
  >
    <div class="header mb-10 flex-center">
      <div class="flex-center">{{ $t("关键字") }}：</div>
      <el-input v-model="form.searchKey" clearable class="w-200"></el-input>
      <el-button type="primary" class="ml-10" @click="handleQuery">{{
        $t("搜索")
      }}</el-button>
    </div>
    <div class="list">
      <div
        class="list-item"
        v-for="item in list"
        :key="item.customerContactsId"
        @click="choose(item)"
      >
        <div class="item-box">
          <div class="line">
            <div class="label">{{ $t("姓名") }}：</div>
            <div class="value">{{ item.contactsName }}</div>
            <el-tag v-if="item.isInOpenSea" type="danger" effect="dark">{{
              $t("公")
            }}</el-tag>
          </div>
          <!-- v1.7新增 -->
          <div class="line">
            <div class="label">{{ $t("姓名(英文)") }}：</div>
            <div class="value">{{ item.contactsNameEn }}</div>
          </div>
          <div class="line">
            <div class="label">{{ $t("电话") }}：</div>
            <div class="value">+{{ item.areaCode }} {{ item.phoneNew }}</div>
          </div>
          <div class="line">
            <div class="label">{{ $t("邮箱") }}：</div>
            <div class="value">{{ item.email }}</div>
          </div>
          <div class="line">
            <div class="label">{{ $t("公司") }}：</div>
            <div class="value">{{ item.company }}</div>
          </div>
          <!-- v1.7新增 -->
          <div class="line">
            <div class="label">{{ $t("公司(英文)") }}：</div>
            <div class="value">{{ item.companyEn }}</div>
          </div>
        </div>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="form.pageNo"
      :limit.sync="form.pageSize"
      @pagination="loadList"
    />
  </el-dialog>
</template>
<script>
import {
  getCustomerContactsSelect,
  getCustomerContactsSelect2,
} from "@/api/ecw/customerContacts";
export default {
  props: {
    type: Number,
  },
  data() {
    return {
      show: true,
      form: {
        pageNo: 1,
        pageSize: 10,
        searchKey: "",
      },
      list: [],
      total: 0,
    };
  },
  created() {
    this.show = true;
    this.loadList();
  },
  methods: {
    handleQuery() {
      this.form.pageNo = 1;
      this.loadList();
    },
    loadList() {
      //加载联系人数据,怎样使用属性
      if (this.type == "1") {
        getCustomerContactsSelect2(this.form).then((res) => {
          this.list = res.data.list;
          this.total = res.data.total;
        });
      } else {
        getCustomerContactsSelect(this.form).then((res) => {
          this.list = res.data.list;
          this.total = res.data.total;
        });
      }
    },
    closeDialog() {
      this.show = false;
      this.$emit("close");
    },
    choose(contact) {
      this.$emit("choose", contact);
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  &-item {
    background: #eee;
    width: 300px;
    margin: 10px;
    padding: 5px;
    border-radius: 10px;
    border: 5px solid transparent;
    background: linear-gradient(white, white) padding-box,
      repeating-linear-gradient(
          -45deg,
          red 0,
          red 12.5%,
          transparent 0,
          transparent 25%,
          #58a 0,
          #58a 37.5%,
          transparent 0,
          transparent 50%
        )
        0/5em 5em;
    .item-box {
      /* background: #fbfaf5; */
      padding: 20px;
    }
    .line {
      display: flex;
      /* .label{
                width: 100px;
            } */
      .value {
        flex: 1;
        margin-left: 10px;
      }
    }
  }
}
</style>