Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d8f09650 1 parent de5a5ad2

绑定手机号流程优化

Inline Side-by-side
Showing 9 changed files with 223 additions and 18 deletions
/*
* @Date: 2023-12-14 17:45:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-19 17:21:45
* @LastEditTime: 2023-12-21 15:52:17
* @FilePath: /meihuaApp/src/app.config.js
* @Description: 文件描述
*/
......@@ -14,6 +14,7 @@ export default defineAppConfig({
'pages/confirm/index',
'pages/payInfo/index',
'pages/login/index',
'pages/bind/index',
'pages/myInfo/index',
'pages/auth/index',
],
......
/*
* @Date: 2023-12-14 17:45:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-19 17:12:45
* @LastEditTime: 2023-12-21 16:09:14
* @FilePath: /meihuaApp/src/app.js
* @Description: 文件描述
*/
......@@ -19,7 +19,8 @@ const App = createApp({
// 缓存没有权限的地址
const router = routerStore();
router.add(path);
if (path !== 'pages/index/index' && !wx.getStorageSync("sessionid")) {
// if (path !== 'pages/index/index' && !wx.getStorageSync("sessionid")) {
if (!wx.getStorageSync("sessionid")) {
console.warn("没有权限");
// Taro.navigateTo({
// url: './pages/auth/index',
......
/*
* @Date: 2023-12-15 14:04:28
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-15 14:04:44
* @FilePath: /meihuaApp/src/pages/login/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '',
usingComponents: {
},
}
.nut-input {
border-radius: 50rpx;
padding-top: 25rpx;
}
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-21 15:56:40
* @FilePath: /meihuaApp/src/pages/bind/index.vue
* @Description: 文件描述
-->
<template>
<view>
<view style="color: #6A4925; font-size: 56rpx; text-align: center;">绑&nbsp;定</view>
<view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 50rpx; border-radius: 50rpx; padding: 5rpx 0;">
<nut-input v-model="tel" placeholder="请输入手机号" :border="false" type="number" max-length="11" />
</view>
<view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 20rpx; border-radius: 50rpx;">
<!-- <nut-input v-model="code" placeholder="请输入验证码" :border="false" type="number" >
<template #right> <nut-button size="small" color="#6A4925">获取验证码</nut-button> </template>
</nut-input> -->
<nut-row>
<nut-col span="14">
<nut-input v-model="code" placeholder="请输入验证码" :border="false" type="number" :formatter="codeFormatter" max-length="4"></nut-input>
</nut-col>
<nut-col span="10">
<view style="padding: 25rpx 10rpx; line-height: 40rpx; background-color: #6A4925; color: #fff; border-top-right-radius: 50rpx; border-bottom-right-radius: 50rpx; font-size: 28rpx;text-align: center;">
<view @tap="getCode" v-if="!time_remaining">获取验证码</view>
<text v-else>{{ time_remaining }}秒后重新发送</text>
</view>
</nut-col>
</nut-row>
</view>
<view style="margin: 50rpx; margin-bottom: 10rpx;">
<nut-button block color="#6A4925" size="large" @tap="login"><text style="font-size: 38rpx;">确&nbsp;认</text></nut-button>
</view>
</view>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
import { ref, nextTick } from "vue";
let countdownIntervalId; // 用于存储倒计时的计时器 ID
const startCountdown = (timeInSeconds, updateCallback, resetCallback) => {
if (countdownIntervalId) {
// 如果已经有倒计时在进行中，则先清除之前的计时器
clearInterval(countdownIntervalId);
}
let timeLeft = timeInSeconds;
// 更新倒计时显示的函数
const updateCountdown = () => {
if (timeLeft <= 0) {
// 倒计时结束
clearInterval(countdownIntervalId);
resetCallback(); // 调用重置函数
} else {
// 更新倒计时显示
updateCallback(timeLeft);
timeLeft--;
}
}
// 立即执行一次更新倒计时显示函数
updateCountdown();
// 每秒调用一次更新倒计时显示函数
countdownIntervalId = setInterval(updateCountdown, 1000);
}
const resetCountdown = () => {
if (countdownIntervalId) {
// 清除倒计时计时器
clearInterval(countdownIntervalId);
countdownIntervalId = undefined;
console.log("倒计时已重置");
time_remaining.value = 0;
}
}
const time_remaining = ref(0);
const tel = ref('');
const code = ref('');
const showRight = ref(false);
const tapRight = () => {
showRight.value = true;
}
const codeFormatter = (value) => {
return value.replace(/\D/g, '').substring(0, 4);
}
const isValidTel = (tel) => {
return /^1\d{10}$/.test(tel);
}
const login = () => {
console.warn(tel.value);
console.warn(code.value);
if (!isValidTel(tel.value) ||!code.value) {
Taro.showToast({
title: '请检查输入项',
icon: 'error',
duration: 2000
});
return;
} else {
Taro.showToast({
title: '登录成功',
icon: 'success',
duration: 2000,
success: () => {
setTimeout(() => {
Taro.reLaunch({
url: '/pages/index/index'
})
}, 1000);
}
});
}
}
const updateDisplay = (timeLeft) => {
// 倒计时剩余时间
time_remaining.value = timeLeft;
}
const resetDisplay = () => {
// 在此处进行重置后的展示操作
resetCountdown();
}
const getCode = () => {
if (isValidTel(tel.value)) {
Taro.showToast({
title: '验证码已发送',
icon:'success',
duration: 2000
});
startCountdown(10, updateDisplay, resetDisplay);
} else {
Taro.showToast({
title: '请检查手机号',
icon: 'error',
duration: 2000
});
}
}
</script>
<script>
import "./index.less";
export default {
name: "loginPage",
};
</script>
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-21 13:44:02
* @LastEditTime: 2023-12-21 16:05:43
* @FilePath: /meihuaApp/src/pages/detail/index.vue
* @Description: 房间详情页面
-->
......@@ -145,9 +145,17 @@ onMounted(() => {
const page = ref(1);
const goToConfirm = () => {
Taro.navigateTo({
url: `/pages/confirm/index?id=123&start_date=${start_date.value}&end_date=${end_date.value}&between_date=${between_date.value}&start_date_week=${start_date_week.value}&end_date_week=${end_date_week.value}`,
})
// TODO: 需要查询个人信息是否留了手机号码
let tel = '';
if (tel) {
Taro.navigateTo({
url: `/pages/confirm/index?id=123&start_date=${start_date.value}&end_date=${end_date.value}&between_date=${between_date.value}&start_date_week=${start_date_week.value}&end_date_week=${end_date_week.value}`,
});
} else {
Taro.navigateTo({
url: `/pages/login/index`,
});
}
}
const state = reactive({
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-21 15:04:09
* @LastEditTime: 2023-12-21 16:03:09
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 我的页面
-->
......@@ -10,9 +10,9 @@
<view id="avator" class="user-wrapper">
<view class="user-info">
<nut-avatar size="60" style="border: 1px solid #fff;">
<img style="border-radius: 50%;" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<img style="border-radius: 50%;" :src="avator" />
</nut-avatar>
<text style="margin-left: 30rpx;">阿忆妞妞</text>
<text style="margin-left: 30rpx;">默认用户</text>
</view>
<view class="edit">
<IconFont name="edit" @tap="goToEdit"></IconFont>
......@@ -45,6 +45,7 @@ import { IconFont } from '@nutui/icons-vue-taro';
import navBar from '@/components/navBar.vue'
import orderCard from '@/components/orderCard.vue'
import payCard from '@/components/payCard.vue'
import avator from '@/assets/images/avator.png'
const refScrollView = ref(null);
......@@ -118,9 +119,17 @@ const onPayClose = () => {
}
const goToEdit = () => {
Taro.navigateTo({
url: '/pages/myInfo/index',
});
// TODO: 检查手机号是否存在
let tel = '';
if (tel) {
Taro.navigateTo({
url: '/pages/myInfo/index',
});
} else {
Taro.navigateTo({
url: '/pages/login/index',
});
}
}
const onTabClick = ({ title, paneKey, disabled }) => {
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-20 18:20:37
* @LastEditTime: 2023-12-21 15:56:04
* @FilePath: /meihuaApp/src/pages/myInfo/index.vue
* @Description: 我的信息页面
-->
......@@ -16,21 +16,26 @@
<view class="info-name">
<nut-row type="flex" justify="center" align="center">
<nut-col span="4">姓名</nut-col>
<nut-col span="20">
<nut-col span="18">
<view class="wrapper">
<nut-input v-model="username" placeholder="请输入姓名" :border="false" />
</view>
</nut-col>
<nut-col span="2">
</nut-col>
</nut-row>
</view>
<view class="info-tel">
<nut-row type="flex" justify="center" align="center">
<nut-col span="4">电话</nut-col>
<nut-col span="20">
<nut-col span="18">
<view class="wrapper">
<nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" max-length="11" />
<nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" max-length="11" disabled />
</view>
</nut-col>
<nut-col span="2">
<IconFont name="edit" @tap="goToEdit"></IconFont>
</nut-col>
</nut-row>
</view>
<view class="save-btn">
......@@ -43,10 +48,17 @@
<script setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
import { ref } from "vue";
const username = ref('');
const tel = ref('');
const tel = ref('123');
const goToEdit = () => {
Taro.navigateTo({
url: '/pages/bind/index'
})
};
const imageUrl = ref(
'https://img.yzcdn.cn/vant/cat.jpeg'
......