部分页面翻译 和BUG

src/views/mall/order/storeOrder/OrderDetail.vue

@@ -1,5 +1,5 @@
 <template>
- <el-drawer v-model="drawer" :title="dialogTitle" size="30%">
+  <el-drawer v-model="drawer" :title="dialogTitle" size="30%">
     <div>
       <el-descriptions :title="t('mall.receivingInfoOne')" :column="2" v-if="DetailData.orderType == 'takeout'">
         <el-descriptions-item :label="t('mall.userNickname')">{{ nickname }}</el-descriptions-item>
@@ -8,79 +8,107 @@
         <el-descriptions-item :label="t('mall.receivingAddress')">{{ DetailData.userAddress }}</el-descriptions-item>
       </el-descriptions>
       <el-descriptions title="" :column="1" v-if="DetailData.orderType != 'due'">
-          <el-descriptions-item>
-            <template #label>
-              <div class="mylabel">
-                {{t('mall.dishDetails')}}
-              </div>
-            </template>
-            <div>
-                <div style="background: linear-gradient(to bottom, #e9f1ee, #fcfcf4);padding: 20px 30px;margin: 10px 0;border-radius: 20px;" v-for="(item, index) in DetailData.appDeskOrderVo" :key="index">
-                  <div class="flex align-center">
-                    <div><el-avatar :size="50" :src="item.uavatar" /></div>
-                    <div class="flex flex-1 justify-between font-size-sm text-color-assist">
-                      <div class="flex flex-column ml-2">
-                        <span>{{item.unickname}}</span>
-                        <span>{{formatDate(item.addTime) }}</span>
-                      </div>
-                      <div style="">
-                        <span style="color: #9acafc;font-weight: bold;">{{item.uidType == 'user' ? t('mall.userOrdering') : t('mall.staffOrderingOnBehalf')}}</span>
-                        <span style="color: #5ac725;">({{item.isOrder == 0 ? t('mall.mealNotServed') : t('mall.mealServed')}})</span>
-                      </div>
-                    </div>
+        <el-descriptions-item>
+          <template #label>
+            <div class="mylabel">
+              {{ t('mall.dishDetails') }}
+            </div>
+          </template>
+          <div>
+            <div
+              style="background: linear-gradient(to bottom, #e9f1ee, #fcfcf4); padding: 20px 30px; margin: 10px 0; border-radius: 20px"
+              v-for="(item, index) in DetailData.appDeskOrderVo"
+              :key="index"
+            >
+              <div class="flex align-center">
+                <div><el-avatar :size="50" :src="item.uavatar" /></div>
+                <div class="flex flex-1 justify-between font-size-sm text-color-assist">
+                  <div class="flex flex-column ml-2">
+                    <span>{{ item.unickname }}</span>
+                    <span>{{ formatDate(item.addTime) }}</span>
                   </div>
-                  <el-divider />
-                  <div class="flex align-center" v-for="(good,index2) in item.appDeskOrderGoodsVos" :key="index2">
-                    <div><el-image :src="good.image" style="width: 70px;height: 70px;" /></div>
-                    <div class="flex  flex-1 flex-column ml-2 font-size-sm">
-                        <div class="flex justify-between"><span class="font-weight-bolder">{{good.title}}</span><span style="color: #f56c6c;">{{good.spec}}</span></div>
-                        <div class="flex justify-between mt-1"><span>¥{{good.price}}</span><span>x{{good.number}}</span></div>
-                    </div>
+                  <div style="">
+                    <span style="color: #9acafc; font-weight: bold">{{
+                      item.uidType == 'user' ? t('mall.userOrdering') : t('mall.staffOrderingOnBehalf')
+                    }}</span>
+                    <span style="color: #5ac725">({{ item.isOrder == 0 ? t('mall.mealNotServed') : t('mall.mealServed') }})</span>
                   </div>
                 </div>
+              </div>
+              <el-divider />
+              <div class="flex align-center" v-for="(good, index2) in item.appDeskOrderGoodsVos" :key="index2">
+                <div><el-image :src="getImageUrl(good.image)" style="width: 70px; height: 70px" /></div>
+                <div class="flex flex-1 flex-column ml-2 font-size-sm">
+                  <div class="flex justify-between"
+                    ><span class="font-weight-bolder">{{ good.title }}</span
+                    ><span style="color: #f56c6c">{{ good.spec }}</span></div
+                  >
+                  <div class="flex justify-between mt-1"
+                    ><span>¥{{ good.price }}</span
+                    ><span>x{{ good.number }}</span></div
+                  >
+                </div>
+              </div>
             </div>
-          </el-descriptions-item>
+          </div>
+        </el-descriptions-item>
       </el-descriptions>
       <el-descriptions :title="t('mall.productDetails')" :column="1" v-else>
-          <el-descriptions-item :label="t('mall.reserveTable')">
-              <table width="100%">
-                <tr style="font-weight:bold;height:50px">
-                  <td>{{t('mall.picture')}}</td>
-                  <td>{{t('mall.name')}}</td>
-                  <td>{{t('mall.price')}}</td>
-                  <td>{{t('mall.quantity')}}</td>
-                </tr>
-                <tr>
-                    <td><el-image style="width: 40px; height: 40px" :src="DetailData.shopDeskDO.image" :fit="fit" /></td>
-                    <td>{{ DetailData.shopDeskDO.title}}</td>
-                    <td>￥0.00</td>
-                    <td>x 1</td>
-                </tr>
-              </table>
-          </el-descriptions-item>
+        <el-descriptions-item :label="t('mall.reserveTable')">
+          <table width="100%">
+            <tr style="font-weight: bold; height: 50px">
+              <td>{{ t('mall.picture') }}</td>
+              <td>{{ t('mall.name') }}</td>
+              <td>{{ t('mall.price') }}</td>
+              <td>{{ t('mall.quantity') }}</td>
+            </tr>
+            <tr>
+              <td><el-image style="width: 40px; height: 40px" :src="getImageUrl(DetailData.shopDeskDO.image)" :fit="fit" /></td>
+              <td>{{ DetailData.shopDeskDO.title }}</td>
+              <td>￥0.00</td>
+              <td>x 1</td>
+            </tr>
+          </table>
+        </el-descriptions-item>
       </el-descriptions>
       <el-descriptions :title="t('mall.orderInfo')" :column="2">
         <template #title>
           {{ t('mall.orderInfo') }}
-          <el-tag  type="danger" v-if="DetailData.orderType=='desk'">{{ t('mall.dineIn') }}</el-tag>
-          <el-tag  type="danger" v-if="DetailData.orderType=='takeout'">{{t('mall.takeOut')}}</el-tag>
-          <el-tag  type="danger" v-if="DetailData.orderType=='takein'">{{t('mall.pickup')}}</el-tag>
-          <el-tag  type="danger" v-if="DetailData.orderType=='due'">{{ t('mall.reservation') }}</el-tag>
+          <el-tag type="danger" v-if="DetailData.orderType == 'desk'">{{ t('mall.dineIn') }}</el-tag>
+          <el-tag type="danger" v-if="DetailData.orderType == 'takeout'">{{ t('mall.takeOut') }}</el-tag>
+          <el-tag type="danger" v-if="DetailData.orderType == 'takein'">{{ t('mall.pickup') }}</el-tag>
+          <el-tag type="danger" v-if="DetailData.orderType == 'due'">{{ t('mall.reservation') }}</el-tag>
         </template>
         <el-descriptions-item :label="t('mall.store')">{{ DetailData.shopName }}</el-descriptions-item>
-        <el-descriptions-item :label="t('mall.pickupNumber')" v-if="DetailData.orderType != 'due'">{{ DetailData.numberId }}</el-descriptions-item>
-        <el-descriptions-item :label="t('mall.tableNumber')">{{ DetailData.deskNumber ? DetailData.deskNumber : t('public.none') }}</el-descriptions-item>
-        <el-descriptions-item :label="t('mall.diningPersonCount')" v-if="DetailData.orderType != 'due'">{{ DetailData.deskPeople ? DetailData.deskPeople : t('public.none') }}</el-descriptions-item>
+        <el-descriptions-item :label="t('mall.pickupNumber')" v-if="DetailData.orderType != 'due'">{{
+          DetailData.numberId
+        }}</el-descriptions-item>
+        <el-descriptions-item :label="t('mall.tableNumber')">{{
+          DetailData.deskNumber ? DetailData.deskNumber : t('public.none')
+        }}</el-descriptions-item>
+        <el-descriptions-item :label="t('mall.diningPersonCount')" v-if="DetailData.orderType != 'due'">{{
+          DetailData.deskPeople ? DetailData.deskPeople : t('public.none')
+        }}</el-descriptions-item>
         <el-descriptions-item :label="t('mall.orderNumber1')">{{ DetailData.orderId }}</el-descriptions-item>
