feat: 积分订单的详情（费用明细，修改收货人信息）封装组件

src/views/pointsManagement/pointsOrdeManagement/components/AfterSalesDetails.vue

@@ -0,0 +1,113 @@
+<script>
+export default {
+  name: 'AfterSalesDetails',
+  props: {
+    orderStatusOption: {
+      type: Array,
+      default: () => [
+        {label:'全部',value:'1'},
+        {label:'待发货',value:'2'},
+        {label:'已发货',value:'3'}
+      ]
+    }
+  },
+  data() {
+    return {
+      afterSalesDetails:false,
+      costDetails: [
+        {
+          type: '换货寄回',
+          logisticsNo: '',
+          amount: ''
+        }
+      ]
+    };
+  },
+  methods: {
+    getRow(){
+      this.afterSalesDetails = true;
+    },
+    handleCancel() {
+      this.afterSalesDetails = false;
+    },
+    handleConfirm() {
+      this.$emit('confirm', this.costDetails);
+      this.afterSalesDetails = false;
+    },
+    addCostItem() {
+      // 添加费用项
+      this.costDetails.push({
+        type: '',
+        logisticsNo: '',
+        amount: ''
+      });
+    },
+    removeCostItem(index) {
+      // 移除费用项
+      if (this.costDetails.length > 1) {
+        this.costDetails.splice(index, 1);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <el-dialog
+    title="费用详情"
+    :visible.sync="afterSalesDetails"
+    width="600px"
+  >
+    <div class="cost-details">
+      <el-table :data="costDetails" style="width: 100%" border>
+        <el-table-column prop="type" label="费用类型" width="150">
+            <template slot-scope="scope">
+              <DictSelect v-model="scope.row.type" :dictOptions="orderStatusOption" placeholder="请选择"/>
+            </template>
+          </el-table-column>
+        <el-table-column prop="logisticsNo" label="物流单号" width="200">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.logisticsNo" placeholder="请输入"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="amount" label="金额">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.amount" placeholder="请输入" type="number"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="removeCostItem(scope.$index)"
+              :disabled="costDetails.length <= 1"
+            >
+             删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="add-cost-item">
+        <el-button type="text" size="small" @click="addCostItem">
+          <i class="el-icon-plus"></i> 添加费用项
+        </el-button>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确认</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<style scoped>
+.cost-details {
+  margin-bottom: 20px;
+
+  .add-cost-item {
+    margin-top: 10px;
+    text-align: left;
+  }
+}
+</style>

src/views/pointsManagement/pointsOrdeManagement/components/ReceiverEdit.vue

@@ -0,0 +1,93 @@
+<script>
+import AreaCascader from '@/components/AreaCascader/index.vue';
+export default {
+  name: 'ReceiverEdit',
+  components: {
+    AreaCascader
+  },
+  data() {
+    return {
+      receiver:false,
+      form: {
+        name: '',
+        phone: '',
+        areaCode: [],
+        address: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入收货人姓名', trigger: 'blur' },
+          { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, message: '请输入收货人手机号', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
+        ],
+        areaCode: [
+          { required: true, message: '请选择所在地区', trigger: 'change' }
+        ],
+        address: [
+          { required: true, message: '请输入详细地址', trigger: 'blur' },
+          { min: 5, max: 200, message: '详细地址长度在 5 到 200 个字符', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  methods: {
+    getRow(receiverInfo){
+      this.receiver = true;
+      this.form = receiverInfo;
+    },
+   handleCancel() {
+     this.receiver = false;
+    },
+    handleSave() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$emit('save', {
+            name: this.form.name,
+            phone: this.form.phone,
+            address: this.form.address
+          });
+          this.receiver = false;
+        }
+      });
+    }
+  }
+};
+</script>
+
+<template>
+  <el-dialog
+    title="修改收货人信息"
+    :visible.sync="receiver"
+    width="600px"
+  >
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
+      <el-form-item label="收货人姓名" prop="name">
+        <el-input v-model="form.name" placeholder="请输入收货人姓名"></el-input>
+      </el-form-item>
+      <el-form-item label="收货人手机号" prop="phone">
+        <el-input v-model="form.phone" placeholder="请输入收货人手机号"></el-input>
+      </el-form-item>
+      <el-form-item label="所在地区" prop="areaCode">
+        <area-cascader v-model="form.areaCode" placeholder="请选择省市区"></area-cascader>
+      </el-form-item>
+      <el-form-item label="详细地址" prop="address">
+        <el-input
+          v-model="form.address"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入详细地址"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="handleSave">保存</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<style scoped>
+</style>