DIY可视化实现uniapp+易语言CCHTTP实现表单提交

<template>
	<view class="container">
		<form @submit="submitForm" class="flex diygw-form diygw-col-24">
			<view class="diygw-form-item diygw-col-24">
				<view class="title"> 搜索 </view>
				<view class="input">
					<input class="flex1" name="title" comfirm-type="done" type="text" v-model="title" placeholder="请输入提示信息" />
				</view>
			</view>
			<view class="diygw-form-item diygw-col-24">
				<view class="title"> 用 户名 </view>
				<view class="input">
					<input class="flex1" name="username" comfirm-type="done" type="text" v-model="username" placeholder="请输入提示信息" />
				</view>
			</view>
			<view class="diygw-form-item diygw-col-24 noborder">
				<view class="title"> 标题 </view>
				<view class="input">
					<textarea class="flex1" name="textarea" v-model="textarea" placeholder="请输入提示信息"></textarea>
				</view>
			</view>
			<view class="diygw-form-item diygw-col-24">
				<view class="title title-mb5"> 标题 </view>
				<view class="input">
					<radio-group class="flex flex-wrap check-green diygw-col-24 justify-between" @change="changeRadio" name="radio">
						<label v-for="(item, index) in radioDatas" class="diygw-radio-label">
							<radio class="diygw-radio" :value="item.value" :checked="item.checked"> </radio>
							<view class="diygw-icon-radio" :class="item.checked ? 'checked' : ''"></view>
							<view class="diygw-checkbox-text">
								{{ item.label }}
							</view>
						</label>
					</radio-group>
					<input hidden type="hidden" name="radioLabel" :value="radioLabel" />
				</view>
			</view>
			<view class="diygw-form-item diygw-col-24">
				<view class="title"> 昵称 </view>
				<view class="input">
					<input class="flex1" name="nickname" comfirm-type="done" type="text" v-model="nickname" placeholder="请输入提示信息" />
				</view>
			</view>
			<view class="flex diygw-col-24">
				<button form-type="submit" class="diygw-btn green flex1 margin-xs button-button-clz">按钮</button>
			</view>
		</form>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				title: '',
				username: '',
				textarea: '',
				radioDatas: [
					{ value: '1', label: '选项一', checked: true },
					{ value: '2', label: '选项二', checked: false },
					{ value: '3', label: '选项三', checked: false }
				],
				radio: '1',
				radioLabel: '',
				nickname: ''
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			async submitForm(e) {
				this.validateForm = this.Validate({});
				if (!this.validateForm.checkForm(e)) {
					let data = this.validateForm.errorList[0];
					this.showToast(data.msg, 'none');
					return false;
				} else {
					//保存数据
					let param = e.detail.value;

					let res = await this.$http.post('/api/form', param, {}, 'json');
					if (res.code == 200) {
						this.showToast(res.msg, 'success');
					} else {
						this.showModal(res.msg);
					}
				}
			},
			changeRadio(evt) {
				let value = evt.detail.value;
				let radioDatas = this.radioDatas;

				let radioLabel = this.radioLabel;
				for (var i = 0, len = radioDatas.length; i < len; ++i) {
					radioDatas[i].checked = radioDatas[i].value == value;
					if (radioDatas[i].checked) {
						radioLabel = radioDatas[i].label;
					}
				}
				this.radioLabel = radioLabel;
				this.radioDatas = radioDatas;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.button-button-clz {
		margin: 3px !important;
	}
	.container {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
	.container {
	}
</style>

 快速可视化生成uniapp源码

 

 

 DIY可视化实现uniapp+易语言CCHTTP实现表单提交，uniapp源码，你只需要画原型即可，画完原型即输出代码。