From 39ae52b3f65e2bba3b6570adb51e791cb3befff7 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 02 七月 2025 16:32:29 +0800
Subject: [PATCH] 提交
---
wx/components/my-tabbar/my-tabbar.vue | 194 ++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 162 insertions(+), 32 deletions(-)
diff --git a/wx/components/my-tabbar/my-tabbar.vue b/wx/components/my-tabbar/my-tabbar.vue
index b9e7e5a..13647cd 100644
--- a/wx/components/my-tabbar/my-tabbar.vue
+++ b/wx/components/my-tabbar/my-tabbar.vue
@@ -1,5 +1,40 @@
<template>
<view class="tabBar">
+ <view class="tabBar_func" v-if="isShow">
+ <view></view>
+ <view class="tabBar_func_box">
+ <view class="func_list">
+ <view class="func_list_item" @click="jump(3)">
+ <view class="func_list_item_info">
+ <text>鍦ㄧ嚎鎶ユ</text>
+ <text>鏂逛究杩呴��</text>
+ </view>
+ <image src="/static/background/home_ic_baoan@2x.png" mode="widthFix"></image>
+ </view>
+ <view class="func_list_item" @click="jump(1)">
+ <view class="func_list_item_info">
+ <text>鎶曚繚鐢宠</text>
+ <text>绠�鍗曚究鎹�</text>
+ </view>
+ <image src="/static/background/hom22e_ic_toubao@2x.png" mode="widthFix"></image>
+ </view>
+ <view class="func_list_item" @click="jump(4)">
+ <view class="func_list_item_info">
+ <text>鍔犲噺淇濈敵璇�</text>
+ <text>澧炲姞/鍑忓皯鎶曚繚浜�</text>
+ </view>
+ <image src="/static/background/home_ic_jiajianbao@2x.png" mode="widthFix"></image>
+ </view>
+ <view class="func_list_item" @click="jump(6)">
+ <view class="func_list_item_info">
+ <text>鏇存崲娲鹃仯\n鍗曚綅</text>
+ </view>
+ <image src="/static/background/home_ic_huanch1angjilu@2x.png" mode="widthFix"></image>
+ </view>
+ </view>
+ <image class="tabBar_func_close" @click="closes" src="/static/icon/ic_cl1ose@2x.png" mode="widthFix"></image>
+ </view>
+ </view>
<view class="tabBar_list">
<view v-for="(item,index) in tabBar" :key="item.url" class="tabbar_item" :class="{'active':item.url == currentPage}" @click="navTo(item)">
<template v-if="item.url">
@@ -7,7 +42,9 @@
<image v-else :src="item.imgNormal" mode="widthFix"></image>
<view class="text">{{item.text}}</view>
</template>
- <view class="tabbar_quan" v-else></view>
+ <view class="tabbar_quan" v-else>
+ <u-icon name="plus" color="#ffffff" size="24"></u-icon>
+ </view>
</view>
</view>
<view class="tabBar_zw"></view>
@@ -15,7 +52,13 @@
</template>
<script>
+ import {
+ mapState
+ } from 'vuex'
export default {
+ computed: {
+ ...mapState(['userInfo', 'cookies'])
+ },
props: {
currentPage: {
type: String,
@@ -24,10 +67,11 @@
},
data() {
return {
+ isShow: false,
value: 1,
tabBar: [
{
- url: '/pages/myPolicy/myPolicy',
+ url: '/pages/index/index',
text: '淇濆崟',
imgNormal: '../../static/icon/nav_home@2x.png',
imgClick: '../../static/icon/nav_home_sel@2x.png'
@@ -58,13 +102,49 @@
};
},
methods: {
+ closes() {
+ this.isShow = false
+ },
navTo(item) {
+ if (!item.url) {
+ this.isShow = true
+ return
+ }
if (item.url !== this.currentPage) {
var isUrl = item.url
const that = this
uni.switchTab({
url: isUrl
})
+ }
+ },
+ jump(type) {
+ if (!this.cookies || !this.userInfo) {
+ uni.navigateTo({
+ url: '/pages/login/login'
+ })
+ }
+ switch (type) {
+ case 1:
+ uni.navigateTo({
+ url: '/pages/insuranceApplication/insuranceApplication'
+ })
+ break;
+ case 3:
+ uni.navigateTo({
+ url: '/pages/new_report/new_report'
+ })
+ break;
+ case 4:
+ uni.navigateTo({
+ url: '/pages/addition_subtraction_application/addition_subtraction_application'
+ })
+ break;
+ case 6:
+ uni.navigateTo({
+ url: '/pages/factoryChange/factoryChange'
+ })
+ break;
}
}
}
@@ -99,6 +179,76 @@
display: flex;
flex-direction: column;
+ .tabBar_func {
+ width: 100vw;
+ height: 100vh;
+ position: fixed;
+ padding-bottom: env(safe-area-inset-bottom);
+ box-sizing: border-box;
+ z-index: 9999;
+ top: 0;
+ left: 0;
+ background: rgba(255,255,255,0);
+ backdrop-filter: blur(5px);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ .tabBar_func_box {
+ width: 100%;
+ padding: 0 30rpx;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .tabBar_func_close {
+ width: 118rpx;
+ height: 118rpx;
+ margin-top: 62rpx;
+ }
+ .func_list {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ .func_list_item {
+ width: 48%;
+ height: 160rpx;
+ position: relative;
+ margin-bottom: 20rpx;
+ padding: 24rpx 28rpx;
+ box-sizing: border-box;
+ .func_list_item_info {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ z-index: 9999;
+ text {
+ &:nth-child(1) {
+ font-weight: 500;
+ font-size: 32rpx;
+ color: #222222;
+ }
+ &:nth-child(2) {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #768188;
+ }
+ }
+ }
+ image {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+ }
+ }
+
.tabBar_zw {
width: 100vw;
height: env(safe-area-inset-bottom);
@@ -122,37 +272,17 @@
justify-content: center;
align-items: center;
position: relative;
-
- .tabbar_quan {
- width: 40px;
- height: 40px;
- background: #437CB3;
- border-radius: 20px;
- border: 3px solid rgba(67,124,179,0.14);
- }
-
- .tabbar_item_hot {
- position: absolute;
- left: 50%;
- top: 25upx;
- transform: translate(0, -50%);
- width: 30rpx;
- height: 30rpx;
- line-height: 30rpx;
- text-align: center;
- background-color: red;
- border-radius: 50%;
- color: #ffffff;
- font-size: 18rpx;
- z-index: 9;
- }
+ }
- &.active {
- border-left: $isBorder;
- border-top: $isBorder;
- background: $chooseBgColor;
- color: $chooseTextColor;
- }
+ .tabbar_quan {
+ width: 90rpx;
+ height: 90rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #437CB3;
+ border-radius: 50%;
+ border: 6rpx solid rgba(67,124,179,0.14);
}
image {
--
Gitblit v1.9.3