contacts.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <view class="pages">
  3. <div class="card" v-for="(item, index) in contactsList" :key="item.id" @click="()=>backSet(item, index)">
  4. <div>
  5. {{item.name}}
  6. </div>
  7. <div>
  8. {{item.phone}}
  9. </div>
  10. </div>
  11. <div class="add" @click="handleToAdd">
  12. <u-icon name="plus" color="#000" size="20"></u-icon>
  13. <div>立即添加</div>
  14. </div>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. contactsList:[
  22. {
  23. name:'小明',
  24. phone:'17212359128'
  25. },
  26. {
  27. name:'小红',
  28. phone:'17212359128'
  29. },
  30. {
  31. name:'小花',
  32. phone:'17212359128'
  33. },
  34. {
  35. name:'小西',
  36. phone:'17212359128'
  37. }
  38. ]
  39. }
  40. },
  41. methods: {
  42. handleToAdd(){
  43. console.log("别点了",uni);
  44. uni.navigateTo({
  45. url:'/components/addContacts/addContacts',
  46. success:(res)=>{
  47. console.log('成功',res);
  48. },
  49. fail:(err)=>{
  50. console.log('失败',err);
  51. }
  52. })
  53. },
  54. backSet(data, idx){
  55. console.log(data, idx);
  56. let pages = getCurrentPages();
  57. let prevPage = pages[pages.length - 2];
  58. prevPage.$vm.form.name = data.name;
  59. prevPage.$vm.form.phone = data.phone;
  60. uni.navigateBack({
  61. delta: 1
  62. })
  63. }
  64. }
  65. }
  66. </script>
  67. <style lang="scss" scoped>
  68. .pages{
  69. width: 100%;
  70. height: 100vh;
  71. background: #f5f5f5;
  72. overflow: auto;
  73. }
  74. .card{
  75. width: 96vw;
  76. height: 100px;
  77. background: #fff;
  78. padding: 20px;
  79. box-sizing: border-box;
  80. margin: 10px auto;
  81. box-shadow: 0 0 10px #00000029;
  82. display: flex;
  83. align-items: flex-start;
  84. flex-direction: column;
  85. justify-content: space-around;
  86. border-radius: 5px;
  87. }
  88. .add{
  89. width: 96vw;
  90. height: 100px;
  91. background: #fff;
  92. padding: 20px;
  93. box-sizing: border-box;
  94. margin: 10px auto;
  95. box-shadow: 0 0 10px #00000029;
  96. display: flex;
  97. align-items: center;
  98. border-radius: 5px;
  99. }
  100. </style>