123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- <template>
- <view class="paymentPwd-container">
- <text class="pwd-describe">{{nowSetp == 1 ? '请设置6位数字支付密码' : nowSetp == 2 ? '请再次输入密码' : ''}}</text>
- <view class="sms-item" @click="showKeyboard=!showKeyboard">
- <u-message-input mode="bottomLine" :maxlength="6" v-model="value" :dot-fill="true" :disabled-keyboard="true"></u-message-input>
- </view>
- <!-- 数字键盘 -->
- <u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
- </view>
- </template>
- <script>
- import {setPayPwd, changePayPwd} from '@/api/order.js'
- import md5 from 'md5'
- export default {
- data() {
- return {
- nowSetp: 1, // 当前第几次设置密码
- value: '', //输入的内容
- showKeyboard: false, // 是否打开键盘
- oPwd: '', // 第一次密码
- tPwd: '', // 第二次密码
- oldPwd: '', // 原密码
- mobile: '', // 用户手机号
- verifiCode: '', // 短信验证码
- }
- },
- onShow() {
- },
- onLoad(option) {
- if (option.code){
- this.mobile = option.mobile
- this.verifiCode = option.code
- this.oldPwd = ''
- }
- if (option.oldPwd){
- this.oldPwd = option.oldPwd
- }
- //因为此时实例没有挂载完成,需要延迟操作
- setTimeout(() => {
- this.showKeyboard = true
- }, 50)
- },
- watch: {
- // 监听输入框输入长度
- value: {
- handler(newVal) {
- if(newVal.length==6) {
- if(this.nowSetp == 1){
- this.oPwd = this.value
- if(this.oldPwd && this.oPwd === this.oldPwd) {
- uni.showToast({
- title: '新密码与原密码相同,请重新输入!',
- icon: 'none'
- })
- this.value = ''
- return false
- } else {
- this.value = ''
- this.nowSetp++
- this.showKeyboard = true
- }
- }else if(this.nowSetp == 2){
- this.tPwd = this.value
- this.showKeyboard = false
- this.checkPwd()
- }
- }
- },
- deep: true
- }
- },
- methods:{
- // 按键被点击(点击退格键不会触发此事件)
- valChange(val) {
- // 将每次按键的值拼接到value变量中,注意+=写法
- if(this.value.length < 6){
- this.value += val
- }
- },
- // 退格键被点击
- backspace() {
- // 删除value的最后一个字符
- if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
- },
- // 密码校验
- checkPwd(){
- if(this.oPwd == this.tPwd){
- if(this.oldPwd) {
- this.changePsw()
- } else{
- // 设置密码 请求接口
- this.setPsw()
- }
-
- }else{
- uni.showToast({ title: '两次密码不一致请重新输入', icon: 'none' })
- this.value = ''
- this.showKeyboard = true
- }
- },
- // 首次设置密码
- setPsw () {
- let params = {
- mobile: this.mobile,
- verifiCode: this.verifiCode,
- payPassword: md5(this.value)
- }
- console.log(params,'--------mima')
- setPayPwd(params).then(res=>{
- if(res.status==200) {
- uni.showToast({ title: res.message, icon: 'none' })
- uni.$emit('setPswSuccess', {success: true})
- setTimeout(()=>{
- uni.navigateBack({
- delta: 1
- })
- }, 2000)
- }
- })
- },
- // 修改密码
- changePsw () {
- let params = {
- oldPayPassword: md5(this.oldPwd),
- payPassword: md5(this.value)
- }
- changePayPwd(params).then(res=>{
- if(res.status==200) {
- uni.showToast({ title: res.message, icon: 'none' })
- setTimeout(()=>{
- uni.navigateBack({
- delta: 1
- })
- }, 2000)
- }
- })
- },
- // 取消
- cancel(){
- this.oPwd = ''
- this.tPwd = ''
- this.value = ''
- this.nowSetp = 1
- }
- }
- }
- </script>
- <style lang="less">
- .paymentPwd-container{
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- background-color: #fff;
- .pwd-describe{
- display: block;
- color: #606266;
- padding: 80rpx 0 70rpx;
- text-align: center;
- }
- .btn-con{
- display: flex;
- justify-content: space-between;
- padding-top: 130rpx;
- .handle-btn{
- display: inline-block;
- width: 45%;
- margin: 0 auto;
- text-align: center;
- }
- }
- }
- </style>
|