Files
tk-mini-program/pages/Setting/Setting.vue
pengxiaolong 0044f8f334 优化代码
2025-09-29 20:48:31 +08:00

418 lines
10 KiB
Vue

<template>
<view class="container">
<view class="bg">
<image
class="bgImg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
mode="scaleToFill"
/>
</view>
<view class="Return" @click="onBack">
<image
class="ReturnImg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
mode="scaleToFill"
/>
</view>
<view class="title">设置</view>
<view class="contentbox">
<view class="content">
<!-- 修改头像 -->
<button class="login-btn" open-type="chooseAvatar" @chooseavatar="Userinfo">
<view class="avatarmodify">
<view class="avatarmodify-item">头像</view>
<view class="avatarmodify-img">
<image class="avatar" :src="userinfo"></image>
<image
class="more"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
mode="scaleToFill"
/>
</view>
</view>
</button>
<!-- 修改昵称 -->
<view class="Nickname" @click="inputNickname">
<view class="avatarmodify-item">昵称</view>
<view class="NicknameInput">
<view class="NicknameInput-name">{{ name }}</view>
<image
class="more"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
mode="scaleToFill"
/>
</view>
</view>
<!-- 修改邮箱 -->
<view class="Nickname" @click="modifyEmailAddress">
<view class="avatarmodify-item">邮箱</view>
<view class="NicknameInput">
<view class="NicknameInput-name">{{
email == "" || email == null ? "未绑定" : email
}}</view>
<image
class="more"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
mode="scaleToFill"
/>
</view>
</view>
<!-- 修改密码 -->
<view class="Nickname" @click="modifyPassword">
<view class="avatarmodify-item">密码</view>
<view class="NicknameInput">
<view class="NicknameInput-name">{{
havaPassword == true ? "" : "未设置"
}}</view>
<image
class="more"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
mode="scaleToFill"
/>
</view>
</view>
<!-- 扫码登录web端 -->
<view class="Nickname" @click="scanCode">
<view class="avatarmodify-item">扫码</view>
<view class="NicknameInput">
<image
class="more"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
mode="scaleToFill"
/>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import request from "../../components/request.js";
import postFile from "../../components/postFile.js";
import generateFileName from "../../components/generateFileName.js";
import { goEasylogin, goEasylogout } from "../../components/goEasyTool/tool.js";
export default {
inject: ["$global"],
data() {
return {
userinfo: "",
name: "",
id: "",
info: {},
useravatar: "",
email: null,
havaPassword: false,
};
},
onLoad(option) {
this.id = option.id;
this.getUserInfo();
},
onShow() {
this.getUserInfo();
},
methods: {
//获取个人信息
getUserInfo() {
request({
url: "user/getUserInfo",
method: "POST",
data: {
id: this.id,
},
userInfo: true,
}).then((res) => {
if (res.code == 200) {
this.userinfo = res.data;
uni.setStorageSync("userinfo", res.data);
setTimeout(() => {
uni.getStorage({
key: "userinfo",
success: (res) => {
this.id = res.data.id;
this.name = res.data.nickName;
this.userinfo = this.useravatar = res.data.headerIcon;
this.email = res.data.email;
this.havaPassword = res.data.havaPassword;
},
});
}, 300);
} else {
console.log(res.msg);
}
});
},
//修改密码
modifyPassword() {
uni.navigateTo({
url:
"/pages/Setting/settingmod/changePassword?id=" +
this.id +
"&havaPassword=" +
this.havaPassword,
});
},
// 修改邮箱
modifyEmailAddress() {
uni.navigateTo({
url:
"/pages/Setting/settingmod/changeEmail?email=" + this.email + "&id=" + this.id,
});
},
// 修改昵称
inputNickname() {
uni.navigateTo({
url:
"/pages/Setting/settingmod/changeNickname?name=" + this.name + "&id=" + this.id,
});
},
// 扫码登录web端
scanCode() {
uni.scanCode({
success: (res) => {
const data = JSON.parse(res.result);
if (data.type === "qrcdoe") {
request({
url: "user/scan",
method: "POST",
data: {
uuid: data.uuid,
id: this.id,
},
userInfo: true,
})
.then((res) => {
request({
url: "user/confirm",
method: "POST",
data: {
uuid: data.uuid,
id: this.id,
},
userInfo: true,
})
.then((res) => {
if (res.code === 200) {
uni.showToast({
title: "登录成功",
icon: "success",
});
} else {
uni.showToast({
title: res,
icon: "none",
});
}
})
.catch((err) => {
uni.showToast({
title: "登录失败",
icon: "none",
});
});
})
.catch((err) => {
uni.showToast({
title: "登录失败",
icon: "none",
});
});
}
// 其他类型暂不处理
},
});
},
onBack() {
uni.navigateBack({
delta: 1,
});
},
// 选择头像
async Userinfo(e) {
const { avatarUrl } = e.detail;
this.userinfo = avatarUrl;
this.changeHeaderIcon();
},
// 修改头像
changeHeaderIcon() {
goEasylogout(this.$goeasy);
uni.showLoading({
title: "修改中...",
mask: true,
});
postFile({
path: this.userinfo,
name: generateFileName(),
})
.then((res) => {
request({
url: "user/updateUserInfo",
method: "POST",
data: {
id: this.id,
headerIcon: res.split("/").pop(),
nickName: this.name,
},
userInfo: true,
}).then((ress) => {
console.log("修改调用返回", ress);
if (ress.code === 200) {
uni.showToast({
title: "修改成功",
icon: "success",
});
uni.setStorageSync("userinfo", ress.data.info);
goEasylogin(
this.$goeasy,
String(ress.data.info.id),
ress.data.info.headerIcon,
ress.data.info.nickName
);
uni.hideLoading();
//```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
uni.navigateBack({
delta: 1,
});
//````````````````````````````````````````````````````````````````````
} else {
uni.hideLoading();
uni.showToast({
title: ress.msg,
icon: "none",
});
}
});
})
.catch((err) => {
uni.hideLoading();
uni.showToast({
title: "上传失败",
icon: "none",
});
});
},
},
};
</script>
<style scoped>
.bg {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
}
.bgImg {
width: 100%;
height: 100%;
}
.Return {
position: fixed;
left: 35rpx;
top: 120rpx;
width: 46rpx;
height: 46rpx;
z-index: 2;
}
.title {
position: fixed;
top: 120rpx;
left: 0;
right: 0;
text-align: center;
font-size: 34rpx;
color: #100e0f;
font-weight: bold;
z-index: 1;
}
.ReturnImg {
width: 100%;
height: 100%;
}
.contentbox {
position: absolute;
top: 200rpx;
left: 0rpx;
right: 0rpx;
bottom: 0rpx;
}
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.avatarmodify {
width: 94%;
height: 100rpx;
background-color: #fff;
padding-left: 3%;
padding-right: 3%;
display: flex;
justify-content: space-between;
align-items: center;
}
.avatarmodify-item {
font-size: 24rpx;
color: #100e0f;
line-height: 100rpx;
font-weight: bold;
}
.avatarmodify-img {
display: flex;
align-items: center;
}
.login-btn {
width: 100%;
height: 100rpx;
padding: 0;
margin: 0;
border: none;
background-color: #fff;
border-radius: 0rpx;
display: flex;
}
.login-btn::after {
border: none;
border-radius: 0rpx;
}
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 10rpx;
}
.more {
width: 15rpx;
height: 30rpx;
margin-left: 30rpx;
}
.Nickname {
width: 94%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 3%;
padding-right: 3%;
background-color: #fff;
border-top: 1rpx solid #f0f0f0;
}
.NicknameInput {
display: flex;
align-items: center;
}
.NicknameInput-name {
font-size: 24rpx;
color: #bdbdbd;
line-height: 100rpx;
font-weight: bold;
}
</style>