|
|
@@ -21,18 +21,47 @@
|
|
|
></u-search>
|
|
|
</view>
|
|
|
|
|
|
- <view class="filters">
|
|
|
- <view class="filter-item" @click="openPicker('status')">
|
|
|
- {{ statusLabel }}
|
|
|
- <image class="filter-arrow" src="/static/merchantDish/selete.png" mode="aspectFit"></image>
|
|
|
- </view>
|
|
|
- <view class="filter-item" @click="openPicker('type')">
|
|
|
- {{ typeLabel }}
|
|
|
- <image class="filter-arrow" src="/static/merchantDish/selete.png" mode="aspectFit"></image>
|
|
|
+ <view class="filter-wrap">
|
|
|
+ <view class="filters">
|
|
|
+ <view :class="['filter-item', pickerShow && pickerType === 'status' ? 'active' : '']" @click="openPicker('status')">
|
|
|
+ <text class="filter-text">{{ statusLabel }}</text>
|
|
|
+ <image
|
|
|
+ :class="['filter-arrow', pickerShow && pickerType === 'status' ? 'up' : '']"
|
|
|
+ src="/static/merchantDish/selete.png"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view :class="['filter-item', pickerShow && pickerType === 'type' ? 'active' : '']" @click="openPicker('type')">
|
|
|
+ <text class="filter-text">{{ typeLabel }}</text>
|
|
|
+ <image
|
|
|
+ :class="['filter-arrow', pickerShow && pickerType === 'type' ? 'up' : '']"
|
|
|
+ src="/static/merchantDish/selete.png"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view :class="['filter-item', pickerShow && pickerType === 'category' ? 'active' : '']" @click="openPicker('category')">
|
|
|
+ <text class="filter-text">{{ categoryLabel }}</text>
|
|
|
+ <image
|
|
|
+ :class="['filter-arrow', pickerShow && pickerType === 'category' ? 'up' : '']"
|
|
|
+ src="/static/merchantDish/selete.png"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="filter-item" @click="openPicker('category')">
|
|
|
- {{ categoryLabel }}
|
|
|
- <image class="filter-arrow" src="/static/merchantDish/selete.png" mode="aspectFit"></image>
|
|
|
+
|
|
|
+ <!-- 筛选下拉：状态 / 菜品类型 / 品类 -->
|
|
|
+ <view class="filter-dropdown" v-if="pickerShow">
|
|
|
+ <view class="filter-panel">
|
|
|
+ <view
|
|
|
+ v-for="(opt, idx) in pickerList"
|
|
|
+ :key="idx"
|
|
|
+ :class="['filter-option', isOptionActive(opt) ? 'on' : '']"
|
|
|
+ @click="onPick(opt)"
|
|
|
+ >
|
|
|
+ {{ opt.text }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-mask" @click="closePicker"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -53,6 +82,11 @@
|
|
|
<template v-slot:list="{ data }">
|
|
|
<view class="list">
|
|
|
<view class="card" v-for="item in data" :key="item.id" @click="toggleSelect(item)">
|
|
|
+ <image
|
|
|
+ class="belong-tag"
|
|
|
+ :src="item.belong === 'group' ? '/static/merchantDish/groupmeal.png' : '/static/merchantDish/store.png'"
|
|
|
+ mode="heightFix"
|
|
|
+ ></image>
|
|
|
<view class="check" v-if="batchMode">
|
|
|
<view :class="['dot', selectedIds.includes(item.id) ? 'on' : '']">
|
|
|
<u-icon v-if="selectedIds.includes(item.id)" name="checkmark" color="#fff" size="20"></u-icon>
|
|
|
@@ -60,11 +94,6 @@
|
|
|
</view>
|
|
|
<view class="thumb-wrap">
|
|
|
<image class="thumb" :src="item.image" mode="aspectFill"></image>
|
|
|
- <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">
|
|
|
@@ -85,13 +114,13 @@
|
|
|
<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>
|
|
|
+ <text class="btn-link" @click="onDelete(item)">删除</text>
|
|
|
+ <text class="btn-link" @click="goEdit(item)">编辑</text>
|
|
|
<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>
|
|
|
+ <text class="btn-link" @click="onDelete(item)">删除</text>
|
|
|
+ <text class="btn-link" @click="goEdit(item)">编辑</text>
|
|
|
</template>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -131,17 +160,16 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <u-action-sheet :list="pickerList" v-model="pickerShow" @click="onPick"></u-action-sheet>
|
|
|
-
|
|
|
<!-- 团餐下架确认 -->
|
|
|
<view class="mask" v-if="offShelfShow" @click="closeOffShelf">
|
|
|
<view class="confirm-dialog" @click.stop>
|
|
|
+ <view class="confirm-title">提示</view>
|
|
|
<view class="confirm-content">
|
|
|
该菜品当前有未成团订单{{ (offShelfItem && offShelfItem.ungroupedOrderCount) || 0 }}份，已成团{{ (offShelfItem && offShelfItem.groupedOrderCount) || 0 }}份，是否要确定下架
|
|
|
</view>
|
|
|
<view class="confirm-footer">
|
|
|
<view class="confirm-btn" @click="closeOffShelf">取消</view>
|
|
|
- <view class="confirm-btn primary" @click="confirmOffShelf">确定</view>
|
|
|
+ <view class="confirm-btn" @click="confirmOffShelf">确定</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -168,9 +196,9 @@ const STATUS_OPTIONS = [
|
|
|
];
|
|
|
|
|
|
const TYPE_OPTIONS = [
|
|
|
- { label: '全部商品', value: '' },
|
|
|
- { label: '团餐', value: 'group' },
|
|
|
- { label: '门店', value: 'store' }
|
|
|
+ { label: '全部菜品', value: '' },
|
|
|
+ { label: '团餐菜品', value: 'group' },
|
|
|
+ { label: '门店菜品', value: 'store' }
|
|
|
];
|
|
|
|
|
|
export default {
|
|
|
@@ -207,7 +235,7 @@ export default {
|
|
|
return (STATUS_OPTIONS.find((i) => i.value === this.filterStatus) || {}).label || '全部';
|
|
|
},
|
|
|
typeLabel() {
|
|
|
- return (TYPE_OPTIONS.find((i) => i.value === this.filterType) || {}).label || '全部商品';
|
|
|
+ return (TYPE_OPTIONS.find((i) => i.value === this.filterType) || {}).label || '全部菜品';
|
|
|
},
|
|
|
categoryLabel() {
|
|
|
return (this.categoryOptions.find((i) => i.value === this.filterCategory) || {}).label || '全部品类';
|
|
|
@@ -322,6 +350,10 @@ export default {
|
|
|
},
|
|
|
openPicker(type) {
|
|
|
if (this.batchMode) return;
|
|
|
+ if (this.pickerShow && this.pickerType === type) {
|
|
|
+ this.closePicker();
|
|
|
+ return;
|
|
|
+ }
|
|
|
this.pickerType = type;
|
|
|
const map = {
|
|
|
status: STATUS_OPTIONS,
|
|
|
@@ -331,15 +363,28 @@ export default {
|
|
|
this.pickerList = (map[type] || []).map((i) => ({ text: i.label, value: i.value }));
|
|
|
this.pickerShow = true;
|
|
|
},
|
|
|
- onPick(e) {
|
|
|
- const value = e && e.value !== undefined ? e.value : '';
|
|
|
+ closePicker() {
|
|
|
+ this.pickerShow = false;
|
|
|
+ this.pickerType = '';
|
|
|
+ },
|
|
|
+ isOptionActive(opt) {
|
|
|
+ const value = opt && opt.value !== undefined ? opt.value : '';
|
|
|
+ if (this.pickerType === 'status') return this.filterStatus === value;
|
|
|
+ if (this.pickerType === 'type') return this.filterType === value;
|
|
|
+ if (this.pickerType === 'category') return this.filterCategory === value;
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ onPick(opt) {
|
|
|
+ const value = opt && opt.value !== undefined ? opt.value : '';
|
|
|
if (this.pickerType === 'status') this.filterStatus = value;
|
|
|
if (this.pickerType === 'type') this.filterType = value;
|
|
|
if (this.pickerType === 'category') this.filterCategory = value;
|
|
|
this.selectedIds = [];
|
|
|
+ this.closePicker();
|
|
|
this.reloadList();
|
|
|
},
|
|
|
enterBatch() {
|
|
|
+ this.closePicker();
|
|
|
this.batchMode = true;
|
|
|
this.selectedIds = [];
|
|
|
},
|
|
|
@@ -373,9 +418,9 @@ export default {
|
|
|
confirmModal(content) {
|
|
|
return new Promise((resolve) => {
|
|
|
uni.showModal({
|
|
|
- title: '',
|
|
|
+ title: '提示',
|
|
|
content,
|
|
|
- confirmColor: '#449AFF',
|
|
|
+ confirmColor: '#333333',
|
|
|
success: (res) => resolve(!!res.confirm)
|
|
|
});
|
|
|
});
|
|
|
@@ -471,11 +516,6 @@ export default {
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
-.nav-title {
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #222;
|
|
|
-}
|
|
|
.nav-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -496,33 +536,89 @@ export default {
|
|
|
background: #fff;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
+
|
|
|
+/* ========== 筛选栏 + 下拉面板 ========== */
|
|
|
+.filter-wrap {
|
|
|
+ position: relative;
|
|
|
+ flex-shrink: 0;
|
|
|
+ z-index: 30;
|
|
|
+}
|
|
|
.filters {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
align-items: center;
|
|
|
background: #fff;
|
|
|
- padding: 16rpx 24rpx 20rpx;
|
|
|
- flex-shrink: 0;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
.filter-item {
|
|
|
- margin-right: 36rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333;
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ &.active {
|
|
|
+ color: #449aff;
|
|
|
+ }
|
|
|
+ .filter-text {
|
|
|
+ max-width: 180rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
}
|
|
|
.filter-arrow {
|
|
|
- width: 20rpx;
|
|
|
- height: 20rpx;
|
|
|
+ width: 18rpx;
|
|
|
+ height: 18rpx;
|
|
|
margin-left: 8rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ transition: transform 0.2s;
|
|
|
+ &.up {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+.filter-dropdown {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 100%;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+.filter-panel {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 0 0 16rpx 16rpx;
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
|
|
|
+ padding: 8rpx 0 24rpx;
|
|
|
+ max-height: 560rpx;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.filter-option {
|
|
|
+ padding: 22rpx 48rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222;
|
|
|
+ line-height: 1.4;
|
|
|
+ &.on {
|
|
|
+ color: #449aff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.filter-mask {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 100vh;
|
|
|
+ z-index: 1;
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
.banner {
|
|
|
- // margin: 16rpx 24rpx 0;
|
|
|
height: 80rpx;
|
|
|
line-height: 80rpx;
|
|
|
background: #fff8e6;
|
|
|
font-size: 28rpx;
|
|
|
- // border-radius: 8rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.list-wrap {
|
|
|
@@ -534,12 +630,24 @@ export default {
|
|
|
padding: 16rpx 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
+/* ========== 菜品卡片 ========== */
|
|
|
.card {
|
|
|
display: flex;
|
|
|
background: #fff;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 24rpx;
|
|
|
margin-bottom: 16rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .belong-tag {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 36rpx;
|
|
|
+ width: auto;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
.check {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
@@ -561,7 +669,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.thumb-wrap {
|
|
|
- position: relative;
|
|
|
width: 160rpx;
|
|
|
height: 160rpx;
|
|
|
flex-shrink: 0;
|
|
|
@@ -571,13 +678,6 @@ export default {
|
|
|
border-radius: 12rpx;
|
|
|
background: #eee;
|
|
|
}
|
|
|
- .belong-tag {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- height: 36rpx;
|
|
|
- width: auto;
|
|
|
- }
|
|
|
}
|
|
|
.info {
|
|
|
flex: 1;
|
|
|
@@ -653,23 +753,31 @@ export default {
|
|
|
.actions {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
- gap: 12rpx;
|
|
|
+ align-items: center;
|
|
|
+ gap: 24rpx;
|
|
|
margin-top: 16rpx;
|
|
|
}
|
|
|
+ .btn-link {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 52rpx;
|
|
|
+ padding: 0 4rpx;
|
|
|
+ }
|
|
|
.btn {
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 8rpx 24rpx;
|
|
|
- border: 1rpx solid #ddd;
|
|
|
- border-radius: 28rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 0 28rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ border-radius: 26rpx;
|
|
|
color: #666;
|
|
|
background: #fff;
|
|
|
&.primary {
|
|
|
background: #449aff;
|
|
|
- border-color: #449aff;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.footer {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
@@ -686,7 +794,7 @@ export default {
|
|
|
color: #fff;
|
|
|
font-size: 32rpx;
|
|
|
border-radius: 44rpx;
|
|
|
- background: linear-gradient(90deg, #77b6ff 0%, #449aff 100%);
|
|
|
+ background: linear-gradient( 89deg, #10ABFE 0%, #2260F6 100%);
|
|
|
}
|
|
|
.batch-footer {
|
|
|
position: fixed;
|
|
|
@@ -753,7 +861,7 @@ export default {
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
- background: rgba(0, 0, 0, 0.45);
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
z-index: 1000;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -765,29 +873,34 @@ export default {
|
|
|
border-radius: 20rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
-.confirm-content {
|
|
|
- padding: 48rpx 40rpx 40rpx;
|
|
|
+.confirm-title {
|
|
|
+ padding: 40rpx 40rpx 0;
|
|
|
text-align: center;
|
|
|
- font-size: 30rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 600;
|
|
|
color: #222;
|
|
|
- line-height: 1.7;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+.confirm-content {
|
|
|
+ padding: 24rpx 40rpx 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.6;
|
|
|
}
|
|
|
.confirm-footer {
|
|
|
display: flex;
|
|
|
- border-top: 1rpx solid #eee;
|
|
|
+ border-top: 1rpx solid #e5e5e5;
|
|
|
}
|
|
|
.confirm-btn {
|
|
|
flex: 1;
|
|
|
height: 96rpx;
|
|
|
line-height: 96rpx;
|
|
|
text-align: center;
|
|
|
- font-size: 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
color: #333;
|
|
|
&:first-child {
|
|
|
- border-right: 1rpx solid #eee;
|
|
|
- }
|
|
|
- &.primary {
|
|
|
- color: #449aff;
|
|
|
+ border-right: 1rpx solid #e5e5e5;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
付晓文。