list.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. <template>
  2. <view>
  3. <!-- <u-navbar
  4. :customBack="customBack"
  5. back-icon-color="#fff"
  6. title="客户列表"
  7. :background="{ backgroundColor: '#2080f0' }"
  8. title-color="#fff"
  9. :border-bottom="false"
  10. ></u-navbar> -->
  11. <!-- 顶部筛选栏 -->
  12. <!-- <HM-filterDropdown :menuTop="menuTop" :filterData="filterData" :defaultSelected="filterDropdownValue" @confirm="confirmFilter"></HM-filterDropdown> -->
  13. <view class="customer-list-wrap">
  14. <view v-if="customerList.length == 0" class="empty-wrap"><u-empty mode="list" text="暂无相关客户"></u-empty></view>
  15. <view v-for="(item, index) in customerList" class="customer-item" :key="index">
  16. <view class="info">
  17. <view class="customer">
  18. <view class="relname">
  19. {{ item.name }}
  20. <u-icon
  21. class="u-m-l-5"
  22. :name="item.sex == 'male' ? 'man' : 'woman'"
  23. size="22"
  24. :color="item.sex == 'male' ? '#2080f0' : '#f85f69'"
  25. ></u-icon>
  26. <u-icon
  27. name="attach"
  28. size="32"
  29. label="快速报备"
  30. label-size="24"
  31. class="u-m-l-20"
  32. color="#f00"
  33. label-color="#f00"
  34. @click="pageTo('/pages/agent/recommend/create', { info: item })"
  35. ></u-icon>
  36. </view>
  37. <view class="item">
  38. <u-icon class="u-m-r-5" name="phone" size="22"></u-icon>
  39. {{ item.phone }}
  40. </view>
  41. <view class="item" v-if="item.demand">
  42. {{ item.demand }}
  43. </view>
  44. </view>
  45. <view class="data-wrap">
  46. <u-tag
  47. icon="edit-pen"
  48. :text="'编辑'"
  49. :type="'primary'"
  50. class="u-m-r-10"
  51. @click="pageTo('/pages/cust/create', { info: item })"
  52. >
  53. </u-tag>
  54. <view class="u-m-t-20">
  55. <u-tag
  56. @click="delHandle(item)"
  57. plain
  58. :text="'删除'"
  59. :type="'error'"
  60. class="u-m-r-10"
  61. >
  62. </u-tag>
  63. </view>
  64. </view>
  65. </view>
  66. </view>
  67. </view>
  68. <view class="float-search2" @click="pageTo('/pages/cust/create')"><u-icon name="plus" size="42" color="#fff"></u-icon></view>
  69. <view class="float-search" @click="searchPopupShow = true"><u-icon name="search" size="42" color="#fff"></u-icon></view>
  70. <u-popup v-model="searchPopupShow" mode="center" width="80%" height="440rpx" border-radius="20">
  71. <view class="bwin-popup">
  72. <view class="popup-header">客户搜索</view>
  73. <view class="popup-body">
  74. <u-input v-model="searchFormData.name" border placeholder="请输入客户姓名(支持模糊搜索)"></u-input>
  75. <u-divider marginTop="10" marginBottom="10">或</u-divider>
  76. <u-input v-model="searchFormData.phone" border placeholder="请输入客户手机号(可仅输入一部分)"></u-input>
  77. </view>
  78. <view class="popup-footer" style="position: absolute;">
  79. <u-button size="medium" @click="searchPopupShow = false">取消</u-button>
  80. <u-button size="medium" type="primary" @click="searchHandle()">搜索</u-button>
  81. </view>
  82. </view>
  83. </u-popup>
  84. <u-loadmore
  85. v-if="customerList.length > 0"
  86. marginTop="32"
  87. :line="true"
  88. :status="loadmore.status"
  89. :loading-text="loadmore.loadingText"
  90. :loadmore-text="loadmore.defaultText"
  91. :nomore-text="loadmore.nomoreText"
  92. />
  93. </view>
  94. </template>
  95. <script>
  96. var that;
  97. export default {
  98. data() {
  99. return {
  100. searchKeyword: null,
  101. searchPopupShow: false,
  102. searchFormData: {
  103. name: '',
  104. phone: ''
  105. }, // 搜索栏数据
  106. customerList: [],
  107. loadmore: {
  108. status: 'loadmore',
  109. loadingText: '努力加载中',
  110. defaultText: '轻轻上拉 查看更多',
  111. nomoreText: '实在没有了',
  112. currnetPage: 1
  113. }
  114. };
  115. },
  116. onLoad(params) {
  117. that = this;
  118. // 默认筛选项
  119. if (params.filterStepStatus !== undefined) {
  120. that.filterStepStatus = parseInt(params.filterStepStatus);
  121. this.filterDropdownValue = [[],[],[],[that.filterStepStatus],[]]
  122. }
  123. this.getDataList()
  124. },
  125. onReachBottom() {
  126. if (that.loadmore.status == 'nomore') return;
  127. that.loadmore.currnetPage++
  128. this.getDataList()
  129. },
  130. onPullDownRefresh() {
  131. // 防止频繁刷新
  132. },
  133. methods: {
  134. delHandle (item) {
  135. uni.$msgConfirm('确定删除吗?', () => {
  136. uni.api.cust.apicustomerdel({
  137. id: item.id
  138. }).then(res => {
  139. uni.$msg('删除成功~')
  140. this.loadmore.currnetPage = 1
  141. this.getDataList()
  142. })
  143. })
  144. },
  145. getDataList (bc) {
  146. const that = this
  147. let params = {
  148. ...this.searchFormData
  149. }
  150. uni.api.cust.apicustomerlist({
  151. page: that.loadmore.currnetPage,
  152. ...params,
  153. }).then(res => {
  154. const list = res.list || []
  155. if (list.length < 10) {
  156. that.loadmore.status = 'nomore';
  157. }
  158. if (res.page = 1) {
  159. if (list.length == 0) {
  160. uni.$msg('无搜索结果', 'none');
  161. }
  162. that.customerList = [...list]
  163. } else {
  164. that.customerList = that.customerList.concat(list)
  165. }
  166. if (bc) bc()
  167. })
  168. },
  169. customBack() {
  170. uni.navigateBack();
  171. },
  172. // 带监听器跳转
  173. pageTo(url, data) {
  174. /// xxxxx
  175. uni.navigateTo({
  176. url: url,
  177. events: {
  178. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  179. update: function(data) {
  180. // 当B页面运行 eventChannel.emit('update', { a:1 }); 时,会运行这里的代码逻辑。
  181. }
  182. },
  183. success: function(res) {
  184. // 通过eventChannel向被打开页面传送数据
  185. res.eventChannel.emit('data', data);
  186. }
  187. });
  188. },
  189. searchHandle() {
  190. that.loadmore.currnetPage = 1
  191. this.getDataList(() => {
  192. this.searchPopupShow = false
  193. })
  194. },
  195. }
  196. };
  197. </script>
  198. <style lang="scss">
  199. .search-wrap {
  200. padding: 20rpx;
  201. }
  202. .filter-wrap {
  203. position: relative;
  204. }
  205. // 列表
  206. .customer-list-wrap {
  207. width: 100%;
  208. .customer-item {
  209. display: flex;
  210. flex-direction: column;
  211. align-items: flex-start;
  212. font-size: $u-p2;
  213. color: $u-content-color;
  214. border-bottom: 1rpx solid $u-border-color;
  215. padding: 24rpx 32rpx;
  216. .info {
  217. display: flex;
  218. align-items: flex-start;
  219. justify-content: space-between;
  220. width: 100%;
  221. margin-bottom: 10rpx;
  222. .customer {
  223. display: flex;
  224. flex-direction: column;
  225. align-items: flex-start;
  226. .relname {
  227. color: $u-main-color;
  228. font-size: $u-p;
  229. font-weight: bold;
  230. margin-bottom: 10rpx;
  231. }
  232. .item {
  233. margin-bottom: 10rpx;
  234. }
  235. }
  236. .data-wrap {
  237. text-align: right;
  238. .date {
  239. font-size: $u-sub;
  240. }
  241. }
  242. }
  243. .tool-wrap {
  244. display: flex;
  245. align-items: center;
  246. justify-content: space-between;
  247. width: 100%;
  248. }
  249. }
  250. }
  251. .float-search {
  252. opacity: 0.9;
  253. position: fixed;
  254. right: 20rpx;
  255. bottom: 40rpx;
  256. padding: 20rpx;
  257. border-radius: 50%;
  258. background-color: $u-theme-color;
  259. }
  260. .float-search2 {
  261. opacity: 0.9;
  262. position: fixed;
  263. right: 20rpx;
  264. bottom: 150rpx;
  265. padding: 20rpx;
  266. border-radius: 50%;
  267. background-color: $u-theme-color;
  268. }
  269. </style>