预定餐

This commit is contained in:
binbin_pan 2025-01-03 10:20:58 +08:00
parent e07abea6b1
commit ffbe5aec8f
9 changed files with 466 additions and 83 deletions

12
App.vue
View File

@ -32,17 +32,11 @@ export default {
<style lang="scss"> <style lang="scss">
@import '@/uni_modules/uview-ui/index.scss'; @import '@/uni_modules/uview-ui/index.scss';
@import '@/static/scss/index.scss'; @import '@/static/scss/index.scss';
page {
box-sizing: border-box;
background-color: #fff;
height: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
::v-deep .uni-system-preview-image { ::v-deep .uni-system-preview-image {
z-index: 10080 !important; z-index: 10080 !important;
} }
.u-navbar__content__right__text { * {
color: $u-primary !important; margin: 0;
padding: 0;
} }
</style> </style>

View File

@ -17,3 +17,12 @@ export function getAccountBalance(params) {
params params
}); });
} }
// 获取菜单列表
export function getMenuList(params) {
return request({
url: '/leopen/recipe/query',
method: 'get',
params
});
}

View File

@ -180,9 +180,8 @@
} }
}, },
{ {
"path" : "pages/remainingSum/index", "path": "pages/remainingSum/index",
"style" : "style": {
{
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
@ -192,10 +191,16 @@
"navigationBarTitleText": "个人二维码" "navigationBarTitleText": "个人二维码"
} }
}, },
// {
// "path": "pages/weeklyMenu/index",
// "style": {
// "navigationBarTitleText": "一周菜谱"
// }
// },
{ {
"path": "pages/weeklyMenu/index", "path": "pages/advanceOrder/index",
"style": { "style": {
"navigationBarTitleText": "一周菜谱" "navigationBarTitleText": "预订单"
} }
} }
], ],

View File

