kola-web
3 months ago
9 changed files with 405 additions and 6 deletions
@ -1,3 +1,6 @@ |
|||||||
{ |
{ |
||||||
"usingComponents": {} |
"usingComponents": { |
||||||
|
"van-icon": "@vant/weapp/icon/index", |
||||||
|
"van-popup": "@vant/weapp/popup/index" |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -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 @@ |
|||||||
const _app = getApp<IAppOption>(); |
const app = getApp<IAppOption>(); |
||||||
|
let timer: number | null = 0; |
||||||
|
|
||||||
Page({ |
Page({ |
||||||
data: {}, |
data: { |
||||||
|
show: true, |
||||||
|
|
||||||
|
menuButtonInfo: {}, |
||||||
|
mobile: "", |
||||||
|
code: "", |
||||||
|
protool: false, |
||||||
|
codeText: "发送验证码", |
||||||
|
}, |
||||||
onLoad() {}, |
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 @@ |
|||||||
|
<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,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 @@ |
|||||||
|
const _app = getApp<IAppOption>(); |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: {}, |
||||||
|
onLoad() { |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export {}; |
||||||
@ -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