From ef37c59e055a990ce247b265b27d3fcef430a243 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 15 八月 2025 10:19:18 +0800
Subject: [PATCH] first submit

---
 src/views/bookStore/order.vue |  189 +++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 189 insertions(+), 0 deletions(-)

diff --git a/src/views/bookStore/order.vue b/src/views/bookStore/order.vue
new file mode 100644
index 0000000..a67b56d
--- /dev/null
+++ b/src/views/bookStore/order.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="orderPage">
+    <div class="crumbs">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ name: 'bookStore' }">涔﹀煄</el-breadcrumb-item>
+        <el-breadcrumb-item>纭璁㈠崟</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="content">
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="icon" label="灏侀潰" width="200">
+          <template slot-scope="scope">
+            <img :src="scope.row.icon" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="涔︾睄鍚嶇О"> </el-table-column>
+        <el-table-column prop="price" label="閲戦">
+          <template slot-scope="scope">
+            <p style="color: red; font-weight: bold; font-size: 16px">
+              <span>锟�</span>{{ tool.toDecimal2(scope.row.price) }}
+            </p>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="confirmOrderBtn" v-if="orderData.state == 'Init'">
+        <el-button @click="back()">杩斿洖</el-button>
+        <el-button type="primary" @click="confirmOrder">纭璁㈠崟</el-button>
+      </div>
+      <div class="payBox" v-if="orderData.state == 'WaitPay'">
+        <div class="price">楼 {{ tool.toDecimal2(orderData.payPrice) }}</div>
+        <div class="title">寰俊鏀粯</div>
+        <div class="code" id="qrcode" ref="qrCodeUrl"></div>
+        <div lang="tips">
+          璇风敤寰俊鎵弿浜岀淮鐮佽繘琛屾敮浠�
+        </div>
+        <div class="btnBox">
+          <el-button @click="back()">杩斿洖</el-button>
+          <el-button type="primary" @click="isPay()">鏀粯宸插畬鎴�</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPublicImage } from "@/assets/js/middleGround/tool";
+import QRCode from "qrcodejs2"; // 寮曞叆qrcode
+export default {
+  name: "order",
+  components: {},
+  data() {
+    return {
+      orderNum: this.$route.query.orderNum,
+      orderData: {},
+      tableData: []
+    };
+  },
+  created() {
+    this.getOrderInfo();
+  },
+  methods: {
+    getOrderInfo() {
+      this.MG.store
+        .getOrderByOrderNum({
+          orderNum: this.orderNum
+        })
+        .then((res) => {
+          this.orderData = res;
+          this.tableData.push({
+            icon: getPublicImage(
+              res.saleMethodLinks[0].orderSaleMethod.product.icon,
+              150
+            ),
+            name: res.saleMethodLinks[0].orderSaleMethod.product.name,
+            price: res.payPrice
+          });
+          if (res.state == 'WaitPay') {
+            this.getWeChatCode();
+          }
+        });
+    },
+    confirmOrder() {
+      this.MG.store
+        .confirmOrder({
+          orderNum: this.orderNum
+        })
+        .then((res) => {
+          this.orderData = res;
+          this.getWeChatCode();
+        });
+    },
+    getWeChatCode() {
+      this.MG.store
+        .makeWeChatQrPay({
+          orderNum: this.orderNum
+        })
+        .then((res) => {
+          if (res) {
+            this.createQrcode(res);
+          }
+        });
+    },
+    createQrcode(src) {
+      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
+        width: 150,
+        height: 150,
+        text: src, // 浜岀淮鐮佸湴鍧�
+        colorDark: "#000",
+        colorLight: "#fff"
+      });
+    },
+    back() {
+      this.$router.back();
+    },
+    isPay() {
+      this.MG.store
+        .getOrderByOrderNum({
+          orderNum: this.orderNum
+        })
+        .then((res) => {
+          if (res.state == "Success") {
+            this.$message({
+              message: "璁㈠崟宸插畬鎴�!",
+              type: "success"
+            });
+            this.$router.push({
+              path: "/personalCenter",
+              query: {
+                tabsSelected: 3
+              }
+            });
+          } else {
+            this.$message.error("璇峰厛鏀粯璁㈠崟!");
+          }
+        });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.orderPage {
+  width: 1200px;
+  margin: 0 auto;
+  .crumbs {
+    padding: 35px 0;
+  }
+  .content {
+    width: 100%;
+    min-height: 500px;
+    background: #fff;
+    margin-bottom: 50px;
+    padding: 40px;
+    box-sizing: border-box;
+    .confirmOrderBtn {
+      margin-top: 50px;
+      text-align: center;
+    }
+    .payBox {
+      text-align: center;
+      box-sizing: border-box;
+      border: 1px solid #ddd;
+      padding: 50px;
+      .price {
+        font-size: 25px;
+        color: #ff721f;
+        font-weight: bold;
+        margin-bottom: 20px;
+      }
+      .title {
+        font-size: 25px;
+      }
+      .code {
+        width: 150px;
+        margin: 50px auto;
+        img {
+          display: inline-block;
+        }
+      }
+      .tips {
+        font-size: 16px;
+      }
+      .btnBox {
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>

--
Gitblit v1.9.1