用uview制作一个简单的表单

这个示例展示了如何使用uView UI库创建一个包含头像、昵称和性别的用户信息编辑表单。用户可以上传头像,输入昵称,并从下拉列表中选择性别。性别数据是从一个包含男、女选项的列表中选取。当用户点击保存修改按钮时,会检查昵称是否为空,然后调用接口更新用户信息。
摘要由CSDN通过智能技术生成
<view class="content">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label-width="75%" :label-position="labelPosition" label="头像" prop="avatar" >
					<u-avatar :src="pic" size="140" @click="uploadpic"></u-avatar>
				</u-form-item>
				<u-form-item label-width="70%" label-align="left" :label-position="labelPosition" label="昵称" prop="nickname">
					<u-input :border="border" placeholder="昵称" v-model="model.nickname" type="text" input-align="center"></u-input>
				</u-form-item>
				<u-form-item>
					<view class="width-92">
					<u-section title="性别" :sub-title="model.gendername" :bold="false" :show-line="false" @click="model.gendershow = true">
					
					</u-section>
					</view>
				</u-form-item>
			</u-form>
</view>
<view class="btn-wrapper">
	<u-button hover-class='other-button-hover'  @click="updateUser" data-name="updateinfo" size="default" type="warning">保存修改</u-button>
</view>

<u-select :default-value="defaultValue" model="single-column" v-model="model.gendershow" :list="genders" @confirm="confirm" @cancel="cancel"></u-select>

以上是view的代码。

.content{padding:20rpx;}.w70{width:70%;}

.btn-wrapper {
		margin-top: 86rpx;
	    padding: 0 66rpx;
		button {
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			margin-bottom: 40rpx;
			border-radius: 120rpx;
			font-size: 30rpx;
			&.btn1 {
				color: #fff;
			}
			&.btn2 {
				color: #666666;
				border: 1px solid #666666;
			}
		}
}

以上是css代码。

genders: [
	{value: '1',label: '男'},
	{value: '2',label: '女'},
],

性别数据列表:

model: {
					nickname:'',
					gendershow: false,
					gender:0,
					gendername:'',
					avatar:'',
					intro: ''
},

窗口数据定义:

uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne('ajax/upload', function(res){
					that.userInfo.avatar = res.data.url;
					that.model.avatar = res.data.url;
					that.pic = that.url+res.data.url;
				});
},

上传文件代码:

updateUser: function(e) {
				let that = this;
				//console.log(that.model);
				if (!that.model.nickname) return that.$util.Tips({
					title: '用户昵称不能为空'
				});
				userEdit(that.model).then(res => {
					return that.$util.Tips({
						title: res.msg,
						icon: 'success'
					}, {
						tab: 3,
						url: 1
					});
				}).catch(msg => {
					return that.$util.Tips({	
						title: msg || '保存失败,您并没有修改'
					}, {
						tab: 3,
						url: 1
					});
				});
			}

提交接口代码。

以上代码用uView实现了一个简单的form包含用户头像,昵称,性别。性别是简单的下拉列表。

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值