我的订单

src/api/mall/user.js

@@ -0,0 +1,9 @@
+import request from '@/config/axios'
+
+// 获取订单分页
+export const getMallOrderPage = async (params) => {
+  return request.get({
+    url: '/app-api/trade/order/page',
+    params
+  })
+}

src/store/user.js

@@ -151,7 +151,11 @@ export const useUserStore = defineStore('user',
         this.userInfo = {}
         this.baseInfo = {}
         this.accountInfo = {}
+
+        // 商城模版数据不清楚缓存
+        const mallTemplate = localStorage.getItem('mallTemplate')
         localStorage.clear()
+        localStorage.setItem('mallTemplate', mallTemplate)
       },
       // 切换为招聘者
       async changeRole (res) {

src/views/mall/components/navbar.vue

@@ -3,7 +3,7 @@
     <div class="default-width d-flex align-center justify-space-between">
       <div class="header-link">
         <span class="cursor-pointer" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">首页</span>
-        <span class="cursor-pointer mx-8" :class="{'active-route' : isActive('/mall/user', true)}" @click="router.push('/mall/user')">
+        <span class="cursor-pointer mx-8" :class="{'active-route' : isActive('/mall/user', true)}" @click="handleTo('/mall/user')">
           <v-icon>mdi-account-circle-outline</v-icon>
           我的
         </span>
@@ -35,13 +35,25 @@
 defineOptions({ name: 'formPage'})
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { getToken } from '@/utils/auth'
+import Snackbar from '@/plugins/snackbar'
 
+const emit = defineEmits(['login'])
 const router = useRouter()
 const isActive = computed(() => (path, hasChild) => {
   const currentPath = router.currentRoute.value.path
   return hasChild ? currentPath.includes(path) : currentPath === path
 })
 
+const handleTo = (path) => {
+  if (!getToken()) {
+    Snackbar.warning('请先登录')
+    emit('login', path)
+    return
+  }
+  router.push(path)
+}
+
 const inputVal = ref('')
 const handleSearch = () => {}
 </script>

src/views/mall/home/components/hotGoods.vue

@@ -36,6 +36,7 @@ const router = useRouter()
 const goodList = ref([])
 const getGoodsList = async () => {
   const productCard = props.templateData?.home?.components.find(item => item.id === 'ProductCard')
+  if (!productCard) return
   const ids = productCard.property.spuIds
   if (!ids.length) return
   const data = await getProductByIds(ids)

src/views/mall/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="min-width: 1184px;" class="white-bgc">
     <!-- 导航栏 -->
-    <Navbar />
+    <Navbar @login="handleLogin" />
 
     <!-- 轮播图 -->
     <Carousel :templateData="template" class="mb-10" style="max-height: 594.5px;" />
@@ -21,7 +21,7 @@
 
 <script setup>
 defineOptions({ name: 'mall-home-index'})
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import Navbar from '../components/navbar.vue'
 import Carousel from './components/carousel.vue'
 import HotGoods from './components/hotGoods.vue'
@@ -29,9 +29,15 @@ import PointExchange from '../pointExchange'
 import loginPage from '@/views/common/loginDialog.vue'
 import { useMallStore } from '@/store/mall'
 import { useUserStore } from '@/store/user'
+import Snackbar from '@/plugins/snackbar'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 // 获取装修模版
-useMallStore().getMallDiyTemplate()
+onMounted(async () => {
+  await useMallStore().getMallDiyTemplate()
+})
 
 let template = ref(JSON.parse(localStorage.getItem('mallTemplate')) || {})
 useMallStore().$subscribe((mutation, state) => {
@@ -46,14 +52,22 @@ userStore.$subscribe((mutation, state) => {
 })
 
 const showLogin = ref(false)
-const handleLogin = () => {
+const returnUrl = ref('')
+const handleLogin = (path) => {
   showLogin.value = true // 打开快速登录弹窗
+  returnUrl.value = path
 }
 
 // 快速登录
 const loginSuccess = () => {
   showLogin.value = false
   Snackbar.success('登录成功')
+  if (returnUrl.value) {
+    router.push(returnUrl.value)
+    setTimeout(() => {
+      returnUrl.value = ''
+    }, 1000)
+  }
 }
 
 const loginClose = () => {

src/views/mall/pointExchange/index.vue

@@ -173,7 +173,7 @@ const handleSubmit = async () =>{
 const handleTo = (path) => {
   if (!getToken()) {
     Snackbar.warning('请先登录')
-    emit('login')
+    emit('login', path)
     return
   }
   router.push(path)

src/views/mall/user/index.vue

@@ -3,7 +3,7 @@
   <div class="d-flex parent default-width mb-5">
     <v-card class="left">
       <v-list color="primary">
-        <div class="text-center mb-3">
+        <div class="text-center my-3">
           <v-avatar :image="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" size="100"></v-avatar>
           <p class="mt-2 color-primary font-weight-bold">{{ baseInfo?.name }}</p>
         </div>

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

@@ -1,11 +1,98 @@
 <template>
-  <div>order-index</div>
+  <div>
+    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:modelValue="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">
+      <div v-for="val in orderList" :key="val.id" class="order-item mb-3">
+        <div class="order-item-header px-5">
+          <div style="width: 40%;">
+            <span>订单号：{{ val.no }}</span>
+            <span class="ml-5">{{ timesTampChange(val.createTime) }}</span>
+          </div>
+          <div class="text-end color-warning" style="flex: 1">
+            待发货
+          </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 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>
+                <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>
+              </p>
+            </div>
+          </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>
+    </div>
+    <Empty v-else :elevation="false" :message="tab === -1 ? '暂无订单' : '暂无' + tabList.find(e => e.value === tab).title + '订单'"></Empty>
+  </div>
 </template>
 
 <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 { timesTampChange } from '@/utils/date'
+import { fen2yuan } from '@/hooks/web/useGoods'
+
+const tab = ref(-1)
+const tabList = [
+  { title: '全部', value: -1 },
+  { title: '待付款', value: 0 },
+  { title: '待发货', value: 10 },
+  { title: '待收货', value: 20 },
+  { title: '待评价', value: 30 }
+]
+const total = ref(0)
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10
+})
+
+// 获取订单列表
+const orderList = ref([])
+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)
+  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
+}
+// console.log(getDictLabel('trade_order_status', 10), 'getDictLabel')
+
 </script>
 
 <style scoped lang="scss">
-
+.order-item {
+  border: 1px solid #dbdbdb;
+  &-header {
+    display: flex;
+    background-color: #f2f4f7;
+    height: 36px;
+    line-height: 36px;
+    font-size: 13px;
+    color: #666;
+  }
+  &-goods {
+    // border-bottom: 1px solid #dbdbdb;
+  }
+}
 </style>