threadList.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. <template>
  2. <view class="content">
  3. <view class="filter-box">
  4. <u-search placeholder="请输入关键字" v-model="filterText" @search="setFilterText" @custom="setFilterText"></u-search>
  5. </view>
  6. <u-tabs-swiper ref="uTabs" :active-color="mainColor" :list="tabList" :current="current" @change="tabsChange"
  7. :is-scroll="false"></u-tabs-swiper>
  8. <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper-box">
  9. <swiper-item class="swiper-item" v-for="(item, index1) in tabList" :key="index1">
  10. <scroll-view scroll-y class="scroll-box" @scrolltolower="handleLoadMore" :refresher-enabled="true"
  11. :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white" @refresherrefresh="onRefresh"
  12. @refresherrestore="onRestore">
  13. <u-card :show-head="false" :foot-border-top="false" margin="10px 15px" borderRadius="40" :foot-style="{padding: '0 10px 5px 0'}" v-for="(site, index2) in item.tableList"
  14. :key="index2" class="card-box" @click="goToOrderList(site)">
  15. <view slot="body" class="card-content">
  16. <view class="student-info">
  17. <view style="width: 100%;">
  18. <text class="info-name" style="margin-right: 10px;">{{site.studentName}}</text>
  19. <!-- <view class="info-type" :class="site.status == 1 ? 'info-type-active' : ''">{{site.status == 0 ? '未报名' : '已报名'}}</view> -->
  20. <text class="info-name">{{site.parentName}}</text>
  21. </view>
  22. <view class="info-phone">{{site.parentPhone}}</view>
  23. </view>
  24. <!-- <u-image width="28px" height="28px" :src="site.type == 2 ? iconPath1 : iconPath2"></u-image> -->
  25. </view>
  26. <view slot="foot" style="text-align: right;">
  27. <u-button type="warning" :ripple="true" shape="circle" :custom-style="{...handleCustomStyle, marginRight: '5px'}" size="mini" @click="handleUpdateClick(site)">修改</u-button>
  28. <u-button type="warning" :ripple="true" shape="circle" :custom-style="handleCustomStyle" size="mini" @click="handleJumpSubscribeClick(site)">预约体验</u-button>
  29. </view>
  30. </u-card>
  31. <u-divider v-if="item.isOver" bg-color="transparent" :style="{paddingTop : item.tableList.length == 0 ? '10px' : ''}">没有更多了</u-divider>
  32. </scroll-view>
  33. </swiper-item>
  34. </swiper>
  35. <u-icon v-if="userId!=274" name="plus-circle-fill" :color="mainColor" size="96" class="fix-add-icon" @click="handleThreadAddClick"></u-icon>
  36. <!-- 标签 -->
  37. <u-action-sheet :list="signList" v-model="signShow" @click="handleSetSexClick"></u-action-sheet>
  38. <u-top-tips ref="uTips"></u-top-tips>
  39. </view>
  40. </template>
  41. <script>
  42. import {
  43. mapGetters
  44. } from 'vuex'
  45. const NET = require('@/utils/request')
  46. const API = require('@/config/api')
  47. export default {
  48. computed: {
  49. ...mapGetters([
  50. 'mainColor',
  51. 'customStyle',
  52. 'handleCustomStyle',
  53. 'handleDefaultCustomStyle',
  54. ])
  55. },
  56. data() {
  57. return {
  58. userId:'',
  59. customerId: '',
  60. // filterText: '',
  61. triggered: false,
  62. tabList: [
  63. {
  64. name: '未联系',
  65. isOver: false,
  66. pageIndex: 1,
  67. filterText: '',
  68. type: 1,
  69. tableList: [],
  70. }, {
  71. name: '有意向',
  72. isOver: false,
  73. pageIndex: 1,
  74. filterText: '',
  75. type: 2,
  76. tableList: [],
  77. }, {
  78. name: '已预约',
  79. isOver: false,
  80. pageIndex: 1,
  81. filterText: '',
  82. type: 3,
  83. tableList: [],
  84. }, {
  85. name: '商机',
  86. isOver: false,
  87. pageIndex: 1,
  88. filterText: '',
  89. type: 4,
  90. tableList: [],
  91. },{
  92. name: '无效',
  93. isOver: false,
  94. pageIndex: 1,
  95. filterText: '',
  96. type: 0,
  97. tableList: [],
  98. }],
  99. current: 0,
  100. swiperCurrent: 0,
  101. iconPath1: API.getServerImg + 'weibaoming.png',
  102. iconPath2: API.getServerImg + 'xianshangkehu.png',
  103. signShow: false,
  104. signList: [
  105. { text: '未联系', type: 1 },
  106. { text: '有意向', type: 2 },
  107. { text: '已预约', type: 3 },
  108. { text: '商机', type: 4 },
  109. { text: '无效', type: 0 }
  110. ],
  111. }
  112. },
  113. onShow() {
  114. this.userId=uni.getStorageSync('userData').userId
  115. this.tabList = Object.assign([], this.$options.data().tabList)
  116. this.getTableList(0)
  117. this.getTableList(1)
  118. this.getTableList(2)
  119. this.getTableList(3)
  120. this.getTableList(4)
  121. },
  122. onReady() {},
  123. methods: {
  124. // 修改
  125. handleUpdateClick(item) {
  126. this.customerId = item.id
  127. this.signShow = true
  128. },
  129. // 修改线索标签
  130. handleSetSexClick(index) {
  131. // 调修改接口
  132. NET.request(API.updateCustomerState, {
  133. customerId: this.customerId,
  134. clueState: this.signList[index].type
  135. }, 'POST').then(res => {
  136. if(res.status === 10000) {
  137. this.$refs.uTips.show({
  138. title: '修改成功',
  139. type: 'success',
  140. })
  141. this.tabList = Object.assign([], this.$options.data().tabList)
  142. this.getTableList(0)
  143. this.getTableList(1)
  144. this.getTableList(2)
  145. this.getTableList(3)
  146. this.getTableList(4)
  147. // const tab = this.tabList[this.current].tableList
  148. // const delIndex = tab.findIndex(item => item.id == this.customerId)
  149. // tab.splice(delIndex,1)
  150. } else {
  151. this.$refs.uTips.show({
  152. title: error.msg,
  153. type: 'warning',
  154. })
  155. }
  156. })
  157. },
  158. // 获取列表数据
  159. getTableList(index) {
  160. NET.request(API.getCustomerList, {
  161. isSignUp: 1,
  162. saleIsMeFlag: true,
  163. name: this.tabList[index].filterText,
  164. type: this.tabList[index].type,
  165. page: this.tabList[index].pageIndex,
  166. size: 10,
  167. }, 'POST').then(res => {
  168. this.triggered = false
  169. this.tabList[index].tableList = this.tabList[index].tableList.concat(res.data.row)
  170. this.tabList[index].isOver = res.data.row.length != 10
  171. }).catch(error => {
  172. this.triggered = false
  173. this.$refs.uTips.show({
  174. title: error.msg,
  175. type: 'warning',
  176. })
  177. })
  178. },
  179. // 设置过滤字段
  180. setFilterText(value) {
  181. this.tabList[this.current].filterText = value
  182. this.onRefresh()
  183. },
  184. // tab页面切换
  185. tabsChange(index) {
  186. this.swiperCurrent = index;
  187. },
  188. // swiper-item左右移动,通知tabs的滑块跟随移动
  189. transition(e) {
  190. let dx = e.detail.dx;
  191. this.$refs.uTabs.setDx(dx);
  192. },
  193. // swiper滑动结束,分别设置tabs和swiper的状态
  194. animationfinish(e) {
  195. let current = e.detail.current;
  196. this.$refs.uTabs.setFinishCurrent(current);
  197. this.swiperCurrent = current;
  198. this.current = current;
  199. },
  200. // 下拉刷新
  201. onRefresh() {
  202. if (!this.triggered) {
  203. this.triggered = true
  204. this.tabList[this.current].isOver = false
  205. this.tabList[this.current].pageIndex = 1
  206. this.tabList[this.current].tableList = []
  207. this.getTableList(this.current, 'refresh')
  208. }
  209. },
  210. // 重置下拉刷新状态
  211. onRestore() {
  212. this.triggered = 'restore'
  213. this.triggered = false
  214. },
  215. // 懒加载
  216. handleLoadMore() {
  217. if (!this.tabList[this.current].isOver) {
  218. this.tabList[this.current].pageIndex++
  219. this.getTableList(this.current)
  220. }
  221. },
  222. // 跳转到报名详情
  223. goToOrderList(item) {
  224. uni.navigateTo({
  225. url: `/pagesMain/customerInfo?id=${item.id}&title=线索信息`
  226. });
  227. },
  228. // 跳转添加信息
  229. handleThreadAddClick() {
  230. uni.navigateTo({
  231. url: '/pagesEnroll/intentionForm?type=1'
  232. });
  233. },
  234. // 跳转场馆列表
  235. handleJumpSubscribeClick(item) {
  236. this.$store.commit("changeCustomerId", item.id)
  237. uni.navigateTo({
  238. url: '/pagesMain/venueMore'
  239. });
  240. },
  241. },
  242. }
  243. </script>
  244. <style>
  245. page {
  246. width: 100%;
  247. height: 100%;
  248. background-color: #f7f7f7;
  249. }
  250. </style>
  251. <style lang="scss" scoped>
  252. @import "@/static/css/themes.scss";
  253. .content {
  254. width: 100%;
  255. float: left;
  256. .filter-box {
  257. height: 48px;
  258. padding: 10px 15px;
  259. background-color: #FFFFFF;
  260. }
  261. .swiper-box {
  262. height: calc(100vh - 82px);
  263. .swiper-item {
  264. height: calc(100vh - 82px);
  265. .scroll-box {
  266. width: 100%;
  267. height: calc(100vh - 82px);
  268. .card-box {
  269. .card-content {
  270. display: flex;
  271. align-items: center;
  272. .student-info {
  273. flex: 1;
  274. .info-name {
  275. // width: 64px;
  276. // float: left;
  277. line-height: 28px;
  278. font-size: 14px;
  279. font-weight: bold;
  280. }
  281. .info-type {
  282. padding: 0 10px;
  283. margin-top: 3px;
  284. border-radius: 20px;
  285. float: left;
  286. line-height: 20px;
  287. font-size: 10px;
  288. color: #FFFFFF;
  289. background-color: #999999;
  290. }
  291. .info-type-active {
  292. background-color: $mainColor;
  293. }
  294. .info-phone {
  295. width: calc(100% - 64px);
  296. // float: left;
  297. line-height: 28px;
  298. font-size: 12px;
  299. color: #999999;
  300. }
  301. }
  302. }
  303. }
  304. }
  305. }
  306. }
  307. }
  308. .menber-box {
  309. width: 100%;
  310. // float: left;
  311. padding: 10px 15px;
  312. margin-bottom: 10px;
  313. .menber-col {
  314. width: 100%;
  315. padding: 15px;
  316. margin-bottom: 10px;
  317. display: inline-block;
  318. background-color: #FFFFFF;
  319. border-radius: 15px;
  320. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  321. position: relative;
  322. overflow: hidden;
  323. box-sizing: border-box;
  324. .menber-label {
  325. width: 100%;
  326. margin-bottom: 5px;
  327. float: left;
  328. font-size: 14px;
  329. // line-height: 20px;
  330. }
  331. .menber-num {
  332. width: 100%;
  333. float: left;
  334. font-size: 26px;
  335. line-height: 28px;
  336. color: $mainColor;
  337. }
  338. .menber-icon {
  339. font-size: 100px;
  340. color: $mainColor;
  341. position: absolute;
  342. right: -5px;
  343. bottom: -30px;
  344. opacity: 0.5;
  345. }
  346. }
  347. }
  348. .common-title {
  349. width:100%;
  350. text-align: center;
  351. font-size: 20px;
  352. margin: 10px 0;
  353. }
  354. .fix-add-icon {
  355. position: fixed;
  356. bottom: 15px;
  357. right: 15px;
  358. }
  359. </style>