zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 主页的接口对接

Browse Source
This commit is contained in:
zoujing
2025-07-27 14:08:33 +08:00
parent 87bdac8c57
commit 43ae8365a9
8 changed files with 183 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pages/chat/ChatCardOther.vue
View File

@@ -17,6 +17,7 @@
<style lang="scss" scoped>
.chat-other {
width: 100%;
margin: 6px 0;
padding: 0 12px;
display: flex;

50
pages/chat/ChatMainList.vue
View File

@@ -18,8 +18,11 @@
:scroll-with-animation="true"
class="area-msg-list"
>
<!-- logo栏 -->
<ChatTopBanner class="chat-container-top-bannar"></ChatTopBanner>
<!-- welcome栏 -->
<ChatTopWelcome class="chat-container-top-bannar"
:initPageImages="mainPageDataModel.initPageImages"
:welcomeContent="mainPageDataModel.welcomeContent">
</ChatTopWelcome>
<view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
@@ -35,8 +38,12 @@
</template>
<template v-else>
<ChatCardOther class="message-item-other" :text="item.msg">
<OneFeelMK001/>
<OneFeelMK002/>
<OneFeelMK001 :activityList="mainPageDataModel.activityList"/>
<template v-for="(item) in mainPageDataModel.recommendTheme">
<OneFeelMK002 :recommendTheme="item"/>
</template>
</ChatCardOther>
</template>
</view>
@@ -47,7 +54,7 @@
<!-- 输入框区域 -->
<view class="footer-area">
<ChatMoreTips @replySent="handleReply" :itemList="guideWords"></ChatMoreTips>
<ChatMoreTips @replySent="handleReply" :itemList="mainPageDataModel.guideWords"></ChatMoreTips>
<ChatQuickAccess @replySent="handleReply"></ChatQuickAccess>
<ChatInputArea
v-model:inputMessage="inputMessage"
@@ -61,11 +68,11 @@
</template>
<script setup >
import { onMounted, getCurrentInstance, nextTick } from 'vue'
import { onMounted, nextTick } from 'vue'
import { ref } from 'vue'
import { defineEmits } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import ChatTopBanner from './ChatTopBanner.vue';
import ChatTopWelcome from './ChatTopWelcome.vue';
import ChatTopBgImg from './ChatTopBgImg.vue';
import ChatTopNavBar from './ChatTopNavBar.vue';
import ChatCardAI from './ChatCardAI.vue';
@@ -76,11 +83,10 @@
import ChatInputArea from './ChatInputArea.vue'
import CommandWrapper from '@/components/CommandWrapper/index.vue'
import { MessageRole, ChatModel, MessageType } from '../../model/ChatModel';
import { MessageRole, MessageType } from '../../model/ChatModel';
import OneFeelMK001 from '../module/OneFeelMK001.vue';
import OneFeelMK002 from '../module/OneFeelMK002.vue';
import request from '../../request/base/request';
import { agentChatStream } from '../../request/api/AgentChatStream';
import { mainPageData } from '../../request/api/MainPageData';
@@ -93,10 +99,13 @@
const chatMsgList = ref([])
const inputMessage = ref('')
const activityList = ref([])
/// 从个渠道获取如二维，没有的时候就返回首页的数据
const sceneId = ref('')
const mainPageDataModel = ref({})
const guideWords = ref([])
// 锚点ID（控制滚动位置）
const lastMsgId = ref('anchor-bottom');
@@ -122,29 +131,24 @@
});
onMounted(() => {
// getMainPageData()
initData()
getMainPageData()
})
const getMainPageData = async() => {
mainPageDataModel.value = await mainPageData()
guideWords.value = mainPageDataModel.value.guideWords
const res = await mainPageData(sceneId.value)
if(res.code === 0) {
mainPageDataModel.value = res.data
initData()
}
}
const initData = () => {
const msg = {
msgId: `msg_${0}`,
msgType: MessageRole.AI,
msg: '查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!',
}
chatMsgList.value.push(msg)
const msg1 = {
msgId: `msg_${1}`,
msgType: MessageRole.OTHER,
msg: '',
}
chatMsgList.value.push(msg1)
chatMsgList.value.push(msg)
}
const handleTouchEnd = () => {

2
pages/chat/ChatMoreTips.vue
View File

@@ -14,7 +14,7 @@
defineProps({
itemList: {
type: [],
type: Array,
default: [
'定温泉票',
'定酒店',

61
pages/chat/ChatTopBanner.vue
View File

@@ -1,61 +0,0 @@
<template>
<view class="top-bg-content">
<view class="top-item1">
<view class="top-item1-left">
<image src="/static/hello_xiaomu_icon@2x.png"></image>
<text>2025/02/10 多云 -3～6℃</text>
</view>
<view class="top-item1-right">
<image src="/static/hello_logo_icon@2x.png" ></image>
</view>
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.top-bg-content {
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-direction: column;
}
.top-item1 {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0 46px 0 32px;
.top-item1-left {
display: flex;
flex-direction: column;
justify-content: flex-end;
image {
width: 118px;
height: 52px;
}
text {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #1E4C69;
line-height: 24px;
text-align: justify;
font-style: normal;
text-transform: none;
}
}
.top-item1-right {
image {
width: 96px;
height: 96px;
}
}
}
</style>

99
pages/chat/ChatTopWelcome.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<view class="top-bg-content">
<view class="top-item1" >
<!-- :style="backgroundStyle" -->
<view class="top-item1-left">
<image :src="initPageImages.welcomeImageUrl"></image>
<text>{{ currentDate }} 多云 -3～6℃ </text>
</view>
<view class="top-item1-right">
<image :src="initPageImages.logoImageUrl"></image>
</view>
</view>
<ChatCardAI :text='welcomeContent'/>
</view>
</template>
<script setup>
import { defineProps, computed, ref } from "vue";
import ChatCardAI from './ChatCardAI.vue';
const props = defineProps({
initPageImages: {
type: Object,
default: {
backgroundImageUrl: '',
logoImageUrl: '/static/hello_banner_icon@2x.png',
welcomeImageUrl: '/static/hello_banner_bg@2x.png'
}
},
welcomeContent: {
type: String,
default: '查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!'
}
})
// 获取当前日期
const today = new Date();
const currentDate = ref(today.getFullYear() + '/' +
((today.getMonth() + 1) < 10 ? '0' : '') + (today.getMonth() + 1) + '/' +
(today.getDate() < 10 ? '0' : '') + today.getDate());
// 计算背景样式
const backgroundStyle = computed(() => {
return {
backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}
})
</script>
<style lang="scss" scoped>
.top-bg-content {
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-direction: column;
}
.top-item1 {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 32px 0 32px;
margin-bottom: -6px;
.top-item1-left {
display: flex;
flex-direction: column;
justify-content: flex-end;
image {
width: 118px;
height: 52px;
}
text {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #1E4C69;
line-height: 24px;
text-align: justify;
font-style: normal;
text-transform: none;
}
}
.top-item1-right {
image {
width: 130px;
height: 130px;
margin-bottom: -20px;
}
}
}
</style>

69
pages/module/OneFeelMK001.vue
View File

@@ -1,54 +1,59 @@
<template>
<view class="container">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
:duration="duration">
<swiper-item>
<view class="swiper-item uni-bg-red">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">C</view>
</swiper-item>
</swiper>
<swiper class="swiper" circular
:indicator-dots="activityList.length > 1"
indicator-color="#FFFFFF"
indicator-active-color="#00A6FF"
:autoplay="autoplay"
:interval="interval"
:duration="duration">
<swiper-item v-for="item in activityList" :key="item.id">
<view class="swiper-item">
<image :src="item.activityCover" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
<script setup>
import { ref } from 'vue'
const autoplay = ref(true)
const interval = ref(3000)
const duration = ref(500)
const props = defineProps({
activityList: {
type: Array,
default: []
}
})
</script>
<style scoped lang="scss">
.container {
margin-bottom: 6px;
.uni-margin-wrap {
width: 690rpx;
width: 100%;
}
.swiper {
height: 300rpx;
height: 120px;
border-radius: 8px;
}
.swiper-item {
display: block;
height: 300rpx;
line-height: 300rpx;
height: 120px;
line-height: 120px;
text-align: center;
}
.uni-bg-red {
background-color: red;
}
.uni-bg-green {
background-color: green;
}
.uni-bg-blue {
background-color: blue;
}
.swiper-item image {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
</style>

19
pages/module/OneFeelMK002.vue
View File

@@ -1,19 +1,29 @@
<template>
<view class="container">
<view class="mk-title">
<text class="title">避世放松 能量调节</text>
<text class="title"> {{ recommendTheme.themeName }}</text>
<image class="wave" src="@/static/wave_icon.png" mode="widthFix"/>
</view>
<view class="container-scroll">
<view class="mk-card-item" v-for="(item, index) in 8" :key="index">
<image src="/static/test/mk_img_1.png"></image>
<text>#森系环境 #出工人必备-{{item}}</text>
<view class="mk-card-item" v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
<image :src="item.coverPhoto" mode="widthFix"></image>
<text>{{ item.topic }}</text>
</view>
</view>
</view>
</template>
<script setup>
defineProps({
recommendTheme: {
type: Object,
default: {}
}
})
</script>
<style lang="scss" scoped>
@@ -53,6 +63,7 @@
.mk-card-item {
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
height: 154px;
background-color: #ffffff;