update

2025-04-14 11:42:21 +08:00
parent b614f2482e
commit a706b60c90
30 changed files with 700 additions and 9 deletions
--- a/src/pages/userInfo/components/EditPassWord.vue
+++ b/src/pages/userInfo/components/EditPassWord.vue
@@ -0,0 +1,51 @@
+<script setup>
+import {reactive, ref} from "vue";
+import XInfoModal from "../../../components/XInfoModal.vue";
+import XForm from "../../../components/XForm.vue";
+import XFormItem from "../../../components/XFormItem.vue";
+import XInput from "../../../components/XInput.vue";
+import SendMsg from "../../../components/SendMsg.vue";
+
+const XFormRef = ref();
+const show = defineModel('show');
+const rules = {};
+const form = reactive({
+    phone: null,
+    verificationCode: null,
+    password: null,
+});
+
+const success = () => {
+    XFormRef.value.verify();
+}
+</script>
+
+<template>
+    <x-info-modal v-model:show="show" @success="success">
+        <view class="title">修改密码</view>
+
+        <x-form ref="XFormRef" :model="form" :rules="rules">
+            <x-form-item label="手机号">
+                <x-input height="72rpx" placeholder="微信号" v-model:model-value="form.phone"></x-input>
+            </x-form-item>
+            <x-form-item label="验证码">
+                <send-msg height="72rpx" v-model:model-value="form.verificationCode"></send-msg>
+            </x-form-item>
+            <x-form-item label="新登录密码">
+                <x-input height="72rpx" placeholder="新登录密码" v-model:model-value="form.password"></x-input>
+            </x-form-item>
+        </x-form>
+    </x-info-modal>
+</template>
+
+<style scoped lang="scss">
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 32rpx;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+    margin-bottom: 20rpx;
+}
+</style>
--- a/src/pages/userInfo/components/EditPhone.vue
+++ b/src/pages/userInfo/components/EditPhone.vue
@@ -0,0 +1,72 @@
+<script setup>
+import {reactive, ref} from "vue";
+import XInfoModal from "../../../components/XInfoModal.vue";
+import XForm from "../../../components/XForm.vue";
+import XFormItem from "../../../components/XFormItem.vue";
+import XInput from "../../../components/XInput.vue";
+import SendMsg from "../../../components/SendMsg.vue";
+
+const XFormRef = ref();
+const show = defineModel('show');
+const rules = {
+    oldPhone: {
+        reg: /^\[1][3-9]\d{9}$/,
+        msg: '请输入正确的手机号',
+    },
+    oldVerificationCode: {
+        reg: /.+/,
+        msg: '请输入正确的手机号',
+    },
+    newPhone: {
+        reg: /^\[1][3-9]\d{9}$/,
+        msg: '请输入正确的手机号',
+    },
+    newVerificationCode: {
+        reg: /.+/,
+        msg: '请输入正确的手机号',
+    },
+};
+const form = reactive({
+    oldPhone: null,
+    oldVerificationCode: null,
+    newPhone: null,
+    newVerificationCode: null,
+});
+
+const success = () => {
+    XFormRef.value.verify();
+}
+</script>
+
+<template>
+    <x-info-modal v-model:show="show" @success="success">
+        <view class="title">更换手机号</view>
+
+        <x-form ref="XFormRef" :model="form" :rules="rules">
+            <x-form-item label="原手机号">
+                <x-input height="72rpx" placeholder="原手机号" v-model:model-value="form.oldPhone"></x-input>
+            </x-form-item>
+            <x-form-item label="验证码">
+                <send-msg height="72rpx" v-model:model-value="form.oldVerificationCode"></send-msg>
+            </x-form-item>
+            <x-form-item label="原手机号">
+                <x-input height="72rpx" placeholder="新手机号" v-model:model-value="form.oldPhone"></x-input>
+            </x-form-item>
+            <x-form-item label="验证码">
+                <send-msg height="72rpx" v-model:model-value="form.newVerificationCode"></send-msg>
+            </x-form-item>
+        </x-form>
+    </x-info-modal>
+</template>
+
+<style scoped lang="scss">
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 32rpx;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+    margin-bottom: 20rpx;
+}
+</style>
--- a/src/pages/userInfo/components/EditWxCode.vue
+++ b/src/pages/userInfo/components/EditWxCode.vue
@@ -0,0 +1,47 @@
+<script setup>
+import {reactive, ref} from "vue";
+import XInfoModal from "../../../components/XInfoModal.vue";
+import XForm from "../../../components/XForm.vue";
+import XFormItem from "../../../components/XFormItem.vue";
+import XInput from "../../../components/XInput.vue";
+
+const XFormRef = ref();
+const show = defineModel('show');
+const rules = {
+    wxCode: {
+        reg: /^\[1][3-9]\d{9}$/,
+        msg: '请输入正确的微信号',
+    }
+};
+const form = reactive({
+    wxCode: null,
+});
+
+const success = () => {
+    XFormRef.value.verify();
+}
+</script>
+
+<template>
+    <x-info-modal v-model:show="show" @success="success">
+        <view class="title">修改微信号</view>
+
+        <x-form ref="XFormRef" :model="form" :rules="rules">
+            <x-form-item>
+                <x-input height="72rpx" placeholder="微信号" v-model:model-value="form.wxCode"></x-input>
+            </x-form-item>
+        </x-form>
+    </x-info-modal>
+</template>
+
+<style scoped lang="scss">
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 32rpx;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+    margin-bottom: 20rpx;
+}
+</style>
--- a/src/pages/userInfo/index.vue
+++ b/src/pages/userInfo/index.vue
@@ -1,11 +1,101 @@
 <script setup>
