first commit

pageInvest/login/getBackAccout.vue

@@ -0,0 +1,160 @@
+<template>
+	<view class="login">
+		<view class="orderdetail_header p30">
+			<view :style="{ height: statusBarHeight }"></view>
+			<view style="height: 44px; display: flex; align-items: center">
+				<up-icon name="arrow-left" bold color="#000" @click="back"></up-icon>
+			</view>
+		</view>
+		
+		<image class="login_bei" src="/static/logoB.png"></image>
+
+		<statusBar />
+		<view class="login_logo">
+			<image class="login_logo_img" src="/static/logo.png"></image>
+			<view class="login_logo_tit">欢迎来到投资者平台</view>
+		</view>
+		<view style="margin-top: 150rpx">
+			<view style="margin-bottom: 30rpx">
+				<up-input fontSize="30rpx" v-model="dataFrom.phone" placeholder="请输入您的手机号" border="bottom" clearable></up-input>
+			</view>
+			<view style="margin-bottom: 30rpx; display: flex; align-items: center">
+				<up-input fontSize="30rpx" v-model="dataFrom.smsCode" placeholder="请输入验证码" border="bottom" clearable></up-input>
+				<up-code ref="uCode" @change="codeChange2" keep-running start-text="点我获取验证码"></up-code>
+				<text @click="getCode2" :text="tips" style="font-size: 28rpx; color: rgba(111, 162, 86, 1)">{{ tips }}</text>
+			</view>
+		</view>
+		<view style="display: flex; justify-content: center; margin-top: 80rpx">
+			<view class="login_btn" @click="submit">确认</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { findUserName, smsCode } from '@/api/api.js';
+const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
+let tips = ref('');
+let uCode = ref(null);
+let dataFrom = reactive({
+	phone: '',
+	smsCode: '',
+});
+
+let toLogin = () => {
+	uni.navigateBack();
+};
+
+let codeChange2 = (text) => {
+	tips.value = text;
+};
+
+let getCode2 = () => {
+	if (!dataFrom.phone) return uni.showToast({ title: '请输入手机号', icon: 'none' });
+	if (uCode.value.canGetCode) {
+		// 模拟向后端请求验证码
+		uni.showLoading({
+			title: '正在获取验证码'
+		});
+		smsCode({
+			phone: dataFrom.phone
+		}).then((res) => {
+			uni.hideLoading();
+			uni.$u.toast('验证码已发送');
+			uCode.value.start();
+		});
+	} else {
+		uni.$u.toast('倒计时结束后再发送');
+	}
+};
+
+let submit = async () => {
+	if (!dataFrom.phone) return uni.showToast({ title: '请输入手机号', icon: 'none' });
+	if (dataFrom.phone.length != 11) return uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
+	if (!dataFrom.smsCode) return uni.showToast({ title: '请输入验证码', icon: 'none' });
+	let _res = await findUserName(dataFrom);
+	if (_res.userNames.length == 0) {
+		uni.showModal({
+			title: '提示',
+			content: '该手机号还未注册',
+			showCancel: false,
+			confirmText: "我知道了"
+		})
+	} else {
+		uni.showModal({
+			title: '已找回的用户名',
+			content: _res.userNames.join(','),
+			showCancel: false,
+			confirmText: "确认",
+			success: () => {
+				uni.setClipboardData({
+					data: _res.userNames.join(','), //要被复制的内容
+					success: () => { //复制成功的回调函数
+						uni.showToast({ //提示
+							title: '已复制用户名'
+						})
+						setTimeout(() => {
+							uni.navigateBack()
+						}, 1500)
+					}
+				});
+			}
+		})
+	}
+};
+
+let back = () => {
+	uni.navigateBack();
+};
+</script>
+
+<style scoped lang="scss">
+.login {
+	padding: 0 60rpx;
+
+	&_bei {
+		position: fixed;
+		right: -120rpx;
+		top: -206rpx;
+		width: 728rpx;
+		height: 728rpx;
+	}
+
+	&_logo {
+		margin-top: 150rpx;
+		&_img {
+			width: 280rpx;
+			height: 200rpx;
+			// background: #e6e6e6;
+			// box-shadow: 0rpx 0rpx 110rpx 2rpx rgba(115, 192, 76, 0.19);
+			border-radius: 28rpx 28rpx 28rpx 28rpx;
+			margin-bottom: 20rpx;
+		}
+		&_tit {
+			font-weight: bold;
+			font-size: 44rpx;
+			color: #232323;
+		}
+	}
+	&_btn {
+		width: 474rpx;
+		height: 78rpx;
+		background: rgba(111, 162, 86, 1);
+		border-radius: 54rpx 54rpx 54rpx 54rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+		font-size: 30rpx;
+		color: #ffffff;
+	}
+}
+
+.orderdetail_header {
+	width: 750rpx;
+	position: fixed;
+	left: 0;
+	top: 0;
+	z-index: 99;
+}
+</style>