modal-upload-card-comp.js 2.72 KB
import api from '@/api/api'
import {
	httpGet,
	httpPost
} from '@/api/fetch-api.js'
import { read } from 'fs';


export default {
	props: {
		// 是否显示组件
		visible: {
			type: Boolean,
			default: true,
		},
		// 标题名称 需要再 assets/images/common/ 目录下添加图标
		icon: {
			type: String,
			default: "succ",
		},
		// 标题,不建议使用
		title: {
			type: String,
			default: "",
		},
		// 文案
		content: {
			type: String,
			default: "",
		},
		// 确认文案
		confirmText: {
			type: String,
			default: "確認",
		},
		// 取消文案
		cancelText: {
			type: String,
			default: "取消",
		},
		// 是否显示确认按钮
		showConfirm: {
			type: Boolean,
			default: true,
		},
		// 是否显示取消按钮
		showCancel: {
			type: Boolean,
			default: false,
		},
		// 是否显示遮罩层
		overlayShow: {
			type: Boolean,
			default: true,
		},

		// 确定按钮回调方法
		confirm: {
			type: Function,
			default: null
		},
		// 取消按钮回调方法
		cancel: {
			type: Function,
			default: null
		},
		// 点击关闭回调方法
		close: {
			type: Function,
			default: null
		},
		// 点击蒙层回调方法
		overlay: {
			type: Function,
			default: null
		}
	},
	data() {
		return {
			key: 'value',
			frontPicSrc: null,
			backPicSrc: null,
			frontPicFile: null,
			backPicFile: null
		}
	},
	components: {},
	computed: {
		submitBtnDisabled() {
			let b1 = this.frontPicFile ? false : true;
			let b2 = this.backPicFile ? false : true;
			return b1 || b2;
		}
	},
	methods: {
		// 点击确认
		onConfirmHandler() {
			if (this.submitBtnDisabled) {
				return;
			}
			this.$emit("onSubmit", { front: this.frontPicFile, back: this.backPicFile });
		},
		handlePicSelect(type) {
			let _this = this;
			let input = document.createElement("input");
			input.setAttribute("type", "file");
			input.setAttribute("accept", "image/*");
			input.onchange = function (val) {
				var reader = new FileReader();
				reader.onload = function (e) {
					if (type == 'front') {
						_this.$set(_this, 'frontPicSrc', reader.result);
					} else {
						_this.$set(_this, 'backPicSrc', reader.result);
					}
				}
				let file = input.files[0];
				if (type == 'front') {
					_this.$set(_this, 'frontPicFile', file);
				} else {
					_this.$set(_this, 'backPicFile', file);
				}
				reader.readAsDataURL(file);
			};
			input.click();
		},
		// 点击取消
		onCancelHandler() {
			this.$emit("close");
		},
		// 点击关闭
		onCloseHandler() {
			this.$emit("close");
		},
		// 点击蒙层
		onOverLayHandler() {
			this.$emit("close");
		},
		init() {
			this.frontPicFile = null;
			this.backPicFile = null;
			this.frontPicSrc = null;
			this.backPicSrc = null;
		}
	},
	mounted() { },
	created() { }
}