243 lines
9.2 KiB
Vue
243 lines
9.2 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="head" :class="headShow?'head_show':''" :style="{'opacity':headShow?opacity:'1','padding-top':statusBartop+'px'}">
|
||
<view class="head_cont" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||
<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||
<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="head_title" :style="{'width':pageWidth+'px','height':statusHeight+'px'}">AI学做菜</view>
|
||
</view>
|
||
</view>
|
||
<view class="content" :style="{'padding-top':statusBartop+statusHeight+10+'px'}">
|
||
<view class="content_greetings">
|
||
<view class="content_greetings_l">
|
||
<image class="content_greetings_img" :src="timeImg" mode="widthFix"></image>
|
||
<view class="content_greetings_btn" @click="onChat()">
|
||
<image class="content_greetings_btnimg" src="../../static/userserve/Chatting.png"></image>
|
||
<text class="content_greetings_text">开始聊天</text>
|
||
</view>
|
||
</view>
|
||
<image class="content_greetings_r" src="../../static/userserve/Robot.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="content_hot">
|
||
<view class="content_hot_title">热门问题</view>
|
||
<view class="content_hot_danmu">
|
||
<view class="content_hot_danmu_li"
|
||
v-for="(item,index) in danmuList"
|
||
:key="index"
|
||
:style="{ top: item.top + 'px', animationDuration: item.duration + 's' }"
|
||
>
|
||
<image class="content_hot_danmu_liimg" src="../../static/userserve/197.png" mode="widthFix"></image>
|
||
<text class="content_hot_danmu_li_text">{{item.text}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_list">
|
||
<image class="content_list_img" src="https://i2.chuimg.com/cf03e5621d75418b8babb983415423aa_1080w_864h.jpg" mode="aspectFill"></image>
|
||
<view class="content_list_script">
|
||
<view class="content_list_title">甜口红烧肉做法</view>
|
||
<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_list">
|
||
<image class="content_list_img" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="aspectFill"></image>
|
||
<view class="content_list_script">
|
||
<view class="content_list_title">甜口红烧肉做法</view>
|
||
<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_list">
|
||
<image class="content_list_img" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="aspectFill"></image>
|
||
<view class="content_list_script">
|
||
<view class="content_list_title">甜口红烧肉做法</view>
|
||
<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_list">
|
||
<image class="content_list_img" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="aspectFill"></image>
|
||
<view class="content_list_script">
|
||
<view class="content_list_title">甜口红烧肉做法</view>
|
||
<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 200px;"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
const { proxy } = getCurrentInstance();
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
|
||
const headShow = ref(false);
|
||
const showBack = ref(false);
|
||
const pageWidth = ref(0);
|
||
const opacity = ref(1);
|
||
const timeImg = ref('');
|
||
const danmuList = ref([])
|
||
// 获取页面宽度
|
||
const updatePageWidth = () => {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
pageWidth.value = systemInfo.windowWidth;
|
||
};
|
||
const searchWidth = computed(() => {
|
||
return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
|
||
});
|
||
// 判断是否有上一页
|
||
const getPages = () => {
|
||
const pages = getCurrentPages();
|
||
return pages.length > 1;
|
||
};
|
||
const handleBack = () => {
|
||
if (getPages()) {
|
||
// 如果有上一页，返回上一页
|
||
uni.navigateBack();
|
||
} else {
|
||
// 如果没有上一页，返回首页
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
});
|
||
}
|
||
};
|
||
const detail=()=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/clientservedetail/clientservedetail`
|
||
})
|
||
};
|
||
const timeFun=()=>{
|
||
// 获取当前时间
|
||
const now = new Date();
|
||
// 获取当前小时数（24 小时制）
|
||
const hour = now.getHours();
|
||
// 判断时间段
|
||
let timePeriod;
|
||
if (hour >= 0 && hour < 6) {
|
||
timePeriod = '../../static/userserve/evening.png';//'凌晨';
|
||
} else if (hour >= 6 && hour < 9) {
|
||
timePeriod = '../../static/userserve/morning.png';//'早上';
|
||
} else if (hour >= 9 && hour < 12) {
|
||
timePeriod = '../../static/userserve/morning.png';//'上午';
|
||
} else if (hour === 12) {
|
||
timePeriod = '../../static/userserve/lunchtime.png';//'中午';
|
||
} else if (hour > 12 && hour < 18) {
|
||
timePeriod = '../../static/userserve/Afternoon.png';//'下午';
|
||
} else if (hour >= 18 && hour < 24) {
|
||
timePeriod = '../../static/userserve/evening.png';//晚上
|
||
} else {
|
||
timePeriod = '未知时间段';
|
||
}
|
||
timeImg.value = timePeriod;
|
||
}
|
||
const sendDanmu =()=> {
|
||
// 生成弹幕数据
|
||
const danmu = [
|
||
{
|
||
id: 1, // 唯一 ID
|
||
text: '肉的做法', // 弹幕文本
|
||
top: Math.random(), // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
},
|
||
{
|
||
id:2, // 唯一 ID
|
||
text: '番茄滑肉煲｜肉片超级嫩滑！天冷来上一锅太暖了', // 弹幕文本
|
||
top: Math.random() * 50, // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
},
|
||
{
|
||
id:3, // 唯一 ID
|
||
text: '蚂蚁上树——肉末粉条的完美结合', // 弹幕文本
|
||
top: Math.random() * 100, // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
},
|
||
{
|
||
id:3, // 唯一 ID
|
||
text: '水煮肉片（肯定不翻车）', // 弹幕文本
|
||
top: Math.random() * 150, // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
},
|
||
{
|
||
id:4, // 唯一 ID
|
||
text: '香菜拌牛肉', // 弹幕文本
|
||
top: Math.random() * 200, // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
},
|
||
{
|
||
id:5, // 唯一 ID
|
||
text: '香煎五花肉', // 弹幕文本
|
||
top: Math.random() * 250, // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
},
|
||
{
|
||
id:6, // 唯一 ID
|
||
text: '东北溜肉段（酸甜口，极简版）', // 弹幕文本
|
||
top: Math.random() * 300, // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
},
|
||
{
|
||
id:7, // 唯一 ID
|
||
text: '绝绝子！甩饭店几条街的粉蒸肉（粉蒸排骨）', // 弹幕文本
|
||
top: Math.random() * 350, // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
},
|
||
{
|
||
id:8, // 唯一 ID
|
||
text: '孩子爱吃的蒸肉饼', // 弹幕文本
|
||
top: Math.random() * 400, // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
},
|
||
{
|
||
id:9, // 唯一 ID
|
||
text: '又香又嫩的小炒牛肉（巨好吃，手残党也能做）', // 弹幕文本
|
||
top: Math.random() * 450, // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
},
|
||
{
|
||
id:10, // 唯一 ID
|
||
text: '湖南农家小炒肉', // 弹幕文本
|
||
top: Math.random() * 500, // 随机 top 值（控制弹幕位置）
|
||
duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
|
||
}
|
||
];
|
||
// 添加到弹幕列表
|
||
danmuList.value = (danmu);
|
||
}
|
||
const onChat=()=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/aichitchat/aichitchat`
|
||
})
|
||
}
|
||
onLoad((options) => {
|
||
//初始化时判断是否显示返回按钮
|
||
showBack.value = getPages();
|
||
updatePageWidth();
|
||
timeFun();
|
||
sendDanmu();
|
||
});
|
||
onShow(() => {});
|
||
onPageScroll((e)=>{
|
||
const top = e.scrollTop;
|
||
// 导航条颜色透明渐变
|
||
if (top <= 50) {
|
||
headShow.value = false
|
||
} else {
|
||
if( 50 < top && top <= 200 ){
|
||
opacity.value = top / 200
|
||
}else{
|
||
opacity.value = 1
|
||
}
|
||
headShow.value = true
|
||
}
|
||
}),
|
||
onReady(()=>{})
|
||
onPullDownRefresh(()=>{})
|
||
onReachBottom(()=>{})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |