|
|
@@ -1,11 +1,10 @@
|
|
|
<template>
|
|
|
<view class="page">
|
|
|
- <u-navbar :placeholder="true" :border-bottom="false" :custom-back="goBack">
|
|
|
- <view class="nav-title">菜品列表</view>
|
|
|
+ <u-navbar :placeholder="true" :border-bottom="false" :custom-back="goBack" title="菜品列表">
|
|
|
<view slot="right" class="nav-right">
|
|
|
<template v-if="!batchMode">
|
|
|
- <u-icon name="search" size="40" color="#333" @click="showSearch = !showSearch"></u-icon>
|
|
|
- <u-icon name="list-dot" size="40" color="#333" style="margin-left: 24rpx" @click="enterBatch"></u-icon>
|
|
|
+ <image class="nav-icon" src="/static/merchantDish/search.png" mode="aspectFit" @click="showSearch = !showSearch"></image>
|
|
|
+ <image class="nav-icon" src="/static/merchantDish/batch.png" mode="aspectFit" @click="enterBatch"></image>
|
|
|
</template>
|
|
|
<text v-else class="cancel-btn" @click="exitBatch">取消</text>
|
|
|
</view>
|
|
|
@@ -24,19 +23,22 @@
|
|
|
|
|
|
<view class="filters">
|
|
|
<view class="filter-item" @click="openPicker('status')">
|
|
|
- {{ statusLabel }} <u-icon name="arrow-down" size="22" color="#666"></u-icon>
|
|
|
+ {{ statusLabel }}
|
|
|
+ <image class="filter-arrow" src="/static/merchantDish/selete.png" mode="aspectFit"></image>
|
|
|
</view>
|
|
|
<view class="filter-item" @click="openPicker('type')">
|
|
|
- {{ typeLabel }} <u-icon name="arrow-down" size="22" color="#666"></u-icon>
|
|
|
+ {{ typeLabel }}
|
|
|
+ <image class="filter-arrow" src="/static/merchantDish/selete.png" mode="aspectFit"></image>
|
|
|
</view>
|
|
|
<view class="filter-item" @click="openPicker('category')">
|
|
|
- {{ categoryLabel }} <u-icon name="arrow-down" size="22" color="#666"></u-icon>
|
|
|
+ {{ categoryLabel }}
|
|
|
+ <image class="filter-arrow" src="/static/merchantDish/selete.png" mode="aspectFit"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 团餐报名提示条 -->
|
|
|
<view class="banner" v-if="bannerVisible" @click="onBannerClick">
|
|
|
- <text>{{ bannerText }}</text>
|
|
|
+ <rich-text :nodes="bannerNodes"></rich-text>
|
|
|
</view>
|
|
|
|
|
|
<view class="list-wrap" :style="{ paddingBottom: batchMode ? '140rpx' : '160rpx' }">
|
|
|
@@ -52,39 +54,45 @@
|
|
|
<view class="list">
|
|
|
<view class="card" v-for="item in data" :key="item.id" @click="toggleSelect(item)">
|
|
|
<view class="check" v-if="batchMode">
|
|
|
- <view :class="['dot', selectedIds.includes(item.id) ? 'on' : '']"></view>
|
|
|
+ <view :class="['dot', selectedIds.includes(item.id) ? 'on' : '']">
|
|
|
+ <u-icon v-if="selectedIds.includes(item.id)" name="checkmark" color="#fff" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="thumb-wrap">
|
|
|
<image class="thumb" :src="item.image" mode="aspectFill"></image>
|
|
|
- <view class="tag" :class="item.belong">{{ item.belong === 'group' ? '团餐' : '门店' }}</view>
|
|
|
+ <image
|
|
|
+ class="belong-tag"
|
|
|
+ :src="item.belong === 'group' ? '/static/merchantDish/groupmeal.png' : '/static/merchantDish/store.png'"
|
|
|
+ mode="heightFix"
|
|
|
+ ></image>
|
|
|
</view>
|
|
|
<view class="info">
|
|
|
<view class="row-top">
|
|
|
<text class="name">{{ item.name }}</text>
|
|
|
- <text class="status">{{ statusText[item.status] || item.statusName }}</text>
|
|
|
+ <text :class="['status', item.status]">{{ statusText[item.status] || item.statusName }}</text>
|
|
|
</view>
|
|
|
<view class="desc">{{ item.desc }}</view>
|
|
|
+ <view class="meta">
|
|
|
+ 每日库存: {{ item.stock != null ? item.stock : 0 }}
|
|
|
+ <text class="meta-gap">合计销量: {{ formatSales(item.sales) }}</text>
|
|
|
+ </view>
|
|
|
<view class="price-line">
|
|
|
- <text class="price">¥{{ item.price }}</text>
|
|
|
- <text class="sub">原价¥{{ item.originPrice }}</text>
|
|
|
- <text class="sub">库存{{ item.stock }}</text>
|
|
|
+ <text class="price">¥{{ formatPrice(item.price) }}</text>
|
|
|
+ <text class="origin" v-if="item.originPrice != null && item.originPrice !== ''">{{ formatPrice(item.originPrice) }}</text>
|
|
|
</view>
|
|
|
- <view class="row-bottom">
|
|
|
- <text class="sales">合计销量: {{ item.sales }}</text>
|
|
|
- <view class="actions" v-if="!batchMode" @click.stop>
|
|
|
- <template v-if="item.status === 'selling' || item.status === 'soldout'">
|
|
|
- <view class="btn primary" @click="onOffShelf(item)">下架</view>
|
|
|
- </template>
|
|
|
- <template v-else-if="item.status === 'pending'">
|
|
|
- <view class="btn" @click="onDelete(item)">删除</view>
|
|
|
- <view class="btn" @click="goEdit(item)">编辑</view>
|
|
|
- <view class="btn primary" @click="onOnShelf(item)">上架</view>
|
|
|
- </template>
|
|
|
- <template v-else-if="item.status === 'rejected'">
|
|
|
- <view class="btn" @click="onDelete(item)">删除</view>
|
|
|
- <view class="btn" @click="goEdit(item)">编辑</view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
+ <view class="actions" v-if="!batchMode" @click.stop>
|
|
|
+ <template v-if="item.status === 'selling' || item.status === 'soldout'">
|
|
|
+ <view class="btn primary" @click="onOffShelf(item)">下架</view>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.status === 'pending'">
|
|
|
+ <view class="btn" @click="onDelete(item)">删除</view>
|
|
|
+ <view class="btn" @click="goEdit(item)">编辑</view>
|
|
|
+ <view class="btn primary" @click="onOnShelf(item)">上架</view>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.status === 'rejected'">
|
|
|
+ <view class="btn" @click="onDelete(item)">删除</view>
|
|
|
+ <view class="btn" @click="goEdit(item)">编辑</view>
|
|
|
+ </template>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -95,11 +103,13 @@
|
|
|
|
|
|
<!-- 底部：新建 / 批量操作 -->
|
|
|
<view class="footer" v-if="!batchMode">
|
|
|
- <u-button type="primary" shape="circle" @click="goCreate">新建菜品</u-button>
|
|
|
+ <view class="primary-btn" @click="goCreate">新建菜品</view>
|
|
|
</view>
|
|
|
<view class="batch-footer" v-else>
|
|
|
<view class="all" @click="toggleAll">
|
|
|
- <view :class="['dot', isAllSelected ? 'on' : '']"></view>
|
|
|
+ <view :class="['dot', isAllSelected ? 'on' : '']">
|
|
|
+ <u-icon v-if="isAllSelected" name="checkmark" color="#fff" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
全选
|
|
|
</view>
|
|
|
<view class="batch-btns">
|
|
|
@@ -198,7 +208,6 @@ export default {
|
|
|
return params;
|
|
|
},
|
|
|
currentList() {
|
|
|
- // listVersion 用于操作后触发重新读取
|
|
|
void this.listVersion;
|
|
|
const scroll = this.$refs.listScroll;
|
|
|
return (scroll && scroll.dataList) || [];
|
|
|
@@ -211,10 +220,18 @@ export default {
|
|
|
bannerVisible() {
|
|
|
return this.applyStatus !== 1;
|
|
|
},
|
|
|
- bannerText() {
|
|
|
- if (this.applyStatus === 0) return '提示：平台现已增加团餐活动，如您需要，点击报名参与';
|
|
|
- if (this.applyStatus === 3) return '提示：团餐活动报名审核中，请耐心等待';
|
|
|
- if (this.applyStatus === 2) return '提示：团餐报名未通过，点击重新报名';
|
|
|
+ bannerNodes() {
|
|
|
+ const wrap = (html) => `<span style="color:#B8860B;font-size:14px;">${html}</span>`;
|
|
|
+ const mark = (word) => `<span style="color:#F5A623;font-weight:600;">${word}</span>`;
|
|
|
+ if (this.applyStatus == 0) {
|
|
|
+ return wrap(`提示：平台现已增加团餐活动，如您需要，点击${mark('报名')}参与`);
|
|
|
+ }
|
|
|
+ if (this.applyStatus == 3) {
|
|
|
+ return wrap('提示：团餐活动报名审核中，请耐心等待');
|
|
|
+ }
|
|
|
+ if (this.applyStatus == 2) {
|
|
|
+ return wrap(`提示：团餐报名未通过，点击${mark('重新报名')}`);
|
|
|
+ }
|
|
|
return '';
|
|
|
}
|
|
|
},
|
|
|
@@ -222,7 +239,6 @@ export default {
|
|
|
this.loadSpecialCategories();
|
|
|
},
|
|
|
onShow() {
|
|
|
- // 首次进入交给 ListScrollView 自动加载，避免重复请求；返回本页时再刷新
|
|
|
if (this.listReady) {
|
|
|
this.reloadList();
|
|
|
} else {
|
|
|
@@ -231,6 +247,16 @@ export default {
|
|
|
this.fetchApplyStatus();
|
|
|
},
|
|
|
methods: {
|
|
|
+ formatPrice(price) {
|
|
|
+ const n = Number(price);
|
|
|
+ if (Number.isNaN(n)) return '0.00';
|
|
|
+ return n.toFixed(2);
|
|
|
+ },
|
|
|
+ formatSales(sales) {
|
|
|
+ const n = Number(sales);
|
|
|
+ if (Number.isNaN(n)) return '0';
|
|
|
+ return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
|
+ },
|
|
|
goBack() {
|
|
|
uni.navigateBack({ delta: 1 });
|
|
|
},
|
|
|
@@ -411,7 +437,7 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.page {
|
|
|
height: 100vh;
|
|
|
- background: #f7f8fc;
|
|
|
+ background: #f7f8fa;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
@@ -425,6 +451,11 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding-right: 24rpx;
|
|
|
+ gap: 28rpx;
|
|
|
+}
|
|
|
+.nav-icon {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
}
|
|
|
.cancel-btn {
|
|
|
font-size: 28rpx;
|
|
|
@@ -438,26 +469,32 @@ export default {
|
|
|
}
|
|
|
.filters {
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
background: #fff;
|
|
|
padding: 16rpx 24rpx 20rpx;
|
|
|
flex-shrink: 0;
|
|
|
.filter-item {
|
|
|
margin-right: 36rpx;
|
|
|
- font-size: 26rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
color: #333;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 6rpx;
|
|
|
+ }
|
|
|
+ .filter-arrow {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
}
|
|
|
}
|
|
|
.banner {
|
|
|
- margin: 16rpx 24rpx 0;
|
|
|
+ // margin: 16rpx 24rpx 0;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
background: #fff8e6;
|
|
|
- color: #b8860b;
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 16rpx 20rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- flex-shrink: 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ // border-radius: 8rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
.list-wrap {
|
|
|
flex: 1;
|
|
|
@@ -472,11 +509,12 @@ export default {
|
|
|
display: flex;
|
|
|
background: #fff;
|
|
|
border-radius: 16rpx;
|
|
|
- padding: 20rpx;
|
|
|
+ padding: 24rpx;
|
|
|
margin-bottom: 16rpx;
|
|
|
.check {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding-top: 40rpx;
|
|
|
margin-right: 16rpx;
|
|
|
}
|
|
|
.dot {
|
|
|
@@ -484,28 +522,19 @@ export default {
|
|
|
height: 36rpx;
|
|
|
border-radius: 50%;
|
|
|
border: 2rpx solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
&.on {
|
|
|
- background: #ff4d4f;
|
|
|
- border-color: #ff4d4f;
|
|
|
- position: relative;
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 10rpx;
|
|
|
- top: 4rpx;
|
|
|
- width: 10rpx;
|
|
|
- height: 18rpx;
|
|
|
- border: 3rpx solid #fff;
|
|
|
- border-top: 0;
|
|
|
- border-left: 0;
|
|
|
- transform: rotate(45deg);
|
|
|
- }
|
|
|
+ background: #449aff;
|
|
|
+ border-color: #449aff;
|
|
|
}
|
|
|
}
|
|
|
.thumb-wrap {
|
|
|
position: relative;
|
|
|
- width: 140rpx;
|
|
|
- height: 140rpx;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
flex-shrink: 0;
|
|
|
.thumb {
|
|
|
width: 100%;
|
|
|
@@ -513,88 +542,102 @@ export default {
|
|
|
border-radius: 12rpx;
|
|
|
background: #eee;
|
|
|
}
|
|
|
- .tag {
|
|
|
+ .belong-tag {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
- font-size: 18rpx;
|
|
|
- color: #fff;
|
|
|
- padding: 2rpx 10rpx;
|
|
|
- border-radius: 12rpx 0 12rpx 0;
|
|
|
- &.group {
|
|
|
- background: #ff6b35;
|
|
|
- }
|
|
|
- &.store {
|
|
|
- background: #449aff;
|
|
|
- }
|
|
|
+ height: 36rpx;
|
|
|
+ width: auto;
|
|
|
}
|
|
|
}
|
|
|
.info {
|
|
|
flex: 1;
|
|
|
- margin-left: 16rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
min-width: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
.row-top {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
.name {
|
|
|
+ flex: 1;
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 600;
|
|
|
color: #222;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding-right: 12rpx;
|
|
|
}
|
|
|
.status {
|
|
|
font-size: 24rpx;
|
|
|
- color: #449aff;
|
|
|
flex-shrink: 0;
|
|
|
- margin-left: 12rpx;
|
|
|
+ &.selling {
|
|
|
+ color: #19be6b;
|
|
|
+ }
|
|
|
+ &.soldout {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ &.pending {
|
|
|
+ color: #ff9900;
|
|
|
+ }
|
|
|
+ &.reviewing {
|
|
|
+ color: #f5a623;
|
|
|
+ }
|
|
|
+ &.rejected {
|
|
|
+ color: #ff4d4f;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.desc {
|
|
|
font-size: 22rpx;
|
|
|
color: #999;
|
|
|
- margin-top: 6rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
- .price-line {
|
|
|
+ .meta {
|
|
|
margin-top: 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999;
|
|
|
+ .meta-gap {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-line {
|
|
|
+ margin-top: 10rpx;
|
|
|
.price {
|
|
|
color: #ff4d4f;
|
|
|
- font-size: 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
margin-right: 12rpx;
|
|
|
}
|
|
|
- .sub {
|
|
|
- font-size: 22rpx;
|
|
|
+ .origin {
|
|
|
+ font-size: 24rpx;
|
|
|
color: #999;
|
|
|
- margin-right: 12rpx;
|
|
|
+ text-decoration: line-through;
|
|
|
}
|
|
|
}
|
|
|
- .row-bottom {
|
|
|
+ .actions {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 12rpx;
|
|
|
- .sales {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- .actions {
|
|
|
- display: flex;
|
|
|
- gap: 12rpx;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- font-size: 22rpx;
|
|
|
- padding: 6rpx 18rpx;
|
|
|
- border: 1rpx solid #ddd;
|
|
|
- border-radius: 28rpx;
|
|
|
- color: #333;
|
|
|
- &.primary {
|
|
|
- background: #449aff;
|
|
|
- border-color: #449aff;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 12rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 8rpx 24rpx;
|
|
|
+ border: 1rpx solid #ddd;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ background: #fff;
|
|
|
+ &.primary {
|
|
|
+ background: #449aff;
|
|
|
+ border-color: #449aff;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -603,9 +646,19 @@ export default {
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
+ z-index: 20;
|
|
|
padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
|
|
|
background: #fff;
|
|
|
}
|
|
|
+.primary-btn {
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ background: linear-gradient(90deg, #77b6ff 0%, #449aff 100%);
|
|
|
+}
|
|
|
.batch-footer {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
@@ -627,9 +680,13 @@ export default {
|
|
|
border-radius: 50%;
|
|
|
border: 2rpx solid #ccc;
|
|
|
margin-right: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
&.on {
|
|
|
- background: #ff4d4f;
|
|
|
- border-color: #ff4d4f;
|
|
|
+ background: #449aff;
|
|
|
+ border-color: #449aff;
|
|
|
}
|
|
|
}
|
|
|
}
|
付晓文。
