feat: 积分订单的详情（修改物流单号，修改收货人信息，修改回寄单号，修改费用明细）弹窗开发

src/views/pointsManagement/pointsOrdeManagement/details.vue

@@ -1,9 +1,22 @@
 <script>
+import AreaCascader from '@/components/AreaCascader/index.vue';
+import ReceiverEdit from './components/ReceiverEdit.vue';
+import AfterSalesDetails from './components/AfterSalesDetails.vue';
 export default {
   name: "details",
+  components: {
+    AreaCascader,
+    ReceiverEdit,
+    AfterSalesDetails
+  },
   data() {
     return {
       orderStatus: '待发货',
+       orderStatusOption:[
+        {label:'全部',value:'1'},
+        {label:'待发货',value:'2'},
+        {label:'已发货',value:'3'}
+      ],
       orderInfo: {
         orderNo: 'DORDER2026020100001',
         product: '广誉源毛巾',
@@ -36,28 +49,13 @@ export default {
         logisticsNo: 'SF52145236366',
         cost: '200',
       },
-      // 弹窗状态
-      dialogVisible: {
-        logistics: false,
-        receiver: false
-      },
       // 物流单号表单
       logisticsForm: {
-        logisticsNo: ''
-      },
-      // 收货人信息表单
-      receiverForm: {
-        name: '',
-        phone: '',
-        province: '',
-        city: '',
-        district: '',
-        address: ''
+        logisticsNo: '',
+        type: '' // type: 'order' 表示普通物流单号，'afterSales' 表示售后物流单号
       },
-      // 省市区数据
-      provinceList: [],
-      cityList: [],
-      districtList: []
+      // 弹窗状态
+      logistics: false,
     };
   },
   methods: {
@@ -71,108 +69,68 @@ export default {
     },
     modifyLogisticsNo() {
       // 打开修改物流单号弹窗
-      this.logisticsForm.logisticsNo = this.orderInfo.logisticsNo;
-      this.dialogVisible.logistics = true;
+      this.logisticsForm = {
+        logisticsNo: this.orderInfo.logisticsNo,
+        type: 'order'
+      };
+      this.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;
+      this.$refs.receiverEditRef.getRow(this.receiverInfo)
+    },
+    handleSaveReceiverInfo(receiverData) {
+      this.receiverInfo = receiverData;
+      this.$message.success('收货人信息修改成功');
     },
     saveLogisticsNo() {
       // 保存物流单号
-      this.orderInfo.logisticsNo = this.logisticsForm.logisticsNo;
-      this.dialogVisible.logistics = false;
+      if (this.logisticsForm.type === 'order') {
+        this.orderInfo.logisticsNo = this.logisticsForm.logisticsNo;
+      } else if (this.logisticsForm.type === 'afterSales') {
+        this.afterSalesInfo.logisticsNo = this.logisticsForm.logisticsNo;
+      }
+      this.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' }
-        ];
-      }
+    //费用详情弹窗
+    viewAfterSalesDetails() {
+      this.$refs.afterSaleDetailsRef.getRow()
     },
-    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' }
-        ];
-      }
+    handleConfirmCostDetails(costData) {
+      this.$message.success('费用详情已确认');
     },
-    viewAfterSalesDetails() {
-      // 查看售后详情的逻辑
-      this.$message.info('查看售后详情');
+    editLogisticsNo() {
+      // 打开售后物流单号编辑弹窗
+      this.logisticsForm = {
+        logisticsNo: this.afterSalesInfo.logisticsNo,
+        type: 'afterSales'
+      };
+      this.logistics = true;
     },
     agreeReturn() {
       // 同意退货的逻辑
-      this.$message.info('同意退货');
+      this.$confirm('确定要同意退货吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message.success('已同意退货');
+      }).catch(() => {
+        // 取消操作
+      });
     },
     agreeRefund() {
       // 同意退款的逻辑
-      this.$message.info('同意退款');
-    },
-    editLogisticsNo() {
-      // 编辑物流单号的逻辑
-      this.$message.info('编辑物流单号');
+      this.$confirm('确定要同意退款吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message.success('已同意退款');
+      }).catch(() => {
+        // 取消操作
+      });
     }
   }
 }
@@ -272,11 +230,14 @@ export default {
               </div>
             </template>
           </el-table-column>
-          <el-table-column prop="cost" label="费用" width="100"></el-table-column>
+          <el-table-column prop="cost" label="费用" width="100">
+            <template slot-scope="scope">
+              <el-button type="primary" size="small" @click="viewAfterSalesDetails">查看详情</el-button>
+            </template>
+          </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>
@@ -285,85 +246,36 @@ export default {
         </el-table>
       </div>
     </el-card>
-    
+
     <!-- 修改物流单号弹窗 -->
     <el-dialog
-      title="修改物流单号"
-      :visible.sync="dialogVisible.logistics"
+      :title="logisticsForm.type === 'afterSales' ? '修改物流单号（寄回）' : '修改物流单号'"
+      :visible.sync="logistics"
       width="500px"
     >
-      <el-form :model="logisticsForm" label-width="100px">
+      <el-form :model="logisticsForm" label-width="120px">
         <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 @click="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>
+
+    <!-- 修改收货人信息弹窗组件 -->
+    <receiver-edit
+      ref="receiverEditRef"
+      @save="handleSaveReceiverInfo"
+    ></receiver-edit>
+
+    <!-- 售后详情弹窗组件 -->
+    <after-sales-details
+      ref="afterSaleDetailsRef"
+      :order-status-option="orderStatusOption"
+      @confirm="handleConfirmCostDetails"
+    ></after-sales-details>
   </div>
 </template>
 
@@ -475,4 +387,12 @@ export default {
       }
   }
 }
+.cost-details {
+  margin-bottom: 20px;
+
+  .add-cost-item {
+    margin-top: 10px;
+    text-align: left;
+  }
+}
 </style>

src/views/pointsManagement/pointsOrdeManagement/index.vue

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