90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<!--
|
||
Jeepay 通用列表条目， 包含 头像， 主标题， 副标题
|
||
|
||
@author terrfly
|
||
@site https://www.jeequan.com
|
||
@date 2022/11/16 15:55
|
||
-->
|
||
<template>
|
||
<view :class="`list-item ${props.viewClass}`">
|
||
<image :style="props.logoStyle" v-if="props.logo" :src="props.logo" mode="scaleToFill" />
|
||
<view class="list-info">
|
||
<view class="list-title">
|
||
<view class="list-name">
|
||
<slot name="title">{{ props.title }} </slot>
|
||
</view>
|
||
<slot name="titleRight">
|
||
|
||
<!-- 直接写 typeof 页面报错。 -->
|
||
<template v-if="isShowState()" >
|
||
<view v-if="props.state == 1" class="state-dot state-dot-enable"></view>
|
||
<view v-else class="state-dot state-dot-disable"></view>
|
||
</template>
|
||
|
||
<template v-if="navListComputed">
|
||
<image style="width: 70rpx; height: 70rpx" src="/pageDevice/static/devIconImg/icon-more-white.svg" mode="scaleToFill" @tap="single.open()" />
|
||
</template>
|
||
</slot>
|
||
</view>
|
||
<view class="list-subtitle"><slot name="subtitle">{{ props.subtitle }} </slot></view>
|
||
</view>
|
||
<JSinglePopup ref="single" :list="navListComputed" activeColor="#FF5B4C" />
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
import {ref, reactive, onMounted, computed } from 'vue'
|
||
import ak from '@/commons/utils/ak.js'
|
||
|
||
// 弹层
|
||
const single = ref()
|
||
|
||
// 定义传入属性
|
||
const props = defineProps({
|
||
|
||
title: { type: [String, Number] }, // 标题
|
||
|
||
subtitle: { type: [String, Number] }, // 副标题
|
||
|
||
logo: { type: String }, // 图标
|
||
|
||
logoStyle: { type: Object } , // logo颜色背景图
|
||
|
||
moreBtnList: { type: Array }, //更多按钮
|
||
|
||
// 状态开启（蓝色），or 关闭（置灰） 【 注意：state 和 moreBtnList 二选一， 或者请使用插槽覆写 titleRight 】
|
||
state: { type: [Number, String] },
|
||
|
||
viewClass: { type: String, default: '' }, // 样式透传， 小程序不支持再组件上加class(不生效), 需要特殊定义，特殊传入。
|
||
|
||
})
|
||
|
||
function isShowState(){
|
||
return typeof(props.state) != 'undefined'
|
||
}
|
||
|
||
|
||
// 计算属性
|
||
let navListComputed = computed(() => {
|
||
|
||
if(!props.moreBtnList){
|
||
return props.moreBtnList
|
||
}
|
||
return props.moreBtnList.filter(r => hasEnt(r.entId))
|
||
})
|
||
|
||
function hasEnt(entId){
|
||
|
||
// 不包含： 说明无需隐藏
|
||
if(!entId){
|
||
return true
|
||
}
|
||
return ak.ent.has(entId)
|
||
}
|
||
|
||
</script>
|
||
|
||
<style>
|
||
</style> |