@ -0,0 +1,275 @@
<template>
<view>
<div class="top-cont flex justify-between align-center">
<div class="flex align-center">
<u-icon name="../../static/images/time.png" size="16"></u-icon>
<span style="margin-left: 5px">{{ newDate }}</span>
</div>
<div class="top-right-cont">
<span class="right-item" :class="{ active: active == 1 }" @click="active = 1">自取</span>
<span class="right-item" :class="{ active: active == 2 }" @click="active = 2">外卖</span>
</div>
</div>
<div class="balance-area" v-for="(book, index) in cookbook" :key="index">
<div class="left-balance" :class="{ active: current == index }" @click="scrollToDetail(index)">
{{ handleRecipeType(book.recipeType) }}
</div>
<div
class="right-balance"
:ref="'detail-' + index + '-' + itemIndex"
v-for="(item, itemIndex) in book.recipeDetailList"
:key="itemIndex"
>
<div class="top-name">{{ item.intervalName }}</div>
<div v-for="(food, foodIndex) in item.mealList">
{{ food.mealName }}
</div>
</div>
</div>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
newDate: '',
active: 1, // 1 2
//
cookbook: [
{
recipeType: 1, // (1,2,3,4)
//
recipeDetailList: [
{
intervalName: '午餐', //
//
mealList: [
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
},
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
},
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
},
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
}
]
}
]
},
{
recipeType: 2, // (1,2,3,4)
//
recipeDetailList: [
{
intervalName: '晚餐', //
//
mealList: [
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
},
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
},
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
},
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
}
]
}
]
},
{
recipeType: 3, // (1,2,3,4)
//
recipeDetailList: [
{
intervalName: '默认', //
//
mealList: [
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
},
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
},
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
},
{
mealName: '西红柿炒鸡蛋', //
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', //
saleNum: 100,
supplyNum: 100, //
restrictNum: 2, //
salePrice: 10.2 //
}
]
}
]
}
]
}
},
onLoad() {
this.getNowFormatDate()
},
methods: {
//
getNowFormatDate() {
let date = new Date()
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
let week = date.getDay()
let weeks = ['日', '一', '二', '三', '四', '五', '六']
this.newDate = `${month}-${day} 星期${weeks[week]}`
},
// recipeType
handleRecipeType(type) {
if (type === 1) {
return '默认'
} else if (type === 2) {
return '按天'
} else if (type === 3) {
return '按周'
} else if (type === 4) {
return '按月'
}
},
scrollToDetail(index) {
console.log('🚀 ~ scrollToDetail ~ index', index)
this.current = index
const detailElement = this.$refs['detail-' + index + '-0'][0]
if (detailElement) {
detailElement.scrollIntoView({ behavior: 'smooth' })
}
}
}
}
</script>
<style lang="scss" scoped>
page {
/* padding-top: env(safe-area-inset-top); */
background: #f9fbff;
}
.top-cont {
padding: 0 16px 16px;
background: #fff;
.top-right-cont {
background: rgba(15, 39, 75, 0.05);
border-radius: 11px 11px 11px 11px;
display: flex;
justify-content: space-around;
color: #0f274b;
font-size: 12px;
.right-item {
padding: 3px 10px;
border-radius: 11px 11px 11px 11px;
cursor: pointer;
&.active {
background: linear-gradient(180deg, #ffae82 0%, #ff6816 100%);
color: #fff;
}
}
}
}
.balance-area {
display: flex;
.left-balance {
width: 88px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
font-size: 14px;
color: #0f274b;
&.active {
background: #fff;
}
}
.right-balance {
width: calc(100vw - 88px);
/* min-height: 90vh; */
overflow: auto;
padding: 0 8px;
background-color: #fff;
.top-name {
height: 44px;
font-weight: 400;
font-size: 12px;
color: rgba(15, 39, 75, 0.6);
display: flex;
align-items: center;
}
}
}
</style>

View File

@ -90,7 +90,7 @@
goToOrder() { goToOrder() {
// //
uni.navigateTo({ uni.navigateTo({
url: '/pages/order/index' url: '/pages/advanceOrder/index'
}) })
}, },
goCode() { goCode() {

View File

@ -174,7 +174,7 @@ export default {
justify-content: space-between; justify-content: space-between;
.box-item { .box-item {
margin-bottom: 12px; margin-bottom: 12px;
width: 109px; width: 30%;
height: 66px; height: 66px;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
border: 1px solid rgba(15, 39, 75, 0.4); border: 1px solid rgba(15, 39, 75, 0.4);

View File

@ -1,33 +1,56 @@
<template> <template>
<view class="system"> <view class="index_main" :style="{ minHeight: screenH + 'px' }">
<div class="top-img"> <view class="back-top"></view>
<u-image src="../static/images/system/top.png" width="351px" height="146px" /> <!-- 轮播图 -->
</div> <view class="swiper_nav">
<div class="cont-img"> <swiper autoplay :duration="1000">
<div class="item" @click="handleItem(1)"> <swiper-item v-for="(item, index) in swiperImg" :key="index">
<u-icon name="../static/images/system/1.png" size="38"></u-icon> <image :src="item" style="width: 100%; height: 100%"></image>
<div>就餐服务</div> </swiper-item>
</div> </swiper>
<div class="item"> </view>
<u-icon name="../static/images/system/2.png" size="38"></u-icon> <!-- 皖送e餐 志愿者服务 -->
<div>志愿者服务</div> <view class="main_menu">
</div> <view class="main_menu_item" v-for="(item, index) in firstMenus" :key="index" @click="handleItem(index)">
<div class="item"> <image :src="item.icon"></image>
<u-icon name="../static/images/system/3.png" size="38"></u-icon> <view class="main_menu_name">{{ item.name }}</view>
<div>驿站服务</div> </view>
</div> </view>
</div>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return {} return {
screenH: '',
swiperImg: [require('../static/images/system/top.png')],
firstMenus: [
{
name: '就餐服务',
icon: require('../static/images/system/1.png')
},
{
name: '志愿者服务',
icon: require('../static/images/system/2.png')
},
{
name: '驿站服务',
icon: require('../static/images/system/3.png')
}
]
}
},
mounted() {
uni.getSystemInfo({
success: res => {
this.screenH = res.windowHeight
}
})
}, },
methods: { methods: {
handleItem(index) { handleItem(index) {
if (index === 1) { if (index === 0) {
this.$tab.reLaunch('/pages/index') this.$tab.reLaunch('/pages/index')
} }
} }
@ -38,30 +61,106 @@ export default {
<style lang="scss"> <style lang="scss">
page { page {
min-height: 100vh; min-height: 100vh;
background-image: url("../static/images/system/bg.png"); background-image: url('../static/images/system/bg.png');
} }
.system { .index_main {
padding: 18px; /* background: #f2f6fa; */
.top-img { overflow: auto;
display: flex; padding: 24rpx 0;
justify-content: center; box-sizing: border-box;
} }
.cont-img { .back-top {
position: fixed;
width: 100%;
height: 578rpx;
/* background: linear-gradient(180deg, #d2eaff 0%, rgba(208, 233, 254, 0) 100%); */
top: 0;
left: 0;
}
.swiper_nav {
width: 100%;
height: 300rpx;
/* background: #ffffff; */
border-radius: 20rpx;
padding: 0 24rpx;
box-sizing: border-box;
}
.main_menu {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 15px; margin-top: 24px;
.item { padding: 0 12rpx;
padding: 15px 0; box-sizing: border-box;
width: 109px; }
.main_menu_item {
z-index: 99;
margin: 0 12rpx;
padding: 28rpx 0;
flex: 1;
height: 208rpx;
background: #ffffff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.main_menu_name {
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 30rpx;
color: #0e1a24;
font-style: normal;
text-transform: none;
}
image {
display: flex;
width: 88rpx;
height: 88rpx;
border-radius: 34rpx;
}
}
.yiz_menu {
width: calc(100% - 48rpx);
min-height: 480rpx;
background: #ffffff;
border-radius: 20rpx;
margin-top: 24rpx;
margin-left: 24rpx;
}
.yiz_menu_tle {
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #0e1a24;
font-style: normal;
text-transform: none;
padding: 28rpx 28rpx 0 28rpx;
}
.yiz_menu_nav {
display: flex;
align-items: center;
flex-wrap: wrap;
.yiz_menu_nav_item {
width: calc(100% / 4);
margin-top: 48rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #fff; image {
border-radius: 10px; display: block;
div { width: 88rpx;
margin-top: 10px; height: 88rpx;
border-radius: 34rpx;
} }
.yiz_menu_name {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #0e1a24;
font-style: normal;
text-transform: none;
margin-top: 20rpx;
} }
} }
} }

View File

@ -24,7 +24,8 @@
</div> </div>
</div> </div>
<div style="margin-top: 91px; padding: 0 16px;"> <div style="height: 56px;"></div>
<div style="padding: 0 16px;">
<div class="order-list" v-for="(item, index) in tableList" :key="index"> <div class="order-list" v-for="(item, index) in tableList" :key="index">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="order-source">订单来源{{ item.sourceType }}</div> <div class="order-source">订单来源{{ item.sourceType }}</div>
@ -201,14 +202,14 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
/* padding: 0 16px; */
background: #f9fbff; background: #f9fbff;
height: 100%;
min-height: 100vh; min-height: 100vh;
/* position: relative; */
.top-wrapper { .top-wrapper {
position: fixed; position: fixed;
top: 44px; /* top: 44px; */
top: 0;
width: 100vw; width: 100vw;
background: #f9fbff; background: #f9fbff;
z-index: 999; z-index: 999;

BIN
static/images/time.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 959 B