my.vue 8.0 KB

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