From 089bf5d2378b3c4a61d795b2a92bede2c193b771 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:22:58 +0800
Subject: [PATCH] 1
---
src/views/modules/order/orderInfo.vue | 490 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 490 insertions(+), 0 deletions(-)
diff --git a/src/views/modules/order/orderInfo.vue b/src/views/modules/order/orderInfo.vue
new file mode 100644
index 0000000..7494655
--- /dev/null
+++ b/src/views/modules/order/orderInfo.vue
@@ -0,0 +1,490 @@
+<template>
+ <el-dialog :title="!dataForm.orderNumber ? '新增' : '查看'" :close-on-click-modal="false" :visible.sync="visible" width="80%">
+ <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+ <div class="main">
+ <div class="content">
+ <div class="order-number">
+ <div class="num-cont">
+ <el-form-item label="订单编号:">
+ <span class="text">{{dataForm.orderNumber}}</span>
+ </el-form-item>
+ <el-form-item>
+ <el-steps :active="stepsStatus" align-center :process-status="dataForm.status == 6 ? 'error':'wait'">
+ <el-step title="提交订单" :description="dataForm.orderTime"></el-step>
+ <el-step title="买家已付款" :description="dataForm.payTime"></el-step>
+ <el-step title="卖家已发货" v-if="dataForm.orderType !== 1" :description="dataForm.dvyTime"></el-step>
+ <el-step title="买家已收货" v-if="dataForm.orderType !== 1" :description="dataForm.finallyTime"></el-step>
+ </el-steps>
+ </el-form-item>
+ </div>
+ </div>
+ <div class="order-state">
+ <div class="state-cont">
+ <div class="state-title">
+ <el-form-item label="订单状态:">
+ <template slot-scope="scope">
+ <el-tag v-if="dataForm.status === 1" size="small" type="warning">待付款</el-tag>
+ <el-tag v-if="dataForm.status === 2 && dataForm.orderType !== 1" size="small" type="warning">待发货</el-tag>
+ <el-tag v-if="dataForm.status === 3 && dataForm.orderType !== 1" size="small" type="warning">待收货</el-tag>
+ <el-tag v-if="dataForm.status === 4 && dataForm.orderType !== 1" size="small" type="warning">待评价</el-tag>
+ <el-tag v-if="dataForm.status === 5" size="small" type="success">成功</el-tag>
+ <el-tag v-if="dataForm.status === 6" size="small" type="danger">失败</el-tag>
+ </template>
+ </el-form-item>
+ <el-form-item>
+ <el-row>
+ <el-button type="primary" v-if="dataForm.status === 2 && dataForm.orderType !== 1" plain @click="changeOrder(dataForm.orderNumber)">发货</el-button>
+ <!-- <el-button type="info" plain>打印</el-button> -->
+ </el-row>
+ </el-form-item>
+ </div>
+ <div class="order-info">
+ <div class="order-details">
+ <div class="detail-title">
+ <img src="~@/assets/img/car.png" alt="">
+ <span class="prompt">买家付款后才可以发货</span>
+ </div>
+ <div class="detail-cont">
+ <div class="detail01">
+ <img src="~@/assets/img/address.png" alt="">
+ <div class="text-width">
+ <!-- <span class="revise-addr" @click="changeAddr(dataForm.addrOrderId)">
+ <img src="~@/assets/img/revise.png" alt=""/>修改地址
+ </span> -->
+ <el-form-item label="收货人:">
+ <span>{{dataForm.userAddrOrder.receiver}}</span>
+ </el-form-item>
+ <el-form-item label="手机:">
+ <span>{{dataForm.userAddrOrder.mobile}}</span>
+ </el-form-item>
+ <el-form-item label="收货地址">
+ <span>{{dataForm.userAddrOrder.province}}{{dataForm.userAddrOrder.city}}{{dataForm.userAddrOrder.area}}{{dataForm.userAddrOrder.addr}}</span>
+ </el-form-item>
+ </div>
+ </div>
+ <div class="detail01">
+ <img src="~@/assets/img/invoice.png" alt="">
+ <span>不开发票</span>
+ </div>
+ </div>
+ </div>
+ <div class="buyers">
+ <div class="detail-title">
+ <img src="~@/assets/img/buyer.png" alt="" style="margin-right:15px">
+ <el-form-item label="买家:" style="margin-top:22px" label-width="44px">
+ <span>{{dataForm.nickName}}</span>
+ </el-form-item>
+ </div>
+ <div class="buyers-info">
+ <div class="detail02">
+ <img src="~@/assets/img/message.png" alt="">
+ <div class="text-width">
+ <span>买家备注:</span>
+ <br>
+ <span>{{dataForm.remarks}}</span>
+ </div>
+ </div>
+ <!-- <div class="detail02">
+ <img src="~@/assets/img/remarks.png" alt="" width="18">
+ <div class="text-width">
+ <span>卖家备注：</span><br>
+ <span>给我加多点香菜</span>
+ </div>
+ </div> -->
+ </div>
+ </div>
+ </div>
+ <div class="item-list">
+ <el-table :data="dataForm.orderItems" border>
+ <el-table-column prop="" label="商品">
+ <template slot-scope="scope">
+ <div class="prod-con">
+ <img :src="resourcesUrl + scope.row.pic" class="prod-img"/>
+ <span>{{scope.row.prodName}}</span>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="price" label="单价" width="180" align="center">
+ <template slot-scope="scope">
+ <span>{{scope.row.price}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="count" label="数量" width="180" align="center">
+ <template slot-scope="scope">
+ <span>{{scope.row.prodCount}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="totalPrice" label="总价" width="180" align="center">
+ <template slot-scope="scope">
+ <span>{{scope.row.productTotalAmount}}</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="item-info">
+ <el-form-item label="商品总价:">
+ <span class="text">￥{{dataForm.total}}</span>
+ </el-form-item>
+ <!-- <el-form-item label="店铺优惠:">
+ <span class="text">￥15.00</span>
+ </el-form-item> -->
+ <!-- <el-form-item label="积分抵扣:">
+ <span class="text">￥15.00</span>
+ </el-form-item> -->
+ <!-- <el-form-item label="发票费用:">
+ <span class="text">￥15.00</span>
+ </el-form-item> -->
+ <el-form-item label="配送费用:" v-if="dataForm.freightAmount">
+ <span class="text">￥{{dataForm.freightAmount}}</span>
+ </el-form-item>
+ <el-form-item label="应付金额:">
+ <span class="text">￥{{dataForm.actualTotal}}</span>
+ </el-form-item>
+ </div>
+ </div>
+ </div>
+ <div class="order-log">
+ <div class="log-title">
+ <span>订单日志</span>
+ </div>
+ <div class="log-cont">
+ <el-form-item v-if="dataForm.orderTime" label-width="10px">
+ <span>{{dataForm.orderTime}} {{dataForm.nickName}} 创建订单（成功）</span>
+ </el-form-item>
+ <el-form-item v-if="dataForm.updateTime" label-width="10px">
+ <span>{{dataForm.updateTime}} {{dataForm.nickName}} 订单更新（成功）</span>
+ </el-form-item>
+ <el-form-item v-if="dataForm.payTime" label-width="10px">
+ <span>{{dataForm.payTime}} {{dataForm.nickName}} 订单付款（成功）</span>
+ </el-form-item>
+ <el-form-item v-if="dataForm.dvyTime" label-width="10px">
+ <span>{{dataForm.dvyTime}} {{dataForm.nickName}} 订单发货（成功）</span>
+ </el-form-item>
+ <el-form-item v-if="dataForm.finallyTime" label-width="10px">
+ <span>{{dataForm.finallyTime}} {{dataForm.nickName}} 完成订单（成功）</span>
+ </el-form-item>
+ <el-form-item v-if="dataForm.cancelTime" label-width="10px">
+ <span>{{dataForm.cancelTime}} {{dataForm.nickName}} 取消订单（成功）</span>
+ </el-form-item>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-form>
+ <!-- 弹窗, 新增 / 修改 -->
+ <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
+ <devy-add v-if="devyVisible" ref="devyAdd" @refreshDataList="getDataList"></devy-add>
+ </el-dialog>
+</template>
+
+<script>
+ // import AddOrUpdate from './order-addr'
+ import DevyAdd from './order-devy'
+ export default {
+ data () {
+ return {
+ visible: false,
+ dataForm: {
+ orderId: 0,
+ orderNumber: '',
+ remarks: '',
+ total: 0,
+ actualTotal: 0,
+ dvyType: '',
+ status: 1,
+ addrOrderId: 0,
+ nickName: '',
+ orderItems: [],
+ orderTime: '',
+ updateTime: '',
+ payTime: '',
+ dvyTime: '',
+ finallyTime: '',
+ cancelTime: '',
+ userAddrOrder: {}
+ },
+ resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
+ addOrUpdateVisible: false,
+ devyVisible: false
+ }
+ },
+ components: {
+ // AddOrUpdate,
+ DevyAdd
+ },
+ watch: {
+ visible: function () {
+ if (!this.visible) {
+ this.devyVisible = false
+ this.addOrUpdateVisible = false
+ }
+ }
+ },
+ computed: {
+ stepsStatus: function () {
+ if (this.dataForm.finallyTime) {
+ return 4
+ }
+ if (this.dataForm.dvyTime) {
+ return 3
+ }
+ if (this.dataForm.payTime) {
+ return 2
+ }
+ if (this.dataForm.orderTime) {
+ return 1
+ }
+ }
+ },
+ methods: {
+ init (orderNumber) {
+ this.dataForm.orderNumber = orderNumber || 0
+ this.visible = true
+ this.$nextTick(() => {
+ this.$refs['dataForm'].resetFields()
+ })
+ if (this.dataForm.orderNumber) {
+ // 修改
+ this.$http({
+ url: this.$http.adornUrl(`/order/order/orderInfo/${this.dataForm.orderNumber}`),
+ method: 'get',
+ params: this.$http.adornParams()
+ }).then(({data}) => {
+ this.dataForm = data
+ })
+ }
+ },
+ getDataList () {
+ this.$http({
+ url: this.$http.adornUrl(`/order/order/orderInfo/${this.dataForm.orderNumber}`),
+ method: 'get',
+ params: this.$http.adornParams()
+ }).then(({data}) => {
+ this.dataForm = data
+ })
+ },
+ // 表单提交
+ dataFormSubmit () {
+ },
+ // 发货
+ changeOrder (orderNumber) {
+ this.devyVisible = true
+ this.$nextTick(() => {
+ this.$refs.devyAdd.init(orderNumber, this.dataForm.dvyId, this.dataForm.dvyFlowId)
+ })
+ },
+ // 修改备注
+ changeRemarks () {
+ },
+ // 修改地址
+ changeAddr (val) {
+ this.addOrUpdateVisible = true
+ this.$nextTick(() => {
+ this.$refs.addOrUpdate.init(val)
+ })
+ }
+ }
+ }
+</script>
+
+
+<style lang="scss" scoped>
+.main {
+ height: 100%;
+ width: 100%;
+ font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti,
+ "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+ color: #495060;
+}
+
+.content {
+ margin: 0 20px;
+}
+
+.content .steps {
+ margin-top: 50px;
+}
+
+.order-number .number-text {
+ font-weight: bold;
+}
+
+.order-number .text {
+ font-size: 14px;
+ color: #8a8a8a;
+}
+
+.order-state .state-title {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.title-left span {
+ font-weight: bold;
+}
+
+.title-left .text {
+ color: red;
+}
+
+.state-title .title-mid {
+ display: flex;
+ align-items: center;
+}
+
+.title-mid img {
+ width: 18px;
+ height: 18px;
+}
+
+.title-mid .mid-text {
+ color: red;
+}
+
+.title-mid .text {
+ color: #8a8a8a;
+}
+
+.content .order-state {
+ position: relative;
+ margin-top: 50px;
+ border-bottom: 1px solid #e9eaec;
+}
+
+.order-state .order-info {
+ width: 100%;
+ border-top: 1px solid #e9eaec;
+ margin: 50px 0;
+ display: flex;
+}
+
+.order-info img {
+ width: 18px !important;
+ height: 18px !important;
+ margin-right: 15px;
+}
+
+.order-info .detail-title {
+ height: 50px;
+ line-height: 50px;
+ display: flex;
+ align-items: center;
+}
+
+.order-info .order-details {
+ width: 50%;
+ border-right: 1px solid #e9eaec;
+}
+
+.order-info .detail-cont {
+ position: relative;
+}
+
+.detail-cont .detail01 {
+ display: flex;
+ height: 100%;
+ line-height: 25px;
+ margin-top: 15px;
+}
+
+.detail01 .text-width {
+ width: 100%;
+}
+
+.detail02 .text-width {
+ width: 100%;
+}
+
+.detail-cont .revise-addr {
+ color: #4395ff;
+ position: absolute;
+ top: 15px;
+ right: 0;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+}
+
+.order-info .detail-cont {
+ border-top: 1px dashed #e9eaec;
+ margin: 15px 20px 0 0;
+}
+
+.order-info .buyers {
+ width: 50%;
+ margin-left: 20px;
+}
+
+.buyers .buyers-info {
+ border-top: 1px dashed #e9eaec;
+ margin-top: 15px;
+ position: relative;
+}
+
+.buyers .detail02 {
+ display: flex;
+ height: 100%;
+ line-height: 25px;
+ margin-top: 15px;
+}
+
+.buyers .revise-remarks {
+ color: #4395ff;
+ position: absolute;
+ top: 15px;
+ right: 0;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+}
+
+.order-state .item-info {
+ padding-left: 80%;
+ margin: 25px 0;
+}
+
+.item-info span {
+ margin-bottom: 15px;
+ line-height: 30px;
+}
+
+.item-info .text {
+ position: absolute;
+ right: 0;
+}
+
+.item-info .amount {
+ font-size: 18px;
+ color: red;
+}
+
+.order-log .log-title {
+ height: 50px;
+ width: 100%;
+ line-height: 50px;
+ font-weight: bold;
+ /* border-bottom: 1px dashed #e9eaec; */
+}
+
+.order-log .log-cont {
+ /* margin-top: 15px; */
+ color: #4395ff;
+}
+.order-log .log-cont .el-form-item__content {
+ line-height: 1.5em;
+}
+
+.item-list .prod-con {
+ display: flex;
+}
+.item-list .prod-con .prod-img {
+ width: 100px;
+ height: 100px;
+ margin-right: 8px;
+}
+</style>
+
+
+
--
Gitblit v1.9.3