362 lines
7.2 KiB
Vue
362 lines
7.2 KiB
Vue
<template>
|
||
<view class="uni-stat--tab-x">
|
||
<view v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</view>
|
||
<view class="uni-stat--tab">
|
||
<view v-if="!renderTabs.length" class="uni-stat--tab-item uni-stat--tab-item-disabled"
|
||
:class="[`uni-stat--tab-item-${type}`]">
|
||
{{placeholder}}
|
||
</view>
|
||
<view v-else v-for="(item, index) in renderTabs" :key="index" @click="change(item, index)"
|
||
class="uni-stat--tab-item" :class="[
|
||
index === currentTab ? `uni-stat--tab-item-${type}-active` : '' , `uni-stat--tab-item-${type}`,
|
||
item.disabled ? 'uni-stat--tab-item-disabled' : ''
|
||
]">
|
||
<!-- #ifdef MP -->
|
||
{{item.name}}
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP -->
|
||
<uni-tooltip>
|
||
{{item.name}}
|
||
<uni-icons v-if="item.tooltip" type="help" color="#666" />
|
||
<template v-if="item.tooltip" v-slot:content>
|
||
<view class="uni-stat-tooltip-s">
|
||
{{item.tooltip}}
|
||
</view>
|
||
</template>
|
||
</uni-tooltip>
|
||
<!-- #endif -->
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "uni-stat-tabs",
|
||
data() {
|
||
return {
|
||
currentTab: 0,
|
||
renderTabs: [],
|
||
cacheKey: "uni-admin-statTabsData"
|
||
};
|
||
},
|
||
props: {
|
||
type: {
|
||
type: String,
|
||
default: 'line'
|
||
},
|
||
value: {
|
||
type: [String, Number],
|
||
default: ''
|
||
},
|
||
modelValue: {
|
||
type: [String, Number],
|
||
default: ''
|
||
},
|
||
current: {
|
||
type: [String, Number],
|
||
default: 0
|
||
},
|
||
mode: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
today: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
yesterday: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
tooltip: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
all: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
label: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: '暂无选项'
|
||
},
|
||
tabs: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.last = `${this.mode.replace('-', '_')}_last_data`
|
||
},
|
||
mounted() {
|
||
this.init()
|
||
},
|
||
computed:{
|
||
|
||
},
|
||
watch: {
|
||
current: {
|
||
immediate: true,
|
||
handler(val) {
|
||
this.currentTab = val
|
||
}
|
||
},
|
||
|
||
// value(val) {
|
||
// this.currentTab = val
|
||
// },
|
||
|
||
tabs: {
|
||
immediate: false,
|
||
handler(val) {
|
||
this.init()
|
||
}
|
||
},
|
||
|
||
renderTabs(val) {
|
||
const index = this.current
|
||
if (this.mode && val.length && index >= 0) {
|
||
this.$nextTick(function() {
|
||
const item = this.renderTabs[index]
|
||
this.change(item, index)
|
||
})
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
init() {
|
||
if (this.mode.indexOf('platform') > -1) {
|
||
this.renderTabs = this.getCache() || [];
|
||
this.getPlatform()
|
||
} else if (this.mode === 'date') {
|
||
const dates = [{
|
||
_id: 7,
|
||
name: '最近七天',
|
||
}, {
|
||
_id: 30,
|
||
name: '最近30天',
|
||
}, {
|
||
_id: 90,
|
||
name: '最近90天',
|
||
}]
|
||
if (this.yesterday) {
|
||
dates.unshift({
|
||
_id: 1,
|
||
name: '昨天',
|
||
})
|
||
}
|
||
if (this.today) {
|
||
dates.unshift({
|
||
_id: 0,
|
||
name: '今天',
|
||
})
|
||
}
|
||
this.renderTabs = dates
|
||
} else {
|
||
this.renderTabs = this.tabs
|
||
}
|
||
},
|
||
change(item, index) {
|
||
if (item.disabled) return
|
||
const id = item._id
|
||
const name = item.name
|
||
this.currentTab = index
|
||
this.emit(id, index, name, item)
|
||
},
|
||
emit(id, index, name, item) {
|
||
this.$emit('change', id, index, name, item)
|
||
this.$emit('input', id, index, name)
|
||
this.$emit('update:modelValue', id, index, name)
|
||
},
|
||
getPlatform() {
|
||
const db = uniCloud.database()
|
||
const appList = db.collection('uni-stat-app-platforms')
|
||
.get()
|
||
.then(res => {
|
||
let platforms = res.result.data
|
||
platforms = platforms.filter(p => p.hasOwnProperty('enable') ? p.enable : true)
|
||
platforms.sort((a, b) => a.order - b.order)
|
||
if (this.mode === 'platform-channel') {
|
||
platforms = platforms.filter(item => /^android|ios$/.test(item.code))
|
||
let _id = platforms.map(p => `platform_id == "${p._id}"`).join(' || ')
|
||
_id = `(${_id})`
|
||
this.setAllItem(platforms, _id)
|
||
} else if (this.mode === 'platform-scene') {
|
||
platforms = platforms.filter(item => /mp-/.test(item.code))
|
||
let _id = platforms.map(p => `platform_id == "${p._id}"`).join(' || ')
|
||
_id = `(${_id})`
|
||
this.setAllItem(platforms, _id)
|
||
} else {
|
||
this.setAllItem(platforms)
|
||
}
|
||
this.setCache(platforms);
|
||
this.renderTabs = platforms
|
||
})
|
||
},
|
||
setAllItem(platforms, _id = '', name = '全部') {
|
||
this.all && platforms.unshift({
|
||
name,
|
||
_id
|
||
})
|
||
},
|
||
// 获取当前缓存key
|
||
getCurrentCacheKey(){
|
||
return this.mode;
|
||
},
|
||
// 获取缓存
|
||
getCache(name=this.getCurrentCacheKey()){
|
||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||
return cacheData[name];
|
||
},
|
||
// 设置缓存
|
||
setCache(value, name=this.getCurrentCacheKey()){
|
||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||
cacheData[name] = value;
|
||
uni.setStorageSync(this.cacheKey, cacheData);
|
||
},
|
||
// 删除缓存
|
||
removeCache(name=this.getCurrentCacheKey()){
|
||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||
delete cacheData[name];
|
||
uni.setStorageSync(this.cacheKey, cacheData);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.uni-stat-tooltip-s {
|
||
width: 160px;
|
||
white-space: normal;
|
||
}
|
||
|
||
.uni-label-text {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #555;
|
||
margin-top: 17px;
|
||
margin-bottom: 17px;
|
||
margin-right: 5px;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
}
|
||
|
||
.uni-stat--tab-x {
|
||
display: flex;
|
||
margin: 0 15px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.uni-stat--tab {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.uni-stat {
|
||
|
||
&--tab {
|
||
|
||
&-item {
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
color: #666;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
margin: 15px 0;
|
||
|
||
&-disabled {
|
||
cursor: unset;
|
||
opacity: 0.4;
|
||
}
|
||
|
||
&-line {
|
||
margin-right: 30px;
|
||
padding: 2px 0;
|
||
border-bottom: 1px solid transparent;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&-active {
|
||
color: $uni-color-primary;
|
||
border-bottom: 1px solid $uni-color-primary;
|
||
// &-disabled {
|
||
// color: #666;
|
||
// border-color: #666;
|
||
// }
|
||
}
|
||
}
|
||
|
||
&-boldLine {
|
||
box-sizing: border-box;
|
||
margin-right: 30px;
|
||
padding: 2px 0;
|
||
border-bottom: 2px solid transparent;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&-active {
|
||
box-sizing: border-box;
|
||
color: $uni-color-primary;
|
||
border-bottom: 2px solid $uni-color-primary;
|
||
}
|
||
}
|
||
|
||
&-box {
|
||
padding: 5px 15px;
|
||
border: 1px solid #dcdfe6;
|
||
// margin: 0;
|
||
|
||
&:not(:last-child) {
|
||
border-right-color: transparent;
|
||
}
|
||
|
||
|
||
&-active {
|
||
box-sizing: border-box;
|
||
border: 1px solid $uni-color-primary !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
@media screen and (max-width: 500px) {
|
||
.hide-on-phone {
|
||
display: none;
|
||
}
|
||
|
||
.uni-stat--tab {
|
||
flex-wrap: unset;
|
||
overflow-x: auto !important;
|
||
}
|
||
/* #ifdef H5 */
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
/* #endif */
|
||
}
|
||
|
||
/* #endif */
|
||
</style>
|