feat: 积分订单的详情界面

src/router/index.js

@@ -175,7 +175,13 @@ export const constantRoutes = [
     hidden: true,
     redirect: 'noredirect',
     children: [
-
+      {
+        path: '/pointsManagement/details',
+        component: () => import('@/views/pointsManagement/pointsOrdeManagement/details'),
+        name: 'details',
+        props:true,
+        meta: { title: '积分订单详情' },
+      },
     ]
   },
 

src/views/pointsManagement/pointsOrdeManagement/details.vue

@@ -0,0 +1,478 @@
+<script>
+export default {
+  name: "details",
+  data() {
+    return {
+      orderStatus: '待发货',
+      orderInfo: {
+        orderNo: 'DORDER2026020100001',
+        product: '广誉源毛巾',
+        quantity: '3',
+        actualPrice: '￥10+1000积分',
+        customerPhone: '19900001234',
+        orderTime: '2026-1-27 10:00:00',
+        shippingTime: '2026-1-27 10:00:00',
+        logisticsNo: 'SF2014523698',
+        remark: '尽快发货尽快发货尽快发货尽快发货，'
+      },
+      receiverInfo: {
+        name: '王五',
+        phone: '19900004458',
+        address: '山西省太原市万柏林区煤气化小西区35号'
+      },
+      productList: [
+        {
+          image: '/profile/upload/2026/01/27/美女技师1_20260127104524A001.png',
+          name: '广誉源毛巾',
+          spec: '白色',
+          price: '300',
+          actualPrice: '25'
+        }
+      ],
+      afterSalesInfo: {
+        type: '1',
+        applyTime: '2026-1-27 10:00:00',
+        reason: '不想要了',
+        logisticsNo: 'SF52145236366',
+        cost: '200',
+      },
+      // 弹窗状态
+      dialogVisible: {
+        logistics: false,
+        receiver: false
+      },
+      // 物流单号表单
+      logisticsForm: {
+        logisticsNo: ''
+      },
+      // 收货人信息表单
+      receiverForm: {
+        name: '',
+        phone: '',
+        province: '',
+        city: '',
+        district: '',
+        address: ''
+      },
+      // 省市区数据
+      provinceList: [],
+      cityList: [],
+      districtList: []
+    };
+  },
+  methods: {
+    closeDialog() {
+      this.$tab.closePage(this.$route).then(({ visitedViews }) => {
+          const latestView = visitedViews.slice(-1)[0]
+          if (latestView) {
+            this.$router.push(latestView.fullPath)
+          }
+      })
+    },
+    modifyLogisticsNo() {
+      // 打开修改物流单号弹窗
+      this.logisticsForm.logisticsNo = this.orderInfo.logisticsNo;
+      this.dialogVisible.logistics = true;
+    },
+    modifyReceiverInfo() {
+      // 打开修改收货人信息弹窗
+      this.receiverForm = {
+        name: this.receiverInfo.name,
+        phone: this.receiverInfo.phone,
+        province: '',
+        city: '',
+        district: '',
+        address: this.receiverInfo.address
+      };
+      // 初始化省市区数据（实际项目中应该从接口获取）
+      this.initProvinceList();
+      this.dialogVisible.receiver = true;
+    },
+    saveLogisticsNo() {
+      // 保存物流单号
+      this.orderInfo.logisticsNo = this.logisticsForm.logisticsNo;
+      this.dialogVisible.logistics = false;
+      this.$message.success('物流单号修改成功');
+    },
+    saveReceiverInfo() {
+      // 保存收货人信息
+      this.receiverInfo = {
+        name: this.receiverForm.name,
+        phone: this.receiverForm.phone,
+        address: `${this.receiverForm.province}${this.receiverForm.city}${this.receiverForm.district}${this.receiverForm.address}`
+      };
+      this.dialogVisible.receiver = false;
+      this.$message.success('收货人信息修改成功');
+    },
+    initProvinceList() {
+      // 初始化省份数据（实际项目中应该从接口获取）
+      this.provinceList = [
+        { label: '山西省', value: '140000' },
+        { label: '北京市', value: '110000' },
+        { label: '上海市', value: '310000' }
+      ];
+    },
+    handleProvinceChange(value) {
+      // 省份变化时更新城市数据
+      this.receiverForm.city = '';
+      this.receiverForm.district = '';
+      this.cityList = [];
+      this.districtList = [];
+      
+      // 实际项目中应该根据省份获取城市数据
+      if (value === '140000') {
+        this.cityList = [
+          { label: '太原市', value: '140100' },
+          { label: '大同市', value: '140200' }
+        ];
+      } else if (value === '110000') {
+        this.cityList = [
+          { label: '北京市', value: '110100' }
+        ];
+      } else if (value === '310000') {
+        this.cityList = [
+          { label: '上海市', value: '310100' }
+        ];
+      }
+    },
+    handleCityChange(value) {
+      // 城市变化时更新区县数据
+      this.receiverForm.district = '';
+      this.districtList = [];
+      
+      // 实际项目中应该根据城市获取区县数据
+      if (value === '140100') {
+        this.districtList = [
+          { label: '小店区', value: '140105' },
+          { label: '迎泽区', value: '140106' }
+        ];
+      } else if (value === '110100') {
+        this.districtList = [
+          { label: '朝阳区', value: '110105' },
+          { label: '海淀区', value: '110108' }
+        ];
+      } else if (value === '310100') {
+        this.districtList = [
+          { label: '浦东新区', value: '310115' },
+          { label: '黄浦区', value: '310101' }
+        ];
+      }
+    },
+    viewAfterSalesDetails() {
+      // 查看售后详情的逻辑
+      this.$message.info('查看售后详情');
+    },
+    agreeReturn() {
+      // 同意退货的逻辑
+      this.$message.info('同意退货');
+    },
+    agreeRefund() {
+      // 同意退款的逻辑
+      this.$message.info('同意退款');
+    },
+    editLogisticsNo() {
+      // 编辑物流单号的逻辑
+      this.$message.info('编辑物流单号');
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="app-container">
+    <div class="order-header">
+      <h2 class="order-title">订单详情</h2>
+      <el-button type="primary" size="small" @click="closeDialog">关闭</el-button>
+    </div>
+
+    <el-card class="box-card">
+      <div class="order-status-section">
+        <div class="order-status">
+          <span class="status-label">当前订单状态：</span>
+          <span class="status-value">{{ orderStatus }}</span>
+        </div>
+        <div class="order-actions">
+          <el-button type="success" size="small" @click="modifyLogisticsNo">修改物流单号</el-button>
+          <el-button type="success" size="small" @click="modifyReceiverInfo">修改收货人信息</el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span class="section-title">基本信息</span>
+      </div>
+      <div class="info-table">
+        <el-table :data="[orderInfo]" style="width: 100%; margin-bottom: 20px;">
+          <el-table-column prop="orderNo" label="订单号" width="200"></el-table-column>
+          <el-table-column prop="product" label="商品"></el-table-column>
+          <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
+          <el-table-column prop="actualPrice" label="实付价格" width="120"></el-table-column>
+          <el-table-column prop="customerPhone" label="客户手机号" width="150"></el-table-column>
+          <el-table-column prop="orderTime" label="下单时间" width="180"></el-table-column>
+          <el-table-column prop="shippingTime" label="发货时间" width="180"></el-table-column>
+          <el-table-column prop="logisticsNo" label="物流单号"></el-table-column>
+        </el-table>
+        <div class="order-remark">
+          <div class="remark-label">订单备注：</div>
+          <div class="remark-content">{{ orderInfo.remark }}</div>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span class="section-title">收货人信息</span>
+      </div>
+      <div class="info-table">
+        <el-table :data="[receiverInfo]" style="width: 100%;">
+          <el-table-column prop="name" label="收货人" width="150"></el-table-column>
+          <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
+          <el-table-column prop="address" label="收货地址"></el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span class="section-title">商品信息</span>
+      </div>
+      <div class="info-table">
+        <el-table :data="productList" style="width: 100%;">
+          <el-table-column label="商品图片" width="100">
+            <template slot-scope="scope">
+              <img v-if="scope.row.image" :src="scope.row.image" class="product-image" alt="商品图片">
+              <span v-else>无图片</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="商品名称"></el-table-column>
+          <el-table-column prop="spec" label="规格" width="150"></el-table-column>
+          <el-table-column prop="price" label="售价" width="100"></el-table-column>
+          <el-table-column prop="actualPrice" label="实付" width="100"></el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span class="section-title">售后信息</span>
+      </div>
+      <div class="info-table">
+        <el-table :data="[afterSalesInfo]" style="width: 100%;">
+          <el-table-column prop="type" label="售后类型" width="120"></el-table-column>
+          <el-table-column prop="applyTime" label="申请时间" width="180"></el-table-column>
+          <el-table-column prop="reason" label="申请原因"></el-table-column>
+          <el-table-column label="物流单号（寄回）" width="200">
+            <template slot-scope="scope">
+              <div class="logistics-info">
+                <span>{{ scope.row.logisticsNo }}</span>
+                <el-button type="text" size="small" @click="editLogisticsNo">
+                  <i class="el-icon-edit"></i>
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="cost" label="费用" width="100"></el-table-column>
+          <el-table-column label="操作" width="300">
+            <template slot-scope="scope">
+              <div class="after-sales-actions">
+                <el-button type="primary" size="small" @click="viewAfterSalesDetails">查看详情</el-button>
+                <el-button type="success" size="small" @click="agreeReturn">同意退货</el-button>
+                <el-button type="success" size="small" @click="agreeRefund">同意退款</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+    
+    <!-- 修改物流单号弹窗 -->
+    <el-dialog
+      title="修改物流单号"
+      :visible.sync="dialogVisible.logistics"
+      width="500px"
+    >
+      <el-form :model="logisticsForm" label-width="100px">
+        <el-form-item label="物流单号">
+          <el-input v-model="logisticsForm.logisticsNo" placeholder="请输入物流单号"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible.logistics = false">取消</el-button>
+        <el-button type="primary" @click="saveLogisticsNo">保存</el-button>
+      </span>
+    </el-dialog>
+    
+    <!-- 修改收货人信息弹窗 -->
+    <el-dialog
+      title="修改收货人信息"
+      :visible.sync="dialogVisible.receiver"
+      width="600px"
+    >
+      <el-form :model="receiverForm" label-width="120px">
+        <el-form-item label="收货人姓名">
+          <el-input v-model="receiverForm.name" placeholder="请输入收货人姓名"></el-input>
+        </el-form-item>
+        <el-form-item label="收货人手机号">
+          <el-input v-model="receiverForm.phone" placeholder="请输入收货人手机号"></el-input>
+        </el-form-item>
+        <el-form-item label="所在地区">
+          <el-row :gutter="10">
+            <el-col :span="8">
+              <el-select v-model="receiverForm.province" placeholder="请选择省份" @change="handleProvinceChange">
+                <el-option
+                  v-for="item in provinceList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.label"
+                ></el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-select v-model="receiverForm.city" placeholder="请选择城市" @change="handleCityChange">
+                <el-option
+                  v-for="item in cityList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.label"
+                ></el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-select v-model="receiverForm.district" placeholder="请选择区县">
+                <el-option
+                  v-for="item in districtList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.label"
+                ></el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="详细地址">
+          <el-input
+            v-model="receiverForm.address"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入详细地址"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible.receiver = false">取消</el-button>
+        <el-button type="primary" @click="saveReceiverInfo">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+  background-color: #f0f2f5;
+  min-height: 100vh;
+
+  .order-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .order-title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #303133;
+      margin: 0;
+    }
+  }
+
+  .box-card {
+    margin-bottom: 20px;
+
+    .section-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #303133;
+      padding-left: 10px;
+      border-left: 4px solid #409EFF;
+    }
+
+    .order-status-section {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 0;
+
+      .order-status {
+        .status-label {
+          font-size: 14px;
+          color: #606266;
+        }
+        .status-value {
+          font-size: 14px;
+          font-weight: bold;
+          color: #f56c6c;
+          margin-left: 5px;
+        }
+      }
+
+      .order-actions {
+        display: flex;
+        gap: 10px;
+      }
+    }
+
+    .info-table {
+        padding: 10px 0;
+
+        .el-table {
+          margin-bottom: 20px;
+        }
+
+        .order-remark {
+          display: flex;
+          margin-top: 10px;
+
+          .remark-label {
+            font-size: 14px;
+            font-weight: bold;
+            color: #303133;
+            width: 80px;
+            display: flex;
+            align-items: center;
+          }
+
+          .remark-content {
+            flex: 1;
+            font-size: 14px;
+            color: #606266;
+            padding: 10px;
+            border: 1px solid #ebeef5;
+            min-height: 40px;
+            border-radius: 4px;
+          }
+        }
+
+        .product-image {
+          width: 60px;
+          height: 60px;
+          object-fit: cover;
+          border-radius: 4px;
+        }
+
+        .logistics-info {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+        }
+
+        .after-sales-actions {
+          display: flex;
+          gap: 8px;
+          flex-wrap: wrap;
+        }
+      }
+  }
+}
+</style>

src/views/pointsManagement/pointsOrdeManagement/index.vue

@@ -176,7 +176,12 @@ export default {
   methods: {
     /** 查看详情 */
     handleView(row) {
-
+      this.$router.push({
+        path: "./details",
+        query: {
+          id: row.id,
+        },
+      });
     },
   }
 };