TestMobileList.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <view>
  3. <!--查询只能指定一个字段,请自行指定,生成时并未生成,以xxx代替-->
  4. <u-search :show-action="false" v-model="searchForm.xxx" @change="inputWord" margin="20rpx 50rpx"></u-search>
  5. <u-swipe-action>
  6. <view
  7. v-for="(row, index) in dataList"
  8. :key="index">
  9. <u-swipe-action-item @click="del(row.id)" :key="row.id" :threshold="60" duration="500"
  10. :options="[ {
  11. text: '删除',
  12. style: {
  13. backgroundColor: '#f56c6c'
  14. }
  15. }]">
  16. <u-cell-group>
  17. <u-cell @click="edit(row.id)">
  18. <view slot="title" class="content">
  19. <view class="text-bold text-grey">
  20. <view class="ellipsis-description">
  21. 姓名:{{row.name}}
  22. </view>
  23. </view>
  24. <view class="text-bold text-grey">
  25. <view class="ellipsis-description">
  26. 头像:<view class="cu-avatar lg margin-left-sm" :style="`background-image:url('${row.teImage}')`" ></view>
  27. </view>
  28. </view>
  29. </view>
  30. </u-cell>
  31. </u-cell-group>
  32. </u-swipe-action-item>
  33. </view>
  34. </u-swipe-action>
  35. <uni-fab
  36. horizontal="right"
  37. vertical="bottom"
  38. @fabClick="add"
  39. ></uni-fab>
  40. <u-loadmore :status="status" @loadmore="loadmore" :line="true" />
  41. <u-gap height="20" bgColor="#fff"></u-gap>
  42. </view>
  43. </template>
  44. <script>
  45. import testMobileService from '@/api/test/mobile/testMobileService'
  46. export default {
  47. data () {
  48. return {
  49. status: 'loadmore',
  50. searchForm: {
  51. name: ''
  52. },
  53. dataList: [],
  54. tablePage: {
  55. pages: 0,
  56. currentPage: 0,
  57. pageSize: 10,
  58. orders: [{ column: "a.create_time", asc: false }]
  59. },
  60. loading: false,
  61. }
  62. },
  63. onLoad() {
  64. this.loadmore()
  65. },
  66. methods: {
  67. // 新增
  68. add (){
  69. uni.navigateTo({
  70. url: '/pages/test/mobile/TestMobileForm'
  71. })
  72. },
  73. // 修改
  74. edit (id) {
  75. uni.navigateTo({
  76. url: '/pages/test/mobile/TestMobileForm?id='+id
  77. })
  78. },
  79. // 删除
  80. del (id) {
  81. uni.showModal({
  82. title: '提示',
  83. content: '您确认要删除数据吗',
  84. showCancel: true,
  85. success: (res) => {
  86. if (res.confirm) {
  87. testMobileService.delete(id).then((data)=>{
  88. uni.showToast({
  89. title: data,
  90. icon:"success"
  91. })
  92. this.doSearch()
  93. })
  94. }
  95. }
  96. });
  97. },
  98. // 输入监听
  99. inputWord(e){
  100. this.searchTimer && clearTimeout(this.searchTimer)
  101. this.searchTimer = setTimeout(()=>{
  102. this.doSearch()
  103. },300)
  104. },
  105. // 搜索
  106. doSearch(){
  107. this.dataList = [];
  108. this.tablePage.currentPage = 0;
  109. this.tablePage.pageSize = 10;
  110. this.tablePage.pages = 0;
  111. this.loadmore()
  112. },
  113. onReachBottom() {
  114. this.loadmore()
  115. },
  116. /*获取数据列表 */
  117. loadmore() {
  118. if(this.tablePage.currentPage!==0 && this.tablePage.pages <= this.tablePage.currentPage ) {
  119. this.status = 'nomore';
  120. return;
  121. }
  122. this.tablePage.currentPage = ++ this.tablePage.currentPage;
  123. //联网加载数据
  124. this.status = 'loading';
  125. testMobileService.list({
  126. 'current': this.tablePage.currentPage,
  127. 'size': this.tablePage.pageSize,
  128. 'orders': this.tablePage.orders,
  129. ...this.searchForm
  130. }).then((data) => {
  131. //追加新数据
  132. this.dataList=this.dataList.concat(data.records);
  133. this.tablePage.pages = data.pages;
  134. if(this.tablePage.pages <= this.tablePage.currentPage){
  135. this.status = 'nomore'
  136. } else {
  137. this.status = 'loadmore'
  138. }
  139. })
  140. }
  141. }
  142. }
  143. </script>