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.
268 lines
6.7 KiB
268 lines
6.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>
|
|
<start-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>
|
|
<end-date-selector @change="getEndData" />
|
|
</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>
|
|
<radio-group class="block" @change="TypeChange">
|
|
<view class="flex">
|
|
<view class="flex-sub margin-tb-sm" v-for="(journey,index) in journeys" :key="index">
|
|
<label class="flex justify-between align-center">
|
|
<radio class="round margin-right-xs" :checked="index === journeyType" :value="journey.value"></radio>
|
|
<text class="flex-sub" style="font-size: 34rpx;">{{ journey.name }}</text>
|
|
</label>
|
|
</view>
|
|
</view>
|
|
</radio-group>
|
|
</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 === tripMode" :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="carNo" />
|
|
</view>
|
|
<view class="cu-form-group flex flex-direction padding-tb">
|
|
<view class="title padding-bottom-sm">同行人</view>
|
|
<input placeholder="请输入同行人" name="input" type="text" v-model="together" />
|
|
</view>
|
|
</form>
|
|
<user-agreement @changeIntentions="changeIntentions"></user-agreement>
|
|
<button class="bg-cyan margin primary-btn" hover-class="cc-active" @tap="handleAddStroke">确认提交</button>
|
|
<!-- 历史 -->
|
|
<button class="shadow round bg-cyan history-btn iconfont icon-history" hover-class="cc-active" @tap="openPage('/pages/my-trips/my-trips')"></button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { showToast } from 'common/script/util';
|
|
import UniCalendar from 'components/uni-calendar/uni-calendar.vue';
|
|
import StartDateSelector from './components/start-date-selector.vue';
|
|
import EndDateSelector from './components/end-date-selector.vue';
|
|
import { SUBMIT_JOURNEYS } from 'api/api';
|
|
|
|
export default {
|
|
components: {UniCalendar,StartDateSelector,EndDateSelector},
|
|
data() {
|
|
return {
|
|
startTime: this.$moment().format('YYYY-MM-DD'),
|
|
endTime: this.$moment().format('YYYY-MM-DD'),
|
|
transports: [
|
|
{
|
|
value: '0',
|
|
name: '铁路',
|
|
},
|
|
{
|
|
value: '1',
|
|
name: '飞机',
|
|
},
|
|
{
|
|
value: '2',
|
|
name: '客运车辆',
|
|
},
|
|
{
|
|
value: '3',
|
|
name: '自驾',
|
|
},
|
|
{
|
|
value: '4',
|
|
name: '船',
|
|
},
|
|
{
|
|
value: '5',
|
|
name: '其他',
|
|
}
|
|
],
|
|
carNo: '',
|
|
journeys: [
|
|
{
|
|
value: '0',
|
|
name: '返校行程',
|
|
},
|
|
{
|
|
value: '1',
|
|
name: '日常外出',
|
|
}
|
|
],
|
|
together: '',
|
|
tripMode: 0,
|
|
journeyType: 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.tripMode = i;
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
TypeChange: function(evt) {
|
|
for (let i = 0; i < this.journeys.length; i++) {
|
|
if (this.journeys[i].value === evt.target.value) {
|
|
this.journeyType = i;
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
// 同意协议
|
|
changeIntentions(data) {
|
|
this.agree = data;
|
|
},
|
|
|
|
/**
|
|
* 获取出发时间
|
|
* @param {string} start 开始时间
|
|
* @param {string} end 截止时间
|
|
*/
|
|
getStartData(start) {
|
|
console.log('出发时间 start: ', start);
|
|
this.startTime = start;
|
|
},
|
|
|
|
/**
|
|
* 获取抵达时间
|
|
* @param {string} start 开始时间
|
|
* @param {string} end 截止时间
|
|
*/
|
|
getEndData(end) {
|
|
console.log('抵达时间 end: ', end);
|
|
this.endTime = end;
|
|
},
|
|
|
|
/**
|
|
* 添加行程
|
|
*/
|
|
async handleAddStroke() {
|
|
try {
|
|
if (!this.checkRules()) return;
|
|
const {
|
|
carNo,
|
|
endTime,
|
|
journeyType,
|
|
startTime,
|
|
together,
|
|
tripMode
|
|
} = this;
|
|
|
|
const params = {
|
|
param: {
|
|
carNo,
|
|
endTime: +this.$moment(endTime).format('x'),
|
|
journeyType: journeyType+1,
|
|
startTime: +this.$moment(startTime).format('x'),
|
|
together,
|
|
tripMode
|
|
}
|
|
};
|
|
|
|
const res = await this.$http.post(SUBMIT_JOURNEYS, params);
|
|
const {
|
|
success,
|
|
code,
|
|
msg,
|
|
data
|
|
} = res.data;
|
|
if (success && code === 200) {
|
|
uni.showToast({
|
|
title: '行程添加成功',
|
|
duration: 2000
|
|
});
|
|
this.success = true;
|
|
uni.reLaunch({
|
|
url: `/pages/index/index`,
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: msg || '行程添加失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.log('error: ', error);
|
|
if (error.msg) {
|
|
uni.showToast({
|
|
title: error.msg || '行程添加失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
// 验证信息
|
|
checkRules() {
|
|
const { startTime,endTime,journeyType,tripMode,carNo,agree } = this;
|
|
if (!this.startTime) {
|
|
showToast('请选择出发时间');
|
|
return;
|
|
}
|
|
if (!this.endTime) {
|
|
showToast('请选择抵达时间');
|
|
return;
|
|
}
|
|
if (this.journeyType<0) {
|
|
showToast('请选择行程类型');
|
|
return;
|
|
}
|
|
if (this.tripMode<0) {
|
|
showToast('请选择出行交通方式');
|
|
return;
|
|
}
|
|
if (!this.carNo) {
|
|
showToast('乘坐航班车次或车牌号码及座位号');
|
|
return;
|
|
}
|
|
if (!this.agree) {
|
|
showToast('请确定是否为本人填写');
|
|
return;
|
|
}
|
|
return true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.agree-box{
|
|
width: 70rpx;
|
|
}
|
|
.agree-text{
|
|
line-height: 60rpx;
|
|
}
|
|
.primary-btn{
|
|
border-radius: 15rpx;
|
|
}
|
|
.history-btn{
|
|
position: fixed;
|
|
bottom: 40rpx;
|
|
right: 40rpx;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
padding: 0;
|
|
}
|
|
.history-btn::after{
|
|
border: none;
|
|
}
|
|
</style>
|