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/3.png" style="width: 50%;height: 50%"></image>
				</view>
			</view>

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

			<view class="form-item">
				<view class="label">其他资质</view>
				<view class="qtzz">
					<!-- <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> -->
					<uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx"
						@delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
				</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"
		v-if="certifiedIndividual.state != 1">
			立即认证
		</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">
				<uv-parse :content="content"></uv-parse>
			</view>
			<view class="confirmationPopup" style="padding: 70rpx 20rpx;" v-if="type == 1">
				本次认证需付费，确认？
			</view>
		</confirmationPopup>

		<!-- 平台审核弹框 -->
		<confirmationPopup ref="confirmationPopupUpload" title="提示" confirmText="确认" @confirm="confirm()">
			<view class="confirmationPopup">
				<image src="/static/image/publish/upload.png" style="width: 150rpx;height: 150rpx;" mode=""></image>
				<view class="info">
					已由平台进行审核，时间周期为24小时
				</view>
			</view>
		</confirmationPopup>

	</view>
</template>

<script>
	import '../../common.css'; // 引入公共 CSS 文件
	import confirmationPopup from '@/components/toast/confirmationPopup.vue';
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		components: {
			confirmationPopup,
		},
		data() {
			return {
				name: 'xiaohua',
				idCard: '2101472154874512',
				cancelText: ['不同意', '取消'],
				confirmText: ['同意', '同意并支付'],
				type: 0,
				labelValue: '', // 如果labelValue为空，则不会显示任何内容
				checkboxValue: [],
				fileList: [],
				form: {},
				authMoney: 0,
				content: '',
			}
		},
		computed: {
			...mapState(['certifiedIndividual']),
			...mapState(['configList']),
			...mapGetters(['isVedio'])
		},
		mounted() {
			this.openConfigMenu("getPrivacyPolicy")
		},
		onShow() {
			let self = this
			
			console.log(this.certifiedIndividual);
			
			this.certifiedIndividual.otherImage && this.certifiedIndividual.otherImage.split(',')
			.forEach(url => {
				self.fileList.push({
					url
				})
			})
			
		},
		methods: {
			//打开配置信息菜单
			openConfigMenu(key) {
				this.content = this.configList[key]
				// this.$refs.popup.open('bottom');
			},

			deleteImage(e) {
				this.fileList.splice(e.index, 1)
			},
			afterRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.fileList.push({
							url
						})
					})
				})
			},

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


			onNextClick() {
				this.form.imageStraight = this.certifiedIndividual.imageStraight
				this.form.imageReverseSide = this.certifiedIndividual.imageReverseSide
				// this.form.tradeImage = this.certifiedIndividual.tradeImage
				if (this.$utils.verificationAll(this.certifiedIndividual, {
						imageReverseSide: '请上传身份证背面',
						imageStraight: '请上传身份证正面',
						card: '请输入身份证号',
						tradeImage: '请上传营业执照',
					})) {
					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.certifiedIndividual.otherImage = this.fileList.map((item) => item.url).join(",")
					// this.form.imageStraight = this.certifiedIndividual.imageStraight
					// this.form.imageReverseSide = this.certifiedIndividual.imageReverseSide
					// this.form.tradeImage = this.certifiedIndividual.tradeImage
					this.$api('infoSubmitCompanyCertification', this.certifiedIndividual,
						res => {
							if (res.code == 200) {
								
								if(this.certifiedIndividual.state == 2){
									return self.$refs.confirmationPopupUpload.open()
								}
								
								const self = this
								uni.requestPayment({
									provider: 'wxpay', // 服务提提供商
									timeStamp: res.result.timeStamp, // 时间戳
									nonceStr: res.result.nonceStr, // 随机字符串
									package: res.result.packageValue,
									signType: res.result.signType, // 签名算法
									paySign: res.result.paySign, // 签名
									success: function(res) {
										// console.log('支付成功', res);
										// uni.showToast({
										// 	title: '认证成功',
										// 	icon: 'none'
										// })
										self.$refs.confirmationPopupUpload.open()

									},
									fail: function(err) {
										console.log('支付失败', err);
										self.$refs.confirmationPopup.close()
										uni.showToast({
											icon: 'none',
											title: "支付失败"
										})
									}
								});

							}
						})
				}
			},
			confirm() {
				uni.redirectTo({
					url: '/pages/index/center'
				})
			},
		}
	}
</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;
				}

				.qtzz {
					// width: 150rp;
					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>