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
1 /* 1 /*
2 * @Date: 2023-12-14 17:45:15 2 * @Date: 2023-12-14 17:45:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-19 17:21:45 4 + * @LastEditTime: 2023-12-21 15:52:17
5 * @FilePath: /meihuaApp/src/app.config.js 5 * @FilePath: /meihuaApp/src/app.config.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -14,6 +14,7 @@ export default defineAppConfig({ ...@@ -14,6 +14,7 @@ export default defineAppConfig({
14 'pages/confirm/index', 14 'pages/confirm/index',
15 'pages/payInfo/index', 15 'pages/payInfo/index',
16 'pages/login/index', 16 'pages/login/index',
17 + 'pages/bind/index',
17 'pages/myInfo/index', 18 'pages/myInfo/index',
18 'pages/auth/index', 19 'pages/auth/index',
19 ], 20 ],
......
1 /* 1 /*
2 * @Date: 2023-12-14 17:45:15 2 * @Date: 2023-12-14 17:45:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-19 17:12:45 4 + * @LastEditTime: 2023-12-21 16:09:14
5 * @FilePath: /meihuaApp/src/app.js 5 * @FilePath: /meihuaApp/src/app.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -19,7 +19,8 @@ const App = createApp({ ...@@ -19,7 +19,8 @@ const App = createApp({
19 // 缓存没有权限的地址 19 // 缓存没有权限的地址
20 const router = routerStore(); 20 const router = routerStore();
21 router.add(path); 21 router.add(path);
22 - if (path !== 'pages/index/index' && !wx.getStorageSync("sessionid")) { 22 + // if (path !== 'pages/index/index' && !wx.getStorageSync("sessionid")) {
23 + if (!wx.getStorageSync("sessionid")) {
23 console.warn("没有权限"); 24 console.warn("没有权限");
24 // Taro.navigateTo({ 25 // Taro.navigateTo({
25 // url: './pages/auth/index', 26 // url: './pages/auth/index',
......
1 +/*
2 + * @Date: 2023-12-15 14:04:28
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-12-15 14:04:44
5 + * @FilePath: /meihuaApp/src/pages/login/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: '',
10 + usingComponents: {
11 + },
12 +}
1 +.nut-input {
2 + border-radius: 50rpx;
3 + padding-top: 25rpx;
4 +}
1 +<!--
2 + * @Date: 2022-09-19 14:11:06
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-12-21 15:56:40
5 + * @FilePath: /meihuaApp/src/pages/bind/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <view>
10 + <view style="color: #6A4925; font-size: 56rpx; text-align: center;">绑&nbsp;定</view>
11 + <view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 50rpx; border-radius: 50rpx; padding: 5rpx 0;">
12 + <nut-input v-model="tel" placeholder="请输入手机号" :border="false" type="number" max-length="11" />
13 + </view>
14 + <view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 20rpx; border-radius: 50rpx;">
15 + <!-- <nut-input v-model="code" placeholder="请输入验证码" :border="false" type="number" >
16 + <template #right> <nut-button size="small" color="#6A4925">获取验证码</nut-button> </template>
17 + </nut-input> -->
18 + <nut-row>
19 + <nut-col span="14">
20 + <nut-input v-model="code" placeholder="请输入验证码" :border="false" type="number" :formatter="codeFormatter" max-length="4"></nut-input>
21 + </nut-col>
22 + <nut-col span="10">
23 + <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;">
24 + <view @tap="getCode" v-if="!time_remaining">获取验证码</view>
25 + <text v-else>{{ time_remaining }}秒后重新发送</text>
26 + </view>
27 + </nut-col>
28 + </nut-row>
29 + </view>
30 + <view style="margin: 50rpx; margin-bottom: 10rpx;">
31 + <nut-button block color="#6A4925" size="large" @tap="login"><text style="font-size: 38rpx;">确&nbsp;认</text></nut-button>
32 + </view>
33 + </view>
34 +</template>
35 +
36 +<script setup>
37 +import Taro from '@tarojs/taro'
38 +import { IconFont } from '@nutui/icons-vue-taro';
39 +import { ref, nextTick } from "vue";
40 +
41 +let countdownIntervalId; // 用于存储倒计时的计时器 ID
42 +
43 +const startCountdown = (timeInSeconds, updateCallback, resetCallback) => {
44 + if (countdownIntervalId) {
45 + // 如果已经有倒计时在进行中，则先清除之前的计时器
46 + clearInterval(countdownIntervalId);
47 + }
48 +
49 + let timeLeft = timeInSeconds;
50 +
51 + // 更新倒计时显示的函数
52 + const updateCountdown = () => {
53 + if (timeLeft <= 0) {
54 + // 倒计时结束
55 + clearInterval(countdownIntervalId);
56 + resetCallback(); // 调用重置函数
57 + } else {
58 + // 更新倒计时显示
59 + updateCallback(timeLeft);
60 + timeLeft--;
61 + }
62 + }
63 +
64 + // 立即执行一次更新倒计时显示函数
65 + updateCountdown();
66 +
67 + // 每秒调用一次更新倒计时显示函数
68 + countdownIntervalId = setInterval(updateCountdown, 1000);
69 +}
70 +
71 +const resetCountdown = () => {
72 + if (countdownIntervalId) {
73 + // 清除倒计时计时器
74 + clearInterval(countdownIntervalId);
75 + countdownIntervalId = undefined;
76 + console.log("倒计时已重置");
77 + time_remaining.value = 0;
78 + }
79 +}
80 +
81 +const time_remaining = ref(0);
82 +const tel = ref('');
83 +const code = ref('');
84 +
85 +const showRight = ref(false);
86 +
87 +const tapRight = () => {
88 + showRight.value = true;
89 +}
90 +
91 +const codeFormatter = (value) => {
92 + return value.replace(/\D/g, '').substring(0, 4);
93 +}
94 +
95 +const isValidTel = (tel) => {
96 + return /^1\d{10}$/.test(tel);
97 +}
98 +
99 +const login = () => {
100 + console.warn(tel.value);
101 + console.warn(code.value);
102 + if (!isValidTel(tel.value) ||!code.value) {
103 + Taro.showToast({
104 + title: '请检查输入项',
105 + icon: 'error',
106 + duration: 2000
107 + });
108 + return;
109 + } else {
110 + Taro.showToast({
111 + title: '登录成功',
112 + icon: 'success',
113 + duration: 2000,
114 + success: () => {
115 + setTimeout(() => {
116 + Taro.reLaunch({
117 + url: '/pages/index/index'
118 + })
119 + }, 1000);
120 + }
121 + });
122 + }
123 +}
124 +
125 +const updateDisplay = (timeLeft) => {
126 + // 倒计时剩余时间
127 + time_remaining.value = timeLeft;
128 +}
129 +
130 +const resetDisplay = () => {
131 + // 在此处进行重置后的展示操作
132 + resetCountdown();
133 +}
134 +
135 +const getCode = () => {
136 + if (isValidTel(tel.value)) {
137 + Taro.showToast({
138 + title: '验证码已发送',
139 + icon:'success',
140 + duration: 2000
141 + });
142 + startCountdown(10, updateDisplay, resetDisplay);
143 + } else {
144 + Taro.showToast({
145 + title: '请检查手机号',
146 + icon: 'error',
147 + duration: 2000
148 + });
149 + }
150 +}
151 +</script>
152 +
153 +<script>
154 +import "./index.less";
155 +export default {
156 + name: "loginPage",
157 +};
158 +</script>
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-21 13:44:02 4 + * @LastEditTime: 2023-12-21 16:05:43
5 * @FilePath: /meihuaApp/src/pages/detail/index.vue 5 * @FilePath: /meihuaApp/src/pages/detail/index.vue
6 * @Description: 房间详情页面 6 * @Description: 房间详情页面
7 --> 7 -->
...@@ -145,9 +145,17 @@ onMounted(() => { ...@@ -145,9 +145,17 @@ onMounted(() => {
145 const page = ref(1); 145 const page = ref(1);
146 146
147 const goToConfirm = () => { 147 const goToConfirm = () => {
148 - Taro.navigateTo({ 148 + // TODO: 需要查询个人信息是否留了手机号码
149 - 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}`, 149 + let tel = '';
150 - }) 150 + if (tel) {
151 + Taro.navigateTo({
152 + 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}`,
153 + });
154 + } else {
155 + Taro.navigateTo({
156 + url: `/pages/login/index`,
157 + });
158 + }
151 } 159 }
152 160
153 const state = reactive({ 161 const state = reactive({
......
1 <!-- 1 <!--
2 * @Date: 2023-12-13 11:13:13 2 * @Date: 2023-12-13 11:13:13
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-21 15:04:09 4 + * @LastEditTime: 2023-12-21 16:03:09
5 * @FilePath: /meihuaApp/src/pages/my/index.vue 5 * @FilePath: /meihuaApp/src/pages/my/index.vue
6 * @Description: 我的页面 6 * @Description: 我的页面
7 --> 7 -->
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
10 <view id="avator" class="user-wrapper"> 10 <view id="avator" class="user-wrapper">
11 <view class="user-info"> 11 <view class="user-info">
12 <nut-avatar size="60" style="border: 1px solid #fff;"> 12 <nut-avatar size="60" style="border: 1px solid #fff;">
13 - <img style="border-radius: 50%;" src="https://img.yzcdn.cn/vant/cat.jpeg" /> 13 + <img style="border-radius: 50%;" :src="avator" />
14 </nut-avatar> 14 </nut-avatar>
15 - <text style="margin-left: 30rpx;">阿忆妞妞</text> 15 + <text style="margin-left: 30rpx;">默认用户</text>
16 </view> 16 </view>
17 <view class="edit"> 17 <view class="edit">
18 <IconFont name="edit" @tap="goToEdit"></IconFont> 18 <IconFont name="edit" @tap="goToEdit"></IconFont>
...@@ -45,6 +45,7 @@ import { IconFont } from '@nutui/icons-vue-taro'; ...@@ -45,6 +45,7 @@ import { IconFont } from '@nutui/icons-vue-taro';
45 import navBar from '@/components/navBar.vue' 45 import navBar from '@/components/navBar.vue'
46 import orderCard from '@/components/orderCard.vue' 46 import orderCard from '@/components/orderCard.vue'
47 import payCard from '@/components/payCard.vue' 47 import payCard from '@/components/payCard.vue'
48 +import avator from '@/assets/images/avator.png'
48 49
49 const refScrollView = ref(null); 50 const refScrollView = ref(null);
50 51
...@@ -118,9 +119,17 @@ const onPayClose = () => { ...@@ -118,9 +119,17 @@ const onPayClose = () => {
118 } 119 }
119 120
120 const goToEdit = () => { 121 const goToEdit = () => {
121 - Taro.navigateTo({ 122 + // TODO: 检查手机号是否存在
122 - url: '/pages/myInfo/index', 123 + let tel = '';
123 - }); 124 + if (tel) {
125 + Taro.navigateTo({
126 + url: '/pages/myInfo/index',
127 + });
128 + } else {
129 + Taro.navigateTo({
130 + url: '/pages/login/index',
131 + });
132 + }
124 } 133 }
125 134
126 const onTabClick = ({ title, paneKey, disabled }) => { 135 const onTabClick = ({ title, paneKey, disabled }) => {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-20 18:20:37 4 + * @LastEditTime: 2023-12-21 15:56:04
5 * @FilePath: /meihuaApp/src/pages/myInfo/index.vue 5 * @FilePath: /meihuaApp/src/pages/myInfo/index.vue
6 * @Description: 我的信息页面 6 * @Description: 我的信息页面
7 --> 7 -->
...@@ -16,21 +16,26 @@ ...@@ -16,21 +16,26 @@
16 <view class="info-name"> 16 <view class="info-name">
17 <nut-row type="flex" justify="center" align="center"> 17 <nut-row type="flex" justify="center" align="center">
18 <nut-col span="4">姓名</nut-col> 18 <nut-col span="4">姓名</nut-col>
19 - <nut-col span="20"> 19 + <nut-col span="18">
20 <view class="wrapper"> 20 <view class="wrapper">
21 <nut-input v-model="username" placeholder="请输入姓名" :border="false" /> 21 <nut-input v-model="username" placeholder="请输入姓名" :border="false" />
22 </view> 22 </view>
23 </nut-col> 23 </nut-col>
24 + <nut-col span="2">
25 + </nut-col>
24 </nut-row> 26 </nut-row>
25 </view> 27 </view>
26 <view class="info-tel"> 28 <view class="info-tel">
27 <nut-row type="flex" justify="center" align="center"> 29 <nut-row type="flex" justify="center" align="center">
28 <nut-col span="4">电话</nut-col> 30 <nut-col span="4">电话</nut-col>
29 - <nut-col span="20"> 31 + <nut-col span="18">
30 <view class="wrapper"> 32 <view class="wrapper">
31 - <nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" max-length="11" /> 33 + <nut-input v-model="tel" placeholder="请输入电话" :border="false" type="number" max-length="11" disabled />
32 </view> 34 </view>
33 </nut-col> 35 </nut-col>
36 + <nut-col span="2">
37 + <IconFont name="edit" @tap="goToEdit"></IconFont>
38 + </nut-col>
34 </nut-row> 39 </nut-row>
35 </view> 40 </view>
36 <view class="save-btn"> 41 <view class="save-btn">
...@@ -43,10 +48,17 @@ ...@@ -43,10 +48,17 @@
43 48
44 <script setup> 49 <script setup>
45 import Taro from '@tarojs/taro' 50 import Taro from '@tarojs/taro'
51 +import { IconFont } from '@nutui/icons-vue-taro';
46 import { ref } from "vue"; 52 import { ref } from "vue";
47 53
48 const username = ref(''); 54 const username = ref('');
49 -const tel = ref(''); 55 +const tel = ref('123');
56 +
57 +const goToEdit = () => {
58 + Taro.navigateTo({
59 + url: '/pages/bind/index'
60 + })
61 +};
50 62
51 const imageUrl = ref( 63 const imageUrl = ref(
52 'https://img.yzcdn.cn/vant/cat.jpeg' 64 'https://img.yzcdn.cn/vant/cat.jpeg'
......