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/personalCenter/components/orderList.vue | 459 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 459 insertions(+), 0 deletions(-)
diff --git a/src/views/personalCenter/components/orderList.vue b/src/views/personalCenter/components/orderList.vue
new file mode 100644
index 0000000..657ad43
--- /dev/null
+++ b/src/views/personalCenter/components/orderList.vue
@@ -0,0 +1,459 @@
+<template>
+ <div>
+ <div class="title spaceBetween">
+ <span
+ :class="paymentStatus == 0 ? 'paymentStatus' : 'place'"
+ @click="changeTabs(0)"
+ >鍏ㄩ儴</span
+ >
+ <span class="splitline"></span>
+ <span
+ :class="paymentStatus == 1 ? 'paymentStatus' : 'place'"
+ @click="changeTabs(1)"
+ >宸叉敮浠�</span
+ >
+ <span class="splitline"></span>
+ <span
+ :class="paymentStatus == 2 ? 'paymentStatus' : 'place'"
+ @click="changeTabs(2)"
+ >寰呮敮浠�</span
+ >
+ </div>
+
+ <div class="content" v-loading="orderListloading">
+ <el-empty
+ v-if="orderList.length == 0"
+ :image-size="200"
+ description="鏆傛棤鏁版嵁"
+ ></el-empty>
+ <template v-else>
+ <div class="" v-for="(item, index) in orderList" :key="index">
+ <div class="orderNum">
+ <span>璁㈠崟缂栧彿锛歿{ item.orderNumber }}</span>
+ <span>鍒涘缓鏃ユ湡锛歿{ item.createDate.split("T")[0] }}</span>
+ </div>
+ <div class="bookItem">
+ <div class="wrapImg">
+ <img
+ class="autoImg"
+ :src="
+ getPublicImage(
+ item.saleMethodLinks[0].orderSaleMethod.product.icon
+ )
+ "
+ alt=""
+ />
+ </div>
+ <div class="information">
+ <div>
+ <span
+ class="name ellipsis"
+ :title="item.saleMethodLinks[0].orderSaleMethod.product.name"
+ >{{
+ item.saleMethodLinks[0].orderSaleMethod.product.name
+ }}</span
+ >
+ <span
+ style="float: right; color: #00873c"
+ v-if="item.state == 'Success'"
+ >宸叉敮浠�</span
+ >
+ <span
+ style="float: right; color: #e50021"
+ v-else-if="item.state == 'WaitPay'"
+ >寰呮敮浠�</span
+ >
+ <span
+ style="float: right; color: #ccc"
+ v-else-if="item.state == 'Cancel'"
+ >宸插彇娑�</span
+ >
+ </div>
+ <!-- <p class="author">
+ 浣滆�咃細{{ item.author }}
+ </p> -->
+ <p class="payPrice">
+ 鏀粯浠锋牸锛�
+ <span
+ >锟� <span>{{ item.payPrice }}</span>
+ </span>
+ </p>
+ <p class="quantity">鏁伴噺锛歿{ item.saleMethodLinks[0].count }}</p>
+ <!-- 涓嶉渶瑕佹樉绀哄揩閫掓秷鎭� 10988 -->
+ <!-- <div class="express" v-if="item.state == 'Success'">
+ <p>蹇�掍俊鎭細{{ item.expressCompany }}</p>
+ <p>蹇�掑崟鍙凤細{{ item.courierNumber }}</p>
+ <p class="ellipsis" :title="item.receivingInformation">
+ 鏀惰揣淇℃伅锛� {{ item.receivingInformation }}
+ </p>
+ </div> -->
+ <!--
+ 2023-04-11 鏆傛椂灞忚斀
+ <div class="succeeded" v-if="item.state == 'Success'">
+ <el-button
+ size="medium"
+ @click="
+ () => {
+ drawABill = true;
+ }
+ "
+ >寮�鍏峰彂绁�</el-button
+ >
+ </div> -->
+ <div class="unpaid" v-if="item.state == 'WaitPay'">
+ <el-button size="medium" @click="toPay(item.orderNumber)"
+ >绔嬪嵆鏀粯</el-button
+ >
+ <el-button
+ type="danger"
+ plain
+ @click="cancelOrder(item.orderNumber)"
+ >鍙栨秷璁㈠崟</el-button
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ </template>
+ </div>
+
+ <!-- 寮�鍏峰彂绁ㄦā鎬佹 -->
+ <el-dialog
+ v-loading="loading"
+ title="鎻愮ず"
+ :visible="drawABill"
+ width="40%"
+ :before-close="handleClose"
+ >
+ <el-form
+ :model="billData"
+ ref="form"
+ label-position="left"
+ :rules="rules"
+ label-width="130px"
+ >
+ <el-form-item label="鍙戠エ绫诲瀷"> 澧炲�肩◣绾歌川鏅�氬彂绁� </el-form-item>
+ <el-form-item label="鎶ご绫诲瀷">
+ <el-radio v-model="billData.type" label="1">涓汉鎴栦簨涓氬崟浣�</el-radio>
+ <el-radio v-model="billData.type" label="2">鍏徃</el-radio>
+ </el-form-item>
+ <el-form-item label="鍙戠エ鎶ご" prop="name">
+ <el-input
+ v-model="billData.name"
+ placeholder="璇峰～鍐欓渶瑕佸紑鍏峰彂绁ㄧ殑濮撳悕"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="鍙戠エ鍐呭" prop="phone">
+ <el-input v-model="billData.content" placeholder="鏄庣粏"></el-input>
+ </el-form-item>
+ <el-form-item label="鏀惰揣鍦板潃" prop="phone">
+ <el-radio
+ v-model="billData.type"
+ label="2"
+ v-for="(item, index) in addressList"
+ :key="index"
+ >
+ <div></div>
+ <span>
+ {{ item.city + item.address }}
+ </span>
+ <div>{{ item.name }} {{ item.tel }}</div>
+ </el-radio>
+ </el-form-item>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="dialogVisible = false"
+ >纭� 瀹�</el-button
+ >
+ </span>
+ </el-form>
+ </el-dialog>
+ <!-- 鍒嗛〉 -->
+ <div class="pageinateBox" v-if="orderList.length > 0">
+ <el-pagination
+ @size-change="
+ (val) => {
+ paginationData.limit = val;
+ getData();
+ }
+ "
+ @current-change="
+ (val) => {
+ paginationData.page = val;
+ getData();
+ }
+ "
+ background=""
+ :current-page="paginationData.page - 0"
+ :page-size="paginationData.limit"
+ prev-text="涓婁竴椤�"
+ next-text="涓嬩竴椤�"
+ layout="total, prev, pager, next, slot, jumper"
+ :total="paginationData.totalCount"
+ >
+ </el-pagination>
+ </div>
+ </div>
+</template>
+<script>
+import { getPublicImage } from "@/assets/js/middleGround/tool";
+
+export default {
+ data() {
+ return {
+ orderList: [],
+ paginationData: {
+ page: 1,
+ totalCount: 0,
+ limit: 5,
+ totalPage: 0,
+ },
+ orderListloading: false,
+ paymentStatus: 0,
+ drawABill: false, // 寮�鍏峰彂绁ㄦā鎬佹鏄惁灞曠ず
+ billData: {
+ type: 1, // 鍙戠エ绫诲瀷锛岄粯璁や负涓汉
+ name: "", // 寮�鍙戠エ鐨勫鍚�
+ content: "", // 鍙戠エ鍐呭
+ address: "", // 鍙戠エ鍦板潃
+ }, // 鍙戠エ淇℃伅
+ rules: {
+ name: [
+ {
+ required: true,
+ message: "璇峰～鍐欓渶瑕佸紑鍏峰彂绁ㄧ殑濮撳悕",
+ trigger: "blur",
+ },
+ ],
+ },
+ addressList: [], // 鐢ㄦ埛鍦板潃
+ loading: false,
+ };
+ },
+ created() {
+ this.getData();
+ this.getAddress();
+ },
+ methods: {
+ getPublicImage,
+ changeTabs(index) {
+ this.paymentStatus = index;
+ this.getData();
+ },
+ getData() {
+ this.orderListloading = true;
+ let { limit, page } = this.paginationData;
+
+ let filterList = [];
+
+ if (this.paymentStatus != 0) {
+ filterList = [
+ {
+ value: this.paymentStatus == 1 ? "Success" : "WaitPay",
+ field: "State",
+ },
+ ];
+ }
+
+ let query = {
+ size: limit,
+ start: limit * page - limit,
+ sort: {
+ type: "Desc",
+ field: "CreateDate",
+ },
+ filterList,
+ };
+ this.MG.store.getUserOrderList(query).then((res) => {
+ this.orderListloading = false;
+ this.orderList = res.datas;
+ this.paginationData.totalCount = res.totalSize;
+ });
+ },
+ toPay(orderNumber) {
+ this.$router.push({
+ name: "bookStore-order",
+ query: {
+ orderNum: orderNumber,
+ },
+ });
+ },
+ handleClose(done) {
+ this.$confirm("纭畾鍙栨秷寮�鍏峰彂绁ㄥ悧?")
+ .then(() => {
+ this.drawABill = false;
+ })
+ .catch((_) => {});
+ },
+ // 鑾峰彇鎵�鏈夊湴鍧�
+ getAddress() {
+ this.loading = true;
+ this.MG.identity.getCurrentAppUser().then((res) => {
+ this.loading = false;
+ let storeInfoList = res.infoList.find((i) => i.type == "Address");
+ if (storeInfoList && storeInfoList.data) {
+ this.addressList = JSON.parse(storeInfoList.data);
+ } else {
+ // 鐢ㄦ埛涓虹涓�娆℃坊鍔犲湴鍧�锛屽垯褰撳墠鎵�閫夊湴鍧�涓洪粯璁ゅ湴鍧�
+ this.addressItem.ifdefalut = true;
+ }
+ });
+ },
+ // 鍙栨秷璁㈠崟
+ cancelOrder(orderNum) {
+ this.$confirm("纭畾鍙栨秷鏀粯", "鎻愮ず", {
+ type: "warning",
+ })
+ .then(() => {
+ let query = {
+ orderNum: orderNum,
+ };
+ this.MG.store.cancelOrder(query).then((res) => {
+ this.$message({
+ type: "success",
+ message: "璁㈠崟宸插彇娑�",
+ });
+ this.getData();
+ });
+ })
+ .catch(() => {});
+ },
+ },
+};
+</script>
+<style lang="less" scoped>
+.title {
+ font-size: 18px;
+ font-weight: 700;
+ letter-spacing: 1.8px;
+ border-top: 2px solid #008e3f;
+ line-height: 36px;
+ padding-left: 40px;
+ background: #d8f7e6;
+ line-height: 60px;
+ color: #00873c;
+ .splitline {
+ width: 1px;
+ height: 24px;
+ background-color: #008e3f;
+ }
+}
+.spaceBetween {
+ padding-left: 0;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ span {
+ font-weight: 400;
+ }
+ .paymentStatus {
+ font-weight: 700;
+ }
+ .place {
+ cursor: pointer;
+ }
+}
+.content {
+ padding: 40px 40px 0 40px;
+ .orderNum {
+ font-size: 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 40px;
+ }
+ .bookItem {
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid #eeeeee;
+ padding-bottom: 40px;
+ margin-bottom: 40px;
+ .wrapImg {
+ border: 1px solid #e6e6e6;
+ background: #ffffff;
+ width: 150px;
+ height: 200px;
+ position: relative;
+ }
+ .information {
+ width: 520px;
+ font-size: 16px;
+ .name {
+ display: inline-block;
+ width: 460px;
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 24px;
+ color: #333333;
+ }
+ .author {
+ font-weight: 400;
+ color: #666666;
+ padding: 14px 0;
+ }
+ .payPrice {
+ color: #333333;
+ padding: 14px 0;
+ span {
+ font-size: 14px;
+ color: #e50021;
+ span {
+ font-size: 24px;
+ }
+ }
+ }
+ .quantity {
+ color: #333333;
+ padding: 5px 0;
+ padding-bottom: 20px;
+ }
+ .express {
+ height: 70px;
+ background: #f2f7f4;
+ border-radius: 4px;
+ padding: 10px;
+ color: #666666;
+ font-size: 14px;
+ line-height: 24px;
+ margin-bottom: 30px;
+ }
+ .succeeded {
+ :deep(.el-button--medium) {
+ padding: 11px 27px;
+ border: 1px solid #00873c;
+ color: #00873c;
+ font-size: 16px;
+ }
+ }
+ // .unpaid {
+ // }
+ .pay {
+ :deep(.el-button--medium) {
+ padding: 11px 27px;
+ border: 1px solid #e50021;
+ color: #e50021;
+ font-size: 16px;
+ }
+ }
+ .cancel {
+ :deep(.el-button--medium) {
+ padding: 11px 27px;
+ // border: 1px solid yellow;
+ color: #fff;
+ font-size: 16px;
+ }
+ }
+ }
+ }
+}
+.pageinateBox {
+ text-align: center;
+ padding: 40px 0;
+ :deep(.el-pagination.is-background .btn-next) {
+ padding: 0 10px;
+ }
+ :deep(.el-pagination.is-background .btn-prev) {
+ padding: 0 10px;
+ }
+}
+</style>
--
Gitblit v1.9.1