Merge pull request '支付订单-支付宝' (#3) from zzz/vue-beta:main into main

Reviewed-on: https://gitea.zhujinjie.me/qq1244/vue-beta/pulls/3

src/router/user.ts

@@ -51,6 +51,11 @@ const routes = [
         }),
       },
       {
+  path: '/alipay-result',
+  name: 'AlipayResult',
+  component: () => import('@/views/user/AlipayResult.vue')
+  },
+      {
         path: 'shopping',
         name: 'Shopping',
         component: Shopping,

src/views/user/AlipayResult.vue

@@ -0,0 +1,38 @@
+<template>
+  <div style="text-align:center; margin-top: 100px;">
+    <el-result
+      :icon="isVerifySuccess ? 'success' : 'error'"
+      :title="isVerifySuccess ? '验签成功，支付结果可信' : '验签失败，支付结果不可信'"
+      :sub-title="tradeStatus === 'TRADE_SUCCESS' ? '支付成功' : '支付失败或取消'"
+    >
+      <template #extra>
+        <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
+      </template>
+    </el-result>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import axios from 'axios'
+
+const route = useRoute()
+const isVerifySuccess = ref(false)
+const tradeStatus = route.query.trade_status || ''
+
+// 将支付宝同步回调参数全部传给后端验签
+const params = {}
+for (const key in route.query) {
+  params[key] = route.query[key]
+}
+
+onMounted(async () => {
+  try {
+    const res = await axios.post('/api/user/alipay/verifyReturn', params)
+    isVerifySuccess.value = res.data === true
+  } catch {
+    isVerifySuccess.value = false
+  }
+})
+</script>

src/views/user/Shopping.vue

@@ -2,7 +2,6 @@
   <el-dialog title="确认支付" v-model="showPayDialog" width="30%">
     <p>总金额：¥{{ totalPrice.toFixed(2) }}</p>
     <template #footer>
-      <el-button type="info" @click="createOrder">生成订单</el-button>
       <el-button @click="showPayDialog = false">取消</el-button>
       <el-button type="primary" @click="confirmPay">确认支付</el-button>
     </template>
@@ -42,7 +41,7 @@
       v-model="orderRemark"
       type="textarea"
       placeholder="请输入订单备注，如：不要香菜、少盐等"
-      rows="3"
+      :rows="3"
     />
   </el-form-item>
 </el-form>
@@ -94,20 +93,33 @@ watch(showPayDialog, (val) => {
 // 确认支付函数
 const confirmPay = async () => {
   try {
-    const response = await axios.post('/api/alipay/pay', {
-      totalAmount: totalPrice.value,
-      items: cartItems.value
+    // 先调用已有的 createOrder 方法，生成订单
+    const orderId = await createOrder()
+    if (!orderId) {
+      // 如果订单创建失败，不继续支付
+      return
+    }
+
+    // 发起支付宝支付请求
+    const payResponse = await axios.post('/api/user/alipay/pay', {
+      outTradeNo: orderId,
+      subject: '顾客订单',
+      totalAmount: totalPrice.value.toFixed(2)
     }, {
-      responseType: 'blob' // 让后端返回的 HTML 可以被正确打开
+      responseType: 'blob'
     })
 
-    const blob = new Blob([response.data], { type: 'text/html' })
+    // 打开支付宝支付页
+    const blob = new Blob([payResponse.data], { type: 'text/html' })
     const url = URL.createObjectURL(blob)
     window.open(url, '_blank')
+
+    // 清空购物车、关闭弹窗
+    cartStore.clearCart()
     showPayDialog.value = false
   } catch (error) {
     console.error('支付失败:', error)
-    ElMessage.error('支付请求失败')
+    ElMessage.error('支付失败，请稍后再试')
   }
 }
 
@@ -135,18 +147,16 @@ const createOrder = async () => {
     branchId: restaurantId,
     orderRemarks: orderRemark.value,
     orderMoney: totalPrice.value,
-    orderStatus: 0
+    orderStatus: 1
   },
   items: orderItems
 }
 
     const response = await axios.post('/api/user/orders/create', orderRequest)//ok
+    const orderId = response.data.orderId
+    ElMessage.success('订单已生成，订单号：' + orderId)
 
-    ElMessage.success('订单已生成，订单号：' + response.data.orderId)
-
-    // 可选：清空购物车、关闭支付弹窗
-    cartStore.clearCart()
-    showPayDialog.value = false
+    return orderId
   } catch (error) {
     console.error('订单生成失败:', error)
     ElMessage.error('生成订单失败')

src/views/user/SpendingChart.vue

@@ -4,6 +4,14 @@
       <template #header>
         <span>花费图表</span>
       </template>
+      <el-button
+  type="primary"
+  @click="downloadExcel"
+  style="margin-bottom: 20px"
+>
+  导出订单Excel
+</el-button>
+
       <el-select v-model="selectedBranch" placeholder="选择店铺" style="width: 200px; margin-bottom: 20px">
         <el-option
           v-for="branch in branchList"
@@ -122,6 +130,30 @@ onMounted(async () => {
 
 // 当选择店铺时重新渲染图表
 watch(selectedBranch, renderChart)
+
+const downloadExcel = async () => {
+  try {
+    const response = await axios.get(`/api/user/orders/export/${customerId}`, {
+      responseType: 'blob' // 一定要是 blob，否则文件下载不了
+    })
+
+    const blob = new Blob([response.data], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    })
+    const url = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    // 你可以自定义文件名，也可以从后端 header 获取 filename
+    link.setAttribute('download', `订单数据_${new Date().toISOString().slice(0,10)}.xlsx`)
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    window.URL.revokeObjectURL(url)
+  } catch (error) {
+    ElMessage.error('导出失败，请稍后再试')
+  }
+}
+
 </script>
 
 <style scoped>