<template> <view class="searchContainer" :style="{'background': isBackThemeColor ? backgorundThemeColor || '#F1F5F9' : '#fff'}"> <view class="liveContent" :style="`border: 2rpx solid ${themeColor25};`"> <block v-if="isScreen && selectObj!=null"> <view class="leftDiv" @click="showPicker"> <view class="leftTex">{{selectObj.title}}</view> <image class="leftIcon" src="../../static/icons/icon_dropDown@2x.png" mode=""></image> </view> <view class="line"></view> </block> <block v-if="!isScreen"> <view class="leftDiv" @click="showOptionPicker"> <view class="leftTex">{{selectOption.title}}</view> <image class="leftIcon" src="../../static/icons/icon_dropDown@2x.png" mode=""></image> </view> <view class="line"></view> </block> <view class="searchIcon"> <image style="width: 100%; height: 100%; margin-top: 0; margin-left: 0;" src="../../static/icons/icon_search@2x.png" mode=""></image> </view> <!-- :style="`width: ${isScreen ? '280rpx' : '450rpx'};`" --> <input class="searchInput" v-model="keyword" confirm-type='search' type="text" maxlength="50" :placeholder="selectOption.placeholder" @confirm='searchAction' @focus="focusAtion" @blur="blurAction" /> <view v-if="keyword.length > 0" class="clearBtn" style="background: url(../../static/icons/lightGrayClearIcon.png) center/100% 100% no-repeat;" @click="clearAction"></view> <view class="clearBtn" v-else></view> <view class="searchBtn" :style="`background-color: ${themeColor};`" @click="searchAction">搜索</view> </view> <dm-picker-view ref="picker" :options="screenList" v-if="selectObj!=null" :value="selectObj.value" title="搜索台账" @confirm="confirmAction"></dm-picker-view> <dm-picker-view ref="optionPicker" :options="currentOption" v-if="!isScreen" :value="selectOption.value" title="搜索条件" @confirm="optionConfirm"></dm-picker-view> </view> </template> <script> import dmPickerView from './dmPickerView.vue' import menuCodeConfig from '../../menuCodeConfig/menuCodeConfig.js' export default { props: { placeholder: { type: String, default: '搜索姓名,手机号' }, isScreen: { type: Boolean, default: true }, selChartId: { type: String, default: '' }, houseList: { type: Array, default: () => { return [] } }, isBackThemeColor: { type: Boolean, default: false }, isJiTuanCeng: { //有没有选全集团 type: Boolean, default: false }, secondTab: [Number, String] }, data() { return { themeColor: '', themeColor25: '', backgorundThemeColor: '', tempScreenList: [{ title: '线上获客', chartId: 'huoke', isShow: false, value: 1, menuCode: menuCodeConfig.c_huoke_list }, { title: '获电情况', chartId: 'huodian', isShow: false, value: 2, menuCode: menuCodeConfig.c_huodian_list }, { title: '客户跟进', chartId: 'genjin', isShow: false, value: 3, menuCode: menuCodeConfig.c_genjin_list }, { title: '案场到访', chartId: 'daofang', isShow: false, value: 4, menuCode: menuCodeConfig.c_daofang_list }, { title: '客户成交', chartId: 'chengjiao', isShow: false, value: 5, menuCode: menuCodeConfig.c_chengjiao_list }, { title: '客户成交', chartId: 'chengjiao2', isShow: false, value: 5, menuCode: menuCodeConfig.c_chengjiao_list2 }, { title: '客户抢单', chartId: 'qiangdan', isShow: false, value: 6, menuCode: menuCodeConfig.c_qiangdan_list }, { title: '公客分派', chartId: 'kehufenpai', isShow: false, value: 7, menuCode: menuCodeConfig.c_kehufenpai_list }, { title: '特例审核', chartId: 'telishenhe', isShow: false, value: 8, menuCode: menuCodeConfig.c_telishenhe_list }, { title: '渠道认证', chartId: 'renzheng', isShow: false, value: 9, menuCode: menuCodeConfig.c_renzheng_list }, { title: '渠道报备', chartId: 'baobei', isShow: false, value: 10, menuCode: menuCodeConfig.c_baobei_list }, { title: '到访凭证', chartId: 'daofangpingzheng', isShow: false, value: 11, menuCode: menuCodeConfig.c_daofangpingzheng_list }, { title: '结佣凭证', chartId: 'jieyongpingzheng', isShow: false, value: 12, menuCode: menuCodeConfig.c_jieyongpingzheng_list }, { title: '结佣凭证', chartId: 'jieyongpingzheng2', isShow: false, value: 13, menuCode: menuCodeConfig.c_jieyongpingzheng_list2 }, { title: '邀约台账', chartId: 'yaoyuetaizhang', isShow: false, value: 14, menuCode: menuCodeConfig.c_yaoyue_list }, { title: '获券核销', chartId: 'huoquanhexiao', isShow: false, value: 15, menuCode: menuCodeConfig.c_hexiao }, { title: '识别结果', chartId: 'shibiejieguo', isShow: false, value: 16, menuCode: menuCodeConfig.c_shibiejieguo_list }, { title: '到访抓拍', chartId: 'daofangjilu', isShow: false, value: 17, menuCode: menuCodeConfig.c_daofangjilu_list }, { title: '认证结果', chartId: 'renzhengjilu', isShow: false, value: 18, menuCode: menuCodeConfig.c_renzhengjilu_list }, { title: '活动数据', chartId: 'huodongshuju', isShow: false, value: 19, menuCode: menuCodeConfig.c_activeData } ], screenList: [], selectObj: null, keyword: '', isSingleProject: false, backgorundThemeColor: '', searctOptions: [{ menuId: 'huoke', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }] }, { menuId: 'huodian', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }, { title: '关系人', value: 2 } ] }, { menuId: 'genjin', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }, { title: '顾问', value: 1 } ] }, { menuId: 'daofang', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }, { title: '顾问', value: 1 }, { title: '关系人', value: 2 } ] }, { menuId: 'chengjiao', placeholder: '可搜索姓名、手机号码', items: [{ title: '客户', value: 0 } // { // title: '顾问', // value: 1 // }, // { // title: '关系人', // value: 2 // } ] }, { menuId: 'chengjiao2', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }, { title: '顾问', value: 1 }, { title: '关系人', value: 2 }, { title: '成交房间', value: 3 } ] }, { menuId: 'kehufenpai', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }, { title: '关系人', value: 2 }, { title: '上次跟进顾问', value: 3 } ] }, { menuId: 'qiangdan', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }] }, { menuId: 'telishenhe', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }] }, { menuId: 'daofangpingzheng', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }, { title: '顾问', value: 1 }, { title: '关系人', value: 2 } ] }, { menuId: 'jieyongpingzheng', placeholder: '可搜索客户姓名、手机号或后四位', items: [{ title: '客户', value: 0 }, { title: '顾问', value: 1 }, { title: '关系人', value: 2 } ] }, { menuId: 'jieyongpingzheng2', placeholder: '可搜索客户姓名、手机号或后四位', items: [{ title: '客户', value: 0 } // { // title: '顾问', // value: 1 // }, // { // title: '关系人', // value: 2 // } ] }, { menuId: 'yaoyuetaizhang', placeholder: '可搜索客户姓名、手机号或后四位', items: [{ title: '客户', value: 0 }, { title: '邀约人', value: 1 } ] }, { menuId: 'huoquanhexiao', placeholder: '可搜索完整号码或后四位号码', items: [{ title: '客户', value: 0 }, { title: '活动名称', value: 1 } ] }, { menuId: 'renzheng', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }, { title: '关系人', value: 2 } ] }, { menuId: 'baobei', placeholder: '可搜索姓名、完整号码或后四位号码', items: [{ title: '客户', value: 0 }, { title: '顾问', value: 1 }, { title: '关系人', value: 2 } ] }, { menuId: 'shibiejieguo', placeholder: '输入客户ID搜索', items: [{ title: '客户', value: 0 }] }, { menuId: 'renzhengjilu', placeholder: '输入客户姓名、身份证号搜索', items: [{ title: '客户', value: 0 }] }, { menuId: 'huodongshuju', placeholder: '请输入...', items: [ { title: '页面ID', value: 0 }, { title: '页面名称', value: 1 }, { title: '活动ID', value: 2 }, { title: '活动名称', value: 3 } ] } ], selectOption: { title: '客户', menuId: 'huoke', placeholder: '可搜索姓名、完整号码或后四位号码', value: 0 }, currentOption: [], roleMenuList: [] } }, mounted() { let globalData = getApp().globalData this.themeColor = globalData.themeColor this.themeColor25 = globalData.themeColor25 this.backgorundThemeColor = globalData.backgorundThemeColor; var self = this uni.getStorage({ key: 'userInfo', success: (res) => { if (res.data) { self.roleMenuList = res.data.roleMenuList || [] self.reloadMenuStatus(self.roleMenuList) } } }) this.reloadSecondAction() this.keyword = uni.getStorageSync('keyword') if (this.keyword.length > 0) { this.$emit('topSearchAction', null, this.keyword) } }, methods: { reloadMenuStatus(list) { var self = this list.forEach((item, index) => { if (item.childMenus && item.childMenus.length > 0) { item.childMenus.forEach((item1, index1) => { self.tempScreenList.forEach((scrItem) => { if (item.menuCode == scrItem.menuCode) { scrItem.isShow = true if (self.selectObj && self.selectObj.chartId == scrItem.chartId) { self.selectObj.isShow = true } } else if (item1.menuCode == scrItem.menuCode) { // console.log(scrItem.title + ':' + scrItem.menuCode + ':' + item.menuCode) scrItem.isShow = true if (self.selectObj && self.selectObj.chartId == scrItem.chartId) { self.selectObj.isShow = true } } }) }) } }) this.screenList = [] this.tempScreenList.forEach((item, index) => { if (item.isShow == true) { self.screenList.push(item) if (self.selectObj == null) { self.selectObj = item } } }) this.screenList = [] this.tempScreenList.forEach((item, index) => { if (item.isShow == true) { self.screenList.push(item) if (self.selectObj == null) { self.selectObj = item } } }) }, showPicker() { this.$refs.picker.show() }, confirmAction(e) { this.selectObj = e.selItem }, showOptionPicker() { this.$refs.optionPicker.show() }, optionConfirm(e) { if(this.selectOption.menuId=="kehufenpai"){ if(e.selItem.title=='上次跟进顾问'){ this.selectOption.placeholder = '请输入上次跟进顾问姓名' }else{ this.selectOption.placeholder = '可搜索姓名、完整号码或后四位号码' } } else if(this.selectOption.menuId=="huoquanhexiao"){ if(e.selItem.title=='客户'){ this.selectOption.placeholder = '可搜索完整号码或后四位号码' }else{ this.selectOption.placeholder = '请输入活动名称进行搜索' } } this.selectOption.title = e.selItem.title this.selectOption.value = e.selItem.value this.$emit('selectSearchOption', e.selItem.value) }, searchAction() { // this.reloadSelectObj() this.reloadMenuStatus(this.roleMenuList) if (this.keyword == '') { uni.showToast({ icon: 'none', title: '请输入内容后搜索' }) // return } if (this.selectObj && !this.selectObj.isShow) { uni.showToast({ icon: 'none', title: '暂无数据,请在其他台账尝试搜索' }) return } if (!this.isSingleProject && !(this.selChartId == 'huoke'&&this.secondTab==4) && this.selChartId!='huodongshuju') { uni.showToast({ icon: 'none', title: '请选择项目后再进行搜索' }) return } uni.onSocketOpen(function() { uni.closeSocket({ complete(res) { // console.log('关闭socket', res) // debugger } }) }) if (this.$myRequest.requestTask) { this.$myRequest.requestTask.abort() } this.$emit('topSearchAction', this.selectObj, this.keyword) if (this.isScreen == true) { this.keyword = '' } }, clearAction() { this.keyword = '' uni.setStorageSync('keyword', '') this.$emit('topSearchAction', this.selectObj, '', true) this.$emit('searchFocus', false) }, reloadSelectObj() { var self = this this.tempScreenList.forEach((item) => { if (item.chartId == this.selChartId) { item.isShow = true self.selectObj = JSON.parse(JSON.stringify(item)) } }) this.searctOptions.forEach((item, idx) => { if (item.menuId == self.selChartId) { self.selectOption = { title: self.selChartId == 'huodongshuju' ? '页面ID' : '客户', menuId: item.menuId, placeholder: item.placeholder, value: 0 } self.currentOption = item.items || [] this.$emit('selectSearchOption', 0) } }) }, focusAtion() { // 关闭socket uni.onSocketOpen(function() { uni.closeSocket({ complete(res) { console.log('关闭socket', res) } }) }) // console.log('this.$myRequest.requestTask:', this.$myRequest.requestTask) if (this.$myRequest.requestTask) { this.$myRequest.requestTask.abort() } this.$emit('searchFocus', true) }, blurAction() { if (this.keyword.length == 0) { this.$emit('searchFocus', false) } }, reloadScreenList() { var self = this this.screenList = [] if (this.isJiTuanCeng) { this.tempScreenList.forEach((item) => { if ((item.chartId == 'huoke' || item.chartId == 'huodian') && item.isShow) { self.screenList.push(item) } }) } else { this.tempScreenList.forEach((item) => { if (item.isShow) { self.screenList.push(item) } }) } }, reloadSecondAction() { if (this.selChartId != 'huoke') { return } if (this.secondTab == 4) { this.searctOptions[0].items[0] = { title: '项目', value: 0 } this.selectOption.title = '项目' this.selectOption.placeholder = '按项目名称模糊查询' } else { this.searctOptions[0].items[0] = { title: '客户', value: 0 } this.selectOption.title = '客户' this.selectOption.placeholder = '可搜索姓名、完整号码或后四位号码' } this.$forceUpdate() } }, watch: { selChartId: { handler(newName, oldName) { this.reloadSelectObj() if (!oldName || oldName.length == 0) { return } if (!this.isScreen) { var self = this var tempKeyword = uni.getStorageSync('keyword') if (this.keyword != tempKeyword) { setTimeout(function() { self.keyword = tempKeyword self.$emit('topSearchAction', null, self.keyword) }, 500); } } this.reloadSecondAction() }, immediate: true }, houseList: { handler(e) { if (e.length == 1) { this.isSingleProject = true } else { this.isSingleProject = false } if (e.length == 0 && this.isJiTuanCeng) { this.isSingleProject = true } }, deep: true, immediate: true }, isJiTuanCeng: { //有没有选全集团 handler(e) { console.log('e:', e) var placeholder = '可搜索姓名、完整号码或后四位号码' if (e == true) { placeholder = '可搜索姓名、完整号码' this.searctOptions[1].items = [{ title: '客户', value: 0 }] if (this.houseList.length == 0) { this.isSingleProject = true } } else { this.searctOptions[1].items = [{ title: '客户', value: 0 }, { title: '关系人', value: 2 } ] } this.searctOptions[0].placeholder = placeholder this.searctOptions[1].placeholder = placeholder if (this.selChartId == 'huoke' || this.selChartId == 'huodian') { this.selectOption.placeholder = placeholder } this.reloadScreenList() this.$forceUpdate() }, deep: true, immediate: true }, secondTab: { handler(e) { this.reloadSecondAction() }, immediate: true } }, components: { dmPickerView } } </script> <style scoped lang="scss"> .searchContainer { width: 100%; padding: 20rpx; box-sizing: border-box; // background-color: #F4F7F7; .liveContent { height: 64rpx; min-height: 64rpx; display: flex; align-items: center; justify-content: space-between; font-family: Verdana; border-radius: 32rpx; white-space: nowrap; padding-left: 20rpx; box-sizing: border-box; background-color: #FFFFFF; .leftDiv { // margin-left: 20rpx; height: 100%; display: flex; align-items: center; font-size: 24rpx; .leftTex { width: 90rpx; min-width: 90rpx; text-align: center; } .leftIcon { width: 28rpx; height: 28rpx; margin-left: 8rpx; } } .line { width: 2rpx; height: 26rpx; background-color: #E0E0E0; } .searchIcon { width: 44rpx; min-width: 44rpx; height: 44rpx; // background-color: #DD524D; } .searchInput { width: 360rpx; min-width: 360rpx; max-width: 360rpx; font-size: 24rpx; } .clearBtn { width: 32rpx; height: 32rpx; } .searchBtn { font-size: 24rpx; border-radius: 32rpx; height: 100%; width: 112rpx; text-align: center; line-height: 60rpx; color: #FFFFFF; } } } </style>