前端工作总结239-uni-弹出框显示数据

<template>
  <view class="wrap">
    <u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
      <u-form-item label="标题" label-width="140" style="margin-left:30rpx" prop="title">
        <u-input v-model="form.title" placeholder="请输入要输入的文章标题" />
      </u-form-item>
      <u-form-item label="类别" label-width="140" style="margin-left:30rpx">
        <u-input type="select" v-model="form.cate" placeholder="请选择" @click="show = true"></u-input>
        <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
      </u-form-item>
        <!-- 渲染页面数据 -->
        <navigator url="../LevineHua-editor/LevineHua-editor" class="single">
      <u-form-item label="请输入内容" prop="content" label-width="150">
        <input  placeholder="请输入内容" v-model="form.content" type="texarea" />
      </u-form-item>
      </navigator>
      <u-form-item label-position="top" label-width="140" label="封面图" prop="coverImage">
        <u-image width="320rpx" height="188rpx" @click="choose" :src="messimg"></u-image>
      </u-form-item>
      <u-form-item label="开始时间" prop="startDate" label-width="200">
        <u-input type="select" v-model="form.startDate" placeholder="请选择" @click="start_time_show = true"></u-input>
        <u-picker mode="time" v-model="start_time_show" @confirm="confirm1" :params="params"></u-picker>
      </u-form-item>
      <u-form-item label="结束时间" prop="endDate" label-width="200">
        <u-input type="select" v-model="form.endDate" placeholder="请选择" @click="end_time_show = true"></u-input>
        <u-picker mode="time" v-model="end_time_show" @confirm="confirm2" :params="params"></u-picker>
      </u-form-item>
    </u-form>
    <u-button class="sub-btn" @click="submit">提交</u-button>
  </view>
</template>
<script>
  /* 引入富文本编辑器 */
  import jinEdit from '@/components/jin-edit/jin-edit.vue';
  export default {
    /* 注册组件 */
    components: {
      jinEdit
    },
    data() {
      return {
        params: {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: true
        },
        messimg: '',
        /* 获取token值 */
        header1: {
          Authorization: this.vuex_token
        },
        /* 存储上传地址 */
        action1: '',
        show: false,
        //控制选择框显示
        end_time_show: false,
        //控制选择框显示
        start_time_show: false,
        form: {
        },
        /* list的数据 */
        list: [{
            value: '市场动态',
            label: '市场动态'
          },
          {
            value: '市场党建',
            label: '市场党建'
          },
          {
            value: '通知公告',
            label: '通知公告'
          },
          {
            value: '生活窍门',
            label: '生活窍门'
          },
          {
            value: '健康饮食',
            label: '健康饮食'
          },
          {
            value: '家政服务',
            label: '家政服务'
          },
          {
            value: '街道服务',
            label: '街道服务'
          },
        ],
        //提示
        errorType: ['message'],
        //验证
        rules: {
          title: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur',
            },
            {
              min: 3,
              max: 5,
              message: '姓名长度在3到5个字符',
              trigger: ['change', 'blur'],
            },
          ],
          content: [{
              required: true,
              message: '请输入通知内容',
              trigger: ['change', 'blur'],
            },
          ],
        },
      }
    },
    created() {
      /* "loginId": 0,
        "marketId": 0, */
      this.form.loginId = this.vuex_user.id
      this.form.marketId = this.vuex_user.market_id
      console.log(this.vuex_token)
      var url = this.$u.http.config.baseUrl + '/uploadFile/file'
      console.log(url)
      this.action1 = url
    },
    methods: {
      changeList(val){
        console.log(1)
        console.log(val)
      },
      open() {
        this.show = true;
      },
      // 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
      confirm(e) {
        console.log(e);
        this.form.cate = e[0].value
      },
      confirm1(e) {
        let date = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ':' + e.minute + ':' + e.second
        this.form.startDate = date
      },
      confirm2(e) {
        console.log(e);
        let date = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ':' + e.minute + ':' + e.second
        this.form.endDate = date
      },
      submit() {
        this.$u.api.getPartyAdd(this.form).then(res => {
          console.log(res)
        })
      },
      /* 上传图片 */
      choose() {
        uni.chooseImage({
          success: (chooseImageRes) => {
            var tempFilePaths = chooseImageRes.tempFilePaths;
            uni.uploadFile({
              url: this.$u.http.config.baseUrl + '/uploadFile/file',
              filePath: tempFilePaths[0],
              header: {
                Authorization: this.vuex_token
              },
              name: 'file',
              success: (uploadFileRes) => {
                let data_res = JSON.parse(uploadFileRes.data)
                if (data_res.code == 200) {
                  this.messimg = data_res.data;
                  this.form.coverImage = data_res.data;
                  console.log(this.messimg)
                }
              }
            });
          }
        });
      }
    }
  }
</script>
<style scoped lang="scss">
  .sub-btn {
    width: 684rpx;
    height: 96rpx;
    background: linear-gradient(91deg, #43B9FD 0%, #1FB5FE 100%);
    opacity: 1;
    border-radius: 66rpx;
    border: 0rpx;
    font-size: 36rpx;
    font-family: PingFangSC;
    font-weight: 400;
    line-height: 40rpx;
    color: #FFFFFF;
    position: fixed;
    bottom: 18rpx;
  }
  .title-sm {
    background: #F7F7F7;
    width: 100%;
    padding: 23rpx 0rpx;
  }
  .wrap {
    padding: 30rpx;
  }
  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    .agreement-text {
      padding-left: 8rpx;
      color: $u-tips-color;
    }
  }
</style>