11
This commit is contained in:
qiuyuan
parent
a4e47cde15
commit
f8b3520e5d
@ -1,39 +1,47 @@
|
||||
<template>
|
||||
<view class="bottom-nav">
|
||||
<view class="nav-item" @click="navigateTo('index')">
|
||||
<image src="/static/imgs/footer/home.png" mode="aspectFit"></image>
|
||||
<text>首页</text>
|
||||
<image :src="activeTab === 'index' ? '/static/imgs/footer/home-active.png' : '/static/imgs/footer/home.png'"
|
||||
mode="aspectFit"></image>
|
||||
<text :class="{active: activeTab === 'index'}">首页</text>
|
||||
</view>
|
||||
<!-- <view class="nav-item" @click="navigateTo('neighbor')">
|
||||
<image src="/static/imgs/footer/service.png" mode="aspectFit"></image>
|
||||
<text>服务中心</text>
|
||||
</view> -->
|
||||
<view class="nav-item" @click="navigateTo('chat')">
|
||||
<image src="/static/imgs/footer/ai.png" mode="aspectFit" ></image>
|
||||
<text>在线问答</text>
|
||||
<image :src="activeTab === 'chat' ? '/static/imgs/footer/ai-active.png' : '/static/imgs/footer/ai.png'"
|
||||
mode="aspectFit"></image>
|
||||
<text :class="{active: activeTab === 'chat'}">AI助手</text>
|
||||
</view>
|
||||
<!-- <view class="nav-item" @click="navigateTo('service')">
|
||||
<image src="/static/imgs/footer/chat.png" mode="aspectFit"></image>
|
||||
<text>邻里圈</text>
|
||||
</view> -->
|
||||
<view class="nav-item" @click="navigateTo('mine')">
|
||||
<image src="/static/imgs/footer/mine.png" mode="aspectFit"></image>
|
||||
<text>我的</text>
|
||||
<image :src="activeTab === 'mine' ? '/static/imgs/footer/mine-active.png' : '/static/imgs/footer/mine.png'"
|
||||
mode="aspectFit"></image>
|
||||
<text :class="{active: activeTab === 'mine'}">我的</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'index' // 默认激活首页
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取当前页面路径设置激活状态
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length) {
|
||||
const currentPage = pages[pages.length - 1].route;
|
||||
this.activeTab = currentPage.split('/')[1] || 'index';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navigateTo(page) {
|
||||
this.activeTab = page;
|
||||
uni.redirectTo({
|
||||
url: `/pages/${page}/index`,
|
||||
success: () => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
console.log(page)
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -46,13 +54,14 @@
|
||||
align-items: center;
|
||||
background-color: #f8f8f8;
|
||||
position: fixed;
|
||||
// padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
|
||||
bottom: 0;
|
||||
padding-bottom:40rpx;
|
||||
padding-bottom: 40rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
z-index: 999;
|
||||
height: 100rpx;
|
||||
padding-top: 10rpx;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
@ -69,6 +78,10 @@
|
||||
height: 46rpx;
|
||||
margin: 12rpx 0 6rpx 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #5b9cf8; // 激活状态文字颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +1,8 @@
|
||||
<template>
|
||||
<view class="copyright-section">
|
||||
<view class="copyright-section" :style="{bottom: footerHeight}">
|
||||
<view class="copyright-content">
|
||||
<text style="color: #ddd;padding-right: 20rpx;">——</text>
|
||||
<image src="/static/imgs/index/logo.png" class="logo" mode="aspectFit"></image>
|
||||
|
||||
<!-- <view class="divider"></view> -->
|
||||
<text class="copyright-text">
|
||||
提供技术支持
|
||||
</text>
|
||||
@ -15,15 +13,27 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'gx-copyright'
|
||||
name: 'gx-copyright',
|
||||
props: {
|
||||
footerHeight: {
|
||||
type: String,
|
||||
default: '130rpx' // 默认footer高度
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.copyright-section {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 30rpx 0;
|
||||
// background-color: #f8faff;
|
||||
padding: 20rpx 0;
|
||||
background-color:transparent;
|
||||
opacity: 0.6;
|
||||
// z-index: 90; /* 确保在footer下方 */
|
||||
|
||||
.copyright-content {
|
||||
display: flex;
|
||||
@ -36,13 +46,6 @@ export default {
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1rpx;
|
||||
height: 30rpx;
|
||||
background-color: #ddd;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
@ -25,52 +25,62 @@
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper-section">
|
||||
<u-swiper :list="list1" height="320" indicator indicatorMode="dot" bgColor="#f8faff">
|
||||
</u-swiper>
|
||||
<u-swiper :list="list1" height="320" indicator indicatorMode="dot" bgColor="#f8faff"></u-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 天气和穿搭建议 -->
|
||||
<view class="weather-outfit-section">
|
||||
<view class="weather-card">
|
||||
<view class="weather-header">
|
||||
<text class="location">{{weather.province}}·{{weather.area}}</text>
|
||||
<text class="date">{{weather.date}} {{weather.week}}</text>
|
||||
<text class="location">{{weather.province || '--'}}·{{weather.area || '--'}}</text>
|
||||
<text class="date">{{weather.date || '--'}} {{weather.week || '--'}}</text>
|
||||
</view>
|
||||
<view class="weather-content">
|
||||
|
||||
<view v-if="weatherLoading" class="loading-content">
|
||||
<text class="loading-text">天气信息加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="weatherError" class="error-content">
|
||||
<text class="error-text">天气信息获取失败</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="weather-content">
|
||||
<view class="weather-main">
|
||||
<view class="current-weather">
|
||||
<image class="weather-icon" :src="weather.weather ? getWeatherIcon(weather.weather) : ''" mode="aspectFit"></image>
|
||||
</image>
|
||||
<text class="current-temp">{{weather.real}}°</text>
|
||||
<image class="weather-icon"
|
||||
:src="weather.weather ? getWeatherIcon(weather.weather) : '/static/imgs/weather/default.png'"
|
||||
mode="aspectFit"></image>
|
||||
<text class="current-temp">{{weather.real || '--'}}°</text>
|
||||
</view>
|
||||
<text class="weather-desc">{{weather.weather}}</text>
|
||||
<text class="weather-desc">{{weather.weather || '--'}}</text>
|
||||
</view>
|
||||
<view class="temperature-range">
|
||||
<text class="temp-item">最高温 {{weather.highest}}°</text>
|
||||
<text class="temp-item">最低温 {{weather.lowest}}°</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="weather-footer">
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">️风向</text>
|
||||
<text class="footer-text">{{weather.wind}}</text>
|
||||
</view>
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">湿度</text>
|
||||
<text class="footer-text">{{weather.humidity}}%</text>
|
||||
</view>
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">️空气质量</text>
|
||||
<text class="footer-text">{{weather.quality}}</text>
|
||||
</view>
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">️紫外线</text>
|
||||
<text class="footer-text">{{weather.uv_index}}</text>
|
||||
<text class="temp-item">最高温 {{weather.highest || '--'}}°</text>
|
||||
<text class="temp-item">最低温 {{weather.lowest || '--'}}°</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!weatherLoading && !weatherError" class="weather-footer">
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">️风向</text>
|
||||
<text class="footer-text">{{weather.wind || '--'}}</text>
|
||||
</view>
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">湿度</text>
|
||||
<text class="footer-text">{{weather.humidity || '--'}}%</text>
|
||||
</view>
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">️空气质量</text>
|
||||
<text class="footer-text">{{weather.quality || '--'}}</text>
|
||||
</view>
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">️紫外线</text>
|
||||
<text class="footer-text">{{weather.uv_index || '--'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 便捷服务中心 -->
|
||||
<view class="service-section">
|
||||
<view class="section-header">
|
||||
@ -87,7 +97,7 @@
|
||||
<view class="card-bg"></view>
|
||||
</view>
|
||||
<image class="card-icon" src="/static/imgs/index/bangzhu.png"
|
||||
style="width: 76rpx;height: 76rpx; bottom: 32rpx;" ></image>
|
||||
style="width: 76rpx;height: 76rpx; bottom: 32rpx;"></image>
|
||||
</view>
|
||||
|
||||
<view class="service-card card-2" @click="goDetail('serviceTickets')" hover-class="card-hover">
|
||||
@ -98,47 +108,51 @@
|
||||
</view>
|
||||
<image class="card-icon" src="/static/imgs/index/weixiu.png" style="width: 80rpx;height: 80rpx;bottom: 32rpx;"></image>
|
||||
</view>
|
||||
|
||||
<!-- <view class="service-card large card-3" @click="goDetail('neighborList')" hover-class="card-hover">
|
||||
<view class="card-content">
|
||||
<text class="card-title">邻里互助</text>
|
||||
<text class="card-desc">远亲不如近邻互帮互助</text>
|
||||
<view class="card-bg"></view>
|
||||
</view>
|
||||
<image class="card-icon" src="/static/imgs/index/bangzhu.png"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view style="margin: 120rpx 0;">
|
||||
<Copyright/>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<Footer></Footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Copyright from '@/components/gx-copyright.vue';
|
||||
import Footer from '@/components/footer_common.vue';
|
||||
import {
|
||||
get,
|
||||
post
|
||||
} from '@/utils/request';
|
||||
import {
|
||||
IMAGE_BASE_URL,
|
||||
BASE_URL
|
||||
} from '@/utils/config';
|
||||
import Copyright from '@/components/gx-copyright.vue';
|
||||
import Footer from '@/components/footer_common.vue';
|
||||
import { get, post } from '@/utils/request';
|
||||
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
||||
|
||||
export default {
|
||||
export default {
|
||||
components: {
|
||||
Footer,Copyright
|
||||
Footer,
|
||||
Copyright
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list1: [],
|
||||
currentDate: this.formatDate(new Date()),
|
||||
weather: {},
|
||||
weather: {
|
||||
province: '',
|
||||
area: '',
|
||||
date: '',
|
||||
week: '',
|
||||
real: '',
|
||||
highest: '',
|
||||
lowest: '',
|
||||
weather: '',
|
||||
wind: '',
|
||||
humidity: '',
|
||||
quality: '',
|
||||
uv_index: ''
|
||||
},
|
||||
weatherLoading: false,
|
||||
weatherError: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -158,6 +172,7 @@
|
||||
const weekday = weekdays[date.getDay()];
|
||||
return `${weekday} ${month}月${day}日`;
|
||||
},
|
||||
|
||||
// 获取轮播图接口
|
||||
async getBanners() {
|
||||
let params = {
|
||||
@ -185,17 +200,40 @@
|
||||
|
||||
// 获取天气
|
||||
async getWeather() {
|
||||
this.weatherLoading = true;
|
||||
this.weatherError = false;
|
||||
|
||||
try {
|
||||
const res = await get('/api/v1/apps/home/weather');
|
||||
|
||||
if (!res || !res.success) {
|
||||
throw new Error('获取天气失败');
|
||||
}
|
||||
|
||||
this.weather = {
|
||||
...res.data
|
||||
province: res.data.province || '--',
|
||||
area: res.data.area || '--',
|
||||
date: res.data.date || '--',
|
||||
week: res.data.week || '--',
|
||||
real: res.data.real || '--',
|
||||
highest: res.data.highest || '--',
|
||||
lowest: res.data.lowest || '--',
|
||||
weather: res.data.weather || '--',
|
||||
wind: res.data.wind || '--',
|
||||
humidity: res.data.humidity || '--',
|
||||
quality: res.data.quality || '--',
|
||||
uv_index: res.data.uv_index || '--'
|
||||
};
|
||||
|
||||
} catch (err) {
|
||||
console.error('获取轮播图失败:', err);
|
||||
console.error('获取天气失败:', err);
|
||||
this.weatherError = true;
|
||||
uni.showToast({
|
||||
title: '天气信息获取失败',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
this.weatherLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
@ -218,9 +256,6 @@
|
||||
'霾': '/static/imgs/index/fog.png',
|
||||
};
|
||||
|
||||
// 默认图标
|
||||
const defaultIcon = '';
|
||||
|
||||
// 遍历天气关键词，匹配最合适的图标
|
||||
for (const key in weatherMap) {
|
||||
if (weather.includes(key)) {
|
||||
@ -228,16 +263,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
return defaultIcon;
|
||||
}
|
||||
|
||||
|
||||
return '/static/imgs/weather/default.png';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.container {
|
||||
background: #f8faff;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 120rpx;
|
||||
@ -381,6 +414,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.weather-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -408,6 +442,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-content, .error-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200rpx;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -558,5 +601,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -104,7 +104,11 @@
|
||||
<instructionVue @change='readChange'/>
|
||||
<u-button type="primary" text="我已知晓" :disabled="hasReaded" @click="show=false"></u-button>
|
||||
</u-popup> -->
|
||||
<Copyright/>
|
||||
<!-- 保持原有结构不变 -->
|
||||
<view class="copyright-fixed">
|
||||
<Copyright :footerHeight="'0'" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -196,9 +200,11 @@
|
||||
methods: {
|
||||
handleBack() {
|
||||
// 固定跳转首页
|
||||
uni.redirectTo({ url: '/pages/mine/index' });
|
||||
uni.redirectTo({
|
||||
url: '/pages/mine/index'
|
||||
});
|
||||
},
|
||||
formatName(value){
|
||||
formatName(value) {
|
||||
return thingThemes.getName(value)
|
||||
},
|
||||
handleTabChange(index) {
|
||||
@ -369,10 +375,22 @@
|
||||
$tag-radius: 8rpx;
|
||||
|
||||
.container {
|
||||
position: relative; // 添加相对定位
|
||||
min-height: 100vh;
|
||||
padding-bottom: 120rpx; // 为copyright留出空间
|
||||
box-sizing: border-box; // 确保padding计算在高度内
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
background-color: $bg-color;
|
||||
|
||||
.copyright-fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10; /* 防止被其他元素遮挡 */
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -34,13 +34,13 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 修改用户信息弹窗 -->
|
||||
<u-modal :show="showEditModal" :title="isLogin ? '修改用户信息' : '微信授权登录'" :show-confirm-button="isLogin"
|
||||
<u-modal :show="showEditModal" :title="isLogin ? '修改用户信息' : '微信授权手机号'" :show-confirm-button="isLogin"
|
||||
:show-cancel-button="isLogin" @confirm="handleSubmit" @cancel="handleCancel" confirm-color="#2979ff"
|
||||
cancel-color="#606266">
|
||||
<view class="modal-content">
|
||||
<!-- 未登录时显示授权按钮 -->
|
||||
<view v-if="!isLogin" class="auth-section">
|
||||
<view class="auth-title">请先登录以使用完整功能</view>
|
||||
<view class="auth-title">请先授权手机号以使用完整功能</view>
|
||||
<button v-if="!showPhoneButton" class="auth-button" open-type="getUserInfo"
|
||||
@getuserinfo="onGetUserInfo">
|
||||
<image class="wechat-icon" src="/static/imgs/wechat.png"></image>
|
||||
@ -51,7 +51,7 @@
|
||||
<image class="phone-icon" src="/static/imgs/phone.png"></image>
|
||||
授权获取手机号
|
||||
</button>
|
||||
<view class="auth-tip">登录即表示同意《用户协议》和《隐私政策》</view>
|
||||
<view class="auth-tip">授权即表示同意《用户协议》和《隐私政策》</view>
|
||||
</view>
|
||||
<!-- 已登录时显示编辑表单 -->
|
||||
<view v-else class="edit-section">
|
||||
|
||||
BIN
static/imgs/footer/ai-active.png
Normal file
BIN
static/imgs/footer/ai-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 3.7 KiB |
BIN
static/imgs/footer/home-active.png
Normal file
BIN
static/imgs/footer/home-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 3.3 KiB |
BIN
static/imgs/footer/mine-active.png
Normal file
BIN
static/imgs/footer/mine-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 4.3 KiB |
Loading…
x
Reference in New Issue
Block a user