clsd/app/components/card/card.vue

<!--证件照片上传（单张）-->
<template>
	<view class="msf">
		<view class="sfz" @click="chooseImage()" :style="{ border: fileName ? '' : '1px solid #eeeeee' }">
			<image :src="ip + fileName" mode="widthFix" v-if="fileName"></image>
			<view class="uploads" v-else>
				<view class="icon" v-html="icon"></view>
			</view>
		</view>
		<view class="text" v-if="!read">{{ text }}</view>
	</view>
</template>
<script>
export default {
	name: 'card',
	props: {
		icon: {
			type: String
		},
		text: {
			type: String
		},
		value: {
			type: String
		},
		read: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			fileName: this.value,
			ip: this.http.ip
		};
	},
	watch: {
		value(newValue) {
			this.fileName = newValue;
		}
	},
	methods: {
		chooseImage() {
			if (this.read) {
				this.preview(this.fileName);
				return;
			}
			//照片选择
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: (res) => {
					res.tempFilePaths.forEach((path) => {
						uni.showLoading({ title: '正在上传图片', mask: true });
						uni.uploadFile({
							url: this.http.ip + '/app/common/upload',
							filePath: path,
							name: 'file',
							header: { Authorization: this.getUser().token },
							success: (res) => {
								let data = JSON.parse(res.data);
								if (data.code == 200) {
									this.fileName = data.fileName;
									this.$emit('input', data.fileName);
								} else {
									uni.showModal({ content: data.msg, showCancel: false });
								}
								uni.hideLoading();
							},
							fail: (res) => {
								uni.hideLoading();
								uni.showModal({ content: '图片上传失败', showCancel: false });
							}
						});
					});
				}
			});
		},
		// 预览图片
		preview(item) {
			uni.previewImage({
				urls: [this.ip + item],
				current: this.ip + item,
				success: (res) => {}
			});
		},
		del(item) {
			this.value.splice(this.value.indexOf(item), 1);
			this.$emit('input', this.value);
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss" scoped>
.msf {
	padding: 0px 5px 5px 5px;
	text-align: center;
	.sfz {
		text-align: center;
		border-radius: 5px;
		overflow: hidden;
		background-color: $bg;
		height: 100px;
		image {
			width: 100%;
			margin: 0 auto;
			border-radius: 5px;
		}
		.uploads {
			width: 100%;
			text-align: center;
			.icon {
				font-size: 50px;
				line-height: 100px;
				color: $main-color;
			}
		}
	}
	.text {
		font-size: 14px;
		padding-top: 15px;
		color: $main-color;
	}
}
</style>