优化代码
This commit is contained in:
@@ -1,101 +1,352 @@
|
||||
<script>
|
||||
import authUtil from '@/utils/auth.js'; // 引入工具类
|
||||
import userUtil from '@/utils/user.js'; // 引入工具类
|
||||
export default {
|
||||
globalData: {
|
||||
website: "https://www.lailab.cn/miniprogram",
|
||||
website: "https://www.lailab.cc:8080",
|
||||
hasUserInfo: false,
|
||||
userInfo: {},
|
||||
openId: null
|
||||
openId: null,
|
||||
defaultAuthCode: "D768ECAAB35C55ABBA071C5415D6520E",
|
||||
method: {
|
||||
getOpenId: "/api/wx/getOpenId",
|
||||
getUserByOpenId: "/api/user/getUserByOpenId",
|
||||
addUser: "/api/user/addUser",
|
||||
getConfigAll: "/api/pic/getPicAll",
|
||||
getAuthMd5Code: "/api/auth/getAuthMd5Code"
|
||||
},
|
||||
homePageData:{
|
||||
tip: {
|
||||
msg:"世上无难事，只要肯攀登。",
|
||||
isShow:true,
|
||||
level:2
|
||||
},
|
||||
swiper: {
|
||||
background: [
|
||||
{
|
||||
type:"color",
|
||||
background: "#0226",
|
||||
text:"广告位1",
|
||||
clickable:true,
|
||||
action:"dialog",
|
||||
content:"你点击了广告位1",
|
||||
|
||||
},
|
||||
{
|
||||
type:"image",
|
||||
background: "",
|
||||
mode:"scale",
|
||||
text:"广告位2",
|
||||
clickable:true,
|
||||
action:"goto",
|
||||
content:"/pages/utils/showImg/showImg"
|
||||
|
||||
},
|
||||
{
|
||||
type:"color",
|
||||
background: "#A70",
|
||||
text:"广告位3",
|
||||
clickable:true,
|
||||
action:"dialog",
|
||||
content:"你点击了广告位3"
|
||||
|
||||
}
|
||||
],
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 500,
|
||||
vertical: false,
|
||||
circular: true
|
||||
},
|
||||
pics: [
|
||||
{
|
||||
url:"https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422",
|
||||
source:"LaiLab",
|
||||
id:"1"
|
||||
},
|
||||
{
|
||||
url:"https://hellorfimg.zcool.cn/provider_image/large/hi2241910533.jpg?x-image-process=image/format,webp",
|
||||
source:"百度",
|
||||
id:"2"
|
||||
},
|
||||
{
|
||||
url:"https://c-ssl.dtstatic.com/uploads/blog/202403/13/0GSvde87c0G05zE.thumb.1000_0.jpg",
|
||||
source:"百度",
|
||||
id:"3"
|
||||
},
|
||||
{
|
||||
url:"https://img0.baidu.com/it/u=3815152378,1770089461&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
|
||||
source:"百度",
|
||||
id:"4"
|
||||
},
|
||||
{
|
||||
url:"https://img1.baidu.com/it/u=1046630760,1711311937&fm=253&app=138&f=JPEG?w=800&h=1428",
|
||||
source:"百度",
|
||||
id:"5"
|
||||
},
|
||||
{
|
||||
url:"https://c-ssl.dtstatic.com/uploads/blog/202312/04/0GSvVw6Xt0exN0g.thumb.1000_0.jpg",
|
||||
source:"百度",
|
||||
id:"6"
|
||||
},
|
||||
{
|
||||
url:"https://img0.baidu.com/it/u=41840629,336950107&fm=253&app=138&f=JPEG?w=500&h=1109",
|
||||
source:"百度",
|
||||
id:"7"
|
||||
},
|
||||
{
|
||||
url:"https://hellorfimg.zcool.cn/provider_image/large/hi2241910533.jpg?x-image-process=image/format,webp",
|
||||
source:"百度",
|
||||
id:"8"
|
||||
}
|
||||
]
|
||||
},
|
||||
morePageData:{
|
||||
tools: [
|
||||
{
|
||||
name:"Hello",
|
||||
cards:[
|
||||
{
|
||||
title:"测试",
|
||||
detail:"村上春树",
|
||||
color:"#aaa",
|
||||
icon:"../../static/icons/icon_qrcode.png",
|
||||
url:""
|
||||
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
onLaunch: function() {
|
||||
console.log("=== LaiLab小程序主页 ===");
|
||||
this.login();
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
const that = this
|
||||
if (this.globalData.hasUserInfo) {
|
||||
console.log("已获取用户信息");
|
||||
} else {
|
||||
//调用登录接口
|
||||
uni.login({
|
||||
success: function(res1) {
|
||||
// 获取个人 code
|
||||
uni.getUserInfo({
|
||||
success: res2 => {
|
||||
// 获取 OpenId
|
||||
wx.request({
|
||||
url: that.globalData.website +
|
||||
"/api/getOpenId.php",
|
||||
method: "POST",
|
||||
data: {
|
||||
code: res1.code,
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
},
|
||||
success: function(res3) {
|
||||
if (res3.data.result.openid) {
|
||||
that.globalData.openId = res3.data
|
||||
.result.openid;
|
||||
console.log("获取OpenId成功");
|
||||
uni.request({
|
||||
url: that.globalData
|
||||
.website +
|
||||
"/api/getUserInfo.php",
|
||||
method: 'POST',
|
||||
data: {
|
||||
openId: res3.data
|
||||
.result.openid
|
||||
},
|
||||
success(res4) {
|
||||
if (res4.data.err ==
|
||||
0) {
|
||||
console.log(
|
||||
"用户未注册");
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '检测到您尚未登录，某些工具可能无权使用，请先去登录。',
|
||||
confirmText: '去登陆',
|
||||
cancelText: '取消',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
that.userLogin();
|
||||
}
|
||||
}
|
||||
})
|
||||
} else if (res4.data
|
||||
.err == 1) {
|
||||
console.log(
|
||||
"用户已注册");
|
||||
that.globalData
|
||||
.userInfo =
|
||||
res4.data
|
||||
.result[0];
|
||||
that.globalData
|
||||
.hasUserInfo =
|
||||
true;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("获取OpenId失败", res3);
|
||||
}
|
||||
},
|
||||
fail: function(res3) {
|
||||
console.log("访问OpenId服务器失败", res);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function() {
|
||||
that.authorizeCheck("scope.userInfo");
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
console.log("调用登录服务失败", res);
|
||||
}
|
||||
})
|
||||
async login() {
|
||||
const that = this;
|
||||
const gData = this.globalData;
|
||||
|
||||
if (gData.hasUserInfo) {
|
||||
console.log("已获取用户信息，跳过登录流程");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("未获取用户信息，开始获取");
|
||||
|
||||
try {
|
||||
// 步骤1: 获取微信code
|
||||
const step1Result = await this.getWechatCode();
|
||||
|
||||
// 步骤2: 获取用户信息
|
||||
const step2Result = await this.getUserInfo();
|
||||
|
||||
// 步骤3: 获取OpenId
|
||||
console.log(`3.调用方法 ${gData.method.getOpenId} 开始 入参: ${step1Result.code}`);
|
||||
const openId = await userUtil.getOpenId(step1Result.code);
|
||||
console.log(`3.调用方法 ${gData.method.getOpenId} 结束 返回: ${openId}`);
|
||||
gData.openId = openId;
|
||||
|
||||
// 获取授权码
|
||||
var requestData_getAuth = {
|
||||
openId: gData.openId
|
||||
};
|
||||
console.log(`4.1 调用方法 ${gData.method.getAuthMd5Code} 开始 入参: ${JSON.stringify(requestData_getAuth)}`);
|
||||
var authCode = await authUtil.getAuthMd5Code(requestData_getAuth)
|
||||
console.log(`4.1 调用方法 ${gData.method.getAuthMd5Code} 结束 返回: ${authCode}`);
|
||||
// 若用户未注册，则以下步骤将都无法进行，所以填充默认授权码
|
||||
if(authCode===''||authCode===null){
|
||||
authCode = gData.defaultAuthCode;
|
||||
}
|
||||
|
||||
// 步骤4: 检查用户注册状态
|
||||
var requestData_checkUser = {
|
||||
openId: gData.openId,
|
||||
authCode: authCode
|
||||
};
|
||||
console.log(`4.2 调用方法 ${gData.method.getUserByOpenId} 开始 入参: ${JSON.stringify(requestData_checkUser)}`);
|
||||
const userData = await userUtil.checkUserStatus(requestData_checkUser);
|
||||
console.log(`4.2 调用根据 ${gData.method.getUserByOpenId} 结束 返回: ${isexist}`);
|
||||
const isexist = userData.data.code;
|
||||
switch (isexist) {
|
||||
case -1:
|
||||
console.log("用户未注册");
|
||||
this.handleUserNotRegistered();
|
||||
break;
|
||||
|
||||
case -2:
|
||||
console.error(`报错: ${userData.data.message}`);
|
||||
this.toast(userData.data.message || "查询用户信息失败", 'error');
|
||||
break;
|
||||
|
||||
case 0:
|
||||
console.log(`用户已注册,自动登录！用户信息: ${JSON.stringify(userData.data.data)}`);
|
||||
|
||||
gData.userInfo = userData.data.data;
|
||||
gData.hasUserInfo = true;
|
||||
this.toast("自动登录成功", 'success');
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn(`4.未知状态码: ${isexist}`);
|
||||
break;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("登录流程失败:", error);
|
||||
this.toast("登录失败，请重试", 'error');
|
||||
}
|
||||
},
|
||||
|
||||
// 步骤1: 获取微信code
|
||||
getWechatCode() {
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log("1.调用登录接口wx.login()开始");
|
||||
|
||||
uni.login({
|
||||
success: function(res) {
|
||||
console.log(`1.调用登录接口wx.login()结束 返回: ${JSON.stringify(res)}`);
|
||||
console.log(`1.返回参数: code=${res.code}`);
|
||||
resolve(res);
|
||||
},
|
||||
fail: function(res) {
|
||||
console.error(`1.调用微信接口wx.login()失败 返回: ${JSON.stringify(res)}`);
|
||||
reject(new Error("微信登录失败"));
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 步骤2: 获取用户信息
|
||||
getUserInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log("2.调用用户信息接口wx.getUserInfo()开始");
|
||||
|
||||
uni.getUserInfo({
|
||||
success: (res) => {
|
||||
console.log("2.调用用户信息接口wx.getUserInfo()结束 返回:", res);
|
||||
console.log("2.返回参数: userInfo=", res.userInfo);
|
||||
resolve(res);
|
||||
},
|
||||
fail: (res) => {
|
||||
console.error(`2.调用微信接口wx.getUserInfo()失败 返回: ${JSON.stringify(res)}`);
|
||||
this.authorizeCheck("scope.userInfo");
|
||||
reject(new Error("获取用户信息失败"));
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 处理用户未注册情况
|
||||
handleUserNotRegistered() {
|
||||
const that = this;
|
||||
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '检测到您尚未登录，某些工具可能无权使用，请先去登录。',
|
||||
confirmText: '去登陆',
|
||||
cancelText: '取消',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
console.log("用户选择去登录");
|
||||
that.userLogin();
|
||||
} else {
|
||||
console.log("用户点击取消");
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 用户登录（手动）
|
||||
async userLogin() {
|
||||
const that = this;
|
||||
const gData = this.globalData;
|
||||
|
||||
// 若用户未登录
|
||||
if (!gData.hasUserInfo) {
|
||||
this.toast("正在登录", 'loading');
|
||||
|
||||
try {
|
||||
// 获取详细用户信息
|
||||
const profile = await this.getUserProfileWithDesc();
|
||||
|
||||
gData.hasUserInfo = true;
|
||||
gData.userInfo = profile.userInfo;
|
||||
|
||||
this.toast("登录成功", 'success');
|
||||
|
||||
// 注册用户
|
||||
if (gData.openId) {
|
||||
console.log(`4.3 调用 ${gData.method.addUser} 开始 入参: ${profile.userInfo}`);
|
||||
const result = await userUtil.registerUser(profile.userInfo);
|
||||
console.log(`4.3 调用 ${gData.method.addUser} 结束 返回: ${result}`);
|
||||
|
||||
} else {
|
||||
console.warn("没有OpenId，无法注册用户");
|
||||
this.toast("登录异常，请重新进入小程序", 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// 跳转到个人中心
|
||||
uni.switchTab({
|
||||
url: '/pages/mine/mine'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("用户登录失败:", error);
|
||||
this.toast(error.message || "登录失败", 'error');
|
||||
}
|
||||
} else {
|
||||
this.toast("您已经登录", 'none');
|
||||
}
|
||||
},
|
||||
|
||||
// 获取用户详细信息（带描述）
|
||||
getUserProfileWithDesc() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getUserProfile({
|
||||
desc: "获取你的昵称、头像、地区及性别",
|
||||
success: resolve,
|
||||
fail: (res) => {
|
||||
reject(new Error("您拒绝了授权请求"));
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 授权检查
|
||||
authorizeCheck(scope) {
|
||||
console.log(`检查授权: ${scope}`);
|
||||
|
||||
uni.authorize({
|
||||
scope: scope,
|
||||
success: () => {
|
||||
console.log(`${scope} 授权成功`);
|
||||
},
|
||||
fail: () => {
|
||||
console.log(`${scope} 授权失败`);
|
||||
this.toast("需要授权才能使用完整功能", 'none');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Toast提示
|
||||
toast(title, icon = 'none', duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: icon,
|
||||
duration: duration
|
||||
});
|
||||
},
|
||||
|
||||
// 分享相关方法（保留原有逻辑）
|
||||
getRandomShareTitle: function() {
|
||||
var arr = [];
|
||||
|
||||
@@ -105,70 +356,25 @@
|
||||
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
},
|
||||
|
||||
getMainAppShare: function() {
|
||||
return {
|
||||
title: this.getRandomShareTitle(),
|
||||
path: '/pages/index/index',
|
||||
success: function(res) {
|
||||
// 转发成功
|
||||
console.log("分享成功");
|
||||
},
|
||||
fail: function(res) {
|
||||
// 转发失败
|
||||
console.log("分享失败");
|
||||
}
|
||||
}
|
||||
},
|
||||
userLogin() {
|
||||
const that = this;
|
||||
// 若用户未登录
|
||||
if (!that.globalData.hasUserInfo) {
|
||||
that.toast("正在登录", 'loading');
|
||||
uni.getUserProfile({
|
||||
desc: "获取你的昵称、头像、地区及性别",
|
||||
success: res => {
|
||||
that.globalData.hasUserInfo = true;
|
||||
that.globalData.userInfo = res.userInfo;
|
||||
that.toast("登录成功", 'success');
|
||||
uni.switchTab({
|
||||
url: '/pages/mine/mine'
|
||||
})
|
||||
const openId = that.globalData.openId;
|
||||
if (openId) {
|
||||
res.userInfo.openId = openId;
|
||||
uni.request({
|
||||
url: that.globalData.website + "/api/login.php",
|
||||
method: 'POST',
|
||||
data: res.userInfo,
|
||||
success(res) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: res.msg
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log("没有OpenId,请重新进入小程序");
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
that.toast("您拒绝了请求", 'error');
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.toast("您已经登录",'none');
|
||||
}
|
||||
},
|
||||
toast(title, icon) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: icon
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
/* 每个页面公共css */
|
||||
uni-page-body,
|
||||
html,
|
||||
body {
|
||||
|
||||
@@ -2,6 +2,7 @@ import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
|
||||
+2
-1
@@ -108,7 +108,8 @@
|
||||
"urlCheck" : false,
|
||||
"minified" : true
|
||||
},
|
||||
"usingComponents" : true
|
||||
"usingComponents" : true,
|
||||
"permission" : {}
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
|
||||
+12
@@ -96,6 +96,18 @@
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine/mine",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/test/test",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
+24
-8
@@ -94,20 +94,34 @@
|
||||
// 初始化左右盒子高度
|
||||
"leftH": 0,
|
||||
"rightH": 0,
|
||||
'tip': '',
|
||||
'swiper': '',
|
||||
'pics': ''
|
||||
tip: {},
|
||||
swiper: {
|
||||
background: [],
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 500,
|
||||
vertical: false,
|
||||
circular: true
|
||||
},
|
||||
pics:[]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const app = getApp();
|
||||
const gData = app.globalData;
|
||||
this.getDataByOnline();
|
||||
this.tip = gData.homePageData.tip;
|
||||
this.swiper = gData.homePageData.swiper;
|
||||
this.pics = gData.homePageData.pics;
|
||||
this.showPics();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
const that = this;
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.tip = {};
|
||||
this.swiper = {};
|
||||
//this.swiper = {};
|
||||
this.pics = '';
|
||||
setTimeout(function() {
|
||||
that.getDataByOnline();
|
||||
@@ -128,14 +142,15 @@
|
||||
methods: {
|
||||
getDataByOnline() {
|
||||
const that = this;
|
||||
uni.request({
|
||||
//console.log("tip:",this.tip);
|
||||
/*uni.request({
|
||||
url: 'https://www.lailab.cn/miniprogram/data.php?type=all',
|
||||
success(rst) {
|
||||
that.tip = rst.data.tip;
|
||||
that.swiper = rst.data.swiper;
|
||||
that.showPics();
|
||||
},
|
||||
});
|
||||
});*/
|
||||
},
|
||||
doList() {
|
||||
const that = this;
|
||||
@@ -179,7 +194,7 @@
|
||||
},
|
||||
showPics() {
|
||||
const that = this;
|
||||
uni.request({
|
||||
/*uni.request({
|
||||
url: "https://www.lailab.cn/miniprogram/pics.php?page=" + that.picPage + "&size=" + that
|
||||
.picSize,
|
||||
success(rst) {
|
||||
@@ -187,7 +202,8 @@
|
||||
that.pics = rst.data;
|
||||
that.doList();
|
||||
}
|
||||
})
|
||||
})*/
|
||||
that.doList()
|
||||
},
|
||||
showImg(pic) {
|
||||
uni.navigateTo({
|
||||
|
||||
+558
-289
@@ -1,169 +1,412 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="user-info" open-type="getUserInfo" @tap="login()">
|
||||
<view class="info-img">
|
||||
<view class="img-bg"></view>
|
||||
<image class="img-icon" :src="hasUserInfo?userInfo.avatarUrl:''" mode="cover"></image>
|
||||
<view class="mine-container">
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-card" @tap="handleUserCardClick">
|
||||
<view class="user-avatar-container">
|
||||
<view class="avatar-background"></view>
|
||||
<image
|
||||
class="user-avatar"
|
||||
:src="hasUserInfo ? userInfo.avatarUrl : '/static/icons/icon_default_avatar.png'"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="info-text">
|
||||
<text class="text-name">{{hasUserInfo?userInfo.nickName:"点击登录"}}</text>
|
||||
<view class="user-info-container">
|
||||
<text class="user-name">
|
||||
{{ hasUserInfo ? userInfo.nickName : "点击登录" }}
|
||||
</text>
|
||||
<text class="user-status" :class="{ 'status-logged': hasUserInfo }">
|
||||
{{ hasUserInfo ? "已登录" : "未登录" }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="items">
|
||||
<button class="item" open-type="contact">
|
||||
<image class="i-icon" src="/static/icons/icon_author_message.png" mode="widthFix"></image>
|
||||
<text class="i-name">联系作者</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
|
||||
<!-- 功能列表 -->
|
||||
<view class="function-list">
|
||||
<!-- 联系作者 -->
|
||||
<button class="function-item" open-type="contact" hover-class="item-hover">
|
||||
<view class="item-left">
|
||||
<image class="item-icon" src="/static/icons/icon_author_message.png" mode="widthFix"></image>
|
||||
<text class="item-text">联系作者</text>
|
||||
</view>
|
||||
<text class="iconfont icon-arrow-right item-arrow"></text>
|
||||
</button>
|
||||
<button class="item feedback" @tap="feedback()">
|
||||
<image class="i-icon" src="/static/icons/icon_feedback.png" mode="widthFix"></image>
|
||||
<text class="i-name">反馈问题</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
|
||||
<!-- 反馈问题 -->
|
||||
<button class="function-item" @tap="handleFeedback" hover-class="item-hover">
|
||||
<view class="item-left">
|
||||
<image class="item-icon" src="/static/icons/icon_feedback.png" mode="widthFix"></image>
|
||||
<text class="item-text">反馈问题</text>
|
||||
</view>
|
||||
<text class="iconfont icon-arrow-right item-arrow"></text>
|
||||
</button>
|
||||
<button class="item clearcatch" @tap="clearStorage()">
|
||||
<image class="i-icon" src="/static/icons/icon_clear_catch.png" mode="widthFix"></image>
|
||||
<text class="i-name">清理缓存</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
|
||||
<!-- 清理缓存 -->
|
||||
<button class="function-item" @tap="handleClearStorage" hover-class="item-hover">
|
||||
<view class="item-left">
|
||||
<image class="item-icon" src="/static/icons/icon_clear_catch.png" mode="widthFix"></image>
|
||||
<text class="item-text">清理缓存</text>
|
||||
</view>
|
||||
<text class="iconfont icon-arrow-right item-arrow"></text>
|
||||
</button>
|
||||
<button class="item devlog" @tap="log()">
|
||||
<image class="i-icon" src="/static/icons/icon_dev_log.png" mode="widthFix"></image>
|
||||
<text class="i-name">开发日志</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
|
||||
<!-- 开发日志 -->
|
||||
<button class="function-item" @tap="handleDevLog" hover-class="item-hover">
|
||||
<view class="item-left">
|
||||
<image class="item-icon" src="/static/icons/icon_dev_log.png" mode="widthFix"></image>
|
||||
<text class="item-text">开发日志</text>
|
||||
</view>
|
||||
<text class="iconfont icon-arrow-right item-arrow"></text>
|
||||
</button>
|
||||
<!-- <button class="item love" @tap="admire()">
|
||||
<image class="i-icon" src="/static/icons/icon_love.png" mode="widthFix"></image>
|
||||
<text class="i-name">捐赠作者</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
</button> -->
|
||||
<button class="item share" open-type="share">
|
||||
<image class="i-icon" src="/static/icons/icon_share.png" mode="widthFix"></image>
|
||||
<text class="i-name">分享好友</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
|
||||
<!-- 分享好友 -->
|
||||
<button class="function-item" open-type="share" hover-class="item-hover">
|
||||
<view class="item-left">
|
||||
<image class="item-icon" src="/static/icons/icon_share.png" mode="widthFix"></image>
|
||||
<text class="item-text">分享好友</text>
|
||||
</view>
|
||||
<text class="iconfont icon-arrow-right item-arrow"></text>
|
||||
</button>
|
||||
<button class="item" open-type="openSetting">
|
||||
<image class="i-icon" src="/static/icons/icon_setting.png" mode="widthFix"></image>
|
||||
<text class="i-name">功能设置</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
|
||||
<!-- 捐赠作者 -->
|
||||
<button class="function-item" @tap="handleAdmire" hover-class="item-hover">
|
||||
<view class="item-left">
|
||||
<image class="item-icon" src="/static/icons/icon_love.png" mode="widthFix"></image>
|
||||
<text class="item-text">捐赠作者</text>
|
||||
</view>
|
||||
<text class="iconfont icon-arrow-right item-arrow"></text>
|
||||
</button>
|
||||
|
||||
<!-- 功能设置 -->
|
||||
<button class="function-item" open-type="openSetting" hover-class="item-hover">
|
||||
<view class="item-left">
|
||||
<image class="item-icon" src="/static/icons/icon_setting.png" mode="widthFix"></image>
|
||||
<text class="item-text">功能设置</text>
|
||||
</view>
|
||||
<text class="iconfont icon-arrow-right item-arrow"></text>
|
||||
</button>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<button
|
||||
v-if="hasUserInfo"
|
||||
class="function-item logout-item"
|
||||
@tap="handleLogout"
|
||||
hover-class="item-hover"
|
||||
>
|
||||
<text class="logout-text">退出登录</text>
|
||||
</button>
|
||||
<view v-if="hasUserInfo" class="item singout" @tap="logout()">
|
||||
<text class="i-name singout-text">退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import authUtil from '@/utils/auth.js'; // 引入工具类
|
||||
|
||||
// 配置常量
|
||||
const CONFIG = {
|
||||
CONTACT: {
|
||||
EMAIL: "lailab_mail@126.com",
|
||||
QQ: "1694319867"
|
||||
},
|
||||
VERSION_LOG: `
|
||||
<b>v2.2.5 2022-11-3</b><br />
|
||||
1.优化部分代码<br />
|
||||
2.去掉微信未开放功能<br />
|
||||
<b>v2.2.4 2022-10-28</b><br />
|
||||
1.更新部分代码<br />
|
||||
<b>v2.2.3 2022-10-26</b><br />
|
||||
1.实现根据人数自动开奖的功能<br />
|
||||
<b>v2.2.2 2022-10-25</b><br />
|
||||
1.实现抽奖页面创建加入界面<br />
|
||||
2.实现抽奖页面创建后台逻辑<br />
|
||||
<b>v2.2.1 2022-10-24</b><br />
|
||||
1.完善抽奖助手子页面<br />
|
||||
<b>v2.2 2022-10-23</b><br />
|
||||
1.添加抽奖助手界面<br />
|
||||
<b>v2.1 2022-10-22</b><br />
|
||||
1.添加自动登录逻辑<br />
|
||||
2.各个界面微调美化<br />
|
||||
<b>v2.0 2022-10-19</b><br />
|
||||
1.更新主页空内容显示<br />
|
||||
2.实现工具智能抠图、证件照、摩斯电码、随机骰子等功能<br />
|
||||
3.实现部分登录逻辑<br />
|
||||
<b>v1.0 2022-10-7</b><br />
|
||||
1.从微信端进行移植<br />
|
||||
`
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hasUserInfo: false,
|
||||
userInfo: {},
|
||||
openid: "",
|
||||
openid: ""
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const that = this;
|
||||
if (app.globalData.hasUserInfo) {
|
||||
this.hasUserInfo = app.globalData.hasUserInfo;
|
||||
this.userInfo = app.globalData.userInfo;
|
||||
}
|
||||
console.log("----------------------------- 加载我的页面 -----------------------------");
|
||||
this.initPageData();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
console.log("----------------------------- 显示我的页面 -----------------------------");
|
||||
this.updateUserInfo();
|
||||
},
|
||||
|
||||
methods: {
|
||||
login() {
|
||||
const that = this;
|
||||
// 若用户未登录
|
||||
if (!app.globalData.hasUserInfo) {
|
||||
that.toast("正在登录", 'loading');
|
||||
// 初始化页面数据
|
||||
initPageData() {
|
||||
this.updateUserInfo();
|
||||
this.getStorageSize();
|
||||
},
|
||||
|
||||
// 更新用户信息
|
||||
updateUserInfo() {
|
||||
if (app.globalData.hasUserInfo) {
|
||||
this.hasUserInfo = true;
|
||||
this.userInfo = app.globalData.userInfo;
|
||||
console.log("用户信息已更新:", this.userInfo);
|
||||
} else {
|
||||
console.log("用户未登录");
|
||||
}
|
||||
},
|
||||
|
||||
// 处理用户卡片点击
|
||||
async handleUserCardClick() {
|
||||
console.log("1.开始检测是否存在用户信息");
|
||||
if (!this.hasUserInfo) {
|
||||
console.log("2.未查询到用户信息,触发登录流程");
|
||||
await this.handleLogin();
|
||||
} else {
|
||||
console.log("2.查询到信息，提示用户已登录");
|
||||
this.toast("您已经登录", 'none');
|
||||
}
|
||||
},
|
||||
|
||||
// 处理登录
|
||||
async handleLogin() {
|
||||
try {
|
||||
this.toast("正在登录", 'loading');
|
||||
console.log("3.1 调用wx.getUserProfile()获取信息开始");
|
||||
|
||||
const profile = await this.getUserProfile();
|
||||
console.log("3.1 用wx.getUserProfile()获取信息结束 返回:", profile.userInfo);
|
||||
|
||||
// 更新全局和本地数据
|
||||
app.globalData.hasUserInfo = true;
|
||||
app.globalData.userInfo = profile.userInfo;
|
||||
this.hasUserInfo = true;
|
||||
this.userInfo = profile.userInfo;
|
||||
console.log("3.2 填充用户信息到界面");
|
||||
|
||||
// 注册用户到后端
|
||||
console.log("3.3 判断是否存在用户OopnId");
|
||||
if (app.globalData.openId) {
|
||||
console.log("3.3 获取到OopnId,开始注册");
|
||||
await this.registerUser(profile.userInfo);
|
||||
} else {
|
||||
console.warn("3.3 没有OpenId,重新进入小程序获取");
|
||||
this.toast("登录异常，请重新进入小程序", 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.toast("登录成功", 'success');
|
||||
console.log("登录流程完成");
|
||||
|
||||
} catch (error) {
|
||||
console.error("登录失败:", error);
|
||||
this.toast(error.message, 'error');
|
||||
}
|
||||
},
|
||||
|
||||
// 获取用户信息（Promise封装）
|
||||
getUserProfile() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getUserProfile({
|
||||
desc: "获取你的昵称、头像、地区及性别",
|
||||
success: res => {
|
||||
app.globalData.hasUserInfo = true;
|
||||
app.globalData.userInfo = res.userInfo;
|
||||
that.hasUserInfo = true;
|
||||
that.userInfo = res.userInfo;
|
||||
that.toast("登录成功", 'success');
|
||||
const openId = app.globalData.openId;
|
||||
if (openId) {
|
||||
res.userInfo.openId = openId;
|
||||
// console.log("res",res);
|
||||
uni.request({
|
||||
url: app.globalData.website + "/api/login.php",
|
||||
method: 'POST',
|
||||
data: res.userInfo,
|
||||
success(res) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: res.msg
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log("没有OpenId,请重新进入小程序");
|
||||
success: resolve,
|
||||
fail: () => {
|
||||
reject(new Error("您拒绝了授权"));
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 注册用户到后端
|
||||
async registerUser(userInfo) {
|
||||
try {
|
||||
const registerData = {
|
||||
...userInfo,
|
||||
openId: app.globalData.openId,
|
||||
//authCode:authCode,
|
||||
// username:"admin",
|
||||
// password:"1234",
|
||||
// phone:"1234567",
|
||||
// email:"1234567",
|
||||
creator:"admin",
|
||||
source:0,
|
||||
status:0
|
||||
};
|
||||
const result = await this.requestRegister(registerData);
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error("3.4 用户注册失败 返回:", error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// 请求注册（Promise封装）
|
||||
requestRegister(userInfo) {
|
||||
console.log("3.4.2 调用:"+app.globalData.website +app.globalData.method.addUser+"()添加用户开始 入参:", userInfo);
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: app.globalData.website + app.globalData.method.addUser,
|
||||
method: 'POST',
|
||||
data: userInfo,
|
||||
success: (res) => {
|
||||
if (res.data.code == 0) {
|
||||
console.log("3.4.2 调用:"+app.globalData.method.addUser+"()添加用户结束 返回:", res);
|
||||
resolve(res.data);
|
||||
this.showRegisterSuccess(res.data.msg);
|
||||
}else{
|
||||
console.log("3.4.2 调用:"+app.globalData.method.addUser+"()添加用户失败 返回:", res);
|
||||
reject(new Error(res.data.msg || "注册失败"));
|
||||
}
|
||||
|
||||
},
|
||||
fail: res => {
|
||||
that.toast("您拒绝了请求", 'error');
|
||||
fail: (res) => {
|
||||
console.error("3.4.2 调用:"+app.globalData.addUser+"()添加用户失败 返回:", res);
|
||||
reject(new Error("网络请求失败"));
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "您已经登录",
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
const that = this;
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "是否确定退出登录？",
|
||||
complete(res) {
|
||||
if (res.confirm) {
|
||||
app.globalData.hasUserInfo = false;
|
||||
app.globalData.userInfo = {};
|
||||
that.hasUserInfo = false;
|
||||
that.userInfo = {};
|
||||
} else if (res.cancel) {
|
||||
that.toast("取消操作", 'success');
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
feedback() {
|
||||
const mail = "lailab_mail@126.com";
|
||||
const qq = "1694319867";
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "有问题可以通过联系客服进行反馈,也可以添加作者QQ[1694319867]或发送邮箱[lailab_mail@126.com]进行反馈,点击下面按钮可以进行一键复制。",
|
||||
confirmText: "邮箱",
|
||||
cancelText: "QQ",
|
||||
confirmColor: "#000",
|
||||
success(res) {
|
||||
var msg = "";
|
||||
if (res.confirm) {
|
||||
msg = mail;
|
||||
} else if (res.cancel) {
|
||||
msg = qq;
|
||||
}
|
||||
uni.setClipboardData({
|
||||
data: msg,
|
||||
success(res) {
|
||||
uni.getClipboardData({
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: "success",
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 显示注册成功提示
|
||||
showRegisterSuccess(message) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: message || "注册成功",
|
||||
showCancel: false,
|
||||
confirmText: "知道了"
|
||||
});
|
||||
},
|
||||
|
||||
// 处理退出登录
|
||||
async handleLogout() {
|
||||
console.log("用户点击退出登录");
|
||||
|
||||
const result = await this.confirmLogout();
|
||||
|
||||
if (result) {
|
||||
this.performLogout();
|
||||
} else {
|
||||
this.toast("取消操作", 'none');
|
||||
}
|
||||
},
|
||||
|
||||
// 确认退出登录
|
||||
confirmLogout() {
|
||||
return new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "是否确定退出登录？",
|
||||
confirmText: "确定",
|
||||
cancelText: "取消",
|
||||
success: (res) => {
|
||||
resolve(res.confirm);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 执行退出登录
|
||||
performLogout() {
|
||||
// 清除全局数据
|
||||
app.globalData.hasUserInfo = false;
|
||||
app.globalData.userInfo = {};
|
||||
|
||||
// 清除本地数据
|
||||
this.hasUserInfo = false;
|
||||
this.userInfo = {};
|
||||
|
||||
console.log("用户已退出登录");
|
||||
this.toast("已退出登录", 'success');
|
||||
},
|
||||
|
||||
// 处理反馈
|
||||
async handleFeedback() {
|
||||
console.log("用户点击反馈问题");
|
||||
|
||||
const result = await this.showFeedbackDialog();
|
||||
|
||||
if (result === 'email') {
|
||||
await this.copyToClipboard(CONFIG.CONTACT.EMAIL, "邮箱");
|
||||
} else if (result === 'qq') {
|
||||
await this.copyToClipboard(CONFIG.CONTACT.QQ, "QQ号");
|
||||
}
|
||||
},
|
||||
|
||||
// 显示反馈对话框
|
||||
showFeedbackDialog() {
|
||||
return new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: "反馈方式",
|
||||
content: `有问题可以通过以下方式联系作者：
|
||||
1. 邮箱：${CONFIG.CONTACT.EMAIL}
|
||||
2. QQ：${CONFIG.CONTACT.QQ}
|
||||
|
||||
请选择一种方式复制联系方式`,
|
||||
confirmText: "复制邮箱",
|
||||
cancelText: "复制QQ",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
resolve('email');
|
||||
} else if (res.cancel) {
|
||||
resolve('qq');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 复制到剪贴板
|
||||
async copyToClipboard(text, type) {
|
||||
try {
|
||||
await this.setClipboardData(text);
|
||||
await this.verifyClipboardData();
|
||||
|
||||
this.toast(`${type}复制成功`, 'success');
|
||||
console.log(`${type}复制成功:`, text);
|
||||
|
||||
} catch (error) {
|
||||
console.error("复制失败:", error);
|
||||
this.toast("复制失败", 'error');
|
||||
}
|
||||
},
|
||||
|
||||
// 设置剪贴板数据
|
||||
setClipboardData(text) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.setClipboardData({
|
||||
data: text,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 验证剪贴板数据
|
||||
verifyClipboardData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getClipboardData({
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
},
|
||||
share() {},
|
||||
// 获取本地缓存大小
|
||||
getStorageSize() {
|
||||
let that = this;
|
||||
@@ -187,7 +430,8 @@
|
||||
}
|
||||
},
|
||||
// 清理缓存
|
||||
clearStorage() {
|
||||
// 处理清理缓存
|
||||
async handleClearStorage() {
|
||||
let that = this;
|
||||
that.toast("正在清理", "loading");
|
||||
try {
|
||||
@@ -228,193 +472,218 @@
|
||||
return;
|
||||
}
|
||||
},
|
||||
log() {
|
||||
const log = `
|
||||
<b>v1.0 2022-10-7</b><br />
|
||||
1.从微信端进行移植<br /><br />
|
||||
<b>v2.0 2022-10-19</b><br />
|
||||
1.更新主页空内容显示<br />
|
||||
2.实现工具智能抠图、证件照、摩斯电码、随机骰子等功能<br />
|
||||
3.实现部分登录逻辑<br /><br />
|
||||
<b>v2.1 2022-10-22</b><br />
|
||||
1.添加自动登录逻辑<br />
|
||||
<b>v2.1 2022-10-22</b><br />
|
||||
1.添加自动登录逻辑<br />
|
||||
2.各个界面微调美化<br />
|
||||
<b>v2.2 2022-10-23</b><br />
|
||||
1.添加抽奖助手界面<br />
|
||||
<b>v2.2.1 2022-10-24</b><br />
|
||||
1.完善抽奖助手子页面<br />
|
||||
<b>v2.2.2 2022-10-25</b><br />
|
||||
1.实现抽奖页面创建加入界面<br />
|
||||
2.实现抽奖页面创建后台逻辑<br />
|
||||
<b>v2.2.3 2022-10-26</b><br />
|
||||
1.实现根据人数自动开奖的功能<br />
|
||||
<b>v2.2.4 2022-10-28</b><br />
|
||||
1.更新部分代码<br />
|
||||
<b>v2.2.5 2022-11-3</b><br />
|
||||
1.优化部分代码<br />
|
||||
2.去掉微信未开放功能<br />
|
||||
`;
|
||||
// 处理开发日志
|
||||
handleDevLog() {
|
||||
console.log("用户查看开发日志");
|
||||
// encodeURIComponent(CONFIG.VERSION_LOG)
|
||||
uni.navigateTo({
|
||||
url: `/pages/utils/showText/showText?nodes=${log}`
|
||||
url: `/pages/utils/showText/showText?nodes=${CONFIG.VERSION_LOG}&title=开发日志`
|
||||
});
|
||||
},
|
||||
admire() {
|
||||
const url = app.globalData.website + "/image/other/image_admire.jpg"
|
||||
|
||||
// 捐赠作者（暂时注释）
|
||||
handleAdmire() {
|
||||
// const url = app.globalData.website + "/image/other/image_admire.jpg";
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/utils/showImg/showImg?id=0&url=${url}&showBar=false&showMode=aspectFit&canLongTap=true`
|
||||
// });
|
||||
uni.navigateTo({
|
||||
url: `/pages/utils/showImg/showImg?id=${0}&url=${url}&showBar=false&showMode=aspectFit&canLongTap=true`
|
||||
url: `/pages/test/test`
|
||||
});
|
||||
},
|
||||
toast(title, icon) {
|
||||
|
||||
// Toast提示
|
||||
toast(title, icon = 'none', duration = 2000) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: icon
|
||||
})
|
||||
icon: icon,
|
||||
duration: duration
|
||||
});
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
if (app.globalData.hasUserInfo) {
|
||||
this.hasUserInfo = app.globalData.hasUserInfo;
|
||||
this.userInfo = app.globalData.userInfo;
|
||||
}
|
||||
this.getStorageSize();
|
||||
},
|
||||
onShow() {
|
||||
if (app.globalData.hasUserInfo) {
|
||||
this.hasUserInfo = app.globalData.hasUserInfo;
|
||||
this.userInfo = app.globalData.userInfo;
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'LaiLab工具箱',
|
||||
path: 'pages/mine/mine'
|
||||
|
||||
// 分享配置
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'LaiLab工具箱 - 我的工具库',
|
||||
path: '/pages/mine/mine',
|
||||
imageUrl: '/static/share.png'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import url("../../static/iconfont/iconfont.css");
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
/* background-color: red; */
|
||||
background-color: #ffffff;
|
||||
padding: 20px 0 80px 0;
|
||||
/* text-align: center; */
|
||||
.mine-container {
|
||||
min-height: 100vh;
|
||||
background: white;//linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
width: 90%;
|
||||
height: 140px;
|
||||
background-color: #f6f7f9;
|
||||
border-radius: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.info-img {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
/* background-color: green; */
|
||||
float: left;
|
||||
text-align: center;
|
||||
/* 用户卡片样式 */
|
||||
.user-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f6f7f9;//white;
|
||||
border-radius: 50rpx;
|
||||
padding: 40rpx 32rpx;
|
||||
margin: 32rpx 32rpx;
|
||||
//box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
&:active {
|
||||
background: #f8f9fa;
|
||||
transform: translateY(-2rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.img-bg {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
border-radius: 15px;
|
||||
background-color: #eeeeee;
|
||||
.user-avatar-container {
|
||||
position: relative;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
padding: 20rpx;
|
||||
background: #eee;
|
||||
border-radius: 28rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-background {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
background: white;
|
||||
//background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
//box-shadow: #07c160 solid;
|
||||
border-radius: 28rpx;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.img-icon {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
/* background-color: red; */
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 30px;
|
||||
.user-avatar {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 24rpx;
|
||||
background: white;
|
||||
//border: 4rpx solid white;
|
||||
//box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.info-text {
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
/* background-color: skyblue; */
|
||||
float: right;
|
||||
.user-info-container {
|
||||
flex: 1;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.text-name {
|
||||
font-size: 30px;
|
||||
line-height: 140px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.items {
|
||||
width: 90%;
|
||||
background-color: #ffffff;
|
||||
border-radius: 15px;
|
||||
margin: 20px auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: left;
|
||||
background-color: #f6f7f9;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.item:first-child {
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
|
||||
.i-icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
/* background-color: red; */
|
||||
float: left;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.i-name {
|
||||
font-size: 18px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.i-more {
|
||||
.user-name {
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
margin: 10px auto;
|
||||
color: #888888;
|
||||
font-size: 17px;
|
||||
float: right;
|
||||
font-size: 55rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 退出登录字体 */
|
||||
.singout-text {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
.user-status {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
&.status-logged {
|
||||
color: #07c160;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 功能列表样式 */
|
||||
.function-list {
|
||||
background: #f6f7f9;//white;
|
||||
border-radius: 50rpx;
|
||||
margin: 0 32rpx;
|
||||
overflow: hidden;
|
||||
//box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 40rpx;
|
||||
background: transparent;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
line-height: normal;
|
||||
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.item-hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
font-size: 34rpx;
|
||||
color: #000;
|
||||
margin-left: 10rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
font-size: 32rpx;
|
||||
color: #888;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.item-extra {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 退出登录样式 */
|
||||
.logout-item {
|
||||
margin-top: 32rpx;
|
||||
//background: #fff5f5;
|
||||
border-radius: 24rpx;
|
||||
justify-content: center;
|
||||
|
||||
&:active {
|
||||
background: #ffeaea;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-text {
|
||||
color: #ff6b6b;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* 分割线 */
|
||||
.function-item + .logout-item {
|
||||
margin-top: 0;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
+4
-1
@@ -21,11 +21,14 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tools: []
|
||||
tools:[]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const app = getApp();
|
||||
const gData = app.globalData;
|
||||
this.getDataByOnline();
|
||||
this.tools = gData.morePageData.tools;
|
||||
},
|
||||
methods: {
|
||||
getDataByOnline() {
|
||||
|
||||
Reference in New Issue
Block a user