源文件

jeepay-ui-uapp-agent/components/applyComponents/JeePayForm.vue

@@ -0,0 +1,120 @@
+<template>
+	<view class="item" :style="{backgroundColor: props.backColor}" :class="[props.border]">
+		
+		<!-- 左侧内容 即标题 -->
+		<view class="title">
+			<text v-if="props.start" class="require">*</text>
+			<text style="color:#666f80"> {{ props.text }}</text>
+		</view>
+		
+		<!-- 右侧内容 父组件替换此插槽，可以转变为上传图片等左右结构的布局 -->
+		<slot>
+			<input type="text" :value="props.value" @input="onChange" :placeholder="placeholderText" :disabled="props.disabled" />
+		</slot>
+			
+	</view>
+	<view v-if="props.tipText" class="tipText">
+		({{ props.tipText }})
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+	value: {type: String, default: ''},
+	text: {type: String, default: ''},
+	tipText: {type: String, default: ''}, // 自定义的提示文字
+	start: {type: Boolean, default: true }, // 代表必填项的小星星
+	disabled: {type: Boolean, default: false}, // 是否禁止填写
+	backColor: {type: String, default: '#fafbfc'}, // 背景颜色
+	border: {type: String, default: 'top-border'}, // border位置 上或下
+	tipHolder: {type: String, default: ''} // 自定义placeholder
+})
+
+// 自定义placeholder 
+let placeholderText = props.tipHolder ? props.tipHolder : `请输入${props.text}`
+
+const emit = defineEmits(['update:value'])
+
+const onChange = e => emit('update:value', e.detail.value)
+
+</script>
+
+<style scoped lang="scss">
+
+.item{
+	box-sizing: border-box;
+	//height: 110rpx;
+	width: 100%;
+	// background-color: #fafbfc;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	padding: 35rpx 30rpx 35rpx 30rpx;
+	font-weight: 500;
+	font-size: 28rpx;
+	text-align: left;
+	color: #000;
+	.title{
+		text-align: left;
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #666f80;
+		margin-right: 20rpx;
+		white-space: nowrap;
+	}
+	input, textarea {
+		flex-grow: 1;
+		text-align: right;
+		font-size: 28rpx;
+	}
+	.imgupload{
+		position: relative;
+		height: 120rpx;
+		width: 120rpx;
+		background-color: #E6E9ED;
+		border-radius: 10rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.delate{
+		position: absolute;
+		top: 70rpx;
+		left: -20rpx;
+		height: 40rpx;
+		width: 40rpx;
+		border-radius: 5rpx;
+		background-color: #ff0000;
+	}
+	
+}
+
+// 星号
+.require {
+	width: 20rpx;
+	color: red;
+}
+
+// 禁止标题换行
+.title {
+	display: flex;
+	flex-direction: row;
+	text {
+		white-space: nowrap;
+	}
+}
+
+.top-border {
+	border-top: 1rpx solid #e8e8e8;
+}
+.bottom-border {
+	border-bottom: 1rpx solid #e8e8e8;
+}
+.tipText {
+	margin: 8rpx 20rpx 10rpx;
+	color: #808080;
+}
+</style>