1.微信獲取頭像和昵稱最新需要用戶上傳頭像和手動(dòng)輸入昵稱，否則昵稱默認(rèn)是微信用戶，頭像是灰色頭像 ps（會(huì)提示使用微信頭像和微信昵稱）
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-511840.html
<template>
<view>
<view class="cx_content_bill">
<view class="cx_pile_status">
<image :src="currentPile.filePath" class="lottery-cover-img"></image>
</view>
<view class="cx_pileType">{{currentPile.pileName}}</view>
<view class="cx_pile_pay">
家庭充電樁交付突破1,000,000臺(tái)
</view>
<view class="cx_pile_titleA">百萬(wàn)成就百萬(wàn)交付</view>
<view class="cx_nick_img">
<image :src="avatar" style="width: 100%;height: 100%;"></image>
</view>
<view class="cx_pile_titleB">
<view>我是{{nickname}}</view>
<view>我正在使用{{currentPile.pileName}}</view>
<view>如果您的充電樁銘牌上也有 </view>
<view>您就是正在尋找的百萬(wàn)</view>
</view>
<view class="cx_pile_logo"></view>
<view class="cx_pile_share" @click="showTips">
<view>馬上分享</view>
<view class="cx_pile_shareIma"></view>
</view>
<!-- 活動(dòng)隱私協(xié)議 -->
<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="popup" disabled shadow>
<view class="cx_popup">
<view class="cx_popup_title">
活動(dòng)隱私協(xié)議
</view>
<view class="cx_popup_content">
1.本人同意為了生成我的個(gè)人充電海報(bào)而查詢,調(diào)用我的微信頭像、昵稱、位置等信息，生成我的專(zhuān)屬活動(dòng)頁(yè)面并向我進(jìn)行信息展示。</view>
<view class="cx_popup_content">
2.專(zhuān)屬活動(dòng)頁(yè)面為自動(dòng)生成結(jié)果，可能與實(shí)際情況存在一定誤差。該活動(dòng)頁(yè)面生成后，您的個(gè)人信息將在系統(tǒng)中保留30天后刪除。
</view>
<view class="cx_popup_content">
3.專(zhuān)屬活動(dòng)頁(yè)面包含我的個(gè)人信息。如我轉(zhuǎn)發(fā)、共享該活動(dòng)頁(yè)面，即視為我同意并向接收者提供我的個(gè)人信息。對(duì)該等轉(zhuǎn)發(fā)、共享活動(dòng)而導(dǎo)致的個(gè)人信息泄露承擔(dān)任何直接或間接的責(zé)任。
</view>
<view class="cx_popup_content">
4.在本協(xié)議中未聲明的其他一切權(quán)利，仍歸本公司所有。本公司保留對(duì)本協(xié)議的最終解釋權(quán)利。如果您還有其他問(wèn)題和建議，可以通過(guò)
</view>
<view class="cx_popup_content" style="display: flex;justify-content: flex-start;width: 100%;">
<text style="color: #237FFF;" @click="callPhone">400580</text>聯(lián)系我們
</view>
<!-- <view class="cx_popup_btn" @click="agree">已閱讀并同意</view> -->
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="cx_popup_btn"
v-if="!nickFlag">已閱讀并同意</button>
<button @click="getUserInfo" class="cx_popup_btn" v-if="nickFlag">用戶授權(quán)</button>
</view>
</tui-bottom-popup>
<!-- 獲取用戶頭像昵稱 -->
<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShows" @close="popup" disabled shadow>
<view class="getnickbox">
<view class="flex_align_center">
<image src="https://img.cdn.wxzhida.cn/zd-ali-app/zdlogo.png" class="logoimg" mode="aspectFit">
</image>
<view class="name">
活動(dòng)申請(qǐng)
</view>
</view>
<view class="m1 mt30">獲取你的頭像、昵稱</view>
<view class="m2">展示個(gè)人信息</view>
<view class="xin1">
<button type="default" class="flex_spacebetween buttoncss" open-type="chooseAvatar"
@chooseavatar="chooseavatar">
<view class="flex_align_center toubox">
<view class="t1">頭像</view>
<view v-if="avatar == ''" class="avatarbox">
</view>
<image v-else :src="avatar" class="avatarimg"></image>
</view>
<tui-icon name="arrowright"></tui-icon>
</button>
</view>
<view class="nick">
<view class="n1">昵稱:</view>
<input type="nickname" v-model="nickname" placeholder="請(qǐng)輸入昵稱" maxlength="8">
</view>
<view class="fixedBtn wan">
<view class="user-info" @click="refuse">拒絕</view>
<view class="user-priamy" @click="getUserInfo">允許</view>
</view>
</view>
</tui-bottom-popup>
<!-- 分享朋友圈和朋友列表 -->
<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShowes" @close="popup">
<view class="cx_popupss">
<view class="wechatB_A">
<view class="wechatA" @click="shareFriend">
<button open-type="share" style="border-color: transparent;" class="wechatA"></button>
</view>
<view>發(fā)送朋友</view>
</view>
<view class="wechatB_A">
<view class="wechatB" @click="goShareFri"></view>
<view>
分享朋友圈
</view>
</view>
</view>
<view class="cx_popup_cancle" @click="popupShowes = false">取消</view>
</tui-bottom-popup>
</view>
</view>
</template>
<script>
export default {
data() {
return {
popupShow: false,
nickFlag: false,
jsCode: '',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
modal: false,
canvasdata: {}, //canvas數(shù)據(jù)
imagedata: {}, //頭像數(shù)據(jù)
codeimage: "", //最后生成圖片地址
posterCover: '',
popupShows: false,
avatar: '',
nickname: '',
mobile: '',
currentPile: {},
popupShowes: false,
}
},
onShareAppMessage(res) {
return {
title: '百萬(wàn)好禮派送中',
path: '/pages/selectPile/index',
imageUrl: 'https://img.cdn.wxzhida.cn/zd-lottery/xxcc.jpg'
}
},
async onShow() {
this.getPileDetail()
if (uni.getStorageSync('userInfo') != '') {
if (this.showFlags) { //進(jìn)了webview分享頁(yè)面就自動(dòng)跳到抽獎(jiǎng)頁(yè)面
let res = await this.getLottery()
console.log('bbbb')
console.log(res)
if (res.data.data == null) {
uni.reLaunch({
url: '/pages/return-visit/index'
})
} else {
if (res.data.data.isLottery == '01' || res.data.data.isLottery == '' || res.data.data
.isLottery ==
undefined || res.data.data.isLottery == null) { //未抽獎(jiǎng)
uni.reLaunch({
url: '/pages/return-visit/index'
})
} else {
// uni.showToast({
// title: "您已經(jīng)參與過(guò)抽獎(jiǎng)！",
// icon: "none",
// duration: 3000
// });
}
}
}
let user = uni.getStorageSync('userInfo')
console.log('user=' + JSON.stringify(user))
this.popupShow = false;
this.avatar = user.avatar
this.nickname = user.nickname
} else {
this.popupShow = true;
this.wxLogin()
}
},
mounted() {
},
watch: {},
computed: {
showFlags() {
return this.$store.state.showFlag
},
},
created() {
},
methods: {
/*查詢用戶有沒(méi)有抽過(guò)獎(jiǎng)*/
getLottery() {
let that = this;
return new Promise((resolve, reject) => {
uni.request({
url: this.$A.lottery.find,
method: "POST",
data: {
userPhone: uni.getStorageSync("userPhone")
},
success: (res) => {
resolve(res)
},
fail: (err) => {
// console.log(err.data)
},
complete: (end) => {
// console.log(end)
}
})
})
},
/*拒絕提供用戶信息*/
refuse() {
this.popupShows = false;
this.popupShow = true;
},
/*拉去樁詳情*/
getPileDetail() {
uni.request({
url: this.$A.picture.getPicture,
method: "POST",
data: {
erpCode: this.$store.state.currentSelectPile.erpCode
},
success: (res) => {
this.$store.commit('setCurrentPile', res.data.data)
this.currentPile = res.data.data
},
fail: (err) => {
// console.log(err.data)
},
complete: (end) => {
// console.log(end)
}
})
},
/*馬上分享*/
showTips() {
this.popupShowes = true;
// uni.navigateTo({ //encodeURIComponent(JSON.stringify(item))
// url: `/pages/bill/web-view?pileName=${this.currentPile.pileName}&pileUrl=${this.currentPile.filePath}&avatar=${this.avatar}&nickname=${this.nickname}`,
// });
},
popup() {
},
/*撥打電話*/
callPhone() {
uni.makePhoneCall({
phoneNumber: '4006596580' //僅為示例
});
},
/*同意*/
agree() {
this.popupShow = false;
},
// 獲取用戶手機(jī)號(hào)
getPhoneNumber(e, type) { // 參數(shù)encryptedData
console.log(e)
this.pageType = type;
if (e.detail.errMsg == "getPhoneNumber:ok") { // 用戶允許或去手機(jī)號(hào)
uni.showLoading({
title: '授權(quán)中...',
mask: true,
});
this.login(e.detail);
}
},
/*獲取手機(jī)號(hào)碼*/
login(data) {
uni.request({
url: this.$A.getPhone.main,
method: "POST",
data: {
encryptedData: data.encryptedData,
iv: data.iv,
code: this.jsCode
},
success: (res) => {
let phoneNum = JSON.parse(res.data.data.userPhone).phoneNumber
uni.setStorageSync('userPhone', phoneNum)
this.mobile = JSON.parse(res.data.data.userPhone).phoneNumber
this.nickFlag = true;
},
fail: (err) => {
uni.showToast({
title: "登錄失?。?,
icon: "error"
});
// console.log(err.data)
},
complete: (end) => {
// console.log(end)
uni.hideLoading()
}
})
},
//登錄---目的拿到code
wxLogin() {
let _this = this
// 獲取登錄用戶code
uni.login({
provider: 'weixin',
success: function(res) {
console.log(res)
if (res.code) {
_this.jsCode = res.code;
console.log('jsCode=' + res.code)
} else {
// uni.showToast({
// title: '獲取logon_code失敗',
// duration: 2000
// })
_this.wxLogin()
}
},
fail: (res) => {
// uni.showToast({
// title: '獲取logon_code失敗',
// duration: 2000
// })
_this.wxLogin()
}
})
},
/*選擇頭像*/
chooseavatar(e) {
console.log(e)
let that = this;
uni.uploadFile({
url: this.$A.picture.uploadFile, //
filePath: e.detail.avatarUrl,
name: 'file',
formData: {
mobile: that.mobile
},
success: r => {
let imgData = JSON.parse(r.data)
this.avatar = imgData.data.headImg;
}
});
},
/*提交用戶昵稱頭像*/
getUserInfo() {
let that = this;
this.popupShow = false;
this.popupShows = true;
if (this.avatar == "") {
uni.showToast({
title: '請(qǐng)選擇頭像',
icon: 'none'
})
return
}
// 坑，，，點(diǎn)擊昵稱后，開(kāi)發(fā)者工具上 一直提示 昵稱是空，但是 真機(jī)上 是正常的
if (this.nickname == "") {
uni.showToast({
title: '請(qǐng)編輯用戶昵稱',
icon: 'none'
})
return
}
uni.setStorageSync("userInfo", {
avatar: this.avatar,
nickname: this.nickname
})
this.popupShow = false;
this.popupShows = false;
},
/*分享朋友圈*/
goShareFri() {
this.$store.commit("setShowFlag", true)
this.popupShowes = false;
uni.navigateTo({ //encodeURIComponent(JSON.stringify(item))
url: `/pages/bill/web-view?pileName=${this.currentPile.pileName}&pileUrl=${this.currentPile.filePath}&avatar=${this.avatar}&nickname=${this.nickname}`,
});
},
/*點(diǎn)擊分享朋友*/
shareFriend() {
this.$store.commit("setShowFlag", true)
this.popupShowes = false;
}
}
}
</script>
<style lang="less">
page {
width: 100%;
height: 100vh;
box-sizing: border-box;
background: url('https://img.cdn.wxzhida.cn/zd-mini-lottery/billbg.png');
background-size: 100% 100%;
}
.cx_content_bill {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 999999;
}
.cx_pile_status {
position: absolute;
top: 58rpx;
left: 50%;
width: 316rpx;
height: 440rpx;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.lottery-cover-img {
width: 100%;
height: 100%;
}
.cx_pileType {
height: 44rpx;
font-size: 32rpx;
font-weight: 600;
color: #FFFFFF;
line-height: 44rpx;
letter-spacing: 8rpx;
text-align: center;
width: 100%;
position: absolute;
top: 608rpx;
}
.cx_pile_pay {
font-size: 32rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 26rpx;
letter-spacing: 2rpx;
position: absolute;
top: 724rpx;
width: 100%;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
.cx_pile_titleA {
width: 100%;
font-size: 52rpx;
font-weight: 600;
color: #FFFFFF;
text-align: center;
line-height: 74rpx;
letter-spacing: 2rpx;
position: absolute;
top: 768rpx;
}
.cx_pile_titleB {
width: 100%;
height: 156rpx;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
letter-spacing: 4rpx;
text-align: center;
position: absolute;
top: 1002rpx;
line-height: 38rpx;
}
.cx_pile_logo {
width: 116rpx;
height: 24rpx;
background: url('https://img.cdn.wxzhida.cn/zd-mini-lottery/zd.png');
background-size: 100% 100%;
position: absolute;
top: 1336rpx;
left: 50%;
transform: translateX(-50%);
}
.cx_pile_share {
width: 200rpx;
height: 60rpx;
box-sizing: border-box;
background: linear-gradient(205deg, #F380F2 0%, #51D2EC 100%);
border-radius: 29rpx;
position: absolute;
top: 1238rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28rpx;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
}
.cx_pile_shareIma {
width: 28rpx;
height: 30rpx;
background: url('https://img.cdn.wxzhida.cn/zd-mini-lottery/hy-share.png');
background-size: 100% 100%;
}
.cx_nick_img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
position: absolute;
top: 882rpx;
left: 50%;
overflow: hidden;
transform: translateX(-50%);
}
.cx_popup {
width: 100%;
padding: 40rpx 50rpx 60rpx 54rpx;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.cx_popupss {
width: 100%;
padding: 60rpx 180rpx 100rpx 180rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
font-size: 24rpx;
font-weight: 400;
color: #000000;
letter-spacing: 2rpx;
}
.wechatA {
width: 118rpx;
height: 118rpx;
background: url('https://img.cdn.wxzhida.cn/zd-mini-lottery/wechatC.png');
background-size: 100% 100%;
}
.wechatB_A{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.shareBtn {
width: 100%;
height: 100%;
border: 0 rpx solid transparent;
}
.wechatB {
width: 118rpx;
height: 118rpx;
background: url('https://img.cdn.wxzhida.cn/zd-mini-lottery/wechatD.png');
background-size: 100% 100%;
}
.cx_popup_cancle {
width: 100%;
text-align: center;
margin-bottom: 30rpx;
}
.cx_popup_title {
height: 50rpx;
width: 100%;
text-align: center;
font-size: 36rpx;
font-weight: 600;
color: #000000;
line-height: 50rpx;
margin-bottom: 30rpx;
}
.cx_popup_content {
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 40rpx;
}
.cx_popup_btn {
width: 510rpx;
height: 90rpx;
background: #000000;
border-radius: 45rpx;
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin-top: 38rpx;
}
.tui-modal-custom {
width: 100%;
height: 800rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.getnickbox {
padding: 40rpx 20rpx;
.flex_align_center {
display: flex;
align-items: center;
}
.fixedBtn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-top: 50rpx;
.user-info {
color: #07C160;
width: 180rpx;
height: 64rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
border: 1rpx solid #07C160;
border-radius: 10rpx;
}
.user-priamy {
width: 180rpx;
height: 64rpx;
border-radius: 10rpx;
margin-left: 50rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #07C160;
color: #FFFFFF;
}
}
.logoimg {
width: 50rpx;
height: 50rpx;
}
.name {
margin-left: 20rpx;
}
.m1 {
font-weight: 500;
}
.m2 {
padding-bottom: 30rpx;
border-bottom: 1rpx solid #f2f2f2;
color: #999;
padding-top: 10rpx;
font-size: 24rpx;
}
.xin1 {
border-bottom: 1rpx solid #f2f2f2;
margin-bottom: 30rpx;
.flex_spacebetween {
display: flex;
justify-content: space-between;
}
.toubox {
padding: 10rpx 0;
.t1 {
font-size: 28rpx;
margin-right: 30rpx;
}
.avatarbox {
width: 100rpx;
height: 100rpx;
border-radius: 20rpx;
}
.avatarimg {
width: 100rpx;
height: 100rpx;
border-radius: 20rpx;
}
}
}
.buttoncss {
background-color: #fff;
border-radius: 0px;
border: 0rpx solid transparent;
}
button::after {
border: 0px solid rgba(0, 0, 0, .2);
}
.nick {
padding-bottom: 30rpx;
border-bottom: 2rpx solid #f2f2f2;
display: flex;
align-items: center;
padding-left: 14px;
padding-right: 14px;
.n1 {
font-size: 28rpx;
margin-right: 30rpx;
}
}
.mt30 {
margin-top: 30rpx;
}
}
button::after {
border: none;
}
</style>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-511840.html
到了這里，關(guān)于uniapp微信小程序最新獲取昵稱和頭像的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
