433 lines
9.5 KiB
Vue
433 lines
9.5 KiB
Vue
<template>
|
|
<view class="Setting">
|
|
<!-- 更多管理 -->
|
|
<view class="list">
|
|
<!-- 修改头像 -->
|
|
<view class="list-item" @click="updImgs">
|
|
<view class="list-item-left">
|
|
<image src="/static/imgs/user-avatar.png" mode="widthFix" />
|
|
<span>修改头像</span>
|
|
</view>
|
|
<view class="avatar">
|
|
<image :src="avatar.showPath?avatar.showPath:'/static/imgs/no-avatar.png'" mode="aspectFill" />
|
|
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
|
|
</view>
|
|
</view>
|
|
<!-- 修改昵称 -->
|
|
<view class="list-item">
|
|
<view class="list-item-left">
|
|
<image src="/static/imgs/mine-self-name.png" mode="widthFix" />
|
|
<span>修改昵称</span>
|
|
</view>
|
|
<view class="input">
|
|
<input type="text" :value="nickname" @blur='blur' placeholder="请输入用户的昵称" maxlength="12" />
|
|
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
|
|
</view>
|
|
</view>
|
|
<!-- 绑定微信 -->
|
|
<button class="list-item" @click="getUser" v-if="false">
|
|
<view class="list-item-left">
|
|
<image src="/static/imgs/link-wechat.png" mode="widthFix" />
|
|
<span>绑定微信</span>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
|
|
</button>
|
|
<!-- 个人认证 -->
|
|
<view @click="certification(is_certification)" class="list-item">
|
|
<view class="list-item-left">
|
|
<image src="/static/imgs/self-icon.png" mode="widthFix" />
|
|
<span>个人认证</span>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
|
|
</view>
|
|
<!-- 企业认证 -->
|
|
<view @click="company(is_company)" class="list-item">
|
|
<view class="list-item-left">
|
|
<image src="/static/imgs/company-icon.png" mode="widthFix" />
|
|
<span>企业认证</span>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
|
|
</view>
|
|
<!-- 关于我们 -->
|
|
<view @click="$router.push({name:'aboutUs'})" class="list-item">
|
|
<view class="list-item-left">
|
|
<image src="/static/imgs/mine-about.png" mode="widthFix" />
|
|
<span>关于链商星球</span>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
|
|
</view>
|
|
<!-- 切换账号 -->
|
|
<view @click="loginOut" class="list-item">
|
|
<view class="list-item-left">
|
|
<image src="/static/imgs/reset-info.png" mode="widthFix" />
|
|
<span>切换账户</span>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="edition">
|
|
链商星球 beta 1.0.0
|
|
</view>
|
|
<!-- 底部版本 -->
|
|
|
|
<u-toast ref="uToast" />
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
wechatbind,
|
|
resetUserInfo,
|
|
getUserSettingInfo
|
|
} from '@/apis/interfaces/setting'
|
|
import {
|
|
uploads
|
|
} from '@/apis/interfaces/uploading'
|
|
export default {
|
|
name: 'Setting',
|
|
data() {
|
|
return {
|
|
canLogin: true,
|
|
nickname: '',
|
|
avatar: {
|
|
path: '',
|
|
showPath: ''
|
|
},
|
|
is_bind: true, // 微信绑定
|
|
is_certification: true, // 个人认证
|
|
is_company: true, // 企业认证
|
|
}
|
|
},
|
|
onShow() {
|
|
wx.login({
|
|
success: res => {
|
|
this.loginCode = res.code
|
|
}
|
|
})
|
|
this.getUserInfo()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getUserInfo()
|
|
},
|
|
methods: {
|
|
// 是否个人认证
|
|
certification(is_certfication) {
|
|
console.log(is_certfication)
|
|
if (is_certfication) {
|
|
// 跳转到个人认证信息完成展示页面
|
|
this.$router.push({
|
|
name: ''
|
|
})
|
|
} else {
|
|
// 跳转到个人认证信息页面
|
|
this.$router.push({
|
|
name: ''
|
|
})
|
|
}
|
|
},
|
|
// 是否展示企业信息
|
|
company(is_company) {
|
|
console.log(is_company)
|
|
if (is_company) {
|
|
// 跳转到企业认证完成信息展示页面
|
|
this.$router.push({
|
|
name: ''
|
|
})
|
|
} else {
|
|
// 跳转到企业认证页面
|
|
this.$router.push({
|
|
name: ''
|
|
})
|
|
}
|
|
},
|
|
// 获取当前用户得基本信息
|
|
getUserInfo() {
|
|
getUserSettingInfo().then(res => {
|
|
this.avatar.showPath = res.avatar
|
|
this.nickname = res.nickname
|
|
this.is_bind = res.is_bind
|
|
this.is_certification = res.is_certification
|
|
this.is_company = res.is_company
|
|
uni.stopPullDownRefresh()
|
|
}).catch(err => {
|
|
this.$refs.uToast.show({
|
|
title: err.message,
|
|
type: 'primary',
|
|
duration: 3000
|
|
})
|
|
})
|
|
},
|
|
// 点击绑定用户得授权信息，且绑定带修改
|
|
getUser() {
|
|
uni.getUserProfile({
|
|
desc: "获取你的昵称、头像、地区及性别",
|
|
success: e => {
|
|
if (e.errMsg == "getUserProfile:ok") {
|
|
this.userInfo = e.userInfo
|
|
// // 检查用户登录Code是否过期
|
|
wx.checkSession({
|
|
success: res => {
|
|
this.userLogin(e)
|
|
},
|
|
fail: err => {
|
|
// 登录过期重新获取code
|
|
uni.login({
|
|
success: res => {
|
|
this.loginCode = res.code
|
|
// 登录
|
|
this.userLogin()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
duration: 1500,
|
|
title: "绑定手机号失败了",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
fail() {
|
|
uni.showToast({
|
|
duration: 1500,
|
|
title: "您拒绝了请求",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 登陆接口
|
|
userLogin(info) {
|
|
let that = this
|
|
uni.login({
|
|
success: res => {
|
|
let data = {
|
|
iv: info.iv,
|
|
encryptedData: info.encryptedData,
|
|
code: res.code
|
|
}
|
|
uni.showLoading({
|
|
title: '绑定中'
|
|
})
|
|
wechatbind(data).then(res => {
|
|
setTimeout(res => {
|
|
uni.hideLoading()
|
|
}, 1000)
|
|
this.$refs.uToast.show({
|
|
title: '绑定成功',
|
|
type: 'primary',
|
|
duration: 3000
|
|
})
|
|
setTimeout(res => {
|
|
this.getUserInfo()
|
|
}, 3000)
|
|
}).catch(err => {
|
|
this.$refs.uToast.show({
|
|
title: err.message,
|
|
type: 'primary',
|
|
duration: 3000
|
|
})
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
});
|
|
|
|
},
|
|
loginOut() {
|
|
uni.removeStorageSync('token')
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
})
|
|
},
|
|
// 上传头像
|
|
updImgs(type) {
|
|
uni.chooseImage({
|
|
success: res => {
|
|
let path = res.tempFiles.map((val, index) => {
|
|
return {
|
|
name: 'uploads' + index,
|
|
uri: val.path
|
|
}
|
|
})
|
|
uploads(path).then(pathRes => {
|
|
this.avatar.path = pathRes.path[0]
|
|
this.avatar.showPath = pathRes.url[0]
|
|
this.resetUserInfo('avatar', pathRes.url[0])
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: 'none'
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 修改姓名
|
|
blur(e) {
|
|
let value = e.detail.value
|
|
if (value !== this.nickname) {
|
|
this.resetUserInfo('nickname', value)
|
|
}
|
|
},
|
|
// 修改头像或昵称
|
|
resetUserInfo(key, value) {
|
|
let data = {
|
|
key: key,
|
|
value: value
|
|
}
|
|
resetUserInfo(data).then(res => {
|
|
console.log(res, 'res...')
|
|
uni.showToast({
|
|
title: res,
|
|
icon: 'none'
|
|
})
|
|
setTimeout(res => {
|
|
this.getUserInfo()
|
|
}, 2000)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: 'none'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.Setting {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
background-color: #fff;
|
|
|
|
// 版本
|
|
.edition {
|
|
color: #cacaca;
|
|
text-align: center;
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
// 更多管理
|
|
.list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
top: -10rpx;
|
|
border-radius: 20rpx;
|
|
margin: 0 40rpx;
|
|
padding: 30rpx 0;
|
|
width: calc(100% - 80rpx);
|
|
|
|
button::after {
|
|
border: none;
|
|
background-color: none;
|
|
}
|
|
|
|
button {
|
|
position: relative;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
box-sizing: border-box;
|
|
font-size: $title-size *0.9;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
line-height: 1;
|
|
border-radius: 5px;
|
|
-webkit-tap-highlight-color: transparent;
|
|
overflow: hidden;
|
|
color: #333;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.list-item {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 40rpx 0;
|
|
border-bottom: solid 1rpx #f7f7f7;
|
|
box-sizing: border-box;
|
|
|
|
.avatar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.input {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
text-align: right;
|
|
flex: 1;
|
|
|
|
input {
|
|
padding-right: 30rpx;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.list-item-left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
span {
|
|
margin-left: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 底部轮播图跳转到其他app
|
|
.mine-banner {
|
|
position: relative;
|
|
width: calc(100% - 80rpx);
|
|
top: -20rpx;
|
|
margin: 0 40rpx;
|
|
box-sizing: border-box;
|
|
margin-top: $margin*2;
|
|
}
|
|
}
|
|
|
|
.loginOut {
|
|
margin: 30rpx 50rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 20rpx 4rpx rgba($color: $mian-color, $alpha: 0.1);
|
|
text-align: center;
|
|
padding: 20rpx;
|
|
border-radius: 10rpx;
|
|
color: #353535;
|
|
}
|
|
</style>
|