pet_server/pages/order/perfect.vue

<template>
	<view class="content">
		<view class="card">
			<view class="title">
				上传身份证
			</view>
			<view class="top row">
				<view class="left" @click="chooseImg(1)">
					<image class="image-dom" :src="cardLeft" v-if="cardLeft !== ''"></image>
				</view>
				<view class="right" @click="chooseImg(2)">
					<image class="image-dom" :src="cardRight" v-if="cardRight !== ''"></image>
				</view>
			</view>
		</view>

		<view class="card margin-top">
			<view class="title">
				上传营业执照
			</view>
			<view class="bottom row">
				<view class="image" @click="chooseImg(3)">
					<image class="image-dom" :src="imgBottom" v-if="imgBottom !== ''"></image>
				</view>
			</view>
		</view>

		<view class="bottom-btn">
			<view class="btn" @click="push">
				完善
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth.js";
	export default {
		data() {
			return {
				// 身份证正面
				cardLeft: "",
				// 身份证反面
				cardRight: "",
				// 营业执照
				imgBottom: ""
			}
		},
		methods: {
			// 点击确认
			push() {
				if (this.cardLeft === '') {
					this.$u.toast('请上传身份证正面')
					return false
				}
				if (this.cardRight === '') {
					this.$u.toast('请上传身份证反面')
					return false
				}
				if (this.imgBottom === '') {
					this.$u.toast('请上传营业执照')
					return false
				}

				this.request('/sender/verification', {
					id_z: this.cardLeft,
					id_f: this.cardRight,
					license: this.imgBottom,
				}, "POST").then(res => {
					if (res.code === 1) {
						this.$u.toast('完善成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
				})

			},
			// 点击选择图片
			chooseImg(type) {
				let _this = this
				uni.chooseImage({
					success(e) {
						uni.uploadFile({
							url: 'https://pet.hdlkeji.com/api/common/upload', //仅为示例，非真实的接口地址
							filePath: e.tempFilePaths[0],
							header: {
								"token": getToken()
							},
							name: 'file',
							success: (res) => {
								let data = JSON.parse(decodeURIComponent(res.data))
								if (type === 1) {
									_this.cardLeft = data.data.url
								}
								if (type === 2) {
									_this.cardRight = data.data.url
								}
								if (type === 3) {
									_this.imgBottom = data.data.url
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 30rpx;

		.title {
			font-size: 36rpx;

		}

		.margin-top {
			margin-top: 40rpx;
		}
	}

	.card {
		width: 93%;
		padding: 30rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 30rpx;

		.top {
			.left {
				width: 300rpx;
				height: 200rpx;
				background-image: url("http://pet.hdlkeji.com/assets/static/1/107.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.right {
				width: 300rpx;
				height: 200rpx;
				background-image: url("http://pet.hdlkeji.com/assets/static/1/106.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}

		.bottom {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.image {
				height: 300rpx;
				width: 600rpx;
				background-image: url("http://pet.hdlkeji.com/assets/static/1/82.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
	}

	.image-dom {
		width: 100%;
		height: 100%;
	}

	// 完成按钮
	.bottom-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 10vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;

		.btn {
			width: 100%;
			color: #E68500;
			background-color: #FFE3A0;
			height: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>