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>
                <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>
            </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} 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(){
            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>