unknown
5 years ago
parent
d99d73f1a1
commit
5119e4f865
@ -1,3 +1,4 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "账号"
|
||||
}
|
||||
@ -1,41 +1,49 @@
|
||||
<page-meta>
|
||||
<navigation-bar title=""/>
|
||||
<navigation-bar title="{{action_text[action]}}" />
|
||||
</page-meta>
|
||||
|
||||
<view class="container">
|
||||
<image class="login" src="{{imgDir}}educoder.png" mode="aspectFit"></image>
|
||||
<form class="account-form" bindsubmit="log">
|
||||
<view class="inputs">
|
||||
<view class="input-wrap">
|
||||
<input placeholder="邮箱或手机号">
|
||||
|
||||
</input>
|
||||
</view>
|
||||
<view class="input-wrap {{action!='login'?'':'hidden'}}">
|
||||
<input placeholder="验证码">
|
||||
</input>
|
||||
<button class="obtain-code">
|
||||
获取验证码
|
||||
</button>
|
||||
</view>
|
||||
<view class="input-wrap">
|
||||
<input placeholder="请输入密码">
|
||||
|
||||
</input>
|
||||
</view>
|
||||
<view class="input-wrap {{action!='login'?'':'hidden'}}">
|
||||
<input placeholder="请再次输入密码">
|
||||
|
||||
</input>
|
||||
</view>
|
||||
<image class="logo" bindlongpress="login_test" src="{{imgDir}}educoder.png" mode="aspectFit"></image>
|
||||
<form class="account-form" bindsubmit="onSubmit">
|
||||
<view class="inputs">
|
||||
<view class="input-wrap">
|
||||
<input name="login" value="{{login}}" placeholder="邮箱或手机号">
|
||||
</input>
|
||||
</view>
|
||||
<view class="input-wrap {{action!='login'?'':'hidden'}}">
|
||||
<input name="code" placeholder="验证码">
|
||||
</input>
|
||||
<button id="code" type="main" form-type="submit" loading="{{code_status==2}}" disabled="{{code_status}}" class="obtain-code">
|
||||
{{code_button_text}}
|
||||
</button>
|
||||
</view>
|
||||
<view class="input-wrap">
|
||||
<input password name="password" value="{{password}}" placeholder="请输入密码">
|
||||
</input>
|
||||
</view>
|
||||
<view class="input-wrap {{action=='reset'?'':'hidden'}}">
|
||||
<input password name="password_confirmation" placeholder="请再次输入密码">
|
||||
</input>
|
||||
</view>
|
||||
<view class="checkbox-wrap">
|
||||
<switch type="checkbox" name="save_password" color="#00b0f0" checked="{{save_password}}">保存密码</switch>
|
||||
<switch type="checkbox" class="no-login {{action=='reset'?'':'hidden'}}" name="no_login" color="#00b0f0">重置后不登录</switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="actions">
|
||||
<button id="reset" bindtap="onTapReset" form-type="submit">重置密码</button>
|
||||
<button id="login" bindtap="onTapLogin" form-type="submit">登录</button>
|
||||
<button id="register" bindtap="onTapRegister">注册</button>
|
||||
<view class="pos{{pos.login}}">
|
||||
<button id="login" form-type="submit">登录</button>
|
||||
</view>
|
||||
<view class="pos{{pos.register}}">
|
||||
<button id="register" form-type="submit">注册</button>
|
||||
</view>
|
||||
<view class="pos{{pos.reset}}">
|
||||
<button id="reset" form-type="submit">{{pos.reset==1?'重置密码':'忘记密码'}}</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="foot">
|
||||
<navigator class="agreement" hover-class="none" url="/account/pages/agreement/agreement">
|
||||
登录即代表您同意 <text class="color-main agreement">用户协议</text>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
@ -1,16 +1,95 @@
|
||||
.input-wrap{
|
||||
page{
|
||||
min-height: 100%;
|
||||
}
|
||||
.logo{
|
||||
width:64px;
|
||||
height: 64px;
|
||||
display: block;
|
||||
margin: 12px auto;
|
||||
}
|
||||
.checkbox-wrap,.input-wrap{
|
||||
transition: 1s all ease;
|
||||
max-height: 50px;
|
||||
display: flex;
|
||||
margin: 0 24px;
|
||||
margin: 5px 26px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-wrap{
|
||||
font-size: 14px;
|
||||
margin: 0px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.checkbox-wrap switch{
|
||||
transform: scale(0.82);
|
||||
}
|
||||
.input-wrap>input{
|
||||
padding: 4px 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px lightblue
|
||||
border: 1px #00b0f0 solid;
|
||||
flex:auto;
|
||||
}
|
||||
.obtain-code{
|
||||
margin-left: 12px!important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hidden{
|
||||
max-height: 0px;
|
||||
}
|
||||
|
||||
switch.no-login.hidden{
|
||||
opacity: 0;
|
||||
}
|
||||
switch.no-login{
|
||||
float: left;
|
||||
transition: 1s all ease;
|
||||
}
|
||||
.actions{
|
||||
position: relative;
|
||||
margin: 0 26px
|
||||
}
|
||||
.actions button{
|
||||
transition: 1s all ease;
|
||||
}
|
||||
.actions>view{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
transition: 1s all ease;
|
||||
}
|
||||
.actions>.pos1{
|
||||
top: 22px;
|
||||
}
|
||||
.pos1>button{
|
||||
background: #00b0f0;
|
||||
color:white;
|
||||
}
|
||||
.actions>.pos2{
|
||||
top:64px;
|
||||
}
|
||||
.pos2>button{
|
||||
color: #00b0f0;
|
||||
border:#00b0f0 1px solid;
|
||||
}
|
||||
.actions>.pos3{
|
||||
top: 0px;
|
||||
}
|
||||
.pos3>button{
|
||||
font-size: 14px;
|
||||
color: #00b0f0;
|
||||
background: transparent;
|
||||
transform: translateX(240rpx);
|
||||
padding: 0px;
|
||||
}
|
||||
.foot{
|
||||
position: fixed;
|
||||
bottom:0px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
navigator.agreement{
|
||||
margin: 10px auto;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
text.agreement{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -1,99 +0,0 @@
|
||||
const app = getApp();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
error: "",
|
||||
login: "",
|
||||
password: "",
|
||||
password_focus: false
|
||||
},
|
||||
password_focus: function(){
|
||||
this.setData({password_focus: true});
|
||||
},
|
||||
save_input:function(){
|
||||
wx.setStorage({
|
||||
key: 'login',
|
||||
data: this.data.login,
|
||||
});
|
||||
wx.setStorage({
|
||||
key: '_password',
|
||||
data: this.data.password,
|
||||
});
|
||||
wx.setStorage({
|
||||
key: 'autologin',
|
||||
data: 1,
|
||||
})
|
||||
},
|
||||
load_input:function(){
|
||||
wx.getStorage({
|
||||
key: 'login',
|
||||
success: res => {
|
||||
console.log(res);
|
||||
this.setData({login: res.data});
|
||||
},
|
||||
})
|
||||
},
|
||||
update_login:function({detail: {value}}){
|
||||
this.setData({login: value});
|
||||
},
|
||||
update_password: function({detail: {value}}){
|
||||
this.setData({password: value});
|
||||
},
|
||||
login_test: function(){
|
||||
this.setData({login: "educoder_weapp@126.com", password: "abcdefgh"});
|
||||
this.login()
|
||||
},
|
||||
login: function(){
|
||||
const {login, password} = this.data;
|
||||
if (login == "educoder_weapp@126.com" && password.length >= 5 && password !="abcdefgh"){
|
||||
this.login_test();
|
||||
return;
|
||||
}
|
||||
app.callApi({name:"accounts.login",data:{login: login, password: password, autologin: 1},
|
||||
success:res=>{
|
||||
console.log("login success");
|
||||
console.log(res);
|
||||
this.save_input();
|
||||
wx.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
fail(error){
|
||||
wx.showToast({
|
||||
title: error.message,
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
login_test_account({currentTarget:{dataset}}){
|
||||
console.log(dataset);
|
||||
const {login, password} = dataset;
|
||||
this.setData({login,password});
|
||||
this.login();
|
||||
},
|
||||
onLoad: function (options) {
|
||||
if(options.login){
|
||||
this.setData({login: options.login})
|
||||
}else{
|
||||
this.load_input();
|
||||
}
|
||||
if(options.password){
|
||||
this.setData({password: options.password});
|
||||
}
|
||||
if(options.autologin==1){
|
||||
this.login();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
onShow: function () {
|
||||
this.pull_test();
|
||||
},
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
})
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"navigationBarTitleText": "登录",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
<view class="container">
|
||||
<view class="logo-view">
|
||||
<image class="logo" src="cloud://educoder.6564-educoder-1300855313/images/educoder.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="form-wrap">
|
||||
<view class="input-wrap">
|
||||
<input focus class="login-input"
|
||||
bindinput="update_login"
|
||||
value="{{login}}"
|
||||
confirm-type="next"
|
||||
bindconfirm="password_focus"
|
||||
confirm-hold="{{true}}"
|
||||
placeholder="用户名、邮箱、手机号">
|
||||
</input>
|
||||
</view>
|
||||
<text class="error" wx:if="{{!error}}">{{error}}</text>
|
||||
<view class="input-wrap">
|
||||
<input focus="{{password_focus}}" password
|
||||
class="login-input"
|
||||
placeholder="密码"
|
||||
confirm-type="done"
|
||||
value="{{password}}"
|
||||
bindinput="update_password"
|
||||
bindconfirm="login">
|
||||
</input>
|
||||
</view>
|
||||
<button class="login-submit" type="main" bindtap="login" bindlongpress="login_test">登录</button>
|
||||
</view>
|
||||
<view style="height:36px;">
|
||||
<navigator class="tappable register" url="../register/register" open-type="redirect">注册</navigator>
|
||||
<navigator class="tappable reset_password" url="../reset_password/reset_password?login={{login}}" open-type="redirect">忘记密码</navigator>
|
||||
</view>
|
||||
</view>
|
||||
@ -1,42 +0,0 @@
|
||||
.logo-view{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logo{
|
||||
align-self: center;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.input-wrap {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0 -12px;
|
||||
padding: 0 12px;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
.label {
|
||||
color: #999;
|
||||
width: 4.5em;
|
||||
}
|
||||
.login-input {
|
||||
font-size: 18px;
|
||||
line-height: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.login-submit{
|
||||
margin: 24rpx 36rpx;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
.register{
|
||||
position: fixed;
|
||||
right: 36rpx;
|
||||
}
|
||||
.reset_password{
|
||||
position: fixed;
|
||||
left: 36rpx;
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
// pages/register/register.js
|
||||
const app = getApp();
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
login:"",
|
||||
countDownNum: 0
|
||||
},
|
||||
register: function({detail:{value}}){
|
||||
console.log("register");
|
||||
console.info(value);
|
||||
app.api("accounts.register")(value).then(res=>{
|
||||
wx.showToast({
|
||||
title: res.message,
|
||||
});
|
||||
wx.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}).catch(error=>{
|
||||
wx.showToast({
|
||||
title: error.toString(),
|
||||
icon: "none"
|
||||
})
|
||||
});
|
||||
},
|
||||
updateLogin: function({detail:{value}}) {
|
||||
this.setData({login: value});
|
||||
},
|
||||
send_code: function(){
|
||||
if (!this.data.login) return;
|
||||
this.countDown();
|
||||
app.client.callApi({
|
||||
name:"accounts.get_verification_code",
|
||||
data:{login: this.data.login,
|
||||
type:1},
|
||||
success:res=>{
|
||||
wx.showToast({
|
||||
title: "发送成功"
|
||||
})
|
||||
}
|
||||
}).catch(console.error);
|
||||
},
|
||||
countDown: function () {
|
||||
let that = this;
|
||||
let countDownNum = 30;
|
||||
that.setData({
|
||||
countDownNum: countDownNum
|
||||
});
|
||||
that.setData({
|
||||
timer: setInterval(function () {
|
||||
countDownNum--;
|
||||
that.setData({
|
||||
countDownNum: countDownNum
|
||||
})
|
||||
if (countDownNum == 0) {
|
||||
clearInterval(that.data.timer);
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "注册"
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
<view class="container">
|
||||
<view class="logo-view">
|
||||
<image class="logo" src="cloud://educoder.6564-educoder-1300855313/images/educoder.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<form class="form-wrap" bindsubmit="register">
|
||||
<view class="input-wrap">
|
||||
<input focus class="form-input"
|
||||
name="login"
|
||||
bindinput="updateLogin"
|
||||
value="{{login}}"
|
||||
placeholder="邮箱或手机号">
|
||||
</input>
|
||||
</view>
|
||||
<view class="input-wrap code">
|
||||
<input class="code form-input"
|
||||
name="code"
|
||||
placeholder="验证码"
|
||||
confirm-hold="{{true}}">
|
||||
</input>
|
||||
<button class="code" bindtap="send_code" disabled="{{countDownNum}}">{{countDownNum?countDownNum+'秒后重试':'获取验证码'}}</button>
|
||||
</view>
|
||||
<view class="input-wrap">
|
||||
<input password
|
||||
name="password"
|
||||
class="form-input"
|
||||
placeholder="输入8-16位密码">
|
||||
</input>
|
||||
</view>
|
||||
<button class="submit" type="main" form-type="submit">注册</button>
|
||||
</form>
|
||||
<navigator class="tappable login" url="../login/login" open-type="redirect">返回登录</navigator>
|
||||
</view>
|
||||
@ -1,46 +0,0 @@
|
||||
.logo-view{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logo{
|
||||
align-self: center;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.input-wrap {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0 -12px;
|
||||
padding: 0 12px;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
.label {
|
||||
color: #999;
|
||||
width: 4.5em;
|
||||
}
|
||||
.form-input {
|
||||
font-size: 18px;
|
||||
line-height: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
input.code{
|
||||
width: 60%;
|
||||
}
|
||||
view.code{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
button.code{
|
||||
display: block;
|
||||
}
|
||||
.submit{
|
||||
margin: 24rpx 36rpx;
|
||||
}
|
||||
.login{
|
||||
position: fixed;
|
||||
right: 36rpx;
|
||||
}
|
||||
|
||||
@ -1,117 +0,0 @@
|
||||
// pages/register/register.js
|
||||
const app = getApp();
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
autologin: true,
|
||||
login: "",
|
||||
countDownNum: 0
|
||||
},
|
||||
save_input: function () {
|
||||
wx.setStorage({
|
||||
key: 'login',
|
||||
data: this.data.login,
|
||||
});
|
||||
wx.setStorage({
|
||||
key: '_password',
|
||||
data: this.data.password,
|
||||
});
|
||||
wx.setStorage({
|
||||
key: 'autologin',
|
||||
data: 1,
|
||||
})
|
||||
},
|
||||
login: function ({login, password}) {
|
||||
app.callApi({
|
||||
name: "accounts.login", data: { login: login, password: password, autologin: 1 },
|
||||
success: res => {
|
||||
console.log("login success");
|
||||
console.log(res);
|
||||
this.save_input();
|
||||
wx.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
fail(error) {
|
||||
wx.showToast({
|
||||
title: error.message,
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
reset_password: function ({ detail: { value } }) {
|
||||
console.log("reset_password");
|
||||
console.info(value);
|
||||
app.api("accounts.reset_password")(value).then(res => {
|
||||
console.info(res);
|
||||
wx.showToast({
|
||||
title: "重置成功",
|
||||
});
|
||||
let url = '../../login/login?login=' + this.data.login;
|
||||
if (this.data.autologin) {
|
||||
this.login({login: value.login, password: value.new_password});
|
||||
return;
|
||||
//url = url + "&password=" + value.new_password + "&autologin=" + "1";
|
||||
}
|
||||
wx.redirectTo({
|
||||
url: url,
|
||||
});
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
wx.showToast({
|
||||
title: error.message,
|
||||
icon: "none"
|
||||
})
|
||||
});
|
||||
},
|
||||
updateAutologin: function(event){
|
||||
console.info(event);
|
||||
this.setData({autologin: !this.data.autologin})
|
||||
},
|
||||
updateLogin: function ({ detail: { value } }) {
|
||||
this.setData({ login: value });
|
||||
},
|
||||
send_code: function () {
|
||||
if(!this.data.login)return;
|
||||
this.countDown();
|
||||
app.callApi({
|
||||
name:"accounts.get_verification_code",
|
||||
data:{login: this.data.login, type:2},
|
||||
success: res => {
|
||||
wx.showToast({
|
||||
title: "发送成功"
|
||||
})
|
||||
}
|
||||
}).catch(console.error);
|
||||
},
|
||||
countDown: function () {
|
||||
let that = this;
|
||||
let countDownNum = 30;
|
||||
that.setData({
|
||||
countDownNum: countDownNum
|
||||
});
|
||||
that.setData({
|
||||
timer: setInterval(function () {
|
||||
countDownNum--;
|
||||
that.setData({
|
||||
countDownNum: countDownNum
|
||||
})
|
||||
if (countDownNum == 0) {
|
||||
clearInterval(that.data.timer);
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
if(options.login){
|
||||
this.setData({login: options.login});
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "找回密码"
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
<view class="container">
|
||||
<view class="logo-view">
|
||||
<image class="logo" src="cloud://educoder.6564-educoder-1300855313/images/educoder.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<form class="form-wrap" bindsubmit="reset_password">
|
||||
<view class="input-wrap">
|
||||
<input focus class="form-input"
|
||||
name="login"
|
||||
bindinput="updateLogin"
|
||||
value="{{login}}"
|
||||
placeholder="邮箱或手机号">
|
||||
</input>
|
||||
</view>
|
||||
<view class="input-wrap">
|
||||
<input password
|
||||
name="new_password"
|
||||
class="form-input"
|
||||
placeholder="输入8-16位新密码">
|
||||
</input>
|
||||
</view>
|
||||
<view class="input-wrap">
|
||||
<input password
|
||||
name="new_password_confirmation"
|
||||
class="form-input"
|
||||
placeholder="再次输入新密码">
|
||||
</input>
|
||||
</view>
|
||||
<view class="input-wrap code">
|
||||
<input class="code form-input"
|
||||
name="code"
|
||||
placeholder="验证码"
|
||||
confirm-hold="{{true}}">
|
||||
</input>
|
||||
<button class="code" bindtap="send_code" disabled="{{countDownNum}}">{{countDownNum?countDownNum+'秒后重试':'获取验证码'}}</button>
|
||||
</view>
|
||||
<checkbox checked="{{autologin}}" bindtap="updateAutologin">重置后自动登录</checkbox>
|
||||
<button class="submit" type="main" form-type="submit">重置密码</button>
|
||||
</form>
|
||||
<navigator class="tappable login" url="../login/login" open-type="redirect">返回登录</navigator>
|
||||
</view>
|
||||
@ -1,46 +0,0 @@
|
||||
.logo-view{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logo{
|
||||
align-self: center;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.input-wrap {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0 -12px;
|
||||
padding: 0 12px;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
.label {
|
||||
color: #999;
|
||||
width: 4.5em;
|
||||
}
|
||||
.form-input {
|
||||
font-size: 18px;
|
||||
line-height: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
input.code{
|
||||
width: 60%;
|
||||
}
|
||||
view.code{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
button.code{
|
||||
display: block;
|
||||
}
|
||||
.submit{
|
||||
margin: 24rpx 36rpx;
|
||||
}
|
||||
.login{
|
||||
position: fixed;
|
||||
right: 36rpx;
|
||||
}
|
||||
|
||||
@ -1,155 +0,0 @@
|
||||
//miniprogram/account/pages/test/test.js
|
||||
//我我我等等是顶顶顶
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
code: `.we-editor{
|
||||
font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
||||
overflow: scroll;
|
||||
white-space: pre;
|
||||
cursor: text;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
.ta{
|
||||
width: auto;
|
||||
background: #002B36;
|
||||
color: #93A1A1;
|
||||
font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
||||
white-space: pre;
|
||||
padding: 12px;
|
||||
}
|
||||
.we-cursor{
|
||||
height: 14px;
|
||||
min-height: 14px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.theme-dark{
|
||||
background-color: #002B36;
|
||||
color: #93A1A1;
|
||||
}
|
||||
.we-line{
|
||||
position: absolute;
|
||||
}
|
||||
.we-word{
|
||||
|
||||
}
|
||||
.theme-dark .we-comment{
|
||||
font-style: italic;
|
||||
color: #657B83;
|
||||
}
|
||||
.theme-dark .we-keyword{
|
||||
color: #859900;
|
||||
}
|
||||
.theme-dark .we-number{
|
||||
color: #D33682;
|
||||
}
|
||||
.theme-dark .we-string{
|
||||
color: #2AA198;
|
||||
}
|
||||
.we-chinese{
|
||||
width: 13.1953px;
|
||||
display: inline-block;
|
||||
}`,
|
||||
lines: [[]],
|
||||
wordWidth: 6.59765,
|
||||
cursor: {
|
||||
row: 0,
|
||||
col: 0,
|
||||
cursor: 0,
|
||||
value: ""
|
||||
}
|
||||
},
|
||||
lines: [""],
|
||||
indent: 0,
|
||||
cursor: 0,
|
||||
getColByValue(value, cursor) {
|
||||
console.log(value, cursor);
|
||||
return value.slice(0, cursor).length * 2 - value.slice(0, cursor).replace(/[\u4e00-\u9fa5]/g, "").length;
|
||||
},
|
||||
|
||||
getCursor(value, col) {
|
||||
var cursor = col;
|
||||
var newCol = this.getColByValue(value, cursor);
|
||||
while (newCol != col) {
|
||||
cursor = cursor - 1;
|
||||
newCol = this.getColByValue(value, cursor);
|
||||
}
|
||||
return cursor;
|
||||
},
|
||||
parseLine(value) {
|
||||
var line = [];
|
||||
for (var word of value.split(/([\u4e00-\u9fa5]+)/)) {
|
||||
var match = word.match(/[\u4e00-\u9fa5]+/)
|
||||
;
|
||||
if (match) {
|
||||
for (var i of word)
|
||||
line.push({ class: "we-chinese", value: i });
|
||||
} else {
|
||||
line.push({ class: "", value: word });
|
||||
}
|
||||
}
|
||||
return line;
|
||||
},
|
||||
onInput(e) {
|
||||
console.log(e);
|
||||
let { keyCodevalue, cursor, value } = e.detail;
|
||||
console.log(e.detail)
|
||||
var row = this.data.cursor.row;
|
||||
if (value.length == 0 && this.data.cursor.row != 0) {
|
||||
var { lines } = this.data;
|
||||
lines.splice(row, 1);
|
||||
var newValue = this.lines[row - 1];
|
||||
this.setData({ lines, "cursor.row": row - 1, "cursor.col": this.getColByValue(newValue), "cursor.value": "" + newValue });
|
||||
this.lines.splice(row, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({ "cursor.col": this.getColByValue(value, cursor) });
|
||||
var line = this.parseLine(value);
|
||||
this.setData({ ['lines[' + this.data.cursor.row + "]"]: line });
|
||||
this.lines[row] = value;
|
||||
var indentMatch = value.match(/(^ *)/)
|
||||
if (indentMatch)
|
||||
this.indent = indentMatch[1].length
|
||||
else
|
||||
this.indent = 0;
|
||||
this.cursor = cursor;
|
||||
//return "";
|
||||
},
|
||||
onTapEditor({ detail: { x, y } }) {
|
||||
//console.log(e);
|
||||
var row = Math.min(Math.round(y / 14), this.data.lines.length - 1);
|
||||
var value = this.lines[row];
|
||||
var col = Math.min(Math.round(x / this.data.wordWidth), this.getColByValue(value));
|
||||
this.cursor = this.getCursor(value, col);
|
||||
this.setData({ "cursor.row": row, "cursor.col": col, "cursor.focus": 1, "cursor.cursor": this.cursor, "cursor.value": value });
|
||||
},
|
||||
onInputConfirm(e) {
|
||||
//console.log(e);
|
||||
var row = this.data.cursor.row;
|
||||
var value = this.lines[row];
|
||||
var rightValue = " ".repeat(this.indent) + value.slice(this.cursor);
|
||||
var leftValue = value.slice(0, this.cursor);
|
||||
var { lines } = this.data;
|
||||
lines.splice(row + 1, 0, this.parseLine(rightValue));
|
||||
lines[row] = this.parseLine(leftValue);
|
||||
this.setData({ lines, "cursor.value": rightValue });
|
||||
this.lines.splice(row + 1, 0, rightValue);
|
||||
this.lines[row] = leftValue;
|
||||
this.setData({ "cursor.cursor": this.indent, "cursor.focus": 2, "cursor.row": row + 1, "cursor.col": this.indent });
|
||||
},
|
||||
onLoad: function (options) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
<!--miniprogram/account/pages/test/test.wxml-->
|
||||
|
||||
<textarea class="ta" maxlength="-1" value="{{code}}">
|
||||
|
||||
</textarea>
|
||||
|
||||
|
||||
<view wx:if="{{false}}" class="we-editor theme-dark" bindtap="onTapEditor">
|
||||
<input class="we-cursor" bindinput="onInput" style="top:{{cursor.row*14}}px;left:{{cursor.col*wordWidth}}px" maxlength="-1" value="{{cursor.value}}" cursor="{{cursor.cursor}}" focus="{{cursor.focus}}" confirm-hold="1" bindconfirm="onInputConfirm"></input>
|
||||
<view class="we-line" style="top:{{index*14}}px" wx:for="{{lines}}" wx:for-item="line" wx:key="index">
|
||||
<block wx:for="{{line}}" wx:for-item="word">
|
||||
<text class="we-word {{word.class}}">{{word.value}}</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
@ -1,55 +0,0 @@
|
||||
.we-editor{
|
||||
font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
||||
overflow: scroll;
|
||||
white-space: pre;
|
||||
cursor: text;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.ta{
|
||||
width: auto;
|
||||
background: #002B36;
|
||||
color: #93A1A1;
|
||||
font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
||||
white-space: pre;
|
||||
padding: 12px;
|
||||
height: 100vh;
|
||||
}
|
||||
.we-cursor{
|
||||
height: 14px;
|
||||
min-height: 14px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.theme-dark{
|
||||
background-color: #002B36;
|
||||
color: #93A1A1;
|
||||
}
|
||||
.we-line{
|
||||
position: absolute;
|
||||
}
|
||||
.we-word{
|
||||
|
||||
}
|
||||
.theme-dark .we-comment{
|
||||
font-style: italic;
|
||||
color: #657B83;
|
||||
}
|
||||
.theme-dark .we-keyword{
|
||||
color: #859900;
|
||||
}
|
||||
.theme-dark .we-number{
|
||||
color: #D33682;
|
||||
}
|
||||
.theme-dark .we-string{
|
||||
color: #2AA198;
|
||||
}
|
||||
.we-chinese{
|
||||
width: 13.1953px;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
<navigator wx:if="{{user_id==2}}" class="nav" style="background:{{bg}}" url="/account/pages/login/login?type=login">
|
||||
<navigator wx:if="{{user_id==2}}" class="nav" style="background:{{bg}}" url="/account/pages/account/account?action=login">
|
||||
点击登录，获取更多内容
|
||||
</navigator>
|
||||
Loading…
Reference in new issue