update

src/components/CreditScore.vue

@@ -1,11 +1,44 @@
 <script setup>
-
+import ICON1 from '../static/icons/path1.png';
+import ICON2 from '../static/icons/path2.png';
+import ICON3 from '../static/icons/path3.png';
+import ICON4 from '../static/icons/path4.png';
 </script>
 
 <template>
-    <view class="!size-[164rpx] test"></view>
+    <view class="!size-[132rpx] !grid grid-cols-2 grid-rows-2 relative">
+        <image class="!size-full" :src="ICON1"></image>
+        <image class="!size-full" :src="ICON2"></image>
+        <image class="!size-full" :src="ICON3"></image>
+        <image class="!size-full" :src="ICON4"></image>
+
+        <view class="!absolute left-1/2 top-1/2 -translate-1/2 !flex flex-col justify-center items-center">
+            <view class="score">
+                90
+            </view>
+            <view class="score-info">
+                信用分
+            </view>
+        </view>
+    </view>
 </template>
 
 <style scoped lang="scss">
+.score {
+    color: rgb(22, 93, 255);
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
 
+.score-info {
+    color: rgb(29, 33, 41);
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
 </style>

src/components/SendMsg.vue

@@ -6,7 +6,7 @@ const modalValue = defineModel();
 </script>
 
 <template>
-    <x-input v-model:model-value="modalValue" placeholder="验证码">
+    <x-input v-bind="$attrs" v-model:model-value="modalValue" placeholder="验证码">
         <template #suffix>
             <x-link>发送验证码</x-link>
         </template>

src/components/XForm.vue

@@ -0,0 +1,41 @@
+<script setup>
+import {showToast} from "../utils/uils.js";
+
+const {model, rules} = defineProps({
+    model: {
+        type: Object,
+        default: {},
+    },
+    rules: {
+        type: Object,
+        default: {},
+    }
+});
+
+const verify = () => {
+    Object.entries(model).forEach(([key, value]) => {
+        if (!rules[key].reg.test(value)) {
+            showToast({
+                icon: 'error',
+                mask: true,
+                title: rules[key].msg,
+            });
+            throw new Error(rules[key].msg);
+        }
+    });
+}
+
+defineExpose({
+    verify
+});
+</script>
+
+<template>
+    <view>
+        <slot></slot>
+    </view>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/XFormItem.vue

@@ -0,0 +1,21 @@
+<script setup>
+const {label} = defineProps({
+    label: {
+        type: String,
+        default: null,
+    }
+});
+</script>
+
+<template>
+    <view class="x-form-item">
+        <view class="!mb-[8rpx]" v-if="label">{{ label }}</view>
+        <slot></slot>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.x-form-item {
+    margin-bottom: 20rpx;
+}
+</style>

src/components/XInfoModal.vue

@@ -0,0 +1,42 @@
+<script setup>
+import XModal from "./XModal.vue";
+
+const emits = defineEmits(['success', 'cancel']);
+const show = defineModel('show');
+
+const success = () => {
+    emits('success');
+}
+
+const cancel = () => {
+    show.value = false;
+    emits('cancel');
+}
+</script>
+
+<template>
+    <x-modal v-model:show="show">
+        <view class="py-[40rpx] px-[32rpx]">
+            <slot></slot>
+        </view>
+
+        <view class="h-[3rpx] w-full bg-[#F2F3F5]"></view>
+
+        <view class="!flex gap-[24rpx] px-[32rpx] pt-[16rpx] pb-[40rpx]">
+            <view
+                @click="cancel"
+                class="rounded-[8rpx] text-[var(--primary-color)] bg-[var(--primary-color-info)] flex-grow py-[20rpx] !flex justify-center items-center">
+                取消
+            </view>
+            <view
+                @click="success"
+                class="rounded-[8rpx] bg-[var(--primary-color)] text-[#fff] flex-grow py-[20rpx] !flex justify-center items-center">
+                确定
+            </view>
+        </view>
+    </x-modal>
+</template>
+
+<style scoped lang="scss">
+
+</style>