<template>
<view class="screen_view_dm">
<view class="screen_container_view">
<view v-if='!isShowPlatform && !isShowSecondScreen'></view>
<view class="screen_btn_view" @click="tagAction('left')" v-if='isShowPlatform'>
<text class="screen_btn_title">{{defaultParameter.terminal | getTerminalName}}</text>
<image class="screen_btn_icon" src="../../static/icons/icon_drop_black@2x.png" mode=""></image>
</view>
<block v-if="midScreenList.length < 4">
<view class="screen_btn_view" v-if="isShowSecondScreen">
<view class="subScreen" @click="secondScreenAction">
<text class="screen_btn_title">{{secondScreenName}}</text>
<image class="screen_btn_icon" src="../../static/icons/icon_drop_black@2x.png" mode=""></image>
</view>
</view>
<text :class="['screen_list',value==item.value?'screen_list_active':'']" v-if='midScreenList.length && !isEmty'
v-for="(item, index) in midScreenList" :key="item.value" :style="{'color':value==item.value?themeColor:'#666666'}"
@click="selectTab(item)">
{{item.title}}
</text>
</block>
<block v-else>
<view class="screen_more" @click="showMidScreenPicker">
<view class="screen_more_text">{{screenShowName}}</view>
<image class="screen_more_icon" src="../../static/icons/icon_drop_black@2x.png" mode=""></image>
</view>
</block>
<view class="screen_btn_view" @click="tagAction('right')">
<text class="screen_btn_title">{{defaultParameter.dateType | getTimeName}}</text>
<image class="screen_btn_icon" src="../../static/icons/icon_drop_black@2x.png" mode=""></image>
</view>
</view>
<view class="timeDisplay" v-if="beginDate > 0">
<text>{{beginDate | visitTimeFilter}}</text>
<text v-if="endDate > 0">至</text>
<text v-if="endDate > 0">{{endDate | visitTimeFilter}}</text>
</view>
<dm-picker-view ref="midScreenPicer" v-if="midScreenList.length >= 4" :options="midScreenList" @confirm="selectMidScreen"></dm-picker-view>
</view>
</template>
<script>
import dmPickerView from './dmPickerView.vue'
import moment from '../../static/moment.min.js'
import {
displayDateFormat
} from "../../static/format.js"
export default {
props: {
midScreenList: {
type: Array,
default () {
return []
}
},
defaultParameter: {
type: Object,
default () {
return {
'dateType': '1',
'startDate': '',
'endDate': '',
'terminal': '0'
}
}
},
isEmty:{
type:Boolean,
default:false
},
modelValue: {
type: [Number, String],
default: '0'
},
isShowPlatform:{ // 认证记录 到访记录 不显示平台
type: Boolean,
default: true
},
isShowSecondScreen: {
type: Boolean,
default: false
},
secondScreenName: {
type: String,
default: '按最新成交状态'
}
},
model: {
prop: 'modelValue',
event: 'change'
},
data() {
return {
themeColor: '',
value: this.modelValue,
beginDate: null,
endDate: null,
screenShowName: ''
}
},
filters: {
getTerminalName(val) {
if (val == '0') {
return '全部平台'
} else if (val == '1') {
return '微信'
} else if (val == '2') {
return '抖音'
} else if (val == '3') {
return '百度'
} else if (val == '4') {
return '头条'
} else if (val == '5') {
return '支付宝'
} else if (val == '6') {
return 'QQ小程序'
} else if (val == '7') {
return '其他'
}
},
getTimeName(val) {
if (val == '1') {
return '今日'
} else if (val == '2') {
return '近一周'
} else if (val == '3') {
return '近一月'
} else if (val == '4') {
return '自定义'
}
},
visitTimeFilter(val) {
return displayDateFormat(val)
},
},
mounted() {
let app = getApp();
this.globalData = app.globalData;
this.themeColor = this.globalData.themeColor;
this.displayDate()
},
methods: {
secondScreenAction() {
this.$emit('secondScreenAction')
},
selectTab(item) {
if (this.value != item.value) {
this.value = item.value
}
},
tagAction(val) {
this.$emit('tagAction', val)
},
showMidScreenPicker() {
this.$refs.midScreenPicer.show()
},
selectMidScreen(e) {
if (this.value != e.selItem.value) {
this.value = e.selItem.value
}
},
displayDate() {
var dateType = parseInt(this.defaultParameter.dateType)
let curDate = (new Date()).getTime();
this.beginDate = null
this.endDate = null
if (dateType == 1) {
this.beginDate = curDate
}
else if (dateType == 2) {
this.endDate = curDate
this.beginDate = this.getBeginDate(6)
}
else if (dateType == 3) {
this.endDate = curDate
this.beginDate = this.getBeginDate(29)
}
else if (dateType == 4) {
// var self = this
// uni.showModal({
// content: JSON.stringify(self.defaultParameter)
// })
this.beginDate = this.stringToStamp(this.defaultParameter.startDate)
this.endDate = this.stringToStamp(this.defaultParameter.endDate)
}
},
getBeginDate(days) {
let curDate = (new Date()).getTime();
let beginDay = curDate - days * 24 * 60 * 60 * 1000
return beginDay
},
stringToStamp(val) {
// var timeStr = val.replace('-', '/') + ' ' + '00:00:00'
// var timeStr = val.replace(new RegExp("/", "gm"), "") + ' ' + '00:00:00'
var timeStr = val.replace(/-/g,'/') + " " + '00:00:00'
var self = this
var stamp = new Date(timeStr).getTime()
// debugger
// uni.showModal({
// content: JSON.stringify(stamp)
// })
return stamp
}
},
components: {
dmPickerView
},
watch: {
//监听值变化，再赋值给modelValue
value(val) {
var self = this
this.midScreenList.forEach((item, idx) => {
if (item.value == val) {
self.screenShowName = item.title
}
})
this.$emit('change', val);
},
defaultParameter: {
handler(e) {
this.displayDate()
},
deep: true
},
modelValue: {
handler(e) {
this.value = e
},
immediate: true
},
midScreenList: {
handler(e) {
var self = this
this.midScreenList.forEach((item, idx) => {
if (item.value == self.value) {
self.screenShowName = item.title
}
})
},
deep: true,
immediate: true
}
}
}
</script>
<style scoped lang="scss">
.screen_view_dm {
width: 750rpx;
padding-top: 40rpx;
padding-bottom: 10rpx;
background-color: #ffffff;
// z-index: 10;
// position: relative;
.screen_container_view {
display: flex;
width: 750rpx;
padding: 0 20rpx;
height: 40rpx;
box-sizing: border-box;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-family: Verdana, Verdana-Bold;
.screen_btn_view {
display: flex;
.subScreen {
display: flex;
align-items: center;
}
.screen_btn_title {
font-weight: 700;
font-size: 24rpx;
color: #333333;
}
.screen_btn_icon {
width: 30rpx;
height: 30rpx;
}
}
.screen_list {
font-size: 28rpx;
font-weight: 400;
}
.screen_list_active {
font-size: 28rpx;
font-weight: 700;
}
.screen_more {
display: flex;
align-items: center;
flex-grow: 1;
margin-left: 60rpx;
.screen_more_text {
font-weight: 700;
font-size: 24rpx;
color: #333333;
margin-right: 10rpx;
}
.screen_more_icon {
width: 30rpx;
height: 30rpx;
}
}
}
.timeDisplay {
font-family: Verdana;
font-size: 24rpx;
color: #666;
line-height: 34rpx;
text-align: right;
margin-top: 5rpx;
margin-right: 20rpx;
min-height: 34rpx;
height: 34rpx;
}
}
</style>