XinLingKeJi/jdt-user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i

Browse Source
This commit is contained in:
YuanHuakk
2023-09-06 03:49:21 +08:00
parent 8b5de95140
commit b6ca53f70e
39 changed files with 2146 additions and 679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
src/pages/users/user_setting/index.vue
View File

@@ -1,94 +1,218 @@
<script lang="ts" setup>
import Taro from '@tarojs/taro'
import Taro from "@tarojs/taro";
import { ref } from "vue";
import { getPersonalInfo, editPersonalInfo, getPhone } from "@/api/user";
import { View } from "@tarojs/components";
import { BASE_URL } from "@/utils/request";
const toPage = (e: string) => {
}
// const toPage = (e: string) => {};
const userInfo = ref<any>({});
Taro.useLoad(() => {
const data = Taro.getStorageSync("userInfo");
userInfo.value = data;
});
const logOut = () => {
Taro.showModal({
title: '提示',
content: '确定退出登录吗？',
success: function (res) {
if (res.confirm) {
Taro.removeStorageSync('token')
Taro.removeStorageSync('userInfo')
Taro.reLaunch({
url: '/pages/index/index'
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
Taro.showModal({
title: "提示",
content: "确定退出登录吗？",
success: function (res) {
if (res.confirm) {
Taro.removeStorageSync("token");
Taro.removeStorageSync("userInfo");
Taro.reLaunch({
url: "/pages/index/index",
});
} else if (res.cancel) {
console.log("用户点击取消");
}
},
});
};
const chooseavatar = (e: any) => {
Taro.uploadFile({
url: `${BASE_URL}/app/upload`,
filePath: e.detail.avatarUrl,
name: "file",
header: {
token: Taro.getStorageSync("token"),
},
success: function (res) {
const data = JSON.parse(res.data);
userInfo.value.avatarUrl = data.data.data;
},
});
};
const subUser = async () => {
try {
const reg =
/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
if (!reg.test(userInfo.value.phone))
return Taro.showToast({
title: "请输入正确的手机号码",
icon: "none",
});
const res = await editPersonalInfo(userInfo.value);
Taro.showToast({
title: res.msg,
icon: "none",
});
Taro.switchTab({
url: "/pages/user/index",
});
} catch (error) {
Taro.showToast({
title: error.msg,
icon: "none",
});
}
};
const getUserInfo = async () => {
try {
const res = await getPersonalInfo();
userInfo.value = res.data.data;
} catch (error) {
Taro.showToast({
title: error.msg,
icon: "none",
});
}
};
</script>
<template>
<view class="app">
<view class="user-card">
<view>管理我的账号</view>
<view class="avatar-card">
<view class="left">
<nut-avatar size="large">
<img
src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
/>
</nut-avatar>
<view class="name">微信用户</view>
</view>
</view>
</view>
<nut-cell-group>
<nut-cell title="昵称" desc="微信用户" is-link></nut-cell>
<nut-cell title="ID" desc="1" is-link></nut-cell>
<nut-cell title="手机号码" desc="18888888888" is-link></nut-cell>
<nut-cell title="登录密码" desc="修改登录密码" is-link></nut-cell>
<nut-cell title="注销账号" desc="账号注销后不能恢复" is-link></nut-cell>
</nut-cell-group>
<view class="btn">
<nut-button block type="primary" @click="logOut">退出登录</nut-button>
</view>
<view class="app">
<view class="user-card">
<view>管理我的账号</view>
<!-- {{ userInfo }} -->
<view class="avatar-card">
<view class="left">
<nut-button
open-type="chooseAvatar"
@chooseavatar="chooseavatar"
>
<nut-avatar size="large">
<img
style="border-radius: 50%"
:src="userInfo.avatarUrl"
/>
</nut-avatar>
</nut-button>
</view>
<view class="name">{{ userInfo.nickName }}</view>
</view>
</view>
</view>
<nut-cell-group>
<!-- :desc="userInfo.nickName" -->
<nut-cell title="昵称">
<template v-slot:link>
<nut-input
v-model="userInfo.nickName"
:border="false"
input-align="right"
placeholder="请输入昵称"
/> </template
></nut-cell>
<nut-cell title="手机号码">
<template v-slot:link>
<nut-input
v-model="userInfo.phone"
:border="false"
input-align="right"
disabled
/>
</template>
</nut-cell>
<nut-cell title="登录密码">
<template v-slot:link>
<nut-input
v-model="userInfo.password"
:border="false"
input-align="right"
placeholder="修改登录密码"
/>
</template>
</nut-cell>
<nut-cell title="注销账号" desc="账号注销后不能恢复" is-link>
</nut-cell>
</nut-cell-group>
<view class="btn">
<nut-button block @click="subUser">保存信息</nut-button>
</view>
<view class="btn">
<nut-button block type="primary" @click="logOut"
>退出登录</nut-button
>
</view>
</view>
</template>
<style lang="scss">
.user-card {
width: 100%;
background-color: #fff;
box-sizing: border-box;
margin: auto;
position: relative;
top: 10px;
padding: 30px;
.avatar-card {
background-color: rgba(255, 0, 0, 0.1);
margin: 20px auto;
border-radius: 20px;
border: 1px solid #ff0000;
display: flex;
align-items: center;
padding: 30px;
width: 100%;
background-color: #fff;
box-sizing: border-box;
margin: auto;
position: relative;
top: 10px;
padding: 30px;
.left {
margin-left: 10px;
display: flex;
align-items: center;
position: relative;
justify-content: space-between;
.avatar-card {
background-color: rgba(255, 0, 0, 0.1);
margin: 20px auto;
border-radius: 20px;
border: 1px solid #ff0000;
display: flex;
align-items: center;
padding: 30px;
position: relative;
.name {
margin-left: 10px;
}
.left {
margin-left: 10px;
display: flex;
align-items: center;
position: relative;
justify-content: space-between;
.name {
margin-left: 10px;
}
.nut-button {
margin: 0 auto;
width: 125px;
height: 125px;
border-radius: 50%;
}
}
}
}
}
.btn {
padding: 0 40px;
padding: 0 40px;
margin-bottom: 20px;
}
</style>
.nut-input {
width: 400px !important;
padding: 0 !important;
}
.nut-cell {
display: flex;
align-items: center;
}
.phoneBtn {
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
background-color: transparent !important;
border: none !important;
}
</style>