<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>
|
