172 lines
3.8 KiB
Vue
172 lines
3.8 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
|
|
|
|
|
|
|
|
import { getProducts } from './api.js';
|
|
import { useUserStore } from '@/store/user.js';
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t, locale } = useI18n();
|
|
const userStore = useUserStore();
|
|
|
|
// 表情数组
|
|
const emotionList = ref([
|
|
{
|
|
icon:'heart',
|
|
text:'HAPPY',
|
|
isCurrent: true,
|
|
},
|
|
{
|
|
icon:'heart',
|
|
text:'LOVE',
|
|
isCurrent: false,
|
|
},
|
|
{
|
|
icon:'heart',
|
|
text:'EXCITED',
|
|
isCurrent: false,
|
|
},
|
|
{
|
|
icon:'heart',
|
|
text:'PEACEFUL',
|
|
isCurrent: false,
|
|
}
|
|
|
|
])
|
|
|
|
// 选择表情数组
|
|
const selectEmotion = (index) => {
|
|
for (let i = 0; i < emotionList.value.length; i++) {
|
|
emotionList.value[i].isCurrent = i === index;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* @desc 跳转至详情页面
|
|
*/
|
|
const toDetailPage = (productId) => {
|
|
uni.navigateTo({
|
|
url: '/pages/product/detail',
|
|
});
|
|
};
|
|
//获取首页数据
|
|
const getProductList = async()=>{
|
|
const res = await getProducts();
|
|
|
|
productData.value=res.data;
|
|
console.log("商品数据",productData.value);
|
|
}
|
|
|
|
//返回按钮
|
|
const back = function() {
|
|
uni.navigateBack()
|
|
}
|
|
|
|
|
|
onLoad(()=>{
|
|
|
|
});
|
|
|
|
// 模拟数据
|
|
|
|
|
|
/**
|
|
* @desc 处理预订事件
|
|
*/
|
|
const handleBook = (productId) => {
|
|
// 这里可以添加预订逻辑，比如跳转到详情页
|
|
uni.navigateTo({
|
|
url: `/pages/product/detail?id=${productId}`,
|
|
});
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<view class="h-[100vh] ">
|
|
<view class="sticky top-0 w-full pt-6 flex flex-col bg-white">
|
|
<view class="flex gap-2 px-6">
|
|
<!-- 返回按钮 -->
|
|
<u-icon name="arrow-leftward" size="50" @click="back"></u-icon>
|
|
<!-- title & 状态 -->
|
|
<view class="flex flex-col gap-[10px]">
|
|
<text class="text-2xl font-bold">Control Console</text>
|
|
<view class="flex items-center gap-2">
|
|
<view class="w-2 h-2 bg-[#5ac725] rounded-full" />
|
|
<text class="text-sm">CONNECTED</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uv-divider line-color="#333333" hairline="false"></uv-divider>
|
|
</view>
|
|
<view class="flex flex-col px-6 pt-2 pb-8 gap-2">
|
|
<!-- title -->
|
|
<text class="text-lg text-[#808080]">TEXT TO SPEECH</text>
|
|
<!-- 输入框 -->
|
|
<view class="flex gap-2">
|
|
<view class="flex flex-1 border border-solid border-theme border-[3px] rounded-lg p-2">
|
|
<u-icon name="mic" size="30"></u-icon>
|
|
<u-input placeholder="Type what Sweekar should say..."></u-input>
|
|
</view>
|
|
<view class="rounded-lg bg-[#808080] p-3 flex justify-center items-center shadow-[4px_4px_1px_0_rgba(64,64,64,1)]">
|
|
<u-icon name="chat" size="40" color="#fff"></u-icon>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex flex-col px-6 pt-2 gap-2">
|
|
<!-- title -->
|
|
<text class="text-lg text-[#808080]">TEXT TO SPEECH</text>
|
|
<!-- 表情选择 -->
|
|
<view class="flex overflow-x-auto whitespace-nowrap gap-2">
|
|
<view v-for="(item,index) in emotionList"
|
|
class="border border-solid border-theme border-[3px] p-5 rounded-lg flex flex-col justify-center items-center gap-2"
|
|
:class="item.isCurrent?'bg-theme':''"
|
|
@click="selectEmotion(index)"
|
|
>
|
|
<!-- 表情 -->
|
|
<u-icon name="heart" size="40" :color="item.isCurrent?'#fff':'#000000'"></u-icon>
|
|
<text class="text-sm" :class="item.isCurrent?'text-[#fff]':'text-theme'">{{ item.text }}</text>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.u-count-down__text) {
|
|
color: #ab002d !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.navigation {
|
|
border-bottom: 1px solid #f2f2f2;
|
|
}
|
|
|
|
.navi-title-center {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.line {
|
|
transition: 0.3s all;
|
|
}
|
|
|
|
.search {
|
|
:deep(.u-search) {
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|