countdown/pages/edit/index.ux

<template>
  <div class="new-page">
    <div class="header">
      <text class="header-time">{{extend == "true" ? "新建" : "编辑"}}倒数日</text>
    </div>
    <div class="gap"></div>
    <div class="line">
      <text>事件名称</text>
      <input type="text" value="{{event_name}}" onchange="textChange" class="input-text"/>
    </div>
    <div class="line">
      <text>目标日</text>
      <div class="input-line" @click="editDate"><text>{{date}}</text></div>
    </div>
    <div class="gap"></div>
    <div class="line">
      <text>在首页显示</text>
      <switch checked={{on_index}} @change="changeDisplayOnIndex"></switch>
    </div>
    <div class="bottom-buttons">
      <input type="button" class="save-button" @click="saveEvent" value="保存"></input>
      <input if="{{this.extend != 'true'}}" type="button" class="save-button" @click="deleteEvent" value="删除"></input>
    </div>
  </div>
</template>

<script>
import router from '@blueos.app.appmanager.router';
import storage from '@blueos.storage.storage';
import prompt from '@blueos.window.prompt';

export default {
  data: {
    event_name: "",
    date: "",
    on_index: true,
    callback_uri: "/pages/index",
    date_callback: "",
    input_callback: "",
    event_id: "0",
    extend: "true"
  },
  textChange({ value }) {
      this.event_name = value
    },
	routeBack() {
    router.replace({
      uri: this.callback_uri
    })
  },

  onReady() {
    const isInputCallback = !(this.input_callback == "")
    const isDateCallback = !(this.date_callback == "")
    if (!isInputCallback && !isDateCallback) {
      // 没有 callback
      if (this.date == "") {
        const _date = new Date()
        this.date = _date.getFullYear() + "-" + (_date.getMonth() + 1) + "-" + _date.getDate()
      }
      return
    } else if (isInputCallback) {
      console.log("Input callback")
      const callback = JSON.parse(this.input_callback)
      const _cache = JSON.parse(callback.input_cache_data)
      this.event_id = _cache.event_id
      this.callback_uri = _cache.callback_uri
      this.extend = _cache.extend

      this.event_name = callback.input_text
      this.date = _cache.date
      this.on_index = _cache.on_index
    } else if (isDateCallback) {
      console.log("Date callback")
      const callback = JSON.parse(this.date_callback)
      const _cache = JSON.parse(callback.input_cache_data)
      this.event_id = _cache.event_id
      this.callback_uri = _cache.callback_uri
      this.extend = _cache.extend
      
      this.event_name = _cache.event_name
      this.date = callback.date
      this.on_index = _cache.on_index
    }
  },

  editEventName() {
    router.push({
      uri: "/pages/input",
      params: {
        "input_cache_data": JSON.stringify({
          "event_id": this.event_id,
          "extend": this.extend,
          "callback_uri": this.callback_uri,
          "date": this.date,
          "on_index": this.on_index
        }),
        "input_text": this.event_name,
        "callback_uri": "/pages/edit"
      }
    })
  },

  editDate() {
    router.push({
      uri: "/pages/inputdate",
      params: {
        "input_cache_data": JSON.stringify({
          "event_id": this.event_id,
          "extend": this.extend,
          "callback_uri": this.callback_uri,
          "event_name": this.event_name,
          "on_index": this.on_index
        }),
        "date": this.date,
        "callback_uri": "/pages/edit"
      }
    })
  },
  
  changeDisplayOnIndex(evt) {
    this.on_index = evt.checked
  },

  saveEvent() {
    if (this.event_name == "") {
      prompt.showToast({message: "事件名称不能为空"})
      return
    }

    storage.get({
      key: "events",
      default: "[]",
      success: data => {
        let events = JSON.parse(data)
        const _event = {
          name: this.event_name,
          date: this.date,
          on_index: this.on_index
        }
        if (this.extend == "true") {
          events.push(_event)
        } else {
          events[Number(this.event_id)] = _event
        }
        storage.set({
          key: "events",
          value: JSON.stringify(events),
          success: (_) => {
            router.replace({
              uri: this.callback_uri,
            })
            prompt.showToast({message: "事件保存成功！"})
          },
          fail: (_, code) =>{
            prompt.showToast({message: "数据保存失败，可能是设备可用空间不足，错误码: " + code})
          }
        })
      }
    })
  },
  
  deleteEvent() {
    storage.get({
      key: "events",
      default: "[]",
      success: data => {
        let events = JSON.parse(data)
        events.splice(Number(this.event_id), 1)
        storage.set({
          key: "events",
          value: JSON.stringify(events),
          success: (_) => {
            router.replace({
              uri: this.callback_uri,
            })
            prompt.showToast({message: "事件删除成功！"})

          },
          fail: (_, code) =>{
            prompt.showToast({message: "数据保存失败，可能是设备可用空间不足，错误码: " + code})
          }
        })
      }
    })
  }
};
</script>

<style>
@import "../../assets/styles/header-new.css";

.new-page {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: white;
}

.gap {
  height: 12px
}

.line {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.line text {
  font-size: 15px;
}

switch {
  margin-top: 2px;
  margin-left: 7px;
  width: 65px;
  height: 24px;
  track-color: gray;
}

.save-button {
  width: 78px;
  height: 30px;
  background-color: black;
  border: 3px;
  border-color: gray;
  color: white;
  font-size: 15px;
  margin-top: 10px;
  margin-left: 2px;
  margin-right: 2px;
}

.input-line {
  height: 30px;
  width: 180px;
  border: 1px;
  border-color: white;
  border-radius: 10px;
}

.input-line text {
  margin: 2px;
  margin-left: 4px;
}

.bottom-buttons {
  display: flex;
  flex-direction: row;
}
.input-text {
  width: 100%;
  height: 20px;
  border: 1px solid #000;
  border-radius: 10px;
  padding-left: 20px;
}
.picker {
  width: 480px;
  height: 480px;
  background-color: white;
}
</style>