Browse Source

上传代码

master
前端-胡立永 9 months ago
parent
commit
8dacdc9733
2 changed files with 218 additions and 171 deletions
  1. +4
    -3
      pages/auth/login.vue
  2. +214
    -168
      pages_mine/mine/certifiedIndividual.vue

+ 4
- 3
pages/auth/login.vue View File

@ -16,9 +16,10 @@
微信授权登录 微信授权登录
</view> </view>
</view> </view>
<!-- <view class="btn b2">
使用短信验证登录
</view> -->
<view class="btn b2"
@click="$utils.redirectTo('/index/index')">
取消登录
</view>


+ 214
- 168
pages_mine/mine/certifiedIndividual.vue View File

@ -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>

Loading…
Cancel
Save