-        <el-descriptions-item :label="t('mall.reservationTime')" v-if="DetailData.orderType == 'due'">{{ formatDate(DetailData.dueTime) }}</el-descriptions-item>
-        <el-descriptions-item :label="t('mall.arrivalTime')" v-if="DetailData.orderType == 'due'">{{ DetailData.reachTime }}</el-descriptions-item>
-        <el-descriptions-item :label="t('mall.reservationPerson')" v-if="DetailData.orderType == 'due'">{{ DetailData.realName }}</el-descriptions-item>
-        <el-descriptions-item :label="t('mall.reservationPhone')" v-if="DetailData.orderType == 'due'">{{ DetailData.userPhone }}</el-descriptions-item>
-        <el-descriptions-item :label="t('mall.orderStatus')" v-if="DetailData.orderType != 'due'">{{ DetailData.statusStr }}</el-descriptions-item>
+        <el-descriptions-item :label="t('mall.reservationTime')" v-if="DetailData.orderType == 'due'">{{
+          formatDate(DetailData.dueTime)
+        }}</el-descriptions-item>
+        <el-descriptions-item :label="t('mall.arrivalTime')" v-if="DetailData.orderType == 'due'">{{
+          DetailData.reachTime
+        }}</el-descriptions-item>
+        <el-descriptions-item :label="t('mall.reservationPerson')" v-if="DetailData.orderType == 'due'">{{
+          DetailData.realName
+        }}</el-descriptions-item>
+        <el-descriptions-item :label="t('mall.reservationPhone')" v-if="DetailData.orderType == 'due'">{{
+          DetailData.userPhone
+        }}</el-descriptions-item>
+        <el-descriptions-item :label="t('mall.orderStatus')" v-if="DetailData.orderType != 'due'">{{
+          DetailData.statusStr
+        }}</el-descriptions-item>
         <el-descriptions-item :label="t('mall.reservationStatus')" v-if="DetailData.orderType == 'due'">
-          <span v-if="DetailData.dueStatus == 1">{{t('mall.reserving')}}</span>
-          <span v-else-if="DetailData.dueStatus == 2">{{t('mall.cancelled')}}</span>
-          <span v-else>{{t('mall.completed')}}</span>
+          <span v-if="DetailData.dueStatus == 1">{{ t('mall.reserving') }}</span>
+          <span v-else-if="DetailData.dueStatus == 2">{{ t('mall.cancelled') }}</span>
+          <span v-else>{{ t('mall.completed') }}</span>
         </el-descriptions-item>
         <el-descriptions-item :label="t('mall.totalProductQuantity')">{{ DetailData.totalNum }}</el-descriptions-item>
         <el-descriptions-item :label="t('mall.totalProductPrice')">{{ DetailData.totalPrice }}</el-descriptions-item>
@@ -89,7 +117,7 @@
         <el-descriptions-item :label="t('mall.pointsDeduction')">{{ DetailData.useIntegral }}</el-descriptions-item>
         <el-descriptions-item :label="t('mall.actualPayment')">{{ DetailData.payPrice }}</el-descriptions-item>
         <el-descriptions-item :label="t('mall.bonusPoints')">{{ DetailData.gainIntegral }}</el-descriptions-item>
-        <el-descriptions-item :label="t('public.createTime')">{{ formatDate(DetailData.createTime)}}</el-descriptions-item>
+        <el-descriptions-item :label="t('public.createTime')">{{ formatDate(DetailData.createTime) }}</el-descriptions-item>
         <el-descriptions-item :label="t('mall.paymentTime')">{{ formatDate(DetailData.payTime) }}</el-descriptions-item>
         <el-descriptions-item :label="t('mall.paymentMethod')">{{ DetailData.payType }}</el-descriptions-item>
       </el-descriptions>
@@ -98,11 +126,7 @@
         <el-descriptions-item label="快递单号">{{ DetailData.deliveryId }} <el-button type="primary" @click="getLogistic(DetailData.deliverySn,DetailData.deliveryId)">物流追踪</el-button></el-descriptions-item>
       </el-descriptions> -->
       <el-timeline>
-        <el-timeline-item
-          v-for="(activity, index) in logisticResult"
-          :key="index"
-          :timestamp="activity.acceptTime"
-        >
+        <el-timeline-item v-for="(activity, index) in logisticResult" :key="index" :timestamp="activity.acceptTime">
           {{ activity.acceptStation }}
         </el-timeline-item>
       </el-timeline>
@@ -121,6 +145,7 @@
 <script setup lang="ts">
 import * as StoreOrderApi from '@/api/mall/order/storeOrder'
 import { formatDate } from '@/utils/formatTime'
+import { convertImageUrl } from '@/utils/image-helper' // 导入图片URL处理工具
 //const message = useMessage() // 消息弹窗
 
 const { t } = useI18n() // 国际化
