init
This commit is contained in:
136
pages/profile/aboutMe.vue
Normal file
136
pages/profile/aboutMe.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<!-- 关于作者 -->
|
||||
<template>
|
||||
<view class="about">
|
||||
<like-fx ref="likeFx" :width="width" :height="height"></like-fx>
|
||||
<view class="titleZ text-center align-center">
|
||||
<text class="text-bold" style="font-size: 28px;">关于我们</text>
|
||||
<view class="contentZ">
|
||||
<text class="text-xl">我们专注提供专业的软件产品和技术。为合作伙伴提供安全可靠的软件产品与解决方案，共同帮助终端用户实现业务创新、快速发展。</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LikeFx from '@/components/likeFx/likeFx.vue'
|
||||
export default {
|
||||
components: {
|
||||
LikeFx
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
animation_timer: null, // 动画定时器
|
||||
width: 375,
|
||||
height: 1920
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this._startLikeAnimation();
|
||||
},
|
||||
onUnload() {
|
||||
clearTimeout(this.animation_timer)
|
||||
},
|
||||
methods: {
|
||||
_startLikeAnimation() {
|
||||
this.animation_timer = setInterval(() => {
|
||||
this.$refs.likeFx.likeClick()
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
.titleZ{
|
||||
width: 750rpx;
|
||||
font-size: 42rpx;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
.contentZ{
|
||||
width: 650rpx;
|
||||
margin: 10rpx auto 0;
|
||||
text-align: left;
|
||||
}
|
||||
.about-bg {
|
||||
background-size: cover;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.edit-fixed {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 1024;
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.detail-imgs image {
|
||||
width: 100%;
|
||||
float: left;
|
||||
/* height:400rpx; 不定高了*/
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.share-img {
|
||||
position: fixed;
|
||||
padding: 10rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
/* top: 680rpx; */
|
||||
bottom: 200rpx;
|
||||
right: 20rpx;
|
||||
z-index: 1024;
|
||||
opacity: 0.8;
|
||||
box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.about {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding-top: 20%;
|
||||
color: #fff;
|
||||
background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
|
||||
/* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
|
||||
background-size: 500% 500%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.like-fx {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 1024;
|
||||
pointer-events: none;
|
||||
/* background-color: red; */
|
||||
}
|
||||
</style>
|
||||
90
pages/profile/avatar.vue
Normal file
90
pages/profile/avatar.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title="设置头像" :border-bottom="false"></u-navbar>
|
||||
<view class="wrap">
|
||||
<u-upload :custom-btn="true" ref="uUpload" :auto-upload="true" :action="action" :max-size="10 * 1024 * 1024" max-count="1" width="690" height="690" :size-type="siteType">
|
||||
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
|
||||
<u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
|
||||
</view>
|
||||
</u-upload>
|
||||
<view class="u-m-t-20 btn">
|
||||
<u-button type="primary" @click="subProfile">提交</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/common/config.js" // 全局配置文件
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 服务器地址
|
||||
action: config.staticUrl + '/common/upload',
|
||||
siteType:['compressed']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
subProfile() {
|
||||
let files = [];
|
||||
// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
|
||||
files = this.$refs.uUpload.lists.filter(val => {
|
||||
return val.progress == 100;
|
||||
})
|
||||
if(this.$u.test.isEmpty(files)){
|
||||
return this.$mytip.toast('请选择图片')
|
||||
}
|
||||
let imageList = files.map(val => {
|
||||
return {
|
||||
// imgUrl: val.response.url,
|
||||
imgUrl: val.response.fileName
|
||||
}
|
||||
})
|
||||
let avatar = imageList[0].imgUrl
|
||||
let vuex_user = uni.getStorageSync('lifeData').vuex_user
|
||||
let user = vuex_user.user
|
||||
let userId = user.userId;
|
||||
this.$u.put("api/profile/updateProfile",{
|
||||
userId:userId,
|
||||
avatar:avatar,
|
||||
}).then(data => {
|
||||
// 关闭
|
||||
user.avatar = avatar
|
||||
this.$u.vuex('vuex_user', vuex_user);
|
||||
this.$mytip.toast('头像修改成功')
|
||||
setTimeout(()=>{
|
||||
uni.$emit('updateAvatar', {});
|
||||
uni.switchTab({
|
||||
url: '/pages/center/center'
|
||||
})
|
||||
},1000);
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.wrap {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.slot-btn {
|
||||
width: 690rpx;
|
||||
height: 690rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgb(244, 245, 246);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.slot-btn__hover {
|
||||
background-color: rgb(235, 236, 238);
|
||||
}
|
||||
</style>
|
||||
118
pages/profile/password.vue
Normal file
118
pages/profile/password.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title="修改密码" :border-bottom="false"></u-navbar>
|
||||
<view class="u-m-20">
|
||||
<u-toast ref="uToast" />
|
||||
<view>
|
||||
<u-cell-group>
|
||||
<u-field
|
||||
v-model="oldpassword"
|
||||
label="旧密码"
|
||||
placeholder="请填写旧密码"
|
||||
icon="lock"
|
||||
iconColor="#d5d5d5"
|
||||
label-width = "180"
|
||||
password
|
||||
focus
|
||||
>
|
||||
</u-field>
|
||||
<u-field
|
||||
v-model="newpassword"
|
||||
label="新密码"
|
||||
placeholder="请填写新密码"
|
||||
icon="lock"
|
||||
iconColor="#d5d5d5"
|
||||
label-width = "180"
|
||||
password
|
||||
>
|
||||
</u-field>
|
||||
<u-field
|
||||
v-model="password"
|
||||
label="确认密码"
|
||||
placeholder="请再次填写密码"
|
||||
icon="lock-fill"
|
||||
iconColor="#d5d5d5"
|
||||
label-width = "180"
|
||||
password
|
||||
>
|
||||
</u-field>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button type="primary" @tap="changePasswold">提交</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
oldpassword: '',
|
||||
newpassword: '',
|
||||
password: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changePasswold() {
|
||||
if(!this.oldpassword){
|
||||
return this.$mytip.toast('请输入旧密码')
|
||||
}
|
||||
if(!this.newpassword){
|
||||
return this.$mytip.toast('请输入新密码')
|
||||
}
|
||||
if(!this.password){
|
||||
return this.$mytip.toast('请确认密码')
|
||||
}
|
||||
if(this.newpassword != this.password){
|
||||
return this.$mytip.toast('密码不一致,请确认')
|
||||
}
|
||||
let url = "api/profile/updatePwd";
|
||||
let userId = uni.getStorageSync('lifeData').vuex_user.user.userId;
|
||||
this.$u.put(url,{
|
||||
userId:userId,
|
||||
oldPassword:this.oldpassword,
|
||||
newPassword:this.newpassword
|
||||
}).then(data => {
|
||||
//提示后跳转页面
|
||||
this.$mytip.toast('密码修改成功')
|
||||
setTimeout(()=>{
|
||||
uni.switchTab({
|
||||
url: '/pages/center/center'
|
||||
})
|
||||
},1000);
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 550rpx;
|
||||
img {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.version {
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 15rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 20rpx;
|
||||
}
|
||||
</style>
|
||||
118
pages/profile/profile.vue
Normal file
118
pages/profile/profile.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view class="u-m-20">
|
||||
<u-navbar :is-back="true" title="个人信息" :border-bottom="false"></u-navbar>
|
||||
<view>
|
||||
<u-cell-group>
|
||||
<u-cell-item title="头像" :arrow="true" hover-class="none" @click="updateAvatar">
|
||||
<u-avatar :src="pic" size="100"></u-avatar>
|
||||
</u-cell-item>
|
||||
</u-cell-group>
|
||||
<u-cell-group>
|
||||
<u-cell-item title="昵称" :arrow="true" hover-class="none" @click="updateName">
|
||||
{{vuex_user.user.nickName}}
|
||||
</u-cell-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
|
||||
<u-modal v-model="showModel" @confirm="confirmName" ref="uModal" :async-close="true"
|
||||
title="设置昵称">
|
||||
<view class="slot-content">
|
||||
<u-input v-model="nickName" type="text" :border="false" placeholder="请输入昵称"/>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
<!-- <view class="u-m-t-20">
|
||||
<u-button type="primary" @click="subProfile">提交</u-button>
|
||||
</view> -->
|
||||
|
||||
<!-- 如果是微信登录小程序，则获取用户的昵称与头像 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- <u-button type="default">使用微信头像与昵称</u-button> -->
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/common/config.js" // 全局配置文件
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pic:uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl)?uni.getStorageSync('lifeData').vuex_user.user.avatar:config.staticUrl+uni.getStorageSync('lifeData').vuex_user.user.avatar,
|
||||
nickName:null,
|
||||
showModel:false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateName(){
|
||||
this.showModel = true;
|
||||
},
|
||||
confirmName() {
|
||||
if(!this.nickName){
|
||||
this.showModel = false;
|
||||
return this.$mytip.toast('请输入昵称')
|
||||
}
|
||||
let url = "api/profile/updateProfile";
|
||||
let vuex_user = uni.getStorageSync('lifeData').vuex_user
|
||||
let user = vuex_user.user
|
||||
let userId = user.userId;
|
||||
this.$u.put(url,{
|
||||
userId:userId,
|
||||
nickName:this.nickName,
|
||||
}).then(data => {
|
||||
// 关闭
|
||||
user.nickName = this.nickName
|
||||
this.$u.vuex('vuex_user', vuex_user);
|
||||
this.showModel = false;
|
||||
this.$mytip.toast('昵称修改成功')
|
||||
});
|
||||
},
|
||||
updateAvatar(){
|
||||
this.$u.route('/pages/profile/avatar')
|
||||
},
|
||||
subProfile(){
|
||||
// 1.更新vuex中的用户信息
|
||||
this.$mytip.toast('修改成功')
|
||||
// 2.页面跳转
|
||||
uni.switchTab({
|
||||
url: '/pages/center/center'
|
||||
})
|
||||
},
|
||||
getUserProfile(){
|
||||
// 如果是微信登录小程序，则获取用户的昵称与头像
|
||||
// #ifdef MP-WEIXIN
|
||||
// 此处执行微信才执行
|
||||
// #endif
|
||||
var that = this;
|
||||
uni.getUserProfile({
|
||||
desc: '获取您的微信信息以授权小程序',
|
||||
lang: 'zh_CN',
|
||||
success: UserProfileRes => {
|
||||
console.log(UserProfileRes)
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function(loginRes) {
|
||||
let avatarUrl = UserProfileRes.userInfo.avatarUrl; //用户头像
|
||||
let nickName = UserProfileRes.userInfo.nickName; //用户微信名
|
||||
let gender = UserProfileRes.userInfo.gender;//性别
|
||||
console.log(avatarUrl);
|
||||
// 去修改用户的昵称与头像
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err)
|
||||
}
|
||||
});
|
||||
},
|
||||
fail:err=>{
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slot-content{
|
||||
padding: 40rpx;
|
||||
}
|
||||
</style>
|
||||
60
pages/profile/setting.vue
Normal file
60
pages/profile/setting.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title="设置" :border-bottom="false">
|
||||
</u-navbar>
|
||||
<view>
|
||||
<u-cell-group>
|
||||
<u-cell-item title="个人信息" @click="profile"></u-cell-item>
|
||||
<u-cell-item title="修改密码" @click="changePassword"></u-cell-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
|
||||
<view class="btn">
|
||||
<u-button type="default" @click="logout" plain>退出登录</u-button>
|
||||
</view>
|
||||
|
||||
<view class="version">Version {{vuex_version}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
profile(){
|
||||
this.$u.route('/pages/profile/profile')
|
||||
},
|
||||
logout() {
|
||||
// 登录成功修改token与用户信息
|
||||
this.$u.vuex('vuex_token', '');
|
||||
this.$u.vuex('vuex_user', {});
|
||||
return uni.reLaunch({
|
||||
url:'../index/index'
|
||||
})
|
||||
},
|
||||
changePassword(){
|
||||
this.$u.route('/pages/profile/password')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.btn {
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.version {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user