677 lines
16 KiB
Vue
677 lines
16 KiB
Vue
<template>
|
||
<view class="back" @click="goGame">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/back.png" mode="widthFix"></image>
|
||
</view>
|
||
<scroll-view scroll-y>
|
||
<view class="top">
|
||
<view class="balance">
|
||
<view class="price-bck">
|
||
<view class="logo-bck">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-橡果.png" mode="widthFix"></image>
|
||
</view>
|
||
{{userinfo.amount}}
|
||
</view>
|
||
</view>
|
||
<view class="avatar-group">
|
||
<view class="avatar">
|
||
<!-- #ifdef H5 -->
|
||
<image :src="avatar" mode="heightFix"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button open-type="chooseAvatar" @chooseavatar="avatarHandler" class="avatar-btn">
|
||
<image :src="avatar" mode="heightFix"></image>
|
||
</button>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="margin-top: -30px;" class="my-bck">
|
||
<view class="center-circle">
|
||
<view class="circle-left">
|
||
</view>
|
||
<view class="circle-center">
|
||
</view>
|
||
<view class="circle-right">
|
||
</view>
|
||
</view>
|
||
<view class="center-content">
|
||
<view class="nickname">
|
||
{{userinfo.name}}
|
||
<image v-if="JSON.stringify(userinfo) !== '{}'" @click="openPopupUseredit"
|
||
src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/edit.png" mode="widthFix"></image>
|
||
</view>
|
||
<view v-if="JSON.stringify(userinfo) !== '{}'" class="userid">
|
||
ID:{{userinfo.id}}
|
||
</view>
|
||
<view class="content-menu">
|
||
<view @click="openPopupMycoin">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-我的硬币.png" mode="widthFix"></image>
|
||
<text>我的硬币</text>
|
||
</view>
|
||
<view @click="openPopupRank">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-排行榜.png" mode="widthFix"></image>
|
||
<text>排行榜</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pd-25">
|
||
<view class="menu-list">
|
||
<view class="list-item" @click="openPopupLearning">
|
||
<view class="item-left">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-新手教程.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item-center">
|
||
新手教程
|
||
</view>
|
||
<view class="item-right">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="list-item" @click="openPopupShare">
|
||
<view class="item-left">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-邀请好友.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item-center">
|
||
邀请好友
|
||
</view>
|
||
<view class="item-right">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="list-item">
|
||
<button open-type="contact" bindcontact="handleContact" hover-class="none" class="contact-kefu">
|
||
<view class="item-left">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-联系客服.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item-center">
|
||
联系客服
|
||
</view>
|
||
<view class="item-right">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||
</view>
|
||
</button>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="list-item" @click="openPopupShequ">
|
||
<view class="item-left">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon社区号.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item-center">
|
||
社区号
|
||
</view>
|
||
<view class="item-center item-shequ">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/logo-微信.png" mode="widthFix"></image>
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/logo-qq.png" mode="widthFix"></image>
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/logo-抖音.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item-right">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="list-item" @click="openPopupSetSystem">
|
||
<view class="item-left">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/set.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item-center">
|
||
设置
|
||
</view>
|
||
<view class="item-right">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="list-item" @click="openPopupContactus">
|
||
<view class="item-left">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-联系我们.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item-center">
|
||
联系我们
|
||
</view>
|
||
<view class="item-right">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- #ifdef H5 -->
|
||
<view v-if="!proxy.$wx || !app.isWechat()" class="back-login">
|
||
<view class="back-btn" @click="logout">
|
||
退出登录
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
<!-- 弹窗：我的硬币 -->
|
||
<popup-mycoin ref="pMycoin"></popup-mycoin>
|
||
<!-- 弹窗：排行榜 -->
|
||
<popup-rank ref="pRank"></popup-rank>
|
||
|
||
<!-- 弹窗：新手教程 -->
|
||
<popup-learning ref="pLearning"></popup-learning>
|
||
<!-- 弹窗：邀请好友 -->
|
||
<popup-share ref="pShare"></popup-share>
|
||
<!-- 弹窗：社区号 -->
|
||
<popup-shequ ref="pShequ"></popup-shequ>
|
||
<!-- 弹窗：设置 -->
|
||
<popup-setsystem ref="pSetsystem"></popup-setsystem>
|
||
<!-- 弹窗：联系我们 -->
|
||
<popup-contactus ref="pContactus"></popup-contactus>
|
||
<!-- 弹窗：修改昵称 -->
|
||
<popup-useredit ref="pUseredit" @closeEdit="closeEdit"></popup-useredit>
|
||
|
||
</template>
|
||
<script>
|
||
// #ifdef MP-WEIXIN
|
||
export default {
|
||
onShareAppMessage() {
|
||
let user = getApp().globalData.userinfo,
|
||
path = '/pages/game/game'
|
||
if ('code' in user) {
|
||
path += '?scene=' + user.code
|
||
}
|
||
return {
|
||
title: '快来一起寻宝吧～',
|
||
path: path
|
||
}
|
||
}
|
||
}
|
||
// #endif
|
||
</script>
|
||
<script setup>
|
||
import {
|
||
nextTick
|
||
} from 'vue';
|
||
const app = getApp()
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
getCurrentInstance
|
||
} from 'vue'
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance() // 全局对象
|
||
/* 一系列窗口对象 */
|
||
const pMycoin = ref() // 我的硬币
|
||
const pRank = ref() // 排行榜
|
||
const pLearning = ref() // 新手教程
|
||
const pShare = ref() // 邀请好友
|
||
const pShequ = ref() // 社区
|
||
const pSetsystem = ref() // 系统设置
|
||
const pContactus = ref() // 联系我们
|
||
const pUseredit = ref()
|
||
|
||
const userinfo = ref(app.globalData.userinfo)
|
||
const avatar = ref(app.globalData.userinfo.avatar)
|
||
// #ifdef MP-WEIXIN
|
||
const avatarHandler = (e) => {
|
||
console.log(e);
|
||
uni.uploadFile({
|
||
url: app.globalData.requestUrl + '/api/file/upload',
|
||
filePath: e.detail.avatarUrl,
|
||
name: 'file',
|
||
success(res) {
|
||
let data = JSON.parse(res.data)
|
||
if (data.code !== 200) {
|
||
uni.showToast({
|
||
title: '上传失败，请重试',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/save/avatar',
|
||
data: {
|
||
avatar: data.data[0]
|
||
},
|
||
method: 'POST',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (res) => {
|
||
if (res.data.code === 200) {
|
||
uni.showToast({
|
||
title: '头像修改成功',
|
||
icon: 'none'
|
||
});
|
||
app.globalData.userinfo.avatar = data.data[0];
|
||
avatar.value = data.data[0];
|
||
} else {
|
||
uni.showToast({
|
||
title: '上传失败，请重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
complete: () => {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
console.log('上传完成', res);
|
||
},
|
||
fail(err) {
|
||
console.log('err', err)
|
||
}
|
||
})
|
||
}
|
||
// #endif
|
||
const closeEdit = (e) => {
|
||
if (!e) return
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (res) => {
|
||
if (res.data.code === 200) {
|
||
app.globalData.userinfo = res.data.data
|
||
userinfo.value = res.data.data
|
||
} else {
|
||
uni.showToast({
|
||
title: '获取用户信息失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
const logout = () => {
|
||
// #ifdef H5
|
||
if (proxy.$wx && app.isWechat()) return
|
||
uni.showModal({
|
||
title: '确认退出登录吗？',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.removeStorageSync('jinxiangguo_login_token') // 移除token，刷新页面
|
||
location.reload()
|
||
}
|
||
}
|
||
})
|
||
// #endif
|
||
}
|
||
const openPopupUseredit = () => {
|
||
app.playAudio()
|
||
pUseredit.value.open()
|
||
}
|
||
// 打开我的硬币弹窗
|
||
const openPopupMycoin = () => {
|
||
app.playAudio()
|
||
pMycoin.value.open()
|
||
}
|
||
// 打开排行榜弹窗
|
||
const openPopupRank = () => {
|
||
app.playAudio()
|
||
pRank.value.open()
|
||
}
|
||
// 打开新手教程弹窗
|
||
const openPopupLearning = () => {
|
||
app.playAudio()
|
||
pLearning.value.open()
|
||
}
|
||
// 打开邀请好友弹窗
|
||
const openPopupShare = () => {
|
||
app.playAudio()
|
||
pShare.value.open()
|
||
}
|
||
// 打开社区号弹窗
|
||
const openPopupShequ = () => {
|
||
app.playAudio()
|
||
pShequ.value.open()
|
||
}
|
||
// 打开系统设置弹窗
|
||
const openPopupSetSystem = () => {
|
||
app.playAudio()
|
||
pSetsystem.value.open()
|
||
}
|
||
// 打开联系我们弹窗
|
||
const openPopupContactus = () => {
|
||
app.playAudio()
|
||
pContactus.value.open()
|
||
}
|
||
|
||
const goGame = () => {
|
||
app.playAudio()
|
||
uni.navigateBack()
|
||
}
|
||
const getUser = () => {
|
||
uni.showLoading()
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (res) => {
|
||
if (res.data.code === 200) {
|
||
app.globalData.userinfo = res.data.data
|
||
userinfo.value = res.data.data
|
||
} else {
|
||
uni.showToast({
|
||
title: '获取用户信息失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
complete: () => {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
}
|
||
onMounted(() => {
|
||
// #ifdef H5
|
||
if (!app.globalData.token) {
|
||
uni.redirectTo({
|
||
url: '/pages/index/index'
|
||
})
|
||
return
|
||
}
|
||
if (JSON.stringify(app.globalData.userinfo) !== '{}') return
|
||
getUser()
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
// await app.globalData.loginPromise // 等待登录完毕
|
||
if (app.globalData.unionid) {
|
||
if (JSON.stringify(app.globalData.userinfo) !== '{}') return
|
||
getUser()
|
||
} else {
|
||
app.callback = res => {
|
||
if (JSON.stringify(app.globalData.userinfo) !== '{}') return
|
||
getUser()
|
||
}
|
||
}
|
||
// #endif
|
||
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.contact-kefu {
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 0;
|
||
line-height: 1;
|
||
font-size: 16px;
|
||
background-color: transparent;
|
||
}
|
||
.contact-kefu::after {
|
||
border: none;
|
||
}
|
||
.avatar-btn {
|
||
width: 100px;
|
||
height: 100px;
|
||
padding: 0;
|
||
}
|
||
.balance {
|
||
padding: 10px;
|
||
}
|
||
.price-bck image {
|
||
width: 18px;
|
||
}
|
||
|
||
.logo-bck {
|
||
height: 26px;
|
||
width: 26px;
|
||
background: #C4FF46;
|
||
border-radius: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.price-bck {
|
||
height: 26px;
|
||
background: rgba(255, 255, 255, .8);
|
||
border-radius: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-right: 10px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
font-family: Noto Sans S Chinese;
|
||
}
|
||
.back-btn {
|
||
background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
|
||
border-radius: 25px;
|
||
height: 50px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.back-login {
|
||
display: flex;
|
||
padding: 10px;
|
||
}
|
||
|
||
.item-shequ image:first-child {
|
||
width: 24px;
|
||
height: auto;
|
||
}
|
||
|
||
.item-shequ image:last-child {
|
||
width: 22px;
|
||
height: auto;
|
||
}
|
||
|
||
.item-shequ image {
|
||
margin: 0 4px;
|
||
}
|
||
|
||
.item-shequ {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.item-right image {
|
||
width: 10px !important;
|
||
height: auto;
|
||
}
|
||
|
||
.item-right {
|
||
padding: 5px;
|
||
}
|
||
|
||
.item-center {
|
||
flex: 1;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.list-item view {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.list-item image {
|
||
width: 20px;
|
||
height: auto;
|
||
}
|
||
|
||
.list-item {
|
||
display: flex;
|
||
padding: 15px;
|
||
}
|
||
|
||
.menu-list {
|
||
border-radius: 15px;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
margin: 10px;
|
||
}
|
||
|
||
.pd-25 {
|
||
width: 100%;
|
||
}
|
||
|
||
.content-menu image {
|
||
width: 18px;
|
||
height: auto;
|
||
}
|
||
|
||
.content-menu view text {
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.content-menu view {
|
||
height: 78px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
border-radius: 15px;
|
||
margin: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.content-menu view:first-child {
|
||
background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
|
||
|
||
}
|
||
|
||
.content-menu view:last-child {
|
||
background-color: #000;
|
||
color: #fff;
|
||
}
|
||
|
||
.content-menu {
|
||
display: flex;
|
||
width: 100%;
|
||
}
|
||
|
||
.userid {
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
padding: 5px;
|
||
}
|
||
|
||
.nickname image {
|
||
width: 20px;
|
||
height: auto;
|
||
}
|
||
|
||
.nickname {
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
line-height: 42px;
|
||
text-align: end;
|
||
}
|
||
|
||
.center-content {
|
||
background: linear-gradient(182.09deg, #FFFDD8 -0.23%, #FFFFFF 91.61%);
|
||
height: calc(100vh - 235px);
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding: 15px;
|
||
}
|
||
|
||
|
||
|
||
|
||
.circle-left {
|
||
width: calc(100% / 2 - 43px);
|
||
background: #FFFDD8;
|
||
height: calc(100% + 2px);
|
||
top: -1px;
|
||
border-radius: 15px 22px 0 0;
|
||
position: absolute;
|
||
}
|
||
.circle-center {
|
||
width: 92px;
|
||
height: 36px;
|
||
position: absolute;
|
||
left: calc(50% - 46px);
|
||
background: radial-gradient(circle at 50% -22px, transparent, transparent 56px, #FFFDD8 56px);
|
||
}
|
||
.center-circle {
|
||
display: flex;
|
||
position: relative;
|
||
height: 35px;
|
||
}
|
||
.circle-right {
|
||
position: absolute;
|
||
height: 100%;
|
||
right: 0;
|
||
height: calc(100% + 2px);
|
||
top: -1px;
|
||
width: calc(100% / 2 - 43px);
|
||
border-radius: 22px 15px 0 0;
|
||
background: #FFFDD8;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.avatar image {
|
||
height: 100%;
|
||
}
|
||
|
||
.avatar {
|
||
border-radius: 50px;
|
||
border: 3px solid #000;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.avatar-group {
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 3px solid transparent;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
height: 200px;
|
||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/star1.png') no-repeat top 60px left calc(50% + 80px),
|
||
url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/star2.png') no-repeat top 107px left 83px;
|
||
background-size: 40px auto,
|
||
20px auto;
|
||
}
|
||
|
||
.back image {
|
||
width: 12px;
|
||
height: auto;
|
||
}
|
||
|
||
.back {
|
||
position: absolute;
|
||
z-index: 99999999;
|
||
left: 0;
|
||
/* #ifdef H5 */
|
||
top: 0;
|
||
/* #endif */
|
||
/* #ifdef MP-WEIXIN */
|
||
top: 34px;
|
||
/* #endif */
|
||
padding: 20px 10px 10px 20px;
|
||
}
|
||
|
||
scroll-view {
|
||
height: calc(100vh);
|
||
}
|
||
|
||
</style>
|
||
<style>
|
||
page {
|
||
background: linear-gradient(180deg, #FBC379 0%, #FFF500 40.82%) !important;
|
||
}
|
||
</style> |