dvcp_v2_webapp/project/pidu/app/AppOrder/components/Detail.vue

 <template>
  <ai-detail v-loading="isLoading" class="detail">
    <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.orderStatus === '0'" @click="isShow = true">订单核销</el-button>
        </template>
        <template #content>
          <ai-wrapper
            label-width="120px">
            <ai-info-item label="订单编号" :value="info.orderCode"></ai-info-item>
            <ai-info-item label="订单状态" :value="dict.getLabel('merchandiseOrderStatus', info.orderStatus)"></ai-info-item>
            <ai-info-item label="兑换人" :value="info.consumerName"></ai-info-item>
            <ai-info-item label="兑换时间" :value="info.createTime"></ai-info-item>
            <ai-info-item label="备注" isLine :value="info.remark"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="操作信息" v-if="info.orderStatus === '1'">
        <template #content>
          <ai-wrapper
            label-width="120px">
            <ai-info-item label="核销人" :value="info.auditUserName"></ai-info-item>
            <ai-info-item label="核销时间" :value="info.auditTime"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="商品信息">
        <template #content>
          <ai-table
            :tableData="tableData"
            :isShowPagination="false"
            :col-configs="colConfigs"
            @getList="() => {}">
            <el-table-column slot="goods" width="240px" label="商品" align="left">
              <template slot-scope="{ row }">
                <div class="goods">
                  <img :src="row.imageUrl">
                  <span>{{ row.merchandiseName }}</span>
                </div>
              </template>
            </el-table-column>
          </ai-table>
        </template>
      </ai-card>
      <ai-dialog
        :visible.sync="isShow"
        width="590px"
        title="订单核销"
        @close="form.code = ''"
        @onConfirm="onConfirm">
        <el-form ref="form" :model="form" label-width="110px" label-position="right">
          <el-form-item label="核销码" prop="code" :rules="[{required: true, message: '请输入核销码', trigger: 'blur'}]">
            <el-input size="small" placeholder="请输入核销码" v-model="form.code"></el-input>
          </el-form-item>
        </el-form>
      </ai-dialog>
    </template>
  </ai-detail>
</template>

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

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

    data () {
      return {
        info: {},
        isShow: false,
        currIndex: 0,
        isLoading: false,
        tableData: [],
        form: {
          code: ''
        },
        colConfigs: [
          { slot: 'goods', label: '商品' },
          { prop: 'merchandiseIntegral', align: 'center', label: '单价' },
          { prop: 'merchandiseNumber', align: 'center', label: '数量' },
          { prop: 'merchandiseIntegral', align: 'center', label: '小计' }
        ],
      }
    },

    created () {
      this.isLoading = true
      if (this.params && this.params.id) {
        this.id = this.params.id
        this.dict.load(['merchandiseOrderStatus']).then(() => {
          this.getInfo(this.params.id)
        })
      }
    },

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

          this.isLoading = false
        }).catch(() => {
          this.isLoading = false
        })
      },

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

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

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

    img {
      width: 80px;
      height: 80px;
      margin-right: 20px;
    }

    span {
      flex: 1;
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

</style>