first

components/JeepayTableListItem/JeepayTableListItem.vue

@@ -0,0 +1,90 @@
+<!--
+  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>