cm-club-drawer.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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="{
  9. paddingTop: CustomBar - StatusBar + 8 + 'px',
  10. paddingBottom: isIphoneX ? '180rpx' : '146rpx'
  11. }"
  12. >
  13. <scroll-view class="tui-drawer-scroll" scroll-y :style="{ height: drawerH + 'px' }">
  14. <view class="drawer-title">更多筛选</view>
  15. <view class="drawer-main">
  16. <view class="drawer-main-name">组员:</view>
  17. <view class="drawer-main-radiov">
  18. <view class="drawer-main-radio">
  19. <picker
  20. @change="bindPickerChange(1, $event)"
  21. :value="index"
  22. :range="priceActions"
  23. range-key="name"
  24. >
  25. <input
  26. class="input"
  27. type="text"
  28. disabled="false"
  29. v-model="priceFlagText"
  30. value=""
  31. placeholder="请选择"
  32. />
  33. <text class="iconfont icon-xiangyou"></text>
  34. </picker>
  35. </view>
  36. </view>
  37. </view>
  38. </scroll-view>
  39. <view class="drawer-input btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
  40. <view class="drawer-btn clear" @click="closeDrawer">取消</view>
  41. <view class="drawer-btn comfrim" @click="handSearchConfirm">确定</view>
  42. </view>
  43. </view>
  44. </tui-drawer>
  45. </view>
  46. </template>
  47. <script>
  48. export default {
  49. name: 'rightDrawer',
  50. props: {
  51. rightDrawer: {
  52. type: Boolean,
  53. default: false
  54. }
  55. },
  56. data() {
  57. return {
  58. CustomBar: this.CustomBar, // 顶部导航栏高度
  59. StatusBar: this.StatusBar,
  60. isIphoneX: this.$store.state.isIphoneX,
  61. height: 0,
  62. drawerH: 0, // 抽屉内部scrollview高度
  63. categorys: [],
  64. checkedCategorysList: [],
  65. priceFlagText: '',
  66. queryData: {
  67. endAddTime: '',
  68. consult: '',
  69. leaderId: 0,
  70. groupId: 0,
  71. newDeal: 0,
  72. status: 0,
  73. pinceSensitve: 0, //价格敏感度
  74. satisfied: 0, // 意向程度
  75. followup: 0 // 跟进状态
  76. },
  77. priceActions: []
  78. }
  79. },
  80. created() {
  81. this.SetScrollHeight()
  82. this.userSellerServiceTeam()
  83. },
  84. computed: {},
  85. methods: {
  86. async userSellerServiceTeam() {
  87. //获取组员协销列表
  88. const userInfo = await this.$api.getStorage()
  89. this.SellerService.userSellerServiceTeam({ spId: userInfo.serviceProviderId })
  90. .then(response => {
  91. this.priceActions = response.data
  92. })
  93. .catch(error => {
  94. console.log('=========>获取组员协销列表异常')
  95. })
  96. },
  97. bindPickerChange(type, e) {
  98. //选择筛选条件
  99. switch (type) {
  100. case 1:
  101. this.priceFlagText = this.priceActions[e.target.value].name
  102. this.queryData.pinceSensitve = this.priceActions[e.target.value].value
  103. break
  104. }
  105. },
  106. closeDrawer() {
  107. this.$parent.rightDrawer = false
  108. },
  109. handSearchConfirm() {
  110. //确定筛选
  111. this.$emit('handSearchConfirm', this.queryData)
  112. this.$parent.rightDrawer = false
  113. },
  114. SetScrollHeight() {
  115. let obj = {}
  116. const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
  117. uni.getSystemInfo({
  118. success: res => {
  119. this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
  120. this.drawerH = res.windowHeight - uni.upx2px(180) - this.height
  121. }
  122. })
  123. this.windowHeight = windowHeight - 1
  124. this.scrollHeight = windowHeight - 1
  125. }
  126. }
  127. }
  128. </script>
  129. <style lang="scss">
  130. /*screen*/
  131. .drawer-container {
  132. width: 580rpx;
  133. height: 100%;
  134. padding: 80rpx 0;
  135. overflow: hidden;
  136. box-sizing: border-box;
  137. background-color: #ffffff;
  138. .drawer-title {
  139. width: 100%;
  140. height: 72rpx;
  141. line-height: 72rpx;
  142. box-sizing: border-box;
  143. padding: 0 30rpx;
  144. float: left;
  145. background-color: #f7f7f7;
  146. font-size: $font-size-26;
  147. color: #333333;
  148. font-weight: bold;
  149. text-align: left;
  150. }
  151. .drawer-main {
  152. width: 100%;
  153. height: auto;
  154. box-sizing: border-box;
  155. float: left;
  156. .drawer-main-name {
  157. width: 100%;
  158. height: 80rpx;
  159. line-height: 80rpx;
  160. text-align: left;
  161. font-size: $font-size-26;
  162. color: #333333;
  163. box-sizing: border-box;
  164. padding: 0 20rpx;
  165. font-weight: bold;
  166. }
  167. .drawer-main-radiov {
  168. width: 100%;
  169. height: auto;
  170. box-sizing: border-box;
  171. padding: 0 20rpx;
  172. .drawer-main-radio {
  173. width: 100%;
  174. height: 80rpx;
  175. box-sizing: border-box;
  176. padding: 0 10rpx;
  177. border: 1px solid rgba(0, 0, 0, 0.2);
  178. border-radius: 6rpx;
  179. margin-bottom: 30rpx;
  180. position: relative;
  181. &.btn {
  182. border: none;
  183. margin-top: 40rpx;
  184. }
  185. .input {
  186. width: 100%;
  187. height: 80rpx;
  188. line-height: 80rpx;
  189. float: left;
  190. box-sizing: border-box;
  191. font-size: $font-size-24;
  192. color: #333333;
  193. padding: 0 10rpx;
  194. padding-right: 68rpx;
  195. }
  196. .iconfont {
  197. width: 50rpx;
  198. height: 80rpx;
  199. display: block;
  200. line-height: 80rpx;
  201. text-align: center;
  202. font-size: 30rpx;
  203. color: #999999;
  204. position: absolute;
  205. right: 0;
  206. top: 0;
  207. }
  208. }
  209. }
  210. }
  211. .drawer-input {
  212. width: 100%;
  213. float: left;
  214. box-sizing: border-box;
  215. padding: 24rpx 10rpx 0 10rpx;
  216. border: 1px solid rgba(0, 0, 0, 0.2);
  217. border-radius: 4rpx;
  218. position: relative;
  219. background-color: #ffffff;
  220. &.btn {
  221. border: none;
  222. display: flex;
  223. position: fixed;
  224. left: 0;
  225. bottom: 0;
  226. }
  227. .drawer-btn {
  228. width: 210rpx;
  229. height: 84rpx;
  230. border-radius: 42rpx;
  231. background: $btn-confirm;
  232. line-height: 84rpx;
  233. text-align: center;
  234. font-size: $font-size-26;
  235. color: #ffffff;
  236. flex: 1;
  237. margin: 0 10rpx;
  238. &.comfrim {
  239. background: $btn-confirm;
  240. }
  241. &.clear {
  242. background: #ffe6dc;
  243. color: $color-system;
  244. }
  245. }
  246. }
  247. }
  248. </style>