<template>

??<div?class="home">

????<!--?聯(lián)系人列表?-->

????<van-contact-list?:list="list"?@add="onAdd"?@edit="onEdit"?/>

????<!--?showEdit是彈出層,默認(rèn)隱藏?-->

????<van-popup?v-model="showEdit"?position="bottom">

??????<van-contact-edit

????????:contact-info="editingContact"

????????:is-edit="isEdit"

????????@save="onSave"

????????@delete="onDelete"

??????/>

????</van-popup>

??</div>

</template>

<script>

//?引入

import?{?ContactList,?ContactEdit,?Toast,?Popup?}?from?"vant";

import?axios?from?"axios";

export?default?{

??name:?"contactList",

??//???注冊

??components:?{

????[ContactList.name]:?ContactList,

????//?[Toast.name]:?Toast,

????[ContactEdit.name]:?ContactEdit,

????[Popup.name]:?Popup

??},

??data()?{

????//???{id:?1,name:?"",?tel:?""}

????return?{

??????list:?[],

??????instance:?null,?//axios實(shí)例

??????showEdit:?false,?//編輯彈窗的顯示隱藏

??????editingContact:?{},?//正在編輯的聯(lián)系人的數(shù)據(jù)

??????isEdit:?false?//新建或編輯

????};

??},

??created()?{

????this.instance?=?axios.create({

??????baseURL:?"http://localhost:9000/api",

??????timeout:?1000

????});

????this.getList();

??},

??methods:?{

????//???獲取聯(lián)系人列表

????getList()?{

??????this.instance

????????.get("/contactList")

????????.then(res?=>?{

??????????//???console.log(res);?可以用console檢查是否成功

??????????this.list?=?res.data.data;

????????})

????????.catch(err?=>?{

??????????console.log(err);

??????????Toast("請(qǐng)求失敗，請(qǐng)稍后重試");

????????});

????},

????//???添加聯(lián)系人

????onAdd()?{

??????this.showEdit?=?true;

??????this.isEdit?=?false;

????},

????//???編輯聯(lián)系人

????onEdit(info)?{

??????this.showEdit?=?true;?//展示彈窗

??????this.isEdit?=?true;?//是否編輯

??????this.editingContact?=?info;

????},

????onSave(info)?{

??????if?(this.isEdit)?{

????????//編輯保存

????????this.instance

??????????.put("/contact/edit",?info)

??????????.then(res?=>?{

????????????if?(res.data.code?===?200)?{

??????????????Toast("編輯成功");

??????????????this.showEdit?=?false;

??????????????this.getList();

????????????}

??????????})

??????????.catch(()?=>?{

????????????Toast("請(qǐng)求失敗，請(qǐng)稍后重試");

??????????});

??????}?else?{

????????//新建保存

????????this.instance

??????????.post("/contact/new/json",?info)

??????????.then(res?=>?{

????????????if?(res.data.code?===?200)?{

??????????????Toast("新建成功");

??????????????this.showEdit?=?false;

??????????????this.getList();

????????????}

??????????})

??????????.catch(()?=>?{

????????????Toast("請(qǐng)求失敗，請(qǐng)稍后重試");

??????????});

??????}

????},

????onDelete(info)?{

??????this.instance

????????.delete("/contact",?{

??????????params:?{

????????????id:?info.id

??????????}

????????})

????????.then(res?=>?{

??????????if?(res.data.code?===?200)?{

????????????Toast("刪除成功");

????????????this.showEdit?=?false;

????????????this.getList();

??????????}

????????})

????????.catch(()?=>?{

??????????Toast("請(qǐng)求失敗，請(qǐng)稍后重試");

????????});

????}

??}

};

</script>

<style?scoped>

.van-contact-list__add?{

??z-index:?0;

}

.van-popup?{

??height:?100%;

}

</style>