475 lines
11 KiB
Vue
475 lines
11 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="certificationClick(certification)" class="list-item">
|
||
<view class="list-item-left">
|
||
<image src="/static/imgs/self-icon.png" mode="widthFix" />
|
||
<span>个人认证</span>
|
||
</view>
|
||
<view class="input">
|
||
<input type="text" :value="certification.is_true?'已认证':''"
|
||
:placeholder="certification.is_true?'':'未认证'" disabled="true" maxlength="12" />
|
||
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
|
||
</view>
|
||
</view>
|
||
<!-- 企业认证 -->
|
||
<view @click="company(companyCode.code)" class="list-item">
|
||
<view class="list-item-left">
|
||
<image src="/static/imgs/company-icon.png" mode="widthFix" />
|
||
<span>企业认证</span>
|
||
</view>
|
||
<view class="input">
|
||
<input type="text" :value="companyCode.code=== 1?'已认证':''"
|
||
:placeholder="companyCode.code !== 1?companyCode.message:''" disabled="true" maxlength="12" />
|
||
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
|
||
</view>
|
||
</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,
|
||
companyStatus,
|
||
companyIsallow
|
||
} 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, // 微信绑定
|
||
certification: {}, // 个人认证
|
||
companyCode: {}, // 企业认证 -1.未认证，0.审核中，1.审核通过，2.驳回
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getUserInfo()
|
||
},
|
||
onPullDownRefresh() {
|
||
this.getUserInfo()
|
||
},
|
||
methods: {
|
||
// 是否个人认证
|
||
certificationClick(certfication) {
|
||
if (certfication.is_true) {
|
||
// 跳转到个人认证信息完成展示页面
|
||
// this.$refs.uToast.show({
|
||
// title: '认证通过！',
|
||
// type: 'primary',
|
||
// duration: 3000
|
||
// })
|
||
uni.showModal({
|
||
title: '认证信息',
|
||
content: '真实姓名：<' + certfication.message.name + '>,身份证号：' + certfication.message.idcard,
|
||
showCancel:false
|
||
})
|
||
} else {
|
||
// 跳转到个人认证信息页面
|
||
this.$Router.push({
|
||
name:'Personal'
|
||
})
|
||
}
|
||
},
|
||
// 是否展示企业信息 企业认证 -1.未认证，0.审核中，1.审核通过，2.驳回
|
||
company(code) {
|
||
if (code === -1) {
|
||
// 跳转到企业认证页面
|
||
companyIsallow().then(res=>{
|
||
this.$Router.push({
|
||
name:'companyApprove'
|
||
})
|
||
}).catch(err=>{
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
})
|
||
|
||
} else if (code === 2) {
|
||
// 跳转到企业认证页面
|
||
this.$Router.push({
|
||
name:'companyApprove',
|
||
params:{
|
||
form_type:'put'
|
||
}
|
||
})
|
||
} else if (code === 0) {
|
||
this.$refs.uToast.show({
|
||
title: '审核中',
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
} else if (code === 1) {
|
||
// 跳转到企业认证页面
|
||
this.$refs.uToast.show({
|
||
title: '认证通过！',
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
}
|
||
},
|
||
// 获取当前用户得基本信息
|
||
getUserInfo() {
|
||
getUserSettingInfo().then(res => {
|
||
this.avatar.showPath = res.avatar
|
||
this.nickname = res.nickname
|
||
this.is_bind = res.is_bind
|
||
this.certification = res.certification
|
||
uni.stopPullDownRefresh()
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
})
|
||
// -1.未认证，0.审核中，1.审核通过，2.驳回
|
||
companyStatus().then(res => {
|
||
this.companyCode = res
|
||
}).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() {
|
||
this.$store.commit('setToken', '')
|
||
this.$Router.push({name: 'Index'})
|
||
},
|
||
// 上传头像
|
||
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 => {
|
||
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: 20rpx;
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.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>
|