rt_fhyx_adminUI/src/views/live/liveConfig/idCard.vue

<template>
  <el-form ref="form"  label-width="80px">
    <el-form-item>
      <el-form-item label="上传图片" prop="materialUrl">
        <img :src="idCardUrl" alt="身份证" style="height: 150px; width: 150px" v-if="idCardUrl.length > 0">
        <ImageUpload @input="handleUrl" type="image" :num="10" :width="150" :height="150" />
      </el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import ImageUpload from '@/components/ImageUpload/index';
import {verifyIdInfo, getLive} from '@/api/live/live'

export default {
  components: { ImageUpload },
  data() {
    return {
      test: "1test",
      idCardUrl: "",
      liveId: null,
    };
  },
  watch: {
    // 监听路由的 query 参数变化
    '$route.query': {
      handler(newQuery) {
        this.liveId = this.$route.params.liveId
        getLive(this.liveId).then(res => {
          this.idCardUrl = res.data.idCardUrl;
        })
      },
      // 初始化时立即执行一次
      immediate: true
    }
  },
  created() {
    this.liveId = this.$route.params.liveId
    getLive(this.liveId).then(res => {
      this.idCardUrl = res.data.idCardUrl;
    })
  },
  methods: {
    submit(){
      verifyIdInfo({ liveId: this.liveId, idCardUrl: this.idCardUrl}).then(response => {
        if (response.code == 200) {
          this.$message.success("保存成功");
        } else {
          this.$message.success(response.msg);
        }
      })
    },
    handleUrl(data){
      if (data.length > 0) {
        this.idCardUrl = data;
      }
    }
  }
};
</script>