admin/jurong_circle_front_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改tabbar

Browse Source 
登录页面
This commit is contained in:
Sun_sun
2025-09-15 11:34:07 +08:00
parent b00782265c
commit 7f7ef99c18
16 changed files with 335 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
App.vue
View File

@@ -14,4 +14,4 @@
<style lang="scss">
@import "./uni_modules/vk-uview-ui/index.scss";
</style>
</style>

91
components/Tabbar/Tabbar.vue
View File

@@ -3,7 +3,7 @@
<view class="tabbar-item" :class="currentBg==1?'tabbar-item-active':''" @click="chanRoute(1)">
<image :src="currentBg==1?`/static/tabbar/1-active.png`:`/static/tabbar/1.png`" alt="消息"
:class="currentBg==1?'item-image-active':'item-image'" />
<div class="item-text item-text-active"><span>消息</span></div>
<div class="item-text"><span>消息</span></div>
</view>
<view class="tabbar-item" :class="currentBg==2?'tabbar-item-active':''" @click="chanRoute(2)">
<image :src="currentBg==2?`/static/tabbar/2-active.png`:`/static/tabbar/2.png`" alt="项目"
@@ -29,43 +29,64 @@
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
interface Props{
currentTab : number
}
import { ref, reactive, onMounted } from 'vue';
// 图片列表
const currentBg = ref(1);
const currentBg = ref(3);
onMounted(() => {
uni.hideTabBar()
const pages = getCurrentPages()
if (pages.length) {
const currentPage = pages[pages.length - 1];
const route = currentPage.route;
switch (route) {
case 'pages/message/message':
currentBg.value = 1;
break;
case 'pages/program/program':
currentBg.value = 2;
break;
case 'pages/home/index':
currentBg.value = 3;
break;
case 'pages/finance/finance':
currentBg.value = 4;
break;
case 'pages/my/my':
currentBg.value = 5;
break;
default:
currentBg.value = 3; // 默认主页
}
}
})
const chanRoute = (val : number) => {
currentBg.value = val
switch (val) {
case 1:
uni.navigateTo({
url: '/pages/message/message'
})
break;
case 2:
uni.navigateTo({
url: '/pages/program/program'
})
break;
case 3:
uni.navigateTo({
url: '/pages/home/index'
})
break;
case 4:
uni.navigateTo({
url: '/pages/finance/finance'
})
break;
case 5:
uni.navigateTo({
url: '/pages/my/my'
})
break;
if (val == currentBg.value) {
return
}
if (val == 1) {
uni.switchTab({
url: '/pages/message/message'
})
} else if (val == 2) {
uni.switchTab({
url: '/pages/program/program'
})
}
else if (val == 3) {
uni.switchTab({
url: '/pages/home/index'
})
} else if (val == 4) {
uni.switchTab({
url: '/pages/finance/finance'
})
} else if (val == 5) {
uni.switchTab({
url: '/pages/my/my'
})
}
}
</script>

5
main.js
View File

@@ -3,6 +3,9 @@ import App from './App'
// 引入 uView UI
import uView from './uni_modules/vk-uview-ui';
// 引入Tabbar
import TabbarVue from './components/Tabbar/Tabbar.vue';
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
@@ -23,6 +26,8 @@ export function createApp() {
app.use(uView)
app.use("Tabbar", TabbarVue)
return {
app
}

33
pages.json
View File

@@ -1,5 +1,12 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"navigationStyle": "custom"
}
},
{
"path": "pages/home/index",
"style": {
@@ -37,5 +44,29 @@
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
"uniIdRouter": {},
"tabBar": {
"height": "0",
"list": [{
"pagePath": "pages/message/message",
"text": "消息"
},
{
"pagePath": "pages/program/program",
"text": "项目"
},
{
"pagePath": "pages/home/index",
"text": "主页"
},
{
"pagePath": "pages/finance/finance",
"text": "金融"
},
{
"pagePath": "pages/my/my",
"text": "我的"
}
]
}
}

4
pages/finance/finance.vue
View File

@@ -1,10 +1,8 @@
<template>
<Tabbar :currentTab="4"></Tabbar>
<Tabbar></Tabbar>
</template>
<script setup lang="ts">
import TabbarVue from '../../components/Tabbar/Tabbar.vue';
</script>
<style>

3
pages/home/index.vue
View File

@@ -1,9 +1,8 @@
<template>
<Tabbar :currentTab="3"></Tabbar>
<Tabbar></Tabbar>
</template>
<script lang="ts" setup>
import TabbarVue from '../../components/Tabbar/Tabbar.vue';
</script>
<style lang="scss" scoped>

236
pages/login/login.vue Normal file
View File

@@ -0,0 +1,236 @@
<template>
<view class="login-container">
<view class="login-title">
<view class="title">
用户登录
</view>
<view class="sub-title">
欢迎回到炬融圈
</view>
</view>
<image src="../../static/login/login-img.png" mode="" class="login-img"></image>
<view class="login-form">
<u-form :model="userLogin.userForm" ref="userLoginRef" :border-bottom="false" :error-type="['message']"
label-width="0">
<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/user.png" prop="username">
<u-input v-model="userLogin.userForm.username" placeholder="请输入用户名或手机号"
placeholder-style="color: #737373;" />
</u-form-item>
<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/Lock.png" prop="password">
<u-input type="password" v-model="userLogin.userForm.password" placeholder="请输入密码"
placeholder-style="color: #737373;" />
</u-form-item>
<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/Globe.png" prop="code">
<u-input v-model="userLogin.userForm.code" placeholder="请输入验证码"
placeholder-style="color: #737373;" />
</u-form-item>
<view class="reflash" @click="reflash">
<image class="reflash-icon" src="/static/login/Repeat.png" mode=""></image>
刷新
</view>
<view class="rember">
<u-checkbox v-model="userLogin.userForm.is_rember">记住我</u-checkbox>
</view>
<view class="forget-pwd">忘记密码？</view>
<u-button class="submit-btn" :ripple="true" shape="circle" type="primary" @click="submit">登录</u-button>
<view class="register">
<view class="register-text">没有账号？</view>
<view class="register-link">点击注册？
<image class="register-link-icon" src="/static/Chevron right.png" mode=""></image>
</view>
</view>
</u-form>
</view>
</view>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { onLoad, onReady } from '@dcloudio/uni-app';
const userLoginRef = ref()
const userLogin = reactive({
userForm: {
username: '',
password: '',
code: '',
is_rember: false
},
ruls: {
username: [
{
required: true,
message: '请输入用户名或手机号',
trigger: ['change']
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: ['change']
}
],
code: [
{
required: true,
message: '请输入验证码',
trigger: ['change']
}
]
}
})
onReady(() => {
userLoginRef.value.setRules(userLogin.ruls);
});
const reflash = () => {
userLoginRef.value.resetFields()
}
const submit = () => {
userLoginRef.value.validate((valid : any) => {
if (valid) {
console.log('验证通过');
}
});
}
const inputIcon = {
width: '32rpx',
verticalAlign: 'middle'
}
</script>
<style scoped lang="scss">
.login-container {
width: 100%;
height: 100vh;
background: linear-gradient(180deg, #CAE5FF 0%, #FFFFFF 100%);
.login-title {
padding: 80rpx 0 0 0;
.title {
font-family: SF Pro;
font-weight: 650;
font-style: Expanded Semibold;
font-size: 60rpx;
leading-trim: NONE;
line-height: 80rpx;
letter-spacing: 0%;
text-align: center;
color: #7087FF;
}
.sub-title {
font-family: SF Pro;
font-weight: 700;
font-style: Bold;
font-size: 32rpx;
leading-trim: NONE;
line-height: 48rpx;
letter-spacing: 0%;
text-align: center;
color: #FFFFFF;
}
}
.login-img {
width: 100%;
}
.login-form {
padding: 10rpx 32rpx;
.reflash {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
// 文字
font-family: Work Sans;
font-weight: 400;
font-size: 26rpx;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -2%;
color: #3781EF;
.reflash-icon {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
}
.forget-pwd {
text-align: center;
font-family: Work Sans;
font-weight: 400;
font-size: 26rpx;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -2%;
text-align: center;
color: #3781EF;
margin: 20rpx 0;
}
.submit-btn {
width: 240rpx;
height: 96rpx;
// 文字
font-family: SF Pro;
font-weight: 650;
font-style: Expanded Semibold;
font-size: 40rpx;
leading-trim: NONE;
line-height: 28px;
letter-spacing: 0%;
text-align: center;
}
.register {
margin: 40rpx 0 80rpx;
display: flex;
justify-content: center;
align-items: center;
// 文字
font-family: Work Sans;
font-weight: 400;
font-size: 13px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -2%;
text-align: center;
.register-text {
color: #737373;
}
.register-link {
display: flex;
justify-content: center;
align-items: center;
color: #3781EF;
.register-link-icon {
width: 36rpx;
height: 36rpx;
}
}
}
}
}
</style>

3
pages/message/message.vue
View File

@@ -1,11 +1,10 @@
<template>
<Tabbar :currentTab="1"></Tabbar>
<Tabbar></Tabbar>
</template>
<script setup lang="ts">
import TabbarVue from '../../components/Tabbar/Tabbar.vue';
</script>
<style>

3
pages/my/my.vue
View File

@@ -1,11 +1,10 @@
<template>
<Tabbar :currentTab="5"></Tabbar>
<Tabbar></Tabbar>
</template>
<script setup lang="ts">
import TabbarVue from '../../components/Tabbar/Tabbar.vue';
</script>
<style>

3
pages/program/program.vue
View File

@@ -1,10 +1,9 @@
<template>
<Tabbar :currentTab="2"></Tabbar>
<Tabbar></Tabbar>
</template>
<script setup lang="ts">
import TabbarVue from '../../components/Tabbar/Tabbar.vue';
</script>
<style>

BIN
static/login/Chevron right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 404 B

BIN
static/login/Globe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/login/Lock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 B

BIN
static/login/Repeat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 650 B

BIN
static/login/login-img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
static/login/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 839 B