实现了订单状态转变，转变后局部刷新，更改了几个item中变量的定义方法

src/api/order.ts

@@ -26,6 +26,14 @@ export const getAllOrder = () => {
         })
 }
 
+//获取单个订单
+export const getOrderById = orderId => {
+    return axios.get(`${ORDER_MODULE}/${orderId}`, )
+        .then(res => {
+            return res;
+        })
+}
+
 //订单发货
 export const deliverOrder = orderId => {
     return axios.post(`${ORDER_MODULE}/deliver/?orderId=${orderId}`)

src/views/common/OrderItem.vue

@@ -1,32 +1,44 @@
 <script setup lang="ts">
-import {deliverOrder, getOrder, payOrder} from "../../api/order.ts";
+import {deliverOrder, getOrder, getOrderById, payOrder} from "../../api/order.ts";
 import {ref} from "vue";
 
 const props = defineProps({
-  orderVO: {
-    type: Object,
-    required: true
-  },
-  getOrderList: {
-    type: Function,
+  orderId: {
+    type: Number,
     required: true
   }
 })
 
-const orderId = props.orderVO.id
-const userId = props.orderVO.userId
-const productId = props.orderVO.productId
-const amount = props.orderVO.amount
-const paid = props.orderVO.paid
-const type = props.orderVO.type
-const content = props.orderVO.content
-const rating = props.orderVO.rating
-const status = props.orderVO.status
-const createTime = props.orderVO.createTime
-const finishTime = props.orderVO.finishTime
+const userId = ref(0)
+const productId = ref(0)
+const amount = ref(0)
+const paid = ref(0)
+const type = ref('')
+const content = ref('')
+const rating = ref(0)
+const status = ref('')
+const createTime= ref('')
+const finishTime = ref('')
+
+getOrderDetail()
+
+function getOrderDetail() {
+  getOrderById(props.orderId).then(res => {
+    userId.value = res.result.userId
+    productId.value = res.result.productId
+    amount.value = res.result.amount
+    paid.value = res.result.paid
+    type.value = res.result.type
+    content.value = res.result.content
+    rating.value = res.result.rating
+    status.value = res.result.status
+    createTime.value = res.result.createTime
+    finishTime.value = res.result.finishTime
+  })
+}
 
 function handleType() {
-  if (type === 'DELIVERY') {
+  if (type.value === 'DELIVERY') {
     return "快递到家"
   } else if (type === 'PICKUP') {
     return "到店自取"
@@ -34,15 +46,15 @@ function handleType() {
 }
 
 function handleStatus() {
-  if (status === 'UNPAID') {
+  if (status.value === 'UNPAID') {
     return "待支付"
-  } else if (status === 'UNSEND') {
+  } else if (status.value === 'UNSEND') {
     return "待发货"
-  } else if (status === 'UNGET') {
+  } else if (status.value === 'UNGET') {
     return "待收货"
-  } else if (status === 'UNCOMMENT') {
+  } else if (status.value === 'UNCOMMENT') {
     return "待评价"
-  } else if (status === 'DONE') {
+  } else if (status.value === 'DONE') {
     return "已完成"
   }
 }
@@ -62,7 +74,7 @@ function handlePay() {
 }
 
 function handleConfirmOrder() {
-  payOrder(orderId).then(res => {
+  payOrder(props.orderId).then(res => {
     if (res.code === '000') {
       ElMessage({
         message: '订单支付成功！',
@@ -70,7 +82,7 @@ function handleConfirmOrder() {
         center: true,
       })
       orderDialogVisible.value = false
-      //props.getOrderList()
+      getOrderDetail()
     } else if (res.code === '400') {
       ElMessage({
         message: res.msg,
@@ -82,14 +94,14 @@ function handleConfirmOrder() {
 }
 
 function handleDeliver() {
-  deliverOrder(orderId).then(res => {
+  deliverOrder(props.orderId).then(res => {
     if (res.code === '000') {
       ElMessage({
         message: '订单发货成功！',
         type: 'success',
         center: true,
       })
-      props.getOrderList()
+      getOrderDetail()
     } else if (res.code === '400') {
       ElMessage({
         message: res.msg,
@@ -101,14 +113,14 @@ function handleDeliver() {
 }
 
 function handleGet() {
-  getOrder(orderId).then(res => {
+  getOrder(props.orderId).then(res => {
     if (res.code === '000') {
       ElMessage({
         message: '订单收货成功！',
         type: 'success',
         center: true,
       })
-      props.getOrderList()
+      getOrderDetail()
     } else if (res.code === '400') {
       ElMessage({
         message: res.msg,

src/views/common/ProductItem.vue

@@ -1,21 +1,39 @@
 <script setup lang="ts">
+import {ref} from "vue";
+import {getProductById} from "../../api/product.ts";
+
 const props = defineProps({
-  productVO: {
-    type: Object,
+  productId: {
+    type: Number,
     required: true
   }
 })
 
-const id = props.productVO.id
-const storeId = props.productVO.storeId
-const name = props.productVO.name
-const photoUrlList = props.productVO.photoUrlList
-const rating = props.productVO.rating
-const number = props.productVO.number
-const salesAmount = props.productVO.salesAmount
-const stock = props.productVO.stock
-const category = props.productVO.category
-const price = props.productVO.price
+const storeId = ref(0)
+const name = ref('')
+const photoUrlList = ref([])
+const rating = ref(0)
+const number = ref(0)
+const salesAmount = ref(0)
+const stock = ref(0)
+const category = ref('')
+const price = ref(0)
+
+getProductDetail()
+
+function getProductDetail() {
+  getProductById(props.productId).then(res => {
+    storeId.value = res.result.storeId
+    name.value = res.result.name
+    photoUrlList.value = res.result.photoUrlList
+    rating.value = res.result.rating
+    number.value = res.result.number
+    salesAmount.value = res.result.salesAmount
+    stock.value = res.result.stock
+    category.value = res.result.category
+    price.value = res.result.price
+  })
+}
 </script>
 
 <template>

src/views/common/StoreItem.vue

@@ -1,18 +1,32 @@
 <script setup lang="ts">
+import {ref} from "vue"
+import {getStoreById} from "../../api/store.ts"
 
 const props = defineProps({
-  storeVO: {
-    type: Object,
+  storeId: {
+    type: Number,
     required: true
   }
 })
 
-const id = props.storeVO.id
-const name = props.storeVO.name
-const logoUrl = props.storeVO.logoUrl
-const rating = props.storeVO.rating
-const number = props.storeVO.number
-const location = props.storeVO.location
+const name = ref('')
+const logoUrl = ref('')
+const rating = ref(0)
+const number = ref(0)
+const location = ref('')
+
+getStoreDetail()
+
+function getStoreDetail() {
+  getStoreById(props.storeId).then(res => {
+    console.log(res)
+    name.value = res.result.name
+    logoUrl.value = res.result.logoUrl
+    rating.value = res.result.rating
+    number.value = res.result.number
+    location.value = res.result.location
+  })
+}
 
 </script>
 

src/views/customer/AllOrder.vue

@@ -10,7 +10,6 @@ getOrderList()
 function getOrderList() {
   getAllOrder().then(res => {
     orderList.value = res.result
-    console.log("获取订单列表")
   })
 }
 </script>
@@ -18,7 +17,7 @@ function getOrderList() {
 <template>
   <div>
     <OrderItem class="order-item-list"
-               v-for="orderVO in orderList" :orderVO="orderVO" :getOrderList="getOrderList"/>
+               v-for="orderVO in orderList" :orderId="orderVO.id"/>
   </div>
 </template>
 

src/views/portal/AllStore.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 
-import StoreItem from "../common/StoreItem.vue";
-import {ref} from "vue";
-import {getAllStore} from "../../api/store.ts";
-import {useRouter} from "vue-router";
+import StoreItem from "../common/StoreItem.vue"
+import {ref} from "vue"
+import {getAllStore} from "../../api/store.ts"
+import {useRouter} from "vue-router"
 
-const router = useRouter();
-const userId = router.currentRoute.value.params.userId;
+const router = useRouter()
+const userId = router.currentRoute.value.params.userId
 
 let storeList = ref()
 
@@ -31,7 +31,7 @@ function toAllOrderPage() {
   <el-main>
     <el-button @click="toAllOrderPage">全部订单</el-button>
     <StoreItem class="store-item-list"
-               v-for="storeVO in storeList" :storeVO="storeVO"
+               v-for="storeVO in storeList" :storeId="storeVO.id"
                @click="toStoreDetailPage(storeVO.id)" />
   </el-main>
 </template>

src/views/portal/StoreDetail.vue

@@ -67,7 +67,7 @@ function toProductDetailPage(productId) {
     </div>
     <div class="all-product-main">
       <productItem class="product-item-list"
-                   v-for="productVO in productList" :productVO="productVO"
+                   v-for="productVO in productList" :productId="productVO.id"
                    @click="toProductDetailPage(productVO.id)" />
 
     </div>