sadjv1/anmo-server-uniapp/pages/my/userinfo.vue

383 lines
9.5 KiB
Vue
Raw Permalink Normal View History

2024-06-03 09:26:34 +08:00
<template>
<view class="bg">
<view class="usermain">
<view class="usermain-item ">
<view style="font-size: 30rpx;">头像</view>
<!-- <image src="../../static/logo.png" v-if="avatar==null" mode=""
style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
<image v-else :src="avatar" mode="" style="width: 111rpx;height: 111rpx;border-radius: 50%;">
</image> -->
<!-- #ifdef MP-WEIXIN -->
<view>
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="background: #FFFFFF;">
<image src="../../static/logo.png" v-if="avatar==null" mode=""
style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
<image v-else :src="avatar" mode="" style="width: 111rpx;height: 111rpx;border-radius: 50%;">
</image>
</button>
</view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view @click="uploadImg()">
<image src="../../static/logo.png" v-if="avatar==null" mode=""
style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
<image v-else :src="avatar" mode="" style="width: 111rpx;height: 111rpx;border-radius: 50%;">
</image>
</view>
<!-- #endif -->
</view>
<view class="xian"></view>
<view class="usermain-item item-padding ">
<view style="font-size: 30rpx;">用户名</view>
<view>
<view class="cu-form-group">
<input type="nickname" v-model="userName" placeholder="请输入用户名" />
</view>
</view>
</view>
<view class="xian"></view>
<view class="usermain-item item-padding ">
<view style="font-size: 30rpx;">年龄</view>
<view>
<view class="cu-form-group">
<input v-model="age" />
</view>
</view>
</view>
<!-- <view class="usermain-item item-padding">
<view >姓名</view>
<view class="cu-form-group">
<input v-model="realName" placeholder="请填写您的真实姓名" />
</view>
</view> -->
<view class="xian"></view>
<view class="usermain-item item-padding ">
<view style="font-size: 30rpx;">手机</view>
<view>
<view class="cu-form-group">
<input v-model="phone" disabled placeholder="请输入联系电话" />
</view>
</view>
</view>
<view class="xian"></view>
<view class="usermain-item item-padding ">
<view style="font-size: 30rpx;">性别</view>
<view>
<view class="cu-form-group">
<u-radio-group v-model="sex">
<u-radio shape="circle" active-color="#096f4b" :name="1"></u-radio>
<u-radio shape="circle" active-color="#096f4b" :name="2"></u-radio>
</u-radio-group>
</view>
</view>
</view>
</view>
<view class="footer-btn">
<view class="usermain-btn" @click="messagebtn()">保存</view>
</view>
</view>
</template>
<script>
import * as websocketUtils from 'utils/websocketUtils.js';
// 调用手机系统权限
// #ifdef APP-PLUS
import permision from "@/components/permission.js";
// #endif
export default {
data() {
return {
phone: '',
avatar: '../../static/logo.png',
userName: '',
nickName: '',
userId: '',
realName: '',
weChatId: "",
password: '',
platform: '',
createTime: '',
money: '',
jiFen: '',
status: '',
zhiFuBao: '',
zhiFuBaoName: '',
sex: 1,
age: 0,
checkPer: true,
};
},
onLoad(e) {
this.getUserInfo()
this.checkPermission();
// this.avatar = uni.getStorageSync('avatar')
},
methods: {
//微信填写能力获取头像
onChooseAvatar(e) {
console.log(e.detail.avatarUrl)
let that = this;
let token = uni.getStorageSync('token');
uni.showLoading({
title: '上传中...'
});
let userId = uni.getStorageSync('userId');
uni.uploadFile({
url: websocketUtils.uploadFileUrl(), //真实的接口地址
filePath: e.detail.avatarUrl,
header: {
token: token
},
name: 'file',
success: uploadFileRes => {
let url = JSON.parse(uploadFileRes.data);
that.avatar = url.data
uni.hideLoading();
}
});
},
goMyAddress() {
uni.navigateTo({
url: '../jifen/myaddress'
});
},
async checkPermission() {
let that = this;
let status = permision.isIOS ? await permision.requestIOS('album') : await permision.requestAndroid(
'android.permission.READ_EXTERNAL_STORAGE');
console.log("status", status)
if (status === null || status === 1) {
status = 1;
that.checkPer = true;
} else if (status === 2) {
uni.showModal({
content: "系统相机已关闭",
confirmText: "确定",
showCancel: false,
success: function(res) {}
})
that.checkPer = false;
} else if (status.code) {
that.checkPer = false;
uni.showModal({
content: status.message
})
} else {
that.checkPer = false;
}
return status;
},
uploadImg() {
let token = uni.getStorageSync('token')
if (!token) {
this.goLoginInfo();
return;
}
// #ifdef APP-PLUS
if (!this.checkPer) {
uni.showModal({
title: '相机服务已关闭',
content: "您需要打开相机权限,否则我们将无法获得到您的相册信息,请到>设置>隐私>应用权限>中开启【盛安到家】读取相册权限",
confirmText: "设置",
success: function(res) {
if (res.confirm) {
permision.gotoAppSetting();
}
}
})
return;
}
// #endif
let that = this;
var url = null;
uni.showActionSheet({
// itemList按钮的文字接受的是数组
itemList: ["查看头像", "从相册选择图片"],
success(e) {
var index = e.tapIndex
if (index === 0) {
// 用户点击了预览当前图片
// 可以自己实现当前头像链接的读取
let url = that.avatar;
let arr = []
arr.push(url)
uni.previewImage({
// 预览功能图片也必须是数组的
urls: arr
})
} else if (index === 1) {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function(res) {
uni.showLoading({
title: '上传中...'
});
let token = uni.getStorageSync('token');
let userId = uni.getStorageSync('userId');
uni.uploadFile({
url: websocketUtils.uploadFileUrl(), //真实的接口地址
filePath: res.tempFilePaths[0],
header: {
token: token
},
name: 'file',
success: uploadFileRes => {
url = JSON.parse(uploadFileRes.data);
that.avatar = url.data
uni.hideLoading();
}
});
}
});
}
}
})
},
getUserInfo() {
let userId = uni.getStorageSync('userId')
this.$Request.get("/app/user/selectUserById").then(res => {
if (res.code == 0) {
this.$queue.setData('avatar', res.data.avatar);
this.$queue.setData('userId', res.data.userId);
this.$queue.setData('userName', res.data.userName);
this.$queue.setData('phone', res.data.phone);
this.$queue.setData('age', res.data.age);
this.sex = res.data.sex
this.age = res.data.age
this.phone = res.data.phone;
this.avatar = res.data.avatar;
this.userName = res.data.userName;
if (this.userName == null) {
this.userName = res.data.nickName;
} else {
this.userName = res.data.userName;
}
}
uni.hideLoading();
});
},
// 保存
messagebtn() {
if (!this.userName) {
// this.$queue.showToast('用户名不能为空');
uni.showToast({
title: "用户名不能为空",
icon: "none"
})
} else {
uni.showModal({
title: '温馨提示',
content: '确定保存信息',
success: e => {
if (e.confirm) {
this.$Request.postJson("/app/user/updateUser", {
userName: this.userName,
avatar: this.avatar,
sex: this.sex,
age: this.age
}).then(res => {
if (res.code === 0) {
uni.showToast({
title: '保存成功',
icon: "none"
})
setTimeout(function() {
uni.navigateBack()
}, 1000)
} else {
uni.showToast({
title: res.msg,
icon: "none"
})
}
})
}
}
});
}
}
},
// userphone(){
// uni.navigateTo({
// url:'/pages/my/userphone'
// })
// }
};
</script>
<style>
page {
background: #f7f7f7;
}
.bg{
background-color: #FFFFFF;
}
button::after {
border: none;
}
.usermain {
background: #ffffff;
padding: 0 30rpx;
}
.xian{
width: 100%;
height: 1px;
background-color: #f7f7f7;
}
.usermain-item {
display: flex;
align-items: center;
padding: 20rpx 0;
justify-content: space-between;
}
.usermain-item.item-padding {
/* padding: 0; */
}
.cu-form-group {
padding: 0;
background: #ffffff;
text-align: right;
}
.cu-form-group input {
background: #ffffff;
font-size: 28rpx;
/* color: #fff; */
}
.footer-btn {
position: fixed;
bottom: 0rpx;
left: 0;
right: 0;
background: #FFFFFF;
height: 110rpx;
line-height: 110rpx;
z-index: 999;
}
.footer-btn .usermain-btn {
background: linear-gradient(to right, #223845, #00a85b);
color: #FFFFFF;
margin: 16rpx 30upx;
position: fixed;
bottom: 0upx;
width: 90%;
border-radius: 50rpx;
height: 78rpx;
line-height: 78rpx;
font-size: 32rpx;
text-align: center;
}
</style>