record-list.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
  1. <template>
  2. <view class="container product clearfix">
  3. <view class="club-search clearfix">
  4. <view class="club-search-form">
  5. <view class="search-from name">
  6. <text class="iconfont icon-iconfonticonfontsousuo1"></text>
  7. <input
  8. class="input"
  9. type="text"
  10. confirm-type="search"
  11. v-model="listQuery.searchName"
  12. @input="onShowClose"
  13. @confirm="initclubList()"
  14. placeholder="搜索关键词"
  15. maxlength="16"
  16. />
  17. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
  18. </view>
  19. </view>
  20. <view class="search-from-title"> 咨询人:{{ questionMan }} </view>
  21. </view>
  22. <view class="remarks-content" :style="{ paddingBottom: isIphoneX ? '182rpx' : '148rpx' }">
  23. <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
  24. <!-- 空白页 -->
  25. <view class="empty-container" v-if="isEmpty">
  26. <text class="error-text">点击下方添加按钮开始记录吧~</text>
  27. </view>
  28. <template v-else>
  29. <!-- 列表 -->
  30. <view
  31. class="tui-remarks-cell tui-mtop"
  32. v-for="(remark, index) in remarksList"
  33. :key="index"
  34. @click.stop="details(remark.remarksId)"
  35. >
  36. <view class="tui-remarks-title">{{ remark.addDate }}</view>
  37. <view class="tui-remarks-content">
  38. <text
  39. class="tui-remarks-span"
  40. v-for="(label, labelIndex) in remark.remarks"
  41. :key="labelIndex"
  42. >
  43. {{ label }}
  44. </text>
  45. </view>
  46. <view class="tui-remarks-button">
  47. <view class="btn edit" @click.stop="handEditRemark(remark.remarksId)">修改</view>
  48. <view class="btn del" @click.stop="deleteRemark(remark.remarksId)">删除</view>
  49. </view>
  50. </view>
  51. <!--加载loadding-->
  52. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  53. <tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
  54. <!--加载loadding-->
  55. </template>
  56. </view>
  57. </view>
  58. <!-- 取消收藏操作 -->
  59. <tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
  60. <view class="tui-popup-box clearfix">
  61. <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
  62. <view class="tui-flex-1">
  63. <view class="tui-button" :class="isEmpty ? 'disabled' : 'cancel'" @click="handleShowClubpopup"
  64. >同步至机构</view
  65. >
  66. <view class="tui-button confirm" @click="handleAddRecord">添加画像</view>
  67. </view>
  68. </view>
  69. </view>
  70. </tui-bottom-popup>
  71. <!-- 添加记录 -->
  72. <cm-clubpopup
  73. ref="clubpopup"
  74. v-if="isClubpopupShow"
  75. :show="isClubpopupShow"
  76. @handleChoiceaClub="handleChoiceaClubData"
  77. >
  78. </cm-clubpopup>
  79. <!-- 弹窗提示 -->
  80. <tui-modal
  81. :show="modal"
  82. @click="handleClick"
  83. @cancel="hideMobel"
  84. :content="contentModalText"
  85. :button="modalButton"
  86. color="#333"
  87. :size="32"
  88. shape="circle"
  89. :maskClosable="false"
  90. >
  91. </tui-modal>
  92. </view>
  93. </template>
  94. <script>
  95. import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
  96. import tuiNomore from '@/components/tui-components/nomore/nomore'
  97. import cmClubpopup from '@/components/cm-module/cm-seller/cm-clubpopup'
  98. import { mapState, mapMutations } from 'vuex'
  99. const defaultListQuery = {
  100. questionManId: 0,
  101. pageNum: 1,
  102. pageSize: 10
  103. }
  104. export default {
  105. components: {
  106. tuiLoadmore,
  107. tuiNomore,
  108. cmClubpopup
  109. },
  110. data() {
  111. return {
  112. StaticUrl: this.$Static,
  113. isIphoneX: this.$store.state.isIphoneX,
  114. modalButton: [
  115. {
  116. text: '取消',
  117. type: 'gray',
  118. plain: true //是否空心
  119. },
  120. {
  121. text: '确认',
  122. customStyle: {
  123. color: '#fff',
  124. bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
  125. },
  126. plain: false
  127. }
  128. ],
  129. totalRecord: 0,
  130. popupShow: true,
  131. popupShow1: false,
  132. listQuery: Object.assign({}, defaultListQuery),
  133. remarksList: [],
  134. scrollTop: 0,
  135. isEmpty: false,
  136. loadding: false,
  137. pullUpOn: true,
  138. pullFlag: true,
  139. hasNextPage: false,
  140. navbarHeight: '',
  141. nomoreText: '上拉显示更多',
  142. contentModalText: '', //操作文字提示语句
  143. modal: false,
  144. questionMan: '',
  145. questionManId: '',
  146. handleRemarksId: 0,
  147. isClubpopupShow: false
  148. }
  149. },
  150. onLoad(option) {
  151. this.questionMan = option.questionMan
  152. this.listQuery.questionManId = option.questionManId
  153. this.initGetStotage(this.listQuery.questionManId)
  154. },
  155. filters: {
  156. NumFormat: function(value) {
  157. //处理金额
  158. if (!value) return '0.00'
  159. let number = Number(value).toFixed(2)
  160. return number
  161. }
  162. },
  163. computed: {
  164. ...mapState(['hasLogin', 'userInfo'])
  165. },
  166. methods: {
  167. ...mapMutations(['login', 'logout']),
  168. async initGetStotage() {
  169. const clubInfo = await this.$api.getComStorage('orderUserInfo')
  170. this.listQuery.clubId = clubInfo.clubId ? clubInfo.clubId : 0
  171. this.GetProductListInfo()
  172. },
  173. GetProductListInfo() {
  174. this.remarksList = []
  175. this.listQuery.pageNum = 1
  176. this.UserService.getUserClubVisitorRecordlist(this.listQuery)
  177. .then(response => {
  178. let data = response.data
  179. if (data.results && data.results.length > 0) {
  180. this.isEmpty = false
  181. this.hasNextPage = data.hasNextPage
  182. this.totalRecord = data.totalRecord
  183. this.remarksList = data.results
  184. this.pullFlag = false
  185. setTimeout(() => {
  186. this.pullFlag = true
  187. }, 500)
  188. if (this.hasNextPage) {
  189. this.pullUpOn = false
  190. this.nomoreText = '上拉显示更多'
  191. } else {
  192. if (this.remarksList.length < 8) {
  193. this.pullUpOn = true
  194. } else {
  195. this.pullUpOn = false
  196. this.loadding = false
  197. this.nomoreText = '已至底部'
  198. }
  199. }
  200. } else {
  201. this.isEmpty = true
  202. }
  203. this.isRequest = true
  204. })
  205. .catch(error => {
  206. this.$util.msg(error.msg, 2000)
  207. })
  208. },
  209. GetOnReachBottomData(index) {
  210. //上拉加载
  211. this.listQuery.pageNum += 1
  212. this.UserService.getUserClubVisitorRecordlist(this.listQuery)
  213. .then(response => {
  214. let data = response.data
  215. if (data.results && data.results.length > 0) {
  216. this.hasNextPage = data.hasNextPage
  217. this.remarksList = this.remarksList.concat(data.results)
  218. this.pullFlag = false // 防上拉暴滑
  219. setTimeout(() => {
  220. this.pullFlag = true
  221. }, 500)
  222. if (this.hasNextPage) {
  223. this.pullUpOn = false
  224. this.nomoreText = '上拉显示更多'
  225. } else {
  226. this.pullUpOn = false
  227. this.loadding = false
  228. this.nomoreText = '已至底部'
  229. }
  230. }
  231. })
  232. .catch(error => {
  233. this.$util.msg(error.msg, 2000)
  234. })
  235. },
  236. deleteRemark(remarksId) {
  237. this.handleRemarksId = remarksId
  238. this.modal = true
  239. this.contentModalText = '确定删除这条记录吗?'
  240. },
  241. handEditRemark(remarksId) {
  242. //跳转修改资料备注
  243. this.$api.navigateTo(`/pages/seller/remarks/add-record?type=edit&remarksId=${remarksId}&questionMan=${
  244. this.questionMan
  245. }`)
  246. },
  247. handleAllUnder() {
  248. //跳转添加资料备注
  249. this.$api.navigateTo('/pages/seller/remarks/customer-list')
  250. },
  251. handleShowClubpopup() {
  252. if (this.isEmpty) {
  253. return
  254. }
  255. this.isClubpopupShow = true
  256. },
  257. handleChoiceaClubData(data) {
  258. console.log(data)
  259. this.UserService.getUserRemarksConcactVisit(
  260. {
  261. clubId: data.clubId,
  262. questionManId:this.listQuery.questionManId
  263. }
  264. )
  265. .then(response => {
  266. this.$util.msg('同步成功', 2000, true, 'success')
  267. setTimeout(() => {
  268. this.$api.navigateTo('/pages/seller/remarks/customer-list')
  269. }, 2000)
  270. })
  271. .catch(error => {
  272. this.$util.msg(error.msg, 2000)
  273. })
  274. },
  275. handleAddRecord() {
  276. this.$api.navigateTo(
  277. `/pages/seller/remarks/add-record?questionManId=${this.listQuery.questionManId}&questionMan=${
  278. this.questionMan
  279. }`
  280. )
  281. },
  282. handleClick(e) {
  283. //取消收藏
  284. if (e.index == 1) {
  285. this.handleDeleteUserLike()
  286. }
  287. this.modal = false
  288. },
  289. handleDeleteUserLike() {
  290. //操作删除资料备注
  291. this.UserService.getUserRemarksVisitDelete({
  292. remarksId: this.handleRemarksId
  293. })
  294. .then(response => {
  295. this.$util.msg('已删除', 2000, true, 'success')
  296. setTimeout(() => {
  297. this.GetProductListInfo()
  298. }, 2000)
  299. })
  300. .catch(error => {
  301. this.$util.msg(error.msg, 2000)
  302. })
  303. },
  304. onShowClose() {
  305. //输入框失去焦点时触发
  306. if (this.listQuery.searchName != '') {
  307. this.isShowClose = true
  308. } else {
  309. this.isShowClose = false
  310. this.listQuery.pageNum = 1
  311. this.initclubList()
  312. }
  313. },
  314. delInputText() {
  315. //清除输入框内容
  316. this.listQuery.searchName = ''
  317. this.isShowClose = false
  318. this.listQuery.pageNum = 1
  319. this.initclubList()
  320. },
  321. hideMobel() {
  322. this.modal = false
  323. },
  324. details(remarksId) {
  325. this.$api.navigateTo(`/pages/seller/remarks/record-details?remarksId=${remarksId}`)
  326. }
  327. },
  328. onPageScroll(e) {
  329. //实时获取到滚动的值
  330. },
  331. onReachBottom() {
  332. if (this.hasNextPage) {
  333. this.loadding = true
  334. this.pullUpOn = true
  335. this.GetOnReachBottomData()
  336. }
  337. },
  338. onPullDownRefresh() {
  339. setTimeout(() => {
  340. this.listQuery.pageNum = 1
  341. uni.stopPullDownRefresh()
  342. }, 200)
  343. },
  344. onShow() {}
  345. }
  346. </script>
  347. <style lang="scss">
  348. @import '@/uni.scss';
  349. page {
  350. background: #f7f7f7;
  351. }
  352. .empty-container {
  353. z-index: 99;
  354. }
  355. .club-search {
  356. width: 100%;
  357. height: 192rpx;
  358. background: #ffffff;
  359. box-sizing: border-box;
  360. position: fixed;
  361. top: 0;
  362. left: 0;
  363. z-index: 100;
  364. .search-from-title {
  365. width: 100%;
  366. height: 80rpx;
  367. line-height: 80rpx;
  368. box-sizing: border-box;
  369. padding: 0 24rpx;
  370. font-size: $font-size-34;
  371. float: left;
  372. color: #1890f9;
  373. background-color: #f2f9ff;
  374. font-weight: normal;
  375. }
  376. .club-search-form {
  377. width: 100%;
  378. height: 112rpx;
  379. background: #ffffff;
  380. box-sizing: border-box;
  381. padding: 24rpx;
  382. float: left;
  383. .search-from {
  384. width: 100%;
  385. height: 100%;
  386. background: #f7f7f7;
  387. border-radius: 32rpx;
  388. float: left;
  389. position: relative;
  390. .input {
  391. width: 500rpx;
  392. height: 64rpx;
  393. float: left;
  394. line-height: 64rpx;
  395. color: $text-color;
  396. font-size: $font-size-24;
  397. }
  398. .icon-iconfonticonfontsousuo1 {
  399. width: 64rpx;
  400. height: 64rpx;
  401. line-height: 64rpx;
  402. text-align: center;
  403. display: block;
  404. font-size: $font-size-38;
  405. float: left;
  406. color: #999999;
  407. }
  408. .icon-shanchu1 {
  409. font-size: $font-size-32;
  410. color: #999999;
  411. position: absolute;
  412. width: 64rpx;
  413. height: 64rpx;
  414. line-height: 64rpx;
  415. text-align: center;
  416. top: 0;
  417. right: 0;
  418. z-index: 10;
  419. }
  420. }
  421. }
  422. }
  423. .remarks-content {
  424. width: 100%;
  425. height: auto;
  426. position: relative;
  427. padding: 0;
  428. box-sizing: border-box;
  429. padding: 24rpx;
  430. padding-top: 212rpx;
  431. .empty-container-image {
  432. width: 260rpx;
  433. height: 260rpx;
  434. margin-top: -300rpx;
  435. }
  436. .tui-remarks-cell {
  437. width: 100%;
  438. border-radius: 16rpx;
  439. background: #ffffff;
  440. margin-bottom: 24rpx;
  441. box-sizing: border-box;
  442. padding: 24rpx;
  443. .tui-remarks-title {
  444. width: 100%;
  445. height: 66rpx;
  446. line-height: 66rpx;
  447. font-size: $font-size-26;
  448. color: #333333;
  449. border-bottom: 1px solid #e1e1e1;
  450. box-sizing: border-box;
  451. }
  452. .tui-remarks-name {
  453. width: 100%;
  454. height: 37rpx;
  455. line-height: 37rpx;
  456. font-size: $font-size-26;
  457. color: #666666;
  458. text-align: left;
  459. margin-bottom: 24rpx;
  460. }
  461. .tui-remarks-content {
  462. width: 100%;
  463. height: auto;
  464. border-bottom: 1px solid #e1e1e1;
  465. margin-bottom: 24rpx;
  466. padding-top: 20rpx;
  467. .tui-remarks-span {
  468. height: 48rpx;
  469. line-height: 48rpx;
  470. text-align: center;
  471. padding: 0 20rpx;
  472. background-color: #fef6f3;
  473. font-size: $font-size-26;
  474. color: #e15616;
  475. border-radius: 25rpx;
  476. display: inline-block;
  477. margin-right: 24rpx;
  478. margin-bottom: 24rpx;
  479. &:nth-child(4n) {
  480. margin-right: none;
  481. }
  482. }
  483. }
  484. .tui-remarks-button {
  485. width: 100%;
  486. height: 48rpx;
  487. .btn {
  488. width: 50%;
  489. line-height: 48rpx;
  490. box-sizing: border-box;
  491. text-align: center;
  492. font-size: $font-size-34;
  493. float: left;
  494. font-weight: bold;
  495. &.edit {
  496. color: #1890f9;
  497. border-right: 1px solid #e1e1e1;
  498. }
  499. &.del {
  500. color: #f94b4b;
  501. }
  502. }
  503. }
  504. }
  505. }
  506. .tui-popup-box {
  507. position: relative;
  508. box-sizing: border-box;
  509. min-height: 100rpx;
  510. padding: 6rpx 24rpx;
  511. .tui-popup-content {
  512. padding-top: 30rpx;
  513. }
  514. }
  515. .tui-popup-btn {
  516. width: 100%;
  517. height: auto;
  518. float: left;
  519. box-sizing: border-box;
  520. margin-top: 30rpx;
  521. .tui-flex-1 {
  522. width: 100%;
  523. height: 84rpx;
  524. display: flex;
  525. .tui-button {
  526. flex: 1;
  527. line-height: 84rpx;
  528. font-size: $font-size-28;
  529. text-align: center;
  530. border-radius: 42rpx;
  531. padding: 0;
  532. margin: 0 15rpx;
  533. box-sizing: border-box;
  534. &.cancel {
  535. background: #ffe6dc;
  536. color: #e15616;
  537. }
  538. &.disabled {
  539. background: #e1e1e1;
  540. color: #ffffff;
  541. }
  542. &.confirm {
  543. background: $btn-confirm;
  544. color: #ffffff;
  545. }
  546. }
  547. }
  548. }
  549. </style>