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 155 additions and 77 deletions
/*
* @Date: 2023-12-22 10:29:37
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-22 10:43:06
* @LastEditTime: 2023-12-22 11:28:17
* @FilePath: /meihuaApp/src/api/index.js
* @Description: 文件描述
*/
......@@ -10,6 +10,8 @@ import { fn, fetch } from './fn';
const Api = {
BIND_PHONE: '/srv/?a=room_order&t=bind_phone',
SEND_SMS_CODE: '/srv/?a=room_order&t=send_sms_code',
SHOW_SESSION: '/srv/?a=room_order&t=show_session',
SAVE_CUSTOMER_INFO: '/srv/?a=room_order&t=save_customer_info',
}
/**
......@@ -22,14 +24,20 @@ export const bindPhoneAPI = (params) => fn(fetch.post(Api.BIND_PHONE, params));
/**
* @description: 发送验证码
* @param phone 手机号
* @returns
*/
export const sendSmsCodeAPI = (params) => fn(fetch.post(Api.SEND_SMS_CODE, params));
/**
* @description: 修改我的信息
* @description: 获取我的信息
* @returns
*/
export const showMyInfoAPI = (params) => fn(fetch.get(Api.SHOW_SESSION, params));
/**
* @description: 保存我的信息
* @param params
* @returns
*/
// export const editUserAPI = (params) => fn(fetch.post(Api.USER_EDIT, params));
export const saveCustomerInfoAPI = (params) => fn(fetch.post(Api.SAVE_CUSTOMER_INFO, params));
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-21 15:56:40
* @LastEditTime: 2023-12-22 11:18:47
* @FilePath: /meihuaApp/src/pages/bind/index.vue
* @Description: 文件描述
-->
......@@ -37,6 +37,7 @@
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
import { ref, nextTick } from "vue";
import { bindPhoneAPI, sendSmsCodeAPI } from '@/api/index'
let countdownIntervalId; // 用于存储倒计时的计时器 ID
......@@ -82,12 +83,6 @@ 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);
}
......@@ -96,9 +91,7 @@ const isValidTel = (tel) => {
return /^1\d{10}$/.test(tel);
}
const login = () => {
console.warn(tel.value);
console.warn(code.value);
const login = async () => {
if (!isValidTel(tel.value) ||!code.value) {
Taro.showToast({
title: '请检查输入项',
......@@ -107,18 +100,23 @@ const login = () => {
});
return;
} else {
Taro.showToast({
title: '登录成功',
icon: 'success',
duration: 2000,
success: () => {
setTimeout(() => {
Taro.reLaunch({
url: '/pages/index/index'
})
}, 1000);
}
});
// TODO: 等待正式接口环境调整
// const { code, data } = await bindPhoneAPI({ phone: tel.value, sms_code: code.value });
const { code } = await bindPhoneAPI({ phone: tel.value, sms_code: 'debug_sms_code_1805' });
if (code) {
Taro.showToast({
title: '绑定成功',
icon: 'success',
duration: 2000,
success: () => {
setTimeout(() => {
Taro.reLaunch({
url: '/pages/my/index'
})
}, 1000);
}
});
}
}
}
......@@ -132,14 +130,17 @@ const resetDisplay = () => {
resetCountdown();
}
const getCode = () => {
const getCode = async () => {
if (isValidTel(tel.value)) {
Taro.showToast({
title: '验证码已发送',
icon:'success',
duration: 2000
});
startCountdown(10, updateDisplay, resetDisplay);
const { code } = await sendSmsCodeAPI({ phone: tel.value });
if (code) {
Taro.showToast({
title: '验证码已发送',
icon:'success',
duration: 2000
});
startCountdown(10, updateDisplay, resetDisplay);
}
} else {
Taro.showToast({
title: '请检查手机号',
......@@ -152,7 +153,10 @@ const getCode = () => {
<script>
import "./index.less";
import mixin from '@/utils/mixin';
export default {
name: "loginPage",
mixins: [mixin.init],
};
</script>
......
......@@ -92,9 +92,11 @@ const onTabClick = ({ title, paneKey, disabled }) => {
<script>
import "./index.less";
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
export default {
name: "bookPage",
mixins: [mixin.init],
computed: {
scrollStyle() {
return {
......
......@@ -251,7 +251,10 @@ const onPayClose = () => {
<script>
import "./index.less";
import mixin from '@/utils/mixin';
export default {
name: "confirmPage",
mixins: [mixin.init],
};
</script>
......
......@@ -187,8 +187,10 @@ const hideFn = () => {
<script>
import "./index.less";
import mixin from '@/utils/mixin';
export default {
name: "detailPage",
mixins: [mixin.init],
};
</script>
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-22 10:52:36
* @LastEditTime: 2023-12-22 11:16:07
* @FilePath: /meihuaApp/src/pages/login/index.vue
* @Description: 文件描述
-->
......@@ -113,6 +113,7 @@ const login = async () => {
});
return;
} else {
// TODO: 等待正式接口环境调整
// const { code, data } = await bindPhoneAPI({ phone: tel.value, sms_code: code.value });
const { code } = await bindPhoneAPI({ phone: tel.value, sms_code: 'debug_sms_code_1805' });
if (code) {
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-21 16:34:26
* @LastEditTime: 2023-12-22 12:17:30
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 我的页面
-->
<template>
<view class="my-page">
<view id="avator" class="user-wrapper">
<view id="avatar" class="user-wrapper">
<view class="user-info">
<nut-avatar size="60" style="border: 1px solid #fff;">
<img style="border-radius: 50%;" :src="avator" />
<img style="border-radius: 50%;" :src="userInfo.avatar ? userInfo.avatar : avatar" />
</nut-avatar>
<text style="margin-left: 30rpx;">默认用户</text>
<text style="margin-left: 30rpx;">{{ userInfo.name }}</text>
</view>
<view class="edit">
<IconFont name="edit" @tap="goToEdit"></IconFont>
......@@ -40,12 +40,13 @@
<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import { ref, onMounted } from "vue";
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'
import avatar from '@/assets/images/avatar.png'
import { showMyInfoAPI } from '@/api/index'
const refScrollView = ref(null);
......@@ -101,6 +102,24 @@ const orderList = ref([
const show_pay = ref(false);
const payData = ref({});
const userInfo = ref({
name: '',
avatar: '',
phone: ''
});
onMounted(async () => {
// 获取用户信息
const { code, data } = await showMyInfoAPI();
if (code) {
userInfo.value = {
name: data.wxapp_user_name ? data.wxapp_user_name : '默认用户',
avatar: data.wxapp_user_avatar,
phone: data.wxapp_user_phone
}
}
});
const onPay = ({ id, remain_time }) => {
console.warn(id);
// Taro.showToast({
......@@ -118,10 +137,8 @@ const onPayClose = () => {
show_pay.value = false;
}
const goToEdit = () => {
// TODO: 检查手机号是否存在
let tel = '';
if (tel) {
const goToEdit = async () => {
if (userInfo.value.phone) {
Taro.navigateTo({
url: '/pages/myInfo/index',
});
......@@ -140,9 +157,11 @@ const onTabClick = ({ title, paneKey, disabled }) => {
<script>
import "./index.less";
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
export default {
name: "myPage",
mixins: [mixin.init],
computed: {
scrollStyle() {
return {
......@@ -167,15 +186,15 @@ export default {
}, 100);
// setTimeout(async () => {
// const navHeight = await $('#navbar-page').height();
// const avatorHeight = await $('#avator').height();
// const avatarHeight = await $('#avatar').height();
// const titleHeight = await $('#title').height();
// this.indexCoverHeight = windowHeight - navHeight - avatorHeight - titleHeight - 50;
// this.indexCoverHeight = windowHeight - navHeight - avatarHeight - titleHeight - 50;
// }, 500);
this.$nextTick(async () => {
const navHeight = await $('#navbar-page').height();
const avatorHeight = await $('#avator').height();
const avatarHeight = await $('#avatar').height();
const titleHeight = await $('#title').height();
this.indexCoverHeight = windowHeight - navHeight - avatorHeight - titleHeight - 50;
this.indexCoverHeight = windowHeight - navHeight - avatarHeight - titleHeight - 50;
if (this.$refs.refScrollView) {
Taro.hideLoading();
console.warn('加载完成');
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-21 15:56:04
* @LastEditTime: 2023-12-22 12:19:33
* @FilePath: /meihuaApp/src/pages/myInfo/index.vue
* @Description: 我的信息页面
-->
......@@ -9,7 +9,7 @@
<view class="my-info-page">
<view class="avatar" @tap="uploadImg">
<nut-avatar size="100">
<img :src="imageUrl" style="border-radius: 50%;"/>
<img :src="avatarUrl ? avatarUrl : avatar" style="border-radius: 50%;"/>
</nut-avatar>
<view class="edit">编辑</view>
</view>
......@@ -49,10 +49,23 @@
<script setup>
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
import { ref } from "vue";
import { ref, onMounted } from "vue";
import avatar from '@/assets/images/avatar.png'
import { showMyInfoAPI, saveCustomerInfoAPI } from '@/api/index'
import BASE_URL from '@/utils/config';
const username = ref('');
const tel = ref('123');
const tel = ref('');
const avatarUrl = ref('');
onMounted(async () => {
const { code, data } = await showMyInfoAPI();
if (code) {
username.value = data.wxapp_user_name ? data.wxapp_user_name : '默认用户';
tel.value = data.wxapp_user_phone;
avatarUrl.value = data.wxapp_user_avatar;
}
})
const goToEdit = () => {
Taro.navigateTo({
......@@ -60,55 +73,78 @@ const goToEdit = () => {
})
};
const imageUrl = ref(
'https://img.yzcdn.cn/vant/cat.jpeg'
);
const uploadImg = () => {
Taro.chooseImage({
count: 1,
success: (res) => {
console.warn(res);
const tempFilePaths = res.tempFilePaths[0];
console.warn(tempFilePaths);
imageUrl.value = tempFilePaths;
Taro.uploadFile({
url: BASE_URL + '/admin/?m=srv&a=upload',
filePath: tempFilePaths,
name: 'file',
header: {
'content-type': 'multipart/form-data',
},
success: function (res) {
let upload_data = JSON.parse(res.data);
Taro.hideLoading({
success: () => {
if (res.statusCode === 200) {
avatarUrl.value = upload_data.data.src;
} else {
Taro.showToast({
icon: 'error',
title: '服务器错误,稍后重试！',
mask: true
})
}
},
});
}
});
}
})
}
const isValidTel = (tel) => {
return /^1\d{10}$/.test(tel);
}
// const isValidTel = (tel) => {
// return /^1\d{10}$/.test(tel);
// }
const save = () => {
console.warn(username.value, tel.value);
if (!isValidTel(tel.value) ||!username.value) {
const save = async () => {
if (!username.value) {
Taro.showToast({
title: '请检查输入项',
title: '请检查用户名输入',
icon: 'error',
duration: 2000
});
return;
} else {
Taro.showToast({
title: '保存成功',
icon: 'success',
duration: 1000,
success: () => {
setTimeout(() => {
Taro.reLaunch({
url: '/pages/my/index'
})
}, 1000);
}
});
const { code, data } = await saveCustomerInfoAPI({ name: username.value, avatar: avatarUrl.value });
if (code) {
Taro.showToast({
title: '保存成功',
icon: 'success',
duration: 1000,
success: () => {
setTimeout(() => {
Taro.reLaunch({
url: '/pages/my/index'
})
}, 1000);
}
});
}
}
}
</script>
<script>
import "./index.less";
import mixin from '@/utils/mixin';
export default {
name: "myInfoPage",
mixins: [mixin.init],
};
</script>
......
......@@ -32,7 +32,10 @@ onMounted(() => {
<script>
import "./index.less";
import mixin from '@/utils/mixin';
export default {
name: "payInfoPage",
mixins: [mixin.init],
};
</script>
......