first

components/JeepayCard/JeepayCard.vue

@@ -0,0 +1,90 @@
+<!--
+  组件功能： 卡片布局
+   标题， 副标题， 和编辑按钮及插槽。 
+  注意： 不包含 中间的内容
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/12/06 08:06
+-->
+<template>
+	<view class="c-card-wrapper" :style="props.viewStyle">
+		
+	  <view v-if="props.title" class="card-title" :class="{'border-none':!isTitleBorder}" @tap="emits('clickTitle')">
+	    <view class="c-card-title"> {{ props.title }} <view><slot name="titleRight"/> </view> </view>
+	    <view class="sub-title" v-if="props.subtitle">{{ props.subtitle }}</view>
+	  </view>
+	  <!-- 默认插槽位置 -->
+	  <slot></slot>
+
+	  <!--  编辑区域 -->
+	  <slot name="editContent">
+		  <view v-if="props.editText" class="card-edit flex-center" hover-class="touch-hover" @tap="emits('editTap')">
+			<image src="/pageDevice/static/devIconImg/icon-edit.svg" mode="scaleToFill" /> {{ props.editText }}
+		  </view>
+	  </slot>
+	  
+	</view>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted, watch } from 'vue'
+
+const emits = defineEmits(['editTap','clickTitle'])
+
+const props = defineProps({
+	
+  viewStyle: { type: [String, Object] }, 	 // 样式透传， 小程序不支持再组件上加style(不生效)
+	
+  title: { type: String }, //标题文字 传值则显示
+  
+  subtitle: { type: String }, //副标题
+  
+  editText: { type: String }, // 编辑文本, 若存在请通过 editTap 事件接收点击事件。 
+  isTitleBorder:{type:Boolean, default:true} //是否存在标题下边框
+  
+})
+
+</script>
+
+<style lang="scss" scoped>
+.c-card-wrapper {
+  margin: 0 35rpx;
+  border-radius: 32rpx;
+  background-color: #fff;
+  overflow: hidden;
+  .card-title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 30rpx 40rpx;
+    min-height: 42rpx;
+    font-size: 32rpx;
+    font-weight: 500;
+    border-bottom: 1rpx solid #ededed;
+    .c-card-title{
+      display: flex;
+      justify-content: space-between;
+    }
+    .sub-title {
+      margin-top: 15rpx;
+      font-size: 25rpx;
+      color: #808080;
+    }
+  }
+  .card-edit {
+    height: 110rpx;
+    border-top: 1rpx solid #ededed;
+    color: #2980fd;
+    font-size: 33rpx;
+    font-weight: 400;
+    image {
+      width: 44rpx;
+      height: 44rpx;
+      margin-right: 10rpx;
+    }
+  }
+}
+.border-none{
+  border: none !important;
+}
+</style>