pay-video-applet-uniapp-24-8-22/pages_mine/mine/authFirm.vue

<template>
	<view class="auth-firm">
		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="认证企业" />

		<!--身份信息页面-->
		<view class="container">
			<view class="form-item">
				<view class="label">法人真实姓名</view>
				<view class="input">
					<input type="text" v-model="certifiedIndividual.name" />
				</view>
			</view>

			<uv-divider :hairline="false" lineColor="#c0c0c0" dot></uv-divider>

			<view class="form-item">
				<view class="label">法人身份证号</view>
				<view class="input">
					<input type="text" v-model="certifiedIndividual.card" />
				</view>
			</view>

			<uv-divider :hairline="false" lineColor="#c0c0c0" dot></uv-divider>

			<view class="form-item">
				<view class="label">营业执照</view>
				<view class="avatarFace" @click="uploadImage('tradeImage')">
					<image v-if="certifiedIndividual.tradeImage" :src="certifiedIndividual.tradeImage"
						style="width: 100%;height: 100%"></image>
					<image v-else src="../static/auth/2.png" style="width: 100%;height: 100%"></image>
				</view>
			</view>

			<uv-divider :hairline="false" lineColor="#c0c0c0" dot></uv-divider>

			<view class="form-item">
				<view class="label">其他资质</view>
				<view class="avatarFace" @click="uploadImage('otherImage')">
					<image v-if="certifiedIndividual.otherImage" :src="certifiedIndividual.otherImage"
						style="width: 100%;height: 100%"></image>
					<image v-else src="../static/auth/2.png" style="width: 100%;height: 100%"></image>
				</view>
			</view>

		</view>



		<!--请仔细阅读平台《用户协议》《隐私协议》-->
		<view class="agree">
			<!-- <view> -->
			<uv-checkbox-group v-model="checkboxValue" placement="column" size="35" activeColor="#008000"
			                   inactiveColor="#999999">
			  <uv-checkbox shape='circle' :checked="true" name="apple" :label="labelValue ? labelValue : ''"
			               iconSize="35">
			  </uv-checkbox>
			</uv-checkbox-group>
				请仔细阅读平台<span style="color:#009dff">《用户协议》</span><span style="color:#009dff">《隐私协议》</span>
			<!-- </view> -->
		</view>


		<!--下一步按钮-->
		<button @click="onNextClick" class="bottomBtn">
			立即认证
		</button>

		<confirmationPopup ref="confirmationPopup" title="提示" cancel :cancelText="cancelText[type]" @confirm="submit"
			round="0" @cancel="$refs.confirmationPopup.close()" :confirmText="confirmText[type]">
			<view class="confirmationPopup" v-if="type == 0">
				电子认证服务协议
				数字证书(以下简称证书)是电子商务认证有限公司(以下简称广东)签发的网上凭证，是为身份确实、资信可靠的个人、单位和服务器等在网上进行安全电子交易、安全电子事务处理等提供的一种身份认证。凡企业、机关团体、行政事业等单位、个人和服务器数字证书申请人(以下简称证书申请人)均可向广东业务受理审批单位申请领用数字证书。为了保障数字证书申请人的合法权利，维护电子商务认证有限公司的合法经营权益，双方本着自愿、平等的原则，达成以下协议书条款，双方共同遵守执行。第三方认证是
				XX制造网为其XX通会员提供的一项以标准化审核认证为主要内容的服务，包
				含资质认证与实地认证。
				实地认证的审核认证服务内容要包括会员的工商注册信息、销售贸易能力和(或)产品设计开发能力、体系和产品认证、生产能力和质量管理、实景照片等内容。资质认证的审核认证服务内容主要包括会员的工商注册信息、经营资
				质、生产许可资质等内容。
				第三方认证审核分为初次审核和年度复审两种类型。初次审核，是指对会员进行首次审核，并出具报告。年度复审，是指为了认证保证报告所反映的实际情况的时效性，而对会员进行的每年一次的复审。XX制造网根据用户提交的服务申请及用户进行的自评情况，与用户确定服务购买意向并签署合同。用户支付相应费用后，XX制造网委托第三方认证机构在约定的日期进行审核并出具相应的认证报告。XX制造网将使用专有标识“、”对通过审核
				的用户的展示厅进行标注。
			</view>
			<view class="confirmationPopup" style="padding: 70rpx 20rpx;" v-if="type == 1">
				本次认证需付费，确认？
			</view>
		</confirmationPopup>
	</view>
</template>

<script>
	import '../../common.css'; // 引入公共 CSS 文件
	import confirmationPopup from '@/components/toast/confirmationPopup.vue';
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				name: 'xiaohua',
				idCard: '2101472154874512',
				cancelText: ['不同意', '取消'],
				confirmText: ['同意', '同意并支付'],
				type: 0,
				labelValue: '', // 如果labelValue为空，则不会显示任何内容
				 checkboxValue: [],
			}
		},
		components: {
			confirmationPopup,
		},
		computed: {
			...mapState(['certifiedIndividual']),
		},
		methods: {

			uploadImage(key) {
				this.$Oss.ossUploadImage({
					success: url => {
						this.$nextTick(() => {
							this.$set(this.certifiedIndividual, key, url);
						})
					}
				})
			},


			onNextClick() {
				if (this.$utils.verificationAll(this.certifiedIndividual, {
						imageReverseSide: '请上传身份证背面',
						imageStraight: '请上传身份证正面',
						card: '请输入身份证号',
						name: '请输入姓名',
					})) {
					return
				}

				this.$refs.confirmationPopup.open()
			},
			submit() {
				this.$refs.confirmationPopup.close()
				if (this.type == 0) {
					setTimeout(() => {
						this.type = 1
						this.$refs.confirmationPopup.open()
					}, 500)
				} else {
					this.$api('infoSubmitCompanyCertification', this.certifiedIndividual,
						res => {
							if (res.code == 200) {
								uni.showToast({
									title: '认证成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/index/center'
									})
								}, 500)
							}
						})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.auth-firm {
		.container {
			padding: 100rpx 50rpx 50rpx 50rpx;
			//border: 1px solid red;

			.header {
				margin-bottom: 40rpx;
				font-size: 28rpx;
				color: #666;
			}

			.form-item {
				margin-bottom: 40rpx;

				.label {
					font-size: 36rpx;
					margin-bottom: 10px;
					display: block;
				}

				.input {
					font-size: 30rpx;
					margin-top: 40rpx;
					background-color: #f7f7f7;
					padding: 20rpx;
					border: 1px solid #66666633;
				}

				.avatarFace {
					width: 150rpx;
					height: 150rpx;
				}


			}
		}

		.agree {
			display: flex;
			justify-content: center;
			position: fixed;
			bottom: 12%;
			left: 5%;
			
		}

		.confirmationPopup {
			max-height: 60vh;
			overflow-y: auto;
			overflow-x: hidden;
			width: 600rpx;
			padding: 20rpx;
			text-align: center;
		}

	}
</style>