功能完善

src/pages/order-detail.vue

@@ -1,25 +1,43 @@
 <script setup>
-import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { ref, onMounted } from "vue";
 import Container from "@/components/Container.vue";
+import SButton from "@/components/SButton.vue";
+import { payOrderAPI, cancelOrderListAPI } from "@/apis";
+import { orderStatusNames } from "@/constants";
 
-const id = ref("");
+const data = ref({});
 
-onLoad((options) => {
-  id.value = options.id;
+onMounted(() => {
+  const order = uni.getStorageSync("order");
+  data.value = order || {};
 });
+
+const goPay = async () => {
+  const result = await payOrderAPI(data.value.orderId);
+};
+
+const cancelOrder = async () => {
+  const result = await cancelOrderListAPI(data.value.orderId);
+  data.value = result;
+};
 </script>
 
 <template>
   <Container title="订单详情">
     <view class="container">
       <view class="order">
-        <text>商品名：会员一个月</text>
-        <text>订单号：20250131HY1M0000</text>
-        <text>下单时间：2025-01-31 09:27:34</text>
-        <text>支付时间：2025-01-31 09:27:34</text>
-        <text>金额：10 元</text>
-        <text>支付方式：支付宝</text>
+        <view>
+          <text>商品名：{{ data.vipName }}</text>
+          <text>订单号：{{ data.orderId }}</text>
+          <text>下单时间：{{ data.vipCreateAt }}</text>
+          <text>支付时间：2025-01-31 09:27:34</text>
+          <text>金额：{{ data.vipPrice }} 元</text>
+          <text>支付方式：微信</text>
+        </view>
+        <view v-if="data.orderStatus === 1">
+          <SButton :onClick="goPay">去支付</SButton>
+          <SButton :onClick="cancelOrder">取消订单</SButton>
+        </view>
       </view>
     </view>
   </Container>
@@ -36,17 +54,25 @@ onLoad((options) => {
   width: 100%;
   height: 100%;
   background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.order > view:first-child {
   display: flex;
   flex-direction: column;
   padding: 15px;
 }
-.order > text:first-child {
+.order > view:first-child > text:first-child {
   color: #000;
   font-size: 16px;
 }
-.order > text {
+.order > view:first-child > text {
   color: #666666;
   font-size: 13px;
   margin-top: 5px;
 }
+.order > view:last-child {
+  margin-bottom: 20px;
+}
 </style>