kola-web
3 months ago
9 changed files with 405 additions and 6 deletions
@ -1,3 +1,6 @@
@@ -1,3 +1,6 @@
|
||||
{ |
||||
"usingComponents": {} |
||||
"usingComponents": { |
||||
"van-icon": "@vant/weapp/icon/index", |
||||
"van-popup": "@vant/weapp/popup/index" |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,161 @@
@@ -0,0 +1,161 @@
|
||||
.page { |
||||
.container { |
||||
margin-top: 336rpx; |
||||
padding: 64rpx 32rpx 0; |
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.76) 0%, #ffffff 100%) no-repeat top center/100% 186rpx; |
||||
border-radius: 32rpx; |
||||
|
||||
.tel { |
||||
.input { |
||||
padding: 24rpx 48rpx; |
||||
background-color: #f4f7fa; |
||||
border-radius: 96rpx; |
||||
font-size: 32rpx; |
||||
} |
||||
|
||||
.place-input { |
||||
color: #babdc1; |
||||
} |
||||
} |
||||
|
||||
.code-row { |
||||
margin-top: 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 30rpx; |
||||
|
||||
.code { |
||||
flex: 1; |
||||
padding: 24rpx 48rpx; |
||||
background-color: #f4f7fa; |
||||
border-radius: 96rpx; |
||||
font-size: 32rpx; |
||||
} |
||||
|
||||
.place-code { |
||||
color: #babdc1; |
||||
} |
||||
|
||||
.btn { |
||||
flex-shrink: 0; |
||||
padding: 24rpx; |
||||
width: 7em; |
||||
text-align: center; |
||||
color: #fff; |
||||
font-size: 32rpx; |
||||
background-color: #3795f7; |
||||
border-radius: 96rpx; |
||||
} |
||||
} |
||||
|
||||
.protool { |
||||
margin-top: 56rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
color: #999; |
||||
|
||||
.radio { |
||||
transform: scale(0.7); |
||||
} |
||||
|
||||
.link { |
||||
color: #3795f7; |
||||
} |
||||
} |
||||
|
||||
.submit { |
||||
margin-top: 88rpx; |
||||
padding: 22rpx; |
||||
text-align: center; |
||||
font-size: 36rpx; |
||||
color: #fff; |
||||
line-height: 44rpx; |
||||
background: linear-gradient(90deg, #134df6 36%, #3795f7 100%); |
||||
border-radius: 96rpx 96rpx 96rpx 96rpx; |
||||
} |
||||
|
||||
.tel-btn { |
||||
margin: 78rpx auto 0; |
||||
padding: 12rpx 44rpx; |
||||
border-radius: 52rpx; |
||||
width: 352rpx; |
||||
font-size: 32rpx; |
||||
line-height: 40rpx; |
||||
color: rgba(153, 153, 153, 1); |
||||
display: flex; |
||||
gap: 12rpx; |
||||
align-items: center; |
||||
justify-content: center; |
||||
outline: none; |
||||
|
||||
.icon { |
||||
width: 28rpx; |
||||
height: 40rpx; |
||||
} |
||||
|
||||
&::after { |
||||
border: none; |
||||
outline: none; |
||||
} |
||||
} |
||||
|
||||
.visitor { |
||||
margin-top: 196rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 32rpx; |
||||
line-height: 1; |
||||
color: #3795f7; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.popup { |
||||
padding: 33rpx 0 0; |
||||
|
||||
.popup-container { |
||||
padding: 280rpx 48rpx 0; |
||||
width: 622rpx; |
||||
height: 490rpx; |
||||
box-sizing: border-box; |
||||
background: linear-gradient(180deg, #e7f8ff 0%, #ffffff 100%); |
||||
border-radius: 32rpx; |
||||
position: relative; |
||||
|
||||
.badge { |
||||
position: absolute; |
||||
left: 0; |
||||
top: -33px; |
||||
width: 246rpx; |
||||
height: 286rpx; |
||||
} |
||||
|
||||
.title { |
||||
position: absolute; |
||||
top: 50rpx; |
||||
right: 28rpx; |
||||
width: 338rpx; |
||||
height: 164rpx; |
||||
} |
||||
|
||||
.conform { |
||||
height: 88rpx; |
||||
text-align: center; |
||||
background: #3795f7; |
||||
line-height: 88rpx; |
||||
font-size: 36rpx; |
||||
color: #FFFFFF; |
||||
border-radius: 96rpx 96rpx 96rpx 96rpx; |
||||
} |
||||
|
||||
.cancel{ |
||||
margin-top: 10rpx; |
||||
font-size: 32rpx; |
||||
color: #999999; |
||||
text-align: center; |
||||
line-height: 88rpx; |
||||
} |
||||
} |
||||
} |
||||
@ -1,8 +1,144 @@
@@ -1,8 +1,144 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
const app = getApp<IAppOption>(); |
||||
let timer: number | null = 0; |
||||
|
||||
Page({ |
||||
data: {}, |
||||
data: { |
||||
show: true, |
||||
|
||||
menuButtonInfo: {}, |
||||
mobile: "", |
||||
code: "", |
||||
protool: false, |
||||
codeText: "发送验证码", |
||||
}, |
||||
onLoad() {}, |
||||
getCode() { |
||||
if (timer) return; |
||||
const mobile = this.data.mobile; |
||||
if (!mobile) { |
||||
wx.showToast({ |
||||
title: "手机号不能为空", |
||||
icon: "none", |
||||
}); |
||||
return; |
||||
} |
||||
// 验证手机号
|
||||
if (!/^1[3-9,]\d{9}$/.test(mobile)) { |
||||
wx.showToast({ |
||||
title: "手机号格式不正确", |
||||
icon: "none", |
||||
}); |
||||
return; |
||||
} |
||||
wx.ajax({ |
||||
method: "POST", |
||||
url: "?r=takeda/login/send-verify-code", |
||||
data: { |
||||
mobile, |
||||
}, |
||||
}).then(() => { |
||||
wx.showToast({ |
||||
icon: "none", |
||||
title: "验证码已发送~", |
||||
}); |
||||
let time = 60; |
||||
timer = setInterval(() => { |
||||
time--; |
||||
this.setData({ |
||||
codeText: `${time}s后重新发送`, |
||||
}); |
||||
if (time <= 0) { |
||||
clearInterval(timer as number); |
||||
timer = null; |
||||
this.setData({ |
||||
codeText: "发送验证码", |
||||
}); |
||||
} |
||||
}, 1000); |
||||
}); |
||||
}, |
||||
handleSubmit() { |
||||
const { mobile, code, protool } = this.data; |
||||
if (!protool) { |
||||
this.handleNavProtool(); |
||||
return; |
||||
} |
||||
if (!mobile) { |
||||
wx.showToast({ |
||||
title: "请输入手机号", |
||||
icon: "none", |
||||
}); |
||||
return; |
||||
} |
||||
if (!code) { |
||||
wx.showToast({ |
||||
title: "请输入验证码", |
||||
icon: "none", |
||||
}); |
||||
return; |
||||
} |
||||
wx.ajax({ |
||||
method: "POST", |
||||
url: "?r=takeda/login/reg-login", |
||||
data: { |
||||
mobile, |
||||
code, |
||||
}, |
||||
}).then((res) => { |
||||
this.submitCallback(res); |
||||
}); |
||||
}, |
||||
handleWxSubmit(e: any) { |
||||
const { protool } = this.data; |
||||
const { iv, encryptedData } = e.detail; |
||||
if (!protool) { |
||||
return; |
||||
} |
||||
if (iv && encryptedData) { |
||||
wx.ajax({ |
||||
method: "POST", |
||||
url: "?r=takeda/login/wx-reg-login", |
||||
data: { |
||||
iv: encodeURIComponent(iv), |
||||
encryptedData: encodeURIComponent(encryptedData), |
||||
}, |
||||
}).then((res) => { |
||||
this.submitCallback(res); |
||||
}); |
||||
} |
||||
}, |
||||
submitCallback(res) { |
||||
app.globalData.isLogin = 1; |
||||
app.globalData.doctorId = res.doctorId; |
||||
app.waitLogin().then(() => { |
||||
wx.reLaunch({ |
||||
url: "/pages/home/index", |
||||
}); |
||||
}); |
||||
}, |
||||
handleProtool() { |
||||
if (this.data.protool) { |
||||
this.setData({ |
||||
protool: false, |
||||
}); |
||||
} else { |
||||
this.setData({ |
||||
protool: false, |
||||
}); |
||||
wx.navigateTo({ url: "/module1/pages/loginProtool/index" }); |
||||
} |
||||
}, |
||||
handleNavProtool(e) { |
||||
const phone = e?.currentTarget?.dataset?.phone; |
||||
wx.navigateTo({ url: `/module1/pages/loginProtool/index?phone=${phone}` }); |
||||
}, |
||||
|
||||
handleTopic() {}, |
||||
handleCancelTopic() { |
||||
this.setData({ |
||||
show: false, |
||||
}); |
||||
}, |
||||
}); |
||||
|
||||
export {} |
||||
export {}; |
||||
|
||||
@ -0,0 +1,56 @@
@@ -0,0 +1,56 @@
|
||||
<view |
||||
class="page" |
||||
style="background: url('/images/login-bg.png') no-repeat top center/100% 624rpx;padding-top:{{menuButtonInfo.bottom}}px;" |
||||
> |
||||
<view class="container"> |
||||
<view class="tel"> |
||||
<input |
||||
type="number" |
||||
model:value="{{mobile}}" |
||||
placeholder-class="place-input" |
||||
class="input" |
||||
placeholder="请输入手机号" |
||||
/> |
||||
</view> |
||||
<view class="code-row"> |
||||
<input |
||||
type="text" |
||||
placeholder="请输入验证码" |
||||
class="code" |
||||
placeholder-class="place-code" |
||||
model:value="{{code}}" |
||||
type="number" |
||||
/> |
||||
<view class="btn" bind:tap="getCode">{{codeText}}</view> |
||||
</view> |
||||
<view class="protool"> |
||||
<radio class="radio" color="#3795F7" checked="{{protool}}" bind:tap="handleProtool"></radio> |
||||
我已阅读并同意 |
||||
<text class="link" bind:tap="handleNavProtool">《用户隐私协议》</text> |
||||
</view> |
||||
<view class="submit" bind:tap="handleSubmit">登录</view> |
||||
<button wx:if="{{protool}}" class="tel-btn" open-type="getPhoneNumber" bindgetphonenumber="handleWxSubmit"> |
||||
<image class="icon" src="/images/icon-phone.png"></image> |
||||
手机号快捷登录 |
||||
</button> |
||||
<button wx:else class="tel-btn" bind:tap="handleNavProtool" data-phone="1"> |
||||
<image class="icon" src="/images/icon-phone.png"></image> |
||||
手机号快捷登录 |
||||
</button> |
||||
<view class="visitor"> |
||||
游客访问 |
||||
<van-icon name="arrow" /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<van-popup show="{{ show }}" bind:close="onClose" round style="--popup-background-color:transparent;"> |
||||
<view class="popup"> |
||||
<view class="popup-container"> |
||||
<image class="badge" src="/images/login-popup-badge.png"></image> |
||||
<image class="title" src="/images/login-popup-title.png"></image> |
||||
<view class="conform" bind:tap="handleTopic">开始</view> |
||||
<view class="cancel" bind:tap="handleCancelTopic">跳过</view> |
||||
</view> |
||||
</view> |
||||
</van-popup> |
||||
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
{ |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
page { |
||||
background: linear-gradient(180deg, #d2f1fe 0%, rgba(244, 248, 249, 0) 100%) no-repeat top center/100% 442rpx; |
||||
} |
||||
|
||||
.page { |
||||
min-height: 100vh; |
||||
.topic{ |
||||
height: 1232rpx; |
||||
} |
||||
} |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() { |
||||
}, |
||||
}); |
||||
|
||||
export {}; |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
<view |
||||
class="page" |
||||
style="background: url('/images/topic-bg.png') no-repeat {{menuButtonInfo.bottom+62}}rpx center/100% 1284rpx;" |
||||
> |
||||
<view |
||||
class="topic" |
||||
style="background: url("/images/topic-card-bg.png") no-repeat top center/100% 1232rpx" |
||||
></view> |
||||
</view> |
||||
Loading…
Reference in new issue