FirstUI-vue/pages/component/form/formItem/formItem.vue

<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186  14    0725  4  9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="fui-wrap">
		<view class="fui-page__hd">
			<view class="fui-page__title fui-align__center" @tap="vip">FormItem<image
					src="/static/images/index/light/icon_member_3x.png"></image>
			</view>
			<view class="fui-page__desc">FormItem 表单项，主要用于表单组件相关布局使用。</view>
		</view>
		<view class="fui-page__bd">
			<view class="fui-section__title">基础使用</view>
			<fui-form>
				<fui-form-item label="活动名称">
					<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入活动名称"></fui-input>
				</fui-form-item>
				<fui-form-item label="手机号码">
					<input class="fui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
				</fui-form-item>
				<fui-form-item label="即时配送">
					<fui-switch :scaleRatio="0.9"></fui-switch>
				</fui-form-item>
				<fui-form-item label="活动性质">
					<fui-checkbox-group>
						<fui-label inline>
							<fui-checkbox value="1"></fui-checkbox>
							<fui-text :size="28" text="地推活动" :padding="['0','30rpx','0','16rpx']"></fui-text>
						</fui-label>
						<fui-label inline>
							<fui-checkbox value="2"></fui-checkbox>
							<fui-text :size="28" text="美食活动" :padding="['0','16rpx']"></fui-text>
						</fui-label>
					</fui-checkbox-group>
				</fui-form-item>
				<fui-form-item label="特殊资源">
					<fui-radio-group>
						<fui-label>
							<fui-radio value="1"></fui-radio>
							<fui-text :size="28" text="线上品牌方赞助" :padding="['0','30rpx','0','16rpx']"></fui-text>
						</fui-label>
						<fui-label :margin="['32rpx','0','0']">
							<fui-radio value="2"></fui-radio>
							<fui-text :size="28" text="线下场地免费" :padding="['0','16rpx']"></fui-text>
						</fui-label>
					</fui-radio-group>
				</fui-form-item>
				<fui-form-item label="评分">
					<fui-rate></fui-rate>
				</fui-form-item>
				<fui-form-item label="上传图片" :padding="['28rpx','32rpx','8rpx']">
					<fui-upload></fui-upload>
				</fui-form-item>
				<view class="fui-section__title">必填星号</view>
				<fui-form-item label="姓名" asterisk>
					<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入姓名"></fui-input>
				</fui-form-item>
				<fui-form-item label="手机号码" asterisk>
					<input class="fui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
				</fui-form-item>
				<view class="fui-section__title">星号居右</view>
				<fui-form-item asterisk-position="right" label="身份证" asterisk>
					<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入身份证"></fui-input>
				</fui-form-item>
				<fui-form-item asterisk-position="right" label="手机号码" asterisk>
					<input class="fui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
				</fui-form-item>
				<view class="fui-section__title">label右对齐</view>
				<fui-form-item label-align="right" asterisk-position="right" label="姓名" asterisk>
					<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入姓名"></fui-input>
				</fui-form-item>
				<fui-form-item label-align="right" asterisk-position="right" label="手机号码" asterisk>
					<input class="fui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
				</fui-form-item>
				<view class="fui-section__title">选择</view>
				<fui-form-item label="活动时间" asterisk arrow highlight @click="onTap(1)">
					<fui-input :borderBottom="false" :padding="[0]" :disabled="true" placeholder="请选择时间"
						backgroundColor="transparent"></fui-input>
				</fui-form-item>
				<fui-form-item label="地区" arrow highlight @click="onTap(2)">
					<input class="fui-page__input" placeholder="请选择地区" placeholder-style="color:#ccc;"
						:disabled="true" />
				</fui-form-item>
				<!-- 上下排列单独放置组件即可 -->
				<view class="fui-section__title">上下排列（组件单独放置即可）</view>
				<fui-form-item asterisk label="详细描述" :bottomBorder="false"></fui-form-item>
				<fui-textarea :border-top="false" placeholder="请输入详细描述..."></fui-textarea>
				<view class="fui-section__title">其他</view>
				<fui-form-item label="是否推送">
					<template v-slot:right>
						<fui-switch></fui-switch>
					</template>
				</fui-form-item>
				<fui-form-item label="体重">
					<fui-input type="digit" :borderBottom="false" :padding="['0','16rpx']" placeholder="请输入体重"
						textRight>
					</fui-input>
					<template v-slot:right>
						<fui-text text="kg"></fui-text>
					</template>
				</fui-form-item>
				<fui-form-item label="验证码">
					<input class="fui-page__input" placeholder="请输入验证码" placeholder-style="color:#ccc;" maxlength="6" />
					<template v-slot:right>
						<fui-button type="gray" bold width="200rpx" height="64rpx" :size="28" text="获取验证码"></fui-button>
					</template>
				</fui-form-item>
			</fui-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioItems: [{
						name: '18~28岁',
						value: '1',
						checked: true
					},
					{
						name: '29~40岁',
						value: '2',
						checked: false
					}
				],
				checkboxItems: [{
					name: '篮球',
					value: '1',
					checked: true
				}, {
					name: '乒乓球',
					value: '2',
					checked: false
				}]
			}
		},
		methods: {
			vip() {
				this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
			},
			onTap(e) {
				console.log(e === 1 ? '选择时间' : '选择地区')
			}
		}
	}
</script>

<style>
	page {
		font-weight: normal;
	}

	.fui-wrap {
		padding-bottom: 96rpx;
	}

	.fui-section__title {
		margin-left: 32rpx;
	}

	.fui-page__input {
		font-size: 32rpx;
	}
</style>