123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- <template>
- <view class="drawer-content">
- <!--右抽屉-->
- <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
- <view
- class="drawer-container clearfix"
- scroll-y
- :style="{ paddingTop: (CustomBar-StatusBar+8) +'px', paddingBottom: isIphoneX ? '180rpx' : '146rpx' }"
- >
- <scroll-view class="tui-drawer-scroll" scroll-y :style="{ height: drawerH + 'px' }">
- <view class="drawer-title">更多筛选</view>
- <view class="drawer-main">
- <view class="drawer-main-name">组员:</view>
- <view class="drawer-main-radiov">
- <view class="drawer-main-radio">
- <picker @change="bindPickerChange(1,$event)" :value="index" :range="priceActions" range-key="name">
- <input class="input" type="text" disabled="false" v-model="priceFlagText" value="" placeholder="请选择"/>
- <text class="iconfont icon-xiangyou"></text>
- </picker>
- </view>
- </view>
- </view>
- </scroll-view>
- <view class="drawer-input btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
- <view class="drawer-btn clear" @click="closeDrawer">取消</view>
- <view class="drawer-btn comfrim" @click="handSearchConfirm">确定</view>
- </view>
- </view>
- </tui-drawer>
- </view>
- </template>
- <script>
- export default {
- name: 'rightDrawer',
- props: {
- rightDrawer: {
- type: Boolean,
- default: false
- }
- },
- data() {
- return {
- CustomBar: this.CustomBar, // 顶部导航栏高度
- StatusBar: this.StatusBar,
- isIphoneX: this.$store.state.isIphoneX,
- manager:0,
- leaderId:0,
- height: 0,
- drawerH: 0 ,// 抽屉内部scrollview高度
- categorys:[],
- checkedCategorysList:[],
- priceFlagText:'',
- queryData:{
- endAddTime:'',
- consult:'',
- leaderId:0,
- groupId:0,
- newDeal:0,
- status:0,
- pinceSensitve:0,//价格敏感度
- satisfied:0,// 意向程度
- followup:0,// 跟进状态
- },
- priceActions:[
- {name:'全部',value:0},
- {name:'敏感',value:1},
- {name: '适中',value:2},
- {name: '不敏感',value:3},
- {name: '不明确',value:4}
- ],
- }
- },
- created() {
- this.SetScrollHeight()
- this.getUserClubConsults()
- },
- computed: {},
- methods: {
- async getUserClubConsults() {
- const userInfo = await this.$api.getStorage()
- this.manager = userInfo.manager ? userInfo.manager : 0
- this.leaderId = userInfo.leaderId ? userInfo.leaderId : 0
- //查询咨询类别
- this.UserService.getUserClubConsults()
- .then(response => {
- this.categorys = response.data.map((el, index) => {
- el.isChecked = false
- return el
- })
- if(this.manager > 0){
- this.getUserClubTeams()
- }
- if(this.leaderId > 0){
- this.getUserClubTeamsRroups(this.leaderId)
- }
- })
- .catch(error => {
- console.log('=========>获取咨询类别列表失败')
- })
- },
- bindPickerChange(type,e) {//选择筛选条件
- switch(type){
- case 1:
- this.priceFlagText = this.priceActions[e.target.value].name
- this.queryData.pinceSensitve = this.priceActions[e.target.value].value
- break
- }
- },
- closeDrawer(){
- this.$parent.rightDrawer = false
- },
- handSearchConfirm(){
- //确定筛选
- this.$emit('handSearchConfirm', this.queryData)
- this.$parent.rightDrawer = false
- },
- SetScrollHeight() {
- let obj = {}
- const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
- uni.getSystemInfo({
- success: res => {
- this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
- this.drawerH = res.windowHeight - uni.upx2px(180) - this.height
- }
- })
- this.windowHeight = windowHeight - 1
- this.scrollHeight = windowHeight - 1
- }
- }
- }
- </script>
- <style lang="scss">
- /*screen*/
- .drawer-container {
- width: 580rpx;
- height: 100%;
- padding: 80rpx 0;
- overflow: hidden;
- box-sizing: border-box;
- background-color: #FFFFFF;
- .drawer-title {
- width: 100%;
- height: 72rpx;
- line-height: 72rpx;
- box-sizing: border-box;
- padding: 0 30rpx;
- float: left;
- background-color: #f7f7f7;
- font-size: $font-size-26;
- color: #333333;
- font-weight: bold;
- text-align: left;
- }
- .drawer-main {
- width: 100%;
- height: auto;
- box-sizing: border-box;
- float: left;
- .drawer-main-name{
- width: 100%;
- height: 80rpx;
- line-height: 80rpx;
- text-align: left;
- font-size: $font-size-26;
- color: #333333;
- box-sizing: border-box;
- padding: 0 20rpx;
- font-weight: bold;
- }
- .drawer-main-radiov{
- width: 100%;
- height: auto;
- box-sizing: border-box;
- padding: 0 20rpx;
- .drawer-main-radio{
- width: 100%;
- height: 80rpx;
- box-sizing: border-box;
- padding: 0 10rpx;
- border: 1px solid rgba(0,0,0,0.2);
- border-radius: 6rpx;
- margin-bottom: 30rpx;
- position: relative;
- &.btn{
- border: none;
- margin-top: 40rpx;
- }
- .input{
- width: 100%;
- height: 80rpx;
- line-height: 80rpx;
- float: left;
- box-sizing: border-box;
- font-size: $font-size-24;
- color: #333333;
- padding: 0 10rpx;
- padding-right: 68rpx;
- }
- .iconfont{
- width: 50rpx;
- height: 80rpx;
- display: block;
- line-height: 80rpx;
- text-align: center;
- font-size: 30rpx;
- color: #999999;
- position: absolute;
- right: 0;
- top: 0;
- }
- }
- }
- }
- .drawer-input {
- width: 100%;
- float: left;
- box-sizing: border-box;
- padding: 24rpx 10rpx 0 10rpx;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 4rpx;
- position: relative;
- background-color: #ffffff;
- &.btn {
- border: none;
- display: flex;
- position: fixed;
- left: 0;
- bottom: 0;
- }
- .drawer-btn {
- width: 210rpx;
- height: 84rpx;
- border-radius: 42rpx;
- background: $btn-confirm;
- line-height: 84rpx;
- text-align: center;
- font-size: $font-size-26;
- color: #ffffff;
- flex: 1;
- margin: 0 10rpx;
- &.comfrim {
- background: $btn-confirm;
- }
- &.clear {
- background: #FFE6DC;
- color: $color-system;
- }
- }
- }
- }
- </style>
|