update
This commit is contained in:
parent
9f109f598f
commit
a9dea3af14
89
components/FoodsList/FoodsList.vue
Normal file
89
components/FoodsList/FoodsList.vue
Normal file
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="foods-list">
|
||||
<view class="foods-item" v-for="f in foodsList" :key="f.id" @click="showDetail(f)">
|
||||
<view class="foods-cover">
|
||||
<image class="cover" :src="f.cover" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="foods-info">
|
||||
<view class="foods-name">{{ f.title }}</view>
|
||||
<view class="foods-month">月销 {{ f.saleCount }} 单</view>
|
||||
<view class="foods-coupon">
|
||||
<text class="iconfont icon-coupon_fill icon-coupon"></text>
|
||||
<text>{{f.couponDesc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { FoodsModel } from "../../service/models";
|
||||
defineComponent({
|
||||
name: 'FoodsList'
|
||||
})
|
||||
|
||||
defineProps<{
|
||||
foodsList : FoodsModel[]
|
||||
}>()
|
||||
function showDetail(f : FoodsModel) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/detail?id=${f.id}`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.foods-list {
|
||||
background-color: #fafafa;
|
||||
padding: 10px 0;
|
||||
|
||||
.foods-item {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.foods-cover {
|
||||
width: 80px;
|
||||
margin-right: 10px;
|
||||
|
||||
.cover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.foods-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.foods-name {}
|
||||
|
||||
.foods-month {
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.foods-coupon {
|
||||
border-top: 1px dashed #eee;
|
||||
padding-top: 5px;
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
|
||||
.icon-coupon {
|
||||
color: $uni-color-primary;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
20
pages.json
20
pages.json
@ -17,7 +17,25 @@
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
,{
|
||||
"path" : "pages/index/search",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/index/detail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTitleText": "我爱外卖",
|
||||
|
||||
54
pages/index/detail.vue
Normal file
54
pages/index/detail.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<view class="page-detail" v-if="f">
|
||||
<view class="foods-cover">
|
||||
<image class="cover" :src="f.cover" mode=""></image>
|
||||
</view>
|
||||
<view class="foods-name">
|
||||
<text>{{f.title}}</text>
|
||||
</view>
|
||||
<view class="sale-count">
|
||||
<text>{{f.saleCount}}</text>
|
||||
</view>
|
||||
<view class="sale-control">
|
||||
<view class="sale-price">
|
||||
<text class="price">{{f.price}}</text>
|
||||
<text class="coupon">{{f.coupon}}</text>
|
||||
</view>
|
||||
<view class="add-to-cart">
|
||||
<text class="iconfont icon-add"></text>
|
||||
<text>加入购物车</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foods-detail-content" v-html="f.content">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { foodsDetail } from '../../service/api';
|
||||
import { ref } from "vue";
|
||||
import { FoodsModel } from '../../service/models';
|
||||
const props = defineProps<{
|
||||
id : any
|
||||
}>();
|
||||
const f = ref<FoodsModel>()
|
||||
foodsDetail(props.id).then((foods) => {
|
||||
f.value = foods
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-detail{
|
||||
img,image,umi-image{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.foods-cover{
|
||||
.cover{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<view>
|
||||
<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">
|
||||
<view class="search-input-wrapper flex-center" @click="showSearchPage">
|
||||
<text class="iconfont icon-search"></text>
|
||||
<input class="input" type="text" :placeholder="placeholder" />
|
||||
<view class="input">{{placeholder}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -20,12 +20,7 @@
|
||||
<view class="title">{{c.id}}{{c.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="foods-list">
|
||||
<view class="foods-item" v-for="f in foodsList">
|
||||
<image :src="f.cover" mode=""></image>
|
||||
<view class="foods-name">{{f.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<FoodsList :foodsList="foodsList"></FoodsList>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -65,6 +60,12 @@
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function showSearchPage(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/index/search'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const foodsName = '鱼香肉丝,鱼香茄子,烂肉豇豆,麻婆豆腐'.split(',');
|
||||
@ -87,27 +88,24 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-index {
|
||||
// min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: $uni-color-primary;
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.my-location {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50px;
|
||||
padding: 0px 10rpx;
|
||||
font-size: 12px;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-left: 2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@ -126,7 +124,7 @@
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
height: 30px;
|
||||
margin-left: 15px;
|
||||
margin-top: 10px;
|
||||
padding: 0 15px 0 5px;
|
||||
|
||||
.input {
|
||||
@ -154,4 +152,5 @@
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
19
pages/index/search.vue
Normal file
19
pages/index/search.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@ -1 +1,42 @@
|
||||
export const API_URL = 'http://localhost:8080'
|
||||
import { FoodsModel, ResponseModel } from "./models"
|
||||
|
||||
export const API_URL = 'http://localhost:8080'
|
||||
function request<T>(url : string, method : 'GET' | 'POST' = 'GET', data : any = null) {
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
uni.request({
|
||||
url: API_URL + url,
|
||||
method,
|
||||
data,
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
success(ret) {
|
||||
if (ret.statusCode == 200) {
|
||||
const data = ret.data as ResponseModel<T>;
|
||||
if (data.code != 200) {
|
||||
reject(Error(data.msg))
|
||||
} else {
|
||||
resolve(data.data)
|
||||
}
|
||||
} else {
|
||||
reject(Error('服务器异常'))
|
||||
}
|
||||
},
|
||||
fail(e) {
|
||||
console.log(e)
|
||||
reject(Error(e.errMsg))
|
||||
}
|
||||
})
|
||||
// task.
|
||||
})
|
||||
}
|
||||
export function foodsDetail(id : any) {
|
||||
return request<FoodsModel>(`/api/food/${id}`)
|
||||
// uni.request({
|
||||
// url: API_URL + '/api/food/recommend',
|
||||
// success(ret) {
|
||||
// foodsList.value = ret.data.data
|
||||
// // console.log(ret.data.data)
|
||||
// }
|
||||
// })
|
||||
}
|
||||
32
service/models.ts
Normal file
32
service/models.ts
Normal file
@ -0,0 +1,32 @@
|
||||
|
||||
export type ResponseModel<T> = {
|
||||
code : number
|
||||
data : T
|
||||
msg : string
|
||||
}
|
||||
|
||||
export type FoodsModel = {
|
||||
createBy ?: any;
|
||||
createTime : string;
|
||||
updateBy ?: any;
|
||||
updateTime : string;
|
||||
remark ?: any;
|
||||
id : number;
|
||||
cid : number;
|
||||
title : string;
|
||||
cover : string;
|
||||
description : string;
|
||||
content ?: any;
|
||||
coupon : number;
|
||||
couponDesc : string;
|
||||
couponStartTime : string;
|
||||
couponEndTime : string;
|
||||
price : number;
|
||||
sort : number;
|
||||
area ?: any;
|
||||
recommend : number;
|
||||
recommendStartTime : string;
|
||||
recommendEndTime ?: any;
|
||||
saleCount : number;
|
||||
state : number;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user