售后相关改动 内容管理改动

mayf

2024-08-23 8db1014ad0c02e88609ef3e46a0236f40820ed1d

售后相关改动
内容管理改动

 assets/main.scss

@@ -120,4 +120,10 @@
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  &__line {
    width: calc(100% + 48px);
    height: 10px;
    background-color: $bg-color;
    margin: 20px -24px;
  }
}

 assets/variable.scss

@@ -6,7 +6,7 @@
$success-color: #67c23a;
$padding-vertical: 24px;
$padding-horizontal: 24px;
$bg-color: #f5f6fa;
$bg-color: #ebf2f9;
$page-padding: 20px;
$danger-color: rgb(245, 108, 108);
$warning-color: #e6a23c;

 components/order/after-sale-table.vue

对比新文件
@@ -0,0 +1,139 @@
<template>
  <div class="after-sale-table">
    <div class="table-header">
      <div class="table-th">商品信息</div>
      <div class="table-th">合计详情</div>
      <div class="table-th !flex-none w-120">供应商信息</div>
      <div class="table-th">收货人信息</div>
      <div class="table-th !flex-none w-180">操作</div>
    </div>
    <div v-for="item in list" :key="item.id" class="table-item">
      <div class="table-item__title">
        <span class="font-bold">订单号：{{ item.orderNo }}</span>
        <span class="font-bold">售后单号：{{ item.salesNo }}</span>
        <span>申请时间：{{ item.createTime }}</span>
        <span
          >售后状态：<span
            :class="{ 'text-primary': item.status === 'PENDING' }"
            >{{ item.statusStr }}</span
          ></span
        >
        <el-tag v-if="item.title" type="danger" size="mini" class="ml-4"
          >第二次售后</el-tag
        >
      </div>
      <div class="table-body">
        <div class="table-td">
          <div class="flex">
            <el-bus-image :src="item.flowerCover" class="w-60 h-60 mr-8" />
            <div class="leading-20">
              <div class="text-14 font-bold">
                {{ item.flowerName }} × {{ item.flowerNum }}
              </div>
              <div class="leading-20">
                <span>等级：{{ item.flowerLevelStr }}</span>
                <span class="ml-8">颜色：{{ item.flowerColor }}</span>
              </div>
              <div class="leading-20">
                <span>单价：¥{{ item.price }}</span>
                <span class="ml-8">订单总额：¥{{ item.total }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="table-td">
          <div class="leading-20">申请数量：{{ item.num }}</div>
          <div class="leading-20">实际退款：{{ item.totalFee }}</div>
          <div class="leading-20 flex">
            申请理由：
            <div class="flex-1 text-overflow-2 w-0">{{ item.reason }}</div>
          </div>
        </div>
        <div class="table-td !flex-none w-120 flex items-center">
          {{ item.supplierName }}
        </div>
        <div class="table-td">
          <div class="leading-20">姓名：{{ item.customer }}</div>
          <div class="leading-20">联系方式：{{ item.customerTel }}</div>
          <div class="leading-20 flex">
            用户地址：
            <div class="flex-1 w-0">
              {{ item.customerProvince }}{{ item.customerCity
              }}{{ item.customerRegion }}{{ item.customerAddress }}
            </div>
          </div>
        </div>
        <div class="table-td !flex-none w-180 flex items-center">
          <el-button type="text" @click="onDetail(item)">查看详情</el-button>
          <el-button type="text" @click="onHandle(item)">售后处理</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    onDetail(item) {
      this.$emit('detail', item)
    },
    onHandle(item) {
      this.$emit('handle', item)
    },
  },
}
</script>

<style lang="scss" scoped>
.after-sale-table {
  .table-header {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: $main-title-color;
    background-color: #f4f4f5;
    .table-th {
      flex: 1;
      height: 45px;
      line-height: 45px;
      padding: 0 10px;
      font-weight: bold;
    }
  }
  .table-item {
    margin-top: 10px;
    border-bottom: 1px solid #eee;
    &__title {
      height: 35px;
      line-height: 35px;
      background-color: #f4f4f5;
      font-size: 14px;
      color: $main-title-color;
      padding: 0 10px;
      & > span {
        margin-right: 10px;
      }
    }
    .table-body {
      display: flex;
      align-items: stretch;
      font-size: 12px;
      color: $main-title-color;
      .table-td {
        flex: 1;
        padding: 15px 10px;
        &:not(:last-child) {
          border-right: 1px solid #eee;
        }
      }
    }
  }
}
</style>

 components/order/video-list.vue

