choiceUser.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <template>
  2. <view class="">
  3. <view class="search-user flex-y-center ">
  4. <view class="search-content flex-y-center">
  5. <icon type="search" size="18" />
  6. <input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch" class="flex-grow-1"
  7. type="text" placeholder-style="font-size:26rpx" placeholder="请输入用户id" />
  8. <view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
  9. <icon type="clear" size="18" />
  10. </view>
  11. </view>
  12. <view class="search-btn" @click="search">
  13. 搜索
  14. </view>
  15. </view>
  16. <view class="header-hg100"></view>
  17. <view class="goodsList border-b flex-y-center box-pack-between" v-for="(item,index) of list"
  18. @click="choice(index)" :key='index'>
  19. <view>
  20. <view class="ft28" style="padding-bottom: 10rpx;">用户id:{{item.user_id}}</view>
  21. <view v-if="item.nickname" class="ft28 flex-y-center" style="padding-bottom: 10rpx;">
  22. <image style="width: 40rpx;height: 40rpx;margin-right: 10rpx;border-radius: 100px;" :src="item.avatar"></image>
  23. <text>{{item.nickname}}</text>
  24. </view>
  25. <view v-if="item.mobile" class="ft28">手机:{{item.mobile}}</view>
  26. </view>
  27. <view class="rund flex-center">
  28. <block v-if="item.checked">
  29. <icon type="success_no_circle" size="13"></icon>
  30. </block>
  31. </view>
  32. </view>
  33. <view class="pof flex-center">
  34. <button type="default" @click="choiceBtn">选择({{goodStudentTypelength}})</button>
  35. </view>
  36. </view>
  37. </template>
  38. <script>
  39. export default {
  40. data() {
  41. return {
  42. keywords: "",
  43. list: [],
  44. admin_id: '',
  45. goodStudentType: [],
  46. goodStudentTypelength: 0
  47. }
  48. },
  49. onLoad(e) {
  50. this.admin_id = uni.getStorageSync("admin_id");
  51. this.getData(1);
  52. },
  53. onReachBottom() {
  54. if (!this.is_bottom) {
  55. this.getData(this.page + 1)
  56. }
  57. },
  58. methods: {
  59. choice(index) {
  60. this.list[index].checked = !this.list[index].checked;
  61. this.goodStudentType = this.list.filter((v, i) => v.checked == true);
  62. this.goodStudentTypelength = this.goodStudentType.length;
  63. },
  64. choiceBtn(){
  65. uni.setStorageSync("goodStudentType",this.goodStudentType);
  66. uni.navigateBack();
  67. },
  68. getSearch(e) {
  69. if (!e.detail.value) {
  70. this.list = [];
  71. this.keywords = "";
  72. this.getData(1);
  73. }
  74. this.keywords = e.detail.value;
  75. },
  76. onDel() {
  77. this.seTval = '';
  78. this.list = [];
  79. this.keywords = "";
  80. this.getData(1);
  81. },
  82. confirm(e) {
  83. this.list = [];
  84. this.keywords = e.detail.value;
  85. this.getData(1);
  86. },
  87. search(e) {
  88. this.list = [];
  89. this.getData(1);
  90. },
  91. getData(page) {
  92. if (page == 1) {
  93. this.list = []
  94. this.page = 1
  95. this.is_bottom = false
  96. }
  97. this.request({
  98. url: 'Smdcshop/coupon_user_id',
  99. data: {
  100. admin_id: this.admin_id,
  101. page,
  102. keyword: this.keywords,
  103. limit: 20,
  104. }
  105. }).then(res => {
  106. if (res.code == 200 && res.data.length) {
  107. for (let i of res.data) {
  108. i.checked = false;
  109. }
  110. this.list = this.list.concat(res.data)
  111. this.page = page;
  112. this.goodStudentType=[];
  113. this.goodStudentTypelength=0;
  114. } else {
  115. this.is_bottom = true
  116. }
  117. })
  118. }
  119. }
  120. }
  121. </script>
  122. <style>
  123. page {
  124. background: #F9F9F9;
  125. }
  126. .pof {
  127. position: fixed;
  128. bottom: 20px;
  129. width: 100%;
  130. }
  131. .pof button {
  132. width: 60%;
  133. background-color: #007AFF;
  134. font-size: 28rpx;
  135. text-align: center;
  136. color: #FFFFFF;
  137. height: 80rpx;
  138. }
  139. .goodsList {
  140. padding: 20rpx;
  141. }
  142. .rund {
  143. width: 45rpx;
  144. height: 45rpx;
  145. border: 1px solid #ccc;
  146. margin-right: 20rpx;
  147. }
  148. .search-user {
  149. z-index: 999;
  150. position: fixed;
  151. left: 0;
  152. width: 100%;
  153. height: 100rpx;
  154. background: #FFFFFF;
  155. margin-left: 15rpx;
  156. }
  157. .search-user .search-content {
  158. width: 83%;
  159. height: 70rpx;
  160. background: #F1F1F1;
  161. border-radius: 100rpx;
  162. padding: 0 20rpx;
  163. }
  164. .search-user .search-content icon {
  165. margin-right: 10rpx;
  166. }
  167. .search-user .search-btn {
  168. margin-left: 20rpx;
  169. font-size: 28rpx;
  170. }
  171. .header-hg100 {
  172. height: 100rpx;
  173. }
  174. </style>