wx_mini_app/components/editUserInfo/editPayPassWord/editPayPassWord.vue

<template>
<view>
    <u-cell title="1xx****xxxx"></u-cell>
    <u--input placeholder="密码" border="surround" v-model="value"
	@change="change"
	:customStyle="{height: '40px'}"
	></u--input>
    <u--input placeholder="确认密码" border="surround" v-model="value" @change="change" :customStyle="{height: '40px'}"></u--input>
    <u-input placeholder="后置插槽" :customStyle="{height: '40px'}">
        <template slot="suffix">
            <u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
            <u-button @tap="getCode" :text="tips" type="primary" size=""></u-button>
        </template>
    </u-input>
	<div class="save-btn">
        <u-button type="primary">立即设置</u-button>
    </div>
</view>
</template>

<script>
export default {
    data() {
        return {
			tips: '发送验证码',
        }
    },
    methods: {
		change() {
			console.log(this.value);
		},
		codeChange(text) {
			console.log('codeChange');
			this.tips = text
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
    }
}
</script>

<style lang="scss" scoped>
.save-btn{
	text-align:center;
	// margin-top:20px;
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 30px;
	box-sizing: border-box;
}
</style>