dl_vue/src/views/member/busiCard/form/busiCardForm.vue

<template>
  <el-drawer title="博主名片审核" :append-to-body="true" :visible.sync="drawer" size="55%">
    <el-card class="box-card">
      <el-descriptions class="margin-top" :column="3" size="medium" border>
        <el-descriptions-item>
          <template slot="label">
            昵称
          </template>
          {{ form.nickname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            平台
          </template>
          {{ form.platformName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            账号id
          </template>
          {{ form.accountNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            账号昵称
          </template>
          {{ form.accountName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            粉丝数量
          </template>
          {{ form.fansNum }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            粉丝数量
          </template>
          {{ form.tel }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            商单自报价
          </template>
          {{ form.price }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            收货地址
          </template>
          {{ form.address }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>其他内容</span>
      </div>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="无"
        readonly
        v-model="form.content">
      </el-input>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>佐证材料</span>
      </div>
      <ImageUpload v-model="form.image" :isShowTip="false" :disabled="true"></ImageUpload>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color:red">*</span><span>审核信息</span>
      </div>
      <el-row>
        <el-form ref="form" :model="form" label-width="80px">
          <el-col :span="12">
            <el-form-item label="审核状态" prop="identityType">
              <el-select :readonly="isDetail" v-model="form.approvalStatus" placeholder="待审核">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核备注" prop="approvalRemark">
              <el-input :readonly="isDetail" v-model="form.approvalRemark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <div v-if="!isDetail" style="text-align: right;margin-right: 20px;margin-top:20px">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import {getCard,updateCard} from "@/api/member/busiCard";

export default {
  name: "BusiCardForm",
  props:{
    /**是否详情 */
    isDetail: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      //抽屉打开框
      drawer: false,
      //博主名片id
      id: null,
      //博主名片详情
      form: {},
      statusOptions: [{
        value: '0',
        label: '待审核'
      }, {
        value: '1',
        label: '通过'
      }, {
        value: '9',
        label: '不通过'
      }],
    }
  },
  methods: {
    /**初始化抽屉*/
    initDraw(id) {
      this.drawer = true
      this.getCardById(id)
    },
    /**表单重置*/
    reset() {
      this.form = {
        id: null,
        userId: null,
        nickname: null,
        platformCode: null,
        platformName: null,
        accountNumber: null,
        accountName: null,
        fansNum: null,
        image: null,
        tel: null,
        price: null,
        content: null,
        addrId: null,
        approvalStatus: null,
        approvalUserId: null,
        approvalTime: null,
        approvalRemark: null,
        creator: null,
        createTime: null,
        updater: null,
        updateTime: null,
        delFlag: null
      };
    },
    /**取消按钮*/
    cancel() {
      this.drawer = false;
      this.reset();
    },
    /** 查看名片片详情 */
    getCardById(id) {
      this.reset();
      getCard(id).then(response => {
        this.form = response.data;
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCard(this.form).then(response => {
              this.$modal.msgSuccess("审核成功");
              this.drawer = false;
              this.$emit('success')
            });
          }
        }
      });
    },

  }
}
</script>

<style scoped>
/deep/.el-drawer__header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #72767b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
  padding: 10px;
  padding-bottom: 0;
}
/deep/.el-card__body {
  padding: 5px 5px 5px 9px;
}
/deep/.el-card__header {
  padding: 7px 5px 5px;
  min-height: 35px;
}
</style>