fix image use convertImageUrl

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,145 @@
       <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="VITE_BASE_URL + 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">
+                <img :src="convertImageUrl(val.image)" />
+              </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">
+                <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>
           </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>
 
   <!-- 表单弹窗：添加/修改 -->
@@ -291,6 +272,7 @@ import StoreOrderRefund from './StoreOrderRefund.vue'
 import OrderDetail from './OrderDetail.vue'
 import OrderRecord from './OrderRecord.vue'
 import type { TabsPaneContext } from 'element-plus'
+import { convertImageUrl } from '@/utils/image-helper'
 import MailLogDetail from '@/views/system/mail/log/MailLogDetail.vue'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -301,14 +283,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 +300,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 +326,6 @@ const getList = async () => {
   }
 }
 
-
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -372,19 +351,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)
   }
-
-  
 }
 
 /** 删除按钮操作 */
@@ -460,42 +437,41 @@ onMounted(() => {
 })
 </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_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;
 }
-.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>