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.
155 lines
3.7 KiB
155 lines
3.7 KiB
<template>
|
|
<!-- 20221228 -->
|
|
<view class="mine-auth-cn">
|
|
<!-- 组件内容 -->
|
|
<view class="cn-content">
|
|
<!-- 已登录用户 -->
|
|
<view class="flex align-center padding-top-30" style="padding-bottom:100rpx;" v-if="isLogin">
|
|
<!-- 头像 -->
|
|
<image class="jc-avatar-120" :src="headImg ? headImg : '/static/mine/headimg_no.png'" mode="aspectFill">
|
|
</image>
|
|
|
|
<view class="flex-one flex flex-direction margin-left-30 text-ff">
|
|
<!-- 昵称 -->
|
|
<view class="line-height-50 text-cut-one text-40">{{nickName ? nickName : '暂未设置'}}
|
|
</view>
|
|
|
|
<!-- #ifdef MP-TOUTIAO -->
|
|
<view class="margin-top-15 width-150 line-height-50-border-ff radius-25 text-center text-24 text-ff"
|
|
@tap="getUserProfile">更新资料</view>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<button open-type="getAuthorize" scope="userInfo"
|
|
class="margin-top-15 width-150 line-height-50-border-ff radius-25 text-center text-24 text-ff"
|
|
@getAuthorize="getUserProfile">更新资料</button>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 未登录用户 -->
|
|
<view class="flex align-center padding-top-30" style="padding-bottom:100rpx;" v-else>
|
|
<!-- 头像 -->
|
|
<image class="jc-image-120" src="/static/mine/headimg_no.png" mode="aspectFill"></image>
|
|
<!-- 立即登录 -->
|
|
<view class="flex-one margin-left-30">
|
|
<view class="line-height-70-border-ff text-center radius-35" style="width: 250rpx;"
|
|
@tap="showLayer">
|
|
<text class="text-28 text-ff">立即登录</text>
|
|
<text class="margin-left-10 tyIcon-jiantou text-28 text-ff"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 组件浮层 -->
|
|
<view class="cn-content">
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import user from "../../user/api/user.js"
|
|
export default {
|
|
props: {
|
|
// 是否登录
|
|
isLogin: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 头像
|
|
headImg: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 昵称
|
|
nickName: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 点击立即登录按钮
|
|
* @date 2022-12-28
|
|
*/
|
|
showLayer() {
|
|
this.$emit('showLayer')
|
|
},
|
|
|
|
/**
|
|
* 获取头像昵称等用户信息
|
|
* @date 2022-12-28
|
|
*/
|
|
getUserProfile() {
|
|
|
|
// #ifdef MP-TOUTIAO
|
|
wx.getUserProfile({
|
|
success: (res) => {
|
|
let openid = uni.getStorageSync('openid')
|
|
|
|
let data = {
|
|
openid: openid,
|
|
nickname: res.userInfo.nickName,
|
|
avatar_url: res.userInfo.avatarUrl,
|
|
country: res.userInfo.country,
|
|
province: res.userInfo.province,
|
|
city: res.userInfo.city,
|
|
gender: res.userInfo.gender,
|
|
language: res.userInfo.language
|
|
}
|
|
|
|
user.updateMpToutiaoUserInfo(data).then(res => {
|
|
if (res.code == 0) {
|
|
this.$emit('getUserProfileSuccess')
|
|
}
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
console.log(err)
|
|
}
|
|
})
|
|
// #endif
|
|
|
|
// #ifdef MP-ALIPAY
|
|
// 支付宝小程序获取头像昵称
|
|
uni.getUserInfo({
|
|
provider: 'alipay',
|
|
success: (infoRes) => {
|
|
let userInfo = JSON.parse(infoRes.response).response // 以下方的报文格式解析两层 response
|
|
|
|
let openid = uni.getStorageSync('openid')
|
|
|
|
let data = {
|
|
openid: openid,
|
|
nickname: userInfo.nickName,
|
|
headimgurl: userInfo.avatar,
|
|
country: userInfo.countryCode,
|
|
province: userInfo.province,
|
|
city: userInfo.city,
|
|
gender: userInfo.gender
|
|
}
|
|
|
|
user.updateMpAlipayUserInfo(data).then(res => {
|
|
if (res.code == 0) {
|
|
this.$emit('getUserProfileSuccess')
|
|
}
|
|
})
|
|
}
|
|
})
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|