对比新文件
@@ -0,0 +1,30 @@
<template>
  <div class="video-list">
    <video
      v-for="(item, index) in value"
      :key="index"
      controls
      width="300px"
      height="200"
      class="mr-20 mb-15"
    >
      <source :src="item" />
    </video>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

<style lang="scss" scoped>
.video-list {
}
</style>

 components/simple-text.vue

对比新文件
@@ -0,0 +1,29 @@
<template>
  <div class="simple-text" :class="{ 'is-primary': type === 'primary' }">
    {{ value }}
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: null,
    },
    type: {
      type: String,
      default: '',
    },
  },
}
</script>

<style lang="scss" scoped>
.simple-text {
  display: inline-block;
  &.is-primary {
    color: $primary-color;
  }
}
</style>

 layouts/default.vue

@@ -67,7 +67,7 @@
  }
  &__main {
    flex: 1;
    background-color: #ebf2f9;
    background-color: $bg-color;
    overflow: auto;
    padding: 20px;
  }

 pages/content/advertisement.vue

@@ -8,6 +8,7 @@
    return {
      tableConfig: {
        url: 'flower/api/advertisement/page',
        dialogNeedRequest: true,
        persistSelection: true,
        columns: [
          { type: 'selection' },

 pages/content/banner.vue

@@ -8,6 +8,7 @@
    return {
      tableConfig: {
        url: 'flower/api/banner/page',
        dialogNeedRequest: true,
        persistSelection: true,
        columns: [
          { type: 'selection' },

 pages/content/notice.vue

@@ -8,6 +8,7 @@
    return {
      tableConfig: {
        url: 'flower/api/announcement/page',
        dialogNeedRequest: true,
        persistSelection: true,
        columns: [
          { type: 'selection' },

 pages/feedback.vue

对比新文件
@@ -0,0 +1,155 @@
<template>
  <el-bus-crud ref="crud" v-bind="tableConfig" />
</template>

<script>
import { dateRangeOptions } from '@/utils/options'
import CustomDateRange from '@/components/custom-date-range.vue'
export default {
  data() {
    return {
      tableConfig: {
        url: 'flower/api/feedback/page',
        hasNew: false,
        hasEdit: false,
        hasDelete: false,
        columns: [
          { label: '反馈人', prop: 'customerName', minWidth: 120 },
          { label: '反馈人电话', prop: 'customerTel', minWidth: 150 },
          {
            label: '反馈内容',
            prop: 'feedBack',
            minWidth: 250,
            showOverflowTooltip: true,
          },
          { label: '反馈时间', prop: 'createTime', minWidth: 180 },
          {
            label: '回复内容',
            prop: 'reply',
            minWidth: 250,
            showOverflowTooltip: true,
          },
          { label: '回复时间', prop: 'replyTime', minWidth: 180 },
        ],
        operationAttrs: {
          width: 120,
          fixed: 'right',
        },
        searchFormAttrs: {
          labelWidth: 'auto',
        },
        searchForm: [
          {
            type: 'row',
            items: [
              {
                label: '处理状态：',
                id: 'handled',
                type: 'bus-radio',
                el: {
                  hasAll: true,
                  childType: 'el-radio-button',
                  fromDict: false,
                  options: [
                    { label: '已处理', value: true },
                    { label: '待处理', value: false },
                  ],
                },
                default: '',
                span: 24,
                searchImmediately: true,
              },
              {
                label: '反馈日期：',
                id: 'dateType',
                component: CustomDateRange,
                el: {
                  options: dateRangeOptions,
                },
                searchImmediately: true,
                commonFormat: true,
                commonFormatProps: [
                  'dateType',
                  'createDateBeginStr',
                  'createDateEndStr',
                ],
                span: 24,
              },
              { label: '反馈人：', id: 'name', type: 'input' },
              { label: '反馈人电话：', id: 'tel', type: 'input' },
            ],
          },
        ],
        form: [
          { label: '反馈人：', id: 'customerName', type: 'input' },
          { label: '反馈人电话：', id: 'customerTel', type: 'input' },
          {
            label: '反馈内容：',
            id: 'feedBack',
            type: 'input',
            el: { type: 'textarea' },
          },
          { label: '反馈时间：', id: 'createTime', type: 'input' },
          {
            label: '回复内容：',
            id: 'reply',
            type: 'input',
            el: { type: 'textarea' },
          },
          { label: '回复时间：', id: 'replyTime', type: 'input' },
        ],
        extraButtons: [
          {
            text: '回复',
            show: (row) => !row.handled,
            atClick: (row) => {
              this.$refs.crud.$refs.extraDialog[0].show(row)
            },
          },
        ],
        extraDialogs: [
          {
            title: '回复',
            hiddenReverseItems: [],
            form: [
              {
                label: '回复内容：',
                id: 'reply',
                type: 'input',
                el: {
                  rows: 6,
                  type: 'textarea',
                },
                rules: {
                  required: true,
                  message: '请输入回复内容',
                  trigger: 'blur',
                },
              },
            ],
            atConfirm: async (val) => {
              const { code } = await this.$elBusHttp.request(
                'flower/api/feedback/page/reply',
                {
                  method: 'post',
                  data: val,
                }
              )
              if (code === 0) {
                this.$message.success('回复成功')
              }
            },
          },
        ],
      },
    }
  },
  head() {
    return {
      title: '投诉反馈',
    }
  },
}
</script>

<style lang="scss" scoped></style>

 pages/order/after-sale/_action/_id.vue

@@ -1,59 +1,26 @@
<template>
  <div v-loading="wholeLoading" class="base-page-wrapper sale-detail">
    <el-bus-title title="订单信息" size="small"></el-bus-title>
    <el-bus-form
      ref="form"
      label-width="auto"
      :content="formContent"
      readonly
    ></el-bus-form>
    <div
      v-if="detail.imageListFormat && detail.imageListFormat.length > 0"
      class="mb-20"
    >
      <el-bus-title title="售后图片" size="small"></el-bus-title>
      <el-bus-upload
        :value="detail.imageListFormat"
        disabled
        list-type="picture-card"
      ></el-bus-upload>
    </div>
    <div v-if="detail.videoList && detail.videoList.length > 0" class="mb-20">
      <el-bus-title title="售后视频" size="small"></el-bus-title>
      <video
        v-for="(item, index) in detail.videoList"
        :key="index"
        controls
        width="300px"
        height="200"
        class="mr-20 mb-15"
      >
        <source :src="item" />
      </video>
    </div>
    <el-bus-title title="售后处理" size="small"></el-bus-title>
    <el-bus-form
      ref="auditForm"
      label-width="auto"
      :content="auditFormContent"
      :readonly="!editable"
    ></el-bus-form>
    <el-bus-form ref="form" label-width="auto" :content="formContent" readonly>
      <template #id:baseInfo>
        <el-bus-title title="基本信息" size="small"></el-bus-title>
      </template>
      <template #id:refundInfo>
        <div class="base-page-wrapper__line"></div>
        <el-bus-title title="退款信息" size="small"></el-bus-title>
      </template>
      <template #id:goodsInfo>
        <div class="base-page-wrapper__line"></div>
        <el-bus-title title="商品信息" size="small"></el-bus-title>
      </template>
    </el-bus-form>
    <div class="text-center mt-20">
      <el-button
        v-if="editable"
        class="min-w-100"
        :loading="loading"
        type="primary"
        @click="save"
        >处理完成</el-button
      >
      <el-button class="min-w-100" @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import AfterSaleItems from '@/components/order/after-sale-items.vue'
import VideoList from '@/components/order/video-list'
export default {
  data() {
    return {
@@ -63,57 +30,100 @@
      formContent: [
        {
          type: 'row',
          id: 'baseInfo',
          items: [
            { label: '订单号：', id: 'orderNo', type: 'input' },
            { label: '售后单号：', id: 'salesNo', type: 'input' },
            { label: '用户账号：', id: 'createName', type: 'input' },
            { label: '下单时间：', id: 'orderTime', type: 'input' },
            { label: '申请时间：', id: 'createTime', type: 'input' },
            { label: '审核时间：', id: 'auditTime', type: 'input' },
            { label: '收货人：', id: 'customer', type: 'input' },
            { label: '收货人电话：', id: 'customerTel', type: 'input' },
            { label: '收货地址：', id: 'customerWholeAddress', type: 'input' },
            { label: '下单时间：', id: 'createTime', type: 'input' },
            { label: '订单金额：', id: 'totalOrderAmount', type: 'input' },
            { label: '售后状态：', id: 'statusStr', type: 'input' },
            { label: '售后理由：', id: 'reason', type: 'input', span: 24 },
            { label: '处理时间：', id: 'auditTime', type: 'input' },
          ],
        },
      ],
      auditFormContent: [
        {
          label: '处理意见：',
          id: 'auditStatus',
          type: 'bus-radio',
          el: {
            code: 'SALES_AUDIT_STATUS',
          },
          rules: { required: true, message: '请选择处理意见' },
          on: {
            change: (e, updateForm) => {
              updateForm({ auditRemarks: '' })
          type: 'row',
          id: 'refundInfo',
          items: [
            { id: 'status', type: 'input', hidden: () => true },
            {
              label: '订单状态：',
              id: 'statusStr',
              component: 'simple-text',
              el: (row) => ({
                type: row.status === 'PENDING' ? 'primary' : '',
              }),
              forceDisabled: true,
            },
          },
          str: true,
            { label: '售后单号：', id: 'salesNo', type: 'input' },
            { label: '退款金额(元)：', id: 'totalFee', type: 'input' },
            { label: '供应商扣款(元)：', id: 'feeSupplier', type: 'input' },
            { label: '平台扣款(元)：', id: 'feePlatform', type: 'input' },
            { label: '合伙人扣款(元)：', id: 'feePartner', type: 'input' },
            { label: '打包扣款(元)：', id: 'feePlatformPack', type: 'input' },
            { label: '质检扣款(元)：', id: 'feePlatformCheck', type: 'input' },
            {
              label: '物流扣款(元)：',
              id: 'feePlatformTransport',
              type: 'input',
            },
            { label: '实际总扣款(元)：', id: 'totalFee', type: 'input' },
            {
              label: '申请理由：',
              id: 'reason',
              type: 'input',
              el: { type: 'textarea' },
              span: 24,
            },
            {
              label: '平台回复：',
              id: 'remarks',
              type: 'input',
              el: { type: 'textarea' },
              span: 24,
            },
            {
              label: '退款图片：',
              id: 'pictureList',
              type: 'bus-upload',
              el: {
                listType: 'picture-card',
                size: 'small',
              },
              forceDisabled: true,
              span: 24,
              inputFormat: (row) => {
                if ('pictureList' in row) {
                  return row?.pictureList?.length
                    ? row.pictureList.map((i) => ({ url: i }))
                    : []
                }
              },
            },
            {
              label: '退款视频：',
              id: 'videoList',
              component: VideoList,
              forceDisabled: true,
              span: 24,
            },
          ],
        },
        {
          label: '不通过原因：',
          id: 'auditRemarks',
          type: 'input',
          el: {
            type: 'textarea',
            rows: 6,
          },
          rules: {
            required: true,
            message: '请输入不通过原因',
            trigger: 'blur',
          },
          hidden: (row) => row.auditStatus !== 'REJECT',
        },
        {
          label: '',
          id: 'items',
          component: AfterSaleItems,
          forceDisabled: true,
          type: 'row',
          id: 'goodsInfo',
          items: [
            { label: '商品名称：', id: 'flowerName' },
            { label: '商品分类：', id: 'flowerCategory' },
            { label: '级别：', id: 'flowerLevelStr' },
            { label: '颜色：', id: 'flowerColor' },
            { label: '规格：', id: 'flowerUnit' },
            { label: '商品价格(元)：', id: 'price' },
            { label: '供应商价格(元)：', id: 'supplierPrice' },
            { label: '合伙人加价(元)：', id: 'markupPartner' },
            { label: '申请数量：', id: 'num' },
            { label: '实际退款(元)：', id: 'totalFee' },
          ],
        },
      ],
    }
@@ -148,88 +158,10 @@
        data.customerWholeAddress = `${data.customerProvince || ''}${
          data.customerCity || ''
        }${data.customerRegion || ''}${data.customerAddress || ''}`
        data.imageListFormat = Array.isArray(data.imageList)
          ? data.imageList.map((i) => ({ url: i }))
          : []
        this.detail = data || {}
        this.$refs.form.updateForm(data)
        this.$refs.auditForm.updateForm({
          ...data,
          auditStatus: data.status === 'PENDING' ? undefined : data.auditStatus,
        })
      }
      this.wholeLoading = false
    },
    save() {
      this.$refs.auditForm.validate((res) => {
        if (res) {
          const formValue = this.$refs.auditForm.getFormValue()
          if (formValue.auditStatus === 'REJECT') {
            this.$elBusUtil
              .confirm('确定处理完成吗？')
              .then(() => {
                this.doSave({ ...formValue, items: [] })
              })
              .catch(() => {})
          } else {
            // eslint-disable-next-line
            if (
              formValue.items.every(
                (i) =>
                  this.$elBusUtil.isEmpty(i.amount) &&
                  this.$elBusUtil.isTrueEmpty(i.personInCharge)
              )
            ) {
              this.$message.warning('请完善商品售后信息')
            } else if (
              // 理赔金额和责任方不能只有一个有值
              formValue.items.find(
                (i) =>
                  (!this.$elBusUtil.isEmpty(i.amount) &&
                    this.$elBusUtil.isTrueEmpty(i.personInCharge)) ||
                  (this.$elBusUtil.isEmpty(i.amount) &&
                    !this.$elBusUtil.isTrueEmpty(i.personInCharge))
              )
            ) {
              this.$message.warning('赔付金额和责任方必须同时填写')
            } else {
              const items = formValue.items.filter(
                (i) =>
                  !this.$elBusUtil.isEmpty(i.amount) &&
                  !this.$elBusUtil.isTrueEmpty(i.personInCharge)
              )
              // 当存在部分商品未设置赔付金额时提示但允许提交
              if (items.length !== formValue.items.length) {
                this.$elBusUtil
                  .confirm('存在部分商品未设置赔付金额，确定处理完成吗？')
                  .then(() => {
                    this.doSave({ ...formValue, items })
                  })
                  .catch(() => {})
              } else {
                this.$elBusUtil
                  .confirm('确定处理完成吗？')
                  .then(() => {
                    this.doSave({ ...formValue, items })
                  })
                  .catch(() => {})
              }
            }
          }
        }
      })
    },
    async doSave(data) {
      this.loading = true
      const { code } = await this.$elBusHttp.request('flower/api/sales/audit', {
        method: 'post',
        data: { ...data, id: this.$route.params.id },
      })
      if (code === 0) {
        this.$message.success('处理成功')
        this.goBack()
      }
      this.loading = false
    },
  },
}
@@ -237,6 +169,7 @@

<style lang="scss" scoped>
.sale-detail {
  border-radius: 0;
  .el-bus-title {
    margin-bottom: 10px;
  }

 pages/order/after-sale/index.vue

@@ -1,9 +1,20 @@
<template>
  <el-bus-crud ref="crud" v-bind="tableConfig"></el-bus-crud>
  <el-bus-crud ref="crud" v-bind="tableConfig">
    <template #table="{ list }">
      <template v-if="list && list.length > 0">
        <after-sale-table :list="list" @detail="onDetail" @handle="onHandle" />
      </template>
      <el-bus-empty v-else />
    </template>
  </el-bus-crud>
</template>

<script>
import AfterSaleTable from '@/components/order/after-sale-table'
export default {
  components: {
    AfterSaleTable,
  },
  data() {
    return {
      tableConfig: {
@@ -11,48 +22,27 @@
        hasNew: false,
        hasEdit: false,
        hasDelete: false,
        onResetView: (row) => {
          this.$router.push(`${this.$route.path}/view/${row.id}`)
        },
        operationAttrs: {
          width: 120,
          fixed: 'right',
        },
        extraButtons: [
          {
            text: '售后处理',
            show: (row) => row.status === 'PENDING',
            atClick: (row) => {
              this.$router.push(`${this.$route.path}/handle/${row.id}`)
            },
          },
        ],
        columns: [
          { label: '订单号', prop: 'orderNo', minWidth: 150, fixed: 'left' },
          { label: '售后单号', prop: 'salesNo', minWidth: 150 },
          { label: '收货人', prop: 'customer', minWidth: 120 },
          { label: '收货人电话', prop: 'customerTel', minWidth: 120 },
          {
            label: '收货地址',
            formatter: (row) =>
              `${row.customerProvince || ''}${row.customerCity || ''}${
                row.customerRegion || ''
              }${row.customerAddress || ''}`,
            minWidth: 250,
          },
          { label: '订单金额', prop: 'totalOrderAmount', minWidth: 150 },
          { label: '售后理由', prop: 'reason', minWidth: 200 },
          { label: '售后状态', prop: 'statusStr', minWidth: 120 },
          { label: '审核状态', prop: 'auditStatusStr', minWidth: 120 },
          { label: '申请时间', prop: 'createTime', minWidth: 180 },
          { label: '处理时间', prop: 'auditTime', minWidth: 180 },
        ],
        hasExport: true,
        exportUrl: 'flower/api/sales/list/export',
        exportText: '售后导出',
        searchFormAttrs: {
          labelWidth: 'auto',
        },
        beforeRequest: (params) => {
          const searchForm = this.$refs.crud?.$refs?.searchForm
          if (searchForm) {
            const statusComp = searchForm.getComponentById('status')
            if (statusComp) {
              // 组件内部不会修改这个prop直接修改可忽略警告
              statusComp.extraQuery = { ...params, status: '' }
              statusComp.getOtherOptions()
            }
          }
        },
        searchForm: [
          {
            type: 'row',
            id: 'row',
            items: [
              {
                label: '售后状态：',
@@ -60,29 +50,184 @@
                type: 'bus-radio',
                el: {
                  hasAll: true,
                  otherInterfaceUri: 'flower/api/sales/status/count',
                  childType: 'el-radio-button',
                  code: 'SALES_STATUS',
                  filterOptions: (list) => {
                    return list.map((item) => {
                      return {
                        ...item,
                        label: `${item.label}(${item.orderCount})`,
                      }
                    })
                  },
                  // code: 'ORDER_SALES_STATUS',
                },
                default: '',
                span: 24,
                searchImmediately: true,
              },
              {
                label: '审核状态：',
                id: 'auditStatus',
                type: 'bus-radio',
                el: {
                  hasAll: true,
                  childType: 'el-radio-button',
                  code: 'SALES_AUDIT_STATUS',
                on: {
                  optionsChange: (e, updateForm, { currentComp }) => {
                    if (Array.isArray(e[0]) && e[0].length > 0) {
                      const totalCount = e[0].reduce((total, current) => {
                        return (total += current.orderCount)
                      }, 0)
                      // 组件内部不会修改这个prop直接修改可忽略警告
                      currentComp.props = {
                        allLabel: `不限(${totalCount})`,
                      }
                    }
                  },
                },
                default: '',
                span: 24,
                searchImmediately: true,
              },
              { label: '商品名称：', id: 'flowerName', type: 'input' },
              { label: '订单号：', id: 'orderNo', type: 'input' },
              { label: '售后单号：', id: 'salesNo', type: 'input' },
              { label: '收货人姓名：', id: 'customer', type: 'input' },
              { label: '收货人电话：', id: 'customerTel', type: 'input' },
              { label: '供应商：', id: 'supplierName', type: 'input' },
              {
                label: '下单时间：',
                id: 'orderStartDateStr',
                component: 'el-bus-date-range',
                commonFormat: true,
                commonFormatProps: ['orderStartDateStr', 'orderEndDateStr'],
                customClass: 'in-bus-form',
              },
              {
                label: '售后时间：',
                id: 'salesStartDateStr',
                component: 'el-bus-date-range',
                commonFormat: true,
                commonFormatProps: ['salesStartDateStr', 'salesEndDateStr'],
                customClass: 'in-bus-form',
              },
            ],
          },
        ],
        form: [
          {
            type: 'row',
            items: [
              { label: '商品名称：', id: 'flowerName', type: 'input' },
              { label: '合伙人加价(元)：', id: 'markupPartner', type: 'input' },
              { label: '商品价格(元)：', id: 'price', type: 'input' },
              { label: '供应商价格(元)：', id: 'supplierPrice', type: 'input' },
              { label: '商品数量：', id: 'flowerNum', type: 'input' },
              { label: '申请售后数量：', id: 'num', type: 'input' },
            ],
          },
        ],
        extraDialogs: [
          {
            title: '售后处理',
            readonly: true,
            confirmText: '通过',
            cancelText: '不通过',
            confirmButtonAttrs: {
              type: 'success',
            },
            cancelButtonAttrs: {
              type: 'danger',
            },
            dialogAttrs: {
              width: '70%',
            },
            form: [
              {
                type: 'row',
                items: [
                  {
                    label: '供应商(元)：',
                    id: 'feeSupplier',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '平台(元)：',
                    id: 'feePlatform',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '合伙人(元)：',
                    id: 'feePartner',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '打包(元)：',
                    id: 'feePlatformPack',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '质检(元)：',
                    id: 'feePlatformCheck',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '物流(元)：',
                    id: 'feePlatformTransport',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '申请理由：',
                    id: 'reason',
                    type: 'input',
                    el: {
                      type: 'textarea',
                    },
                    readonly: true,
                    span: 24,
                  },
                  {
                    label: '平台回复：',
                    id: 'remarks',
                    type: 'input',
                    el: {
                      type: 'textarea',
                      rows: 6,
                    },
                    rules: {
                      required: true,
                      message: '请输入平台回复',
                      trigger: 'blur',
                    },
                    span: 24,
                  },
                ],
              },
            ],
            atConfirm: async (val) => {
              const { code } = await this.$elBusHttp.request(
                'flower/api/sales/audit/agree',
                { method: 'post', data: val }
              )
              if (code === 0) {
                this.$message.success('操作成功')
              } else {
                return false
              }
            },
            atCancel: async (val) => {
              const { code } = await this.$elBusHttp.request(
                'flower/api/sales/audit/reject',
                {
                  method: 'post',
                  data: {
                    id: val.id,
                    remarks: val.remarks,
                  },
                }
              )
              if (code === 0) {
                this.$message.success('操作成功')
              } else {
                return false
              }
            },
          },
        ],
      },
@@ -93,6 +238,14 @@
      title: '售后理赔',
    }
  },
  methods: {
    onDetail(item) {
      this.$router.push(`${this.$route.path}/view/${item.id}`)
    },
    onHandle(item) {
      this.$refs.crud.$refs.extraDialog[0].show(item)
    },
  },
}
</script>


 pages/order/list/_id.vue

@@ -138,15 +138,48 @@
    <template v-if="afterSaleList && afterSaleList.length > 0">
      <el-bus-title title="售后信息" size="small" class="mt-20"></el-bus-title>
      <el-table :data="afterSaleList">
        <el-table-column label="原因" prop="reason"></el-table-column>
        <el-table-column label="售后时间" prop="createTime"></el-table-column>
        <el-table-column label="处理时间" prop="auditTime"></el-table-column>
        <el-table-column label="处理状态" prop="statusStr"></el-table-column>
        <el-table-column
          label="处理结果"
          prop="auditStatusStr"
          label="商品名称"
          prop="flowerName"
          min-width="150"
          fixed="left"
        ></el-table-column>
        <el-table-column label="操作">
        <el-table-column
          label="级别"
          prop="flowerLevelStr"
          min-width="120"
        ></el-table-column>
        <el-table-column
          label="颜色"
          prop="flowerColor"
          min-width="120"
        ></el-table-column>
        <el-table-column
          label="原因"
          prop="reason"
          min-width="200"
        ></el-table-column>
        <el-table-column
          label="售后时间"
          prop="createTime"
          min-width="180"
        ></el-table-column>
        <el-table-column
          label="处理时间"
          prop="auditTime"
          min-width="180"
        ></el-table-column>
        <el-table-column
          label="处理状态"
          prop="statusStr"
          min-width="120"
        ></el-table-column>
        <el-table-column
          label="实际退款"
          prop="totalFee"
          min-width="120"
        ></el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="text" @click="toDetail(row.id)"
              >查看详情</el-button