Merge pull request #7 from 7YHong/main

消息、设置页面的展示

quickapp/src/assets/styles/mixins.less

@@ -2,5 +2,4 @@
   flex-direction: @column;
   justify-content: @justify;
   align-items: @align;
-  height: 100%;
 }

quickapp/src/assets/styles/variables.less

@@ -1,9 +1,3 @@
-@brand: #09ba07;
+@primary-color: #3b4789;
-
+@secondry-color: #d6d6d6;
-@white: #ffffff;
+@font-color: #a7a7a7;
-@black: #000000;
-@grey: #9393aa;
-@red: #fa0101;
-@green: #ffff00;
-
-@size-factor: 5px;

quickapp/src/pages/Device/card.ux

@@ -1,61 +0,0 @@
-<template>
-  <list-item type="device" class="card">
-    <div class="icon">
-      <image src="{{ devObj.icon}}" />
-    </div>
-    <text class="label">{{ devObj.name }}</text>
-  </list-item>
-</template>
-
-<script>
-export default {
-
-  props: ['devObj'],
-
-  data: {
-    defaultDevObj: { icon: "/assets/images/device-ipad.svg", name: "Easy’s iPad(当前设备)" },
-  },
-
-  onInit() {
-    if (!this.devObj) this.devObj = this.defaultDevObj
-    // console.log('card', this.devObj)
-    // console.log('card', 'name', this.devObj.name)
-  }
-}
-</script>
-
-<style lang="less">
-@color: #3b4789;
-
-.card {
-  border-color: @color;
-  border-radius: 16px;
-  border-width: 3px;
-  padding: 32px;
-  margin: 24px 0;
-  background-color: #FFFFFF;
-  /* justify-content: center;
-  align-items: center; */
-
-  .icon {
-    width: 120px;
-    height: 80px;
-    margin-right: 16px;
-    justify-content: center;
-  }
-
-  .label {
-    color: @color;
-    font-size: 36px;
-  }
-}
-/* .wrapper {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.title {
-  text-align: center;
-  color: #212121;
-} */
-</style>

quickapp/src/pages/Device/index.ux

@@ -1,55 +0,0 @@
-<import name="card" src="./card"></import>
-<template>
-  <div class="wrapper">
-    <!-- <text class="title">device</text>
-    <text class="title">device</text> -->
-    <div class="header">
-      <text>设备</text>
-      <image src="/assets/images/plus.svg" />
-    </div>
-    <list style="width: 80%">
-      <card></card>
-      <card dev-obj="{{ dev }}"></card>
-      <card dev-obj="{{ dev }}"></card>
-      <card dev-obj="{{ dev }}"></card>
-      <card dev-obj="{{ dev }}"></card>
-      <card dev-obj="{{ dev }}"></card>
-      <card dev-obj="{{ dev }}"></card>
-      <card dev-obj="{{ dev }}"></card>
-      <card dev-obj="{{ dev }}"></card>
-      <card dev-obj="{{ dev }}"></card>
-      <card dev-obj="{{ dev }}"></card>
-    </list>
-  </div>
-</template>
-
-<script>
-export default {
-  data: {
-    dev: { icon: "/assets/images/device-iphone.svg", name: "备用机iPhone13" },
-  },
-
-  onInit() { }
-}
-</script>
-
-<style lang="less">
-@import './../../assets/styles/style.less';
-
-.wrapper {
-  .flex-box-mixins(column, flex-start, center);
-  width: 100%;
-  padding-top: 84px;
-
-  .header {
-    margin-bottom: 24px;
-    width: 80%;
-    justify-content: space-between;
-
-    text {
-      font-size: 48px;
-      color: #000000;
-    }
-  }
-}
-</style>

quickapp/src/pages/Home/index.ux

@@ -1,8 +1,8 @@
 <import name="my-tabbar" src="./tabbar"></import>
 <import name="device" src="../component/Device"></import>
 <import name="key" src="../component/Key"></import>
-<import name="message" src="./device"></import>
+<import name="message" src="../component/Message"></import>
-<import name="settings" src="./device"></import>
+<import name="settings" src="../component/Settings"></import>
 <template>
   <div class="wrapper">
     <stack class="stack">
