update
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
41
src/components/XForm.vue
Normal file
@@ -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>
|
||||
21
src/components/XFormItem.vue
Normal file
@@ -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>
|
||||
42
src/components/XInfoModal.vue
Normal file
@@ -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>
|
||||
@@ -85,6 +85,13 @@
|
||||
"navigationBarTitleText": "敬请期待",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/userInfo/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑资料",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
11
src/pages/user/components/AccompanyingMentor.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
23
src/pages/user/components/Inviter.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
import Avatar from '../../../static/images/Avatar.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="p-[20rpx] bg-[#F2F3F5] rounded-[16rpx] !mt-[40rpx] !flex items-center">
|
||||
<image class="!size-[64rpx]" mode="aspectFill" :src="Avatar"></image>
|
||||
<view class="test-24r !ml-[24rpx]">Adam</view>
|
||||
|
||||
<view
|
||||
class="px-[20rpx] py-[7rpx] test-22r text-[#fff] rounded-full bg-[var(--primary-color)] !flex items-center justify-center !ml-auto">
|
||||
联系TA
|
||||
</view>
|
||||
<view
|
||||
class="px-[20rpx] py-[7rpx] test-22r text-[#fff] rounded-full bg-[#C9CDD4] !flex items-center justify-center !ml-[20rpx]">
|
||||
投诉
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
55
src/pages/user/components/MyTeam.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="!mt-[40rpx] p-[20rpx] bg-[#F2F3F5] rounded-[16rpx] !flex items-center">
|
||||
<view class="invitationCode">
|
||||
我的邀请码:
|
||||
</view>
|
||||
<view class="invitationCodeValue">
|
||||
123445
|
||||
</view>
|
||||
<view class="view-detail !ml-auto">查看团队详情></view>
|
||||
</view>
|
||||
|
||||
<view class="!mt-[24rpx] !grid grid-cols-3 gap-[22rpx]">
|
||||
<view class="rounded-[16rpx] bg-[#E8F3FF] p-[20rpx] !flex gap-[6rpx] flex-col">
|
||||
<view class="test-22r text-[#86909C]">人数</view>
|
||||
<view class="test-36r text-[#165DFF]">323</view>
|
||||
</view>
|
||||
<view class="rounded-[16rpx] bg-[#E8F3FF] p-[20rpx] !flex gap-[6rpx] flex-col">
|
||||
<view class="test-22r text-[#86909C]">团队收益</view>
|
||||
<view class="test-36r text-[#165DFF]">323</view>
|
||||
</view>
|
||||
<view class="rounded-[16rpx] bg-[#E8F3FF] p-[20rpx] !flex gap-[6rpx] flex-col">
|
||||
<view class="test-22r text-[#86909C]">团队奖励</view>
|
||||
<view class="test-36r text-[#165DFF]">323</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.view-detail {
|
||||
color: rgb(29, 33, 41);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.invitationCode {
|
||||
color: rgb(78, 89, 105);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 140%;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.invitationCodeValue {
|
||||
color: rgb(29, 33, 41);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 140%;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,40 @@
|
||||
<script setup>
|
||||
import {defineAsyncComponent, ref} from 'vue';
|
||||
import ICON1 from '../../static/icons/icon_提现记录.png';
|
||||
import ICON2 from '../../static/icons/icon_变动记录.png';
|
||||
import ICON3 from '../../static/icons/icon_我的钱包.png';
|
||||
import ICON4 from '../../static/icons/邀请好友.png';
|
||||
import ICON5 from '../../static/icons/账号管理.png';
|
||||
import ICON6 from '../../static/icons/联系客服.png';
|
||||
import ICON7 from '../../static/icons/消息推送.png';
|
||||
import Avatar from "../../static/images/Avatar.png";
|
||||
import user_BG from '../../static/images/user_bg.png';
|
||||
import XNav from "../../components/XNav.vue";
|
||||
import CreditScore from "../../components/CreditScore.vue";
|
||||
import {toPage} from "../../utils/uils.js";
|
||||
|
||||
const MyTeam = defineAsyncComponent(() => import('./components/MyTeam.vue'));
|
||||
const Inviter = defineAsyncComponent(() => import('./components/Inviter.vue'));
|
||||
const AccompanyingMentor = defineAsyncComponent(() => import('./components/AccompanyingMentor.vue'));
|
||||
|
||||
const tabCur = ref('MyTeam');
|
||||
const tabs = [
|
||||
{
|
||||
key: 'MyTeam',
|
||||
name: '我的团队',
|
||||
component: MyTeam,
|
||||
},
|
||||
{
|
||||
key: 'Inviter',
|
||||
name: '邀请人',
|
||||
component: Inviter,
|
||||
},
|
||||
{
|
||||
key: 'AccompanyingMentor',
|
||||
name: '陪跑导师',
|
||||
component: AccompanyingMentor,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -12,7 +44,7 @@ import CreditScore from "../../components/CreditScore.vue";
|
||||
<view class="!w-full !h-[484rpx] overflow-hidden relative">
|
||||
<image class="!w-[1200rpx] !h-[480rpx] !absolute left-[-200rpx]" :src="user_BG" mode="aspectFill"></image>
|
||||
|
||||
<view class="test !w-full relative z-10 p-[20rpx] !flex gap-[34rpx] relative">
|
||||
<view class="!w-full relative z-10 p-[20rpx] !flex gap-[34rpx] justify-between">
|
||||
<image class="!size-[132rpx]" :src="Avatar" mode="aspectFill"></image>
|
||||
<view class="!flex flex-col items-start justify-between box-border py-[4rpx]">
|
||||
<view class="user_name">用户名称</view>
|
||||
@@ -20,19 +52,162 @@ import CreditScore from "../../components/CreditScore.vue";
|
||||
<view class="user_phone">uid:38578</view>
|
||||
</view>
|
||||
|
||||
<credit-score></credit-score>
|
||||
<credit-score class="!mr-[110rpx] !ml-auto"></credit-score>
|
||||
|
||||
<view
|
||||
class="bg-[rgba(0,0,0,.8)] text-[#fff] absolute right-0 py-[7rpx] w-[120rpx] rounded-l-full !flex items-center justify-center gap-[4rpx]"
|
||||
style="font-size: 22rpx">
|
||||
<tui-icon name="edit" size="16"></tui-icon>
|
||||
<view class="!mt-[2rpx]">编辑</view>
|
||||
<view class="!mt-[2rpx]" @click="toPage('/pages/userInfo/index')">编辑</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="!mx-[20rpx] relative !mt-[-300rpx] z-10 bg-[#fff] rounded-[20rpx]">
|
||||
<view class="balance-card">
|
||||
<view class="py-[52rpx] px-[44rpx] !grid grid-cols-2">
|
||||
<view>
|
||||
<view class="info-title">总收益(元)</view>
|
||||
<view class="info-balance">
|
||||
24687.65
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="info-title">可提现(元)</view>
|
||||
<view class="info-balance">
|
||||
358.32
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="gap-line"></view>
|
||||
<view class="py-[32rpx] px-[42rpx] !flex items-center gap-[20rpx]">
|
||||
<view class="info-title !mb-0">已提现(元)</view>
|
||||
<view class="info-balance" style="font-size: 28rpx">24239.33</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="px-[34rpx] py-[20rpx] !flex justify-between">
|
||||
<view class="!flex items-center gap-[12rpx]">
|
||||
<image class="!size-[40rpx]" mode="aspectFill" :src="ICON1"></image>
|
||||
<view class="test-24r">提现记录</view>
|
||||
</view>
|
||||
<view class="!flex items-center gap-[12rpx]">
|
||||
<image class="!size-[40rpx]" mode="aspectFill" :src="ICON2"></image>
|
||||
<view class="test-24r">变动记录</view>
|
||||
</view>
|
||||
<view class="!flex items-center gap-[12rpx]">
|
||||
<image class="!size-[40rpx]" mode="aspectFill" :src="ICON3"></image>
|
||||
<view class="test-24r">我的钱包</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="h-[120rpx] rounded-[20rpx] bg-[#fff] !mx-[20rpx] !mt-[20rpx]"></view>
|
||||
|
||||
<view class="rounded-[20rpx] bg-[#fff] !mx-[20rpx] !mt-[20rpx] py-[26rpx] px-[32rpx]">
|
||||
<view class="!flex gap-[64rpx]">
|
||||
<view v-for="item in tabs" :key="item.key"
|
||||
:class="['tabs-item', tabCur === item.key ? 'tabs-item-cur' : '']"
|
||||
@click="tabCur=item.key">{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<Suspense>
|
||||
<template #default>
|
||||
<component :is="tabs.find(v=>v.key===tabCur).component"></component>
|
||||
</template>
|
||||
|
||||
<template #fallback>
|
||||
加载中...
|
||||
</template>
|
||||
</Suspense>
|
||||
</view>
|
||||
|
||||
<view class="rounded-[20rpx] bg-[#fff] !mx-[20rpx] !mt-[20rpx] py-[26rpx] px-[32rpx]">
|
||||
<view class="test-28r !mb-[40rpx]" style="font-weight: 700;">其他内容</view>
|
||||
<view class="!grid grid-cols-4">
|
||||
<view class="!flex items-center flex-col justify-center gap-[12rpx]">
|
||||
<image class="!size-[84rpx]" mode="aspectFill" :src="ICON4"></image>
|
||||
<view class="test-24r">邀请好友</view>
|
||||
</view>
|
||||
<view class="!flex items-center flex-col justify-center gap-[12rpx]">
|
||||
<image class="!size-[84rpx]" mode="aspectFill" :src="ICON5"></image>
|
||||
<view class="test-24r">邀请好友</view>
|
||||
</view>
|
||||
<view class="!flex items-center flex-col justify-center gap-[12rpx]">
|
||||
<image class="!size-[84rpx]" mode="aspectFill" :src="ICON6"></image>
|
||||
<view class="test-24r">邀请好友</view>
|
||||
</view>
|
||||
<view class="!flex items-center flex-col justify-center gap-[12rpx]">
|
||||
<image class="!size-[84rpx]" mode="aspectFill" :src="ICON7"></image>
|
||||
<view class="test-24r">邀请好友</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabs-item {
|
||||
color: rgb(134, 144, 156);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
transition: 500ms;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
transition: 500ms;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-item-cur {
|
||||
color: rgb(29, 33, 41);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(90.00deg, rgb(109, 154, 225) 2.278%, rgb(98, 147, 224) 98.521%);
|
||||
|
||||
.gap-line {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: rgba(232, 243, 255, 0.14);
|
||||
}
|
||||
|
||||
.info-title {
|
||||
color: rgb(190, 218, 255);
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.info-balance {
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 52rpx;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user_name {
|
||||
color: rgb(29, 33, 41);
|
||||
font-size: 32rpx;
|
||||
|
||||
51
src/pages/userInfo/components/EditPassWord.vue
Normal file
@@ -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>
|
||||
72
src/pages/userInfo/components/EditPhone.vue
Normal file
@@ -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>
|
||||
47
src/pages/userInfo/components/EditWxCode.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -59,3 +59,7 @@ $primary-color: #2D5CF6;
|
||||
.test-28r {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.test-36r {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
@@ -2,5 +2,24 @@ page {
|
||||
background-color: #F2F3F5;
|
||||
font-family: PingFang SC;
|
||||
--primary-color: #165DFF;
|
||||
--primary-color-info: #E8F3FF;
|
||||
--warning-color: #FF7900;
|
||||
}
|
||||
|
||||
uni-toast {
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.uni-toast {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
width: auto;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.uni-toast__content {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
src/static/icons/icon_变动记录.png
Normal file
|
After Width: | Height: | Size: 909 B |
BIN
src/static/icons/icon_我的钱包.png
Normal file
|
After Width: | Height: | Size: 871 B |
BIN
src/static/icons/icon_提现记录.png
Normal file
|
After Width: | Height: | Size: 835 B |
BIN
src/static/icons/path1.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/static/icons/path2.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/static/icons/path3.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/static/icons/path4.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/static/icons/right.png
Normal file
|
After Width: | Height: | Size: 308 B |
BIN
src/static/icons/消息推送.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/static/icons/联系客服.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/static/icons/账号管理.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/static/icons/邀请好友.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |