源文件

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

@@ -0,0 +1,100 @@
+<template>
+  <view class="login-wrapper" :style="{ padding: pd }">
+    <view class="login-main">
+      <view class="login-title" v-if="title">{{ title }}</view>
+      <view class="login-input" :style="{ backgroundColor: bgColor }">
+        <input
+          :password="password"
+          :placeholder="place"
+          :type="type"
+          placeholder-style="color: #A6A6A6;"
+          :value="value"
+          @input="change($event)"
+        />
+        <view class="login-right"> <slot></slot> </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { watchEffect, onBeforeUnmount, onMounted } from "vue"
+import { addRules, clearOneRule } from "@/hooks/rules"
+const props = defineProps({
+  title: {
+    type: String,
+    default: "账号",
+  },
+  place: {
+    type: String,
+    default: "请输入登录名/手机号",
+  },
+  type: {
+    type: String,
+    default: "text",
+  },
+  value: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String,
+    default: "text",
+  },
+  pd: {
+    type: String,
+    default: "50rpx",
+  },
+  bgColor: {
+    type: String,
+    default: "#f3f2f5",
+  },
+  password: { type: Boolean, default: false },
+  rules: { default: null },
+})
+const emits = defineEmits(["update:value"])
+const change = (e) => {
+  emits("update:value", e.detail.value)
+}
+
+onMounted(() => {
+  if (props.rules !== null) {
+    props.rules.Msg = props.title
+    addRules(props.rules)
+  }
+})
+onBeforeUnmount(() => {
+  if (props.rules !== null) {
+    clearOneRule(props.rules)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.login-wrapper {
+  padding: 50rpx;
+  .login-title {
+    margin-left: 20rpx;
+    margin-bottom: 20rpx;
+    font-size: 30rpx;
+  }
+  .login-input {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 110rpx;
+
+    .login-right {
+      align-self: center;
+    }
+    border-radius: 16rpx;
+    background: #f3f2f5;
+    input {
+      flex: 1;
+      font-size: 33rpx;
+      height: 110rpx;
+      margin-left: 32rpx;
+    }
+  }
+}
+</style>