@@ -140,12 +165,11 @@ const open = async (type: string, id?: number) => {
   nickname.value = DetailData.value.userRespVO ? DetailData.value.userRespVO.nickname : '--'
   product.value = DetailData.value.storeOrderCartInfoDOList
   //获取加餐数量
-  if(DetailData.value.storeOrderCartInfoDOList.length > 0){
+  if (DetailData.value.storeOrderCartInfoDOList.length > 0) {
     addProductMark.value = DetailData.value.storeOrderCartInfoDOList[DetailData.value.storeOrderCartInfoDOList.length - 1].addProductMark
   }
 
-
-  console.log('addProductMark.value:',addProductMark.value )
+  console.log('addProductMark.value:', addProductMark.value)
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -156,19 +180,40 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 //   }
 //   logisticResult.value = res.traces
 // }
+
+// 添加图片URL转换方法
+const getImageUrl = (url) => {
+  return convertImageUrl(url)
+}
 </script>
 <style scoped>
-.flex{
-	/* #ifndef APP-PLUS-NVUE */
-	display:flex;
-	/* #endif */
-	flex-direction:row;
+.flex {
+  /* #ifndef APP-PLUS-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.justify-center {
+  justify-content: center;
+}
+.align-center {
+  align-items: center;
+}
+.flex-1 {
+  flex: 1;
+}
+.flex-column {
+  flex-direction: column !important;
+}
+.ml-2 {
+  margin-left: 20px;
+}
+.mylabel {
+  font-weight: bolder;
+  text-align: center;
+  font-size: 18px;
 }
-.justify-between{justify-content:space-between;}
-.justify-center{justify-content:center;}
-.align-center{ align-items: center; }
-.flex-1{ flex: 1; }
-.flex-column{ flex-direction:column!important; }
-.ml-2 { margin-left: 20px; }
-.mylabel {font-weight:bolder;text-align:center;font-size:18px}
-</style>
+</style>

src/views/mall/order/storeOrder/OrderSend.vue

@@ -1,12 +1,6 @@
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="120px"
-      v-loading="formLoading"
-    >
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
       <el-form-item :label="t('mall.orderNumber')" prop="orderType">
         <el-input v-model="formData.orderId" disabled class="input-width" />
       </el-form-item>
@@ -18,16 +12,17 @@
       </el-form-item>
       <el-form-item :label="t('mall.address')" prop="orderType" v-if="formData.orderType == 'takeout'">
         <span>{{ formData.realName }}{{ formData.userPhone }}{{ formData.userAddress }}</span>
-      </el-form-item>  
+      </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary"   :disabled="formLoading">{{t('mall.print')}}</el-button>
-      <el-button @click="dialogVisible = false">{{t('common.cancel')}}</el-button>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('mall.print') }}</el-button>
+      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
     </template>
   </Dialog>
 </template>
 <script setup lang="ts">
 import * as StoreOrderApi from '@/api/mall/order/storeOrder'
+import { convertImageUrl } from '@/utils/image-helper' // 导入图片URL处理工具
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -37,66 +32,64 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-    id: undefined,
-    updateType: "",
-    orderId: undefined,
-    orderType: undefined,
-    extendOrderId: undefined,
-    uid: undefined,
-    realName: undefined,
-    userPhone: undefined,
-    userAddress: undefined,
-    cartId: undefined,
-    freightPrice: undefined,
-    totalNum: undefined,
-    totalPrice: undefined,
-    totalPostage: undefined,
-    payPrice: undefined,
-    payPostage: undefined,
-    deductionPrice: undefined,
-    couponId: undefined,
-    couponPrice: undefined,
-    paid: undefined,
-    payTime: undefined,
-    payType: undefined,
-    status: undefined,
-    refundStatus: undefined,
-    refundReasonWapImg: undefined,
-    refundReasonWapExplain: undefined,
-    refundReasonTime: undefined,
-    refundReasonWap: undefined,
-    refundReason: undefined,
-    refundPrice: undefined,
-    deliverySn: undefined,
-    deliveryName: undefined,
-    deliveryType: 'normal',
-    deliveryId: undefined,
-    gainIntegral: undefined,
-    useIntegral: undefined,
-    payIntegral: undefined,
-    backIntegral: undefined,
-    mark: undefined,
-    unique: undefined,
-    remark: undefined,
-    merId: undefined,
-    combinationId: undefined,
-    pinkId: undefined,
-    cost: undefined,
-    seckillId: undefined,
-    bargainId: undefined,
-    verifyCode: undefined,
-    storeId: undefined,
-    shippingType: undefined,
-    isChannel: undefined,
-    isSystemDel: undefined
+  id: undefined,
+  updateType: '',
+  orderId: undefined,
+  orderType: undefined,
+  extendOrderId: undefined,
+  uid: undefined,
+  realName: undefined,
+  userPhone: undefined,
+  userAddress: undefined,
+  cartId: undefined,
+  freightPrice: undefined,
+  totalNum: undefined,
+  totalPrice: undefined,
+  totalPostage: undefined,
+  payPrice: undefined,
+  payPostage: undefined,
+  deductionPrice: undefined,
+  couponId: undefined,
+  couponPrice: undefined,
+  paid: undefined,
+  payTime: undefined,
+  payType: undefined,
+  status: undefined,
+  refundStatus: undefined,
+  refundReasonWapImg: undefined,
+  refundReasonWapExplain: undefined,
+  refundReasonTime: undefined,
+  refundReasonWap: undefined,
+  refundReason: undefined,
+  refundPrice: undefined,
+  deliverySn: undefined,
+  deliveryName: undefined,
+  deliveryType: 'normal',
+  deliveryId: undefined,
+  gainIntegral: undefined,
+  useIntegral: undefined,
+  payIntegral: undefined,
+  backIntegral: undefined,
+  mark: undefined,
+  unique: undefined,
+  remark: undefined,
+  merId: undefined,
+  combinationId: undefined,
+  pinkId: undefined,
+  cost: undefined,
+  seckillId: undefined,
+  bargainId: undefined,
+  verifyCode: undefined,
+  storeId: undefined,
+  shippingType: undefined,
+  isChannel: undefined,
+  isSystemDel: undefined
 })
 const formRules = reactive({
   //deliveryId: [{ required: true, message: '快递单号不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
-
- 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -129,7 +122,7 @@ const submitForm = async () => {
     data.updateType = 'orderSend'
     await StoreOrderApi.updateStoreOrder(data)
     message.success(t('common.updateSuccess'))
-  
+
     dialogVisible.value = false
     // 发送操作成功的事件
     emit('success')
@@ -138,13 +131,11 @@ const submitForm = async () => {
   }
 }
 
-
-
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    updateType: "",
+    updateType: '',
     orderId: undefined,
     orderType: undefined,
     extendOrderId: undefined,
@@ -201,6 +192,6 @@ const resetForm = () => {
 </script>
 <style scoped>
 .input-width {
-    width: 50%;
-  }
-</style>
+  width: 50%;
+}
+</style>

src/views/mall/order/storeOrder/desk.vue

@@ -1,73 +1,60 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-    <el-form-item :label="t('work.selectStore')" prop="orderId">
-      <el-select
-          v-model="queryParams.shopId"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in shopList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+      <el-form-item :label="t('work.selectStore')" prop="orderId">
+        <el-select v-model="queryParams.shopId" class="!w-240px">
+          <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
-      </el-form-item>  
+      </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{t('common.search')}}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{t('common.reset')}}</el-button>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.search') }}</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
       </el-form-item>
     </el-form>
-
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
-        <el-tabs class="tab-box" v-model="activeName" type="card"  @tab-click="switchTab">
-          <el-tab-pane :label="t('public.all')" :name="0" />
-          <el-tab-pane :label="item.name" :name="item.id" :key="idx" v-for="(item,idx) in cateList" />
-        </el-tabs>
-        <el-form-item :label="t('mall.desktopStatus')" >
-          <el-radio-group v-model="queryParams.deskStatus" size="large"  fill="#FF1493" @change="queryStatus">
-            <el-radio-button label="empty">{{t('mall.idle')}}</el-radio-button>
-            <el-radio-button label="ing">{{t('mall.dining')}}</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-row :gutter="24" v-if="deskList.length > 0">
-          <el-col :span="4" v-for="(desk,k) in deskList" :key="k">
-            <div >
-              <el-card class="box-card" :body-style="queryParams.deskStatus == 'empty' ? {background:'#8D9095'} : {background:'#F56C6C'}">
-                <template #header>
-                  <div class="card-header" style="text-align:center;display:flex;justify-content:space-between;">
-                    <span style="font-size:14px">{{ desk.shopName}}</span>
-                    <span style="cursor:pointer;"> <Icon icon="ep:calendar" :size="20" @click="openForm(desk)" /></span>
-                  </div>
-                </template>
-                <template #default>
-                  <div style="color:#ffffff;text-align:center;">
-                    <div>
-                      <div style="font-size:36px;font-weight: bolder;">{{ desk.number }}</div>
-                      <div style="font-size:20px;font-weight: bolder;" v-if="queryParams.deskStatus == 'empty'">{{t('mall.idle')}}</div>
-                      <div style="font-size:20px;font-weight: bolder;" v-else>{{t('mall.dining')}}</div>
-                    </div>
-                  </div>
-                </template>
-                <template #footer>
-                  <div style="text-align:center">{{ desk.lastOrderTime ? formatPast(desk.lastOrderTime) + t('mall.placeAnOrder') : t('mall.neverPlacedAnOrder') }}</div>
-              </template>
-              </el-card>
-            </div>
-          </el-col>
-        </el-row>
-        <el-empty :description="t('mall.noTableData')" v-else />
+    <el-tabs class="tab-box" v-model="activeName" type="card" @tab-click="switchTab">
+      <el-tab-pane :label="t('public.all')" :name="0" />
+      <el-tab-pane :label="item.name" :name="item.id" :key="idx" v-for="(item, idx) in cateList" />
+    </el-tabs>
+    <el-form-item :label="t('mall.desktopStatus')">
+      <el-radio-group v-model="queryParams.deskStatus" size="large" fill="#FF1493" @change="queryStatus">
+        <el-radio-button label="empty">{{ t('mall.idle') }}</el-radio-button>
+        <el-radio-button label="ing">{{ t('mall.dining') }}</el-radio-button>
+      </el-radio-group>
+    </el-form-item>
+    <el-row :gutter="24" v-if="deskList.length > 0">
+      <el-col :span="4" v-for="(desk, k) in deskList" :key="k">
+        <div>
+          <el-card class="box-card" :body-style="queryParams.deskStatus == 'empty' ? { background: '#47BC6B' } : { background: '#F56C6C' }">
+            <template #header>
+              <div class="card-header" style="text-align: center; display: flex; justify-content: space-between">
+                <span style="font-size: 14px">{{ desk.shopName }}</span>
+                <span style="cursor: pointer"> <Icon icon="ep:calendar" :size="20" @click="openForm(desk)" /></span>
+              </div>
+            </template>
+            <template #default>
+              <div style="color: #ffffff; text-align: center">
+                <div>
+                  <div style="font-size: 36px; font-weight: bolder">{{ desk.number }}</div>
+                  <div style="font-size: 20px; font-weight: bolder" v-if="queryParams.deskStatus == 'empty'">{{ t('mall.idle') }}</div>
+                  <div style="font-size: 20px; font-weight: bolder" v-else>{{ t('mall.dining') }}</div>
+                </div>
+              </div>
+            </template>
+            <template #footer>
+              <div style="text-align: center">{{
+                desk.lastOrderTime ? formatPast(desk.lastOrderTime) + t('mall.placeAnOrder') : t('mall.neverPlacedAnOrder')
+              }}</div>
+            </template>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <el-empty :description="t('mall.noTableData')" v-else />
   </ContentWrap>
 
   <OrderDetail ref="formRef4" />
@@ -81,7 +68,7 @@ import * as ShopDeskApi from '@/api/mall/desk/shopDesk'
 import OrderDetail from './OrderDetail2.vue'
 // import Order from '@/views/mall/desk/shopDesk/Order.vue'
 import type { TabsPaneContext } from 'element-plus'
-import { formatPast,formatDate } from '@/utils/formatTime'
+import { formatPast, formatDate } from '@/utils/formatTime'
 import { ShopDeskCategoryApi, ShopDeskCategoryVO } from '@/api/mall/desk/shopdeskcategory'
 const { t } = useI18n()
 
@@ -92,7 +79,7 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 50,
   orderStatus: 1,
-  deskStatus: "empty",
+  deskStatus: 'empty',
   type: 'work',
   shopId: undefined,
   cateId: undefined
@@ -105,25 +92,20 @@ const shopList = ref([])
 const deskList = ref([])
 const cateList = ref([])
 
-
-
 const switchTab = (tab: TabsPaneContext, event: Event) => {
-  if(tab.paneName > 0){
+  if (tab.paneName > 0) {
     queryParams.cateId = tab.paneName
     getDeskList()
-  }else{
+  } else {
     queryParams.cateId = null
     getDeskList()
   }
-  
 }
 const getShopList = async () => {
   try {
     const data = await ShopApi.getShopList()
     shopList.value = data
-
   } finally {
-    
   }
 }
 
@@ -131,14 +113,10 @@ const getCateList = async () => {
   try {
     const data = await ShopDeskCategoryApi.getShopDeskCategoryPage(queryParams)
     cateList.value = data.list
-
   } finally {
-    
   }
 }
 
-
-
 /** 查询列表 */
 const getDeskList = async () => {
   loading.value = true
@@ -150,13 +128,9 @@ const getDeskList = async () => {
   }
 }
 
-
-
-let interval02 = setInterval(function() {
+let interval02 = setInterval(function () {
   getDeskList()
-},5000);
-
-
+}, 5000)
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -179,9 +153,8 @@ const openForm = (desk) => {
 
 const queryStatus = (value) => {
   queryParams.deskStatus = value
-   //queryParams.deskStatus = tab.paneName
+  //queryParams.deskStatus = tab.paneName
   getDeskList()
- 
 }
 
 /** 初始化 **/
@@ -190,51 +163,49 @@ onMounted(() => {
   getShopList()
   getDeskList()
   getCateList()
-
 })
 
 onBeforeUnmount(() => {
   //clearInterval(interval01)
-  clearInterval(interval02);
+  clearInterval(interval02)
 })
 </script>
 
-<style scoped  >
- img {
-        height: 36px;
-        display: block;
-    }
-.tabBox{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center
-    }
-.tabBox_img{
-    width: 36px;
-    height: 36px;
-  }
-.tabBox_img img{
+<style scoped>
+img {
+  height: 36px;
+  display: block;
+}
+.tabBox {
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
 }
-.tabBox_tit{
-    width :60%;
-    font-size: 12px !important;
-    margin: 0 2px 0 10px;
-    letter-spacing: 1px;
-    padding: 5px 0;
-    box-sizing: border-box;
-    text-align: left;
-  }
-  .tabBox_pice{
-    width :30%;
-    font-size: 12px !important;
-    margin: 0 2px 0 10px;
-    letter-spacing: 1px;
-    padding: 5px 0;
-    box-sizing: border-box;
-    text-align: left;
-  }
-
-</style>
+.tabBox_img {
+  width: 36px;
+  height: 36px;
+}
+.tabBox_img img {
+  width: 100%;
+  height: 100%;
+}
+.tabBox_tit {
+  width: 60%;
+  font-size: 12px !important;
+  margin: 0 2px 0 10px;
+  letter-spacing: 1px;
+  padding: 5px 0;
+  box-sizing: border-box;
+  text-align: left;
+}
+.tabBox_pice {
+  width: 30%;
+  font-size: 12px !important;
+  margin: 0 2px 0 10px;
+  letter-spacing: 1px;
+  padding: 5px 0;
+  box-sizing: border-box;
+  text-align: left;
+}
+</style>

src/views/mall/order/storeOrder/index.vue

@@ -1,14 +1,14 @@
 <template>
-   <ContentWrap>
-    <el-tabs v-model="activeName"  @tab-click="handleClick">
-      <el-tab-pane :label="t('mall.allOrders')" name=""/>
-      <el-tab-pane :label="t('mall.dineInOrders')" name="desk"/>
-      <el-tab-pane :label="t('mall.takeoutOrders')" name="takeout"/>
-      <el-tab-pane :label="t('mall.selfPickupOrders')" name="takein"/>
-      <el-tab-pane :label="t('mall.reservationOrders')" name="due"/>
+  <ContentWrap>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane :label="t('mall.allOrders')" name="" />
+      <el-tab-pane :label="t('mall.dineInOrders')" name="desk" />
+      <el-tab-pane :label="t('mall.takeoutOrders')" name="takeout" />
+      <el-tab-pane :label="t('mall.selfPickupOrders')" name="takein" />
+      <el-tab-pane :label="t('mall.reservationOrders')" name="due" />
     </el-tabs>
-    <el-form-item :label="`${t('mall.orderStatus')}：`" >
-      <el-radio-group v-model="orderStatus" size="large"  fill="#DC143C" @change="queryOrderStatus" v-if="queryParams.orderType != 'due'">
+    <el-form-item :label="`${t('mall.orderStatus')}：`">
+      <el-radio-group v-model="orderStatus" size="large" fill="#DC143C" @change="queryOrderStatus" v-if="queryParams.orderType != 'due'">
         <el-radio-button label="">{{ t('mall.all') }}</el-radio-button>
         <el-radio-button :label="0">{{ t('mall.unpaid') }}</el-radio-button>
         <el-radio-button :label="1">{{ t('mall.pendingOrder') }}</el-radio-button>
@@ -18,32 +18,26 @@
         <el-radio-button label="5">{{ t('mall.refundOrders') }}</el-radio-button>
         <el-radio-button label="6">{{ t('mall.deleted') }}</el-radio-button>
       </el-radio-group>
-      <el-radio-group v-model="orderStatus" size="large"  fill="#DC143C" @change="queryOrderStatus" v-else>
-        <el-radio-button label="">{{t('mall.all')}}</el-radio-button>
-        <el-radio-button label="1">{{t('mall.reserving')}}</el-radio-button>
-        <el-radio-button label="2">{{t('mall.cancelled')}}</el-radio-button>
-        <el-radio-button label="3">{{t('mall.completed')}}</el-radio-button>
+      <el-radio-group v-model="orderStatus" size="large" fill="#DC143C" @change="queryOrderStatus" v-else>
+        <el-radio-button label="">{{ t('mall.all') }}</el-radio-button>
+        <el-radio-button label="1">{{ t('mall.reserving') }}</el-radio-button>
+        <el-radio-button label="2">{{ t('mall.cancelled') }}</el-radio-button>
+        <el-radio-button label="3">{{ t('mall.completed') }}</el-radio-button>
       </el-radio-group>
     </el-form-item>
-     <el-form-item :label="`${t('mall.paymentMethod')}：`" >
-      <el-radio-group v-model="payStatus" size="large"  fill="#FF1493" @change="queryPayStatus">
-        <el-radio-button label="">{{t('mall.all')}}</el-radio-button>
-        <el-radio-button label="weixin">{{t('mall.wechatPayment')}}</el-radio-button>
-        <el-radio-button label="alipay">{{t('mall.alipayPayment')}}</el-radio-button>
-        <el-radio-button label="yue">{{t('mall.balancePayment')}}</el-radio-button>
-        <el-radio-button label="cash">{{t('mall.cashPayment')}}</el-radio-button>
+    <el-form-item :label="`${t('mall.paymentMethod')}：`">
+      <el-radio-group v-model="payStatus" size="large" fill="#FF1493" @change="queryPayStatus">
+        <el-radio-button label="">{{ t('mall.all') }}</el-radio-button>
+        <el-radio-button label="weixin">{{ t('mall.wechatPayment') }}</el-radio-button>
+        <el-radio-button label="alipay">{{ t('mall.alipayPayment') }}</el-radio-button>
+        <el-radio-button label="yue">{{ t('mall.balancePayment') }}</el-radio-button>
+        <el-radio-button label="cash">{{ t('mall.cashPayment') }}</el-radio-button>
       </el-radio-group>
     </el-form-item>
   </ContentWrap>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
       <el-form-item :label="t('mall.orderNumber1')" prop="orderId">
         <el-input
           v-model="queryParams.orderId"
@@ -83,10 +77,10 @@
           class="!w-240px"
         />
       </el-form-item>
-     
+
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{t('common.search')}}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{t('common.reset')}}</el-button>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.search') }}</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
         <!-- <el-button
           type="success"
           plain
@@ -98,7 +92,6 @@
         </el-button> -->
       </el-form-item>
     </el-form>
-    
   </ContentWrap>
 
   <!-- 列表 -->
@@ -108,7 +101,7 @@
       <el-table-column :label="t('mall.store')" align="center" prop="shopName" width="100" />
       <el-table-column :label="t('mall.pickupNumber')" align="center" prop="numberId">
         <template #default="scope">
-          <span v-if="scope.row.numberId">{{scope.row.numberId}}</span>
+          <span v-if="scope.row.numberId">{{ scope.row.numberId }}</span>
           <span v-else>--</span>
         </template>
       </el-table-column>
@@ -116,157 +109,150 @@
       <el-table-column :label="t('mall.orderNumber')" align="center" prop="orderId" width="240">
         <template #default="scope">
           <span>
-            <el-tag class="ml-2" type="danger" v-if="scope.row.orderType=='desk'">{{t('mall.dineIn')}}</el-tag>
-            <el-tag class="ml-2" type="danger" v-if="scope.row.orderType=='takeout'">{{t('mall.takeOut')}}</el-tag>
-            <el-tag class="ml-2" type="danger" v-if="scope.row.orderType=='takein'">{{t('mall.pickup')}}</el-tag>
-            <el-tag class="ml-2" type="danger" v-if="scope.row.orderType=='due'">{{t('mall.reservation')}}</el-tag>
-           {{ scope.row.orderId }}</span>
+            <el-tag class="ml-2" type="danger" v-if="scope.row.orderType == 'desk'">{{ t('mall.dineIn') }}</el-tag>
+            <el-tag class="ml-2" type="danger" v-if="scope.row.orderType == 'takeout'">{{ t('mall.takeOut') }}</el-tag>
+            <el-tag class="ml-2" type="danger" v-if="scope.row.orderType == 'takein'">{{ t('mall.pickup') }}</el-tag>
+            <el-tag class="ml-2" type="danger" v-if="scope.row.orderType == 'due'">{{ t('mall.reservation') }}</el-tag>
+            {{ scope.row.orderId }}</span
+          >
         </template>
       </el-table-column>
-      <el-table-column :label="t('mall.userIdNickname')" align="center"  width="120" >
+      <el-table-column :label="t('mall.userIdNickname')" align="center" width="120">
         <template #default="scope">
           <span>{{ scope.row.uid }}|{{ scope.row.userRespVO ? scope.row.userRespVO.nickname : t('public.none') }}</span>
         </template>
       </el-table-column>
       <el-table-column :label="t('mall.userNamePhone')" align="center" prop="realName" width="150">
         <template #default="scope">
-          <span v-if="scope.row.orderType == 'takeout' || scope.row.orderType == 'due'">{{ scope.row.realName }}|{{ scope.row.userPhone }}</span>
+          <span v-if="scope.row.orderType == 'takeout' || scope.row.orderType == 'due'"
+            >{{ scope.row.realName }}|{{ scope.row.userPhone }}</span
+          >
           <span v-else>{{ t('public.none') }}</span>
         </template>
       </el-table-column>
       <el-table-column :label="t('mall.productInfo')" align="center" prop="userAddress" width="350">
         <template #default="scope">
           <block v-if="scope.row.orderType != 'due'">
-            <div class="tabBox" v-for="(val, i ) in scope.row.storeOrderCartInfoDOList" :key="i">
-                <div class="tabBox_img">
-                    <img :src="val.image" />
-                </div>
-                <span class="tabBox_tit">{{ val.title + ' - ' }}{{val.spec}}</span>
-                <span class="tabBox_pice">{{ '￥'+ val.price + ' x '+ val.number}}</span>
+            <div class="tabBox" v-for="(val, i) in scope.row.storeOrderCartInfoDOList" :key="i">
+              <div class="tabBox_img">
+                <el-image v-if="val.image" :src="getImageUrl(val.image)" :preview-src-list="[getImageUrl(val.image)]" class="table-img" />
+              </div>
+              <span class="tabBox_tit">{{ val.title + ' - ' }}{{ val.spec }}</span>
+              <span class="tabBox_pice">{{ '￥' + val.price + ' x ' + val.number }}</span>
             </div>
           </block>
           <block v-else>
             <div class="tabBox">
-                <div class="tabBox_img">
-                    <img :src="scope.row.shopDeskDO.image" />
-                </div>
-                <span class="tabBox_tit">{{ scope.row.shopDeskDO.title + ' - ' }} 桌号:{{scope.row.shopDeskDO.number}}</span>
-                <span class="tabBox_pice">￥0.00 x1</span>
+              <div class="tabBox_img">
+                <el-image
+                  v-if="scope.row.shopDeskDO.image"
+                  :src="getImageUrl(scope.row.shopDeskDO.image)"
+                  :preview-src-list="[getImageUrl(scope.row.shopDeskDO.image)]"
+                  class="table-img"
+                />
+              </div>
+              <span class="tabBox_tit">{{ scope.row.shopDeskDO.title + ' - ' }} 桌号:{{ scope.row.shopDeskDO.number }}</span>
+              <span class="tabBox_pice">￥0.00 x1</span>
             </div>
           </block>
         </template>
       </el-table-column>
       <el-table-column :label="t('mall.actualPayment')" align="center">
         <template #default="scope">
-         <span v-if="scope.row.paid == 1">{{ scope.row.payPrice }}</span>
-         <span v-else>未支付</span>
+          <span v-if="scope.row.paid == 1">{{ scope.row.payPrice }}</span>
+          <span v-else>未支付</span>
         </template>
       </el-table-column>
       <el-table-column :label="t('mall.paymentMethod')" align="center">
         <template #default="scope">
           <span v-if="scope.row.paid == 1">
-           <span v-if="scope.row.payType=='yue'">{{t('mall.balancePayment')}}</span>
-           <span v-if="scope.row.payType=='weixin'">{{t('mall.wechatPayment')}}</span>
-           <span v-if="scope.row.payType=='alipay'">{{t('mall.alipayPayment')}}</span>
-           <span v-if="scope.row.payType=='cash'">{{t('mall.cashPayment')}}</span>
+            <span v-if="scope.row.payType == 'yue'">{{ t('mall.balancePayment') }}</span>
+            <span v-if="scope.row.payType == 'weixin'">{{ t('mall.wechatPayment') }}</span>
+            <span v-if="scope.row.payType == 'alipay'">{{ t('mall.alipayPayment') }}</span>
+            <span v-if="scope.row.payType == 'cash'">{{ t('mall.cashPayment') }}</span>
           </span>
           <span v-else>--</span>
         </template>
       </el-table-column>
       <el-table-column :label="t('mall.purchaseType')" align="center">
         <template #default="scope">
-           <span v-if="scope.row.orderType=='takeout'">{{t('mall.takeOut')}}</span>
-           <span v-if="scope.row.orderType=='takein'">{{t('mall.pickup')}}</span>
-           <span v-if="scope.row.orderType=='deak'">{{t('mall.dineIn')}}</span>
-           <span v-if="scope.row.orderType=='due'">{{t('mall.reservation')}}</span>
+          <span v-if="scope.row.orderType == 'takeout'">{{ t('mall.takeOut') }}</span>
+          <span v-if="scope.row.orderType == 'takein'">{{ t('mall.pickup') }}</span>
+          <span v-if="scope.row.orderType == 'deak'">{{ t('mall.dineIn') }}</span>
+          <span v-if="scope.row.orderType == 'due'">{{ t('mall.reservation') }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        :label="t('mall.reservationPickupTime')"
-        align="center"
-        prop="getTime"
-        :formatter="dateFormatter"
-        width="120"
-      />
-      <el-table-column
-        :label="t('mall.paymentTime')"
-        align="center"
-        prop="payTime"
-        :formatter="dateFormatter"
-        width="120"
-      />
-      <el-table-column :label="t('mall.orderStatus')" align="center" prop="statusStr"> 
+      <el-table-column :label="t('mall.reservationPickupTime')" align="center" prop="getTime" :formatter="dateFormatter" width="120" />
+      <el-table-column :label="t('mall.paymentTime')" align="center" prop="payTime" :formatter="dateFormatter" width="120" />
+      <el-table-column :label="t('mall.orderStatus')" align="center" prop="statusStr">
         <template #default="scope">
-           <span v-if="scope.row.orderType=='due'">
-            <span v-if="scope.row.dueStatus == 1">{{t('mall.reserving')}}</span>
-            <span v-else-if="scope.row.dueStatus == 2">{{t('mall.cancelled')}}</span>
-            <span v-else>{{t('mall.completed')}}</span>
+          <span v-if="scope.row.orderType == 'due'">
+            <span v-if="scope.row.dueStatus == 1">{{ t('mall.reserving') }}</span>
+            <span v-else-if="scope.row.dueStatus == 2">{{ t('mall.cancelled') }}</span>
+            <span v-else>{{ t('mall.completed') }}</span>
           </span>
-           <span v-else>{{scope.row.statusStr}}</span>
+          <span v-else>{{ scope.row.statusStr }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        :label="t('public.addTime')"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="120"
-      />
+      <el-table-column :label="t('public.addTime')" align="center" prop="createTime" :formatter="dateFormatter" width="120" />
       <el-table-column :label="t('public.operate')" align="center" fixed="right" width="150">
         <template #default="scope">
           <div class="flex justify-center items-center">
-          <el-button
-            v-if = "scope.row.statusStr == '未支付'"
-            link
-            type="primary"
-            @click="openForm('updateOrder', scope.row.id)"
-            v-hasPermi="['order:store-order:update']"
-          >
-          {{t('action.edit')}}
-          </el-button>
-          <el-button
-            v-if = "scope.row.statusStr == '未发货'"
-            link
-            type="primary"
-            @click="openForm('orderSend', scope.row.id)"
-            v-hasPermi="['order:store-order:update']"
-          >
-            {{t('mall.issueOrder')}}
-          </el-button>
-          <el-button
-            v-if = "scope.row.statusStr == '退款中'"
-            link
-            type="primary"
-            @click="openForm('refundOrder', scope.row.id)"
-            v-hasPermi="['order:store-order:update']"
-          >
-            {{t('mall.confirmRefund')}}
-          </el-button>
-          <el-dropdown>
-            <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> {{t('public.more')}}</el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item v-if = "scope.row.dueStatus == 1" @click="dueCancel(scope.row.id)">{{t('mall.cancelReservation')}}</el-dropdown-item>
-                <el-dropdown-item v-if = "scope.row.statusStr == '未支付'" @click="handlePay(scope.row.id)">{{t('mall.confirmPayment')}}</el-dropdown-item>
-                <el-dropdown-item @click="openForm('orderDetail', scope.row.id)">{{t('mall.orderDetails')}}</el-dropdown-item>
-                <el-dropdown-item @click="openForm('orderRecord', scope.row.id)">{{t('mall.orderRecords')}}</el-dropdown-item>
-                <el-dropdown-item @click="handleDelete(scope.row.id)">{{t('mall.deleteOrder')}}</el-dropdown-item>
-                <el-dropdown-item v-if = "scope.row.statusStr != '未支付'" @click="openForm('remark', scope.row.id)">{{t('mall.orderRemark')}}</el-dropdown-item>
-                <el-dropdown-item v-if = "scope.row.statusStr == '待收货'" @click="handleTake(scope.row.id)">{{t('mall.backendReceipt')}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+            <el-button
+              v-if="scope.row.statusStr == '未支付'"
+              link
+              type="primary"
+              @click="openForm('updateOrder', scope.row.id)"
+              v-hasPermi="['order:store-order:update']"
+            >
+              {{ t('action.edit') }}
+            </el-button>
+            <el-button
+              v-if="scope.row.statusStr == '未发货'"
+              link
+              type="primary"
+              @click="openForm('orderSend', scope.row.id)"
+              v-hasPermi="['order:store-order:update']"
+            >
+              {{ t('mall.issueOrder') }}
+            </el-button>
+            <el-button
+              v-if="scope.row.statusStr == '退款中'"
+              link
+              type="primary"
+              @click="openForm('refundOrder', scope.row.id)"
+              v-hasPermi="['order:store-order:update']"
+            >
+              {{ t('mall.confirmRefund') }}
+            </el-button>
+            <el-dropdown>
+              <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> {{ t('public.more') }}</el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-if="scope.row.dueStatus == 1" @click="dueCancel(scope.row.id)">{{
+                    t('mall.cancelReservation')
+                  }}</el-dropdown-item>
+                  <el-dropdown-item v-if="scope.row.statusStr == '未支付'" @click="handlePay(scope.row.id)">{{
+                    t('mall.confirmPayment')
+                  }}</el-dropdown-item>
+                  <el-dropdown-item @click="openForm('orderDetail', scope.row.id)">{{ t('mall.orderDetails') }}</el-dropdown-item>
+                  <el-dropdown-item @click="openForm('orderRecord', scope.row.id)">{{ t('mall.orderRecords') }}</el-dropdown-item>
+                  <el-dropdown-item @click="handleDelete(scope.row.id)">{{ t('mall.deleteOrder') }}</el-dropdown-item>
+                  <el-dropdown-item v-if="scope.row.statusStr != '未支付'" @click="openForm('remark', scope.row.id)">{{
+                    t('mall.orderRemark')
+                  }}</el-dropdown-item>
+                  <el-dropdown-item v-if="scope.row.statusStr == '待收货'" @click="handleTake(scope.row.id)">{{
+                    t('mall.backendReceipt')
+                  }}</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </div>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
@@ -292,6 +278,8 @@ import OrderDetail from './OrderDetail.vue'
 import OrderRecord from './OrderRecord.vue'
 import type { TabsPaneContext } from 'element-plus'
 import MailLogDetail from '@/views/system/mail/log/MailLogDetail.vue'
+import { convertImageUrl } from '@/utils/image-helper' // 导入图片URL处理工具
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -301,14 +289,13 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  orderId: "",
-  realName: "",
-  userPhone: "",
+  orderId: '',
+  realName: '',
+  userPhone: '',
   createTime: [],
-  orderStatus: "",
-  payStatus: "",
-  orderType: ""
-
+  orderStatus: '',
+  payStatus: '',
+  orderType: ''
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
@@ -319,7 +306,7 @@ const payStatus = ref('')
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab.paneName, event)
-  queryParams.orderType = tab.paneName 
+  queryParams.orderType = tab.paneName
   getList()
 }
 
@@ -345,8 +332,6 @@ const getList = async () => {
   }
 }
 
-
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -372,19 +357,17 @@ const openForm = (type: string, id?: number) => {
     formRef.value.open(type, id)
   } else if (type == 'orderSend') {
     formRef1.value.open(type, id)
-  }else if (type == 'sendInfo') {
+  } else if (type == 'sendInfo') {
     formRef2.value.open(type, id)
-  }else if (type == 'remark') {
+  } else if (type == 'remark') {
     formRef3.value.open(type, id)
-  }else if (type == 'orderDetail') {
+  } else if (type == 'orderDetail') {
     formRef4.value.open(type, id)
-  }else if (type == 'orderRecord') {
+  } else if (type == 'orderRecord') {
     formRef5.value.open(type, id)
-  }else if (type == 'refundOrder') {
+  } else if (type == 'refundOrder') {
     formRef6.value.open(type, id)
   }
-
-  
 }
 
 /** 删除按钮操作 */
@@ -454,48 +437,52 @@ const handleExport = async () => {
   }
 }
 
+/** 添加图片URL转换方法 */
+const getImageUrl = (url) => {
+  return convertImageUrl(url)
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()
 })
 </script>
 
-<style scoped  >
- img {
-        height: 36px;
-        display: block;
-    }
-.tabBox{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center
-    }
-.tabBox_img{
-    width: 36px;
-    height: 36px;
-  }
-.tabBox_img img{
+<style scoped>
+img {
+  height: 36px;
+  display: block;
+}
+.tabBox {
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
 }
-.tabBox_tit{
-    width :60%;
-    font-size: 12px !important;
-    margin: 0 2px 0 10px;
-    letter-spacing: 1px;
-    padding: 5px 0;
-    box-sizing: border-box;
-    text-align: left;
-  }
-  .tabBox_pice{
-    width :30%;
-    font-size: 12px !important;
-    margin: 0 2px 0 10px;
-    letter-spacing: 1px;
-    padding: 5px 0;
-    box-sizing: border-box;
-    text-align: left;
-  }
-
-</style>
+.tabBox_img {
+  width: 36px;
+  height: 36px;
+}
+.tabBox_img img {
+  width: 100%;
+  height: 100%;
+}
+.tabBox_tit {
+  width: 60%;
+  font-size: 12px !important;
+  margin: 0 2px 0 10px;
+  letter-spacing: 1px;
+  padding: 5px 0;
+  box-sizing: border-box;
+  text-align: left;
+}
+.tabBox_pice {
+  width: 30%;
+  font-size: 12px !important;
+  margin: 0 2px 0 10px;
+  letter-spacing: 1px;
+  padding: 5px 0;
+  box-sizing: border-box;
+  text-align: left;
+}
+</style>

src/views/mall/order/storeOrder/work.vue

@@ -1,137 +1,122 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-    <el-form-item :label="t('work.selectStore')" prop="orderId">
-      <el-select
-          v-model="queryParams.shopId"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in shopList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+      <el-form-item :label="t('work.selectStore')" prop="orderId">
+        <el-select v-model="queryParams.shopId" class="!w-240px">
+          <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
-      </el-form-item>  
+      </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{t('common.search')}}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{t('common.reset')}}</el-button>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.search') }}</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
       </el-form-item>
       <el-form-item label="">
         <el-switch v-model="isNotice" :active-text="t('work.orderReminderOn')" :inactive-text="t('work.orderReminderOff')" />
