kola-web
3 months ago
18 changed files with 542 additions and 146 deletions
@ -1,7 +1,7 @@
@@ -1,7 +1,7 @@
|
||||
<van-popup show="{{ show }}" wx:if="{{type===1}}" custom-style="background: transparent;" bind:close="handleClose"> |
||||
<view class="popup1" style="background: url('/images/popup1-bg.png') no-repeat top center/100%;"> |
||||
<view class="popup1" style="background: url('/images/popup1-bg.png') no-repeat top center/100%"> |
||||
<view class="title">关注适中健康微信公众号</view> |
||||
<image class="code" src="/images/place.png" show-menu-by-longpress></image> |
||||
<image class="code" :src="{{params.mpPicture}}" show-menu-by-longpress></image> |
||||
<view class="tip">长按识别二维码关注</view> |
||||
</view> |
||||
</van-popup> |
||||
|
||||
@ -1 +1,3 @@
@@ -1 +1,3 @@
|
||||
<view class="page"></view> |
||||
<view class="page"> |
||||
产品还没给 |
||||
</view> |
||||
|
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
{ |
||||
"usingComponents": { |
||||
"van-icon": "@vant/weapp/icon/index", |
||||
"van-nav-bar": "@vant/weapp/nav-bar/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; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,95 @@
@@ -0,0 +1,95 @@
|
||||
const app = getApp<IAppOption>(); |
||||
let timer: number | null = 0; |
||||
|
||||
Page({ |
||||
data: { |
||||
menuButtonInfo: {}, |
||||
mobile: '', |
||||
code: '', |
||||
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=shizhong/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 } = this.data; |
||||
if (!mobile) { |
||||
wx.showToast({ |
||||
title: '请输入手机号', |
||||
icon: 'none', |
||||
}); |
||||
return; |
||||
} |
||||
if (!code) { |
||||
wx.showToast({ |
||||
title: '请输入验证码', |
||||
icon: 'none', |
||||
}); |
||||
return; |
||||
} |
||||
wx.ajax({ |
||||
method: 'POST', |
||||
url: '?r=shizhong/login/reg-login', |
||||
data: { |
||||
mobile, |
||||
code, |
||||
}, |
||||
}).then(() => { |
||||
this.submitCallback(); |
||||
}); |
||||
}, |
||||
submitCallback() { |
||||
app.globalData.isLogin = 1; |
||||
wx.reLaunch({ |
||||
url: '/pages/home/index', |
||||
}); |
||||
}, |
||||
handleBack(){ |
||||
wx.navigateBack() |
||||
} |
||||
}); |
||||
|
||||
export {}; |
||||
@ -0,0 +1,35 @@
@@ -0,0 +1,35 @@
|
||||
<van-nav-bar |
||||
right-text="按钮" |
||||
left-arrow |
||||
fixed |
||||
custom-style="background:transparent;" |
||||
bind:click-left="handleBack" |
||||
/> |
||||
<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="submit" bind:tap="handleSubmit">切换账号</view> |
||||
</view> |
||||
</view> |
||||
Loading…
Reference in new issue