啊大大

新增

<template>
  <div>
    <div class="top">
      <div style="padding: 20px 10px">
        <div style="display: flex;color: white;align-items: center">
          <div><i class="el-icon-arrow-left"></i></div>
          <div style="margin: 0 auto">新建行程</div>
        </div>
      </div>
    </div>

    <div class="center">
      <el-form :model="item" label-width="60px" label-position="left">
        <el-form-item label="标题">
          <el-input v-model="item.title"></el-input>
        </el-form-item>
        <el-form-item label="目的地">
          <el-cascader-panel
            :options="options"
            v-model="selectOptions"
            clearable
            filterable
            :props="{ multiple: true, checkStrictly: true }"
          ></el-cascader-panel>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="item.st"
            type="date"
            value-format="timestamp"
            placeholder="开始日期">
          </el-date-picker>
           至
          <el-date-picker
            v-model="item.et"
            type="date"
            value-format="timestamp"
            placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-button type="primary" style="width: 80%" @click="submitForm">创建行程</el-button>
      </el-form>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectOptions: [],
        item: {
          title: '',
          location: '',
          st: '',
          et: '',
          creator: ''
        },
        options: [{
          value: 'zhinan',
          label: '浙江省',
          children: [{
            value: 'shejiyuanze',
            label: '杭州市',
            children: [{
              value: 'yizhi',
              label: '拱墅区'
            }, {
              value: 'fankui',
              label: '余杭区'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
      }
    },
    created() {

    },
    methods: {
      submitForm: function () {
        var flag = true;
        for (var key in this.item) {
          if (this.item[key] === null || this.item[key] === "")
            this.$message.error("填写数据不得为空！")
          flag = false;
        }

        if (!flag)
          return;

        //axios新增
      }
    },
    watch: {
      item: {
        handler: function (val) {
          if (!!val.st && !!val.et && (val.et < val.st)) {
            this.item.st = this.item.et;
            this.item.et = '';
          }
        },
        deep: true
      },
      selectOptions: function (val) {
        console.log(val)
      }
    }
  };

  function getUser() {

  }

</script>
<style>
  #app{
    margin-top: 0;
  }
  body{
    margin: 0;
  }
  .top{
    background-color: #63aec1;
    width: 100%;
    top: 0;
  }
  .center{
    padding: 10px;
  }
  .el-cascader-node{
    margin: 0 3px;
    width: 110px;
    font-size: 12px;
    padding: 0;
  }
  .el-cascader-menu{
    min-width: 0;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 140px;
  }
  .el-cascader-menu:last-child .el-cascader-node{
    padding-right: 0;
  }
  .el-cascader-menu__list{
    padding: 6px 3px;
  }
</style>

新增2：

<template>
<div>
  <div class="top">
    <div style="padding: 20px 10px">
      <div style="display: flex;color: white;align-items: center">
        <div><i class="el-icon-arrow-left"></i></div>
        <div style="margin: 0 auto">{{travel.title}}</div>
        <div style="margin-right: 10px" @click="copyFinish"><i class="el-icon-finished"></i></div>
        <div><i class="el-icon-refresh"></i></div>
      </div>
    </div>
  </div>

  <div class="center">
    <div v-for="(item, index) in travel.siteList" style="margin: 10px 20px">
      <div style="font-size: 15px;text-align: left;margin-bottom: 10px">
        <div v-if="item.order == 1">{{formatDate(item.datetime)}}</div>
      </div>
      <el-card style="display: flex">
        <el-image :src="picture" style="width: 40px;height: 40px">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <div style="margin-left: 10px">
          <div style="text-align: left;font-size: 13px;font-weight: bolder">
            {{item.name}}
            <el-tag v-if="!!item.money">{{item.money}}</el-tag>
          </div>
          <div style="font-size: 12px">{{item.address}}</div>
          <div v-if="!!item.note" style="font-size: 12px">plan: {{item.note}}</div>
        </div>

      </el-card>

    </div>
  </div>

</div>
</template>
<script>
  export default {
    data() {
      return {
        picture: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        travel: {
          id: '1',
          title: '杭州3日游',
          location: '杭州',
          st: '1589990400',
          et: '1590163200',
          creator: '',
          siteList: [
            {
              id: '1',
              name: '西湖',
              hot: '0.98',
              address: '阿斯顿发顺丰',
              lng: '12.3532423',
              lat: '136.2342323',
              datetime: '1589990400',
              order: '1',
              note: 'sadasd',
              money: '123'
            },
            {
              id: '2',
              name: '西湖银泰',
              hot: '0.58',
              address: '让法国司法',
              lng: '12.3532423',
              lat: '136.2342323',
              datetime: '1590076800',
              order: '1',
              note: '',
              money: ''
            },
          ],
        },
        user: {
          id: '',
          username: '',
          avatar: ''
        },

      }
    },
    created() {

    },
    methods: {
      formatDate: function (time) {
        var timer = new Date(time * 1000);
        var year = timer.getFullYear();
        var month = timer.getMonth() + 1;
        var date = timer.getDate();
        return year + "-" + month + "-" + date;
      },
      copyFinish: function () {

      }
    },
  };

  function getIdAndUser(id, user) {

  }

</script>
<style>
  #app{
    margin-top: 0;
  }
  body{
    margin: 0;
  }
  .top{
    background-color: #63aec1;
    width: 100%;
    height: 60px;
    top: 0;
    position: fixed;
  }
  .center{
    position: absolute;
    bottom: 0;
    height: 600px;
    width: 100%;
  }
  .el-card__body{
    padding: 10px;
    display: flex;
    width: 100%;
  }
  .el-tag{
    height: 20px;
    line-height: 20px;
  }
</style>