392 lines
10 KiB
Vue
392 lines
10 KiB
Vue
<template>
|
||
<view class="setting-page">
|
||
<HeaderCom></HeaderCom>
|
||
<scroll-view scroll-y="true" class="scroll-main">
|
||
<view class="main" v-if="isLogin">
|
||
<view class="item" @click="updateAvatar">
|
||
<view class="label">头像</view>
|
||
<view class="info">
|
||
<view class="portrait">
|
||
<image :src="infoDetail.avatarResource ? infoDetail.avatarResource.url : '/static/zy/logo.png'" class="portrait-icon" mode="aspectFit"></image>
|
||
</view>
|
||
<!-- <image src="@/static/new/mine/back.png" mode="" class="back-icon"></image> -->
|
||
</view>
|
||
</view>
|
||
<!-- @click="editName" -->
|
||
<view class="item" @click="editName">
|
||
<view class="label">昵称</view>
|
||
<view class="info">
|
||
{{infoDetail.nickname}}
|
||
<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="item" @click="bindPhone">
|
||
<view class="label">手机号</view>
|
||
<view class="info" v-if="infoDetail.phone">
|
||
{{infoDetail.phone | mobileFilter(infoDetail.phone)}}
|
||
</view>
|
||
<view class="info" v-else>
|
||
未绑定手机
|
||
</view>
|
||
</view> -->
|
||
<view class="item border-none">
|
||
<view class="label">ID</view>
|
||
<view class="info" @click="copy">
|
||
{{infoDetail.id}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="main">
|
||
<view class="item" @click="agreement('index')">
|
||
<view class="label">用户协议</view>
|
||
<view class="info">
|
||
|
||
<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
|
||
</view>
|
||
</view>
|
||
<view class="item" @click="agreement('privacy')">
|
||
<view class="label">隐私政策</view>
|
||
<view class="info">
|
||
<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
|
||
</view>
|
||
</view>
|
||
<view class="item" @click="agreement('nonage-rule')">
|
||
<view class="label">儿童个人信息保护规则</view>
|
||
<view class="info">
|
||
<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
|
||
</view>
|
||
</view>
|
||
<view class="item" @click="agreement('nonage')">
|
||
<view class="label">支付服务协议</view>
|
||
<view class="info">
|
||
<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
|
||
</view>
|
||
</view>
|
||
<view class="item" :class="{'border-none':!isLogin}" @click="about">
|
||
<view class="label">关于我们</view>
|
||
<view class="info">
|
||
<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
|
||
</view>
|
||
</view>
|
||
<view class="item" @click="clearCache">
|
||
<view class="label">清除缓存</view>
|
||
<view class="info">
|
||
<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
|
||
</view>
|
||
</view>
|
||
<view class="item border-none" @click="customerCk" v-if="isLogin">
|
||
<view class="label">联系客服</view>
|
||
<view class="info">
|
||
<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="out" @click="logOut" v-if="isLogin">退出登录</view>
|
||
</scroll-view>
|
||
<!-- 退出登录弹框 -->
|
||
<popup-view v-model="logOutvisible" mode="center" border-radius="15" zIndex="1">
|
||
<view class="log-out">
|
||
<view class="log-out-tip">确定要退出登录？</view>
|
||
<view class="log-out-footer">
|
||
<view class="cancel" @click="closeLogOut">取消</view>
|
||
<view class="shu"></view>
|
||
<view class="log-out-submit" @click="submitLogOut">确定</view>
|
||
</view>
|
||
</view>
|
||
</popup-view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/mine/setting"></page-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
import HeaderCom from '@/pages/components/header.vue'
|
||
import { userInfo,customerApi,aliyunUploadTokenApi,updateAvatarApi,versionControlApi } from '@/API/user.js'
|
||
export default{
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
infoDetail:{avatarResource:{}},//用户信息
|
||
logOutvisible:false,//退出登录
|
||
customer:'',
|
||
isLogin:false,
|
||
dataObj: {
|
||
policy: "",
|
||
signature: "",
|
||
key: "",
|
||
OSSAccessKeyId: "",
|
||
dir: "",
|
||
host: "",
|
||
},
|
||
}
|
||
},
|
||
components:{HeaderCom},
|
||
onShow() {
|
||
if(uni.getStorageSync('box-token')){
|
||
this.getUserInfo()
|
||
this.isLogin = true
|
||
}else{
|
||
this.isLogin = false
|
||
}
|
||
},
|
||
filters:{
|
||
// 隐藏手机号
|
||
mobileFilter(val){
|
||
let reg = /^(.{3}).*(.{4})$/
|
||
return val ? val.replace(reg,'$1****$2') : ''
|
||
},
|
||
},
|
||
methods:{
|
||
updateAvatar(){
|
||
uni.chooseImage({
|
||
count: 1, // 默认9，设置图片的数量
|
||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
success: (chooseImageRes) => {
|
||
console.log(chooseImageRes)
|
||
const tempFiles = chooseImageRes.tempFiles;
|
||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||
let data = {filename:`${new Date().getTime()}${tempFiles[0].name}`,dir:'user/avatar'}
|
||
aliyunUploadTokenApi(data).then(response => {
|
||
console.log(response)
|
||
// updateAvatarApi
|
||
this.dataObj.policy = response.data.policy;
|
||
this.dataObj.signature = response.data.signature;
|
||
this.dataObj.OSSAccessKeyId = response.data.accessId;
|
||
this.dataObj.key = response.data.key;
|
||
this.dataObj.dir = response.data.key;
|
||
this.dataObj.host = response.data.host;
|
||
uni.uploadFile({
|
||
url: this.dataObj.host, // 服务器上传接口地址
|
||
filePath: tempFilePaths[0],
|
||
name: 'file', // 必须填写，后台用来接收文件
|
||
formData: this.dataObj,
|
||
success: (uploadFileRes) => {
|
||
if(uploadFileRes.errMsg === 'uploadFile:ok'){
|
||
updateAvatarApi({avatar:this.dataObj.key}).then(upRes => {
|
||
this.$api.msg(upRes.message)
|
||
if(upRes.code === 200){
|
||
this.getUserInfo()
|
||
}
|
||
})
|
||
}
|
||
console.log('upload success:', uploadFileRes);
|
||
},
|
||
fail: (uploadFileErr) => {
|
||
console.error('upload fail:', uploadFileErr);
|
||
}
|
||
});
|
||
})
|
||
},
|
||
fail: (chooseImageErr) => {
|
||
console.error('choose image fail:', chooseImageErr);
|
||
}
|
||
});
|
||
},
|
||
copy(){
|
||
uni.setClipboardData({
|
||
data: `${this.infoDetail.id}`,
|
||
})
|
||
},
|
||
bindPhone(){
|
||
if(this.infoDetail.phone){
|
||
this.$emit('您已绑定手机')
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url:`/pages/login/bindPhone`
|
||
})
|
||
},
|
||
// 获取客服链接
|
||
getCustomer(){
|
||
customerApi().then(res => {
|
||
if(res.code === 200){
|
||
this.customer = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 跳转客服
|
||
customerCk(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/customer`
|
||
})
|
||
// window.open(this.customer)
|
||
},
|
||
about(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/about`
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
getUserInfo(){
|
||
userInfo().then(res => {
|
||
if(res.code === 200){
|
||
this.infoDetail = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 修改昵称
|
||
editName(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/editName?id=${this.infoDetail.id}&nickname=${this.infoDetail.nickname}`
|
||
})
|
||
},
|
||
// 用户协议 隐私政策
|
||
agreement(type){
|
||
uni.navigateTo({
|
||
url:`/pages/agreement/${type}`
|
||
})
|
||
},
|
||
// 清除缓存
|
||
clearCache(){
|
||
uni.showLoading({
|
||
mask:true
|
||
})
|
||
versionControlApi().then(res => {
|
||
uni.hideLoading()
|
||
this.$api.msg(res.message)
|
||
if(res.code === 200){
|
||
let path = window.location.protocol + '//' + res.data.url
|
||
console.log(window.location.protocol)
|
||
|
||
setTimeout(() => {
|
||
window.location.href = path
|
||
},1000)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
logOut(){
|
||
this.logOutvisible = true
|
||
},
|
||
closeLogOut(){
|
||
this.logOutvisible = false
|
||
},
|
||
submitLogOut(){
|
||
uni.removeStorageSync('box-token')
|
||
uni.reLaunch({
|
||
url:`/pages/login/login`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background-color: #F5F5F5;
|
||
}
|
||
.setting-page{
|
||
padding-top: 112rpx;
|
||
.scroll-main{
|
||
height: calc(100vh - 112rpx);
|
||
padding: 0 32rpx;
|
||
.main{
|
||
width: 686rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
padding: 0 32rpx;
|
||
.item{
|
||
height: 104rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #F2F2F2;
|
||
.label{
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
}
|
||
.info{
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
.portrait{
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #CCCCCC;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.portrait-icon{
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.back-icon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
.border-none {
|
||
border: none;
|
||
}
|
||
}
|
||
.out{
|
||
width: 686rpx;
|
||
height: 104rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #E55353;
|
||
}
|
||
}
|
||
|
||
.log-out{
|
||
width: 590rpx;
|
||
height: 300rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
.log-out-tip{
|
||
height: 200rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: rgba(0,0,0,0.85);
|
||
line-height: 200rpx;
|
||
text-align: center;
|
||
}
|
||
.log-out-footer{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-top: 2rpx solid rgba(0,0,0,0.06);
|
||
height: 100rpx;
|
||
.cancel{
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
text-align: center;
|
||
border-right: 1px solid rgba(0,0,0,0.06);
|
||
}
|
||
.log-out-submit{
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #E55353;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |