ylrz_his_scrm_adminUI/src/views/course/rewardGoodsOrder/goodsOrderDetail.vue

<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%;">
    <div style="padding: 20px; background-color: #fff;">
      订单详情
    </div>

    <div class="contentx" v-if="item != null">
      <div class="desct"></div>
      <div class="order-status">
        <el-steps :active="getActiveStep(item.status)" align-center finish-status="success">
          <el-step title="待支付"></el-step>
          <el-step title="已支付"></el-step>
          <el-step title="已发货"></el-step>
          <el-step title="已完成"></el-step>
          <el-step title="已取消" v-if="item.status === -1"></el-step>
        </el-steps>
      </div>

      <el-card shadow="never" style="margin-top: 15px">
        <div class="operate-container">
          <span style="margin-left: 20px">订单状态：
            <el-tag prop="status" v-for="(ite, index) in orderStatusOptions" v-if="item.status == ite.dictValue">{{ite.dictLabel}}</el-tag>
          </span>
        </div>
        <div class="desct">
          基本信息
        </div>
        <el-descriptions title="" :column="3" border>
          <el-descriptions-item label="订单ID">
            <span>{{ item.orderId }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="订单编号">
            <span>{{ item.orderSn }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <dict-tag :options="orderStatusOptions" :value="item.status"/>
          </el-descriptions-item>
          <el-descriptions-item label="所属店铺">
            <span>{{ item.storeName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="下单用户">
            <span>{{ item.nickName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="收货人">
            <span>{{ item.userName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="订单金额">
            <span class="color-danger">￥{{ item.orderMoney }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="支付金额">
            <span class="color-danger">￥{{ item.payMoney }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="快递单号">
            <span>{{ item.deliverySn || '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="下单时间">
            <span>{{ item.createTime }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="支付时间">
            <span v-if="item.payTime">{{ item.payTime }}</span>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <span>{{ item.remark || '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="收货人电话">
            <span>{{ item.mobile || '-' }}</span>
            <el-button icon="el-icon-search"
                       size="mini"
                       v-if="item.mobile && item.mobile.indexOf('*') !== -1"
                       @click="handlePhone()"
                       style="margin-left: 20px;"
                       circle
                       v-hasPermi="['reward:rewardGoodsOrder:queryPhone']"></el-button>
          </el-descriptions-item>
          <el-descriptions-item label="收货地址">
            <span>{{ item.address || '-' }}</span>
            <el-button icon="el-icon-search"
                       size="mini"
                       v-if="item.address && item.address.indexOf('*') !== -1"
                       @click="handleAddress()"
                       style="margin-left: 20px;"
                       circle
                       v-hasPermi="['reward:rewardGoodsOrder:queryAddress']"></el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <div class="contentx" style="padding-bottom: 70px;" v-if="item != null">
      <div class="desct">
        商品信息
      </div>
      <el-table border v-if="item.goodsJson" :data="[JSON.parse(item.goodsJson)]" size="small" style="width: 100%;margin-top: 20px">
        <el-table-column label="商品图片" min-width="150" align="center">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.goodsImg"
              style="height: 80px"
              :src="scope.row.goodsImg"
              :preview-src-list="[scope.row.goodsImg]"
              fit="cover">
            </el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="商品编码" min-width="200" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.storeGoodsSn || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" min-width="300" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.goodsName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品原价" min-width="150" align="center">
          <template slot-scope="scope">
            <span>￥{{ (scope.row.opPrice || 0).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品单价" min-width="150" align="center">
          <template slot-scope="scope">
            <span>￥{{ (scope.row.price || 0).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购买数量" min-width="120" align="center">
          <template slot-scope="scope">
            <span>1</span>
          </template>
        </el-table-column>
        <el-table-column label="商品总价" min-width="150" align="center">
          <template slot-scope="scope">
            <span class="color-danger">￥{{ scope.row.price.toFixed(2) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin: 20px" v-if="item.payMoney != null">
        合计：<span class="color-danger">￥{{ (item.payMoney || 0).toFixed(2) }}</span>
      </div>
    </div>

    <div class="contentx" v-if="item != null">
      <div class="desct">
        支付信息
      </div>
      <el-table
        border
        :data="payList"
        size="small"
        style="width: 100%;margin-top: 20px">
        <el-table-column label="支付单号" align="center" prop="payCode" />
        <el-table-column label="支付金额" align="center" prop="payMoney">
          <template slot-scope="scope">
            <span>￥{{ scope.row.payMoney.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付方式" align="center" prop="payTypeCode" />
        <el-table-column label="外部订单号" align="center" prop="tradeNo" />
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="支付时间" align="center" prop="payTime" />
      </el-table>
    </div>

    <div class="contentx" v-if="item != null">
      <div class="desct">
        物流信息
      </div>
      <el-table
        border
        :data="expressList"
        size="small"
        style="width: 100%;margin-top: 20px">
        <el-table-column label="操作时间" align="center" prop="AcceptTime" />
        <el-table-column label="位置" align="center" prop="Location" />
        <el-table-column label="描述" align="center" prop="AcceptStation" />
      </el-table>
    </div>

    <div class="contentx" v-if="item != null">
      <div class="desct">
        操作记录
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in orderLogs"
          :key="index"
          :timestamp="parseTime(activity.createTime, '{y}-{m}-{d} {h}:{i}:{s}')"
        >
          {{ activity.content }}
          <el-tag size="mini" style="margin-left: 10px;">{{ activity.operator }}</el-tag>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import {
  getAddress,
  getExpress,
  getPhone,
  getRewardGoodsOrder,
  getRewardGoodsOrderPayInfo
} from '@/api/reward/rewardGoodsOrder'
import Template from '@/views/his/complaint/template.vue'

export default {
  name: "GoodsOrderDetail",
  components: { Template },
  data() {
    return {
      item: null,
      orderStatusOptions: [],
      payStatusOptions: [],
      payList: [],
      expressList: [],
      orderLogs: []
    }
  },
  created() {
    this.getDicts("sys_reward_order_status").then(response => {
      this.orderStatusOptions = response.data;
    });
    this.getDicts("sys_reward_pay_status").then(response => {
      this.payStatusOptions = response.data;
    });
  },
  methods: {
    handlePhone() {
      const orderId = this.item.orderId
      getPhone(orderId).then(response => {
        this.item.mobile = response.userPhone
      })
    },
    handleAddress() {
      const orderId = this.item.orderId
      getAddress(orderId).then(response => {
        this.item.address = response.userAddress
      })
    },
    getDetails(id) {
      getRewardGoodsOrder(id).then(response => {
        this.item = response.data;

        // 初始化支付信息
        this.payList = [];
        if (this.item.payMoney && this.item.payMoney > 0) {
          getRewardGoodsOrderPayInfo(this.item.orderSn).then(res => {
            this.payList = res.data;
          })
        }

        // 物流信息
        this.expressList = []
        if (this.item.deliverySn) {
          getExpress(this.item.orderId).then(response => {
            const data = response.data
            this.expressList = data?.Traces || []
          });
        }

        // 模拟操作记录，实际应该从后端获取
        this.orderLogs = [
          {
            content: '订单创建',
            operator: '系统',
            createTime: this.item.createTime
          }
        ];
        if (this.item.payTime) {
          this.orderLogs.push({
            content: '订单支付成功',
            operator: '系统',
            createTime: this.item.payTime
          });
        }
        if (this.item.deliveryTime) {
          this.orderLogs.push({
            content: '订单已发货',
            operator: '系统',
            createTime: this.item.deliveryTime
          });
        }
        if (this.item.finishTime) {
          this.orderLogs.push({
            content: '订单已完成',
            operator: '系统',
            createTime: this.item.finishTime
          });
        }
        if (this.item.cancelTime) {
          this.orderLogs.push({
            content: '订单已取消',
            operator: '系统',
            createTime: this.item.cancelTime
          });
        }
      })
    },
    getActiveStep(status) {
      // 根据订单状态返回当前步骤
      const statusMap = {
        '1': 0, // 待支付
        '2': 1, // 已支付
        '3': 2, // 已发货
        '4': 3, // 已完成
        '-1': 4  // 已取消
      };
      return statusMap[status] || 0;
    }
  }
}
</script>

<style scoped>
.contentx {
  height: 100%;
  background-color: #fff;
  padding: 0px 20px 20px;
  margin: 20px;
}

.desct {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #524b4a;
  font-weight: bold;
}

.color-warning {
  color: #e6a23c;
  font-weight: bold;
}

.el-descriptions-item__content {
  max-width: 150px;
  min-width: 100px;
}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}
</style>