151 lines
2.8 KiB
Vue
151 lines
2.8 KiB
Vue
<template>
|
|
<view class="page-index">
|
|
<view class="header">
|
|
<view class="my-location flex-center">
|
|
<text class="icon-location iconfont"></text>
|
|
<text class="address">通力大厦</text>
|
|
</view>
|
|
<view class="search-box">
|
|
<view class="search-input-wrapper flex-center" @click="showSearchPage">
|
|
<text class="iconfont icon-search"></text>
|
|
<view class="input">{{placeholder}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="foods-category">
|
|
<view class="category-item" v-for="c in categroyList" @click="loadFoodByCid(c.id)" :key="c.id">
|
|
<view class="cover">
|
|
<image :src="c.cover" mode=""></image>
|
|
</view>
|
|
<view class="title">{{c.id}}{{c.title}}</view>
|
|
</view>
|
|
</view>
|
|
<FoodsList v-if="foodsList" :foodsList="foodsList"></FoodsList>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, ref } from "vue";
|
|
import { API_URL } from "../../service/api";
|
|
|
|
const foodsList = ref([])
|
|
|
|
const categroyList = ref<{
|
|
id : number; title : string; cover : string
|
|
}[]>([])
|
|
|
|
|
|
uni.request({
|
|
url: API_URL + '/api/category',
|
|
success(ret) {
|
|
categroyList.value = ret.data.data
|
|
// console.log(ret.data.data)
|
|
}
|
|
})
|
|
uni.request({
|
|
url: API_URL + '/api/food/recommend',
|
|
success(ret) {
|
|
foodsList.value = ret.data.data
|
|
// console.log(ret.data.data)
|
|
}
|
|
})
|
|
|
|
function loadFoodByCid(cid : any) {
|
|
uni.navigateTo({
|
|
url: `/pages/index/category?cid=${cid}`
|
|
})
|
|
|
|
}
|
|
|
|
function showSearchPage() {
|
|
uni.navigateTo({
|
|
url: '/pages/index/search'
|
|
})
|
|
}
|
|
|
|
|
|
const foodsName = '鱼香肉丝,鱼香茄子,烂肉豇豆,麻婆豆腐'.split(',');
|
|
const placeholder = ref('搜索 鱼香肉丝 试试')
|
|
|
|
|
|
let timer : any, foodsIndex = 1;
|
|
onMounted(() => {
|
|
timer = setInterval(() => {
|
|
placeholder.value = `搜索 ${foodsName[foodsIndex]} 试试`
|
|
foodsIndex++;
|
|
if (foodsIndex >= foodsName.length) {
|
|
foodsIndex = 0;
|
|
}
|
|
}, 5000)
|
|
})
|
|
onUnmounted(() => {
|
|
clearInterval(timer)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-index {
|
|
// min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
background-color: $uni-color-primary;
|
|
padding: 10px 15px;
|
|
color: white;
|
|
}
|
|
|
|
.my-location {
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
max-width: 100px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.address {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.search-box {
|
|
flex: 1;
|
|
}
|
|
|
|
.icon-search {
|
|
color: #666;
|
|
font-size: 20px;
|
|
transform: translateY(1px);
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.search-input-wrapper {
|
|
background-color: #fff;
|
|
border-radius: 40px;
|
|
height: 30px;
|
|
margin-top: 10px;
|
|
padding: 0 15px 0 5px;
|
|
|
|
.input {
|
|
width: 100%;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
// 分类
|
|
.foods-category {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.category-item {
|
|
width: 25%;
|
|
text-align: center;
|
|
float: left;
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
|
|
image {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
</style> |