+import {defineAsyncComponent, ref} from "vue";
+import Right from "../../static/icons/right.png";
+import Avatar from "../../static/images/Avatar.png";
+import XNav from "../../components/XNav.vue";

+const EditWxCode = defineAsyncComponent(() => import('./components/EditWxCode.vue'));
+const EditPhone = defineAsyncComponent(() => import('./components/EditPhone.vue'));
+const EditPassWord = defineAsyncComponent(() => import('./components/EditPassWord.vue'));
+
+const showTool = ref(false);
+const tool = ref('EditWxCode');
+const tools = [
+    {
+        key: 'EditWxCode',
+        component: EditWxCode,
+    },
+    {
+        key: 'EditPhone',
+        component: EditPhone,
+    },
+    {
+        key: 'EditPassWord',
+        component: EditPassWord,
+    }
+];
+
+const openTools = (key) => {
+    tool.value = key;
+    showTool.value = true;
+}
 </script>

 <template>
    <!--编辑信息-->
+    <x-nav></x-nav>
+
+    <view class="bg-[#fff] !mt-[20rpx]">
+        <view class="!flex items-center h-[108rpx] px-[32rpx]">
+            <view class="title">头像</view>
+            <image class="!size-[64rpx] !ml-auto" mode="aspectFill" :src="Avatar"></image>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+
+        <view class="!flex items-center h-[108rpx] px-[32rpx]">
+            <view class="title">昵称</view>
+            <view class="!ml-auto whitespace-nowrap value">酷酷猛吃</view>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+    </view>
+
+    <view class="bg-[#fff] !mt-[20rpx]">
+        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="openTools('EditPhone')">
+            <view class="title">手机号</view>
+            <view class="!ml-auto whitespace-nowrap value">178****0214</view>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+
+        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="openTools('EditWxCode')">
+            <view class="title">微信号</view>
+            <view class="!ml-auto whitespace-nowrap value">za395739</view>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+
+        <view class="!flex items-center h-[108rpx] px-[32rpx]">
+            <view class="title">昵称</view>
+            <view class="!ml-auto whitespace-nowrap value">酷酷猛吃</view>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+
+        <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="openTools('EditPassWord')">
+            <view class="title">登录密码</view>
+            <view class="!ml-auto whitespace-nowrap value">**********</view>
+            <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
+        </view>
+        <view class="h-[3rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>
+    </view>
+
+    <component :is="tools.find(v=>v.key===tool).component" v-model:show="showTool"></component>
 </template>

-<style scoped>
+<style lang="scss" scoped>
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 28rpx;
+    font-weight: 500;
+    letter-spacing: 0;
+}

+.value {
+    color: rgb(134, 144, 156);
+    font-size: 28rpx;
+    font-weight: 500;
+    letter-spacing: 0;
+}
 </style>