实名认证动态0.5
This commit is contained in:
WindowBird
parent
46769ff923
commit
3902e20553
16
api/realName/realName.js
Normal file
16
api/realName/realName.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import request from "../../utils/request";
|
||||
|
||||
export function putTwoElementRealName(data) {
|
||||
return request({
|
||||
url: "/app/realName/twoElementRealName",
|
||||
method: "PUT",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
export function getRefreshRealName() {
|
||||
return request({
|
||||
url: "/app/realName/refreshRealName",
|
||||
method: "GET",
|
||||
});
|
||||
}
|
||||
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 填充区，避免内容被导航栏遮挡 -->
|
||||
<view :style="{ height: navBarHeight + 'px' }" class="navbar-placeholder"></view>
|
||||
<view
|
||||
:style="{ height: navBarHeight + 'px' }"
|
||||
class="navbar-placeholder"
|
||||
></view>
|
||||
|
||||
<!-- 自定义导航栏 -->
|
||||
<view
|
||||
|
|
@ -14,19 +17,28 @@
|
|||
class="custom-navbar"
|
||||
>
|
||||
<view
|
||||
:style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"
|
||||
:style="{
|
||||
height: capsuleHeight + 'px',
|
||||
lineHeight: capsuleHeight + 'px',
|
||||
}"
|
||||
class="navbar-left"
|
||||
@click="handleBack"
|
||||
>
|
||||
<image :src="backIcon" class="back-icon" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view
|
||||
:style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"
|
||||
:style="{
|
||||
height: capsuleHeight + 'px',
|
||||
lineHeight: capsuleHeight + 'px',
|
||||
}"
|
||||
class="navbar-title"
|
||||
>{{ title }}
|
||||
</view>
|
||||
<view
|
||||
:style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"
|
||||
:style="{
|
||||
height: capsuleHeight + 'px',
|
||||
lineHeight: capsuleHeight + 'px',
|
||||
}"
|
||||
class="navbar-right"
|
||||
>
|
||||
<slot name="right"></slot>
|
||||
|
|
@ -36,173 +48,179 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CommonEnum from '../../enum/common'
|
||||
import CommonEnum from "../../enum/common";
|
||||
|
||||
export default {
|
||||
name: 'CustomNavbar',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
backIcon: {
|
||||
type: String,
|
||||
default: CommonEnum.BACK_BUTTON,
|
||||
},
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 新增：滚动相关配置
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: CommonEnum.BASE_COLOR, // 滚动时的背景色，使用基调颜色
|
||||
},
|
||||
scrollThreshold: {
|
||||
type: Number,
|
||||
default: 20, // 滚动阈值，超过此值开始变色
|
||||
},
|
||||
enableScrollEffect: {
|
||||
type: Boolean,
|
||||
default: true, // 是否启用滚动效果
|
||||
},
|
||||
export default {
|
||||
name: "CustomNavbar",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 0,
|
||||
menuButtonInfo: null,
|
||||
capsuleHeight: 0,
|
||||
// 新增：滚动状态
|
||||
isScrolled: false,
|
||||
scrollTop: 0,
|
||||
lastScrollTop: 0,
|
||||
backIcon: {
|
||||
type: String,
|
||||
default: CommonEnum.BACK_BUTTON,
|
||||
},
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 新增：滚动相关配置
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: CommonEnum.BASE_COLOR, // 滚动时的背景色，使用基调颜色
|
||||
},
|
||||
scrollThreshold: {
|
||||
type: Number,
|
||||
default: 20, // 滚动阈值，超过此值开始变色
|
||||
},
|
||||
enableScrollEffect: {
|
||||
type: Boolean,
|
||||
default: true, // 是否启用滚动效果
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 0,
|
||||
menuButtonInfo: null,
|
||||
capsuleHeight: 0,
|
||||
// 新增：滚动状态
|
||||
isScrolled: false,
|
||||
scrollTop: 0,
|
||||
lastScrollTop: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getSystemInfo();
|
||||
},
|
||||
methods: {
|
||||
getSystemInfo() {
|
||||
// 获取系统信息
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
// 获取状态栏高度
|
||||
this.statusBarHeight = systemInfo.statusBarHeight;
|
||||
|
||||
// 获取胶囊按钮信息
|
||||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
|
||||
// 计算胶囊高度
|
||||
this.capsuleHeight = this.menuButtonInfo.height;
|
||||
|
||||
// 计算导航栏高度（胶囊底部到状态栏顶部的距离）
|
||||
this.navBarHeight = this.menuButtonInfo.bottom + 8;
|
||||
},
|
||||
handleBack() {
|
||||
if (this.showBack) {
|
||||
// 先触发自定义事件，让父组件有机会处理
|
||||
this.$emit("back");
|
||||
// 自动执行返回逻辑
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getSystemInfo()
|
||||
},
|
||||
methods: {
|
||||
getSystemInfo() {
|
||||
// 获取系统信息
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
// 获取状态栏高度
|
||||
this.statusBarHeight = systemInfo.statusBarHeight
|
||||
|
||||
// 获取胶囊按钮信息
|
||||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
// 新增：处理页面滚动（供父组件调用）
|
||||
handlePageScroll(e) {
|
||||
if (!this.enableScrollEffect) return;
|
||||
|
||||
// 计算胶囊高度
|
||||
this.capsuleHeight = this.menuButtonInfo.height
|
||||
this.scrollTop = e.scrollTop;
|
||||
|
||||
// 计算导航栏高度（胶囊底部到状态栏顶部的距离）
|
||||
this.navBarHeight = this.menuButtonInfo.bottom + 8
|
||||
},
|
||||
handleBack() {
|
||||
if (this.showBack) {
|
||||
// 先触发自定义事件，让父组件有机会处理
|
||||
this.$emit('back')
|
||||
// 自动执行返回逻辑
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
// 判断是否超过滚动阈值
|
||||
if (this.scrollTop > this.scrollThreshold) {
|
||||
if (!this.isScrolled) {
|
||||
this.isScrolled = true;
|
||||
this.$emit("scroll-change", {
|
||||
isScrolled: true,
|
||||
scrollTop: this.scrollTop,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 新增：处理页面滚动（供父组件调用）
|
||||
handlePageScroll(e) {
|
||||
if (!this.enableScrollEffect) return
|
||||
|
||||
this.scrollTop = e.scrollTop
|
||||
|
||||
// 判断是否超过滚动阈值
|
||||
if (this.scrollTop > this.scrollThreshold) {
|
||||
if (!this.isScrolled) {
|
||||
this.isScrolled = true
|
||||
this.$emit('scroll-change', { isScrolled: true, scrollTop: this.scrollTop })
|
||||
}
|
||||
} else {
|
||||
if (this.isScrolled) {
|
||||
this.isScrolled = false
|
||||
this.$emit('scroll-change', { isScrolled: false, scrollTop: this.scrollTop })
|
||||
}
|
||||
} else {
|
||||
if (this.isScrolled) {
|
||||
this.isScrolled = false;
|
||||
this.$emit("scroll-change", {
|
||||
isScrolled: false,
|
||||
scrollTop: this.scrollTop,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 触发滚动事件，让父组件可以获取滚动信息
|
||||
this.$emit('scroll', {
|
||||
scrollTop: this.scrollTop,
|
||||
isScrolled: this.isScrolled,
|
||||
})
|
||||
},
|
||||
|
||||
// 新增：手动设置滚动状态（供父组件调用）
|
||||
setScrollState(scrollTop) {
|
||||
if (!this.enableScrollEffect) return
|
||||
|
||||
this.scrollTop = scrollTop
|
||||
this.isScrolled = scrollTop > this.scrollThreshold
|
||||
},
|
||||
// 触发滚动事件，让父组件可以获取滚动信息
|
||||
this.$emit("scroll", {
|
||||
scrollTop: this.scrollTop,
|
||||
isScrolled: this.isScrolled,
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
// 新增：手动设置滚动状态（供父组件调用）
|
||||
setScrollState(scrollTop) {
|
||||
if (!this.enableScrollEffect) return;
|
||||
|
||||
this.scrollTop = scrollTop;
|
||||
this.isScrolled = scrollTop > this.scrollThreshold;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 填充区样式 */
|
||||
.navbar-placeholder {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
/* 填充区样式 */
|
||||
.navbar-placeholder {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 自定义导航栏样式 */
|
||||
.custom-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
padding-top: 0;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.3s ease; /* 添加过渡动画 */
|
||||
}
|
||||
/* 自定义导航栏样式 */
|
||||
.custom-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
padding-top: 0;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.3s ease; /* 添加过渡动画 */
|
||||
}
|
||||
|
||||
/* 滚动状态样式 */
|
||||
.navbar-scrolled {
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 滚动时添加阴影 */
|
||||
}
|
||||
/* 滚动状态样式 */
|
||||
.navbar-scrolled {
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 滚动时添加阴影 */
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60rpx;
|
||||
.navbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60rpx;
|
||||
|
||||
.back-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
.back-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #695347;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.navbar-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #695347;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.navbar-right {
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,12 +23,22 @@
|
|||
<view class="inputYourIdentify">请输入您的有效身份信息</view>
|
||||
|
||||
<view class="inputBox">
|
||||
<input class="input" placeholder="请输入您的姓名" type="text" />
|
||||
<input class="input" placeholder="请输入您的身份证号" type="text" />
|
||||
<input class="input" placeholder="请输入您的手机号" type="text" />
|
||||
<input
|
||||
v-model="twoElementRealName.userName"
|
||||
class="input"
|
||||
placeholder="请输入您的姓名"
|
||||
type="text"
|
||||
/>
|
||||
<input
|
||||
v-model="twoElementRealName.idCard"
|
||||
class="input"
|
||||
placeholder="请输入您的身份证号"
|
||||
type="text"
|
||||
/>
|
||||
<!-- <input class="input" placeholder="请输入您的手机号" type="text" />-->
|
||||
</view>
|
||||
|
||||
<button class="submit">提交</button>
|
||||
<button class="submit" @click="submit()">提交</button>
|
||||
<view class="tip"
|
||||
>点击提交代表您授权日行一善、项目捐款获取以上信 息，用于实名验证
|
||||
</view>
|
||||
|
|
@ -38,6 +48,10 @@
|
|||
|
||||
<script>
|
||||
import CommonEnum from "../../enum/common";
|
||||
import {
|
||||
getRefreshRealName,
|
||||
putTwoElementRealName,
|
||||
} from "../../api/realName/realName";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
|
|
@ -46,26 +60,29 @@ export default {
|
|||
flower: "https://api.ccttiot.com/image-1757990177680.png",
|
||||
CommonEnum,
|
||||
loading: false,
|
||||
twoElementRealName: {
|
||||
userName: "",
|
||||
idCard: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时获取数据
|
||||
this.loadPageData();
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
// 加载页面数据
|
||||
async loadPageData() {
|
||||
this.loading = true;
|
||||
async submit() {
|
||||
uni.showLoading({
|
||||
title: "实名认证中",
|
||||
mask: true,
|
||||
});
|
||||
try {
|
||||
// TODO: 调用页面数据API
|
||||
// const response = await getPageData()
|
||||
// 模拟加载
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 1000);
|
||||
const res = await putTwoElementRealName(this.twoElementRealName);
|
||||
if (res.code === 200) {
|
||||
uni.hideLoading();
|
||||
await getRefreshRealName();
|
||||
}
|
||||
// 成功后的操作，比如跳转页面
|
||||
} catch (error) {
|
||||
console.error("获取页面数据失败:", error);
|
||||
this.loading = false;
|
||||
uni.hideLoading();
|
||||
console.error("提交失败:", error);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -131,29 +148,29 @@ export default {
|
|||
|
||||
.box {
|
||||
position: absolute;
|
||||
left: 27px;
|
||||
top: 259px;
|
||||
width: 321px;
|
||||
height: 356px;
|
||||
border-radius: 15px;
|
||||
left: 54rpx; /* 27px * 2 */
|
||||
top: 518rpx; /* 259px * 2 */
|
||||
width: 642rpx; /* 321px * 2 */
|
||||
height: 712rpx; /* 356px * 2 */
|
||||
border-radius: 30rpx; /* 15px * 2 */
|
||||
opacity: 1;
|
||||
|
||||
background: #fffbf5;
|
||||
|
||||
box-sizing: border-box;
|
||||
border: 0.5px solid #c7a26d;
|
||||
border: 1rpx solid #c7a26d; /* 0.5px * 2 */
|
||||
}
|
||||
|
||||
.inputYourIdentify {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 282px;
|
||||
left: 100rpx; /* 50px * 2 */
|
||||
top: 564rpx; /* 282px * 2 */
|
||||
|
||||
height: 22px;
|
||||
height: 44rpx; /* 22px * 2 */
|
||||
opacity: 1;
|
||||
|
||||
font-family: AlibabaPuHuiTi;
|
||||
font-size: 16px;
|
||||
font-size: 32rpx; /* 16px * 2 */
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
letter-spacing: 0em;
|
||||
|
|
@ -179,17 +196,17 @@ export default {
|
|||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
border-bottom: #d8d8d8 solid 1px;
|
||||
border-bottom: #d8d8d8 solid 2rpx; /* 1px * 2 */
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 488px;
|
||||
width: 275px;
|
||||
height: 49px;
|
||||
border-radius: 10px;
|
||||
left: 100rpx; /* 50px * 2 */
|
||||
top: 976rpx; /* 488px * 2 */
|
||||
width: 550rpx; /* 275px * 2 */
|
||||
height: 98rpx; /* 49px * 2 */
|
||||
border-radius: 20rpx; /* 10px * 2 */
|
||||
opacity: 0.5;
|
||||
|
||||
background: #c7a26d;
|
||||
|
|
@ -197,14 +214,14 @@ export default {
|
|||
|
||||
.tip {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 549px;
|
||||
width: 272px;
|
||||
height: 32px;
|
||||
left: 100rpx; /* 50px * 2 */
|
||||
top: 1098rpx; /* 549px * 2 */
|
||||
width: 544rpx; /* 272px * 2 */
|
||||
height: 64rpx; /* 32px * 2 */
|
||||
opacity: 1;
|
||||
|
||||
font-family: AlibabaPuHuiTi;
|
||||
font-size: 12px;
|
||||
font-size: 24rpx; /* 12px * 2 */
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0em;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user