root/xl-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
多啦C梦
2025-04-14 11:42:21 +08:00
parent b614f2482e
commit a706b60c90
30 changed files with 700 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/user/components/AccompanyingMentor.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup>
</script>
<template>
</template>
<style scoped lang="scss">
</style>

23
src/pages/user/components/Inviter.vue Normal file
View 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
View 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>

181
src/pages/user/index.vue
View File

@@ -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
View 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
View 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
View 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>

92
src/pages/userInfo/index.vue
View File

@@ -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>