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.
440 lines
12 KiB
440 lines
12 KiB
<template>
|
|
<view class="userInfo">
|
|
<view class="my-message">
|
|
<view class="dim-div"></view>
|
|
<view class="user-info-content">
|
|
<view class="left">
|
|
<image :src="userInfo.img" mode=""></image>
|
|
</view>
|
|
<view class="right">
|
|
<view class="username" v-if="userInfo.username">{{userInfo.username}}</view>
|
|
<view class="login-btn uni-primary" v-else @click="$noMultipleClicks(getUserInfoLogin)">点击登录</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="prominent-menu">
|
|
<view class="prominent-menu-item collect-menu" @click="toLinkAuth('/pages/userInfo/myCollection/myCollection')">
|
|
<view class="prominent-menu-title">我的收藏</view>
|
|
<view class="prominent-menu-icon">
|
|
<uni-icons custom-prefix="iconfont" type="icon-wodeshoucang"size="40" :color="primaryColor" />
|
|
</view>
|
|
</view>
|
|
<!-- <view class="prominent-menu-item collect-menu" @click="toLinkAuth('/pages/userInfo/aiPaint/aiPaint')">
|
|
<view class="prominent-menu-title">创作工坊</view>
|
|
<view class="prominent-menu-icon">
|
|
<uni-icons custom-prefix="iconfont" type="icon-wodeshoucang"size="40" :color="primaryColor" />
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="list-menu">
|
|
<view class="list-menu-item" v-for="item in menus" @click="toLink(item.url)">
|
|
<uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="item.icon" size="20" :color="primaryColor"></uni-icons>
|
|
<view class="text">{{item.title}}</view>
|
|
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="share-box">
|
|
<button title="联系我们" @click="$noMultipleClicks(linkToUs)">
|
|
<view class="list-menu-item">
|
|
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-zhifeiji" size="20" :color="primaryColor" />
|
|
<view class="text">联系我们</view>
|
|
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
|
|
</view>
|
|
</button>
|
|
|
|
<button title="分享" open-type="share">
|
|
<view class="list-menu-item">
|
|
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-fenxiang1" size="20" :color="primaryColor" />
|
|
<view class="text">分享</view>
|
|
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
|
|
</view>
|
|
</button>
|
|
<button title="我的会员" @click="toLink('/pages/userInfo/vip/vip')">
|
|
<view class="list-menu-item">
|
|
<uni-icons class="list-menu-icon" type="vip" size="20" :color="primaryColor" />
|
|
<view class="text">我的会员</view>
|
|
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
|
|
</view>
|
|
</button>
|
|
<button title="兑换绘画次数" @click="$noMultipleClicks(useCdk)">
|
|
<view class="list-menu-item">
|
|
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-gengduo" size="20" :color="primaryColor" />
|
|
<view class="text">兑换绘画次数</view>
|
|
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
|
|
</view>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {loginTiktok} from '@/api/auth.js'
|
|
import {useCdk} from '@/api/paint.js'
|
|
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons";
|
|
export default {
|
|
components: {UniIcons},
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
noClick:true, //防止重复提交,
|
|
primaryColor: "#1a94bc",
|
|
menus: [
|
|
{
|
|
title: "常见问题",
|
|
icon: "icon-wenti-",
|
|
url: "/pages/userInfo/question/question"
|
|
},
|
|
{
|
|
title: "设置",
|
|
icon: "icon-chilun",
|
|
url: "/pages/userInfo/setting/setting"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onShow(){
|
|
this.userInfo = uni.getStorageSync('userInfo')
|
|
},
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') { // 来自页面内分享按钮
|
|
// console.log(res)
|
|
}
|
|
return {
|
|
title: '想要好看的图片就来[次元意境]吧!',
|
|
path: `/pages/index/index?id=${this.userInfo.id}`
|
|
}
|
|
},
|
|
methods: {
|
|
loginFunc(res, userInfo) {
|
|
const params = {
|
|
code: res.code,
|
|
encryptedData: userInfo.encryptedData,
|
|
iv: userInfo.iv
|
|
}
|
|
// 用户授权登录
|
|
loginTiktok(params).then(res => {
|
|
if (res.data.code === 200) {
|
|
uni.setStorage({
|
|
key: 'userInfo',
|
|
data: res.data.data.userInfo,
|
|
})
|
|
//设置数据供页面展示头像，名称等
|
|
this.userInfo = res.data.data.userInfo;
|
|
console.log('this.userInfo',this.userInfo)
|
|
uni.setStorage({
|
|
key: 'token',
|
|
data: res.data.data.access_token,
|
|
success() {
|
|
uni.showToast({
|
|
title: '登录成功!',
|
|
icon: 'none',
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}).catch(res => {})
|
|
},
|
|
// 获取用户信息
|
|
getUserInfoLogin() {
|
|
uni.getSetting({
|
|
success: (settingObj) => {
|
|
if (settingObj.authSetting['scope.userInfo'] === undefined || settingObj.authSetting['scope.userInfo']) {
|
|
uni.login({
|
|
force: true,
|
|
success: (res) => {
|
|
uni.getUserInfo({
|
|
withCredentials: true,
|
|
success: (userInfo) => {
|
|
this.loginFunc(res, userInfo)
|
|
},
|
|
})
|
|
},
|
|
})
|
|
} else {
|
|
uni.showModal({
|
|
title: '您已拒绝授权用户信息',
|
|
content: '是否进入权限管理，调整授权？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
uni.openSetting({
|
|
success: (settingRes) => {
|
|
if (settingRes.authSetting['scope.userInfo']) {
|
|
uni.login({
|
|
force: true,
|
|
success: (res) => {
|
|
uni.getUserInfo({
|
|
withCredentials: true,
|
|
success: (userInfo) => {
|
|
this.loginFunc(res, userInfo)
|
|
},
|
|
})
|
|
},
|
|
})
|
|
}
|
|
},
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
share() {
|
|
|
|
},
|
|
toLink(url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
});
|
|
},
|
|
toLinkAuth(url) {
|
|
if (this.userInfo) {
|
|
uni.navigateTo({
|
|
url: url
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: '请先登录',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
//打开抖音关注页
|
|
linkToUs(){
|
|
uni.showToast({
|
|
title: '关注次元意境抖音官方账号即可',
|
|
icon: 'none'
|
|
})
|
|
//tt.openAwemeUserProfile(options);
|
|
//console.log('options',options)
|
|
},
|
|
|
|
//兑换绘画次数
|
|
useCdk(){
|
|
let that = this;
|
|
uni.showModal({
|
|
title:'提示',
|
|
editable: true,
|
|
placeholderText:'请输入兑换cdk',
|
|
success(response) {
|
|
console.log('response',response);
|
|
if(response.confirm){
|
|
//点击确定
|
|
//调用使用cdk方法
|
|
const data = {
|
|
cdk: response.content,
|
|
userId: that.userInfo.id,
|
|
source: '1',
|
|
appType: '0'
|
|
}
|
|
useCdk(data).then(res =>{
|
|
console.log('res',res);
|
|
if(res.data.code != 200){
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}else{
|
|
uni.showToast({
|
|
title: '兑换成功!',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
});
|
|
}
|
|
},
|
|
fail(res) {
|
|
uni.showToast({
|
|
title: '兑换失败!',
|
|
icon: 'none'
|
|
})
|
|
console.log('res',res);
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.userInfo {
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.my-message {
|
|
width: 100vw;
|
|
height: calc(20vh + 20rpx);
|
|
background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
|
|
position: relative;
|
|
|
|
.dim-div {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
/* 主要内容 */
|
|
background: rgba(26, 148, 188, .1);
|
|
/* 模糊大小就是靠的blur这个函数中的数值大小 */
|
|
backdrop-filter: blur(25rpx);
|
|
}
|
|
|
|
.user-info-content {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
.left {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin-right: 20rpx;
|
|
|
|
>image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background-image: linear-gradient(-225deg, #70dcc6 0%, #1a94bc 100%);
|
|
}
|
|
}
|
|
|
|
.right {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
|
|
.login-btn {
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.username {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-content {
|
|
width: 100vw;
|
|
min-height: calc(100vh - 20vh);
|
|
background: $uni-bg-color;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
position: absolute;
|
|
top: calc(20vh);
|
|
left: 0;
|
|
right: 0;
|
|
padding: 20rpx;
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
|
|
|
.prominent-menu {
|
|
height: 120rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.prominent-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
//此处等右边有新模块的时候再采用下面的width
|
|
//width: calc(50% - 10rpx);
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
|
|
padding: 20rpx 10rpx 20rpx 30rpx;
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
|
|
|
.prominent-menu-title {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.prominent-menu-icon {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.list-menu {
|
|
margin-top: 20rpx;
|
|
padding: 0 20rpx;
|
|
background-color: $uni-white;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.list-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-bottom: 2rpx solid $uni-border-2;
|
|
|
|
.list-menu-icon{
|
|
color: $uni-primary;
|
|
}
|
|
|
|
.text {
|
|
font-size: 26rpx;
|
|
line-height: 80rpx;
|
|
width: calc(100% - 100rpx);
|
|
}
|
|
|
|
.list-menu-genduo{
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.list-menu-item:first-child {
|
|
}
|
|
|
|
.list-menu-item:last-child {
|
|
border-bottom: 0 !important;
|
|
}
|
|
|
|
.share-box {
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
|
|
>button {
|
|
background: $uni-white;
|
|
outline: none;
|
|
font-size: 26rpx;
|
|
text-align: left;
|
|
line-height: 14px;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|