用uview制作一个简单的表单

<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包含用户头像，昵称，性别。性别是简单的下拉列表。

标签：url,res,代码,uview,表单,util,model,制作,Tips
来源： https://blog.csdn.net/u010261924/article/details/119647056