zhapp/pages/my/businessLicense.vue

<template>
	<view class="page">
		<view class="businessLicense">
			<!-- 占位图 -->
			<image class="bg" v-if="!uploadImage" src="/static/image/businessLicense.png" mode="" @click="upload">
			</image>
			<image class="bg" v-else :src="uploadImage" mode=""></image>
			<view class="reupload dis a-c j-c " v-if="uploadImage" @click="upload">
				<image src="/static/icon/right.png" mode=""></image>
				<text>重新上传</text>
			</view>
		</view>
		<view class="btn mt-3  dis" v-if="uploadImage">
			<view class="dis a-c j-c mr-3">
				删除
			</view>
			<view class="dis a-c j-c">
				下载
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import store from '@/store';
	export default {
		data() {
			return {
				uploadImage: null, //展业资格证
			}
		},
		onShow() {

		},
		onLoad(options) {
			if (options.list) {
				const list = JSON.parse(decodeURIComponent(options.list));
				list.forEach(val => {
					if (val.fileType == 'qualification') {
						this.uploadImage = val.fileUrl;
					}

				})
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			//上传
			async upload() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.uploadImage = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: async (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								let res = await this.$http.post('/appUser/businessInfoAdd', {
									userId: this.userInfo.sysUser.userId,
									fileId: data.data.id,
								})

							}

						}
					});
				} else {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.businessLicense {
		position: relative;
		border-radius: 6rpx;
		height: 394rpx;

		.bg {
			width: 100%;
			height: 100%;
			border-radius: 6rpx;
		}

		.reupload {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 70rpx;
			background: rgba(0, 0, 0, 0.1);
			border-radius: 0 0 6rpx 6rpx;
			backdrop-filter: blur(20rpx);
			font-size: 28rpx;
			color: #fff;

			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 8rpx;
			}
		}
	}

	.btn {
		view {
			flex: 1;
			height: 80rpx;
			background: rgba(253, 233, 53, 0.2);
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			border: 1rpx solid #FDE935;
			font-size: 30rpx;
			color: #1f1f1f;
		}
	}
</style>