Skip to content

GitLab

Commit 27c3dca3 authored by 武静's avatar 武静
Browse files

设计页面

parent f7bffd08
main coze_chat dev
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 334 additions and 19 deletions
+334 -19
components/common/DynamicTabBar.vue
+ 5
- 5
View file @ 27c3dca3
......@@ -293,7 +293,7 @@ export default {
pagePath: '/pages/index/index',
iconPath: '/static/tabbar/home.svg',
selectedIconPath: '/static/tabbar/home-active.svg',
text: '门诊服务'
text: '门店展示'
},
{
pagePath: '/pages/index1/index1',
......@@ -305,25 +305,25 @@ export default {
pagePath: '/pages/index2/index2',
iconPath: '/static/tabbar/ai.svg',
selectedIconPath: '/static/tabbar/ai-active.svg',
text: 'AI客服'
text: 'AI咨询'
},
{
pagePath: '/pages/index3/index3',
iconPath: '/static/tabbar/qa.svg',
selectedIconPath: '/static/tabbar/qa-active.svg',
text: 'AI答疑'
text: 'AI互动'
},
{
pagePath: '/pages/index4/index4',
iconPath: '/static/tabbar/medical.svg',
selectedIconPath: '/static/tabbar/medical-active.svg',
text: '医疗咨询'
text: '现场抽奖'
},
{
pagePath: '/pages/user/user',
iconPath: '/static/tabbar/appointment.svg',
selectedIconPath: '/static/tabbar/appointment-active.svg',
text: '预约挂号'
text: '扫码进群'
}
];
......
pages/index4/index4.vue
+ 241
- 12
View file @ 27c3dca3
<template>
<view class="page-container">
<view class="content">
<!-- 页面内容 -->
<view class="container">
<!-- 顶部时间显示 -->
<view class="header">
<text class="time">{{currentTime}}</text>
<text class="date">{{currentDate}}</text>
</view>
<!-- 引入动态TabBar组件 -->
<dynamic-tab-bar></dynamic-tab-bar>
<!-- Banner轮播图 -->
<view class="banner-section">
<swiper
class="banner-swiper"
circular
:indicator-dots="true"
:autoplay="true"
:interval="3000"
:duration="500"
@change="onSwiperChange"
>
<swiper-item v-for="(item, index) in bannerList" :key="index" @tap="onBannerClick(item)">
<image :src="item.imageUrl" mode="aspectFill" class="banner-image"></image>
</swiper-item>
</swiper>
</view>
<!-- 月份选择器 -->
<scroll-view scroll-x class="month-scroll" show-scrollbar="false">
<view class="month-list">
<view
v-for="(month, index) in months"
:key="index"
class="month-item"
:class="{ active: currentMonthIndex === index }"
@tap="selectMonth(index)"
>
<text>{{month}}月</text>
</view>
</view>
</scroll-view>
<!-- 进度列表 -->
<view class="progress-list">
<view class="progress-item" v-for="(item, index) in progressItems" :key="index">
<view class="progress-content">
<view class="progress-info">
<!-- 这里可以添加具体的进度内容 -->
</view>
<view class="progress-status" v-if="item.status === 'inProgress'">
<text class="status-text">进行中</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import DynamicTabBar from '@/components/common/DynamicTabBar.vue'
import { getThemeConfig, applyTheme } from '@/services/themeService4.js'
export default {
components: {
......@@ -18,11 +64,41 @@
},
data() {
return {
currentTime: '13:07',
currentDate: '2024年12月9日',
currentMonthIndex: 0,
months: ['一', '二', '三', '三', '三'], // 根据图片显示的月份
progressItems: [
{ status: 'inProgress' },
{ status: 'inProgress' },
{ status: 'inProgress' }
],
// 添加 banner 数据
bannerList: [
{
id: 1,
imageUrl: 'https://picsum.photos/800/400?random=1',
link: '/pages/detail/detail?id=1'
},
{
id: 2,
imageUrl: 'https://picsum.photos/800/400?random=2',
link: '/pages/detail/detail?id=2'
},
{
id: 3,
imageUrl: 'https://picsum.photos/800/400?random=3',
link: '/pages/detail/detail?id=3'
}
],
currentBanner: 0
}
},
onLoad() {
async onLoad() {
console.log('index4页面加载');
this.updateDateTime()
this.loadBannerData() // 添加加载banner数据的方法调用
await this.loadTheme() // 加载主题配置
},
onShow() {
// 触发tabPageShow事件，通知TabBar更新选中状态
......@@ -34,18 +110,171 @@
}
},
methods: {
updateDateTime() {
const now = new Date()
const hours = now.getHours().toString().padStart(2, '0')
const minutes = now.getMinutes().toString().padStart(2, '0')
this.currentTime = `${hours}:${minutes}`
const year = now.getFullYear()
const month = now.getMonth() + 1
const day = now.getDate()
this.currentDate = `${year}年${month}月${day}日`
},
selectMonth(index) {
this.currentMonthIndex = index
},
// 添加 banner 相关方法
async loadBannerData() {
try {
// 这里后续可以替换为真实的API调用
// const response = await getBannerList();
// this.bannerList = response.data;
console.log('Banner数据加载成功');
} catch (error) {
console.error('加载Banner数据失败:', error);
}
},
onSwiperChange(e) {
this.currentBanner = e.detail.current;
},
onBannerClick(item) {
uni.navigateTo({
url: item.link
});
},
// 添加主题加载方法
async loadTheme() {
try {
const response = await getThemeConfig();
if (response.statusCode === 200) {
applyTheme(response.data);
}
} catch (error) {
console.error('加载主题配置失败:', error);
}
}
}
}
</script>
<style>
.page-container {
<style lang="scss">
.container {
min-height: 100vh;
background-color: #f5f5f5;
background-color: var(--background-color);
padding: 30rpx;
}
.header {
padding: 20rpx 0;
.time {
font-size: 36rpx;
color: var(--text-primary);
display: block;
}
.date {
font-size: 24rpx;
color: var(--text-secondary);
margin-top: 4rpx;
display: block;
}
}
.content {
padding-bottom: 120rpx; /* 为TabBar留出空间 */
.banner-section {
margin: 20rpx 0 30rpx;
border-radius: 20rpx;
overflow: hidden;
.banner-swiper {
height: 300rpx;
.banner-image {
width: 100%;
height: 100%;
border-radius: 20rpx;
}
}
:deep(.uni-swiper-dots) {
bottom: 20rpx;
.uni-swiper-dot {
width: 12rpx;
height: 12rpx;
border-radius: 6rpx;
background: rgba(255, 255, 255, 0.6);
&.uni-swiper-dot-active {
width: 24rpx;
background: var(--status-tag-color);
}
}
}
}
.month-scroll {
width: 100%;
white-space: nowrap;
margin: 30rpx 0;
.month-list {
display: inline-flex;
padding: 0 20rpx;
.month-item {
width: 120rpx;
height: 120rpx;
background-color: var(--month-button-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
text {
color: var(--text-white);
font-size: 28rpx;
}
&.active {
background-color: var(--month-button-active-color);
}
}
}
}
.progress-list {
margin-top: 40rpx;
.progress-item {
background-color: var(--progress-item-color);
border-radius: 20rpx;
margin-bottom: 30rpx;
min-height: 200rpx;
padding: 20rpx;
.progress-content {
position: relative;
.progress-status {
position: absolute;
top: 20rpx;
right: 20rpx;
background-color: var(--status-tag-color);
padding: 8rpx 16rpx;
border-radius: 8rpx;
.status-text {
color: var(--text-white);
font-size: 24rpx;
}
}
}
}
}
</style>
services/themeService4.js 0 → 100644
+ 38
- 0
View file @ 27c3dca3
// 模拟主题API响应
const mockThemeData = {
statusCode: 200,
data: {
backgroundColor: '#C4976B',
monthButtonColor: '#A67B4F',
monthButtonActiveColor: '#8B5E3C',
progressItemColor: '#8B5E3C',
statusTagColor: '#FFB74D',
textPrimary: '#000000',
textSecondary: '#333333',
textWhite: '#FFFFFF'
}
};
// 获取主题配置
export const getThemeConfig = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(mockThemeData);
}, 300);
});
};
// 应用主题到样式变量
export const applyTheme = (theme) => {
const style = document.documentElement.style;
// 设置CSS变量
style.setProperty('--background-color', theme.backgroundColor);
style.setProperty('--month-button-color', theme.monthButtonColor);
style.setProperty('--month-button-active-color', theme.monthButtonActiveColor);
style.setProperty('--progress-item-color', theme.progressItemColor);
style.setProperty('--status-tag-color', theme.statusTagColor);
style.setProperty('--text-primary', theme.textPrimary);
style.setProperty('--text-secondary', theme.textSecondary);
style.setProperty('--text-white', theme.textWhite);
};
\ No newline at end of file
static/ai-avatar.png
+ 34
- 1
View file @ 27c3dca3
\ No newline at end of file
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- 背景圆圈 -->
<circle cx="100" cy="100" r="100" fill="url(#avatarGradient)"/>
<!-- AI面部轮廓 -->
<path d="M100 40C77.9086 40 60 57.9086 60 80V120C60 142.091 77.9086 160 100 160C122.091 160 140 142.091 140 120V80C140 57.9086 122.091 40 100 40Z" fill="#FFFFFF"/>
<!-- 眼睛 -->
<circle cx="80" cy="90" r="8" fill="#333333"/>
<circle cx="120" cy="90" r="8" fill="#333333"/>
<!-- 眼睛高光 -->
<circle cx="83" cy="87" r="3" fill="#FFFFFF"/>
<circle cx="123" cy="87" r="3" fill="#FFFFFF"/>
<!-- 嘴巴 -->
<path d="M80 115C80 123.284 89.0589 130 100 130C110.941 130 120 123.284 120 115" stroke="#333333" stroke-width="3" stroke-linecap="round"/>
<!-- 头发 -->
<path d="M60 80C60 57.9086 77.9086 40 100 40C122.091 40 140 57.9086 140 80V95C140 95 130 85 100 85C70 85 60 95 60 95V80Z" fill="#7F4F24"/>
<path d="M65 60C65 60 80 50 100 50C120 50 135 60 135 60" stroke="#7F4F24" stroke-width="10" stroke-linecap="round"/>
<!-- 耳朵 -->
<path d="M60 95C60 95 55 90 55 80C55 70 60 65 60 65" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/>
<path d="M140 95C140 95 145 90 145 80C145 70 140 65 140 65" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/>
<!-- 渐变定义 -->
<defs>
<linearGradient id="avatarGradient" x1="0" y1="0" x2="200" y2="200" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#7B1FA2"/>
<stop offset="1" stop-color="#311B92"/>
</linearGradient>
</defs>
</svg>
\ No newline at end of file
static/waveform.png
+ 16
- 1
View file @ 27c3dca3
\ No newline at end of file
<svg width="300" height="60" viewBox="0 0 300 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 30 L5 20 L10 40 L15 10 L20 50 L25 15 L30 45 L35 25 L40 35 L45 15 L50 45 L55 25 L60 35 L65 20 L70 40
L75 30 L80 10 L85 50 L90 20 L95 40 L100 25 L105 35 L110 15 L115 45 L120 25 L125 40 L130 20 L135 30 L140 50
L145 10 L150 40 L155 20 L160 30 L165 45 L170 25 L175 35 L180 15 L185 45 L190 25 L195 35 L200 20 L205 40
L210 30 L215 10 L220 50 L225 20 L230 40 L235 25 L240 35 L245 15 L250 45 L255 25 L260 35 L265 15 L270 45
L275 25 L280 35 L285 20 L290 40 L295 30 L300 25"
stroke="url(#gradient)" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#9C27B0" stop-opacity="0.5" />
<stop offset="0.5" stop-color="#FFA500" stop-opacity="0.8" />
<stop offset="1" stop-color="#9C27B0" stop-opacity="0.5" />
</linearGradient>
</defs>
</svg>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment