邓平艺
4 years ago
7 changed files with 638 additions and 32 deletions
-
235components/lf-jpCoded/lf-jpCoded.vue
-
80components/lf-payPassword/lf-payPassword.vue
-
16pages.json
-
22pages/user/agreement/agreement.less
-
51pages/user/agreement/agreement.vue
-
136pages/user/my/setPassword.vue
-
130pages/user/my/verificationPhone.vue
@ -0,0 +1,235 @@ |
|||
<template> |
|||
<view class="wallet_class"> |
|||
<view class="pay-pwd-input" v-if="pawType==='one'" :style="'width:' + width + 'rpx'" @tap="tokey"> |
|||
<view class="pay-pwd-grid uni-flex uni-row" v-for="(value, index) in payPwdGrid" :key="index"> |
|||
<view :style="('width:'+ width1 + 'rpx;') + ((focusType&&(index==list.length))?borderCheckStyle:'') ">{{value.text}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="input-row" v-if="pawType==='two'" :style="'width:' + width + 'rpx'" @tap="tokey"> |
|||
<view class="pay-pwd-grid uni-flex uni-row" v-for="(value, index) in payPwdGrid" :key="index"> |
|||
<view :class="'item'" :style="('width:'+ width1 + 'rpx;') + ((focusType&&(index==list.length))?borderCheckStyle:'') ">{{ value.text }}</view> |
|||
</view> |
|||
</view> |
|||
<input v-if="keyType" :type="inputType" :style="'width:' + width + 'rpx'" :maxlength="places" class="input_info" @input="inputVal" |
|||
@focus="focus" @blur="blur" /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'wallet_category', |
|||
props: { |
|||
pawType: { //输入框样式 |
|||
type: String, |
|||
default: 'one' |
|||
}, |
|||
places: { // 密码框位数 |
|||
type: Number, |
|||
default: 6 |
|||
}, |
|||
width: { |
|||
type: Number, |
|||
default: 750 |
|||
}, |
|||
borderCheckStyle: { |
|||
type: String, |
|||
default: 'border: 1px solid #f00;' |
|||
}, |
|||
codes: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
keyType: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
isPwy:{ |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
inputType:{ |
|||
type: String, |
|||
default: 'number' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
focusType: false, |
|||
width1: 110, |
|||
list: [], |
|||
payPwdGrid: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 组件文档地址：https://ext.dcloud.net.cn/plugin?id=2695 |
|||
this.list = this.codes.split('') |
|||
this.width1 = (this.width - 90) / this.places |
|||
this.payPwdGrid = [] |
|||
for (let a = 0; a < this.places; a++) { |
|||
this.payPwdGrid.push({ |
|||
text: '' |
|||
}) |
|||
} |
|||
if(this.isPwy){ |
|||
for (let a = 0; a < this.list.length; a++) { |
|||
this.payPwdGrid[a].text = '●' |
|||
} |
|||
}else{ |
|||
for (let a = 0; a < this.list.length; a++) { |
|||
this.payPwdGrid[a].text = this.list[a] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
places() { |
|||
this.list = this.codes.split('') |
|||
this.width1 = (this.width - 90) / this.places |
|||
this.payPwdGrid = [] |
|||
for (let a = 0; a < this.places; a++) { |
|||
this.payPwdGrid.push({ |
|||
text: '' |
|||
}) |
|||
} |
|||
if(this.isPwy){ |
|||
for (let a = 0; a < this.list.length; a++) { |
|||
this.payPwdGrid[a].text = '●' |
|||
} |
|||
}else{ |
|||
for (let a = 0; a < this.list.length; a++) { |
|||
this.payPwdGrid[a].text = this.list[a] |
|||
} |
|||
} |
|||
}, |
|||
codes() { |
|||
this.list = this.codes.split('') |
|||
this.payPwdGrid = [] |
|||
for (let a = 0; a < this.places; a++) { |
|||
this.payPwdGrid.push({ |
|||
text: '' |
|||
}) |
|||
} |
|||
if(this.isPwy){ |
|||
for (let a = 0; a < this.list.length; a++) { |
|||
this.payPwdGrid[a].text = '●' |
|||
} |
|||
}else{ |
|||
for (let a = 0; a < this.list.length; a++) { |
|||
this.payPwdGrid[a].text = this.list[a] |
|||
} |
|||
} |
|||
this.$emit('inputVal', this.codes); |
|||
} |
|||
}, |
|||
methods: { |
|||
focus() { |
|||
this.focusType = true |
|||
}, |
|||
blur() { |
|||
this.focusType = false |
|||
}, |
|||
tokey(){ |
|||
this.$emit('tokey'); |
|||
}, |
|||
inputVal(e) { |
|||
let inputValues = e.detail.value; |
|||
this.list = inputValues.split('') |
|||
this.payPwdGrid = [] |
|||
for (let a = 0; a < this.places; a++) { |
|||
this.payPwdGrid.push({ |
|||
text: '' |
|||
}) |
|||
} |
|||
if(this.isPwy){ |
|||
for (let a = 0; a < this.list.length; a++) { |
|||
this.payPwdGrid[a].text = '●' |
|||
} |
|||
}else{ |
|||
for (let a = 0; a < this.list.length; a++) { |
|||
this.payPwdGrid[a].text = this.list[a] |
|||
} |
|||
} |
|||
this.$emit('inputVal', inputValues); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wallet_class { |
|||
position: relative; |
|||
height: 100%; |
|||
|
|||
.pay-pwd-input { |
|||
height: 100%; |
|||
line-height: 100%; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
|
|||
.pay-pwd-grid { |
|||
margin: 0upx auto; |
|||
height: 100%; |
|||
line-height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
view { |
|||
width: 110upx; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: #cececd solid 0.1upx; |
|||
border-radius: 10upx; |
|||
font-size: 36upx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.xaunz { |
|||
border: #f00 solid 0.1upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.input-row { |
|||
height: 100%; |
|||
line-height: 100%; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
|
|||
.pay-pwd-grid { |
|||
margin: 0upx auto; |
|||
height: 100%; |
|||
line-height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.item { |
|||
width: 110rpx; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 36upx; |
|||
font-weight: 600; |
|||
border-bottom: 1px solid #c8c8c8; |
|||
} |
|||
|
|||
.item-active { |
|||
position: relative; |
|||
transform: scale(1.2); |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.input_info { |
|||
width: 1200rpx; |
|||
height: 100%; |
|||
line-height: 100%; |
|||
opacity: 0; |
|||
position: absolute; |
|||
top: 0rpx; |
|||
left: 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,80 @@ |
|||
<template> |
|||
<view class="page"> |
|||
<view class="content"> |
|||
<view class="title">请设置6位支付密码</view> |
|||
<view class="password"> |
|||
<lf-jp-coded :width="686" @inputVal="inputVal"></lf-jp-coded> |
|||
</view> |
|||
</view> |
|||
<button class="btn" hover-class="lf-opacity" @click="comfirm">确认</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import lfJpCoded from '@/components/lf-jpCoded/lf-jpCoded.vue' |
|||
export default { |
|||
components: { |
|||
lfJpCoded |
|||
}, |
|||
data(){ |
|||
return { |
|||
code: '' |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
methods: { |
|||
inputVal(event){ |
|||
this.code = event; |
|||
}, |
|||
comfirm(){ |
|||
if(this.code.length < 6){ |
|||
return this.$msg('请输入完整支付密码'); |
|||
} |
|||
this.$emit('comfirm', this.code); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.page{ |
|||
width: 750rpx; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
background-color: #FFFFFF; |
|||
z-index: 999; |
|||
} |
|||
.content{ |
|||
height: max-content; |
|||
width: 750rpx; |
|||
box-sizing: border-box; |
|||
padding: 0rpx 32rpx 0; |
|||
position: absolute; |
|||
top: 350rpx; |
|||
left: 0; |
|||
.title{ |
|||
font-size: 28rpx; |
|||
color: #222222; |
|||
text-align: center; |
|||
} |
|||
.password{ |
|||
height: 100rpx; |
|||
margin-top: 50rpx; |
|||
} |
|||
} |
|||
.btn{ |
|||
position: absolute; |
|||
width: 550rpx; |
|||
height: 100rpx; |
|||
background: #15716E; |
|||
border-radius: 50rpx; |
|||
bottom: 10vh; |
|||
left: calc(50% - 275rpx); |
|||
line-height: 100rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,136 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav title="设置密码" :showIcon="true"></lf-nav> |
|||
<view class="content"> |
|||
<view class="list"> |
|||
<view class="lf-flex"> |
|||
<input class="input" placeholder="请输入手机号" v-model="phone" maxlength="11" /> |
|||
</view> |
|||
<view class="clear" v-if="phone.length" @click="phone = ''"> |
|||
<text class="lf-iconfont icon--"></text> |
|||
</view> |
|||
</view> |
|||
<view class="list"> |
|||
<view class="lf-flex"> |
|||
<input class="input input-code" placeholder="请输入验证码" maxlength="8" v-model="code" /> |
|||
</view> |
|||
<view class="code" :class="{'active-bg': is_code}" @click="getCode"> |
|||
<text>{{ is_code ? num +'秒后重新获取' : '获取验证码' }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<button class="next-btn" hover-class="lf-opacity" @click="next">下一步</button> |
|||
<lf-pay-password v-if="show_pay" @comfirm="payComfirm"></lf-pay-password> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import lfPayPassword from '@/components/lf-payPassword/lf-payPassword.vue' |
|||
export default { |
|||
components: { |
|||
lfPayPassword |
|||
}, |
|||
data(){ |
|||
return { |
|||
phone: '', |
|||
code: '', |
|||
is_code: false, |
|||
timer: null, |
|||
num: 10, |
|||
show_pay: false |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
onUnload(){ |
|||
if(this.timer){ |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
} |
|||
}, |
|||
methods: { |
|||
getCode(){ |
|||
if(this.is_code) return; |
|||
this.is_code = true; |
|||
if(this.timer){ |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
} |
|||
console.log("测试重复点击", Math.random()) |
|||
// TODO 在此发送网络请求 |
|||
this.timer = setInterval(() => { |
|||
this.num--; |
|||
if(this.num <= 0){ |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
this.num = 10; |
|||
this.is_code = false; |
|||
} |
|||
}, 1000); |
|||
}, |
|||
next(){ |
|||
this.show_pay = true; |
|||
}, |
|||
payComfirm(event){ |
|||
console.log("支付密码为:", event); |
|||
this.show_pay = false; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.content{ |
|||
padding: 0 32rpx; |
|||
} |
|||
.next-btn{ |
|||
width: 550rpx; |
|||
height: 100rpx; |
|||
background: #15716E; |
|||
border-radius: 50rpx; |
|||
position: fixed; |
|||
bottom: 10vh; |
|||
left: calc(50% - 275rpx); |
|||
line-height: 100rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
.list{ |
|||
height: 106rpx; |
|||
width: 100%; |
|||
border-bottom: 1rpx solid #e5e5e5; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
&:nth-child(2n){ |
|||
margin-top: 30rpx; |
|||
} |
|||
.input{ |
|||
width: 540rpx; |
|||
height: 80rpx; |
|||
font-size: 32rpx; |
|||
} |
|||
.input-code{ |
|||
width: 430rpx; |
|||
} |
|||
.clear{ |
|||
padding: 20rpx; |
|||
} |
|||
.code{ |
|||
min-width: 180rpx; |
|||
max-width: 220rpx; |
|||
height: 64rpx; |
|||
padding: 0 4rpx; |
|||
font-size: 24rpx; |
|||
color: #15716E; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 32rpx; |
|||
border: 2rpx solid #15716E; |
|||
} |
|||
.active-bg{ |
|||
background: #efefef; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,130 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav title="旧手机号验证" :showIcon="true"></lf-nav> |
|||
<view class="content"> |
|||
<view class="list"> |
|||
<view class="lf-flex"> |
|||
<view class="lf-font-28 lf-color-black" style="width: 140rpx;">旧手机号</view> |
|||
<input class="input" placeholder="请输入手机号" v-model="phone" maxlength="11" /> |
|||
</view> |
|||
<view class="clear" v-if="phone.length" @click="phone = ''"> |
|||
<text class="lf-iconfont icon--"></text> |
|||
</view> |
|||
</view> |
|||
<view class="list"> |
|||
<view class="lf-flex"> |
|||
<view class="lf-font-28 lf-color-black" style="width: 140rpx;">验证码</view> |
|||
<input class="input input-code" placeholder="请输入验证码" maxlength="8" v-model="code" /> |
|||
</view> |
|||
<view class="code" :class="{'active-bg': is_code}" @click="getCode"> |
|||
<text>{{ is_code ? num +'秒后重新获取' : '获取验证码' }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<button class="next-btn" hover-class="lf-opacity" @click="next">下一步</button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
phone: '', |
|||
code: '', |
|||
is_code: false, |
|||
timer: null, |
|||
num: 10 |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
onUnload(){ |
|||
if(this.timer){ |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
} |
|||
}, |
|||
methods: { |
|||
getCode(){ |
|||
if(this.is_code) return; |
|||
this.is_code = true; |
|||
if(this.timer){ |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
} |
|||
console.log("测试重复点击", Math.random()) |
|||
// TODO 在此发送网络请求 |
|||
this.timer = setInterval(() => { |
|||
this.num--; |
|||
if(this.num <= 0){ |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
this.num = 10; |
|||
this.is_code = false; |
|||
} |
|||
}, 1000); |
|||
}, |
|||
next(){ |
|||
// this.$url('/pages/user/my/setPassword', {type: 'redirect'}); |
|||
this.$url('/pages/user/my/setPassword'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.content{ |
|||
padding: 0 32rpx; |
|||
} |
|||
.next-btn{ |
|||
width: 550rpx; |
|||
height: 100rpx; |
|||
background: #15716E; |
|||
border-radius: 50rpx; |
|||
position: fixed; |
|||
bottom: 10vh; |
|||
left: calc(50% - 275rpx); |
|||
line-height: 100rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
.list{ |
|||
height: 106rpx; |
|||
width: 100%; |
|||
border-bottom: 1rpx solid #e5e5e5; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
&:nth-child(2n){ |
|||
margin-top: 30rpx; |
|||
} |
|||
.input{ |
|||
width: 380rpx; |
|||
height: 80rpx; |
|||
font-size: 32rpx; |
|||
margin-left: 50rpx; |
|||
} |
|||
.input-code{ |
|||
width: 290rpx; |
|||
} |
|||
.clear{ |
|||
padding: 20rpx; |
|||
} |
|||
.code{ |
|||
min-width: 180rpx; |
|||
max-width: 220rpx; |
|||
height: 64rpx; |
|||
padding: 0 4rpx; |
|||
font-size: 24rpx; |
|||
color: #15716E; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 32rpx; |
|||
border: 2rpx solid #15716E; |
|||
} |
|||
.active-bg{ |
|||
background: #efefef; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue