yshopb2c-qd/src/views/shop/afterSeals/checkDialog.vue

<template>
  <el-dialog
  class="afterSealsAdd"
  :close-on-click-modal="false"
  :visible.sync="visible"
  width="800px">
    <div class="checkForm">
      <span>订单详情：</span>
      <el-form ref="form" :model="checkForm" size="small" label-width="100px">
        <el-form-item label="订单号：">
          <el-input v-model="checkForm.orderCode" disabled />
        </el-form-item>
        <el-form-item label="售后类型：">
          <el-input v-if="checkForm.serviceType === 0" :value="'仅退款'" disabled />
          <el-input v-if="checkForm.serviceType === 1" :value="'退货退款'" disabled />
        </el-form-item>
        <el-form-item label="售后原因：">
          <el-input v-model="checkForm.reasons" disabled />
        </el-form-item>
        <el-form-item label="售后说明：">
          <el-input v-model="checkForm.explains" disabled />
        </el-form-item>
        <el-form-item label="原因图片：">
          <div v-if="!checkForm.explainImg">
            <b>用户未上传图片</b>
          </div>
          <div v-else>
            <el-image 
              v-for="(item,index) in checkForm.explainImg.split(',')"
              :key="index"
              style="width: 100px; height: 100px"
              :src="item" 
              :preview-src-list="[item]">
            </el-image>
          </div>
        </el-form-item>
        <el-form-item label="提交时间：">
          <el-input v-model="checkForm.createTime" disabled />
        </el-form-item>
        <div v-for="item in checkForm.cartInfo"
        :key="item.id">
          <el-form-item label="售后商品：">
            <el-input v-model="item.productInfo.storeName" disabled />
          </el-form-item>
          <el-form-item label="商品图片：">
            <el-image
            :src="item.productInfo.image"
            style="width: 100px; height: 100px">
              <div slot="placeholder" class="image-slot">
                加载中<b class="dot">...</b>
              </div>
            </el-image>
          </el-form-item>
          <el-form-item label="规格：">
            <el-input v-model="item.productInfo.attrInfo.sku" disabled />
          </el-form-item>
          <el-form-item label="商品单价">
            <el-input v-model="item.truePrice" disabled />
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="item.cartNum" disabled />
          </el-form-item>
          <el-form-item label="邮费：">
            <el-input v-model="item.productInfo.postage" disabled />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div v-if="serviceType === 0 && isShow">
      <span>该订单为仅退款订单，审核通过之后需进行退款，是否审核通过？</span>
    </div>
    <div v-if="serviceType === 1 && isShow">
      <span>该订单为退货退款，请输入退货地址：</span>
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="收货人" prop="consignee">
          <el-input v-model="form.consignee" />
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">退出</el-button>
      <el-button v-if="isShow" :loading="loading" type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {salesCheck} from '@/api/yxStoreAfterSales.js'
export default {
  props: {
  },
  data () {
    return {
      visible: false,
      isShow: false,
      loading: false,
      serviceType: '',
      checkForm: {},
      form: {
        salesId: '', // 售后id
        orderCode: '', // 订单编号
        approvalStatus: '', // 审核状态0成功1失败
        consignee: '', // 收货人
        phoneNumber: '', // 手机号
        address: '' // 地址
      },
      rules: {
        consignee: [{ required: true, message: '请输入收货人', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '请输入收货人手机号', trigger: 'blur' }],
        address: [{ required: true, message: '请输入收货地址', trigger: 'blur' }]
      },
    }
  },
  methods: {
    cancel() {
      this.visible = false
      this.$refs['form'].resetFields()
    },
    async submit() {
      this.loading = true
      if (this.serviceType === 0) {
        consignee = ''
        phoneNumber = ''
        address = ''
      }
      this.form.approvalStatus = 0
      var res = await salesCheck(this.form)
      if (res) {
        this.$message.success('审核成功')
      } else {
        this.$message.error(res.msg || '审核失败！')
      }
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.afterSealsAdd{
  span{
    color: #F56C6C;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    margin: 25px 0;
  }
}
.afterSealsAdd ::v-deep.el-input.is-disabled .el-input__inner{
  color: #333333;
}
</style>