uniapp开发页面结合uview实现卡券发布
包含类型单选实例 以及日期选择实例

<template>
	<view class="zhekoujuan">
		<div class="items">
			<u--form labelPosition="left" labelWidth="100" ref="form1">
				<u-form-item @click="show = true" label="卡券类型" borderBottom ref="item1">
					<u--input class="inputx" disabledColor="#ffffff" placeholder="请选择卡券类型" disabled v-model="type"
						inputAlign="right" border="none"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item @click="show1 = true" label="开始时间" borderBottom ref="item1">
					<u--input class="inputx" disabledColor="#ffffff" placeholder="请选择开始时间" disabled v-model="startdate"
						inputAlign="right" border="none"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item @click="show2 = true" label="到期时间" borderBottom ref="item1">
					<u--input class="inputx" disabledColor="#ffffff" placeholder="请选择到期时间" disabled v-model="enddate"
						inputAlign="right" border="none"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="卡券数量" borderBottom ref="item1">
					<u--input class="inputx" v-model="num" inputAlign="right" placeholder="请输入数量" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="卡券内容" borderBottom ref="item1">
					<u--input class="inputx" v-model="content" placeholder="请输入卡券内容" inputAlign="right" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="卡券地址" borderBottom ref="item1">
					<u--input class="inputx" v-model="address" placeholder="请输入卡券使用地址" inputAlign="right" border="none">
					</u--input>
				</u-form-item>
			</u--form>
		</div>
		<u-datetime-picker @confirm="getstartdate" :show="show1" mode="date"></u-datetime-picker>
		<u-datetime-picker @confirm="getenddate" :show="show2" mode="date"></u-datetime-picker>
		<u-picker :show="show" @confirm="gettype" :columns="columns"></u-picker>
		<div class="confirm">
			<u-button @click="confirm" type="primary">确认</u-button>
		</div>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		components: {},
		data() {
			return {
				address: '',
				content: '',
				show1: false,
				show2: false,
				show: false,
				num: '',
				startdate: '',
				enddate: '',
				type: '',
				columns: [
					['类型一', '类型二', '类型三']
				],
			};
		},
		mounted() {
			var that = this;
		},
		methods: {
			confirm() {
				uni.navigateBack({

				})
			},
			gettype(e) {
				this.type = e.value[0]
				this.show = false
			},
			getenddate(e) {
				console.log(e)
				if (e.value) {
					this.enddate = moment(e.value).format("YYYY-MM-DD")
				}
				this.show2 = false
			},
			getstartdate(e) {
				console.log(e)
				if (e.value) {
					this.startdate = moment(e.value).format("YYYY-MM-DD")
				}
				this.show1 = false
			}
		}
	};
</script>

<style scoped lang="scss">
	.zhekoujuan {
		background: rgba(0, 0, 0, 0);
	}

	.items {
		width: 690rpx;
		margin: 0 auto;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.confirm {
		width: 690rpx;
		margin: 60rpx auto;
	}
</style>