|
@@ -0,0 +1,432 @@
|
|
|
+<template>
|
|
|
+ <view class="drawer-content">
|
|
|
+ <!--右抽屉-->
|
|
|
+ <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
|
|
|
+ <view
|
|
|
+ class="drawer-container clearfix"
|
|
|
+ scroll-y
|
|
|
+ :style="{ paddingTop: '0px', 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-time">
|
|
|
+ <view class="drawer-main-time-input">
|
|
|
+ <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
|
|
|
+ <text class="input-text">{{ startTime }}</text>
|
|
|
+ </picker>
|
|
|
+ <text class="iconfont icon-riqi"></text>
|
|
|
+ </view>
|
|
|
+ <view class="line">-</view>
|
|
|
+ <view class="drawer-main-time-input">
|
|
|
+ <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
|
|
|
+ <text class="input-text">{{ endTime }}</text>
|
|
|
+ </picker>
|
|
|
+ <text class="iconfont icon-riqi"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="drawer-main-name">咨询类别</view>
|
|
|
+ <view class="drawer-main-brand clearfix">
|
|
|
+ <view
|
|
|
+ class="drawer-brand-list"
|
|
|
+ :class="isCheckedCategorys ? 'checked' : ''"
|
|
|
+ @click="choiceCategorysAll"
|
|
|
+ >全部</view
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="drawer-brand-list"
|
|
|
+ :class="category.isChecked ? 'checked' : ''"
|
|
|
+ v-for="(category, index) in categorys"
|
|
|
+ :key="index"
|
|
|
+ @click="choiceCategorys(category, index)"
|
|
|
+ >
|
|
|
+ {{ category.name }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="drawer-main-name">小组</view>
|
|
|
+ <view class="drawer-main-brand clearfix">
|
|
|
+ <view
|
|
|
+ class="drawer-brand-list"
|
|
|
+ :class="isCheckedGroups ? 'checked' : ''"
|
|
|
+ @click="choiceGroupsAll"
|
|
|
+ >全部</view
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="drawer-brand-list"
|
|
|
+ :class="group.isChecked ? 'checked' : ''"
|
|
|
+ v-for="(group, index) in groups"
|
|
|
+ :key="index"
|
|
|
+ @click="choiceGroups(group, index)"
|
|
|
+ >
|
|
|
+ {{ group.name }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="drawer-main-name">组员</view>
|
|
|
+ <view class="drawer-main-brand clearfix">
|
|
|
+ <view
|
|
|
+ class="drawer-brand-list"
|
|
|
+ :class="member.isChecked ? 'checked' : ''"
|
|
|
+ v-for="(member, index) in members"
|
|
|
+ :key="index"
|
|
|
+ @click="choiceMembers(member, index)"
|
|
|
+ >
|
|
|
+ {{ member.name }}
|
|
|
+ </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() {
|
|
|
+ const currentDate = this.getDate({
|
|
|
+ format: true
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
+ isIphoneX: this.$store.state.isIphoneX,
|
|
|
+ isCheckedCategorys:false,
|
|
|
+ isCheckedGroups:false,
|
|
|
+ checkedIndex: 0,
|
|
|
+ checkedGroupsIndex: 0,
|
|
|
+ checkedCategorysIndex: 0,
|
|
|
+ checkedMemberIndex: 0,
|
|
|
+ isShowClose: false,
|
|
|
+ listQuery: {
|
|
|
+ serviceProviderId: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100
|
|
|
+ },
|
|
|
+ dataList: [],
|
|
|
+ date: currentDate,
|
|
|
+ startTime:'开始日期',
|
|
|
+ endTime:'结束日期',
|
|
|
+ height: 0,
|
|
|
+ drawerH: 0 ,// 抽屉内部scrollview高度
|
|
|
+ categorys:[
|
|
|
+ {name:'产品',isChecked:false},
|
|
|
+ {name:'仪器',isChecked:false},
|
|
|
+ {name:'耗材',isChecked:false},
|
|
|
+ {name:'二手',isChecked:false},
|
|
|
+ {name:'升级会员',isChecked:false},
|
|
|
+ {name:'超级会员',isChecked:false},
|
|
|
+ {name:'其他',isChecked:false},
|
|
|
+ ],
|
|
|
+ groups:[
|
|
|
+ {name:'张顺星',isChecked:false},
|
|
|
+ {name:'高琳琳',isChecked:false},
|
|
|
+ ],
|
|
|
+ members:[
|
|
|
+ {name:'张三',isChecked:false},
|
|
|
+ {name:'张三',isChecked:false},
|
|
|
+ {name:'张三',isChecked:false},
|
|
|
+ {name:'张三',isChecked:false},
|
|
|
+ {name:'张三',isChecked:false},
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.SetScrollHeight()
|
|
|
+ this.initclubList()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ startDate() {
|
|
|
+ return this.getDate('start')
|
|
|
+ },
|
|
|
+ endDate() {
|
|
|
+ return this.getDate('end')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initclubList() {
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.listQuery.serviceProviderId = userInfo.serviceProviderId
|
|
|
+ this.UserService.getUserClubVisitorList(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ if (data.results && data.results.length > 0) {
|
|
|
+ this.dataList = data.results.map((el,index)=>{
|
|
|
+ el.isChecked = false
|
|
|
+ return el
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ choiceCategorysAll() {
|
|
|
+ // 点击选择全部分类
|
|
|
+ this.isCheckedCategorys = true
|
|
|
+ // this.listQuery.brandIds = ''
|
|
|
+ this.categorys.forEach(el => {
|
|
|
+ el.isChecked = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ choiceCategorys(category,idx){
|
|
|
+ //选择分类
|
|
|
+ this.isCheckedCategorys = false
|
|
|
+ this.checkedCategorysIndex = idx
|
|
|
+ this.categorys.forEach((el, index) => {
|
|
|
+ if (this.checkedCategorysIndex == index) {
|
|
|
+ el.isChecked = true
|
|
|
+ } else {
|
|
|
+ el.isChecked = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ choiceGroupsAll() {
|
|
|
+ // 点击选择全部小组
|
|
|
+ this.isCheckedGroups = true
|
|
|
+ // this.listQuery.brandIds = ''
|
|
|
+ this.groups.forEach(el => {
|
|
|
+ el.isChecked = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ choiceGroups(group,idx){
|
|
|
+ //选择小组
|
|
|
+ this.isCheckedGroups = false
|
|
|
+ this.checkedGroupsIndex = idx
|
|
|
+ this.groups.forEach((el, index) => {
|
|
|
+ if (this.checkedGroupsIndex == index) {
|
|
|
+ el.isChecked = true
|
|
|
+ } else {
|
|
|
+ el.isChecked = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ choiceMembers(member, idx) {
|
|
|
+ //选择组员
|
|
|
+ this.checkedMemberIndex = idx
|
|
|
+ this.members.forEach((el, index) => {
|
|
|
+ if (this.checkedMemberIndex == index) {
|
|
|
+ el.isChecked = true
|
|
|
+ } else {
|
|
|
+ el.isChecked = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onShowClose() {
|
|
|
+ //输入框失去焦点时触发
|
|
|
+ if (this.listQuery.name != '') {
|
|
|
+ this.isShowClose = true
|
|
|
+ } else {
|
|
|
+ this.isShowClose = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ delInputText() {
|
|
|
+ //清除输入框内容
|
|
|
+ this.listQuery.name = ''
|
|
|
+ this.isShowClose = false
|
|
|
+ },
|
|
|
+ closeDrawer(){
|
|
|
+ this.$parent.isScreenDrawer = false
|
|
|
+ },
|
|
|
+ handSearchConfirm(){
|
|
|
+ //确定筛选
|
|
|
+ this.$emit('handSearchConfirm', clubInfo)
|
|
|
+ },
|
|
|
+ bindStartDateChange(event){
|
|
|
+ //开始时间
|
|
|
+ console.log('开始时间==>',event.detail.value)
|
|
|
+ this.startTime = event.detail.value
|
|
|
+ },
|
|
|
+ bindEndDateChange(event){
|
|
|
+ //结束时间
|
|
|
+ console.log('结束时间==>',event.detail.value)
|
|
|
+ this.endTime = event.detail.value
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ getDate(type) {
|
|
|
+ const date = new Date()
|
|
|
+ let year = date.getFullYear()
|
|
|
+ let month = date.getMonth() + 1
|
|
|
+ let day = date.getDate()
|
|
|
+
|
|
|
+ if (type === 'start') {
|
|
|
+ year = year - 60
|
|
|
+ } else if (type === 'end') {
|
|
|
+ year = year + 2
|
|
|
+ }
|
|
|
+ month = month > 9 ? month : '0' + month
|
|
|
+ day = day > 9 ? day : '0' + day
|
|
|
+ return `${year}-${month}-${day}`
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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;
|
|
|
+ }
|
|
|
+ .drawer-main-time{
|
|
|
+ width: 100%;
|
|
|
+ height: 56rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .line{
|
|
|
+ color: #999999;
|
|
|
+ float: left;
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+ .drawer-main-time-input{
|
|
|
+ width: 228rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ float: left;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ position: relative;
|
|
|
+ .input-text{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .icon-riqi{
|
|
|
+ color: #E15616;
|
|
|
+ display: block;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 10rpx;
|
|
|
+ top: 0;
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .drawer-main-brand {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ .drawer-brand-list {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ color: #999999;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ float: left;
|
|
|
+ margin: 12rpx 24rpx 12rpx 0;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ &.checked {
|
|
|
+ background-color: #fef6f3;
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ &:nth-child(3n) {
|
|
|
+ margin-right: 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>
|