| @ -1,176 +1,222 @@ | |||||
| <template> | <template> | ||||
| <view class="certified-individual"> | |||||
| <!--顶部导航栏--> | |||||
| <navbar leftClick @leftClick="$utils.navigateBack" title="上传身份证信息"/> | |||||
| <!--内容区域--> | |||||
| <view class="content"> | |||||
| <view class="title"> | |||||
| <view class="image"> | |||||
| <image src="../static/auth/1.svg" style="width: 100%;height: 100%"></image> | |||||
| </view> | |||||
| 请确保二代身份证有效,并且头像文字清晰,四角对齐,无反光,无遮挡。 | |||||
| </view> | |||||
| <view class="center"> | |||||
| <view class="avatarFace" @click="uploadImage('imageStraight')"> | |||||
| <image v-if="certifiedIndividual.imageStraight" :src="certifiedIndividual.imageStraight" | |||||
| style="width: 100%;height: 100%"></image> | |||||
| <image v-else src="../static/auth/4.png" style="width: 100%;height: 100%"></image> | |||||
| </view> | |||||
| <view class="reverseSide" @click="uploadImage('imageReverseSide')"> | |||||
| <image v-if="certifiedIndividual.imageReverseSide" :src="certifiedIndividual.imageReverseSide" | |||||
| style="width: 100%;height: 100%"></image> | |||||
| <image v-else src="../static/auth/5.png" style="width: 100%;height: 100%"></image> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!--立即认证按钮--> | |||||
| <view @click="nowAuth" class="bottomBtn"> | |||||
| 下一步 | |||||
| </view> | |||||
| <!--人脸识别服务协议--> | |||||
| <view class="agree"> | |||||
| <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> | |||||
| <view class="certified-individual"> | |||||
| <!--顶部导航栏--> | |||||
| <navbar leftClick @leftClick="$utils.navigateBack" title="上传身份证信息" /> | |||||
| <!--内容区域--> | |||||
| <view class="content"> | |||||
| <view class="title"> | |||||
| <view class="image"> | |||||
| <image src="../static/auth/1.svg" style="width: 100%;height: 100%"></image> | |||||
| </view> | |||||
| 请确保二代身份证有效,并且头像文字清晰,四角对齐,无反光,无遮挡。 | |||||
| </view> | |||||
| <view class="center"> | |||||
| <view class="avatarFace" @click="uploadImage('imageStraight')"> | |||||
| <image v-if="certifiedIndividual.imageStraight" :src="certifiedIndividual.imageStraight" | |||||
| style="width: 100%;height: 100%"></image> | |||||
| <image v-else src="../static/auth/4.png" style="width: 100%;height: 100%"></image> | |||||
| </view> | |||||
| <view class="reverseSide" @click="uploadImage('imageReverseSide')"> | |||||
| <image v-if="certifiedIndividual.imageReverseSide" :src="certifiedIndividual.imageReverseSide" | |||||
| style="width: 100%;height: 100%"></image> | |||||
| <image v-else src="../static/auth/5.png" style="width: 100%;height: 100%"></image> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!--立即认证按钮--> | |||||
| <view @click="nowAuth" class="bottomBtn"> | |||||
| 下一步 | |||||
| </view> | |||||
| <!--人脸识别服务协议--> | |||||
| <!-- <view class="agree"> | |||||
| <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> | |||||
| 我已阅读并同意签署 <text @click="$refs.popup.open('getPrivacyPolicy')">服务协议与隐私条款</text> | |||||
| <text @click="$refs.popup.open('getUserAgreement')">个人信息保护指引</text> | |||||
| </view> --> | |||||
| <view class="config"> | |||||
| <uv-checkbox-group | |||||
| v-model="checkboxValue" | |||||
| shape="circle"> | |||||
| <view class="content"> | |||||
| <view | |||||
| style="display: flex;"> | |||||
| <uv-checkbox | |||||
| size="30rpx" | |||||
| :name="1" | |||||
| ></uv-checkbox> | |||||
| 阅读并同意我们的<text @click="openConfigDetail('getPrivacyPolicy')">“服务协议与隐私条款”</text> | |||||
| </view> | |||||
| <view class=""> | |||||
| 以及<text @click="openConfigDetail('getUserAgreement')">个人信息保护指引</text> | |||||
| </view> | |||||
| </view> | |||||
| </uv-checkbox-group> | |||||
| </view> | |||||
| <configPopup ref="popup"></configPopup> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import {mapState} from 'vuex' | |||||
| export default { | |||||
| onLoad: function (options) { | |||||
| this.type = options.type; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState(['certifiedIndividual']), | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| checkboxValue: [], | |||||
| labelValue: '', // 如果labelValue为空,则不会显示任何内容 | |||||
| type: '', | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| uploadImage(key) { | |||||
| this.$Oss.ossUploadImage({ | |||||
| success: url => { | |||||
| console.log(url,"url"); | |||||
| this.certifiedIndividual[key] = url | |||||
| } | |||||
| }) | |||||
| }, | |||||
| nowAuth() { | |||||
| if(!this.certifiedIndividual.imageReverseSide){ | |||||
| return uni.showToast({ | |||||
| title: '请上传身份证背面', | |||||
| icon: 'none' | |||||
| }) | |||||
| } | |||||
| if(!this.certifiedIndividual.imageStraight){ | |||||
| return uni.showToast({ | |||||
| title: '请上传身份证正面', | |||||
| icon: 'none' | |||||
| }) | |||||
| } | |||||
| // uni.redirectTo({ | |||||
| // url: '/pages_mine/mine/authPerson' | |||||
| // }) | |||||
| // 根据type跳转到不同页面(个人认证/企业认证) | |||||
| if (this.type == "person") { | |||||
| uni.redirectTo({ | |||||
| url: '/pages_mine/mine/authPerson' | |||||
| }) | |||||
| // this.$utils.navigateTo('/mine/authPerson') | |||||
| } else if (this.type == "firm") { | |||||
| uni.redirectTo({ | |||||
| url: '/pages_mine/mine/authFirm' | |||||
| }) | |||||
| // this.$utils.navigateTo('/mine/authFirm') | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| import { | |||||
| mapState | |||||
| } from 'vuex' | |||||
| export default { | |||||
| onLoad: function(options) { | |||||
| this.type = options.type; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState(['certifiedIndividual']), | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| checkboxValue: [], | |||||
| labelValue: '', // 如果labelValue为空,则不会显示任何内容 | |||||
| type: '', | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| uploadImage(key) { | |||||
| this.$Oss.ossUploadImage({ | |||||
| success: url => { | |||||
| console.log(url, "url"); | |||||
| this.certifiedIndividual[key] = url | |||||
| } | |||||
| }) | |||||
| }, | |||||
| nowAuth() { | |||||
| if(!this.checkboxValue.length){ | |||||
| return uni.showToast({ | |||||
| title: '请先同意隐私协议', | |||||
| icon:'none' | |||||
| }) | |||||
| } | |||||
| if (!this.certifiedIndividual.imageReverseSide) { | |||||
| return uni.showToast({ | |||||
| title: '请上传身份证背面', | |||||
| icon: 'none' | |||||
| }) | |||||
| } | |||||
| if (!this.certifiedIndividual.imageStraight) { | |||||
| return uni.showToast({ | |||||
| title: '请上传身份证正面', | |||||
| icon: 'none' | |||||
| }) | |||||
| } | |||||
| // uni.redirectTo({ | |||||
| // url: '/pages_mine/mine/authPerson' | |||||
| // }) | |||||
| // 根据type跳转到不同页面(个人认证/企业认证) | |||||
| if (this.type == "person") { | |||||
| uni.redirectTo({ | |||||
| url: '/pages_mine/mine/authPerson' | |||||
| }) | |||||
| // this.$utils.navigateTo('/mine/authPerson') | |||||
| } else if (this.type == "firm") { | |||||
| uni.redirectTo({ | |||||
| url: '/pages_mine/mine/authFirm' | |||||
| }) | |||||
| // this.$utils.navigateTo('/mine/authFirm') | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .certified-individual { | |||||
| .content { | |||||
| padding: 40rpx; | |||||
| .title { | |||||
| display: flex; | |||||
| font-size: 30rpx; | |||||
| .image { | |||||
| display: flex; | |||||
| align-items: flex-start; | |||||
| width: 10vw; | |||||
| height: 3vh; | |||||
| } | |||||
| } | |||||
| .center { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| gap: 150rpx; | |||||
| margin-top: 15%; | |||||
| .avatarFace { | |||||
| width: 80vw; | |||||
| height: 20vh; | |||||
| } | |||||
| .reverseSide { | |||||
| width: 80vw; | |||||
| height: 20vh; | |||||
| } | |||||
| } | |||||
| } | |||||
| .bottomBtn { | |||||
| position: fixed; | |||||
| bottom: 15%; | |||||
| left: 25%; | |||||
| width: 50%; | |||||
| height: 60rpx; | |||||
| line-height: 60rpx; | |||||
| font-size: 30rpx; | |||||
| color: #FFFFFF; | |||||
| text-align: center; | |||||
| //border: 1px solid red; | |||||
| background: $uni-linear-gradient-color; | |||||
| -webkit-background-clip: text; | |||||
| /*将设置的背景颜色限制在文字中*/ | |||||
| -webkit-text-fill-color: transparent; | |||||
| /*给文字设置成透明*/ | |||||
| } | |||||
| .agree { | |||||
| position: fixed; | |||||
| bottom: 7%; | |||||
| left: 15%; | |||||
| display: flex; | |||||
| font-size: 26rpx; | |||||
| justify-content: center; | |||||
| //border: 1px solid red; | |||||
| } | |||||
| } | |||||
| .certified-individual { | |||||
| .content { | |||||
| padding: 40rpx; | |||||
| .title { | |||||
| display: flex; | |||||
| font-size: 30rpx; | |||||
| .image { | |||||
| display: flex; | |||||
| align-items: flex-start; | |||||
| width: 10vw; | |||||
| height: 3vh; | |||||
| } | |||||
| } | |||||
| .center { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| gap: 150rpx; | |||||
| margin-top: 15%; | |||||
| .avatarFace { | |||||
| width: 80vw; | |||||
| height: 20vh; | |||||
| } | |||||
| .reverseSide { | |||||
| width: 80vw; | |||||
| height: 20vh; | |||||
| } | |||||
| } | |||||
| } | |||||
| .bottomBtn { | |||||
| position: fixed; | |||||
| bottom: 15%; | |||||
| left: 25%; | |||||
| width: 50%; | |||||
| height: 60rpx; | |||||
| line-height: 60rpx; | |||||
| font-size: 30rpx; | |||||
| color: #FFFFFF; | |||||
| text-align: center; | |||||
| //border: 1px solid red; | |||||
| background: $uni-linear-gradient-color; | |||||
| -webkit-background-clip: text; | |||||
| /*将设置的背景颜色限制在文字中*/ | |||||
| -webkit-text-fill-color: transparent; | |||||
| /*给文字设置成透明*/ | |||||
| } | |||||
| // .agree { | |||||
| // position: fixed; | |||||
| // bottom: 7%; | |||||
| // left: 15%; | |||||
| // display: flex; | |||||
| // font-size: 26rpx; | |||||
| // justify-content: center; | |||||
| // //border: 1px solid red; | |||||
| // } | |||||
| .config{ | |||||
| position: fixed; | |||||
| bottom: 20rpx; | |||||
| margin: 0 auto; | |||||
| font-size: 28rpx; | |||||
| text-align: center; | |||||
| line-height: 50rpx; | |||||
| text{ | |||||
| color: #3c69f1; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||