zx_bms_uni/myPages/pages/setPassword/setPassword.vue

<template>
    <!-- myPages/pages/setPassword/setPassword.wxml -->
    <view class="container">
        <view class="set-container">
            <form @submit="bindSubmit">
                <view class="form-container">
                    <view class="form-item">
                        <image src="/static/resource/images/shouji.png" class="form-img"></image>
                        <input type="text" name="username" :placeholder="$t('请输入手机号')" class="form-input" :value="username" @input="bindUsernameInput" />
                        <!-- image wx:if="{{ username }}" src="/resource/images/x.png" class="form-img-right" bindtap="bindUsernameClear"></image -->
                    </view>
                    <view class="form-item code-form">
                        <image src="/static/resource/images/duanxin.png" class="form-img"></image>
                        <input type="text" name="code" :placeholder="$t('请输入验证码')" class="form-input" />
                        <view class="code-button" @tap="bindSendCode">
                            <text class="code-text">{{ sec == 0 ? $t('获取验证码') : sec + $t('s后重发') }}</text>
                        </view>
                        <!-- image wx:if="{{ username }}" src="/resource/images/x.png" class="form-img-right" bindtap="bindUsernameClear"></image -->
                    </view>
                    <view class="form-item">
                        <image src="/static/resource/images/mima.png" class="form-img"></image>
                        <input type="text" password name="password" :placeholder="$t('请输入密码')" class="form-input" />
                        <!-- image wx:if="{{ password }}" src="/resource/images/x.png" class="form-img-right" bindtap="bindPasswordClear"></image -->
                    </view>
                    <view class="form-item">
                        <image src="/static/resource/images/mima.png" class="form-img"></image>
                        <input type="text" password name="password2" :placeholder="$t('请确认密码')" class="form-input" />
                        <!-- image wx:if="{{ password }}" src="/resource/images/x.png" class="form-img-right" bindtap="bindPasswordClear"></image -->
                    </view>
                    <view class="form-btn">
                        <button class="login-btn" form-type="submit">{{$t('确定')}}</button>
                    </view>
                </view>
            </form>
        </view>
    </view>
</template>

<script>
// myPages/pages/setPassword/setPassword.js
var config = require('../../../common/config.js');
var http = require('../../../common/http.js');
var common = require('../../../common/common.js');
var storage = require('../../../common/storage.js');
export default {
    data() {
        return {
            username: '',
            sec: 0,
            secTimer: null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t('设置密码')
		});
	},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        bindUsernameInput: function (e) {
            this.setData({
                username: e.detail.value
            });
        },

        bindSendCode() {
            if (this.sec == 0) {
                this.setData({
                    sec: 60
                });
                this.secTimer = setInterval(() => {
                    if (this.sec > 0) {
                        this.setData({
                            sec: this.sec - 1
                        });
                    } else {
                        clearInterval(this.secTimer);
                    }
                }, 1000);
                http.postApi(
                    config.API_USER_VERIFY_CODE,
                    {
                        phone: this.username
                    },
                    (resp) => {
                        if (resp.data.code === 200) {
                        } else {
                            common.simpleToast(this,resp.data.msg);
                        }
                    }
                );
            }
        },

        bindSubmit(e) {
            console.log(e.detail.value);
            const username = e.detail.value.username;
            const code = e.detail.value.code;
            const password = e.detail.value.password;
            const password2 = e.detail.value.password2;
            if (common.isEmpty(username)) {
                common.simpleToast(this,this.$t('请输入手机号'));
                return;
            }
            if (common.isEmpty(code)) {
                common.simpleToast(this,this.$t('请输入验证码'));
                return;
            }
            if (common.isEmpty(password)) {
                common.simpleToast(this,this.$t('请输入密码'));
                return;
            }
            if (password != password2) {
                common.simpleToast(this,this.$t('两次输入密码不一致'));
                return;
            }
            http.postApi(
                config.API_USER_CHANGE_PASSWORD,
                {
                    phone: username,
                    code: code,
                    password: password
                },
                (resp) => {
                    if (resp.data.code === 200) {
                        common.simpleToast(this,this.$t('设置成功'));
                        setTimeout(function () {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 1500);
                    } else {
                        common.simpleToast(this,resp.data.msg);
                    }
                }
            );
        }
    }
};
</script>
<style>
@import './setPassword.css';
</style>