hookehuyr

导航栏图标更新

<!--
* @Date: 2022-09-21 11:59:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-14 18:15:06
* @LastEditTime: 2023-12-19 10:43:00
* @FilePath: /meihuaApp/src/components/navBar.vue
* @Description: 底部导航栏
-->
<template>
<view id="navbar-page" class="navbar-page">
<view @tap="goTo('index')" class="home">
<view style="height: 2rem;">
<IconFont :name="icon_home" size="2rem" color="" />
<view style="height: 1.5rem;">
<IconFont :name="icon_home" size="1.5rem" color="" />
</view>
<view><text :style="homeStyle">首页</text></view>
</view>
<view @tap="goTo('book')" class="book">
<view style="height: 2rem;">
<IconFont :name="icon_add" size="2rem" color="" />
<view style="height: 1.5rem;">
<IconFont :name="icon_book" size="1.5rem" color="" />
</view>
<view><text :style="bookStyle">订房</text></view>
</view>
<view @tap="goTo('my')" class="my">
<view style="height: 2rem;">
<IconFont :name="icon_my" size="2rem" color="" />
<view style="height: 1.5rem;">
<IconFont :name="icon_my" size="1.5rem" color="" />
</view>
<view><text :style="myStyle">我的</text></view>
</view>
......@@ -31,11 +31,12 @@
<script setup>
import Taro from '@tarojs/taro'
import { ref, defineProps, computed, onMounted } from 'vue'
import icon_home1 from '@/images/icon/home01@2x.png'
import icon_home2 from '@/images/icon/home02@2x.png'
import icon_my1 from '@/images/icon/my01@2x.png'
import icon_my2 from '@/images/icon/my02@2x.png'
import icon_add from '@/images/icon/new@2x.png'
import icon_home1 from '@/images/icon/icon_home1@2x.png'
import icon_home2 from '@/images/icon/icon_home2@2x.png'
import icon_my1 from '@/images/icon/icon_my1@2x.png'
import icon_my2 from '@/images/icon/icon_my2@2x.png'
import icon_book1 from '@/images/icon/icon_book1@2x.png'
import icon_book2 from '@/images/icon/icon_book2@2x.png'
import { hostListAPI } from '@/api/Host/index'
import { IconFont } from '@nutui/icons-vue-taro';
......@@ -101,16 +102,23 @@ const icon_home = computed(() => {
}
})
const icon_my = computed(() => {
if (props.activated === 'index') {
if (props.activated === 'my') {
return icon_my1
} else {
return icon_my2
}
})
const icon_book = computed(() => {
if (props.activated === 'book') {
return icon_book1
} else {
return icon_my1
return icon_book2
}
})
if (props.activated === 'index') {
homeStyle.value = {
color: '#2A5F45',
color: '#6A4925',
fontSize: '0.9rem'
}
myStyle.value = {
......@@ -121,17 +129,30 @@ if (props.activated === 'index') {
color: '#999999',
fontSize: '0.9rem'
}
} else if (props.activated === 'my') {
homeStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#6A4925',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
} else {
homeStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#2A5F45',
color: '#999999',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#2A5F45',
color: '#6A4925',
fontSize: '0.9rem'
}
}
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-19 10:12:17
* @LastEditTime: 2023-12-19 10:46:04
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 文件描述
-->
......@@ -19,12 +19,12 @@
</view>
<view style="position: absolute; left: 0%; right: 0%; bottom: 0%; height: 20rpx; width: 100%; background-color: #FFF; border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"></view>
</view>
<view v-if="showContent">
<view>
<view id="title" style="padding-left: 1.5rem; font-size: 35rpx; font-weight: bold;">我的订单</view>
<view>
<nut-tabs v-model="value" title-scroll title-gutter="0" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
<nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key">
<view class="book-list">
<view v-if="showContent" class="book-list">
<scroll-view :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
<view v-for="(item, index) in 10" :key="index">
<order-card :key="index" @onPay="onPay"></order-card>
......@@ -106,10 +106,9 @@ export default {
// 设置首页封面高度
const windowHeight = wx.getSystemInfoSync().windowHeight;
// 处理切换显示白屏问题
// setTimeout(() => {
// this.showContent = true;
// }, 1);
this.showContent = true;
setTimeout(() => {
this.showContent = true;
}, 100);
setTimeout(async () => {
const navHeight = await $('#navbar-page').height();
const avatorHeight = await $('#avator').height();
......