opms_wechat/pages/schedule/components/add.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-16 10:11:35
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-03-06 13:52:55
 * @schContentription: file content
 * @FilePath: \oms\pages\schedule\components\add.vue
-->
<template>
  <view>
    <u-popup :show="addVisible" :round="10" mode="bottom" duration="0" @close="closeAdd">
      <view class="add-container">
        <u-form :model="addForm" :rules="rules" ref="addForm" labelWidth="0">
          <u-form-item prop="schTitle">
            <view class="header flex flex-middle">
              <view class="tit-input">
                <u-input placeholder="准备做什么？" v-model="addForm.schTitle" border="none" clearable></u-input>
              </view>

              <view class="add" @click="handleAdd">添加</view>
            </view>
          </u-form-item>

          <u-form-item prop="schContent">
            <view class="schContent flex">
              <view class="flex_1">
                <u-input placeholder="添加描述" v-model="addForm.schContent" border="none" clearable></u-input>
              </view>
            </view>
          </u-form-item>
        </u-form>

        <view class="date flex">
          <view
            v-for="(item, index) in tagList"
            :key="index"
            class="date-tag"
            :class="{ actived: item.type == dateType }"
            @click="selectDateType(item)">
            {{ item.val }}

            <view class="date-select" v-if="item.type == 3">
              <u-icon name="arrow-down" :color="dateType === 3 ? '#fff' : '#646464'" size="12"></u-icon>
            </view>
          </view>
        </view>

        <!-- <view class="schContent flex">
          <view class="flex_1">
            <u-input placeholder="添加子任务" border="none" clearable></u-input>
          </view>
        </view> -->
      </view>
    </u-popup>

    <u-calendar
      :show="showCalendar"
      monthNum="12"
      showLunar
      @confirm="confirmCalendar"
      :max-date="maxDate"
      @close="showCalendar = false"></u-calendar>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import to from 'await-to-js'
  import scheduleApi from '../../../api/schedule'
  export default {
    name: 'omsAdd',
    props: {
      addVisible: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        tagList: [
          {
            val: '今天',
            type: 1,
          },
          {
            val: '明天',
            type: 2,
          },
          {
            val: this.parseTime(new Date(), '{m}-{d}'),
            type: 3,
          },
        ],
        addForm: {
          schTitle: '', //标题
          schContent: '', //描述
          schDate: this.getNowDate(),
        },
        rules: {
          schTitle: {
            type: 'string',
            required: true,
            message: '请填写任务标题',
            trigger: ['blur'],
          },
          schContent: {
            type: 'string',
            required: true,
            message: '请填写描述',
            trigger: ['blur'],
          },
        },
        showCalendar: false, //显示选择日历
        dateType: 1, //日期类型
      }
    },
    computed: {
      maxDate() {
        const nextYear = new Date().getFullYear() + 1
        return `${nextYear}-01-01`
      },
    },
    onReady() {
      //onReady 为uni-app支持的生命周期之一
      // this.$refs.addForm.setRules(this.rules)
    },
    mounted() {},
    methods: {
      handleAdd() {
        this.$refs.addForm
          .validate()
          .then(async () => {
            let params = this.addForm
            const [err, res] = await to(scheduleApi.create(params))
            if (err) return
            if (res && res.code == 200) {
              this.$refs.uToast.show({
                type: 'success',
                message: '添加成功',
                complete: () => {
                  this.closeAdd()
                },
              })
            }
          })
          .catch(() => {})
      },
      // 选择日期类型
      selectDateType(item) {
        this.dateType = item.type
        if (this.dateType == 1) {
          this.addForm.schDate = this.getNowDate()
        } else if (this.dateType == 2) {
          this.addForm.schDate = this.getTomorrowDate()
        } else if (this.dateType == 3) {
          this.showCalendar = true
        }
      },
      // 确认选择日期
      confirmCalendar(item) {
        this.addForm.schDate = item[0]
        this.tagList[2].val = this.parseTime(item[0], '{m}-{d}')
        this.showCalendar = false
      },
      closeAdd() {
        this.addForm = {
          schTitle: '', //标题
          schContent: '', //描述
        }
        this.$refs.addForm.clearValidate()
        this.$emit('update:addVisible', false)
      },
      getNowDate() {
        var day = new Date()
        day.setTime(day.getTime())
        var date = day.getFullYear() + '-' + (day.getMonth() + 1) + '-' + day.getDate()
        return date
      },
      getTomorrowDate() {
        let day = new Date()
        day.setTime(day.getTime() + 24 * 60 * 60 * 1000)
        let date = day.getFullYear() + '-' + (day.getMonth() + 1) + '-' + day.getDate()
        return date
      },
    },
  }
</script>

<style lang="scss" scoped>
  .add-container {
    padding: 42rpx 28rpx 0 34rpx;
    .header {
      .tit-input {
        flex: 1;
      }
      .add {
        padding-left: 30rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #3e7ef8;
      }
    }
    .schContent {
      padding-top: 28rpx;
      border-bottom: 1px solid #cdcdcd;
      padding-bottom: 14rpx;
    }
    .date {
      padding: 28rpx 0 36rpx;
      border-bottom: 1px solid #cdcdcd;
      .date-tag {
        width: 115rpx;
        height: 62rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ebf2ff;
        border-radius: 31rpx;
        font-size: 24rpx;
        color: #646464;
        margin-right: 24rpx;
        .date-select {
          padding-left: 6rpx;
        }
        &.actived {
          background: #3e7ef8;
          color: #fff;
        }
      }
    }
  }
</style>