订单

src/api/mall/user.js

@@ -6,4 +6,24 @@ export const getMallOrderPage = async (params) => {
     url: '/app-api/trade/order/page',
     params
   })
+}
+
+// 获取订单详情
+export const getMallOrderDetail = async (id) => {
+  return request.get({
+    url: '/app-api/trade/order/get-detail',
+    params: {
+      id
+    }
+  })
+}
+
+// 确认收货
+export const receiveOrder = async (id) => {
+  return request.put({
+    url: '/app-api/trade/order/receive',
+    params: {
+      id
+    }
+  })
 }

src/hooks/web/useGoods.js

@@ -98,15 +98,15 @@ const VIDEO_SUFFIX_LIST = ['.avi', '.mp4'];
  */
 export function formatOrderColor(order) {
   if (order.status === 0) {
-    return 'info-color';
+    return 'color-333';
   }
   if (order.status === 10 || order.status === 20 || (order.status === 30 && !order.commentStatus)) {
-    return 'warning-color';
+    return 'color-warning';
   }
   if (order.status === 30 && order.commentStatus) {
-    return 'success-color';
+    return 'color-success';
   }
-  return 'danger-color';
+  return 'color-error';
 }
 
 /**

src/router/modules/recruit.js

@@ -89,6 +89,14 @@ const recruit = [
             }
           }
         ]
+      },
+      {
+        path: '/mall/user/order/detail/:id',
+        component: () => import('@/views/mall/user/order/detail.vue'),
+        show: true,
+        meta: {
+          title: '订单详情'
+        }
       }
     ]
   },

src/styles/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --zIndex-dialog: 999;
   --default-bgc: #f2f4f7;
@@ -28,6 +29,8 @@
   --el-text-color-regular: #333 !important;
   --el-fill-color-light: #f3f3f3 !important;
   --el-input-border: 1px solid #000 !important;
+  --el-color-info: #00897B !important;
+  --el-cascader-tag-background: #e2f0ef !important;
 }
 
 .color-222 {
@@ -86,6 +89,10 @@
   color: #fb8c00;
 }
 
+.color-success {
+  color: #4caf50;
+}
+
 .color-white {
   color: #fff;
 }
@@ -269,3 +276,27 @@
   font-size: 14px;
   opacity: .6;
 }
+
+/* 均匀间隔显示的文本 */
+.justified-text {
+  width: 70px;
+  /* 设定固定长度 */
+  text-align: justify;
+  /* 使文本两端对齐 */
+  text-justify: inter-word;
+  /* 为了兼容性 */
+  height: 100%;
+  line-height: 100%;
+}
+
+.justified-text:after {
+  content: '';
+  display: inline-block;
+  width: 100%;
+  /* 设定额外间隔 */
+}
+
+.l-s-10 {
+  letter-spacing: 10px;
+  margin-right: -10px;
+}

src/styles/index.scss

