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-05-08 19:54:38 +08:00
parent 055c9a49b7
commit 2e9c403632
16 changed files with 350 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/forgotPassword/index.vue
View File

@@ -3,12 +3,21 @@ import {reactive} from "vue";
import XNav from "../../components/XNav.vue";
import XLink from "../../components/XLink.vue";
import XInput from "../../components/XInput.vue";
import Api from "../../api/index.js";
import {backPage, showToast} from "../../utils/uils.js";
import SendMsg from "../../components/SendMsg.vue";
const form = reactive({
phone: null,
verificationCode: null,
mobile: null,
captcha: null,
password: null,
});
const success = async () => {
const {msg} = await Api.system.editPassword(form);
showToast(msg);
backPage();
}
</script>
<template>
@@ -22,19 +31,21 @@ const form = reactive({
</view>
<view class="!flex flex-col gap-[56rpx] !mt-[60rpx]">
<x-input v-model:model-value="form.phone" placeholder="请输入手机号"></x-input>
<x-input v-model:model-value="form.verificationCode" placeholder="验证码">
<template #suffix>
<x-link>发送验证码</x-link>
</template>
</x-input>
<x-input v-model:model-value="form.phone" placeholder="请输入密码"></x-input>
<x-input v-model:model-value="form.mobile" placeholder="请输入手机号"></x-input>
<send-msg v-model:model-value="form.captcha" :mobile="form.mobile" :type="3"></send-msg>
<x-input v-model:model-value="form.password" placeholder="请输入密码"></x-input>
<tui-button>确定修改</tui-button>
<tui-button @click="success">确定修改</tui-button>
</view>
</view>
</template>
<style lang="scss">
page {
background-color: #fff;
}
</style>
<style lang="scss" scoped>
.title {
color: rgb(29, 33, 41);

25
src/pages/login/AccountLogin.vue
View File

@@ -2,23 +2,36 @@
import {reactive} from "vue";
import XInput from "../../components/XInput.vue";
import XLink from "../../components/XLink.vue";
import {toPage} from "../../utils/uils.js";
import {showToast, toPage} from "../../utils/uils.js";
import Api from "../../api/index.js";
import {useUserStore} from "../../pinia/UserStore/index.js";
const UserStore = useUserStore();
const form = reactive({
phone: null,
verificationCode: null,
mobile: null,
password: null,
});
const success = async () => {
const {msg, data} = await Api.system.accountLogin(form);
showToast(msg);
UserStore.isLogin = true;
UserStore.token = data.token;
Object.assign(UserStore.userInfo, data);
await toPage('/pages/home/index');
}
</script>
<template>
<view class="!px-[34rpx] !flex flex-col gap-[40rpx]">
<x-input v-model:model-value="form.phone" placeholder="请输入手机号"></x-input>
<x-input v-model:model-value="form.verificationCode" placeholder="密码">
<x-input v-model:model-value="form.mobile" placeholder="请输入手机号"></x-input>
<x-input v-model:model-value="form.password" placeholder="密码">
<template #suffix>
<x-link @click="toPage('/pages/forgotPassword/index')">忘记密码?</x-link>
</template>
</x-input>
<tui-button class="!mt-[80rpx]">登录</tui-button>
<tui-button class="!mt-[80rpx]" @click="success">登录</tui-button>
<tui-button @click="toPage('/pages/register/index')" class="!mt-[40rpx]" plain link>
<image class="!h-[26rpx]" mode="heightFix" src="../../static/icons/去注册.png"></image>
</tui-button>

53
src/pages/login/BulletChat.vue
View File

@@ -1,42 +1,34 @@
<script setup>
import dm1 from '../../static/icons/弹幕1.png';
import dm2 from '../../static/icons/弹幕2.png';
import dm3 from '../../static/icons/弹幕3.png';
import dm4 from '../../static/icons/弹幕4.png';
import dm5 from '../../static/icons/弹幕5.png';
import dm6 from '../../static/icons/弹幕6.png';
import dm7 from '../../static/icons/弹幕7.png';
import dm8 from '../../static/icons/弹幕8.png';
import dm9 from '../../static/icons/弹幕9.png';
import {reactive} from "vue";
import {reactive, onMounted} from "vue";
import Api from "../../api/index.js";
const MAP = [dm1,dm2,dm3,dm4,dm5,dm6,dm7,dm8,dm9];
const list1 = reactive([]);
const list2 = reactive([]);
for (let i = 0; i <= 100; i++) {
list1.push(MAP[Math.floor(Math.random() * 9)]);
list2.push(MAP[Math.floor(Math.random() * 9)]);
}
onMounted(() => {
Api.system.getBarrageList().then(({data}) => {
for (let i = 0; i <= 1000; i++) {
list1.push(data[Math.floor(Math.random() * data.length)]);
list2.push(data[Math.floor(Math.random() * data.length)]);
}
});
})
</script>
<template>
<view class="!mt-[68rpx] !flex flex-col gap-[20rpx]">
<view class="!flex gap-[30rpx] scrollX">
<image
<view
v-for="item in list1"
class="!h-[72rpx]"
mode="heightFix"
:src="item">
</image>
class="!h-[72rpx] qp">
{{ item }}
</view>
</view>
<view class="!flex gap-[30rpx] scrollX">
<image
<view
v-for="item in list2"
class="!h-[72rpx]"
mode="heightFix"
:src="item">
</image>
class="!h-[72rpx] qp">
{{ item }}
</view>
</view>
</view>
</template>
@@ -44,7 +36,7 @@ for (let i = 0; i <= 100; i++) {
<style lang="scss" scoped>
.scrollX {
width: max-content !important;
animation: scroll 150s linear infinite;
animation: scroll 800s linear infinite;
image {
flex-shrink: 0;
@@ -59,4 +51,11 @@ for (let i = 0; i <= 100; i++) {
transform: translateX(-100%); /* 滚动到左侧结束 */
}
}
.qp {
@apply px-[36rpx] flex items-center rounded-full;
background: linear-gradient(to right, #B8C5E9, #CAE2E9, #D0D6E2);
box-shadow: inset 0 0 10px 15rpx rgba(255, 255, 255);
backdrop-filter: blur(20px);
}
</style>

21
src/pages/login/PhoneLogin.vue
View File

@@ -1,27 +1,32 @@
<script setup>
import {reactive} from "vue";
import XInput from "../../components/XInput.vue";
import {toPage} from "../../utils/uils.js";
import {showToast, toPage} from "../../utils/uils.js";
import SendMsg from "../../components/SendMsg.vue";
import {useUserStore} from "../../pinia/UserStore/index.js";
import Api from "../../api/index.js";
const {login} = useUserStore();
const UserStore = useUserStore();
const form = reactive({
phone: null,
verificationCode: null,
mobile: null,
captcha: null,
});
const success = async () => {
login();
toPage('/pages/home/index');
const {msg, data} = await Api.system.accountLogin(form);
showToast(msg);
UserStore.isLogin = true;
UserStore.token = data.token;
Object.assign(UserStore.userInfo, data);
await toPage('/pages/home/index');
}
</script>
<template>
<view class="!px-[34rpx] !flex flex-col gap-[40rpx]">
<x-input v-model:model-value="form.phone" placeholder="请输入手机号"></x-input>
<send-msg v-model:model-value="form.verificationCode"></send-msg>
<x-input v-model:model-value="form.mobile" placeholder="请输入手机号"></x-input>
<send-msg v-model:model-value="form.captcha" :mobile="form.mobile" :type="2"></send-msg>
<tui-button class="!mt-[80rpx]" @click="success">登录</tui-button>
<tui-button @click="toPage('/pages/register/index')" class="!mt-[40rpx]" plain link>
<image class="!h-[26rpx]" mode="heightFix" src="../../static/icons/去注册.png"></image>

14
src/pages/login/index.vue
View File

@@ -1,4 +1,5 @@
<script setup>
import BGICON from "../../static/icons/bg.png";
import XNav from "../../components/XNav.vue";
import BulletChat from "./BulletChat.vue";
import {ref} from "vue";
@@ -20,13 +21,13 @@ const tabs = [
<template>
<!--登陆-->
<XNav></XNav>
<XNav :showBack="false"></XNav>
<view class="h-[390rpx] relative overflow-hidden">
<image class="!absolute left-1/2 top-1/2 -translate-1/2 !w-[1198rpx] !h-[806rpx] -z-10 !pb-[40rpx]"
src="/static/icons/bg.png"></image>
<image class="!absolute left-1/2 top-1/2 -translate-1/2 !w-[1198rpx] !h-[806rpx] !pb-[40rpx]"
:src="BGICON"></image>
<view class="!flex gap-[16rpx] items-center !mt-[56rpx] !ml-[16rpx]">
<view class="!flex gap-[16rpx] items-center !mt-[56rpx] !ml-[16rpx] relative z-10">
<image class="!w-[68rpx] !h-[68rpx]" src="/static/icons/hi.png"></image>
<view class="title">欢迎登录系统</view>
</view>
@@ -34,8 +35,9 @@ const tabs = [
<BulletChat></BulletChat>
</view>
<view class="h-full bg-white !-mt-[20rpx] rounded-t-[20rpx]">
<tui-tabs class="!mx-auto !mb-[40rpx]" :tabs="tabs" :currentTab="currentTab" itemWidth="50%" @change="({index}) => currentTab=index" :width="300" :sliderWidth="130"></tui-tabs>
<view class="h-full bg-white !-mt-[20rpx] rounded-t-[20rpx] relative z-10">
<tui-tabs class="!mx-auto !mb-[40rpx]" :tabs="tabs" :currentTab="currentTab" itemWidth="50%"
@change="({index}) => currentTab=index" :width="300" :sliderWidth="130"></tui-tabs>
<PhoneLogin v-if="currentTab === 0"></PhoneLogin>
<AccountLogin v-else></AccountLogin>

29
src/pages/register/index.vue
View File

@@ -4,17 +4,20 @@ import XNav from "../../components/XNav.vue";
import BulletChat from "../login/BulletChat.vue";
import XInput from "../../components/XInput.vue";
import SendMsg from "../../components/SendMsg.vue";
import Api from "../../api/index.js";
import {showToast} from "../../utils/uils.js";
const form = reactive({
phone: null,
wxCode: null,
verificationCode: null,
mobile: null,
wechat: null,
captcha: null,
password: null,
code: null,
invite: null,
});
const success = () => {
const success = async () => {
const {msg} = await Api.system.register(form);
showToast(msg);
}
</script>
@@ -23,10 +26,10 @@ const success = () => {
<XNav></XNav>
<view class="h-[390rpx] relative overflow-hidden">
<image class="!absolute left-1/2 top-1/2 -translate-1/2 !w-[1198rpx] !h-[806rpx] -z-10 !pb-[40rpx]"
<image class="!absolute left-1/2 top-1/2 -translate-1/2 !w-[1198rpx] !h-[806rpx] !pb-[40rpx]"
src="/static/icons/bg.png"></image>
<view class="!flex gap-[16rpx] items-center !mt-[56rpx] !ml-[16rpx]">
<view class="!flex gap-[16rpx] items-center !mt-[56rpx] !ml-[16rpx] relative z-10">
<image class="!w-[68rpx] !h-[68rpx]" src="/static/icons/hi.png"></image>
<view class="title">欢迎注册</view>
</view>
@@ -34,13 +37,13 @@ const success = () => {
<BulletChat></BulletChat>
</view>
<view class="h-full bg-white !-mt-[20rpx] rounded-t-[20rpx] !pt-[44rpx]">
<view class="h-full bg-white !-mt-[20rpx] rounded-t-[20rpx] !pt-[44rpx] relative z-10">
<view class="!px-[34rpx] !flex flex-col gap-[40rpx]">
<x-input v-model:model-value="form.wxCode" placeholder="请输入微信号"></x-input>
<x-input v-model:model-value="form.phone" placeholder="请输入手机号"></x-input>
<send-msg v-model:model-value="form.verificationCode"></send-msg>
<x-input v-model:model-value="form.wechat" placeholder="请输入微信号"></x-input>
<x-input v-model:model-value="form.mobile" placeholder="请输入手机号"></x-input>
<send-msg v-model:model-value="form.captcha" :mobile="form.mobile"></send-msg>
<x-input v-model:model-value="form.password" placeholder="请输入登录密码"></x-input>
<x-input v-model:model-value="form.code" placeholder="请输入邀请码"></x-input>
<x-input v-model:model-value="form.invite" placeholder="请输入邀请码"></x-input>
<tui-button class="!mt-[52rpx]" @click="success">确认注册</tui-button>
</view>