uni-app修改密码功能 (包括请求接口返回输入数据)

uni-app修改密码功能

后端设置接口需要我们返回当前密码，新的密码，确认新密码
接口由后端提供，在此不做过多解释

功能效果图：

样式和布局我就不讲了

1、新建ch-password.vue文件后

中代码如下

<template>
	<view id="contianer">
		<view>
			<view class="title">当前密码</view>
			<view style="display: flex; width: 100%;" class="input">
				<input placeholder="请输入当前密码" placeholder-style="font-size:26rpx;color:#ACACAC;" type="password" name="input" v-model="password" />
			</view>
		</view>
		<view>
			<view class="title">新的密码</view>
			<view class="input">
				<input placeholder="请输入新的密码" placeholder-style="font-size:26rpx;color:#ACACAC;" type="password" name="input" v-model="newPassword" />
			</view>
		</view>
		<view>
			<view class="title">确认密码</view>
			<view class="input">
				<input placeholder="请确认新的密码" placeholder-style="font-size:26rpx;color:#ACACAC;" type="password" name="input" v-model="confirmPassword" />
			</view>
		</view>
		<view style="margin-top: 60rpx;"><button class="button" @tap="doChangePwd()">确认修改</button></view>
	</view>
</template>

代码讲解：

在input中的 ( placeholder-style=" " ) 可以改input中 placeholder 提示词的大小和颜色

这的 v-model=" " 用于双向数据绑定，后续在data中初始化，传回给后台

@tap=“doChangePwd()” 用于手中触摸时触发，可以用@click但在此处不建议，有些许延迟

代码中css部分

代码如下

<style scoped>
	page{
	  height:100%
	}
	#contianer {
		padding-top: 1rpx;
		position: relative;
		height: 100%;
		/* 本页面背景颜色 */
		background-color: #F5F5F5;
	}
	.title {
		color: #696969;
		margin: 15rpx 20rpx;
	}
	.input {
		padding: 20rpx 20rpx;
		background-color: #fff;
	}
	.button {
		width: 93%;
		color: #fff;
		background-color: #00BFFF;
	}
</style>

代码中script如下

<script>
	export default {
		data() {
			return {
				password:'',
				newPassword:'',
				confirmPassword:''
			}
		},
		methods: {
			async doChangePwd(){
				let that = this;
				const res = await that.$myRequest({
					url: '/api/mobile/schoolstudent/session/password',
					method:'PATCH',
					data: {
						password: that.password,
						newPassword: that.newPassword,
						confirmPassword: that.confirmPassword
					},
				})
				console.log(res)
				// 如果请求成功，则弹出提示语 "修改成功" 不懂showToast用法可以搜
				if (res.success) {
					uni.showToast({
						icon: "none",
						title: "修改成功"
					})
					// removeStorageSync: 从本地缓存中同步移除指定 token
					uni.removeStorageSync('student_access_token');
					// redirectTo ：跳转 
					uni.redirectTo({
						url:'../my/my'
					})
					
				} else {
					uni.showToast({
						icon: "none",
						title: "修改失败"
					})
				}
				
			}
			
		}
	}
</script>

粗略讲解

在 input 中用v-model进行双向数据绑定后，需要在data中初始化一下，同时也是用来装数据

data() {
	return {
		password:'',
		newPassword:'',
		confirmPassword:''
	}
},

在 button 按钮中用@tap进动态传参触发时间后，再在methods中写入方法，触发时调用此方法

用于判断是否登录的方法已封装好，如下：（common/api/my_request.js）

//访问服务端的根路径
const BASE_URL = '自己写自己的'

//对uniapp的请求进行全局封装，方便进行统一调用
export const myRequest = (options) => {
     // getStorageSync 获取token
	var token = uni.getStorageSync('student_access_token') || '';
	return new Promise((resolve,reject)=>{
		uni.showLoading({
		    title: '努力加载中'
		});
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',//默认是get
			data: options.data || {},
			header: {'student_access_token': token},
			success: (res) => {			
				resolve(res.data)
			},
			fail: (err) => {
				uni.showToast({
					title: "请求接口失败"
				})
				reject(err)
			},
			complete: ()=> {
				uni.hideLoading();//隐藏 loading 提示框。
			}
		})
	})	
}