将订单页移入Header, 为订单改写实现方式, 使用el-description展示详情, 使用computed方法返回响应式文本, 更改按钮控制逻辑

components.d.ts

@@ -13,7 +13,10 @@ declare module 'vue' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
@@ -22,9 +25,15 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElRate: typeof import('element-plus/es')['ElRate']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTextarea: typeof import('element-plus/es')['ElTextarea']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']

src/api/order.ts

@@ -49,3 +49,12 @@ export const getOrder = orderId => {
             return res;
         })
 }
+
+// 评价订单
+export const commentOrder = payload => {
+    return axios.post(`${ORDER_MODULE}/comment`, payload,
+        {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            return res;
+        })
+}

src/views/common/OrderItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import {deliverOrder, getOrder, getOrderById, payOrder} from "../../api/order.ts";
-import {ref} from "vue";
+import {deliverOrder, getOrder, getOrderById, payOrder, commentOrder} from "../../api/order.ts";
+import {ref, computed} from "vue";
 
 const props = defineProps({
   orderId: {
@@ -9,6 +9,9 @@ const props = defineProps({
   }
 })
 
+const orderDialogVisible = ref(false)
+const commentDialogVisible = ref(false)
+
 const userId = ref(0)
 const productId = ref(0)
 const amount = ref(0)
@@ -37,29 +40,31 @@ function getOrderDetail() {
   })
 }
 
