18 changed files with 542 additions and 146 deletions
@ -1,7 +1,7 @@ |
|||||||
<van-popup show="{{ show }}" wx:if="{{type===1}}" custom-style="background: transparent;" bind:close="handleClose"> |
<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> |
<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 class="tip">长按识别二维码关注</view> |
||||||
</view> |
</view> |
||||||
</van-popup> |
</van-popup> |
||||||
|
@ -1 +1,3 @@ |
|||||||
<view class="page"></view> |
<view class="page"> |
||||||
|
产品还没给 |
||||||
|
</view> |
||||||
|
@ -0,0 +1,6 @@ |
|||||||
|
{ |
||||||
|
"usingComponents": { |
||||||
|
"van-icon": "@vant/weapp/icon/index", |
||||||
|
"van-nav-bar": "@vant/weapp/nav-bar/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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -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 @@ |
|||||||
|
<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