-      </el-form-item> 
+      </el-form-item>
     </el-form>
-
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
-      <audio id="buttonAudio"  src="/voice_new_order.mp3" v-show="false" controls></audio>
-      <el-tabs v-model="activeName"  @tab-click="handleClick">
-          <el-tab-pane :label="t('work.recentOrders')" name="first">
-            <el-row :gutter="24" v-if="list.length > 0">
-              <el-col :span="6" v-for="(order,k) in list" :key="k">
-                <div >
-                  <el-card class="box-card" :body-style="{ background:'#0a5ba6' }">
-                    <template #header>
-                      <div class="card-header" style="text-align:center">
-                        {{t('work.orderId')}}:{{ order.orderId }}
-                      </div>
-                    </template>
-                    <template #default>
-                      <div style="color:#ffffff;text-align:center;">
-                        <div v-if="order.orderType == 'takeout'">
-                          <div style="font-size:20px;font-weight: bolder;">{{t('work.takeout')}}</div>
-                          <div style="margin-top:5px">{{t('work.contactNumber')}}:{{ order.userPhone }}</div>
-                        </div>
-                        <div v-else-if="order.orderType == 'takein'">
-                          <div style="font-size:20px;font-weight: bolder;">{{t('work.pickUp')}}</div>
-                          <div style="margin-top:5px">{{t('work.pickUpNumber')}}:{{ order.numberId }}</div>
-                        </div>
-                        <div v-else>
-                          <div style="font-size:20px;font-weight: bolder;">{{t('work.dineIn')}}</div>
-                          <div style="margin-top:5px">{{t('work.tableNumber')}}:{{ order.deskNumber }},{{t('work.numberPeople')}}:{{ order.deskPeople }}</div>
-                        </div>
-                        <div style="font-size:20px;font-weight: bolder;">
-                          <span v-if="order.storeOrderCartInfoDOList.length > 1">
-                            {{t('work.multipleDishesPleaseCheckDetails')}}
-                          </span>
-                          <span v-else>{{ order.storeOrderCartInfoDOList[0].title }}×{{ order.storeOrderCartInfoDOList[0].number }}
-                            {{ order.storeOrderCartInfoDOList[0].spec }}
-                          </span>
-                        </div>
-                        
-                        <div style="margin-top:30px;">  
-                          <el-button
-                            type="primary"
-                            @click="openForm('orderDetail', order.id)"
-                            v-hasPermi="['order:store-order:update']"
-                          >{{t('common.detail')}}</el-button>
-                          <el-button
-                            type="primary"
-                            @click="openForm('orderSend', order.id)"
-                            v-hasPermi="['order:store-order:update']"
-                          >{{t('work.order')}}</el-button>
-                        </div>
-                      </div>
-                    </template>
-                    <template #footer>
-                      <div style="text-align:center">{{t('work.orderTime')}}:{{ formatDate(order.createTime) }}</div>
-                  </template>
-                  </el-card>
-                </div>
-              </el-col>
-            </el-row>
-            <el-empty :description="t('work.noOrderData')" v-else />
-          </el-tab-pane>
-          <!-- <el-tab-pane label="桌台数据" name="second"> 
-            <el-form-item label="桌面状态：" >
-              <el-radio-group v-model="queryParams.deskStatus" size="large"  fill="#FF1493" @change="queryStatus">
-                <el-radio-button label="empty">空闲中</el-radio-button>
-                <el-radio-button label="ing">就餐中</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-            <el-row :gutter="24">
-              <el-col :span="4" v-for="(desk,k) in deskList" :key="k">
-                <div >
-                  <el-card class="box-card" :body-style="queryParams.deskStatus == 'empty' ? {background:'#8D9095'} : {background:'#F56C6C'}">
-                    <template #header>
-                      <div class="card-header" style="text-align:center;display:flex;justify-content:space-between;">
-                        <span style="font-size:14px">{{ desk.shopName}}</span>
-                        <span style="cursor:pointer;"> <Icon icon="ep:calendar" :size="20" @click="openForm('order', desk.id)" /></span>
-                      </div>
-                    </template>
-                    <template #default>
-                      <div style="color:#ffffff;text-align:center;">
-                        <div>
-                          <div style="font-size:36px;font-weight: bolder;">{{ desk.number }}</div>
-                          <div style="font-size:20px;font-weight: bolder;" v-if="queryParams.deskStatus == 'empty'">空闲中</div>
-                          <div style="font-size:20px;font-weight: bolder;" v-else>就餐中</div>
-                        </div>
-                      </div>
-                    </template>
-                    <template #footer>
-                      <div style="text-align:center">{{ desk.lastOrderTime ? formatPast(desk.lastOrderTime) + '下单' : '从未下单' }}</div>
-                  </template>
-                  </el-card>
-              </div>
-              </el-col>
-            </el-row>
-          </el-tab-pane> -->
-      </el-tabs> 
+    <audio id="buttonAudio" src="/voice_new_order.mp3" v-show="false" controls></audio>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane :label="t('work.recentOrders')" name="first">
+        <el-row :gutter="24" v-if="list.length > 0">
+          <el-col :span="6" v-for="(order, k) in list" :key="k">
+            <div>
+              <el-card class="box-card" :body-style="{ background: '#0a5ba6' }">
+                <template #header>
+                  <div class="card-header" style="text-align: center"> {{ t('work.orderId') }}:{{ order.orderId }} </div>
+                </template>
+                <template #default>
+                  <div style="color: #ffffff; text-align: center">
+                    <div v-if="order.orderType == 'takeout'">
+                      <div style="font-size: 20px; font-weight: bolder">{{ t('work.takeout') }}</div>
+                      <div style="margin-top: 5px">{{ t('work.contactNumber') }}:{{ order.userPhone }}</div>
+                    </div>
+                    <div v-else-if="order.orderType == 'takein'">
+                      <div style="font-size: 20px; font-weight: bolder">{{ t('work.pickUp') }}</div>
+                      <div style="margin-top: 5px">{{ t('work.pickUpNumber') }}:{{ order.numberId }}</div>
+                    </div>
+                    <div v-else>
+                      <div style="font-size: 20px; font-weight: bolder">{{ t('work.dineIn') }}</div>
+                      <div style="margin-top: 5px"
+                        >{{ t('work.tableNumber') }}:{{ order.deskNumber }},{{ t('work.numberPeople') }}:{{ order.deskPeople }}</div
+                      >
+                    </div>
+                    <div style="font-size: 20px; font-weight: bolder">
+                      <span v-if="order.storeOrderCartInfoDOList.length > 1">
+                        {{ t('work.multipleDishesPleaseCheckDetails') }}
+                      </span>
+                      <span v-else
+                        >{{ order.storeOrderCartInfoDOList[0].title }}×{{ order.storeOrderCartInfoDOList[0].number }}
+                        {{ order.storeOrderCartInfoDOList[0].spec }}
+                      </span>
+                    </div>
+
+                    <div style="margin-top: 30px">
+                      <el-button type="primary" @click="openForm('orderDetail', order.id)" v-hasPermi="['order:store-order:update']">{{
+                        t('common.detail')
+                      }}</el-button>
+                      <el-button type="primary" @click="openForm('orderSend', order.id)" v-hasPermi="['order:store-order:update']">{{
+                        t('work.order')
+                      }}</el-button>
+                    </div>
+                  </div>
+                </template>
+                <template #footer>
+                  <div style="text-align: center">{{ t('work.orderTime') }}:{{ formatDate(order.createTime) }}</div>
+                </template>
+              </el-card>
+            </div>
+          </el-col>
+        </el-row>
+        <el-empty :description="t('work.noOrderData')" v-else />
+      </el-tab-pane>
+      <el-tab-pane label="桌台数据" name="second">
+        <el-form-item label="桌面状态：">
+          <el-radio-group v-model="queryParams.deskStatus" size="large" fill="#FF1493" @change="queryStatus">
+            <el-radio-button label="empty">空闲中</el-radio-button>
+            <el-radio-button label="ing">就餐中</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-row :gutter="24">
+          <el-col :span="4" v-for="(desk, k) in deskList" :key="k">
+            <div>
+              <el-card
+                class="box-card"
+                :body-style="queryParams.deskStatus == 'empty' ? { background: '#8D9095' } : { background: '#F56C6C' }"
+              >
+                <template #header>
+                  <div class="card-header" style="text-align: center; display: flex; justify-content: space-between">
+                    <span style="font-size: 14px">{{ desk.shopName }}</span>
+                    <span style="cursor: pointer"> <Icon icon="ep:calendar" :size="20" @click="openForm('order', desk.id)" /></span>
+                  </div>
+                </template>
+                <template #default>
+                  <div style="color: #ffffff; text-align: center">
+                    <div>
+                      <div style="font-size: 36px; font-weight: bolder">{{ desk.number }}</div>
+                      <div style="font-size: 20px; font-weight: bolder" v-if="queryParams.deskStatus == 'empty'">空闲中</div>
+                      <div style="font-size: 20px; font-weight: bolder" v-else>就餐中</div>
+                    </div>
+                  </div>
+                </template>
+                <template #footer>
+                  <div style="text-align: center">{{ desk.lastOrderTime ? formatPast(desk.lastOrderTime) + '下单' : '从未下单' }}</div>
+                </template>
+              </el-card>
+            </div>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
   </ContentWrap>
 
   <OrderSend ref="formRef1" @success="getList" />
   <OrderDetail ref="formRef4" />
