membersList.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <template>
  2. <view class="content">
  3. <view class="fixed-top">
  4. <view class="search-user flex-y-center " style="position: relative;">
  5. <view class="search-content flex-y-center">
  6. <icon type="search" size="18" />
  7. <input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch"
  8. class="flex-grow-1" type="text" placeholder-style="font-size:26rpx" placeholder="请输入用户昵称、手机号" />
  9. <view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
  10. <icon type="clear" size="18" />
  11. </view>
  12. </view>
  13. <view class="search-btn" @click="search">
  14. 搜索
  15. </view>
  16. </view>
  17. </view>
  18. <view style="height: 105rpx;"></view>
  19. <view class="list">
  20. <view class="item" v-for="(item,index) in list" :key="index">
  21. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  22. <view class="cell flex flex-y-center">
  23. <view class="title">会员昵称:</view>
  24. <view class="desc">{{item.nickname?item.nickname:''}}</view>
  25. </view>
  26. </view>
  27. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  28. <view class="cell flex flex-y-center">
  29. <view class="title">类型:</view>
  30. <view class="desc">{{item.type == 1?'微信':'支付宝'}}</view>
  31. </view>
  32. </view>
  33. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  34. <view class="cell flex flex-y-center">
  35. <view class="title">手机号:</view>
  36. <view class="desc">{{item.mobile}}</view>
  37. </view>
  38. </view>
  39. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  40. <view class="cell flex flex-y-center">
  41. <view class="title">直接:</view>
  42. <view class="desc">{{item.zhijie_name}}</view>
  43. </view>
  44. </view>
  45. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  46. <view class="cell flex flex-y-center">
  47. <view class="title">间接:</view>
  48. <view class="desc">{{item.jianjie_name?item.jianjie_name:''}}</view>
  49. </view>
  50. </view>
  51. </view>
  52. <block v-if='list.length<=0'>
  53. <no-none></no-none>
  54. </block>
  55. </view>
  56. <view class="header-hg100"></view>
  57. </view>
  58. </template>
  59. <script>
  60. export default {
  61. data() {
  62. return {
  63. seTval: '',
  64. page: 1,
  65. list: [],
  66. admin_id: '',
  67. is_bottom: false,
  68. keywords: "",
  69. }
  70. },
  71. onLoad(e) {
  72. this.admin_id = uni.getStorageSync("admin_id");
  73. },
  74. onShow() {
  75. this.list = [];
  76. this.getData(1)
  77. },
  78. onReachBottom() {
  79. if (!this.is_bottom) {
  80. this.getData(this.page + 1)
  81. }
  82. },
  83. methods: {
  84. getSearch(e) {
  85. if (!e.detail.value) {
  86. this.list = [];
  87. this.keywords = "";
  88. this.getData(1);
  89. }
  90. this.keywords = e.detail.value;
  91. },
  92. onDel() {
  93. this.seTval = '';
  94. this.list = [];
  95. this.keywords = "";
  96. this.getData(1);
  97. },
  98. confirm(e) {
  99. this.list = [];
  100. this.keywords = e.detail.value;
  101. this.getData(1);
  102. },
  103. search(e) {
  104. this.list = [];
  105. this.getData(1);
  106. },
  107. getData(page) {
  108. if (page == 1) {
  109. this.list = []
  110. this.page = 1
  111. this.is_bottom = false
  112. }
  113. this.request({
  114. url: 'smdcshop/member_data',
  115. data: {
  116. admin_id: this.admin_id,
  117. page,
  118. limit: 10,
  119. serch: this.keywords,
  120. // store_id: this.store_id,
  121. }
  122. }).then(res => {
  123. if (res.code == 200 && res.data.length) {
  124. this.list = this.list.concat(res.data)
  125. this.page = page
  126. } else {
  127. this.is_bottom = true
  128. }
  129. })
  130. }
  131. }
  132. }
  133. </script>
  134. <style>
  135. @import url("../static/css/common.css");
  136. page {
  137. background: #F9F9F9;
  138. }
  139. .fixed-top {
  140. position: fixed;
  141. top: 0rpx;
  142. width: 100%;
  143. }
  144. .search-user {
  145. z-index: 999;
  146. position: fixed;
  147. left: 0;
  148. width: 100%;
  149. height: 100rpx;
  150. background: #FFFFFF;
  151. margin-left: 15rpx;
  152. border-bottom: 1rpx solid #F1F1F1;
  153. }
  154. .search-user .search-content {
  155. width: 83%;
  156. height: 70rpx;
  157. background: #F1F1F1;
  158. border-radius: 100rpx;
  159. padding: 0 20rpx;
  160. }
  161. .search-user .search-content icon {
  162. margin-right: 10rpx;
  163. }
  164. .search-user .search-btn {
  165. margin-left: 20rpx;
  166. font-size: 28rpx;
  167. }
  168. .headerScreen {
  169. height: 100rpx;
  170. z-index: 999;
  171. background: #fff;
  172. border-bottom: 1rpx solid #F1F1F1;
  173. }
  174. .showpay {
  175. width: 100%;
  176. z-index: 10;
  177. background: #FFFFFF;
  178. }
  179. .box-li {
  180. background-color: #fff;
  181. text-align: center;
  182. border-bottom: 1rpx solid #f1f1f1;
  183. height: 80rpx;
  184. line-height: 80rpx;
  185. font-size: 26rpx;
  186. }
  187. page .active {
  188. color: #007AFF;
  189. }
  190. .d3 {
  191. width: 0;
  192. height: 0;
  193. border-width: 12rpx;
  194. border-style: solid;
  195. border-color: #000 transparent transparent transparent;
  196. margin-top: 14rpx;
  197. margin-left: 6rpx;
  198. }
  199. .header-hg200 {
  200. height: 210rpx;
  201. }
  202. /* .header-hg100 {
  203. height: 100rpx;
  204. } */
  205. .del {
  206. height: 44rpx;
  207. line-height: 44rpx;
  208. padding: 0 15rpx;
  209. font-size: 24rpx;
  210. background-color: #FF5722;
  211. margin-right: 25rpx;
  212. color: #fff;
  213. border-radius: 4rpx;
  214. }
  215. .list {
  216. padding: 30rpx 25rpx;
  217. }
  218. .list .item {
  219. border-radius: 8rpx;
  220. overflow: hidden;
  221. padding-left: 30rpx;
  222. background-color: #fff;
  223. margin-bottom: 30rpx;
  224. }
  225. .list .item .top {
  226. border-bottom: 1rpx solid #f5f5f5;
  227. padding: 10rpx 0;
  228. }
  229. .list .item .top .name {
  230. font-size: 30rpx;
  231. font-weight: bold;
  232. }
  233. .list .item .top .type-btn {
  234. zoom: 0.7;
  235. margin-right: 25rpx;
  236. }
  237. .list .item .content {
  238. padding: 20rpx 0 24rpx;
  239. }
  240. .list .item .content .cell {
  241. flex: none;
  242. box-sizing: border-box;
  243. padding-right: 20rpx;
  244. font-size: 26rpx;
  245. line-height: 37rpx;
  246. color: #666;
  247. }
  248. .list .item .content .cell .title {
  249. color: #99A0AD;
  250. }
  251. </style>