541 lines
13 KiB
Vue
541 lines
13 KiB
Vue
<template>
|
||
<view class="select_warp">
|
||
<view class="manage_tab">
|
||
<view class="tab_array">
|
||
<image :src="BASE_IMG_URL+'ss.png'" mode="scaleToFill"></image>
|
||
<input @confirm="doSearch" type="text" placeholder-style="color:#999;"
|
||
:class="name ? 'fontactive' : ''" v-model="name" placeholder="门店名称" class="li_box" />
|
||
</view>
|
||
<view class="tab_screen" @click="screenClick">
|
||
<image :src="BASE_IMG_URL+'shaixuan.png'" mode="scaleToFill"></image>
|
||
</view>
|
||
</view>
|
||
<view class="" style="height:80rpx;"></view>
|
||
<uni-popup ref="popup" type="top" background-color="#fff">
|
||
<scroll-view scroll-y class="scrollbox" style="height:800rpx;background:#fff;">
|
||
<!--筛选模块 -->
|
||
<view class="screen_content" @tap.stop.prevent>
|
||
<view class="fir_li">
|
||
<view class="li_label">门店星级</view>
|
||
<u-rate :count="5" @change="changeLevel" v-model="level" active-color="#FFD049" inactive-color="#b2b2b2" gutter="20"></u-rate>
|
||
</view>
|
||
<view class="fir_li">
|
||
<view class="li_label">门店来源</view>
|
||
<picker @change="changeSource" :value="sourceIndex" :range="sourceList">
|
||
<view class="li_box">
|
||
<view class="form_right">
|
||
<view :class="source ? 'fontactive' : ''">{{source ? source : '点击选择'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="fir_li">
|
||
<view class="li_label">跟进状态</view>
|
||
<picker @change="changeFollow" :value="followIndex" :range="followList">
|
||
<view class="li_box">
|
||
<view class="form_right">
|
||
<view :class="follow ? 'fontactive' : ''">{{follow ? follow : '点击选择'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="fir_li">
|
||
<view class="li_label">成交状态</view>
|
||
<picker @change="changeStatus" :value="statusIndex" :range="statusArr">
|
||
<view class="li_box">
|
||
<view class="form_right">
|
||
<view :class="statusArr[statusIndex] ? 'fontactive' : ''">{{statusArr[statusIndex] ? statusArr[statusIndex] : '点击选择'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="fir_li" v-if="!isSeas">
|
||
<view class="li_label">归属人</view>
|
||
<view class="li_box" @click="toSelectStaff">
|
||
<view class="form_right">
|
||
<view :class="staffObj ? 'fontactive' : ''">
|
||
{{staffObj ? staffObj.name : '点击选择'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fir_li">
|
||
<view class="li_label">新增门店时间</view>
|
||
<view class="li_box" style="display: flex;justify-content: space-around;">
|
||
<picker @change="changeNewStartTime" mode="date" :end="new_end_time"
|
||
style="width:50%;border-right:1rpx solid #CCCCCC">
|
||
<view class="form_right">
|
||
<view style="flex:1;text-align: center;"
|
||
:class="new_start_time ? 'fontactive' : ''">
|
||
{{new_start_time ? new_start_time : '开始时间'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</picker>
|
||
<picker @change="changeNewEndTime" mode="date" :start="new_start_time" style="width:50%">
|
||
<view class="form_right">
|
||
<view style="flex:1;text-align: center;" :class="new_end_time ? 'fontactive' : ''">
|
||
{{new_end_time ? new_end_time : '结束时间'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="fir_li">
|
||
<view class="li_label">下次联系时间</view>
|
||
<view class="li_box" style="display: flex;justify-content: space-around;">
|
||
<picker @change="changeStartTime" mode="date" :end="end_time"
|
||
style="width:50%;border-right:1rpx solid #CCCCCC">
|
||
<view class="form_right">
|
||
<view style="flex:1;text-align: center;" :class="start_time ? 'fontactive' : ''">
|
||
{{start_time ? start_time : '开始时间'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</picker>
|
||
<picker @change="changeEndTime" mode="date" :start="start_time" style="width:50%">
|
||
<view class="form_right">
|
||
<view style="flex:1;text-align: center;" :class="end_time ? 'fontactive' : ''">
|
||
{{end_time ? end_time : '结束时间'}}</view>
|
||
<view class="iconfont icon-arrows_right"></view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<search-item v-for="(item,index) in searchForm" :key="index" :objInfo="item" @changeSearchData="changeSearchData"></search-item>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="button_bottom">
|
||
<view @tap.stop="reset">重置</view>
|
||
<view @tap.stop="sureQuery">确定</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<select-staff ref="staffChild" @sureStaff="sureStaff"></select-staff>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import selectStaff from '@/components/selectStaff.vue'
|
||
import searchItem from '../../search/searchitem.vue'
|
||
|
||
import {
|
||
netSelect,
|
||
netSearchStaffList
|
||
} from '@/api/kehu.js'
|
||
import {
|
||
BASE_IMG_URL
|
||
} from '@/util/api.js'
|
||
export default {
|
||
components:{
|
||
selectStaff,
|
||
searchItem
|
||
},
|
||
data() {
|
||
return {
|
||
Strname: "", //搜索字串
|
||
BASE_IMG_URL: BASE_IMG_URL,
|
||
date: '',
|
||
show: false,
|
||
start_time: '', //开始时间
|
||
end_time: '', //结束时间
|
||
|
||
name: '', //门店名称
|
||
level: '', //门店星级
|
||
source: '', //门店来源
|
||
sourceList: [],
|
||
sourceIndex: null,
|
||
follow: '', //跟进状态
|
||
followList: [],
|
||
followIndex: null,
|
||
createtime: '', //新增门店时间
|
||
new_start_time: '', //新增门店开始时间
|
||
new_end_time: '', //新增门店结束时间
|
||
|
||
next_time: '', //下次跟进时间
|
||
|
||
staffObj:null, //归属人
|
||
ascripId:null,
|
||
count:5,
|
||
value:1,
|
||
showIndex:1,
|
||
//成交状态
|
||
contract_status:'', //0：未成交 1：已成交
|
||
statusArr:['未成交','已成交'],
|
||
statusIndex:null,
|
||
}
|
||
},
|
||
props: {
|
||
sortData: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
de_starttime: { //开始时间
|
||
type: String,
|
||
default: '',
|
||
},
|
||
de_endtime: { //结束时间
|
||
type: String,
|
||
default: ''
|
||
},
|
||
isSeas: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
de_staffid: { //归属人
|
||
type: Number,
|
||
default: null
|
||
},
|
||
cusStatus: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
searchForm:{
|
||
type: Array,
|
||
default:()=>{
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.ascripId = this.de_staffid
|
||
|
||
this.getSelect()
|
||
},
|
||
methods: {
|
||
//成交状态
|
||
changeStatus(e) {
|
||
this.statusIndex = e.detail.value
|
||
},
|
||
//搜索
|
||
doSearch() {
|
||
let params = {
|
||
name:this.name,
|
||
}
|
||
if (!this.isSeas) {
|
||
params = Object.assign({}, params, {
|
||
staff_id: this.ascripId
|
||
})
|
||
}
|
||
this.$emit('queryData', params)
|
||
},
|
||
getSelect() {
|
||
netSelect().then(res => {
|
||
this.sourceList = res.data['门店来源']
|
||
this.followList = res.data['门店状态']
|
||
})
|
||
},
|
||
//选择归属人
|
||
toSelectStaff() {
|
||
this.$refs.staffChild.init()
|
||
},
|
||
sureStaff(obj) {
|
||
this.staffObj = obj
|
||
this.ascripId = obj.id
|
||
},
|
||
//归属人
|
||
getGuishu() {
|
||
netSearchStaffList().then(res => {
|
||
let arr = res.data
|
||
if (this.ascripId) {
|
||
arr.forEach((ele, index) => {
|
||
if (ele.id == this.ascripId) {
|
||
this.staffObj = ele
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
screenClick() {
|
||
this.$refs.popup.open()
|
||
if(this.showIndex == 1){
|
||
this.new_start_time = this.de_starttime
|
||
this.new_end_time = this.de_endtime
|
||
this.statusIndex = this.cusStatus
|
||
}
|
||
},
|
||
// 新增门店 开始时间
|
||
changeNewStartTime(e) {
|
||
this.showIndex = 2
|
||
this.new_start_time = e.detail.value
|
||
if(!this.new_end_time){
|
||
this.new_end_time = e.detail.value
|
||
}
|
||
},
|
||
//新增门店 结束时间
|
||
changeNewEndTime(e) {
|
||
this.showIndex = 2
|
||
this.new_end_time = e.detail.value
|
||
if(!this.new_start_time){
|
||
this.new_start_time = e.detail.value
|
||
}
|
||
},
|
||
changeLevel(e) {
|
||
this.level = e
|
||
},
|
||
//下次联系 时间
|
||
changeStartTime(e) {
|
||
this.start_time = e.detail.value
|
||
if(!this.end_time){
|
||
this.end_time = e.detail.value
|
||
}
|
||
},
|
||
changeEndTime(e) {
|
||
this.end_time = e.detail.value
|
||
if(!this.start_time){
|
||
this.start_time = e.detail.value
|
||
}
|
||
},
|
||
//门店来源
|
||
changeSource(e) {
|
||
this.sourceIndex = e.detail.value
|
||
this.source = this.sourceList[e.detail.value]
|
||
},
|
||
//跟进状态
|
||
changeFollow(e) {
|
||
this.followIndex = e.detail.value
|
||
this.follow = this.followList[e.detail.value]
|
||
},
|
||
//门店 新增 时间
|
||
changeCreatetime(e) {
|
||
this.createtime = e.detail.value
|
||
},
|
||
changeSearchData(type,key,value){
|
||
this.$emit('changeSearchData',type,key,value)
|
||
},
|
||
//重置
|
||
reset() {
|
||
this.level = ''
|
||
this.source = ''
|
||
this.sourceIndex = null
|
||
this.follow = ''
|
||
this.followIndex = null
|
||
this.next_time = ''
|
||
this.start_time = ''
|
||
this.end_time = '',
|
||
this.createtime = '',
|
||
this.new_start_time = '',
|
||
this.new_end_time = '',
|
||
this.ascripId = null
|
||
this.staffObj = null
|
||
this.statusIndex = null
|
||
this.$emit('resetForm')
|
||
},
|
||
//确定
|
||
sureQuery() {
|
||
let params = {
|
||
level: this.level,
|
||
source: this.source,
|
||
follow: this.follow,
|
||
createtime: (this.new_start_time && this.new_end_time) ? (this.new_start_time + ',' + this.new_end_time) : '',
|
||
next_time: (this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
|
||
contract_status:this.statusIndex,
|
||
staff_id:this.staffObj?this.staffObj.id:'',
|
||
|
||
}
|
||
if (!this.isSeas) {
|
||
params = Object.assign({}, params, {
|
||
staff_id: this.ascripId
|
||
})
|
||
}
|
||
this.$refs.popup.close()
|
||
this.$emit('queryData', params)
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.fontactive {
|
||
color: #333;
|
||
}
|
||
|
||
.select_warp {
|
||
z-index: 9;
|
||
position: relative;
|
||
}
|
||
|
||
.custom {
|
||
padding: 100rpx 0 180rpx;
|
||
text-align: center;
|
||
color: $uni-text-color;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.warpbox {
|
||
position: fixed;
|
||
width: 750rpx;
|
||
left: 0;
|
||
top: 80rpx;
|
||
bottom: 0;
|
||
z-index: 2;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
// height:890rpx;
|
||
}
|
||
|
||
.screen_content {
|
||
width: 702rpx;
|
||
z-index: 2;
|
||
border-top: 1rpx solid #CCCCCC;
|
||
background-color: #fff;
|
||
padding: 24rpx;
|
||
|
||
.fir_li {
|
||
margin-bottom: 20rpx;
|
||
|
||
.li_label {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.li_box {
|
||
// width:700rpx;
|
||
width: 100%;
|
||
border-radius: 15rpx;
|
||
border: 1rpx solid #CCCCCC;
|
||
height: 60rpx;
|
||
padding: 0 35rpx;
|
||
line-height: 60rpx;
|
||
color: #999;
|
||
|
||
}
|
||
|
||
.form_right {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin: 28rpx 5rpx 0 0;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.sort_content {
|
||
background-color: #fff;
|
||
padding-top: 24rpx;
|
||
width: 750rpx;
|
||
z-index: 2;
|
||
border-top: 1rpx solid #CCCCCC;
|
||
|
||
.sort_feedback {
|
||
margin-bottom: 20rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.feedback_header {
|
||
padding: 0 0 30rpx 24rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.feedback_main {
|
||
padding: 0 24rpx;
|
||
|
||
.main_con {
|
||
padding-left: 20rpx;
|
||
background-color: #fff;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border: 1rpx solid #EAEAEA;
|
||
}
|
||
|
||
.tabactive {
|
||
border: 1rpx solid #ff7800;
|
||
color: #ff7800;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.manage_tab {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background-color: $uni-text-color;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
.tab_array {
|
||
display: flex;
|
||
background: #fff;
|
||
border-radius: 34rpx;
|
||
height: 68rpx;
|
||
width: 467rpx;
|
||
overflow: hidden;
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin: 8rpx 15rpx 0 28rpx;
|
||
}
|
||
|
||
input {
|
||
line-height: 68rpx;
|
||
height: 68rpx;
|
||
}
|
||
}
|
||
|
||
.tab_screen {
|
||
display: flex;
|
||
|
||
image {
|
||
width: 43rpx;
|
||
height: 44rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.active {
|
||
&::after {
|
||
content: '';
|
||
float: right;
|
||
margin-right: 40rpx;
|
||
}
|
||
}
|
||
|
||
.mar-180 {
|
||
margin-bottom: 180rpx;
|
||
}
|
||
|
||
.button_bottom {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 90rpx;
|
||
background-color: #fff;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
|
||
:first-child {
|
||
flex: 1;
|
||
color: $uni-text-color;
|
||
border-top: 1rpx solid #CCCCCC;
|
||
}
|
||
|
||
:last-child {
|
||
flex: 1;
|
||
background-color: $uni-text-color;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.sort_active {
|
||
color: $uni-text-color;
|
||
}
|
||
|
||
// 筛选中的点击事件
|
||
.screen_active {
|
||
border: 1rpx solid $uni-text-color !important;
|
||
}
|
||
</style>
|