This commit is contained in:
binbin_pan 2025-01-02 17:55:05 +08:00
parent 1865f220a3
commit 5e8f52b2a4
8 changed files with 531 additions and 166 deletions

10
api/dining-hall.js Normal file
View File

@ -0,0 +1,10 @@
import request from '@/utils/request';
// 获取订单列表
export function getOrderList(params) {
return request({
url: '/leopen/order/flow/query',
method: 'get',
params
});
}

View File

@ -25,7 +25,8 @@
{ {
"path": "pages/work/index", "path": "pages/work/index",
"style": { "style": {
"navigationBarTitleText": "订单" "navigationBarTitleText": "",
"navigationBarBackgroundColor": "#F9FBFF"
} }
}, },
{ {

73
pages/components/Tabs.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<div class="list">
<div
class="list-item"
:class="{ active: active == index }"
v-for="(item, index) in tabList"
:key="index"
@click="handleTab(index)"
>
<div style="padding: 0 5px">{{ item }}</div>
<div v-if="active == index" class="line"></div>
</div>
</div>
</template>
<script>
export default {
props: {
tabList: {
type: Array,
default: () => []
}
},
data() {
return {
active: 0
}
},
mounted() {
console.log('🚀 ~ mounted ~ tabs:', this.tabList)
},
methods: {
handleTab(index) {
this.active = index
this.$emit('changeTab', index)
}
}
}
</script>
<style lang="scss" scoped>
.list {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 20px;
.list-item {
font-weight: 700;
font-size: 12px;
color: rgba(15, 39, 75, 0.8);
margin-right: 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
}
.active {
font-weight: 500;
font-size: 14px;
color: #0f274b;
z-index: 9;
}
.line {
width: 36px;
height: 8px;
background: linear-gradient(90deg, #ff6816 0%, rgba(255, 104, 22, 0) 100%);
border-radius: 4px 4px 4px 4px;
position: absolute;
bottom: 0px;
}
}
</style>

183
pages/work/index copy.vue Normal file
View File

@ -0,0 +1,183 @@
<template>
<view class="work-container">
<!-- 轮播图 -->
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
<swiper-item v-for="(item, index) in data" :key="index">
<view class="swiper-item" @click="clickBannerItem(item)">
<image :src="item.image" mode="aspectFill" :draggable="false" />
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
<!-- 宫格组件 -->
<uni-section title="系统管理" type="line"></uni-section>
<view class="grid-body">
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="person-filled" size="30"></uni-icons>
<text class="text">库存查询</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="staff-filled" size="30"></uni-icons>
<text class="text">角色管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="color" size="30"></uni-icons>
<text class="text">菜单管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="settings-filled" size="30"></uni-icons>
<text class="text">部门管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="heart-filled" size="30"></uni-icons>
<text class="text">岗位管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="bars" size="30"></uni-icons>
<text class="text">字典管理</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="gear-filled" size="30"></uni-icons>
<text class="text">参数设置</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="chat-filled" size="30"></uni-icons>
<text class="text">通知公告</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="wallet-filled" size="30"></uni-icons>
<text class="text">日志管理</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
swiperDotIndex: 0,
data: [{
image: '/static/images/banner/banner01.jpg'
},
{
image: '/static/images/banner/banner02.jpg'
},
{
image: '/static/images/banner/banner03.jpg'
}
]
}
},
methods: {
clickBannerItem(item) {
console.info(item)
},
changeSwiper(e) {
this.current = e.detail.current
},
changeGrid(e) {
this.$modal.showToast('模块建设中~')
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #fff;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
/* #endif */
.text {
text-align: center;
font-size: 26rpx;
margin-top: 10rpx;
}
.grid-item-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.uni-margin-wrap {
width: 690rpx;
width: 100%;
;
}
.swiper {
height: 300rpx;
}
.swiper-box {
height: 150px;
}
.swiper-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
height: 300rpx;
line-height: 300rpx;
}
@media screen and (min-width: 500px) {
.uni-swiper-dot-box {
width: 400px;
/* #ifndef APP-NVUE */
margin: 0 auto;
/* #endif */
margin-top: 8px;
}
.image {
width: 100%;
}
}
</style>

View File

@ -1,183 +1,281 @@
<template> <template>
<view class="work-container"> <div class="content">
<!-- 轮播图 --> <div class="top-cont">
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content"> <div class="top-title">订单</div>
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper"> <u-input
<swiper-item v-for="(item, index) in data" :key="index"> v-model="searchValue"
<view class="swiper-item" @click="clickBannerItem(item)"> class="top-ipt"
<image :src="item.image" mode="aspectFill" :draggable="false" /> placeholder="请输入食堂、档口、菜品/商品名"
</view> shape="circle"
</swiper-item> suffixIcon="../../static/images/search.png"
</swiper> suffixIconStyle="color: #909399"
</uni-swiper-dot> placeholderStyle="font-weight: 400;font-size: 10px;color: rgba(15,39,75,0.4);"
@blur="handleSearch"
></u-input>
<div class="top-filter">
<span style="font-size: 12px; color: #0f274b">筛选</span>
<u-icon name="../../static/images/pull.png" />
</div>
</div>
<!-- 宫格组件 --> <Tabs :tabList="tabList" @changeTab="changeTab" />
<uni-section title="系统管理" type="line"></uni-section>
<view class="grid-body"> <div>
<uni-grid :column="4" :showBorder="false" @change="changeGrid"> <div class="order-list" v-for="(item, index) in tableList" :key="index">
<uni-grid-item> <div class="flex justify-between">
<view class="grid-item-box"> <div class="order-source">订单来源{{ item.sourceType }}</div>
<uni-icons type="person-filled" size="30"></uni-icons> <div style="color: rgba(15, 39, 75, 0.8)">{{ handleOrderState(item.ordState) }}</div>
<text class="text">库存查询</text> </div>
</view> <div class="flex justify-between">
</uni-grid-item> <div>
<uni-grid-item> <span style="color: #0f274b">{{ item.canteenName }}</span>
<view class="grid-item-box"> <span class="intervalName">{{ item.intervalName }}</span>
<uni-icons type="staff-filled" size="30"></uni-icons> </div>
<text class="text">角色管理</text> <div style="color: rgba(15, 39, 75, 0.8)">就餐时间{{ item.orderTime }}</div>
</view> </div>
</uni-grid-item> <div class="img-cont">
<uni-grid-item> <div class="img" v-for="(goods, index) in item.detailList" :key="index">
<view class="grid-item-box"> <u-image :src="goods.goodsDishesImgUrl" width="80px" height="80px" />
<uni-icons type="color" size="30"></uni-icons> <div>{{ goods.goodsDishesName }}</div>
<text class="text">菜单管理</text> </div>
</view> <div class="price">
</uni-grid-item> <div>
<uni-grid-item> <span></span>
<view class="grid-item-box"> <span style="font-size: 18px">{{ item.realAmount }}</span>
<uni-icons type="settings-filled" size="30"></uni-icons> </div>
<text class="text">部门管理</text> <div style="color: rgba(15, 39, 75, 0.6)">{{ item.detailList.length }}</div>
</view> </div>
</uni-grid-item> </div>
<uni-grid-item> <div class="btn-cont">
<view class="grid-item-box"> <div v-if="item.ordState != 10">
<uni-icons type="heart-filled" size="30"></uni-icons> <u-button size="small">评价</u-button>
<text class="text">岗位管理</text> </div>
</view> <div v-if="item.ordState == 10">
</uni-grid-item> <u-button size="small">删除订单</u-button>
<uni-grid-item> </div>
<view class="grid-item-box"> </div>
<uni-icons type="bars" size="30"></uni-icons> </div>
<text class="text">字典管理</text> </div>
</view>
</uni-grid-item> <div style="margin: 20px 0" v-if="tableList.length > 0">
<uni-grid-item> <u-loadmore :status="status" />
<view class="grid-item-box"> </div>
<uni-icons type="gear-filled" size="30"></uni-icons> <div v-else class="flex justify-center align-center" style="height: 50vh">
<text class="text">参数设置</text> <u-empty icon="../../static/images/not_order.png" text="暂无相关订单" textColor="#000" />
</view> </div>
</uni-grid-item> </div>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="chat-filled" size="30"></uni-icons>
<text class="text">通知公告</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<uni-icons type="wallet-filled" size="30"></uni-icons>
<text class="text">日志管理</text>
</view>
</uni-grid-item>
</uni-grid>
</view>
</view>
</template> </template>
<script> <script>
export default { import { getOrderList } from '@/api/dining-hall'
data() { import Tabs from '@/pages/components/Tabs.vue'
return {
current: 0, export default {
swiperDotIndex: 0, components: { Tabs },
data: [{ data() {
image: '/static/images/banner/banner01.jpg' return {
}, tabIndex: 0,
{ pageNum: 1,
image: '/static/images/banner/banner02.jpg' pageSize: 10,
}, total: 0,
{ searchValue: '',
image: '/static/images/banner/banner03.jpg' status: 'loadmore',
} tabList: ['全部订单', '待评价', '退款'],
] tableList: [
{
sourceType: 'hygyy双屏消费机', //
canteenName: '宏源工业园/本周菜谱', //
intervalName: '午餐', //
ordState: 11, // 1 9 10 退 11
orderTime: '2024-08-12', //
realAmount: 30.2, //
detailList: [
{
goodsDishesName: '苹果', //
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg' //
},
{
goodsDishesName: '苹果', //
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' //
},
{
goodsDishesName: '苹果', //
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' //
}
] //
},
{
sourceType: 'hygyy双屏消费机', //
canteenName: '宏源工业园/本周菜谱', //
intervalName: '午餐', //
ordState: 10, // 1 9 10 退 11
orderTime: '2024-08-12', //
realAmount: 30.2, //
detailList: [
{
goodsDishesName: '苹果', //
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg' //
},
{
goodsDishesName: '苹果', //
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' //
},
{
goodsDishesName: '苹果', //
goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' //
}
] //
}
]
}
},
methods: {
handleSearch() {
console.log('搜索', this.searchValue)
this.getList()
},
async getList() {
console.log('获取列表')
const params = {
custId: 0,
custThridId: 0,
custNum: 0,
endDateTime: '',
pageNum: this.pageNum,
pageSize: this.pageSize,
rechargeState: '',
startDateTime: '',
tradeType: '',
searchValue: this.searchValue
}
try {
const res = await getOrderList(params)
console.log('🚀 ~ getList ~ res:', res)
this.tableList = res.data.orderInfoList
this.total = res.data.count
this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
} catch (error) {
console.log(error)
} }
}, },
methods: { onReachBottom() {
clickBannerItem(item) { console.log('🚀 ~ onReachBottom ~ ')
console.info(item) if (this.total < 10 || this.total == this.tableList.length) {
}, this.status = 'nomore'
changeSwiper(e) { return
this.current = e.detail.current }
}, this.status = 'loading'
changeGrid(e) { setTimeout(() => {
this.$modal.showToast('模块建设中~') this.pageSize += 10
this.getList()
if (this.tableList.length != this.total) this.status = 'loadmore'
else this.status = 'nomore'
}, 500)
console.log('加载..', this.pageSize)
},
changeTab(index) {
console.log('🚀 ~ changeTab ~ index:', index)
this.tabIndex = index
},
//
handleOrderState(state) {
switch (state) {
case 1:
return '已下单'
case 9:
return '已取消'
case 10:
return '已退款'
case 11:
return '已完成'
} }
} }
} }
}
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
/* #ifndef APP-NVUE */ .content {
page { padding: 16px;
background: #f9fbff;
min-height: 100vh;
.top-cont {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
box-sizing: border-box;
background-color: #fff;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
/* #endif */
.text {
text-align: center;
font-size: 26rpx;
margin-top: 10rpx;
}
.grid-item-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; margin-bottom: 20px;
padding: 15px 0; .top-title {
} font-weight: 500;
font-size: 20px;
.uni-margin-wrap { color: #0f274b;
width: 690rpx;
width: 100%;
;
}
.swiper {
height: 300rpx;
}
.swiper-box {
height: 150px;
}
.swiper-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
height: 300rpx;
line-height: 300rpx;
}
@media screen and (min-width: 500px) {
.uni-swiper-dot-box {
width: 400px;
/* #ifndef APP-NVUE */
margin: 0 auto;
/* #endif */
margin-top: 8px;
} }
.top-ipt {
.image { height: 31px;
width: 100%; background: #fff;
margin-left: 26px;
margin-right: 12px;
}
.top-filter {
display: flex;
align-items: center;
} }
} }
.order-list {
padding: 8px;
background: #fff;
border-radius: 8px;
font-size: 12px;
font-weight: 400;
margin-bottom: 12px;
.order-source {
margin-bottom: 12px;
font-weight: 500;
color: #0f274b;
}
.intervalName {
margin-left: 10px;
color: #ff6816;
border-radius: 1px 1px 1px 1px;
border: 1px solid #ff6816;
padding: 0 4px;
}
.img-cont {
margin: 10px;
display: flex;
justify-content: space-between;
.img {
display: flex;
flex-direction: column;
align-items: center;
div {
margin-top: 8px;
color: #0f274b;
}
}
}
.price {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #0f274b;
font-weight: 400;
font-size: 12px;
}
.btn-cont {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
}
}
</style> </style>

BIN
static/images/not_order.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
static/images/pull.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 B

BIN
static/images/search.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 708 B