|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
<template>
|
|
|
|
|
<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height" :list="swiperList">
|
|
|
|
|
<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
|
|
|
|
|
:list="swiperList">
|
|
|
|
|
</u-swiper>
|
|
|
|
|
<u-divider margin-top='20' margin-bottom='20' color="#F3AF28">店长推荐</u-divider>
|
|
|
|
|
<view class="wrap">
|
|
|
|
@ -7,13 +8,13 @@
|
|
|
|
|
<template v-slot:left="{leftList}">
|
|
|
|
|
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
|
|
|
|
|
<!-- 警告:微信小程序中需要hx2.8.11版本才支持在template中结合其他组件,比如下方的lazy-load组件 -->
|
|
|
|
|
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
|
|
|
|
|
<u-lazy-load threshold="-450" border-radius="10" :image="item.goodsImage.split(',')[0]" :index="index"></u-lazy-load>
|
|
|
|
|
<view class="demo-title">
|
|
|
|
|
{{item.title}}
|
|
|
|
|
{{item.goodsName}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="price-item">
|
|
|
|
|
<view class="demo-price">
|
|
|
|
|
{{item.price}}元
|
|
|
|
|
{{item.specs[0].goodsPrice}}元
|
|
|
|
|
</view>
|
|
|
|
|
<view class="demo-title">
|
|
|
|
|
/份
|
|
|
|
@ -24,13 +25,13 @@
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:right="{rightList}">
|
|
|
|
|
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
|
|
|
|
|
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
|
|
|
|
|
<u-lazy-load threshold="-450" border-radius="10" :image="item.goodsImage.split(',')[0]" :index="index"></u-lazy-load>
|
|
|
|
|
<view class="demo-title">
|
|
|
|
|
{{item.title}}
|
|
|
|
|
{{item.goodsName}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="price-item">
|
|
|
|
|
<view class="demo-price">
|
|
|
|
|
{{item.price}}元
|
|
|
|
|
{{item.specs[0].goodsPrice}}元
|
|
|
|
|
</view>
|
|
|
|
|
<view class="demo-title">
|
|
|
|
|
/份
|
|
|
|
@ -47,8 +48,13 @@
|
|
|
|
|
import {
|
|
|
|
|
ref
|
|
|
|
|
} from 'vue';
|
|
|
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
|
|
|
import {getSwipperListApi} from '../../api/home.js'
|
|
|
|
|
import {
|
|
|
|
|
onLoad
|
|
|
|
|
} from '@dcloudio/uni-app';
|
|
|
|
|
import {
|
|
|
|
|
getSwipperListApi,
|
|
|
|
|
getHotListApi
|
|
|
|
|
} from '../../api/home.js'
|
|
|
|
|
const carimg = ref('/static/goodscar.png')
|
|
|
|
|
//轮播图高度
|
|
|
|
|
const height = ref('400')
|
|
|
|
@ -62,48 +68,8 @@
|
|
|
|
|
const duration = ref(500)
|
|
|
|
|
//定义轮播图的数据,创建一个空数组
|
|
|
|
|
const swiperList = ref([])
|
|
|
|
|
//列表数据
|
|
|
|
|
const flowList = ref([{
|
|
|
|
|
price: 20,
|
|
|
|
|
title: '小炒肉盖饭',
|
|
|
|
|
image: '/static/test-5.png',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 12,
|
|
|
|
|
title: '手拉面',
|
|
|
|
|
image: '/static/test-8.png',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 10,
|
|
|
|
|
title: '小笼包',
|
|
|
|
|
image: '/static/test-5.png',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 15,
|
|
|
|
|
title: '馄饨',
|
|
|
|
|
image: '/static/test-8.png',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 18,
|
|
|
|
|
title: '香菇肉片盖饭',
|
|
|
|
|
image: '/static/test-8.png',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 15,
|
|
|
|
|
title: '番茄鸡蛋盖饭',
|
|
|
|
|
image: '/static/test-8.png',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 18,
|
|
|
|
|
title: '香菇肉片盖饭',
|
|
|
|
|
image: '/static/test-8.png',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
price: 15,
|
|
|
|
|
title: '番茄鸡蛋盖饭',
|
|
|
|
|
image: '/static/test-8.png',
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
//列表数据,默认空数组
|
|
|
|
|
const flowList = ref([])
|
|
|
|
|
//跳转详情
|
|
|
|
|
const toDetails = (item) => {
|
|
|
|
|
//在起始页面跳转到details.vue页面并传递参数
|
|
|
|
@ -119,8 +85,16 @@
|
|
|
|
|
swiperList.value = res.data;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//热推数据
|
|
|
|
|
const getHotList = async () => {
|
|
|
|
|
let res = await getHotListApi()
|
|
|
|
|
if (res && res.code == 200) {
|
|
|
|
|
flowList.value = res.data;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
onLoad(() => {
|
|
|
|
|
getSwipperList()
|
|
|
|
|
getHotList()
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|