Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
75c5fa7e 1 parent b7e160b6

处理优化用户保存流程

Inline Side-by-side
Showing 10 changed files with 127 additions and 49 deletions
1 /* 1 /*
2 * @Date: 2023-12-22 10:29:37 2 * @Date: 2023-12-22 10:29:37
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-22 10:43:06 4 + * @LastEditTime: 2023-12-22 11:28:17
5 * @FilePath: /meihuaApp/src/api/index.js 5 * @FilePath: /meihuaApp/src/api/index.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -10,6 +10,8 @@ import { fn, fetch } from './fn'; ...@@ -10,6 +10,8 @@ import { fn, fetch } from './fn';
10 const Api = { 10 const Api = {
11 BIND_PHONE: '/srv/?a=room_order&t=bind_phone', 11 BIND_PHONE: '/srv/?a=room_order&t=bind_phone',
12 SEND_SMS_CODE: '/srv/?a=room_order&t=send_sms_code', 12 SEND_SMS_CODE: '/srv/?a=room_order&t=send_sms_code',
13 + SHOW_SESSION: '/srv/?a=room_order&t=show_session',
14 + SAVE_CUSTOMER_INFO: '/srv/?a=room_order&t=save_customer_info',
13 } 15 }
14 16
15 /** 17 /**
...@@ -22,14 +24,20 @@ export const bindPhoneAPI = (params) => fn(fetch.post(Api.BIND_PHONE, params)); ...@@ -22,14 +24,20 @@ export const bindPhoneAPI = (params) => fn(fetch.post(Api.BIND_PHONE, params));
22 24
23 /** 25 /**
24 * @description: 发送验证码 26 * @description: 发送验证码
25 -
26 * @param phone 手机号 27 * @param phone 手机号
27 * @returns 28 * @returns
28 */ 29 */
29 export const sendSmsCodeAPI = (params) => fn(fetch.post(Api.SEND_SMS_CODE, params)); 30 export const sendSmsCodeAPI = (params) => fn(fetch.post(Api.SEND_SMS_CODE, params));
30 31
31 /** 32 /**
32 - * @description: 修改我的信息 33 + * @description: 获取我的信息
34 + * @returns
35 + */
36 +export const showMyInfoAPI = (params) => fn(fetch.get(Api.SHOW_SESSION, params));
37 +
38 +/**
39 + * @description: 保存我的信息
40 + * @param params
33 * @returns 41 * @returns
34 */ 42 */
35 -// export const editUserAPI = (params) => fn(fetch.post(Api.USER_EDIT, params)); 43 +export const saveCustomerInfoAPI = (params) => fn(fetch.post(Api.SAVE_CUSTOMER_INFO, params));
......
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 15:56:40 4 + * @LastEditTime: 2023-12-22 11:18:47
5 * @FilePath: /meihuaApp/src/pages/bind/index.vue 5 * @FilePath: /meihuaApp/src/pages/bind/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
37 import Taro from '@tarojs/taro' 37 import Taro from '@tarojs/taro'
38 import { IconFont } from '@nutui/icons-vue-taro'; 38 import { IconFont } from '@nutui/icons-vue-taro';
39 import { ref, nextTick } from "vue"; 39 import { ref, nextTick } from "vue";
40 +import { bindPhoneAPI, sendSmsCodeAPI } from '@/api/index'
40 41
41 let countdownIntervalId; // 用于存储倒计时的计时器 ID 42 let countdownIntervalId; // 用于存储倒计时的计时器 ID
42 43
...@@ -82,12 +83,6 @@ const time_remaining = ref(0); ...@@ -82,12 +83,6 @@ const time_remaining = ref(0);
82 const tel = ref(''); 83 const tel = ref('');
83 const code = ref(''); 84 const code = ref('');
84 85
85 -const showRight = ref(false);
86 -
87 -const tapRight = () => {
88 - showRight.value = true;
89 -}
90 -
91 const codeFormatter = (value) => { 86 const codeFormatter = (value) => {
92 return value.replace(/\D/g, '').substring(0, 4); 87 return value.replace(/\D/g, '').substring(0, 4);
93 } 88 }
...@@ -96,9 +91,7 @@ const isValidTel = (tel) => { ...@@ -96,9 +91,7 @@ const isValidTel = (tel) => {
96 return /^1\d{10}$/.test(tel); 91 return /^1\d{10}$/.test(tel);
97 } 92 }
98 93
99 -const login = () => { 94 +const login = async () => {
100 - console.warn(tel.value);
101 - console.warn(code.value);
102 if (!isValidTel(tel.value) ||!code.value) { 95 if (!isValidTel(tel.value) ||!code.value) {
103 Taro.showToast({ 96 Taro.showToast({
104 title: '请检查输入项', 97 title: '请检查输入项',
...@@ -107,19 +100,24 @@ const login = () => { ...@@ -107,19 +100,24 @@ const login = () => {
107 }); 100 });
108 return; 101 return;
109 } else { 102 } else {
103 + // TODO: 等待正式接口环境调整
104 + // const { code, data } = await bindPhoneAPI({ phone: tel.value, sms_code: code.value });
105 + const { code } = await bindPhoneAPI({ phone: tel.value, sms_code: 'debug_sms_code_1805' });
106 + if (code) {
110 Taro.showToast({ 107 Taro.showToast({
111 - title: '登录成功', 108 + title: '绑定成功',
112 icon: 'success', 109 icon: 'success',
113 duration: 2000, 110 duration: 2000,
114 success: () => { 111 success: () => {
115 setTimeout(() => { 112 setTimeout(() => {
116 Taro.reLaunch({ 113 Taro.reLaunch({
117 - url: '/pages/index/index' 114 + url: '/pages/my/index'
118 }) 115 })
119 }, 1000); 116 }, 1000);
120 } 117 }
121 }); 118 });
122 } 119 }
120 + }
123 } 121 }
124 122
125 const updateDisplay = (timeLeft) => { 123 const updateDisplay = (timeLeft) => {
...@@ -132,14 +130,17 @@ const resetDisplay = () => { ...@@ -132,14 +130,17 @@ const resetDisplay = () => {
132 resetCountdown(); 130 resetCountdown();
133 } 131 }
134 132
135 -const getCode = () => { 133 +const getCode = async () => {
136 if (isValidTel(tel.value)) { 134 if (isValidTel(tel.value)) {
135 + const { code } = await sendSmsCodeAPI({ phone: tel.value });
136 + if (code) {
137 Taro.showToast({ 137 Taro.showToast({
138 title: '验证码已发送', 138 title: '验证码已发送',
139 icon:'success', 139 icon:'success',
140 duration: 2000 140 duration: 2000
141 }); 141 });
142 startCountdown(10, updateDisplay, resetDisplay); 142 startCountdown(10, updateDisplay, resetDisplay);
143 + }
143 } else { 144 } else {
144 Taro.showToast({ 145 Taro.showToast({
145 title: '请检查手机号', 146 title: '请检查手机号',
...@@ -152,7 +153,10 @@ const getCode = () => { ...@@ -152,7 +153,10 @@ const getCode = () => {
152 153
153 <script> 154 <script>
154 import "./index.less"; 155 import "./index.less";
156 +import mixin from '@/utils/mixin';
157 +
155 export default { 158 export default {
156 name: "loginPage", 159 name: "loginPage",
160 + mixins: [mixin.init],
157 }; 161 };
158 </script> 162 </script>
......
...@@ -92,9 +92,11 @@ const onTabClick = ({ title, paneKey, disabled }) => { ...@@ -92,9 +92,11 @@ const onTabClick = ({ title, paneKey, disabled }) => {
92 <script> 92 <script>
93 import "./index.less"; 93 import "./index.less";
94 import { $ } from '@tarojs/extend' 94 import { $ } from '@tarojs/extend'
95 +import mixin from '@/utils/mixin';
95 96
96 export default { 97 export default {
97 name: "bookPage", 98 name: "bookPage",
99 + mixins: [mixin.init],
98 computed: { 100 computed: {
99 scrollStyle() { 101 scrollStyle() {
100 return { 102 return {
......
...@@ -251,7 +251,10 @@ const onPayClose = () => { ...@@ -251,7 +251,10 @@ const onPayClose = () => {
251 251
252 <script> 252 <script>
253 import "./index.less"; 253 import "./index.less";
254 +import mixin from '@/utils/mixin';
255 +
254 export default { 256 export default {
255 name: "confirmPage", 257 name: "confirmPage",
258 + mixins: [mixin.init],
256 }; 259 };
257 </script> 260 </script>
......
...@@ -187,8 +187,10 @@ const hideFn = () => { ...@@ -187,8 +187,10 @@ const hideFn = () => {
187 187
188 <script> 188 <script>
189 import "./index.less"; 189 import "./index.less";
190 +import mixin from '@/utils/mixin';
190 191
191 export default { 192 export default {
192 name: "detailPage", 193 name: "detailPage",
194 + mixins: [mixin.init],
193 }; 195 };
194 </script> 196 </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-22 10:52:36 4 + * @LastEditTime: 2023-12-22 11:16:07
5 * @FilePath: /meihuaApp/src/pages/login/index.vue 5 * @FilePath: /meihuaApp/src/pages/login/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -113,6 +113,7 @@ const login = async () => { ...@@ -113,6 +113,7 @@ const login = async () => {
113 }); 113 });
114 return; 114 return;
115 } else { 115 } else {
116 + // TODO: 等待正式接口环境调整
116 // const { code, data } = await bindPhoneAPI({ phone: tel.value, sms_code: code.value }); 117 // const { code, data } = await bindPhoneAPI({ phone: tel.value, sms_code: code.value });
117 const { code } = await bindPhoneAPI({ phone: tel.value, sms_code: 'debug_sms_code_1805' }); 118 const { code } = await bindPhoneAPI({ phone: tel.value, sms_code: 'debug_sms_code_1805' });
118 if (code) { 119 if (code) {
......
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 16:34:26 4 + * @LastEditTime: 2023-12-22 12:17:30
5 * @FilePath: /meihuaApp/src/pages/my/index.vue 5 * @FilePath: /meihuaApp/src/pages/my/index.vue
6 * @Description: 我的页面 6 * @Description: 我的页面
7 --> 7 -->
8 <template> 8 <template>
9 <view class="my-page"> 9 <view class="my-page">
10 - <view id="avator" class="user-wrapper"> 10 + <view id="avatar" 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="avator" /> 13 + <img style="border-radius: 50%;" :src="userInfo.avatar ? userInfo.avatar : avatar" />
14 </nut-avatar> 14 </nut-avatar>
15 - <text style="margin-left: 30rpx;">默认用户</text> 15 + <text style="margin-left: 30rpx;">{{ userInfo.name }}</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>
...@@ -40,12 +40,13 @@ ...@@ -40,12 +40,13 @@
40 40
41 <script setup> 41 <script setup>
42 import Taro from '@tarojs/taro' 42 import Taro from '@tarojs/taro'
43 -import { ref } from "vue"; 43 +import { ref, onMounted } from "vue";
44 import { IconFont } from '@nutui/icons-vue-taro'; 44 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 +import avatar from '@/assets/images/avatar.png'
49 +import { showMyInfoAPI } from '@/api/index'
49 50
50 const refScrollView = ref(null); 51 const refScrollView = ref(null);
51 52
...@@ -101,6 +102,24 @@ const orderList = ref([ ...@@ -101,6 +102,24 @@ const orderList = ref([
101 102
102 const show_pay = ref(false); 103 const show_pay = ref(false);
103 const payData = ref({}); 104 const payData = ref({});
105 +const userInfo = ref({
106 + name: '',
107 + avatar: '',
108 + phone: ''
109 +});
110 +
111 +onMounted(async () => {
112 + // 获取用户信息
113 + const { code, data } = await showMyInfoAPI();
114 + if (code) {
115 + userInfo.value = {
116 + name: data.wxapp_user_name ? data.wxapp_user_name : '默认用户',
117 + avatar: data.wxapp_user_avatar,
118 + phone: data.wxapp_user_phone
119 + }
120 + }
121 +});
122 +
104 const onPay = ({ id, remain_time }) => { 123 const onPay = ({ id, remain_time }) => {
105 console.warn(id); 124 console.warn(id);
106 // Taro.showToast({ 125 // Taro.showToast({
...@@ -118,10 +137,8 @@ const onPayClose = () => { ...@@ -118,10 +137,8 @@ const onPayClose = () => {
118 show_pay.value = false; 137 show_pay.value = false;
119 } 138 }
120 139
121 -const goToEdit = () => { 140 +const goToEdit = async () => {
122 - // TODO: 检查手机号是否存在 141 + if (userInfo.value.phone) {
123 - let tel = '';
124 - if (tel) {
125 Taro.navigateTo({ 142 Taro.navigateTo({
126 url: '/pages/myInfo/index', 143 url: '/pages/myInfo/index',
127 }); 144 });
...@@ -140,9 +157,11 @@ const onTabClick = ({ title, paneKey, disabled }) => { ...@@ -140,9 +157,11 @@ const onTabClick = ({ title, paneKey, disabled }) => {
140 <script> 157 <script>
141 import "./index.less"; 158 import "./index.less";
142 import { $ } from '@tarojs/extend' 159 import { $ } from '@tarojs/extend'
160 +import mixin from '@/utils/mixin';
143 161
144 export default { 162 export default {
145 name: "myPage", 163 name: "myPage",
164 + mixins: [mixin.init],
146 computed: { 165 computed: {
147 scrollStyle() { 166 scrollStyle() {
148 return { 167 return {
...@@ -167,15 +186,15 @@ export default { ...@@ -167,15 +186,15 @@ export default {
167 }, 100); 186 }, 100);
168 // setTimeout(async () => { 187 // setTimeout(async () => {
169 // const navHeight = await $('#navbar-page').height(); 188 // const navHeight = await $('#navbar-page').height();
170 - // const avatorHeight = await $('#avator').height(); 189 + // const avatarHeight = await $('#avatar').height();
171 // const titleHeight = await $('#title').height(); 190 // const titleHeight = await $('#title').height();
172 - // this.indexCoverHeight = windowHeight - navHeight - avatorHeight - titleHeight - 50; 191 + // this.indexCoverHeight = windowHeight - navHeight - avatarHeight - titleHeight - 50;
173 // }, 500); 192 // }, 500);
174 this.$nextTick(async () => { 193 this.$nextTick(async () => {
175 const navHeight = await $('#navbar-page').height(); 194 const navHeight = await $('#navbar-page').height();
176 - const avatorHeight = await $('#avator').height(); 195 + const avatarHeight = await $('#avatar').height();
177 const titleHeight = await $('#title').height(); 196 const titleHeight = await $('#title').height();
178 - this.indexCoverHeight = windowHeight - navHeight - avatorHeight - titleHeight - 50; 197 + this.indexCoverHeight = windowHeight - navHeight - avatarHeight - titleHeight - 50;
179 if (this.$refs.refScrollView) { 198 if (this.$refs.refScrollView) {
180 Taro.hideLoading(); 199 Taro.hideLoading();
181 console.warn('加载完成'); 200 console.warn('加载完成');
......
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 15:56:04 4 + * @LastEditTime: 2023-12-22 12:19:33
5 * @FilePath: /meihuaApp/src/pages/myInfo/index.vue 5 * @FilePath: /meihuaApp/src/pages/myInfo/index.vue
6 * @Description: 我的信息页面 6 * @Description: 我的信息页面
7 --> 7 -->
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 <view class="my-info-page"> 9 <view class="my-info-page">
10 <view class="avatar" @tap="uploadImg"> 10 <view class="avatar" @tap="uploadImg">
11 <nut-avatar size="100"> 11 <nut-avatar size="100">
12 - <img :src="imageUrl" style="border-radius: 50%;"/> 12 + <img :src="avatarUrl ? avatarUrl : avatar" style="border-radius: 50%;"/>
13 </nut-avatar> 13 </nut-avatar>
14 <view class="edit">编辑</view> 14 <view class="edit">编辑</view>
15 </view> 15 </view>
...@@ -49,10 +49,23 @@ ...@@ -49,10 +49,23 @@
49 <script setup> 49 <script setup>
50 import Taro from '@tarojs/taro' 50 import Taro from '@tarojs/taro'
51 import { IconFont } from '@nutui/icons-vue-taro'; 51 import { IconFont } from '@nutui/icons-vue-taro';
52 -import { ref } from "vue"; 52 +import { ref, onMounted } from "vue";
53 +import avatar from '@/assets/images/avatar.png'
54 +import { showMyInfoAPI, saveCustomerInfoAPI } from '@/api/index'
55 +import BASE_URL from '@/utils/config';
53 56
54 const username = ref(''); 57 const username = ref('');
55 -const tel = ref('123'); 58 +const tel = ref('');
59 +const avatarUrl = ref('');
60 +
61 +onMounted(async () => {
62 + const { code, data } = await showMyInfoAPI();
63 + if (code) {
64 + username.value = data.wxapp_user_name ? data.wxapp_user_name : '默认用户';
65 + tel.value = data.wxapp_user_phone;
66 + avatarUrl.value = data.wxapp_user_avatar;
67 + }
68 +})
56 69
57 const goToEdit = () => { 70 const goToEdit = () => {
58 Taro.navigateTo({ 71 Taro.navigateTo({
...@@ -60,36 +73,55 @@ const goToEdit = () => { ...@@ -60,36 +73,55 @@ const goToEdit = () => {
60 }) 73 })
61 }; 74 };
62 75
63 -const imageUrl = ref(
64 - 'https://img.yzcdn.cn/vant/cat.jpeg'
65 -);
66 76
67 const uploadImg = () => { 77 const uploadImg = () => {
68 Taro.chooseImage({ 78 Taro.chooseImage({
69 count: 1, 79 count: 1,
70 success: (res) => { 80 success: (res) => {
71 - console.warn(res);
72 const tempFilePaths = res.tempFilePaths[0]; 81 const tempFilePaths = res.tempFilePaths[0];
73 - console.warn(tempFilePaths); 82 + Taro.uploadFile({
74 - imageUrl.value = tempFilePaths; 83 + url: BASE_URL + '/admin/?m=srv&a=upload',
84 + filePath: tempFilePaths,
85 + name: 'file',
86 + header: {
87 + 'content-type': 'multipart/form-data',
88 + },
89 + success: function (res) {
90 + let upload_data = JSON.parse(res.data);
91 + Taro.hideLoading({
92 + success: () => {
93 + if (res.statusCode === 200) {
94 + avatarUrl.value = upload_data.data.src;
95 + } else {
96 + Taro.showToast({
97 + icon: 'error',
98 + title: '服务器错误,稍后重试！',
99 + mask: true
100 + })
101 + }
102 + },
103 + });
104 + }
105 + });
75 } 106 }
76 }) 107 })
77 } 108 }
78 109
79 -const isValidTel = (tel) => { 110 +// const isValidTel = (tel) => {
80 - return /^1\d{10}$/.test(tel); 111 +// return /^1\d{10}$/.test(tel);
81 -} 112 +// }
82 113
83 -const save = () => { 114 +const save = async () => {
84 - console.warn(username.value, tel.value); 115 + if (!username.value) {
85 - if (!isValidTel(tel.value) ||!username.value) {
86 Taro.showToast({ 116 Taro.showToast({
87 - title: '请检查输入项', 117 + title: '请检查用户名输入',
88 icon: 'error', 118 icon: 'error',
89 duration: 2000 119 duration: 2000
90 }); 120 });
91 return; 121 return;
92 } else { 122 } else {
123 + const { code, data } = await saveCustomerInfoAPI({ name: username.value, avatar: avatarUrl.value });
124 + if (code) {
93 Taro.showToast({ 125 Taro.showToast({
94 title: '保存成功', 126 title: '保存成功',
95 icon: 'success', 127 icon: 'success',
...@@ -103,12 +135,16 @@ const save = () => { ...@@ -103,12 +135,16 @@ const save = () => {
103 } 135 }
104 }); 136 });
105 } 137 }
138 + }
106 } 139 }
107 </script> 140 </script>
108 141
109 <script> 142 <script>
110 import "./index.less"; 143 import "./index.less";
144 +import mixin from '@/utils/mixin';
145 +
111 export default { 146 export default {
112 name: "myInfoPage", 147 name: "myInfoPage",
148 + mixins: [mixin.init],
113 }; 149 };
114 </script> 150 </script>
......
...@@ -32,7 +32,10 @@ onMounted(() => { ...@@ -32,7 +32,10 @@ onMounted(() => {
32 32
33 <script> 33 <script>
34 import "./index.less"; 34 import "./index.less";
35 +import mixin from '@/utils/mixin';
36 +
35 export default { 37 export default {
36 name: "payInfoPage", 38 name: "payInfoPage",
39 + mixins: [mixin.init],
37 }; 40 };
38 </script> 41 </script>
......