You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
394 lines
10 KiB
394 lines
10 KiB
<template> |
|
<view class="personal-data"> |
|
<!-- <view class="wrapper"> --> |
|
<view class="wrapList acea-row row-between-wrapper"> |
|
<!-- <view class="item acea-row row-between-wrapper on"> --> |
|
<!-- <view class="picTxt acea-row row-between-wrapper"> --> |
|
<view class="pictrue"> |
|
<!-- <div class="pictrue"> @tap="chooseImage" --> |
|
<image class="image" v-if="avatar" :src="avatar" /> |
|
|
|
<view class="noAvatar acea-row row-middle row-center" v-else> |
|
<image src="../../../static/images/yanjie-logo.png" mode="widthFix"></image> |
|
</view> |
|
<!-- </div> --> |
|
<!-- <image :src="`${$VUE_APP_RESOURCES_URL}/images/alter.png`" class="alter" /> --> |
|
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button> |
|
</view> |
|
<view class="text"> |
|
<view class="name line1">{{ userInfo.nickname || '微信用户' }}</view> |
|
<view v-if="userInfo.phone" class="phone">已绑定手机：{{ userInfo.phone }}</view> |
|
<button v-else class="phone phone-btn" open-type="getPhoneNumber" @getphonenumber="phoneLogin">绑定手机号</button> |
|
</view> |
|
<!-- </view> --> |
|
<!-- </view> --> |
|
</view> |
|
<!-- </view> --> |
|
<view class="list"> |
|
<view class="item acea-row row-between-wrapper"> |
|
<view>昵称</view> |
|
<view class="input"> |
|
<input id="nickname-input" type="nickname" v-model="userInfo.nickname" @blur="getNickName()" /> |
|
</view> |
|
</view> |
|
<view class="item acea-row row-between-wrapper"> |
|
<view>眼界ID</view> |
|
<view class="input" style="color: #999999;"> |
|
{{userInfo.uid}} |
|
<!-- <input type="text" :value="userInfo.uid" disabled class="id" /> --> |
|
<!-- <text class="iconfont icon-suozi"></text> --> |
|
</view> |
|
</view> |
|
<view class="item acea-row row-between-wrapper"> |
|
<view>生日</view> |
|
<view class="input"> |
|
<picker mode="date" :value="birth" @change="bindDateChange"> |
|
<view v-if="!birth" class="empty">点击完善生日</view> |
|
<view v-else> |
|
{{birth}} |
|
</view> |
|
</picker> |
|
</view> |
|
</view> |
|
<view class="item acea-row row-between-wrapper"> |
|
<view>手机号</view> |
|
<view class="input" style="color: #999999;"> |
|
{{userInfo.phone?userInfo.phone:'未绑定'}} |
|
<!-- <input type="text" v-if="userInfo.phone" v-model="userInfo.phone" placeholder="未绑定" disabled/> |
|
<input type="text" v-else value="未绑定" disabled class="id" /> --> |
|
</view> |
|
</view> |
|
<!-- <view class="item acea-row row-between-wrapper" @click="goChangePassword()"> |
|
<view>密码</view> |
|
<view class="input acea-row row-between-wrapper"> |
|
<text>点击修改密码</text> |
|
<text class="iconfont icon-suozi"></text> |
|
</view> |
|
</view> --> |
|
</view> |
|
<view class="modifyBnt bg-color-red" @click="submit">保存</view> |
|
<view class="modifyBnt cancel" @click="cancel">取消</view> |
|
<!-- #ifndef MP-WEIXIN --> |
|
<view class="logOut cart-color acea-row row-center-wrapper" @click="logout">退出登录</view> |
|
<!-- #endif --> |
|
</view> |
|
</template> |
|
<script> |
|
import { |
|
mapGetters |
|
} from "vuex"; |
|
import { |
|
trim, |
|
isWeixin, |
|
chooseImage |
|
} from "@/utils"; |
|
import { |
|
VUE_APP_API_URL |
|
} from "@/config"; |
|
import { |
|
postUserEdit, |
|
getLogout, |
|
switchH5Login, |
|
getUserInfo, |
|
wxappBindingPhone |
|
} from "@/api/user"; |
|
import cookie from "@/utils/store/cookie"; |
|
import store from "@/store"; |
|
import dayjs from "dayjs"; |
|
|
|
export default { |
|
name: "PersonalData", |
|
components: { |
|
// VueCoreImageUpload |
|
}, |
|
data: function() { |
|
return { |
|
avatar: "", |
|
isWeixin: false, |
|
currentAccounts: 0, |
|
switchUserInfo: [], |
|
userIndex: 0, |
|
birth: '', |
|
}; |
|
}, |
|
computed: mapGetters(["userInfo"]), |
|
mounted: function() { |
|
this.avatar = this.userInfo.avatar; |
|
this.isWeixin = isWeixin(); |
|
// this.getUserInfo(); |
|
}, |
|
methods: { |
|
getNickName() { |
|
uni.createSelectorQuery().in(this) // 注意这里要加上 in(this) |
|
.select("#nickname-input") |
|
.fields({ |
|
properties: ["value"], |
|
}) |
|
.exec((res) => { |
|
const nickName = res?. [0]?.value |
|
let info = JSON.parse(JSON.stringify(this.userInfo)) |
|
info.nickname = nickName |
|
this.$store.commit('updateUserInfo', info) |
|
console.log('昵称', nickName) |
|
}) |
|
}, |
|
goChangePassword() { |
|
this.$yrouter.push("/pages/user/ChangePassword/index"); |
|
}, |
|
switchAccounts: function(index) { |
|
console.log(index, '1111111111111111188'); |
|
let that = this; |
|
this.userIndex = index; |
|
let userInfo = this.switchUserInfo[this.userIndex]; |
|
if (this.switchUserInfo.length <= 1) return true; |
|
if (userInfo === undefined) { |
|
uni.showToast({ |
|
title: "切换的账号不存在", |
|
icon: "none", |
|
duration: 2000, |
|
}); |
|
return; |
|
} |
|
if (userInfo.user_type === "h5") { |
|
switchH5Login() |
|
.then(({ |
|
data |
|
}) => { |
|
uni.hideLoading(); |
|
const expires_time = dayjs(data.expires_time); |
|
store.commit("login", data.token, expires_time); |
|
that.$emit("changeswitch", false); |
|
location.reload(); |
|
}) |
|
.catch((err) => { |
|
uni.hideLoading(); |
|
uni.showToast({ |
|
title: err.msg || err.response.data.msg || err.response.data.message, |
|
icon: "none", |
|
duration: 2000, |
|
}); |
|
}); |
|
} else { |
|
cookie.set("loginType", "wechat", 60); |
|
uni.hideLoading(); |
|
this.$store.commit("logout"); |
|
this.$emit("changeswitch", false); |
|
} |
|
}, |
|
getUserInfo: function() { |
|
let that = this; |
|
getUserInfo().then((res) => { |
|
// let switchUserInfo = res.data.switchUserInfo; |
|
// for (let i = 0; i < switchUserInfo.length; i++) { |
|
// if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i; |
|
// if ( |
|
// !that.isWeixin && |
|
// switchUserInfo[i].user_type != "h5" && |
|
// switchUserInfo[i].phone === "" |
|
// ) |
|
// switchUserInfo.splice(i, 1); |
|
// } |
|
// that.$set(this, "switchUserInfo", switchUserInfo); |
|
}); |
|
}, |
|
onChooseAvatar(e) { |
|
this.avatar = e.detail.avatarUrl; |
|
}, |
|
chooseImage() { |
|
chooseImage((img) => { |
|
this.avatar = img; |
|
}); |
|
}, |
|
bindDateChange(e) { |
|
console.log(e) |
|
this.birth = e.detail.value; |
|
}, |
|
// 绑定微信用户手机号 |
|
phoneLogin(e) { |
|
console.log('绑定微信用户手机号', e.mp.detail.code) |
|
if (e.mp.detail.errMsg == 'getPhoneNumber:ok') { |
|
uni.showLoading({ |
|
title: '绑定中', |
|
}) |
|
// this.wxappBindPhone(e, e.mp.detail.code) |
|
uni.login({ |
|
success: (loginRes) => { |
|
wxappBindingPhone({ |
|
encryptedData: e.mp.detail.encryptedData, |
|
iv: e.mp.detail.iv, |
|
code: loginRes.code |
|
}).then(res => { |
|
uni.hideLoading(); |
|
if(res.success) { |
|
getUserInfo().then(user => { |
|
this.userInfo.phone = user.phone; |
|
store.dispatch('setUserInfo', user.data); |
|
}) |
|
} |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'success', |
|
duration: 2000, |
|
}) |
|
}).catch(error => { |
|
uni.hideLoading() |
|
this.$store.dispatch('userInfo', true) |
|
console.log(error) |
|
uni.showToast({ |
|
title: error.msg || error.response.data.msg || error.response.data.message, |
|
icon: 'none', |
|
duration: 2000, |
|
}) |
|
}) |
|
} |
|
}) |
|
} else { |
|
uni.showToast({ |
|
title: '已拒绝授权', |
|
icon: 'none', |
|
duration: 2000, |
|
}) |
|
} |
|
}, |
|
wxappBindPhone(e, code) { |
|
|
|
}, |
|
|
|
submit: function() { |
|
|
|
let userInfo = this.userInfo; |
|
console.log(userInfo, '=============='); |
|
let data = { |
|
nickname: '', |
|
avatar: '' |
|
}; |
|
if (this.userInfo.nickname) { |
|
data.nickname = trim(this.userInfo.nickname); |
|
} |
|
if (this.avatar) { |
|
data.avatar = this.avatar; |
|
} |
|
postUserEdit(data).then( |
|
(res) => { |
|
this.$store.dispatch("userInfo", true); |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: "none", |
|
duration: 2000, |
|
}); |
|
this.$yrouter.back(); |
|
}, |
|
(err) => { |
|
uni.showToast({ |
|
title: err.msg || err.response.data.msg || err.response.data.message, |
|
icon: "none", |
|
duration: 2000, |
|
}); |
|
} |
|
); |
|
}, |
|
cancel() { |
|
this.$yrouter.back(); |
|
}, |
|
logout: function() { |
|
uni.showModal({ |
|
title: "提示", |
|
content: "确认退出登录?", |
|
success: (res) => { |
|
if (res.confirm) { |
|
getLogout() |
|
.then((res) => { |
|
this.$store.commit("logout"); |
|
this.$yrouter.replace({ |
|
path: "/pages/user/Login/index", |
|
query: {}, |
|
}); |
|
}) |
|
.catch((err) => {}); |
|
} else if (res.cancel) { |
|
// console.log("用户点击取消"); |
|
} |
|
}, |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="less" scoped> |
|
.wrapList { |
|
padding: 20rpx 32rpx 32rpx; |
|
|
|
.pictrue { |
|
width: 100rpx; |
|
height: 100rpx; |
|
box-shadow: 0rpx 0rpx 20rpx 10rpx rgba(0, 0, 0, 0.08); |
|
background: linear-gradient(135deg, rgba(27, 141, 204, 1), rgba(57, 211, 150, 1)); |
|
padding: 4rpx; |
|
border-radius: 50%; |
|
position: relative; |
|
|
|
.image { |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 50%; |
|
} |
|
|
|
.noAvatar { |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 50%; |
|
background: #F1F1F1; |
|
|
|
image { |
|
width: 90%; |
|
} |
|
} |
|
|
|
.avatar-wrapper { |
|
width: 100rpx; |
|
height: 100rpx; |
|
border-radius: 50%; |
|
opacity: 0; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
z-index: 1; |
|
} |
|
} |
|
|
|
.text { |
|
width: 586rpx; |
|
padding-left: 24rpx; |
|
|
|
.name { |
|
font-size: 15px; |
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 21px; |
|
padding-bottom: 10rpx; |
|
} |
|
|
|
.phone { |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 32rpx; |
|
} |
|
.phone-btn { |
|
width: 136rpx; |
|
height: 32rpx; |
|
background: #F1F1F1; |
|
border: 2rpx solid #2DB5AE; |
|
font-size: 20rpx; |
|
color: #2DB5AE; |
|
line-height: 28rpx; |
|
text-align: center; |
|
border-radius: 8rpx; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
} |
|
} |
|
</style>
|
|
|