源文件

jeepay-ui-uapp-agent/components/newComponents/JInput/JInput.vue

@@ -0,0 +1,118 @@
+<template>
+  <view
+    class="layout"
+    :class="{ first: props.isBorder }"
+    :style="{ padding: props.pd, backgroundColor: props.bgColor, alignItems: align }"
+  >
+    <!-- 最左侧插槽用于存放icon -->
+    <image :src="props.icon" v-if="props.icon" :style="{ width: props.iconSize, height: props.iconSize }" />
+
+    <view class="name" :style="{ color: props.textColor, fontSize: props.size }">{{ props.name }}</view>
+    <view class="input">
+      <slot>
+        <input
+          v-if="props.place != '' || props.value != ''"
+          :type="type"
+          :value="props.value"
+          placeholder-style="color:#A6A6A6;"
+          :placeholder="(rules != null ? '(必填)' : '') + place"
+          :style="{ fontSize: size }"
+          :maxlength="maxlength"
+          @input="onchange"
+          :focus="focus"
+          @focus="emits('focusShow')"
+          @blur="emits('focusNone')"
+        />
+        <view v-else :style="{ fontSize: props.size, color: props.rightColor }">{{ props.right }}</view>
+      </slot>
+    </view>
+
+    <image src="/static/equipmentImg/arrow.svg" v-if="props.img" />
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, watchEffect, watch, onDeactivated, onBeforeUnmount, onMounted } from "vue"
+import { addRules, clearOneRule } from "@/hooks/rules"
+const props = defineProps({
+  name: { type: String, default: "" }, // 左侧文字
+  icon: { type: String, default: "" }, // 左侧图标
+  iconSize: { type: String, default: "40rpx" }, // 左侧图标大小
+  size: { type: String, default: "33rpx" }, // 文字大小
+  right: { type: String, default: "" }, // 右侧文字
+  value: { type: String, default: "" }, // 输入框文字
+  place: { type: String, default: "" }, // 提示文字
+  bgColor: { type: String, default: "" }, // 背景颜色
+  isBorder: { type: Boolean, default: false }, // 是否展示上边框
+  borderBg: { type: String, default: "#f2f2f2" }, // 上边框颜色
+  img: { type: Boolean, default: false }, // 是否展示右箭头
+  pd: { type: String, default: "40rpx 32rpx" },
+  textColor: { type: String, default: "#000" }, // 左侧文字颜色
+  rightColor: { type: String, default: "#fff" }, // 右侧文字颜色
+  size: { type: String, default: "33rpx" }, // 文字大小，
+  type: { type: String, default: "text" }, //输入框类型
+  rules: { default: null },
+  maxlength: { type: Number },
+  align: { type: String }, //对齐方式
+  focus: { type: Boolean, default: false },
+})
+const borderColor = ref(props.borderBg)
+const places = ref("")
+const emits = defineEmits(["update:value", "focusShow", "focusNone"])
+const onchange = (e) => emits("update:value", e.detail.value)
+
+onMounted(() => {
+  if (props.rules !== null) {
+    props.rules.Msg = props.name
+    addRules(props.rules)
+  }
+})
+onBeforeUnmount(() => {
+  if (props.rules !== null) {
+    clearOneRule(props.rules)
+  }
+})
+</script>
+
+<style scoped lang="scss">
+page {
+  background-color: #f2f2f2;
+}
+.layout {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  box-sizing: border-box;
+  .name {
+    white-space: nowrap;
+    font-size: 33rpx;
+    // line-height: 46rpx;
+  }
+  .input {
+    margin: 0 10rpx 0 20rpx;
+    flex-grow: 1;
+    text-align: right;
+  }
+  image {
+    flex-shrink: 0;
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 20rpx;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 32rpx;
+    height: 2rpx;
+    width: calc(100% - 32rpx);
+    background-color: v-bind(borderColor);
+  }
+}
+.first {
+  &::before {
+    height: 0rpx;
+  }
+}
+</style>