dvcp_v2_webapp/project/shuzipingchang/app/AppIntegratingOrder/components/ResidentDetail.vue

<template>
  <ai-detail class="AppDynamicDetail">
    <template slot="title">
      <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
      </ai-title>
    </template>
    <template slot="content">
      <ai-card title="基本信息">
        <template #right>
          <el-button type="primary" v-if="info.status === '0'" @click="isShow = true">订单核销</el-button>
          <el-button type="danger" v-if="info.status === '0' || info.status === '1'" @click="cancelOrder">取消订单</el-button>
        </template>
        <template #content>
          <ai-wrapper
            label-width="120px">
            <ai-info-item label="订单编号" :value="info.serialNumber"></ai-info-item>
            <ai-info-item label="订单状态"  :value="dict.getLabel('integralSGOStatus', info.status)"></ai-info-item>
            <ai-info-item label="兑换人"  :value="info.integralUserName"></ai-info-item>
            <ai-info-item label="创建时间" :value="info.createTime"></ai-info-item>
            <ai-info-item label="备注" :value="info.remarks" isLine></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="操作信息" v-if="info.status === '1'">
        <template #content>
          <ai-wrapper
            label-width="120px">
            <ai-info-item label="核销人" :value="info.examineUserName"></ai-info-item>
            <ai-info-item label="时间" :value="info.examineTime"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="商品信息">
        <template #content>
          <ai-table
            :isShowPagination="false"
            :tableData="[info]"
            :col-configs="colConfigs"
            @getList="() => {}">
            <el-table-column
              label="商品"
              slot="goods"
              align="left"
              width="250">
              <template v-slot="{ row }">
                <div class="goods">
                  <ai-uploader
                    :disabled="true"
                    :instance="instance"
                    :value="[{url: row.goodsPicUrl}]"
                    :limit="1">
                  </ai-uploader>
                  <p>{{ row.goodsTitle }}</p>
                </div>
              </template>
            </el-table-column>
          </ai-table>
        </template>
      </ai-card>
      <ai-dialog
        title="订单核销"
        :visible.sync="isShow"
        :destroyOnClose="true"
        width="650px"
        @onConfirm="onConfirm"
        @close="form.verificationCode = '', id = ''">
        <el-form style="height: 200px" class="ai-form" ref="form" :model="form" label-width="120px">
          <el-form-item label="核销码" style="width: 100%" prop="verificationCode" :rules="[{required: true, message: '请输入核销码', trigger: 'blur'}]">
            <el-input v-model="form.verificationCode" placeholder="请输入核销码" size="small"></el-input>
          </el-form-item>
        </el-form>
      </ai-dialog>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'ResidentDetail',

    props: {
      instance: Function,
      dict: Object,
      params: Object
    },

    data () {
      return {
        info: {},
        isShow: false,
        id: '',
        form: {
          verificationCode: ''
        },
        colConfigs: [
          { prop: 'goodsSerialNumber', label: '商品ID', align: 'left' },
          { slot: 'goods' },
          { prop: 'goodsType',  label: '商品类型', align: 'center', format: v => this.dict.getLabel('integralSGType', v) },
          { prop: 'goodsIntegralPrice', label: '兑换所需积分', align: 'center' },
          { prop: 'payMoney', label: '兑换后补差价金额', align: 'center' },
          { prop: 'quantity', label: '数量', align: 'center' },
          { prop: 'usedIntegral', label: '消耗积分', align: 'center' }
        ]
      }
    },

    created () {
      if (this.params && this.params.id) {
        this.id = this.params.id
        this.getInfo(this.params.id)
      }
    },

    methods: {
      getInfo (id) {
        this.instance.post(`/app/appintegralsupermarketorder/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.info = {
              ...res.data
            }
          }
        })
      },

      cancelOrder () {
        this.$confirm('确定取消该订单吗？').then(() => {
          this.instance.post(`/app/appintegralsupermarketorder/cancel?id=${this.params.id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('取消成功！')
              this.getInfo(this.params.id)
            }
          })
        })
      },

      onConfirm () {
        this.$refs.form.validate((valid)=> {
          if(valid) {
            this.instance.post(`/app/appintegralsupermarketorder/examine`, null, {
              params: {
                ...this.form,
                id: this.params.id
              }
            }).then(res => {
              if(res.code == 0) {
                this.isShow = false
                this.getInfo(this.params.id)
                this.$message.success('核销成功')
              }
            })
          }
        })
      },

      cancel (isRefresh) {
        this.$emit('change', {
          type: 'ResidentList',
          isRefresh: !!isRefresh
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .AppDynamicDetail {
    .goods {
      display: flex;
      align-items: center;
    }
  }
</style>