设计添加页面

一、添加页面

业务代码如下：

<script>
	import menuDraw from '../template/menu_draw.vue';
	export default{
		components:{
			menuDraw
		},
		data(){
			return{
				user:{
					phone:null,
					pwd:'123456',
					nickName:null,
					msg:null//提示的文字
				}
				
			}
		},
		methods:{
			//保存用户
			save(){
				if(this.user.nickName==null&&this.user.phone==null){
					this.user.msg="不能为空";
					this.open();
				}else{
					uni.request({
					    url: 'http://localhost:8070/user/regedit/'+this.user.phone+'/'+this.user.pwd+'/'+this.user.nickName, 
					    success: (res) => {
					         console.log(res.data);
							 
							 if(res.data.code==200){
								 uni.redirectTo({
								 	url: '../user/user_list'
								 });
							 }else{
								 this.user.msg=res.data.msg;
								 this.open();
							 }
					        
					    }
					});
				}
			
			},
			//返回
			doBack(){
				uni.redirectTo({
					url: '../user/user_list'
				});
			},
			//打开弹窗
		open() {
		this.$refs.popup.open()
	   },
	   //关闭弹窗
	   close() {
		this.$refs.popup.close()
	   }
		}
	}
</script>

 页面UI代码如下:

​

<template>
	<view>
	<!--写页面UI-->
	<uni-nav-bar backgroundColor="#d3233b" color="#ffffff" title="睿智法务" leftText="返回" rightText="设置"></uni-nav-bar>
	<view style="width: 350rpx; margin-left: auto; margin-right: auto; margin-top: 80rpx;">
		<uni-forms :modelValue="userData">
			<input v-model="userData.phone" singleline="true" type="number" placeholder="请输入手机号" class="input_str"/>
			<input v-model="userData.pwd" singleline="true" type="password" placeholder="请输入密码" class="input_str"/>
		</uni-forms>
		<button @click="doLogin" type="primary" size="mini" style="margin-right:20rpx;">登录</button>
		
		<uni-popup ref="popup" type="dialog">
		<uni-popup-dialog mode="base" title="通知" content="手机号或密码错误" :duration="2000" :before-close="true" @close="close" @confirm="close">			
		</uni-popup-dialog>
		</uni-popup>
	</view>
</view>
</template>

[点击并拖拽以移动]
​

CSS样式代码如下：

<style>
	.input_str{
		border:1px solid #000000; 
		  border-radius: 5rpx; 
		  height: 30px; 
		  line-height: 30rpx;
		  padding: 10rpx; 
		  margin-bottom: 15rpx;
		  border-radius: 15rpx;
	}
</style>

添加页面要注意的是用v-model和你的数据双向绑定起来

url:'user_update?id='+id   跨页面传值

二、展示页面