183 lines
4.7 KiB
TypeScript
183 lines
4.7 KiB
TypeScript
import clsx from 'clsx'
|
|
import dayjs from 'dayjs'
|
|
import { defineComponent, reactive, ref, Transition, watch } from 'vue'
|
|
|
|
export default defineComponent(() => {
|
|
const list = [
|
|
'猪脚饭',
|
|
'汉堡薯条',
|
|
'麻辣烫',
|
|
'烧腊饭',
|
|
'黄焖鸡米饭',
|
|
'煲仔饭 ',
|
|
'酸辣粉',
|
|
'肠粉',
|
|
'沙县小吃',
|
|
'热干面',
|
|
'重庆小面 ',
|
|
'兰州拉面',
|
|
'凉皮',
|
|
'生煎',
|
|
'锅贴',
|
|
'炒饭',
|
|
'冒菜',
|
|
'鸭血粉丝汤',
|
|
'胡辣汤',
|
|
'砂锅粥',
|
|
'螺蛳粉',
|
|
'水饺',
|
|
'茶餐厅',
|
|
'馄饨抄手',
|
|
'披萨',
|
|
'桂林米粉',
|
|
'川菜',
|
|
'湘菜',
|
|
'粤菜',
|
|
'日本料理',
|
|
'韩国料理',
|
|
'焗饭',
|
|
'泡面',
|
|
'麻辣香锅',
|
|
'沙拉轻食',
|
|
'馄饨',
|
|
'拉面',
|
|
'烩面',
|
|
'热干面',
|
|
'刀削面',
|
|
'油泼面',
|
|
'炸酱面',
|
|
'炒面',
|
|
'米线',
|
|
'酸辣粉',
|
|
'土豆粉',
|
|
'螺狮粉',
|
|
'凉皮儿',
|
|
'麻辣烫',
|
|
'肉夹馍',
|
|
'羊肉汤',
|
|
'炒饭',
|
|
'盖浇饭',
|
|
'卤肉饭',
|
|
'烤肉饭',
|
|
'黄焖鸡米饭',
|
|
'驴肉火烧',
|
|
'川菜',
|
|
'麻辣香锅',
|
|
'火锅',
|
|
'酸菜鱼',
|
|
'烤串',
|
|
'披萨',
|
|
'烤鸭',
|
|
'汉堡',
|
|
'炸鸡',
|
|
'寿司',
|
|
'蟹黄包',
|
|
'煎饼果子',
|
|
'生煎',
|
|
'炒年糕'
|
|
]
|
|
const text = ref('')
|
|
const open = ref(false)
|
|
const pair = reactive({ front: true, back: true })
|
|
watch(open, (val) => {
|
|
if (!val) text.value = ''
|
|
})
|
|
return () => (
|
|
<div
|
|
class="w-full h-full flex flex-col px-[14px] pt-[23px]"
|
|
style={{
|
|
backgroundImage: `url('/tab/bg/eat_bg@2x.webp')`,
|
|
backgroundSize: '100% 100%'
|
|
}}
|
|
onClick={() => {
|
|
open.value = false
|
|
}}
|
|
>
|
|
<div class={'w-full flex justify-center'}>
|
|
<img src="/tab/bg/eat_top_bg.webp" alt="eat_bg"></img>
|
|
</div>
|
|
<div class={'flex flex-col w-full justify-center items-center'}>
|
|
<div
|
|
class={clsx(
|
|
'w-[130px] duration-150 bg-white relative',
|
|
open.value ? 'h-[120px]' : 'h-[17px]'
|
|
)}
|
|
>
|
|
<button
|
|
class={
|
|
'w-[48px] z-20 h-[19px] text-[12px] rounded left-1/2 bottom-[-10px] absolute -translate-x-1/2 rounded-br-[6px] rounded-bl-[6px] text-white'
|
|
}
|
|
style={{
|
|
background: 'linear-gradient(180deg,#ffa061 0%,#ffb62f 100%)',
|
|
boxShadow: 'inset 0 0 2px #ff640080'
|
|
}}
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
const index = Math.floor(Math.random() * list.length)
|
|
if (text.value) {
|
|
pair.front = false
|
|
text.value = list[index]
|
|
|
|
setTimeout(() => {
|
|
text.value = list[index]
|
|
pair.back = false
|
|
setTimeout(() => {
|
|
pair.front = true
|
|
pair.back = true
|
|
}, 250)
|
|
}, 250)
|
|
} else {
|
|
open.value = true
|
|
text.value = list[index]
|
|
}
|
|
}}
|
|
>
|
|
{open.value ? '换' : '开始'}
|
|
</button>
|
|
|
|
<div class={'w-full h-full absolute left-0 top-0 overflow-hidden'}>
|
|
<Transition name="eat">
|
|
{pair.front && (
|
|
<div class={'flex items-center justify-center w-full h-full'}>
|
|
<span
|
|
class={
|
|
'text-[12px] text-[#333] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
|
|
}
|
|
>
|
|
{text.value}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</Transition>
|
|
<Transition name="neweat">
|
|
{pair.back && (
|
|
<div
|
|
class={
|
|
'flex items-center justify-center w-full h-full left-0 top-[-130px] absolute '
|
|
}
|
|
>
|
|
<span
|
|
class={
|
|
'text-[12px] text-[#333] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
|
|
}
|
|
>
|
|
{text.value}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
|
|
{!text.value && (
|
|
<>
|
|
<span class={'text-[24px] mt-[24px] text-[#333]'}>今天吃什么</span>
|
|
<span class={'mb-[2px] text-[12px] text-[#666]'}>{dayjs().format('MM.DD')}</span>
|
|
<span class="text-[12px] text-[#999]">{dayjs().format('ddd')}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|