cm-screen-drawer.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537
  1. <template>
  2. <view class="drawer-content">
  3. <!--右抽屉-->
  4. <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
  5. <view
  6. class="drawer-container clearfix"
  7. scroll-y
  8. :style="{ paddingTop: '0px', paddingBottom: isIphoneX ? '180rpx' : '146rpx' }"
  9. >
  10. <scroll-view class="tui-drawer-scroll" scroll-y :style="{ height: drawerH + 'px' }">
  11. <view class="drawer-title">更多筛选</view>
  12. <view class="drawer-main">
  13. <view class="drawer-main-name">日期</view>
  14. <view class="drawer-main-time">
  15. <view class="drawer-main-time-input">
  16. <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
  17. <text class="input-text">{{ queryData.startAddTime }}</text>
  18. </picker>
  19. <text class="iconfont icon-riqi"></text>
  20. </view>
  21. <view class="line">-</view>
  22. <view class="drawer-main-time-input">
  23. <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
  24. <text class="input-text">{{ queryData.endAddTime }}</text>
  25. </picker>
  26. <text class="iconfont icon-riqi"></text>
  27. </view>
  28. </view>
  29. <view class="drawer-main-name">咨询类别</view>
  30. <view class="drawer-main-brand clearfix">
  31. <view
  32. class="drawer-brand-list"
  33. :class="category.isChecked ? 'checked' : ''"
  34. v-for="(category, index) in categorys"
  35. :key="index"
  36. @click="choiceCategorys(category, index)"
  37. >
  38. {{ category.className }}
  39. </view>
  40. </view>
  41. <template v-if="manager > 0">
  42. <view class="drawer-main-name">小组</view>
  43. <view class="drawer-main-brand clearfix">
  44. <view
  45. class="drawer-brand-list"
  46. :class="isCheckedGroups ? 'checked' : ''"
  47. @click="choiceGroupsAll"
  48. >全部</view
  49. >
  50. <view
  51. class="drawer-brand-list"
  52. :class="group.isChecked ? 'checked' : ''"
  53. v-for="(group, index) in groups"
  54. :key="index"
  55. @click="choiceGroups(group, index)"
  56. >
  57. {{ group.leaderName }}
  58. </view>
  59. </view>
  60. </template>
  61. <template v-if="manager>0 || leaderId>0">
  62. <view class="drawer-main-name" v-if="members.length>0">组员</view>
  63. <view class="drawer-main-brand clearfix" v-if="members.length>0">
  64. <view
  65. class="drawer-brand-list"
  66. :class="member.isChecked ? 'checked' : ''"
  67. v-for="(member, index) in members"
  68. :key="index"
  69. @click="choiceMembers(member, index)"
  70. >
  71. {{ member.groupName }}
  72. </view>
  73. </view>
  74. </template>
  75. <view class="drawer-main-name">价格敏感度:</view>
  76. <view class="drawer-main-radiov">
  77. <view class="drawer-main-radio">
  78. <picker @change="bindPickerChange(1,$event)" :value="index" :range="priceActions" range-key="name">
  79. <input class="input" type="text" disabled="false" v-model="priceFlagText" value="" placeholder="请选择"/>
  80. <text class="iconfont icon-xiangyou"></text>
  81. </picker>
  82. </view>
  83. </view>
  84. <view class="drawer-main-name">意向程度:</view>
  85. <view class="drawer-main-radiov">
  86. <view class="drawer-main-radio">
  87. <picker @change="bindPickerChange(2,$event)" :value="index" :range="intenActions" range-key="name">
  88. <input class="input" type="text" disabled="false" v-model="intenFlagText" value="" placeholder="请选择"/>
  89. <text class="iconfont icon-xiangyou"></text>
  90. </picker>
  91. </view>
  92. </view>
  93. <view class="drawer-main-name">跟进状态:</view>
  94. <view class="drawer-main-radiov">
  95. <view class="drawer-main-radio">
  96. <picker @change="bindPickerChange(3,$event)" :value="index" :range="stateActions" range-key="name">
  97. <input class="input" type="text" disabled="false" v-model="followStateText" value="" placeholder="请选择"/>
  98. <text class="iconfont icon-xiangyou"></text>
  99. </picker>
  100. </view>
  101. </view>
  102. </view>
  103. </scroll-view>
  104. <view class="drawer-input btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
  105. <view class="drawer-btn clear" @click="closeDrawer">取消</view>
  106. <view class="drawer-btn comfrim" @click="handSearchConfirm">确定</view>
  107. </view>
  108. </view>
  109. </tui-drawer>
  110. </view>
  111. </template>
  112. <script>
  113. export default {
  114. name: 'rightDrawer',
  115. props: {
  116. rightDrawer: {
  117. type: Boolean,
  118. default: false
  119. }
  120. },
  121. data() {
  122. const currentDate = this.getDate({
  123. format: true
  124. })
  125. return {
  126. CustomBar: this.CustomBar, // 顶部导航栏高度
  127. isIphoneX: this.$store.state.isIphoneX,
  128. isCheckedGroups:false,
  129. checkedIndex: 0,
  130. checkedGroupsIndex: 0,
  131. checkedMemberIndex: 0,
  132. isShowClose: false,
  133. dataList: [],
  134. date: currentDate,
  135. manager:0,
  136. leaderId:0,
  137. height: 0,
  138. drawerH: 0 ,// 抽屉内部scrollview高度
  139. categorys:[],
  140. checkedCategorysList:[],
  141. groups:[],
  142. members:[],
  143. priceFlagText:'',
  144. intenFlagText:'',
  145. followStateText:'',
  146. queryData:{
  147. startAddTime:'',
  148. endAddTime:'',
  149. consult:'',
  150. leaderId:0,
  151. groupId:0,
  152. },
  153. priceActions:[
  154. {name:'敏感',value:1},
  155. {name: '适中',value:2},
  156. {name: '不敏感',value:3},
  157. {name: '不明确',value:4}
  158. ],
  159. intenActions:[
  160. {name:'意向强烈',value:1},
  161. {name: '意向一般',value:2},
  162. {name: '意向平淡',value:3},
  163. {name: '随便看看',value:4}
  164. ],
  165. stateActions:[
  166. {name:'跟进中',value:1},
  167. {name: '跟进完成',value:2},
  168. {name: '已放弃',value:3},
  169. ],
  170. }
  171. },
  172. created() {
  173. this.SetScrollHeight()
  174. this.getUserClubConsults()
  175. },
  176. computed: {
  177. startDate() {
  178. return this.getDate('start')
  179. },
  180. endDate() {
  181. return this.getDate('end')
  182. }
  183. },
  184. methods: {
  185. async getUserClubConsults() {
  186. const userInfo = await this.$api.getStorage()
  187. this.manager = userInfo.manager ? userInfo.manager : 0
  188. this.leaderId = userInfo.leaderId ? userInfo.leaderId : 0
  189. //查询咨询类别
  190. this.UserService.getUserClubConsults()
  191. .then(response => {
  192. this.categorys = response.data.map((el, index) => {
  193. el.isChecked = false
  194. return el
  195. })
  196. if(this.manager > 0){
  197. this.getUserClubTeams()
  198. }
  199. if(this.leaderId > 0){
  200. this.getUserClubTeamsRroups(this.leaderId)
  201. }
  202. })
  203. .catch(error => {
  204. console.log('=========>获取咨询类别列表失败')
  205. })
  206. },
  207. getUserClubTeams() {
  208. this.UserService.getUserClubTeams()
  209. .then(response => {
  210. this.groups = response.data.map((el, index) => {
  211. el.isChecked = false
  212. return el
  213. })
  214. })
  215. .catch(error => {
  216. console.log('=========>获取小组列表失败')
  217. })
  218. },
  219. getUserClubTeamsRroups(leaderId) {
  220. this.UserService.getUserClubTeamsRroups({leaderId:leaderId})
  221. .then(response => {
  222. this.members = response.data.map((el, index) => {
  223. el.isChecked = false
  224. return el
  225. })
  226. })
  227. .catch(error => {
  228. console.log('=========>获取咨询类别列表失败')
  229. })
  230. },
  231. choiceCategorys(category,idx){
  232. //选择分类
  233. category.isChecked = !category.isChecked
  234. if (category.isChecked) {
  235. if(!this.contains(this.checkedCategorysList,category.id)){
  236. this.checkedCategorysList.push(category.id)
  237. }
  238. } else {
  239. this.checkedCategorysList.splice(this.checkedCategorysList.indexOf(category.id),1)
  240. }
  241. this.queryData.consult = this.checkedCategorysList.join(',')
  242. },
  243. contains(arr, val) {// 校验
  244. return arr.some(item => item === val)
  245. },
  246. choiceGroupsAll() {
  247. // 点击选择全部小组
  248. this.isCheckedGroups = true
  249. this.queryData.leaderId = ''
  250. this.groups.forEach(el => {
  251. el.isChecked = false
  252. })
  253. },
  254. choiceGroups(group,idx){
  255. //选择小组
  256. this.isCheckedGroups = false
  257. this.checkedGroupsIndex = idx
  258. this.groups.forEach((el, index) => {
  259. if (this.checkedGroupsIndex == index) {
  260. el.isChecked = true
  261. this.queryData.leaderId = group.leaderId
  262. this.getUserClubTeamsRroups(group.leaderId)
  263. } else {
  264. el.isChecked = false
  265. }
  266. })
  267. },
  268. choiceMembers(member, idx) {
  269. //选择组员
  270. this.checkedMemberIndex = idx
  271. this.members.forEach((el, index) => {
  272. if (this.checkedMemberIndex == index) {
  273. el.isChecked = true
  274. this.queryData.groupId = member.groupId
  275. } else {
  276. el.isChecked = false
  277. }
  278. })
  279. },
  280. bindPickerChange(type,e) {//选择筛选条件
  281. switch(type){
  282. case 1:
  283. this.priceFlagText = this.priceActions[e.target.value].name
  284. this.listQuery.validFlag = this.statusActions[e.target.value].value
  285. break
  286. case 2:
  287. this.intenFlagText = this.intenActions[e.target.value].name
  288. this.listQuery.featuredFlag = this.recommendActions[e.target.value].value
  289. break
  290. case 3:
  291. this.followStateText = this.stateActions[e.target.value].name
  292. this.listQuery.bigTypeId = this.classificationFirstList[e.target.value].value
  293. this.GetPrimarySecondaryClassification(this.listQuery.bigTypeId)
  294. break
  295. }
  296. },
  297. closeDrawer(){
  298. this.$parent.isScreenDrawer = false
  299. },
  300. handSearchConfirm(){
  301. //确定筛选
  302. this.$emit('handSearchConfirm', this.queryData)
  303. this.$parent.isScreenDrawer = false
  304. },
  305. bindStartDateChange(event){
  306. //开始时间
  307. console.log('开始时间==>',event.detail.value)
  308. this.queryData.startAddTime = event.detail.value
  309. },
  310. bindEndDateChange(event){
  311. //结束时间
  312. console.log('结束时间==>',event.detail.value)
  313. this.queryData.endAddTime = event.detail.value
  314. },
  315. SetScrollHeight() {
  316. let obj = {}
  317. const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
  318. uni.getSystemInfo({
  319. success: res => {
  320. this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
  321. this.drawerH = res.windowHeight - uni.upx2px(180) - this.height
  322. }
  323. })
  324. this.windowHeight = windowHeight - 1
  325. this.scrollHeight = windowHeight - 1
  326. },
  327. getDate(type) {
  328. const date = new Date()
  329. let year = date.getFullYear()
  330. let month = date.getMonth() + 1
  331. let day = date.getDate()
  332. if (type === 'start') {
  333. year = year - 1
  334. } else if (type === 'end') {
  335. year = year + 1
  336. }
  337. month = month > 9 ? month : '0' + month
  338. day = day > 9 ? day : '0' + day
  339. return `${year}-${month}-${day}`
  340. }
  341. }
  342. }
  343. </script>
  344. <style lang="scss">
  345. /*screen*/
  346. .drawer-container {
  347. width: 580rpx;
  348. height: 100%;
  349. padding: 80rpx 0;
  350. overflow: hidden;
  351. box-sizing: border-box;
  352. background-color: #FFFFFF;
  353. .drawer-title {
  354. width: 100%;
  355. height: 72rpx;
  356. line-height: 72rpx;
  357. box-sizing: border-box;
  358. padding: 0 30rpx;
  359. float: left;
  360. background-color: #f7f7f7;
  361. font-size: $font-size-26;
  362. color: #333333;
  363. font-weight: bold;
  364. text-align: left;
  365. }
  366. .drawer-main {
  367. width: 100%;
  368. height: auto;
  369. box-sizing: border-box;
  370. float: left;
  371. .drawer-main-name{
  372. width: 100%;
  373. height: 80rpx;
  374. line-height: 80rpx;
  375. text-align: left;
  376. font-size: $font-size-26;
  377. color: #333333;
  378. box-sizing: border-box;
  379. padding: 0 20rpx;
  380. font-weight: bold;
  381. }
  382. .drawer-main-time{
  383. width: 100%;
  384. height: 56rpx;
  385. box-sizing: border-box;
  386. .line{
  387. color: #999999;
  388. float: left;
  389. line-height: 56rpx;
  390. }
  391. .drawer-main-time-input{
  392. width: 228rpx;
  393. height: 56rpx;
  394. background: #F7F7F7;
  395. border-radius: 28rpx;
  396. box-sizing: border-box;
  397. padding: 0 20rpx;
  398. line-height: 56rpx;
  399. float: left;
  400. margin: 0 20rpx;
  401. position: relative;
  402. .input-text{
  403. display: block;
  404. height: 56rpx;
  405. font-size: 26rpx;
  406. color: #666666;
  407. }
  408. .icon-riqi{
  409. color: #E15616;
  410. display: block;
  411. width: 40rpx;
  412. height: 56rpx;
  413. position: absolute;
  414. right: 10rpx;
  415. top: 0;
  416. line-height: 56rpx;
  417. }
  418. }
  419. }
  420. .drawer-main-brand {
  421. width: 100%;
  422. height: auto;
  423. box-sizing: border-box;
  424. padding: 0 20rpx;
  425. background-color: #ffffff;
  426. .drawer-brand-list {
  427. width: 160rpx;
  428. height: 56rpx;
  429. line-height: 56rpx;
  430. text-align: center;
  431. font-size: 26rpx;
  432. background-color: #f7f7f7;
  433. color: #999999;
  434. border-radius: 30rpx;
  435. box-sizing: border-box;
  436. padding: 0 15rpx;
  437. float: left;
  438. margin: 12rpx 24rpx 12rpx 0;
  439. text-overflow: ellipsis;
  440. overflow: hidden;
  441. display: -webkit-box;
  442. -webkit-line-clamp: 1;
  443. line-clamp: 1;
  444. -webkit-box-orient: vertical;
  445. &.checked {
  446. background-color: #fef6f3;
  447. color: #e15616;
  448. }
  449. &:nth-child(3n) {
  450. margin-right: 0;
  451. }
  452. }
  453. }
  454. .drawer-main-radiov{
  455. width: 100%;
  456. height: auto;
  457. box-sizing: border-box;
  458. padding: 0 20rpx;
  459. .drawer-main-radio{
  460. width: 100%;
  461. height: 80rpx;
  462. box-sizing: border-box;
  463. padding: 0 10rpx;
  464. border: 1px solid rgba(0,0,0,0.2);
  465. border-radius: 6rpx;
  466. margin-bottom: 30rpx;
  467. position: relative;
  468. &.btn{
  469. border: none;
  470. margin-top: 40rpx;
  471. }
  472. .input{
  473. width: 100%;
  474. height: 80rpx;
  475. line-height: 80rpx;
  476. float: left;
  477. box-sizing: border-box;
  478. font-size: $font-size-24;
  479. color: #333333;
  480. padding: 0 10rpx;
  481. padding-right: 68rpx;
  482. }
  483. .iconfont{
  484. width: 50rpx;
  485. height: 80rpx;
  486. display: block;
  487. line-height: 80rpx;
  488. text-align: center;
  489. font-size: 30rpx;
  490. color: #999999;
  491. position: absolute;
  492. right: 0;
  493. top: 0;
  494. }
  495. }
  496. }
  497. }
  498. .drawer-input {
  499. width: 100%;
  500. float: left;
  501. box-sizing: border-box;
  502. padding: 24rpx 10rpx 0 10rpx;
  503. border: 1px solid rgba(0, 0, 0, 0.2);
  504. border-radius: 4rpx;
  505. position: relative;
  506. background-color: #ffffff;
  507. &.btn {
  508. border: none;
  509. display: flex;
  510. position: fixed;
  511. left: 0;
  512. bottom: 0;
  513. }
  514. .drawer-btn {
  515. width: 210rpx;
  516. height: 84rpx;
  517. border-radius: 42rpx;
  518. background: $btn-confirm;
  519. line-height: 84rpx;
  520. text-align: center;
  521. font-size: $font-size-26;
  522. color: #ffffff;
  523. flex: 1;
  524. margin: 0 10rpx;
  525. &.comfrim {
  526. background: $btn-confirm;
  527. }
  528. &.clear {
  529. background: #FFE6DC;
  530. color: $color-system;
  531. }
  532. }
  533. }
  534. }
  535. </style>