203 lines
6.6 KiB
Vue
203 lines
6.6 KiB
Vue
<template>
|
|
<view class="index">
|
|
<view class="header" @click="tosearch()">
|
|
<view class="search">
|
|
<i class="iconfont"></i>
|
|
<span>搜索百万免费菜谱</span>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<p class="title_a">今日热门</p>
|
|
<view class="uni-padding-wrap">
|
|
<view class="page-section swiper">
|
|
<view class="page-section-spacing">
|
|
<swiper class="swiper" :autoplay="autoplay" :circular="circular"
|
|
:indicator-dots="ind" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#ffffff">
|
|
<swiper-item v-for="(v,i) in bannerdata" :key="i" @click="tobannerInfo(v.url)">
|
|
<image :src="v.img" class="banner"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<p class="title_b">为你推荐</p>
|
|
<view class="top_tab">
|
|
<view class="tab">
|
|
<image src="../../static/img/W1.png">
|
|
<span>每日优惠</span>
|
|
</image>
|
|
</view>
|
|
<view class="tab_2" @click="goclass()">
|
|
<image src="../../static/img/W2.png">
|
|
<span>食材大全</span>
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="top_tab">
|
|
<view class="top_3">
|
|
<image src="../../static/img/W3.png">
|
|
<span>热门专题</span>
|
|
</image>
|
|
</view>
|
|
<view class="top_3" @click="goclass()">
|
|
<image src="../../static/img/W4.png">
|
|
<span>菜谱分类</span>
|
|
</image>
|
|
</view>
|
|
<view class="top_3" @click="govideo()">
|
|
<image src="../../static/img/W5.png">
|
|
<span>视频菜谱</span>
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="title_c">每日三餐</view>
|
|
<view class="threeMeals_top">
|
|
<view class="threeMeals_text" :class="{active:i==mealsnumber?isActive:!isActive}"
|
|
v-for="(v,i) in threeMeals" :key="i" @click="clickswitch(i)">{{ v.title }}
|
|
</view>
|
|
</view><!--顶部选项-->
|
|
<swiper class="swiper-box" @change="onswitch" :current="mealsnumber"><!--轮播图-->
|
|
<swiper-item class="swiper-item" v-for="(v,i) in threeMeals" :key="i">
|
|
<scroll-view scroll-y class="list_data_1">
|
|
<view class="list_data" v-for="(data,icon) in v.content" :key="icon" @click="toinfo(data.url)">
|
|
<image :src="data.img"></image>
|
|
<p>{{ data.title }}</p>
|
|
<view class="txt">养</view>
|
|
<view class="txt_2">{{ data.des }}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="title_d">大家都在做</view>
|
|
<view class="title_d_top">
|
|
<view v-for="(v,i) in type" class="title_d_top_text" @click="title_top_typs(i)" :class="{active_2:i==typenumber?isActive:!isActive}">{{ v.title }}</view>
|
|
</view>
|
|
<view class="title_d_content" v-for="(v,i) in type" v-show="typenumber==i">
|
|
<view class="title_d_content_list" v-for="(data,i) in type[typenumber].content" :key="i" @click="toinfo(data.path)">
|
|
<view v-if="isarray(data.img) == false">
|
|
<image :src="data.img" class="food_img"></image>
|
|
</view>
|
|
<view v-if="isarray(data.img) == true">
|
|
<image :src="data.img[0]" class="food_img"></image>
|
|
</view>
|
|
<p>{{data.title}}</p>
|
|
<view class="yyy">养</view>
|
|
<view class="dddd" v-if="data.label">{{data.label.desc}}</view>
|
|
<view class="user">
|
|
<view class="user_left">
|
|
<image :src="data.author.avatar_url" class="user_img"></image>
|
|
<span class="tit">{{data.author.nickname}}</span>
|
|
</view>
|
|
<view class="user_right">
|
|
<i class="iconfont sssss"></i>
|
|
<span class="nubs">{{data.viewed_amount}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
type: [
|
|
{title: '推荐', type: 1, page: 1, total_page: 0, content: []},
|
|
{title: '时令', type: 2, page: 1, total_page: 0, content: []},
|
|
{title: '食肉', type: 3, page: 1, total_page: 0, content: []},
|
|
{title: '素食', type: 4, page: 1, total_page: 0, content: []},
|
|
{title: '烘焙', type: 5, page: 1, total_page: 0, content: []},
|
|
],
|
|
typenumber: 0,
|
|
autoplay: true,//轮播图
|
|
circular: true,//轮播图
|
|
interval: 3000,//轮播图
|
|
ind: true,//轮播图
|
|
mealsnumber: 0,//轮播图页数
|
|
bannerdata: [],//轮播图数据
|
|
threeMeals: [],//每日三擦数据
|
|
isActive: true,//判断显示active
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getbanner()//获取banner图
|
|
this.getthreeMeals()//获取每日三餐
|
|
this.getclassdata()
|
|
},
|
|
onReachBottom(){
|
|
this.type[this.typenumber].page = this.type[this.typenumber].page + 1
|
|
if (this.type[this.typenumber].page< this.type[this.typenumber].total_page) {
|
|
this.getclassdata()
|
|
}
|
|
},
|
|
methods: {
|
|
isarray:function(arraya){
|
|
var arr = arraya instanceof Array
|
|
return arr
|
|
},
|
|
async getbanner() {
|
|
this.bannerdata = await this.$http.index.banner()
|
|
console.log("轮播图", this.bannerdata)
|
|
},
|
|
async getthreeMeals() {
|
|
this.threeMeals = await this.$http.index.threeMeals()
|
|
console.log("三餐", this.threeMeals)
|
|
},
|
|
async getclassdata() {
|
|
if(this.type[this.typenumber].content.length==0){
|
|
let res = await this.$http.index.class({
|
|
type: this.type[this.typenumber].type,
|
|
page: this.type[this.typenumber].page
|
|
})
|
|
this.type[this.typenumber].total_page=res.total_page
|
|
this.type[this.typenumber].content.push(...res.items)
|
|
console.log("分类", this.type)
|
|
}
|
|
},
|
|
clickswitch(i) {
|
|
this.mealsnumber = i
|
|
},
|
|
onswitch(i) {
|
|
this.mealsnumber = i.detail.current
|
|
},
|
|
tobannerInfo(toulr) {
|
|
uni.navigateTo({
|
|
url: "/pages/bannerInfo/bannerInfo?url=" + toulr
|
|
})
|
|
},
|
|
goclass() {
|
|
uni.switchTab({
|
|
url: '/pages/classification/classification'
|
|
})
|
|
},
|
|
govideo() {
|
|
uni.switchTab({
|
|
url: '/pages/video/video'
|
|
})
|
|
},
|
|
tosearch() {
|
|
uni.navigateTo({
|
|
url: '/pages/search/search'
|
|
})
|
|
},
|
|
toinfo(v) {
|
|
console.log("======", v)
|
|
uni.navigateTo({
|
|
url: '/pages/info/info?url=' + v
|
|
})
|
|
},
|
|
title_top_typs(i) {
|
|
this.typenumber = i
|
|
this.getclassdata()
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../../common/less/page/Home.less";
|
|
</style>
|