2 changed files with 218 additions and 171 deletions
Split View
Diff Options
-
+4 -3pages/auth/login.vue
-
+214 -168pages_mine/mine/certifiedIndividual.vue
+ 4
- 3
pages/auth/login.vue
View File
+ 214
- 168
pages_mine/mine/certifiedIndividual.vue
View File
| @ -1,176 +1,222 @@ | |||
| <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> | |||
| <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> | |||
| <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> | |||