维基小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

144 lines
3.7 KiB

<template>
<view>
<form class="padding-lr cu-form-group flex-direction">
<view class="cu-form-group flex flex-direction padding-tb">
<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>出发时间</view>
<date-selector @change="getStartData" />
</view>
<view class="cu-form-group flex flex-direction padding-tb">
<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>抵达时间</view>
<date-selector @change="getEndData" />
</view>
<view class="cu-form-group flex flex-direction padding-top">
<view class="text-xl padding-tb-sm">出行交通方式必选</view>
<radio-group class="block" @change="RadioChange">
<view class="cu-list menu text-left">
<view class="cu-item" v-for="(transport,index) in transports" :key="index">
<label class="flex justify-between align-center">
<radio class="round margin-right-xs" :checked="index === current" :value="transport.value"></radio>
<view class="flex-sub" style="font-size: 34rpx;">{{ transport.name }}</view>
</label>
</view>
</view>
</radio-group>
</view>
<view class="cu-form-group flex flex-direction padding-tb">
<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>乘坐航班车次或车牌号码及座位号没有填无</view>
<input placeholder="请输入" name="input" type="text" v-model="carNumber" />
</view>
</form>
<view class="margin flex flex-wrap">
<view @click="agree = !agree" class="iconfont agree-box" :class="[agree ? 'text-blue icon-check-square': 'text-gray icon-border']"></view>
<view class="text-df text-black flex-sub agree-text">
以上信息是我本人填写,本人对信息的真实性和完整性负责。
</view>
</view>
<button class="bg-cyan margin primary-btn" hover-class="cc-active" @tap="addStroke">确认提交</button>
</view>
</template>
<script>
import { showToast } from 'common/script/util';
import UniCalendar from 'components/uni-calendar/uni-calendar.vue';
import DateSelector from './components/date-selector.vue';
export default {
components: {UniCalendar,DateSelector},
data() {
return {
transports: [
{
value: '0',
name: '铁路',
},
{
value: '1',
name: '飞机',
},
{
value: '2',
name: '客运车辆',
},
{
value: '3',
name: '自驾',
},
{
value: '4',
name: '船',
},
{
value: '5',
name: '其他',
}
],
carNumber: '',
current: 0,
agree: false
};
},
methods: {
RadioChange: function(evt) {
for (let i = 0; i < this.transports.length; i++) {
if (this.transports[i].value === evt.target.value) {
this.current = i;
break;
}
}
},
/**
* 获取出发时间
* @param {string} start 开始时间
* @param {string} end 截止时间
*/
getData(start, end) {
console.log('出发时间 start, end: ', start, end);
},
/**
* 获取抵达时间
* @param {string} start 开始时间
* @param {string} end 截止时间
*/
getEndData(start, end) {
console.log('抵达时间 start, end: ', start, end);
},
/**
* 提交基本信息
*/
addStroke() {
if (!this.transports) {
showToast('请选择身份');
return;
}
if (!this.carNumber) {
showToast('请输入学号');
return;
}
if (!this.agree) {
showToast('请确定是否为本人填写');
return;
}
console.log('信息提交');
uni.reLaunch({
url: `/pages/index/index`,
});
},
},
};
</script>
<style lang="scss" scoped>
.agree-box{
width: 70rpx;
}
.agree-text{
line-height: 60rpx;
}
.primary-btn{
border-radius: 15rpx;
}
</style>