@@ -48,6 +48,7 @@
 .color-error { color: #fe574a; }
 .color-primary { color: #00897B; }
 .color-warning { color: #fb8c00; }
+.color-success { color: #4caf50; }
 .color-white { color: #fff; }
 
 .font-size-12 { font-size: 12px; }

src/views/mall/user/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Navbar class="my-3 white-bgc" />
+  <Navbar class="mb-3" />
   <div class="d-flex parent default-width mb-5">
     <v-card class="left">
       <v-list color="primary">

src/views/mall/user/order/detail.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <Navbar class="mb-3" />
+    <v-card class="default-width card-box mb-5 pa-5">
+      <h3 class="mb-3">订单详情</h3>
+      <v-divider></v-divider>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'mall-user-order-detail'})
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { getMallOrderDetail } from '@/api/mall/user'
+import Snackbar from '@/plugins/snackbar'
+import Navbar from '../../components/navbar.vue'
+
+const router = useRouter()
+const { id } = router.currentRoute.value.params
+const order = ref({})
+
+onMounted(async () =>{
+  if (!id) {
+    Snackbar.warning('参数错误')
+    setTimeout(() => {
+      router.go(-1)
+    }, 1000)
+    return
+  }
+  const data = await getMallOrderDetail(id)
+  order.value = data
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:modelValue="getOrderPage">
+    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:modelValue="queryParams.pageNo = 1, getOrderPage()">
       <v-tab v-for="(val, i) in tabList" :key="i" :value="val.value">{{ val.title }}</v-tab>
     </v-tabs>
     <div v-if="orderList.length" class="mt-3">
@@ -10,17 +10,18 @@
             <span>订单号：{{ val.no }}</span>
             <span class="ml-5">{{ timesTampChange(val.createTime) }}</span>
           </div>
-          <div class="text-end color-warning" style="flex: 1">
-            待发货
+          <div class="text-end color-warning" :class="formatOrderColor(val)" style="flex: 1">
+            {{ formatOrderStatus(val) }}
           </div>
         </div>
-        <div v-for="k in val.items" :key="k.id" class="order-item-goods px-3 pt-3">
-          <div class="d-flex">
+        <div v-for="k in val.items" :key="k.id" class="order-item-goods px-3 pt-3 cursor-pointer" @click="handleDetail(val)">
+          <div class="d-flex align-center">
             <div style="width: 90px; height: 90px">
               <v-img :src="k.picUrl"></v-img>
             </div>
             <div class="ml-5">
               <p class="font-size-15">{{ k.spuName }}</p>
+              <p class="color-999 font-size-14">{{ k.properties.map((property) => property.valueName).join(' ') }}</p>
               <p>
                 <span class="color-333">￥{{ fen2yuan(k.price) }}</span>
                 <span v-if="k.count" class="color-999 font-size-13 ml-1">x {{ k.count }}</span>
@@ -29,8 +30,18 @@
           </div>
           <v-divider class="mt-3"></v-divider>
         </div>
-        <div class="text-end pa-3 font-size-13 color-666">共{{ val.productCount }}件商品，合计：￥{{ fen2yuan(val.payPrice) }}</div>
+        <div class="text-end pa-3 font-size-13 color-666">
+          <div>共{{ val.productCount }}件商品，合计：￥{{ fen2yuan(val.payPrice) }}</div>
+          <v-btn v-if="val.buttons.length === 0" class="mt-2" variant="tonal" rounded="xl" @click.stop="handleDetail(val)">查看详情</v-btn>
+          <v-btn v-if="val.buttons.includes('confirm')" class="mt-2" variant="tonal" color="success" rounded="xl" @click.stop="handleConfirm(val)">确认收货</v-btn>
+          <v-btn v-if="val.buttons.includes('comment')" class="mt-2" variant="tonal" rounded="xl">评价</v-btn>
+          <v-btn v-if="val.buttons.includes('express')" class="mt-2" variant="tonal" rounded="xl">查看物流</v-btn>
+          <v-btn v-if="val.buttons.includes('cancel')" class="mt-2" variant="tonal" rounded="xl">取消订单</v-btn>
+          <v-btn v-if="val.buttons.includes('delete')" class="mt-2" variant="tonal" color="error" rounded="xl">删除订单</v-btn>
+          <v-btn v-if="val.buttons.includes('pay')" class="mt-2" variant="tonal" rounded="xl">继续支付</v-btn>
+        </div>
       </div>
+      <CtPagination :total="total" :page="queryParams.pageNo" :limit="queryParams.pageSize" @handleChange="handleChangePage"></CtPagination>
     </div>
     <Empty v-else :elevation="false" :message="tab === -1 ? '暂无订单' : '暂无' + tabList.find(e => e.value === tab).title + '订单'"></Empty>
   </div>
@@ -39,11 +50,14 @@
 <script setup>
 defineOptions({ name: 'mall-user-order-index'})
 import { ref } from 'vue'
-import { getMallOrderPage } from '@/api/mall/user'
-import { getDict } from '@/hooks/web/useDictionaries'
+import { getMallOrderPage, receiveOrder } from '@/api/mall/user'
 import { timesTampChange } from '@/utils/date'
-import { fen2yuan } from '@/hooks/web/useGoods'
+import { fen2yuan, handleOrderButtons, formatOrderStatus, formatOrderColor } from '@/hooks/web/useGoods'
+import Confirm from '@/plugins/confirm'
+import Snackbar from '@/plugins/snackbar'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const tab = ref(-1)
 const tabList = [
   { title: '全部', value: -1 },
@@ -64,20 +78,37 @@ const getOrderPage = async () => {
   queryParams.value.status = tab.value
   if (tab.value === -1) delete queryParams.value.status
   if (tab.value === 30) queryParams.value.commentStatus = false
+
   const result = await getMallOrderPage(queryParams.value)
+
+  result.list.forEach(order => handleOrderButtons(order))
   orderList.value = result.list
   total.value = result.total
 }
 getOrderPage()
 
-const getDictData = async (dictType, value) => {
-  const { data } = await getDict(dictType)
-  console.log(data, 'dict-data')
-  const obj = data.find(e => e.value === value)
-  return obj.label
+// 分页
+const handleChangePage = (e) => {
+  queryParams.value.pageNo = e
+  getOrderPage()
 }
-// console.log(getDictLabel('trade_order_status', 10), 'getDictLabel')
 
+// 查看详情
+const handleDetail = ({ id }) => {
+  // router.push(`/mall/user/order/detail/${id}`)
+  window.open(`/mall/user/order/detail/${id}`)
+}
+
+// 确认收货
+const handleConfirm = ({ id }) => {
+  if (!id) return
+  Confirm('系统提示', '是否确认收货？').then(async () => {
+    await receiveOrder(id)
+    Snackbar.success('收货成功')
+    queryParams.value.pageNo = 1
+    await getOrderPage()
+  })
+}
 </script>
 
 <style scoped lang="scss">
@@ -91,8 +122,5 @@ const getDictData = async (dictType, value) => {
     font-size: 13px;
     color: #666;
   }
-  &-goods {
-    // border-bottom: 1px solid #dbdbdb;
-  }
 }
 </style>