-  <Order ref="order"  />
+  <Order ref="order" />
 </template>
 
 <script setup lang="ts" name="StoreOrder">
@@ -142,7 +127,7 @@ import OrderSend from './OrderSend.vue'
 import OrderDetail from './OrderDetail.vue'
 import Order from '@/views/mall/desk/shopDesk/Order.vue'
 import type { TabsPaneContext } from 'element-plus'
-import { formatPast,formatDate } from '@/utils/formatTime'
+import { formatPast, formatDate } from '@/utils/formatTime'
 const { t } = useI18n()
 
 const loading = ref(true) // 列表的加载中
@@ -152,7 +137,7 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 50,
   orderStatus: 1,
-  deskStatus: "empty",
+  deskStatus: 'empty',
   type: 'work',
   shopId: undefined
 })
@@ -163,19 +148,16 @@ const isNotice = ref(true)
 const shopList = ref([])
 const deskList = ref([])
 
-
-
-const  getUrlValue = () => {
+const getUrlValue = () => {
   const url = new URL(decodeURIComponent(location.href))
-  let urlArr = url.pathname.split("=")
-  if(urlArr.length == 2){
+  let urlArr = url.pathname.split('=')
+  if (urlArr.length == 2) {
     activeName.value = 'second'
   }
 }
 
 getUrlValue()
 
-
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab.paneName, event)
 }
