315 lines
6.8 KiB
Vue
315 lines
6.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 顶部导航栏 -->
|
|
<!-- <view class="header">-->
|
|
<!-- <view class="back-icon" @click="goBack">-->
|
|
<!-- <image class="icon" :src="require('@/static/images/icons/back.png')" mode="aspectFit"></image>-->
|
|
<!-- </view>-->
|
|
<!-- <text class="title">人脸上传</text>-->
|
|
<!-- </view>-->
|
|
|
|
<!-- 主要内容区域 -->
|
|
<view class="content">
|
|
<!-- 上传区域 -->
|
|
<view class="upload-area" @click="handleChooseImage">
|
|
<view class="upload-box" :class="{ 'has-image': userInfo.avatar }">
|
|
<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill" class="preview-image" />
|
|
<view v-else class="upload-placeholder">
|
|
<image class="camera-icon" :src="require('@/static/images/my/camera.png')" mode="aspectFill"></image>
|
|
<text class="upload-text">点击上传照片</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提示信息 -->
|
|
<view class="tips">
|
|
<text class="tip-item">·五官端正，面部无遮挡（请使用人脸照片）</text>
|
|
<text class="tip-item">·不要带视频（如墨镜等）</text>
|
|
<text class="tip-item">·请在光线明亮的纯色背景下拍照（建议背景颜色为白色）</text>
|
|
<text class="tip-item">·上传照片后需保存，保存失败照片将被清除</text>
|
|
</view>
|
|
|
|
<!-- 隐私协议 -->
|
|
<!-- <view class="privacy-agreement">-->
|
|
<!-- <checkbox-->
|
|
<!-- :checked="agreed"-->
|
|
<!-- @click="agreed = !agreed"-->
|
|
<!-- color="#FF8126"-->
|
|
<!-- />-->
|
|
<!-- <text class="agreement-text">我已阅读并同意</text>-->
|
|
<!-- <text class="agreement-link" @click="showAgreement">《东华管理生物特征采集私隐声明》</text>-->
|
|
<!-- </view>-->
|
|
|
|
<!-- 按钮组 -->
|
|
<view class="button-group">
|
|
<button class="submit-btn" :disabled="!agreed || !imageUrl" @click="handleUpload">确定上传</button>
|
|
<button class="cancel-btn" @click="goBack">取消</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getUserProfile,
|
|
uploadAvatar
|
|
} from "@/api/system/user"
|
|
import config from '@/config'
|
|
import {
|
|
getToken
|
|
} from '@/utils/auth'
|
|
import {
|
|
showConfirm
|
|
} from '@/utils/common'
|
|
export default {
|
|
data() {
|
|
return {
|
|
imageUrl: '',
|
|
agreed: true,
|
|
userInfo: {}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getUserInfo()
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
getUserProfile().then(res => {
|
|
this.userInfo = res.user
|
|
console.log('this.userInfo', this.userInfo)
|
|
})
|
|
},
|
|
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
handleChooseImage() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: chooseImageRes => {
|
|
this.userInfo.avatar = chooseImageRes.tempFilePaths[0]
|
|
this.imageUrl = chooseImageRes.tempFilePaths[0]
|
|
}
|
|
});
|
|
},
|
|
|
|
handleUpload() {
|
|
if (!this.agreed || !this.imageUrl) return
|
|
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
})
|
|
|
|
uni.uploadFile({
|
|
url: config.baseUrl + '/system/user/profile/avatar',
|
|
filePath: this.imageUrl,
|
|
name: 'avatarfile',
|
|
header: {
|
|
'Authorization': 'Bearer ' + getToken()
|
|
},
|
|
success: (uploadFileRes) => {
|
|
console.log(uploadFileRes);
|
|
if(uploadFileRes.statusCode == 200) {
|
|
let reslut = JSON.parse(uploadFileRes.data)
|
|
console.log('reslut',reslut)
|
|
if(reslut.code == 200) {
|
|
uni.showToast({
|
|
title: '上传成功',
|
|
icon: 'success',
|
|
duration: 2000,
|
|
success: () => {
|
|
setTimeout(() => {
|
|
this.goBack()
|
|
}, 2000)
|
|
}
|
|
})
|
|
}else{
|
|
uni.showToast({ title: reslut.msg,icon: 'none' });
|
|
}
|
|
}else if(uploadFileRes.statusCode == 401) {
|
|
showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => {
|
|
if (res.confirm) {
|
|
uni.reLaunch({ url: '/pages/login/login' })
|
|
}
|
|
})
|
|
}else{
|
|
uni.showToast({ title: uploadFileRes.errMsg,icon: 'none' });
|
|
}
|
|
uni.hideLoading()
|
|
},
|
|
fail: (uploadFileErr) => {
|
|
let { message } = uploadFileErr
|
|
if (message == 'Network Error') {
|
|
message = '后端接口连接异常'
|
|
} else if (message.includes('timeout')) {
|
|
message = '系统接口请求超时'
|
|
} else if (message.includes('Request failed with status code')) {
|
|
message = '系统接口' + message.substr(message.length - 3) + '异常'
|
|
}
|
|
uni.showToast({ title: message,icon: 'none' });
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
},
|
|
|
|
showAgreement() {
|
|
uni.navigateTo({
|
|
url: '/pages/privacy-agreement/index'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
min-height: 100vh;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.header {
|
|
padding: 44px 32rpx 0;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.back-icon {
|
|
padding: 20rpx;
|
|
margin-left: -20rpx;
|
|
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-right: 60rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.upload-area {
|
|
margin-bottom: 48rpx;
|
|
|
|
.upload-box {
|
|
width: 75%;
|
|
height: 400rpx;
|
|
border: 2rpx dashed #CCCCCC;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&.has-image {
|
|
border-style: solid;
|
|
}
|
|
|
|
.preview-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.upload-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.camera-icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.tips {
|
|
margin-bottom: 48rpx;
|
|
width: 75%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
.tip-item {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
line-height: 1.6;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.privacy-agreement {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 48rpx;
|
|
|
|
/deep/ .uni-checkbox-input {
|
|
border-radius: 50% !important;
|
|
}
|
|
}
|
|
|
|
.button-group {
|
|
margin-top: 32rpx;
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: #FF8126;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
margin-bottom: 24rpx;
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&:active {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.cancel-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: #fff;
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2rpx solid #CCCCCC;
|
|
|
|
&:active {
|
|
background: #f5f5f5;
|
|
}
|
|
}
|
|
}
|
|
</style> |