订单，售后部分同步

mayf

2024-08-26 4f92f67026dbb26b208e59105bebe206b71e43c8

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

@@ -1,43 +1,18 @@
<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 class="min-w-100" @click="goBack">返回</el-button>
    </div>
@@ -45,68 +20,110 @@
</template>

<script>
import AfterSaleItems from '@/components/order/after-sale-items.vue'
import VideoList from '@/components/order/video-list'
export default {
  data() {
    return {
      editable: false,
      detail: {},
      wholeLoading: false,
      loading: false,
      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' },
          ],
        },
      ],
    }
@@ -115,6 +132,14 @@
    return {
      title: '售后详情',
    }
  },
  computed: {
    editable() {
      return (
        this.$route.params.action === 'handle' &&
        this.detail?.status === 'PENDING'
      )
    },
  },
  mounted() {
    this.getDetail()
@@ -133,12 +158,8 @@
        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)
      }
      this.wholeLoading = false
    },
@@ -148,6 +169,7 @@

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