@@ -184,9 +166,7 @@ const getShopList = async () => {
   try {
     const data = await ShopApi.getShopList()
     shopList.value = data
-
   } finally {
-    
   }
 }
 
@@ -214,18 +194,17 @@ const getDeskList = async () => {
   }
 }
 
-let interval01 = setInterval(function() {
+let interval01 = setInterval(function () {
   orderNotice()
-},4000);
+}, 4000)
 
-let interval02 = setInterval(function() {
+let interval02 = setInterval(function () {
   getList()
   //getDeskList()
-},5000);
-
+}, 5000)
 
 const orderNoticeVoice = () => {
-  if(isNotice.value){
+  if (isNotice.value) {
     ElNotification({
       title: t('work.newOrderNotification'),
       message: t('work.youHaveNewOrderPleaseCheckOut'),
@@ -233,16 +212,15 @@ const orderNoticeVoice = () => {
       duration: 1000
     })
     let buttonAudio = document.getElementById('buttonAudio')
-    buttonAudio.play().catch((err)=>{
+    buttonAudio.play().catch((err) => {
       console.log(err)
-    });
+    })
   }
-
 }
 
-const orderNotice = async() => {
+const orderNotice = async () => {
   const data = await StoreOrderApi.orderNoticeUrl()
-  if(data > 0){
+  if (data > 0) {
     orderNoticeVoice()
   }
 }
@@ -267,72 +245,67 @@ const order = ref()
 const openForm = (type: string, id?: number) => {
   if (type == 'orderSend') {
     formRef1.value.open(type, id)
-  }else if (type == 'orderDetail') {
+  } else if (type == 'orderDetail') {
     formRef4.value.open(type, id)
-  }else if(type == 'order'){
+  } else if (type == 'order') {
     order.value.open(type, id)
   }
-
-  
 }
 
 const queryStatus = (value) => {
   queryParams.deskStatus = value
-   //queryParams.deskStatus = tab.paneName
+  //queryParams.deskStatus = tab.paneName
   getDeskList()
- 
 }
 
 /** 初始化 **/
 onMounted(() => {
   getList()
   getShopList()
- // getDeskList()
-
+  // getDeskList()
 })
 
 onBeforeUnmount(() => {
   clearInterval(interval01)
-  clearInterval(interval02);
+  clearInterval(interval02)
 })
 </script>
 
-<style scoped  >
- img {
-        height: 36px;
-        display: block;
-    }
-.tabBox{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center
-    }
-.tabBox_img{
-    width: 36px;
-    height: 36px;
-  }
-.tabBox_img img{
+<style scoped>
+img {
+  height: 36px;
+  display: block;
+}
+.tabBox {
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
 }
-.tabBox_tit{
-    width :60%;
-    font-size: 12px !important;
-    margin: 0 2px 0 10px;
-    letter-spacing: 1px;
-    padding: 5px 0;
-    box-sizing: border-box;
-    text-align: left;
-  }
-  .tabBox_pice{
-    width :30%;
-    font-size: 12px !important;
-    margin: 0 2px 0 10px;
-    letter-spacing: 1px;
-    padding: 5px 0;
-    box-sizing: border-box;
-    text-align: left;
-  }
-
-</style>
+.tabBox_img {
+  width: 36px;
+  height: 36px;
+}
+.tabBox_img img {
+  width: 100%;
+  height: 100%;
+}
+.tabBox_tit {
+  width: 60%;
+  font-size: 12px !important;
+  margin: 0 2px 0 10px;
+  letter-spacing: 1px;
+  padding: 5px 0;
+  box-sizing: border-box;
+  text-align: left;
+}
+.tabBox_pice {
+  width: 30%;
+  font-size: 12px !important;
+  margin: 0 2px 0 10px;
+  letter-spacing: 1px;
+  padding: 5px 0;
+  box-sizing: border-box;
+  text-align: left;
+}
+</style>