U 个人中心界面优化

master
educoder_weapp 4 years ago
parent d5ff3a53eb
commit ffbea46001

@ -1,3 +1,7 @@
## v0.19.1
* U 个人中心界面优化
* U 主题色加深
## v0.19.0
* A 增加教学案例模块
* D 个人中心的EduCoder云网入口
@ -12,7 +16,6 @@
* A 增加设置界面
* U 完善markdown网址解析功能
## v0.17.1
* A 增加分享朋友圈
* A 添加收藏时的封面图

@ -140,7 +140,7 @@ Page({
})
this.navToAccount({message:"密码将在本地加密保存"});
},
showMsg({message,duration=800}){
showMsg({message,duration=1000}){
if(this.timeoutId)
clearTimeout(this.timeoutId);
this.setData({ message, showMessage:1});

@ -1,6 +1,7 @@
{
"usingComponents": {
"mp-slideview": "/weui-miniprogram/slideview/slideview"
"mp-slideview": "/weui-miniprogram/slideview/slideview",
"mp-toptips":"/weui-miniprogram/toptips/toptips"
},
"navigationBarTitleText": "切换账号"
}

@ -3,8 +3,16 @@
</page-meta>
<view>
<view class="message single-line {{showMessage&&message?'':'hidden'}}">
<mp-toptips msg="{{message}}" type="info" show="{{message&&showMessage}}" delay="0"/>
<!--view class="message single-line {{showMessage&&message?'':'hidden'}}">
{{message}}
</view-->
<view class="empty" wx:if="{{accounts.length==0}}">
<text>暂无账号</text>
</view>
<view wx:else class="empty">
轻触切换账号
</view>
<mp-slideview wx:for="{{accounts}}" data-id="{{item.user_id}}" buttons="{{buttons}}"
bindtap="switchAccount" bindlongpress="removeAccount1" bindbuttontap="removeAccount2"
@ -20,9 +28,7 @@
</view>
</view>
</mp-slideview>
<view class="empty" wx:if="{{accounts.length==0}}">
<text>暂无账号</text>
</view>
<button class="addAccount" type="main" bindtap="addAccount">添加账号</button>
<button class="nav-back" type="main" plain="1" bindtap="navBack">返回</button>
</view>

@ -199,6 +199,5 @@
"sitemapLocation": "sitemap.json",
"themeLocation": "theme.json",
"lazyCodeLoading": "requiredComponents",
"style": "v2",
"debug": true
"style": "v2"
}

@ -29,8 +29,9 @@ page {
}
.error{color:red;}
.warning{color: orange;}
.color-main{color:#00b0f0}
.bg-main{background-color:#00b0f0}
.bg-main{background-color:#0590f0}
.color-main{color:#0590f0}
.color-light-main{color: #00b0f0;}
.color-dark-main{color:#0080f0}
button.button-main{background:#00b0f0}
.border-main{border-color:#00b0f0}

@ -9,7 +9,8 @@ Component({
value: 23
},
fontsize:{
type:Number
type:Number,
value:14
},
color: {
type:String,
@ -34,8 +35,8 @@ Component({
title: info,icon:"none", duration
})
else if(showtype=='modal')
wx.showToast({
title: info, showCancel:false,duration
wx.showModal({
content: info, showCancel:false
})
else
this.showInfo()

@ -1,6 +1,7 @@
<view class="class iconfont icon-{{type}}" style="color:{{color}};font-size:{{fontsize||size}}px;height:{{size}}px;width:{{size}}px" bindtap="onTap">
<view class="class iconfont icon-{{type}}" style="color:{{color}};line-height:{{size}}px;font-size:{{size}}px;" bindtap="onTap">
<view wx:if="{{info}}" hidden="{{!showInfo}}" class="info-wrap">
<view class="triangle"></view>
<view class="info">{{info}}</view>
<view class="info" style="font-size:{{fontsize}}px">{{info}}</view>
</view>
</view>

@ -1,11 +1,11 @@
@font-face {
font-family: 'iconfont'; /* project id 1656783 */
src: url('//at.alicdn.com/t/font_1656783_bha2h77g8oh.eot');
src: url('//at.alicdn.com/t/font_1656783_bha2h77g8oh.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1656783_bha2h77g8oh.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1656783_bha2h77g8oh.woff') format('woff'),
url('//at.alicdn.com/t/font_1656783_bha2h77g8oh.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1656783_bha2h77g8oh.svg#iconfont') format('svg');
src: url('//at.alicdn.com/t/font_1656783_9q51195darj.eot');
src: url('//at.alicdn.com/t/font_1656783_9q51195darj.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1656783_9q51195darj.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1656783_9q51195darj.woff') format('woff'),
url('//at.alicdn.com/t/font_1656783_9q51195darj.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1656783_9q51195darj.svg#iconfont') format('svg');
}
.iconfont {
display: inline-block;
@ -41,6 +41,8 @@
flex-direction: column;
align-items: center;
opacity: 0.9;
z-index: 10000;
overflow:visible
}
@ -144,4 +146,7 @@
}
.icon-anli:before{
content: "\e643";
}
.icon-qiandao:before{
content:"\e811"
}

@ -19,16 +19,16 @@
transition: all 0.26s ease;
}
.view.nav.active{
color: #0080f0;
color: #0590f0;
font-size: 15px;
font-weight: bold;
border-bottom: 2px solid #0080f0;
border-bottom: 2px solid #0590f0;
}
.view.plain{
transition: all 0.26s ease;
}
.view.plain.active{
color: #0080f0;
color: #0590f0;
font-size: 15px;
font-weight: bold;
}

@ -1,6 +1,6 @@
const cloudDir = "cloud://educoder.6564-educoder-1300855313/";
let _version = "0.19.0";
let _version = "0.19.1";
let { miniProgram:{ envVersion="release", version=_version}={}} = wx.getAccountInfoSync();
version = version||_version;

@ -1,8 +1,9 @@
.navigation{
background: #00b0f0;
background: #0590f0;
flex: none;
}
/* #1670e0;, #0092f0,#0981f8;*/
.status-bar{
transition: all ease-out 0.4s
}
@ -39,7 +40,7 @@
}
.navitem{
flex: auto;
background: #00d0f0;
background: #00b0f0;
color: white;
padding: 5px 1px;
transition: all ease 0.6s;

@ -21,6 +21,8 @@ Page({
header.modules.push(m);
}
this.setData(header);
let {name, sub_title} = header;
wx.setNavigationBarTitle({title: name+(sub_title?('--'+sub_title):'')})
try{
wx.showLoading({title: '加载中'});
let module = await app.api("competitions.competition_modules")({
@ -51,7 +53,6 @@ Page({
onTapAttachment(e){
//console.log(e);
let {currentTarget:{dataset:{id}}} = e;
openAttachment({id});
},

@ -1,7 +1,6 @@
<page-meta>
<!--page-meta>
<navigation-bar title="{{name+(sub_title?('--'+sub_title):'')}}"/>
</page-meta>
</page-meta-->
<view>
<view class="sticky-top">

@ -18,6 +18,7 @@ Page({
app.api("libraries.$")({mooc_case_id: options.mooc_case_id})
.then(res=>{
this.setData(res);
wx.setNavigationBarTitle({title: res.title})
})
},

@ -1,6 +1,6 @@
<page-meta>
<!--page-meta>
<navigation-bar title="{{title}}"/>
</page-meta>
</page-meta-->
<rich-md nodes="{{content}}" type="markdown"/>
<view class="attachments">

@ -128,9 +128,11 @@ Page({
if(cache_homepage)
this.setData({user: cache_homepage});
}
/*
let data = wx.getStorageSync("auto-attendence");
if (data)
this.setData({ auto_attendance: true });
*/
},
onShow() {
app.syncUser().then(res => {
@ -152,7 +154,8 @@ Page({
data: res,
key
})
if (!res.attendance_signed && this.data.auto_attendance)
// 自动签到
if (!res.attendance_signed)
this.attendance({ show: 0 })
});
let account = accountManager.getCurrentAccount();
@ -177,16 +180,35 @@ Page({
data: this.data.auto_attendance,
});
},
attendance({ show = 1 }) {
updateGold({gold, duration}){
let {grade} = this.data.user;
if(grade >= gold)
return console.log(new Date().getTime())
else{
let time = 1;
this.setData({"user.grade": grade+1}, ()=>{
//this.updateGold(gold);
var id = setTimeout(()=>{
clearTimeout(id);
this.updateGold({gold,duration});
}, time);
}
);
}
},
attendance({ show = 1 }={}) {
if(!app.checkLogin({content:"您需要登陆后才能签到获取金币"}))
return;
app.api("users.attendance")()
.then(res => {
res.message = "签到成功";
if (show)
app.showMsg(res);
let {grade} = res;
this.updateGold({gold: grade})
}).catch(e=>{
if(show)
app.showError(e);
}).finally(()=>{
this.refresh();
})
},

@ -3,5 +3,7 @@
"enablePullDownRefresh": false,
"usingComponents": {
"mp-icon":"/weui-miniprogram/icon/icon"
}
},
"navigationBarBackgroundColor": "#0590f0",
"navigationBarTextStyle": "white"
}

@ -1,4 +1,72 @@
<view class="user-display">
<view class="profile-display">
<navigator hidden="{{!user.id}}" class="user-info-display" hover-class="none" url="/account/pages/profile/profile">
<image class="user-avatar" src="{{eduImgDir}}{{user.avatar_url}}"
catchtap="onTapAvatar" data-url="{{user.avatar_url}}"/>
<view class="user-info-mid">
<view class="single-line user-name">{{user.name}}</view>
<view class="flex-row authentication-display">
<iconfont catchtap class="authentication-tip" type="authentication"
showtype="toast" color="{{user.authentication?'white':'#ffffff55'}}"
size="26" info="{{user.authentication?'已实名认证':'未实名认证'}}" />
<iconfont catchtap type="certification" showtype="toast"
size="26" color="{{user.professional_certification?'white':'#ffffff55'}}"
info="{{user.professional_certification?'已职业认证':'未职业认证'}}" />
<text class="complete-profile-tip" wx:if="{{!profile_completed}}">完善信息</text>
</view>
</view>
<view class="user-info-left">
<iconfont type="jinru" color="white" size="15" class="enter"></iconfont>
</view>
</navigator>
<navigator hover-class="none" wx:if="{{!user.id}}" class="user-info-display require-login" url="/account/pages/account/account?action=login">
<image src="{{imgDir}}blank_info_bg.png"></image>
<text class="ft14 m12">点击登陆,获取更多内容</text>
</navigator>
<view class="experience-display flex-row">
<view class="flex-col experience-item">
<view class="key">经验值</view>
<view class="value">{{user.experience||0}}</view>
</view>
<view class="flex-col experience-item">
<view class="key" bindtap="attendance">金币</view>
<view class="value" bindtap="attendance">
{{user.grade||0}}
<iconfont type="qiandao" color="{{user.attendance_signed?'#ffffff77':'#FEB532'}}" />
</view>
</view>
</view>
</view>
<view class="box">
<view class="box-background"></view>
<view class="whitebox">
<navigator hover-class="btn-hover" url="/mooc_case/pages/mooc_cases/mooc_cases"
class="box_context">
<view class="left-content">
<view><iconfont class="icon-button" color="#FEB532" type="anli" size="30" /> </view>
<view>
<view>教学案例</view>
<view class="red-tip">查看获奖案例</view>
</view>
</view>
<view class="right"> <iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont> </view>
</navigator>
<navigator hover-class="btn-hover" url="/competition/pages/competitions/competitions" class="box_context">
<view class="left-content">
<view> <iconfont class="icon-button" color="#FEB532" type="jingsai" size="30" /> </view>
<view>
<view>在线竞赛</view>
<view class="red-tip">绿色计算大赛</view>
</view>
</view>
<view class="right"> <iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont> </view>
</navigator>
</view>
</view>
<!--view class="user-display">
<navigator hidden="{{user.id}}" class="no-login" style="display: flex;align-items: center;" url="/account/pages/account/account?action=login">
<image src="{{imgDir}}blank_info_bg.png"></image>
<text class="color-grey ft14 m12">点击登陆,获取更多内容</text>
@ -29,57 +97,57 @@
</view>
</view>
</block>
</view>
</view-->
<view class="nav-list" bindtap="enterPage">
<!--navigator target="miniProgram" app-id="wx2402d86a6b534f77" class="nav educoder">
<image src="{{attachDir}}872467" class="icon"></image>
EduCoder云网
<text class="tip">推荐使用</text>
<iconfont type="jinru" color="dimgrey" size="15" class="enter"/>
<iconfont type="jinru" color="lightgrey" size="15" class="enter"/>
</navigator-->
<navigator url="/mooc_case/pages/mooc_cases/mooc_cases" class="nav">
<!--navigator url="/mooc_case/pages/mooc_cases/mooc_cases" class="nav">
<iconfont class="icon" type="anli" size="21" />教学案例
<iconfont type="jinru" color="dimgrey" size="15" class="enter"></iconfont>
<iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont>
</navigator>
<navigator url="/competition/pages/competitions/competitions" class="nav gap">
<iconfont class="icon" type="jingsai" size="21" />在线竞赛
<iconfont type="jinru" color="dimgrey" size="15" class="enter"></iconfont>
</navigator>
<iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont>
</navigator-->
<view class="nav enter" data-path="change_password">
<iconfont class="icon" type="xiugaimima" size="21" />修改密码
<iconfont type="jinru" color="dimgrey" size="15" class="enter"></iconfont>
<iconfont class="icon" color="#0080f0" type="xiugaimima" size="21" />修改密码
<iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont>
</view>
<!--view class="nav" data-path="authentication">
<iconfont class="icon" type="shimingrenzheng" size="21" />实名认证
<iconfont type="jinru" color="dimgrey" size="15" class="enter"></iconfont>
<iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont>
</view-->
<view class="nav gap" data-path="pro_authentication">
<iconfont class="icon" type="wode-zhiyerenzheng" size="21" />职业认证
<iconfont type="jinru" color="dimgrey" size="15" class="enter"></iconfont>
<iconfont class="icon" color="#0080f0" type="wode-zhiyerenzheng" size="21" />职业认证
<iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont>
</view>
<button open-type="feedback" class="nav" style="width:auto">
<iconfont class="icon" type="fankui" size="21" />小程序反馈
<iconfont class="icon" color="#0080f0" type="fankui" size="21" />小程序反馈
<text class="tip">有问题,来反馈</text>
<iconfont type="jinru" color="dimgrey" size="15" class="enter"></iconfont>
<iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont>
</button>
<button open-type="contact" class="nav" style="width:auto">
<iconfont class="icon" type="kefu" size="21" />小程序客服
<iconfont type="jinru" color="dimgrey" size="15" class="enter"></iconfont>
<iconfont class="icon" color="#0080f0" type="kefu" size="21" />小程序客服
<iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont>
</button>
<navigator class="nav gap" url="/setting/pages/setting/setting">
<iconfont type="shezhi" class="icon" size="21"/>设置
<iconfont type="jinru" color="dimgrey" size="15" class="enter"/>
<iconfont type="shezhi" color="#0080f0" class="icon" size="21"/>设置
<iconfont type="jinru" color="lightgrey" size="15" class="enter"/>
</navigator>
<!--navigator url="/markdown/account/about/about" class="nav about gap">
<iconfont class="icon" type="guanyu" size="21" />关于
<iconfont type="jinru" color="dimgrey" size="15" class="enter"></iconfont>
<iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont>
</navigator-->
<navigator class="nav" bindlongpress="enterUserinfo" url="/account/pages/accounts/accounts">
<iconfont class="icon" size="21" type="qiehuanzhanghao" />切换账号
<iconfont class="icon" color="#0080f0" size="21" type="qiehuanzhanghao" />切换账号
<text class="tip">{{currentLogin}}</text>
<iconfont type="jinru" color="dimgrey" size="15" class="enter"></iconfont>
<iconfont type="jinru" color="lightgrey" size="15" class="enter"></iconfont>
</navigator>
</view>

@ -1,6 +1,129 @@
.auth-tip{
margin-right: 12px;
/**用户展示开始*/
.profile-display{
background: #0590f0;
transition: all 0.6s ease;
max-height: 100vh;
overflow:hidden;
}
.user-info-display{
display: flex;
align-items: center;
color: white;
height: 166rpx;
}
.require-login>image{
height: 88px;
width: 88px;
margin-left: 16px;
}
.user-avatar{
border-radius: 50%;
overflow: hidden;
width: 150rpx;
height: 150rpx;
border: 8rpx #52B3FF solid;
margin: 0rpx 40rpx;
flex: none;
}
.user-info-mid{
flex: auto;
overflow: hidden;
}
.user-info-left{
flex: none;
margin-right: 14px;
}
.user-name{
font-size: 20px;
}
.authentication-display{
align-items: center;
}
.authentication-tip{
margin-right: 6px;
}
.complete-profile-tip{
flex: auto;
text-align: right;
font-size: 13px;
}
/**用户展示结束*/
/**经验展示开始*/
.experience-display{
padding: 5rpx 10rpx;
align-items: center;
color: white;
}
.experience-item{
flex: auto;
align-items: center;
}
.experience-item>.key{
font-size: 17px;
}
.experience-item>.value{
font-size: 15px;
}
/*经验展示结束*/
/* 浮层 */
.icon-button{
margin-right: 16rpx;
margin-left: 8rpx;
}
.jiantou{
width: 30rpx;
height: 30rpx;
}
.box{
display: flex;
justify-content: center;
position: relative;
}
.box-background{
background: #0590f0;
position: absolute;
top: 0;
width: 100%;
height: 50%;
z-index: -100;
border-radius: 0 0 24% 24%;
}
.whitebox{
width: 94%;
background-color: white;
display: flex;
justify-content: space-between;
border-radius: 20rpx;
box-shadow: #e0e0e0 0px 0px 5px;
padding: 25rpx 0rpx;
}
.box_context{
display: flex;
justify-content: space-around;
align-items: center;
width: 50%;
padding: 20rpx 0rpx;
border-right: 1rpx #F7F7F7 solid;
}
.left-content{
display: flex;
justify-content: space-around;
align-items: center;
}
.red-tip{
color: #FD6500;
font-size: 25rpx;
padding-top: 8rpx;
}
/* 浮层结束 */
.nav-list{
margin-top: 4px;
}
@ -12,7 +135,7 @@
background: white;
border-bottom: 1px solid #eee;
padding: 0 14px;
height: 42px;
height: 44px;
font-weight: normal;
display: flex;
align-items: center;
@ -23,7 +146,7 @@
right: 12px;
}
.nav>.icon{
margin-right: 10px;
margin-right: 12px;
}
.nav>image.icon{
width:21px;

@ -112,7 +112,7 @@ Page({
encoding: "base64",
success: res => {
let image = "data:image/jpeg;base64," + res.data;
app.api("users.accounts.avatar")({ image }).then(resolve);
app.api("users.accounts.avatar")({ image }).then(resolve).catch(reject);
},
fail: reject
});
@ -138,11 +138,11 @@ Page({
});
},500);
}).catch(e => {
wx.hideLoading();
wx.showToast({
title: '上传失败',
icon: "none"
});
wx.hideLoading();
this.setData({submitting:0});
});
} else {

@ -0,0 +1,28 @@
/* 主导航栏 */
.banner-main{
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 15rpx #F7F7F7 solid;
background: white;
}
.banner-left{
display: flex;
}
.banner-right{
display: flex;
}
.banner-icon{
width: 46rpx;
height: 46rpx;
}
.banner-name{
margin-left: 30rpx;
}
.banner-tip{
color: #BABABA;
font-size: 25rpx;
margin-right: 10rpx;
}
/* 主导航栏结束 */

@ -33,7 +33,7 @@
"skeletonGenerateFilesWithoutConfirm": true
},
"compileType": "miniprogram",
"libVersion": "2.11.0",
"libVersion": "2.12.0",
"appid": "wxc5c2b711f23f3a1d",
"projectname": "educoder_weapp",
"debugOptions": {
@ -141,7 +141,7 @@
"id": 10,
"name": "path",
"pathName": "markdown/path/path/path",
"query": "subject_id=169",
"query": "subject_id=1426",
"scene": null
},
{

Loading…
Cancel
Save