-function handleType() {
-  if (type.value === 'DELIVERY') {
-    return "快递到家"
-  } else if (type === 'PICKUP') {
-    return "到店自取"
+
+// 对于变化的内容使用计算属性返回响应式结果
+const statusText = computed(() => {
+  switch (status.value) {
+    case 'UNPAID': return "待支付"
+    case 'UNSEND': return "待发货"
+    case 'UNGET': return "待收货"
+    case 'UNCOMMENT': return "待评价"
+    case 'DONE':return "已完成"
+    default: return "状态标签"
   }
-}
+})
 
-function handleStatus() {
-  if (status.value === 'UNPAID') {
-    return "待支付"
-  } else if (status.value === 'UNSEND') {
-    return "待发货"
-  } else if (status.value === 'UNGET') {
-    return "待收货"
-  } else if (status.value === 'UNCOMMENT') {
-    return "待评价"
-  } else if (status.value === 'DONE') {
-    return "已完成"
+const buttonText = computed(() => {
+  switch (status.value) {
+    case 'UNPAID': return "去支付"
+    case 'UNSEND': return "去发货"
+    case 'UNGET': return "去收货"
+    case 'UNCOMMENT': return "去评价"
+    default: return "按钮"
   }
-}
+})
+
 
-function handleTime(time) {
+function parseTime(time) {
   if (time === null) {
     return "暂未完成"
   }
@@ -67,7 +72,15 @@ function handleTime(time) {
   return times[0] + " " + times[1]
 }
 
-let orderDialogVisible = ref(false)
+
+function parseType() {
+  if (type.value === 'DELIVERY') {
+    return "快递到家"
+  } else if (type.value === 'PICKUP') {
+    return "到店自取"
+  }
+}
+
 
 function handlePay() {
   orderDialogVisible.value = true
@@ -130,47 +143,89 @@ function handleGet() {
     }
   })
 }
+
+
+function handleComment() {
+  commentDialogVisible.value = true
+}
+
+function handleSendComment() {
+
+  const payload = {
+
+  }
+
+  commentOrder(payload).then(res => {
+    if (res.code === '000') {
+
+    } else {
+
+    }
+  })
+}
+
+
+function switchButtonFunction() {
+    switch (status.value) {
+      case 'UNPAID': handlePay(); break;
+      case 'UNSEND': handleDeliver(); break;
+      case 'UNGET': handleGet(); break;
+      case 'UNCOMMENT': handleComment(); break;
+      default: break;
+    }
+}
+
+
 </script>
 
 <template>
+
   <div>
+
     <el-card class="order-item-card">
-      <el-row style="font-size: 15px">
-        数量：{{ amount }} 件
-      </el-row>
-      <el-row style="font-size: 15px">
-        支付金额：{{ paid }} 元
-      </el-row>
-      <el-row style="font-size: 15px">
-        取货类型：{{ handleType() }}
-      </el-row>
-      <el-row style="font-size: 15px">
-        评分：{{ rating }}
-      </el-row>
-      <el-row style="font-size: 15px">
-        状态：{{ handleStatus() }}
-        <el-button v-if="status === 'UNPAID'"
-                   class="status-change-button" size="small" type="primary"
-                   @click="handlePay">去支付
-        </el-button>
-        <el-button v-if="status === 'UNSEND'"
-                   class="status-change-button" size="small" type="primary"
-                   @click="handleDeliver">去发货
-        </el-button>
-        <el-button v-if="status === 'UNGET'"
-                   class="status-change-button" size="small" type="primary"
-                   @click="handleGet">去收货
-        </el-button>
-        <el-button v-if="status === 'UNCOMMENT'"
-                   class="status-change-button" size="small" type="primary">去评价
-        </el-button>
-      </el-row>
-      <el-row style="font-size: 15px">
-        创建时间: {{ handleTime(createTime) }}
-      </el-row>
-      <el-row style="font-size: 15px">
-        完成时间: {{ handleTime(finishTime) }}
-      </el-row>
+
+      <template #header>
+        <div class="card-header">
+          <div>
+            <span> 商品 {{productId}}</span>
+            <el-tag style="margin-left: 8px"> {{statusText}} </el-tag>
+          </div>
+          <el-button @click="switchButtonFunction" v-if="!(status==='DONE')" class="status-change-button" size="small" type="primary">
+              {{ buttonText }}
+          </el-button>
+        </div>
+      </template>
+
+      <el-descriptions
+          :column="1"
+      >
+        <el-descriptions-item style="font-size: 15px" label="数量">
+          {{ amount }} 件
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 15px" label="支付金额">
+          {{ paid }}
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 15px" label="取货类型">
+          <el-tag> {{ parseType() }}</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 15px" label="评分">
+          <el-rate
+              v-model="rating"
+              disabled
+              show-score
+              text-color="#ff9900"
+              score-template="{value} 分"
+              size="small"
+          />
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 15px" label="创建时间">
+          {{ parseTime(createTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 15px" label="完成时间">
+          {{ parseTime(finishTime) }}
+        </el-descriptions-item>
+      </el-descriptions>
+
     </el-card>
 
     <el-dialog v-model="orderDialogVisible">
@@ -185,7 +240,7 @@ function handleGet() {
         </el-form-item>
         <el-form-item>
           <label for="type">提货方式：</label>
-          {{ handleType() }}
+          {{ parseType() }}
         </el-form-item>
         <el-form-item>
           <label for="type">优惠券：</label>
@@ -200,10 +255,41 @@ function handleGet() {
       </el-form>
       <el-button @click="handleConfirmOrder">确认支付</el-button>
     </el-dialog>
+
+
+    <el-dialog v-model="commentDialogVisible">
+      <el-form>
+
+        <el-form-item>
+          <el-rate v-model="rating" clearable
+                   :texts="['非常差', '差', '普通', '好', '非常好']"
+                    show-text/>
+        </el-form-item>
+
+        <el-form-item>
+          <el-input type="textarea" rows="10">
+
+          </el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="handleComment">评价</el-button>
+          <el-button @click="commentDialogVisible = false">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+
   </div>
 </template>
 
 <style scoped>
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .order-item-card {
   margin-bottom: 10px;
   width: 30%;

src/views/portal/AllStore.vue

@@ -29,7 +29,8 @@ function toAllOrderPage() {
 
 <template>
   <el-main>
-    <el-button @click="toAllOrderPage">全部订单</el-button>
+<!--    我挪到header去了 -->
+<!--    <el-button @click="toAllOrderPage">全部订单</el-button>-->
     <StoreItem class="store-item-list"
                v-for="storeVO in storeList" :storeId="storeVO.id"
                @click="toStoreDetailPage(storeVO.id)" />

src/views/portal/Dashboard.vue

@@ -167,12 +167,13 @@ import {UserFilled} from "@element-plus/icons-vue";
 
       <el-card v-if="displayInfoCard" class="change-card">
 
-        <div class="card-header">
-          <span>个人信息</span>
-          <el-button @click="updateInfo">更新</el-button>
-        </div>
+        <template #header>
+          <div class="card-header">
+            <span>个人信息</span>
+            <el-button @click="updateInfo">更新</el-button>
+          </div>
+        </template>
 
-        <el-divider></el-divider>
 
         <el-form>
             <el-form-item>
@@ -198,12 +199,12 @@ import {UserFilled} from "@element-plus/icons-vue";
 
       <el-card v-if="!displayInfoCard" class="change-card">
 
-        <div class="card-header">
-          <span >修改密码</span>
-          <el-button @click="updatePassword" :disabled="!hasConfirmPasswordInput || !isPasswordIdentical">修改</el-button>
-        </div>
-
-        <el-divider></el-divider>
+        <template #header>
+          <div class="card-header">
+            <span >修改密码</span>
+            <el-button @click="updatePassword" :disabled="!hasConfirmPasswordInput || !isPasswordIdentical">修改</el-button>
+          </div>
+        </template>
 
         <el-form>
           <el-form-item>