161 lines
3.5 KiB
Vue
161 lines
3.5 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 顶部导航栏 -->
|
|
<custom-navbar :title="title"
|
|
:showBack="true"></custom-navbar>
|
|
<!-- 验证步骤 -->
|
|
<view class="yanzheng" v-if="step == 1">
|
|
<view class="phont-cont">
|
|
<image src="/static/images/phone_icon.png" class="phone-img" mode="aspectFit"></image>
|
|
<text class="phone">188****8594</text>
|
|
<text class="tip">当前手机号码</text>
|
|
</view>
|
|
<view class="box-margin"></view>
|
|
<view class="getcode">
|
|
<view class="code">
|
|
<image src="/static/images/sign-grew.png" mode="aspectFit" class="code-icon"></image>
|
|
<input type="text" class="code-text" placeholder="请输入验证码" />
|
|
<view class="code-btn">
|
|
获取验证码
|
|
</view>
|
|
</view>
|
|
<view class="btn-box" @click="step = 2">
|
|
<text class="btn-text">下一步</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 设置支付密码 -->
|
|
<view class="setpay" v-else-if="step == 2">
|
|
<view class="pay-cont">
|
|
<text class="newpay">设置新密码</text>
|
|
<text class="tip">请设置新支付密码，用于支付验证</text>
|
|
</view>
|
|
<view class="pay-code">
|
|
<input type="text" class="pay-inp" />
|
|
<input type="text" class="pay-inp" />
|
|
<input type="text" class="pay-inp" />
|
|
<input type="text" class="pay-inp" />
|
|
<input type="text" class="pay-inp" />
|
|
<input type="text" class="pay-inp" />
|
|
</view>
|
|
<view class="btn-box" @click="step = 3">
|
|
<text class="btn-text">下一步</text>
|
|
</view>
|
|
</view>
|
|
<!-- 设置支付密码 -->
|
|
<view class="setpay" v-else-if="step == 3">
|
|
<view class="pay-cont">
|
|
<text class="newpay">确认支付密码</text>
|
|
<text class="tip">请确认新支付密码</text>
|
|
</view>
|
|
<view class="pay-code">
|
|
<input type="text" class="pay-inp" />
|
|
<input type="text" class="pay-inp" />
|
|
<input type="text" class="pay-inp" />
|
|
<input type="text" class="pay-inp" />
|
|
<input type="text" class="pay-inp" />
|
|
<input type="text" class="pay-inp" />
|
|
</view>
|
|
<view class="btn-box" @click="">
|
|
<text class="btn-text">保存</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: '修改密码',
|
|
step: 1,
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
.box-margin {
|
|
height: 24rpx;
|
|
background-color: #fafafa;
|
|
}
|
|
.phont-cont {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 80rpx 0;
|
|
}
|
|
.phone-img {
|
|
width: 124rpx;
|
|
height: 124rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.phone,.newpay {
|
|
font-size: 40rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.tip {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #91908F;
|
|
}
|
|
.getcode {
|
|
background-color: #fff;
|
|
}
|
|
.code {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx 24rpx;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
.code-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
.code-text {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.code-btn {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #FF4767;
|
|
}
|
|
.pay-cont {
|
|
padding-top: 168rpx;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.pay-code {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-top: 48rpx;
|
|
}
|
|
.pay-inp {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #F5F6F8;
|
|
text-align: center;
|
|
}
|
|
</style>
|