123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- <template>
- <view>
- <navbar :config="config" backColor="#666666"></navbar>
- <view class="password-box">
- <text class="password-title">密码设置</text>
- <u-form :model="form" ref="uForm" label-width="156">
- <u-form-item label="支付密码">
- <u-input v-model.trim="form.payPass" type="number" maxlength="6" @input="changePass" placeholder="请输入6位支付密码" />
- </u-form-item>
- <u-form-item label="验证码">
- <u-input v-model="form.captcha" placeholder="本账户手机验证码" />
- <view class="get-code" @click.stop="getCode()">{{ captchaText }}</view>
- </u-form-item>
- </u-form>
- <view class="password-btn" @click.stop="setPayPassword()">
- 确认提交
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- setUpPaymentPassword,
- getVerifyCodeByParam
- } from "@/api/personal-center.js"
- export default {
- data() {
- return {
- config: {
- back: true, //false是tolbar页面 是则不写
- title: '设置支付密码',
- color: '#1A1A1A',
- // autoBack:true,
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [1, "#fff"],
- statusBarFontColor: '#1A1A1A'
- },
- mobile: '',
- captchaText: '获取验证码',
- captchaInterval: null,
- payPasswordLoading: false,
- form: {
- payPass: '',
- captcha: ''
- }
- };
- },
- onShow() {
- this.getUserInfo()
- },
- onUnload() {
- if (uni.getStorageSync('toUrl')) {
- uni.removeStorageSync('toUrl')
- }
- },
- methods: {
- changePass(e) {
- console.log(e, 111)
- if (e) {
- if (e.indexOf('.') != -1) {
- this.form.payPass = e.replace(/\./g, '')
- }
- }
- },
- //获取个人信息
- getUserInfo() {
- let personal = uni.getStorageSync('personal')
- this.mobile = personal ? personal.mobile : '';
- },
- setPayPassword() {
- if (this.payPasswordLoading) {
- return false
- };
- this.payPasswordLoading = true;
- try {
- if (!this.form.payPass) {
- uni.showToast({
- title: '请填写支付密码',
- icon: 'none'
- });
- throw new Error()
- }
- if (this.form.payPass.length < 6) {
- uni.showToast({
- title: '请填写6位支付密码',
- icon: 'none'
- });
- throw new Error()
- }
- if (!this.form.captcha) {
- uni.showToast({
- title: '请填写验证码',
- icon: 'none'
- });
- throw new Error()
- };
- this.$http.put(setUpPaymentPassword, this.form).then(res => {
- uni.showToast({
- title: '支付密码设置成功',
- icon: 'none'
- });
- this.payPasswordLoading = false;
- if (uni.getStorageSync('toUrl')) {
- this.$mUtil.removeCurrenPage()
- }
- }).catch(err => {
- this.payPasswordLoading = false;
- })
- } catch (err) {
- this.payPasswordLoading = false;
- }
- },
- getCode() {
- this.getUserInfo()
- if (!this.mobile) {
- uni.showToast({
- title: '当前账号暂未绑定手机号',
- icon: 'none'
- });
- return false
- }
- if (this.captchaText !== '获取验证码') {
- return false
- }
- this.captchaText = '获取中...'
- try {
- clearInterval(this.captchaInterval)
- } catch {}
- try {
- this.$http.post(getVerifyCodeByParam, {
- mobile: this.mobile,
- verifyCodeType: 2
- }).then(res => {
- let num = 60
- this.captchaInterval = setInterval(() => {
- this.captchaText = `${num}s`;
- num--;
- if (num < 0) {
- clearInterval(this.captchaInterval)
- this.captchaText = '获取验证码'
- }
- }, 1000)
- }).catch(err => {
- this.captchaText = '获取验证码'
- })
- } catch (err) {
- this.captchaText = '获取验证码'
- }
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .password-box {
- padding: 70rpx 50rpx 0;
- .password-title {
- font-size: 38rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- color: #333333;
- }
- .u-form {
- /deep/.u-form-item--left__content__label {
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #333333;
- }
- }
- }
- .password-btn {
- width: 100%;
- height: 90rpx;
- background: #3d93fc;
- border-radius: 45rpx;
- text-align: center;
- line-height: 90rpx;
- font-size: 32rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #ffffff;
- margin-top: 98rpx;
- }
- .get-code {
- // flex-shrink: 0;
- height: 100%;
- padding: 0 30rpx;
- color: #FA6138;
- font-size: 28rpx;
- border: 1rpx solid #3775f6;
- background: #e7eefc;
- border-radius: 4rpx;
- }
- </style>
|