|
@@ -0,0 +1,974 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="page dish-order-detail-page">
|
|
|
|
|
+ <div class="order-header">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <div class="order-room-name">{{ currentRoom.roomName || '-' }}</div>
|
|
|
|
|
+ <div class="order-room-sub">包房号:{{ currentRoom.roomNo || '-' }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <el-button @click="backRoomList()" type="primary" icon="el-icon-back">返回包房</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="order-main">
|
|
|
|
|
+ <div class="dish-panel">
|
|
|
|
|
+ <div class="dish-search">
|
|
|
|
|
+ <el-input v-model="dishSearchName" placeholder="搜索菜品名称" clearable @keyup.enter.native="searchDish()"
|
|
|
|
|
+ @clear="searchDish()">
|
|
|
|
|
+ <template #append>
|
|
|
|
|
+ <el-button icon="el-icon-search" @click="searchDish()"></el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="dish-content">
|
|
|
|
|
+ <div class="category-list">
|
|
|
|
|
+ <div v-for="item in categoryList" :key="item.id" class="category-item"
|
|
|
|
|
+ :class="{ 'category-active': activeTypeId === item.id }" @click="changeType(item)">
|
|
|
|
|
+ {{ item.name }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="dish-list" v-loading="dishLoading">
|
|
|
|
|
+ <div v-if="dishList.length === 0" class="dish-empty">暂无菜品</div>
|
|
|
|
|
+ <div v-else class="dish-grid">
|
|
|
|
|
+ <div v-for="item in dishList" :key="item.id" class="dish-card">
|
|
|
|
|
+ <el-image v-if="item.previewImageUrl" class="dish-image" :src="item.previewImageUrl"
|
|
|
|
|
+ :preview-src-list="item.previewImageList" fit="cover" hide-on-click-modal
|
|
|
|
|
+ append-to-body :z-index="9999"></el-image>
|
|
|
|
|
+ <div v-else class="dish-image dish-image-empty">暂无图片</div>
|
|
|
|
|
+ <div class="dish-info">
|
|
|
|
|
+ <div class="dish-name">{{ item.dishName }}</div>
|
|
|
|
|
+ <!-- <div class="dish-type">{{ item.typeName || '-' }}</div> -->
|
|
|
|
|
+ <div class="dish-desc">{{ item.spec || item.taste || item.remarks || '暂无说明' }}</div>
|
|
|
|
|
+ <div class="dish-bottom">
|
|
|
|
|
+ <span class="dish-price">¥{{ formatMoney(item.salePrice) }}</span>
|
|
|
|
|
+ <el-button type="primary" size="small" plain
|
|
|
|
|
+ @click="addDish(item)">点菜</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="ordered-panel" v-loading="orderLoading">
|
|
|
|
|
+ <div class="ordered-title">
|
|
|
|
|
+ <span>已点菜</span>
|
|
|
|
|
+ <!-- <span class="ordered-count">{{ orderedList.length }} 项</span> -->
|
|
|
|
|
+ <el-button v-if="hasCurrentOrder" type="danger" plain :loading="submitting"
|
|
|
|
|
+ @click="confirmCancelOrder()">取消订单</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div v-if="orderedList.length === 0" class="ordered-empty">
|
|
|
|
|
+ <div class="ordered-empty-title">暂未点菜</div>
|
|
|
|
|
+ <div class="ordered-empty-sub">从左侧选择菜品后会显示在这里</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-else class="ordered-list">
|
|
|
|
|
+ <div class="ordered-head">
|
|
|
|
|
+ <span></span>
|
|
|
|
|
+ <span style="text-align: center;">菜品</span>
|
|
|
|
|
+ <span style="text-align: center;">单价</span>
|
|
|
|
|
+ <span style="text-align: center;">总价</span>
|
|
|
|
|
+ <span style="text-align: center;">数量</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div ref="orderedDragList" class="ordered-drag-list">
|
|
|
|
|
+ <div v-for="item in orderedList" :key="item.dishId" class="ordered-item"
|
|
|
|
|
+ :class="{ 'ordered-item-pending': item.pendingQuantity !== 0 }" :data-dish-id="item.dishId">
|
|
|
|
|
+ <div class="ordered-drag-handle" title="拖拽排序">
|
|
|
|
|
+ <i class="el-icon-rank"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ordered-dish">
|
|
|
|
|
+ <div class="ordered-dish-name">{{ item.dishName }}</div>
|
|
|
|
|
+ <!-- <div class="ordered-dish-spec">{{ item.spec || item.unit || '-' }}</div> -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ordered-price">¥{{ formatMoney(item.salePrice) }}</div>
|
|
|
|
|
+ <div class="ordered-total">¥{{ formatMoney(itemTotal(item)) }}</div>
|
|
|
|
|
+ <div class="ordered-qty">
|
|
|
|
|
+ <el-button icon="el-icon-minus" size="mini" circle
|
|
|
|
|
+ @click="reduceDish(item)"></el-button>
|
|
|
|
|
+ <span>{{ item.quantity }}</span>
|
|
|
|
|
+ <el-button icon="el-icon-plus" size="mini" circle
|
|
|
|
|
+ @click="increaseOrderedDish(item)"></el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ordered-footer">
|
|
|
|
|
+ <div class="ordered-summary">
|
|
|
|
|
+ <span>总价</span>
|
|
|
|
|
+ <strong>¥{{ formatMoney(orderTotal) }}</strong>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ordered-actions" :class="{ 'ordered-actions-with-cancel': hasCurrentOrder }">
|
|
|
|
|
+
|
|
|
|
|
+ <el-button type="success" :loading="submitting" @click="openSettleDialog()">{{ settleButtonText
|
|
|
|
|
+ }}</el-button>
|
|
|
|
|
+ <el-button type="primary" :loading="submitting" @click="confirmSubmitOrder()">下单</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-dialog title="订单结账" :close-on-click-modal="false" top="25vh" draggable width="520px"
|
|
|
|
|
+ v-model="settleDialogVisible">
|
|
|
|
|
+ <el-tabs v-model="settleType">
|
|
|
|
|
+ <el-tab-pane label="结账" name="0">
|
|
|
|
|
+ <div class="settle-normal">
|
|
|
|
|
+ <span>订单金额</span>
|
|
|
|
|
+ <strong>¥{{ formatMoney(orderTotal) }}</strong>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-tab-pane>
|
|
|
|
|
+ <el-tab-pane label="折扣结账" name="1">
|
|
|
|
|
+ <div class="settle-preview">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>账单原金额</span>
|
|
|
|
|
+ <strong>¥{{ formatMoney(orderTotal) }}</strong>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>折扣比例</span>
|
|
|
|
|
+ <strong>{{ formatMoney(discountRate) }}%</strong>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>折扣后金额</span>
|
|
|
|
|
+ <strong style="color: #f56c6c;">¥{{ formatMoney(settlePayableAmount) }}</strong>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-form label-width="100px">
|
|
|
|
|
+ <el-form-item label="折扣比例">
|
|
|
|
|
+ <el-input-number v-model="discountRate" :min="0" :max="100" :precision="2"
|
|
|
|
|
+ style="width: 100%"></el-input-number>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-tab-pane>
|
|
|
|
|
+ <el-tab-pane label="优惠结账" name="2">
|
|
|
|
|
+ <div class="settle-preview">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>账单原金额</span>
|
|
|
|
|
+ <strong>¥{{ formatMoney(orderTotal) }}</strong>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>优惠金额</span>
|
|
|
|
|
+ <strong>¥{{ formatMoney(settleDiscountAmount) }}</strong>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span>优惠后金额</span>
|
|
|
|
|
+ <strong style="color: #f56c6c;">¥{{ formatMoney(settlePayableAmount) }}</strong>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-form label-width="100px">
|
|
|
|
|
+ <el-form-item label="优惠金额">
|
|
|
|
|
+ <el-input-number v-model="discountAmount" :min="0" :max="orderTotal" :precision="2"
|
|
|
|
|
+ style="width: 100%"></el-input-number>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-tab-pane>
|
|
|
|
|
+ </el-tabs>
|
|
|
|
|
+ <template #footer>
|
|
|
|
|
+ <span class="dialog-footer">
|
|
|
|
|
+ <el-button @click="settleDialogVisible = false" icon="el-icon-circle-close">取消</el-button>
|
|
|
|
|
+ <el-button type="primary" :loading="submitting" @click="confirmSettle()"
|
|
|
|
|
+ icon="el-icon-circle-check">确认结账</el-button>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import DishRoomService from '@/api/psi/DishRoomService'
|
|
|
|
|
+import DishOrderService from '@/api/psi/DishOrderService'
|
|
|
|
|
+import OSSSerivce from '@/api/sys/OSSService'
|
|
|
|
|
+import Sortable from 'sortablejs'
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ currentRoom: {},
|
|
|
|
|
+ currentOrder: null,
|
|
|
|
|
+ categoryList: [],
|
|
|
|
|
+ activeTypeId: 'all',
|
|
|
|
|
+ dishSearchName: '',
|
|
|
|
|
+ dishList: [],
|
|
|
|
|
+ orderedList: [],
|
|
|
|
|
+ dishLoading: false,
|
|
|
|
|
+ orderLoading: false,
|
|
|
|
|
+ submitting: false,
|
|
|
|
|
+ settleDialogVisible: false,
|
|
|
|
|
+ settleType: '0',
|
|
|
|
|
+ discountRate: 100,
|
|
|
|
|
+ discountAmount: 0,
|
|
|
|
|
+ orderedSortable: null
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ orderTotal() {
|
|
|
|
|
+ return this.orderedList.reduce((total, item) => {
|
|
|
|
|
+ return total + this.itemTotal(item)
|
|
|
|
|
+ }, 0)
|
|
|
|
|
+ },
|
|
|
|
|
+ changedDetailList() {
|
|
|
|
|
+ return this.orderedList.filter(item => item.pendingQuantity !== 0)
|
|
|
|
|
+ },
|
|
|
|
|
+ hasChangedDish() {
|
|
|
|
|
+ return this.changedDetailList.length > 0
|
|
|
|
|
+ },
|
|
|
|
|
+ hasCurrentOrder() {
|
|
|
|
|
+ return !!(this.currentOrder && this.currentOrder.id)
|
|
|
|
|
+ },
|
|
|
|
|
+ settleButtonText() {
|
|
|
|
|
+ return this.hasChangedDish ? '下单并结账' : '结账'
|
|
|
|
|
+ },
|
|
|
|
|
+ submitDetailList() {
|
|
|
|
|
+ return this.orderedList.map((item, index) => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ dishId: item.dishId,
|
|
|
|
|
+ dishName: item.dishName,
|
|
|
|
|
+ quantity: item.pendingQuantity,
|
|
|
|
|
+ dishSort: index + 1
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ settleDiscountAmount() {
|
|
|
|
|
+ if (this.settleType === '1') {
|
|
|
|
|
+ return this.orderTotal - this.settlePayableAmount
|
|
|
|
|
+ }
|
|
|
|
|
+ if (this.settleType === '2') {
|
|
|
|
|
+ return Math.min(Number(this.discountAmount || 0), this.orderTotal)
|
|
|
|
|
+ }
|
|
|
|
|
+ return 0
|
|
|
|
|
+ },
|
|
|
|
|
+ settlePayableAmount() {
|
|
|
|
|
+ if (this.settleType === '1') {
|
|
|
|
|
+ const rate = Math.min(Math.max(Number(this.discountRate || 0), 0), 100)
|
|
|
|
|
+ return this.orderTotal * rate / 100
|
|
|
|
|
+ }
|
|
|
|
|
+ if (this.settleType === '2') {
|
|
|
|
|
+ return Math.max(this.orderTotal - Number(this.discountAmount || 0), 0)
|
|
|
|
|
+ }
|
|
|
|
|
+ return this.orderTotal
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ dishRoomService: null,
|
|
|
|
|
+ dishOrderService: null,
|
|
|
|
|
+ ossService: null,
|
|
|
|
|
+ created() {
|
|
|
|
|
+ this.dishRoomService = new DishRoomService()
|
|
|
|
|
+ this.dishOrderService = new DishOrderService()
|
|
|
|
|
+ this.ossService = new OSSSerivce()
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ this.initPage()
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.initOrderedSortable()
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ activated() {
|
|
|
|
|
+ this.initPage()
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.initOrderedSortable()
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ beforeUnmount() {
|
|
|
|
|
+ this.destroyOrderedSortable()
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ initPage() {
|
|
|
|
|
+ const roomId = this.$route.query.roomId
|
|
|
|
|
+ if (!roomId) {
|
|
|
|
|
+ this.backRoomList()
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.loadRoom(roomId)
|
|
|
|
|
+ this.loadCurrentOrder(roomId)
|
|
|
|
|
+ this.activeTypeId = 'all'
|
|
|
|
|
+ this.dishSearchName = ''
|
|
|
|
|
+ this.loadCategoryList()
|
|
|
|
|
+ this.loadDishList()
|
|
|
|
|
+ },
|
|
|
|
|
+ loadRoom(roomId) {
|
|
|
|
|
+ this.dishRoomService.findById(roomId).then((data) => {
|
|
|
|
|
+ this.currentRoom = data || {}
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ loadCurrentOrder(roomId) {
|
|
|
|
|
+ this.orderLoading = true
|
|
|
|
|
+ this.dishOrderService.currentOrder(roomId).then((data) => {
|
|
|
|
|
+ this.currentOrder = data || null
|
|
|
|
|
+ const detailList = data && data.detailList ? data.detailList : []
|
|
|
|
|
+ const orderedDetailList = [...detailList].sort((a, b) => {
|
|
|
|
|
+ const sortA = Number(a.dishSort || 999999)
|
|
|
|
|
+ const sortB = Number(b.dishSort || 999999)
|
|
|
|
|
+ return sortA - sortB
|
|
|
|
|
+ })
|
|
|
|
|
+ this.orderedList = orderedDetailList.map(item => this.toOrderedItem(item, item.quantity || 0, 0))
|
|
|
|
|
+ this.refreshDishSort()
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.initOrderedSortable()
|
|
|
|
|
+ })
|
|
|
|
|
+ this.orderLoading = false
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ this.orderLoading = false
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ backRoomList() {
|
|
|
|
|
+ this.$router.push({
|
|
|
|
|
+ path: '/psiManagement/dishManage/order/DishOrder'
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ loadCategoryList() {
|
|
|
|
|
+ this.dishOrderService.typeList().then((data) => {
|
|
|
|
|
+ this.categoryList = [
|
|
|
|
|
+ { id: 'all', name: '所有菜品' },
|
|
|
|
|
+ ...data.map(item => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ id: item.id,
|
|
|
|
|
+ name: item.name
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ ]
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ changeType(item) {
|
|
|
|
|
+ this.activeTypeId = item.id
|
|
|
|
|
+ this.dishSearchName = ''
|
|
|
|
|
+ this.loadDishList()
|
|
|
|
|
+ },
|
|
|
|
|
+ searchDish() {
|
|
|
|
|
+ this.activeTypeId = 'all'
|
|
|
|
|
+ this.loadDishList()
|
|
|
|
|
+ },
|
|
|
|
|
+ loadDishList() {
|
|
|
|
|
+ this.dishLoading = true
|
|
|
|
|
+ this.dishOrderService.dishList({
|
|
|
|
|
+ typeId: this.activeTypeId === 'all' ? '' : this.activeTypeId,
|
|
|
|
|
+ dishName: this.dishSearchName
|
|
|
|
|
+ }).then((data) => {
|
|
|
|
|
+ this.dishList = data
|
|
|
|
|
+ this.dishLoading = false
|
|
|
|
|
+ this.loadDishImagePreview()
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ this.dishLoading = false
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ addDish(dish) {
|
|
|
|
|
+ const row = this.orderedList.find(item => item.dishId === dish.id)
|
|
|
|
|
+ if (row) {
|
|
|
|
|
+ row.quantity += 1
|
|
|
|
|
+ row.pendingQuantity += 1
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.orderedList.push(this.toOrderedItem(dish, 1, 1))
|
|
|
|
|
+ this.refreshDishSort()
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.initOrderedSortable()
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ increaseOrderedDish(item) {
|
|
|
|
|
+ item.quantity += 1
|
|
|
|
|
+ item.pendingQuantity += 1
|
|
|
|
|
+ },
|
|
|
|
|
+ reduceDish(item) {
|
|
|
|
|
+ if (item.quantity <= 0) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ item.quantity -= 1
|
|
|
|
|
+ item.pendingQuantity -= 1
|
|
|
|
|
+ if (item.quantity === 0 && item.baseQuantity === 0) {
|
|
|
|
|
+ this.orderedList = this.orderedList.filter(row => row.dishId !== item.dishId)
|
|
|
|
|
+ this.refreshDishSort()
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.initOrderedSortable()
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ openSettleDialog() {
|
|
|
|
|
+ const changedList = this.changedDetailList
|
|
|
|
|
+ if (!this.hasCurrentOrder && changedList.length === 0) {
|
|
|
|
|
+ this.$message.warning('请先选择菜品')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.settleType = '0'
|
|
|
|
|
+ this.discountRate = 100
|
|
|
|
|
+ this.discountAmount = 0
|
|
|
|
|
+ this.settleDialogVisible = true
|
|
|
|
|
+ },
|
|
|
|
|
+ confirmSettle() {
|
|
|
|
|
+ this.submitOrder('1', {
|
|
|
|
|
+ settleType: this.settleType,
|
|
|
|
|
+ discountRate: this.settleType === '1' ? this.discountRate : 100,
|
|
|
|
|
+ discountAmount: this.settleType === '2' ? this.discountAmount : this.settleDiscountAmount
|
|
|
|
|
+ }, false)
|
|
|
|
|
+ },
|
|
|
|
|
+ confirmSubmitOrder() {
|
|
|
|
|
+ const detailList = this.changedDetailList
|
|
|
|
|
+ if (detailList.length === 0) {
|
|
|
|
|
+ this.$message.warning('请先选择菜品')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$confirm('是否确认下单?', '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ }).then(() => {
|
|
|
|
|
+ this.submitOrder('0', {}, true)
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ confirmCancelOrder() {
|
|
|
|
|
+ if (!this.hasCurrentOrder) {
|
|
|
|
|
+ this.$message.warning('暂无可取消的订单')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$confirm('确定取消当前订单吗?取消后包房将释放,未结账菜品不再计入订单。', '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ }).then(() => {
|
|
|
|
|
+ this.submitting = true
|
|
|
|
|
+ this.dishOrderService.cancelOrder(this.currentOrder.id).then((data) => {
|
|
|
|
|
+ this.$message.success(data)
|
|
|
|
|
+ this.submitting = false
|
|
|
|
|
+ this.backRoomList()
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ this.submitting = false
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ submitOrder(settleFlag, settleInfo = {}, requireChanged = false) {
|
|
|
|
|
+ const changedList = this.changedDetailList
|
|
|
|
|
+ const detailList = settleFlag === '1' && changedList.length === 0 ? [] : this.submitDetailList
|
|
|
|
|
+ if (requireChanged && changedList.length === 0) {
|
|
|
|
|
+ this.$message.warning('请先选择菜品')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ if (settleFlag === '1' && !this.hasCurrentOrder && changedList.length === 0) {
|
|
|
|
|
+ this.$message.warning('请先选择菜品')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ if (settleFlag !== '1' && detailList.length === 0) {
|
|
|
|
|
+ this.$message.warning('请先选择菜品')
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.submitting = true
|
|
|
|
|
+ this.dishOrderService.submit({
|
|
|
|
|
+ id: this.hasCurrentOrder ? this.currentOrder.id : '',
|
|
|
|
|
+ roomId: this.$route.query.roomId,
|
|
|
|
|
+ settleFlag: settleFlag,
|
|
|
|
|
+ ...settleInfo,
|
|
|
|
|
+ detailList: detailList
|
|
|
|
|
+ }).then((data) => {
|
|
|
|
|
+ this.$message.success(data)
|
|
|
|
|
+ this.submitting = false
|
|
|
|
|
+ this.settleDialogVisible = false
|
|
|
|
|
+ this.loadRoom(this.$route.query.roomId)
|
|
|
|
|
+ this.loadCurrentOrder(this.$route.query.roomId)
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ this.submitting = false
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ toOrderedItem(item, quantity, pendingQuantity) {
|
|
|
|
|
+ const salePrice = Number(item.salePrice || 0)
|
|
|
|
|
+ return {
|
|
|
|
|
+ dishId: item.dishId || item.id,
|
|
|
|
|
+ dishCode: item.dishCode,
|
|
|
|
|
+ dishName: item.dishName,
|
|
|
|
|
+ typeId: item.typeId,
|
|
|
|
|
+ typeName: item.typeName,
|
|
|
|
|
+ unit: item.unit,
|
|
|
|
|
+ spec: item.spec,
|
|
|
|
|
+ salePrice: salePrice,
|
|
|
|
|
+ quantity: quantity,
|
|
|
|
|
+ baseQuantity: quantity - pendingQuantity,
|
|
|
|
|
+ pendingQuantity: pendingQuantity,
|
|
|
|
|
+ dishSort: item.dishSort || 0
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ initOrderedSortable() {
|
|
|
|
|
+ const el = this.$refs.orderedDragList
|
|
|
|
|
+ if (!el) {
|
|
|
|
|
+ this.destroyOrderedSortable()
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ if (this.orderedSortable) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.orderedSortable = Sortable.create(el, {
|
|
|
|
|
+ animation: 180,
|
|
|
|
|
+ filter: '.ordered-qty, .ordered-qty *',
|
|
|
|
|
+ preventOnFilter: false,
|
|
|
|
|
+ ghostClass: 'ordered-drag-ghost',
|
|
|
|
|
+ chosenClass: 'ordered-drag-chosen',
|
|
|
|
|
+ onEnd: (evt) => {
|
|
|
|
|
+ if (evt.oldIndex === evt.newIndex) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ const list = [...this.orderedList]
|
|
|
|
|
+ const moved = list.splice(evt.oldIndex, 1)[0]
|
|
|
|
|
+ list.splice(evt.newIndex, 0, moved)
|
|
|
|
|
+ this.orderedList = list
|
|
|
|
|
+ this.refreshDishSort()
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ destroyOrderedSortable() {
|
|
|
|
|
+ if (this.orderedSortable) {
|
|
|
|
|
+ this.orderedSortable.destroy()
|
|
|
|
|
+ this.orderedSortable = null
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ refreshDishSort() {
|
|
|
|
|
+ this.orderedList.forEach((item, index) => {
|
|
|
|
|
+ item.dishSort = index + 1
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ itemTotal(item) {
|
|
|
|
|
+ return Number(item.salePrice || 0) * Number(item.quantity || 0)
|
|
|
|
|
+ },
|
|
|
|
|
+ formatMoney(value) {
|
|
|
|
|
+ return Number(value || 0).toFixed(2)
|
|
|
|
|
+ },
|
|
|
|
|
+ loadDishImagePreview() {
|
|
|
|
|
+ this.dishList.forEach((row) => {
|
|
|
|
|
+ const urls = this.getImageUrls(row.imageUrl)
|
|
|
|
|
+ if (urls.length === 0) {
|
|
|
|
|
+ row.previewImageUrl = ''
|
|
|
|
|
+ row.previewImageList = []
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ row.previewImageList = urls
|
|
|
|
|
+ row.previewImageUrl = urls[0]
|
|
|
|
|
+ Promise.all(urls.map(url => this.getPreviewUrl(url))).then((list) => {
|
|
|
|
|
+ row.previewImageList = list
|
|
|
|
|
+ row.previewImageUrl = list[0]
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ getImageUrls(value) {
|
|
|
|
|
+ if (!value) {
|
|
|
|
|
+ return []
|
|
|
|
|
+ }
|
|
|
|
|
+ return value.split(',').map(item => item.trim()).filter(item => item)
|
|
|
|
|
+ },
|
|
|
|
|
+ getPreviewUrl(url) {
|
|
|
|
|
+ if (url.indexOf('http') === 0) {
|
|
|
|
|
+ return Promise.resolve(url)
|
|
|
|
|
+ }
|
|
|
|
|
+ return this.ossService.getTemporaryUrl(url).catch(() => url)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.dish-order-detail-page {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.order-header {
|
|
|
|
|
+ height: 64px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
|
|
+ padding: 0 4px 12px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.order-room-name {
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ line-height: 28px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.order-room-sub {
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.order-main {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-height: 0;
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: minmax(0, 1fr) 480px;
|
|
|
|
|
+ gap: 16px;
|
|
|
|
|
+ padding-top: 16px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-panel,
|
|
|
|
|
+.ordered-panel {
|
|
|
|
|
+ min-height: 0;
|
|
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-panel,
|
|
|
|
|
+.ordered-panel {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-search {
|
|
|
|
|
+ padding: 14px;
|
|
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-content {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-height: 0;
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 150px minmax(0, 1fr);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.category-list {
|
|
|
|
|
+ background: #f7f9fb;
|
|
|
|
|
+ border-right: 1px solid #ebeef5;
|
|
|
|
|
+ overflow: auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.category-item {
|
|
|
|
|
+ min-height: 46px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 0 14px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+ border-left: 3px solid transparent;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.category-item:hover {
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ background: #eef5ff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.category-active {
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-left-color: #409eff;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-list {
|
|
|
|
|
+ min-height: 0;
|
|
|
|
|
+ overflow: auto;
|
|
|
|
|
+ padding: 14px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-grid {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
|
|
+ gap: 14px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-card {
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ aspect-ratio: 4 / 3;
|
|
|
|
|
+ background: #f2f3f5;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-image-empty {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-info {
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-name {
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ line-height: 22px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-type {
|
|
|
|
|
+ margin-top: 2px;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ line-height: 18px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-desc {
|
|
|
|
|
+ height: 24px;
|
|
|
|
|
+ margin-top: 6px;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ line-height: 18px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ display: -webkit-box;
|
|
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-bottom {
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-price {
|
|
|
|
|
+ color: #f56c6c;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ line-height: 26px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dish-empty {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-title {
|
|
|
|
|
+ height: 54px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ padding: 0 16px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-count {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-empty {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 24px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-empty-title {
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-empty-sub {
|
|
|
|
|
+ margin-top: 6px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-list {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-height: 0;
|
|
|
|
|
+ overflow: auto;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-head,
|
|
|
|
|
+.ordered-item {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 24px minmax(0, 1.35fr) 72px 86px 104px;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-head {
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
+ padding: 0 8px;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ background: #f7f9fb;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-item {
|
|
|
|
|
+ min-height: 64px;
|
|
|
|
|
+ cursor: grab;
|
|
|
|
|
+ padding: 10px 8px;
|
|
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-item-pending {
|
|
|
|
|
+ background: rgba(45, 140, 240, 0.3);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-dish {
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-dish-name {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-dish-spec {
|
|
|
|
|
+ margin-top: 2px;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ line-height: 18px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-price,
|
|
|
|
|
+.ordered-total {
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-total {
|
|
|
|
|
+ color: #f56c6c;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-qty {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-qty span {
|
|
|
|
|
+ min-width: 22px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-footer {
|
|
|
|
|
+ border-top: 1px solid #ebeef5;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-summary {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-summary strong {
|
|
|
|
|
+ font-size: 22px;
|
|
|
|
|
+ color: #f56c6c;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-actions {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-actions-with-cancel {
|
|
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.ordered-actions .el-button {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.settle-normal {
|
|
|
|
|
+ height: 96px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ padding: 0 4px;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.settle-normal strong {
|
|
|
|
|
+ font-size: 28px;
|
|
|
|
|
+ color: #f56c6c;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.settle-preview {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ margin-bottom: 18px;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ background: #f7f8fa;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.settle-preview div {
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.settle-preview span {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ line-height: 18px;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.settle-preview strong {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin-top: 4px;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ line-height: 22px;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@media (max-width: 1280px) {
|
|
|
|
|
+ .order-main {
|
|
|
|
|
+ grid-template-columns: minmax(0, 1fr) 380px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dish-grid {
|
|
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@media (max-width: 960px) {
|
|
|
|
|
+ .dish-grid {
|
|
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .order-main {
|
|
|
|
|
+ grid-template-columns: 1fr;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dish-content {
|
|
|
|
|
+ grid-template-columns: 120px minmax(0, 1fr);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@media (max-width: 640px) {
|
|
|
|
|
+ .dish-grid {
|
|
|
|
|
+ grid-template-columns: 1fr;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|