mabao/pages/archives/upcard.vue

<template>
	<view class="main">
		<view class="padding-lr-sm margin-top-sm">
			<text class="text-black">上传被保人证件照片</text>
		</view>
		<view class="padding-lr-sm text-sm text-gray margin-top-sm margin-bottom-sm">
			办理家医计划业务需上传被保人清晰证件照片(身份证正反面，护照，户口簿选择其中一种即可)
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgListpoint" :key="index" :data-url="imgListpoint[index]">
					<image :src="imgListpoint[index].url" mode='aspectFill'></image>
					<view class="cu-tag bg-red" @click="DelImg" :data-index="index">
						<text class="cuIcon-close"></text>
					</view>
				</view>
				<view class="solids" @click="ChooseImage" v-if="imgListpoint.length<2">
					<text class="cuIcon-cameraadd"></text>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar" style="position: fixed;bottom: 0;width: 100%;">
			<view class="submit" style="background-color: #0B73B9;color: white;" @click="upcard">
				提交审核
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			if (options.id != undefined) {
				this.archivesId = options.id
				if (JSON.parse(options.data)[0].url != "" && JSON.parse(options.data)[1].url != "") {
					this.imgListpoint = JSON.parse(options.data)
				}

			}
		},
		onShow() {

		},
		data() {
			return {
				archivesId: "",
				imgListpoint: [],
				imgList: []
			}
		},
		methods: {
			ChooseImage() {
				uni.chooseImage({
					count: 2, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
							this.imgList.forEach(item => {
								this.$request.upload("/api/v1/common/uploadFile", item, {}).then(data => {
									this.imgListpoint.push(JSON.parse(data).data)
									console.log(this.imgListpoint)
								})
							})

						} else {
							this.imgList = res.tempFilePaths
							this.imgList.forEach(item => {
								this.$request.upload("/api/v1/common/uploadFile", item, {}).then(data => {
									this.imgListpoint.push(JSON.parse(data).data)
								})
							})

						}
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '再想想',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgListpoint.splice(e.currentTarget.dataset.index, 1);
							this.imgListpoint = this.imgListpoint
						}
					}
				})
			},
			upcard: async function() {
				if (this.imgListpoint.length != 2) {
					uni.showToast({
						title: "请上传身份证完整",
						icon: "none"
					})
					return false
				}
				if (this.imgListpoint.length == 2) {
					let res = await this.$request.post("/api/v1/patient/submitCardImg", {
						id: this.archivesId,
						card_img_url: this.imgListpoint[0].url,
						card_back_img_url: this.imgListpoint[1].url
					})
					if (res.status == 0) {
						uni.showToast({
							title: "上传成功",
							icon: "none",
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}
</style>