@@ -66,6 +66,7 @@ export default {
 
 .wrapper {
   .flex-box-mixins(column, center, center);
+  height: 100%;
 
   .stack {
     flex-grow: 1;

quickapp/src/pages/component/Device/index.ux

@@ -41,6 +41,7 @@ export default {
 .wrapper {
   .flex-box-mixins(column, flex-start, center);
   width: 100%;
+  height: 100%;
   padding-top: 84px;
 
   .header {

quickapp/src/pages/component/Key/card.ux

@@ -40,7 +40,7 @@ export default {
   },
 
   onInit() {
-    console.log('key', this.key, this.idx)
+    // console.log('key', this.key, this.idx)
     // console.log('card', 'name', this.devObj.name)
   }
 }

quickapp/src/pages/component/Key/index.ux

@@ -43,6 +43,7 @@ export default {
 .wrapper {
   .flex-box-mixins(column, flex-start, center);
   width: 100%;
+  height: 100%;
   padding-top: 84px;
 
   .header {

quickapp/src/pages/component/Message/index.ux

@@ -0,0 +1,130 @@
+<import name="msg-text" src="./msg-text"></import>
+<import name="msg-markdown" src="./msg-text"></import>
+<template>
+  <div class="wrapper">
+    <div class="header">
+      <text>消息</text>
+      <image
+        @click="onArrowBtnClick"
+        src="{{collapsed?'/assets/images/arrow-down.png':'/assets/images/arrow-up.png'}}"
+      />
+    </div>
+    <div if="{{!collapsed}}" class="pushmsg-region">
+      <textarea class="textarea" @change="onTextAreaChange">{{
+        input
+      }}</textarea>
+      <text class="pushbtn" @click="onPushBtnClick">推送测试</text>
+    </div>
+    <list>
+      <list-item
+        type="{{msg.type+'item'}}"
+        if="{{supportType.includes(msg.type)}}"
+        for="{{ msg in msgs}}"
+      >
+        <component is="{{ 'msg-'+msg.type}}" msg="{{ msg}}"></component>
+      </list-item>
+    </list>
+  </div>
+</template>
+
+<script>
+export default {
+  data: {
+    collapsed: false,
+    supportType: ['text', 'markdown'],
+    input: '',
+    msgs: [
+      {
+        name: "Default", created_at: "5分钟前", type: "text",
+        text: `纯文本的效果。长文字需要自动换行。
+长文字需要自动换行。行间距24。
+长按可以复制文本内容。左滑显示删除。`
+      },
+      {
+        name: "Default", created_at: "5分钟前", type: "text",
+        text: `纯文本的效果。长文字需要自动换行。
+长文字需要自动换行。行间距24。
+长按可以复制文本内容。左滑显示删除。`
+      },
+      {
+        name: "推送Key的名字", created_at: "5分钟前", type: "markdown",
+        text: `支持Markdown语法。比如可以插入链接 ，
+点击后使用系统浏览器直接打开。`
+      },
+    ],
+  },
+
+  onArrowBtnClick() {
+    this.collapsed = !this.collapsed
+  },
+  onTextAreaChange(e) {
+    // 只能在change事件里取值，不知道作者怎么想的。。。
+    this.input = e.text
+  },
+  onPushBtnClick() {
+    if (this.input.length == 0) {
+      $utils.showToast("消息内容为空")
+      return
+    }
+    console.log('message', 'onPushBtnClick', this.input)
+    this.msgs.unshift({ name: "本设备", created_at: "刚刚", type: "text", text: this.input })
+    this.input = ""
+  },
+
+  onInit() {
+    console.log('message', 'init')
+  }
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/styles/style.less';
+
+.wrapper {
+  .flex-box-mixins(column, flex-start, center);
+  width: 100%;
+  height: 100%;
+  padding-top: 84px;
+
+  .header {
+    margin-bottom: 24px;
+    width: 80%;
+    justify-content: space-between;
+    flex-shrink: 0;
+
+    text {
+      font-size: 48px;
+      color: #000000;
+    }
+  }
+
+  .pushmsg-region {
+    margin: 24px 0;
+    width: 80%;
+    height: 30%;
+    flex-direction: column;
+    /* justify-content: space-between; */
+    align-items: flex-start;
+
+    .textarea {
+      width: 100%;
+      flex-grow: 1;
+      padding: 24px;
+      font-size: 32px;
+      border-color: @primary-color;
+      border-width: 3px;
+      border-radius: 8px;
+      background-color: #ffffff;
+    }
+
+    .pushbtn {
+      color: #ffffff;
+      font-size: 30px;
+      margin-top: 48px;
+      padding: 24px;
+      border-radius: 16px;
+      background-color: @primary-color;
+    }
+  }
+}
+</style>

quickapp/src/pages/component/Message/msg-header.ux

@@ -0,0 +1,52 @@
+<template>
+  <div class="header">
+    <div class="line1"></div>
+    <image class="avatar" src="/assets/images/avatar.svg"></image>
+    <text class="title">{{ title }}</text>
+    <div class="line2"></div>
+  </div>
+</template>
+
+<script>
+import clipboard from '@system.clipboard'
+export default {
+
+  props: ['title'],
+
+  onInit() {
+    // console.log('settings-card',this.label,this.optName,this.btnHandler)
+  }
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/styles/style.less';
+
+.header {
+  .flex-box-mixins(row, flex-start, center);
+  width: 100%;
+
+  div {
+    height: 2px;
+    border-color: @secondry-color;
+    border-width: 1px;
+  }
+
+  .line1 {
+    width: 8%;
+  }
+  .line2 {
+    flex-grow: 1;
+  }
+
+  .avatar {
+    height: 80px;
+    margin: 0 24px;
+  }
+
+  .title {
+    margin-right: 24px;
+    font-size: 24px;
+  }
+}
+</style>

quickapp/src/pages/component/Message/msg-text.ux

@@ -0,0 +1,42 @@
+<import name="msg-header" src="./msg-header"></import>
+<template>
+  <div class="card">
+    <msg-header title="{{msg.name +' · '+ msg.created_at}}"></msg-header>
+    <text class="text">{{ msg.text }}</text>
+  </div>
+</template>
+
+<script>
+import clipboard from '@system.clipboard'
+export default {
+
+  props: ['msg'],
+
+  onInit() {
+    // console.log('msg-text',this.msg)
+  }
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/styles/style.less';
+
+.card {
+  .flex-box-mixins(column, flex-start, center);
+  margin: 24px 0;
+  width: 100%;
+
+  .text {
+    width: 80%;
+    margin-top: 32px;
+    color: #535353;
+    font-size: 24px;
+    line-height: 48px;
+    padding: 24px;
+    border-width: 2px;
+    border-radius: 8px;
+    border-color: @primary-color;
+    background-color: #ffffff;
+  }
+}
+</style>

quickapp/src/pages/component/Settings/card.ux

@@ -0,0 +1,49 @@
+<template>
+  <div class="card">
+    <text style="font-size: 30px">{{ label }}</text>
+    <text
+      class="opt"
+      @click="{{btnHandler}}"
+      >{{ optName }}</text
+    >
+  </div>
+</template>
+
+<script>
+import clipboard from '@system.clipboard'
+export default {
+
+  props: ['idx', 'label', 'optName'],
+
+  btnHandler() {
+    this.$dispatch('SettingsItemClick', this.idx)
+  },
+
+  onInit() {
+    // console.log('settings-card',this.label,this.optName,this.btnHandler)
+  }
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/styles/style.less';
+
+.card {
+  .flex-box-mixins(row, space-between, center);
+  border-color: @primary-color;
+  border-radius: 8px;
+  border-width: 3px;
+  padding: 24px;
+  margin: 24px 0;
+  background-color: #ffffff;
+  width: 100%;
+
+  .opt {
+    color: #ffffff;
+    font-size: 30px;
+    padding: 16px 32px;
+    border-radius: 16px;
+    background-color: @primary-color;
+  }
+}
+</style>

quickapp/src/pages/component/Settings/index.ux

@@ -0,0 +1,65 @@
+<import name="setting-card" src="./card"></import>
+<template>
+  <div class="wrapper">
+    <div class="header">
+      <text>设置</text>
+      <!-- <image @click="onPlusBtnClick" src="/assets/images/arrow-up.png" /> -->
+    </div>
+
+    <list style="width: 80%">
+      <list-item type="settingitem" for="{{ s in settings}}">
+        <setting-card
+          label="{{s.label}}"
+          opt-name="{{s.optName}}"
+          idx="{{$idx}}"
+        ></setting-card>
+      </list-item>
+    </list>
+  </div>
+</template>
+
+<script>
+export default {
+  data: {
+    settings: [
+      { label: "登录为 Easy", optName: "退出", handler: () => { $utils.showToast('点击了退出按钮') } },
+      { label: "自定义服务器", optName: "扫码", handler: () => { $utils.showToast('点击了扫码按钮') } },
+      { label: "喜欢PushDeer？", optName: "评分", handler: () => { $utils.showToast('点击了评分按钮') } }
+    ]
+  },
+
+  onLogoutBtnClick() {
+    console.log('settings', 'onLogoutBtnClick')
+  },
+
+  onInit() {
+    console.log('settings', 'init')
+    this.$on('SettingsItemClick', (evt) => {
+      evt.stop()
+      this.settings[evt.detail].handler();
+    })
+  }
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/styles/style.less';
+
+.wrapper {
+  .flex-box-mixins(column, flex-start, center);
+  width: 100%;
+  height: 100%;
+  padding-top: 84px;
+
+  .header {
+    margin-bottom: 24px;
+    width: 80%;
+    justify-content: space-between;
+
+    text {
+      font-size: 48px;
+      color: #000000;
+    }
+  }
+}
+</style>