Key页面展示

quickapp/src/assets/images/divider.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="530" height="2" viewBox="0 0 530 2">
+  <line id="直线_1" data-name="直线 1" x2="530" transform="translate(0 1)" fill="none" stroke="#d8d8d8" stroke-width="2" stroke-dasharray="10"/>
+</svg>

quickapp/src/helper/utils.js

@@ -23,7 +23,13 @@ function showToast(message = '', duration = 0) {
   })
 }
 
+function showDialog(args) {
+  if (!args) return;
+  prompt.showDialog(args)
+}
+
 export default {
   showToast,
+  showDialog,
   queryString
 }

quickapp/src/manifest.json

@@ -13,7 +13,7 @@
       "name": "system.router"
     },
     {
-      "name": "system.shortcut"
+      "name": "system.clipboard"
     },
     {
       "name": "system.fetch"

quickapp/src/pages/Home/index.ux

@@ -1,6 +1,6 @@
 <import name="my-tabbar" src="./tabbar"></import>
-<import name="device" src="../Device"></import>
+<import name="device" src="../component/Device"></import>
-<import name="key" src="./device"></import>
+<import name="key" src="../component/Key"></import>
 <import name="message" src="./device"></import>
 <import name="settings" src="./device"></import>
 <template>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="card">
+    <div class="icon">
+      <image src="{{ devObj.icon}}" />
+    </div>
+    <text class="label">{{ devObj.name }}</text>
+  </div>
+</template>
+
+<script>
+export default {
+
+  props: ['devObj', 'idx'],
+
+  onInit() {
+    // console.log('card', this.devObj,this.idx)
+    // 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;
+  width: 100%;
+  /* justify-content: center;
+  align-items: center; */
+
+  .icon {
+    width: 105px;
+    height: 80px;
+    margin-right: 16px;
+    justify-content: center;
+  }
+
+  .label {
+    color: @color;
+    font-size: 30px;
+  }
+}
+/* .wrapper {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.title {
+  text-align: center;
+  color: #212121;
+} */
+</style>

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

@@ -0,0 +1,57 @@
+<import name="dev-card" src="./card"></import>
+<template>
+  <div class="wrapper">
+    <!-- <text class="title">device</text>
+    <text class="title">device</text> -->
+    <div class="header">
+      <text>设备</text>
+      <image @click="onPlusBtnClick" src="/assets/images/plus.svg" />
+    </div>
+    <list style="width: 80%">
+      <list-item type="devitem" for="{{ dev in devs}}">
+        <dev-card dev-obj="{{ dev }}" idx="{{ $idx }}"></dev-card>
+      </list-item>
+    </list>
+  </div>
+</template>
+
+<script>
+export default {
+  data: {
+    devs: [
+      { icon: "/assets/images/device-ipad.svg", name: "Easy’s iPad(当前设备)" },
+      { icon: "/assets/images/device-ipad.svg", name: "备用机iPhone2" },
+    ],
+  },
+
+  onPlusBtnClick() {
+    // $utils.showToast('aaaaa')
+    this.devs.push({ icon: "/assets/images/device-iphone.svg", name: "备用机iPhone" + (this.devs.length + 1) })
+  },
+
+  onInit() {
+    console.log('device', 'init')
+  }
+}
+</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/component/Key/card.ux

@@ -0,0 +1,117 @@
+<template>
+  <div class="card">
+    <div class="header">
+      <image style="height: 80px" src="/assets/images/avatar.svg" />
+      <text class="name" @click="onKeyNameClick">{{ key.name }}</text>
+      <image style="height: 36px" src="/assets/images/calander.svg" />
+      <text class="date">{{ key.date }}</text>
+    </div>
+    <text class="value">{{ key.value }} </text>
+    <!-- <div class="divider"></div> -->
+    <image class="divider" src="/assets/images/divider.png"></image>
+    <div class="footer">
+      <text style="color: #3b4789; border-color: #3b4789">重置</text>
+      <text
+        style="color: #ffffff; background-color: #3b4789"
+        @click="onCopyBtnClick"
+        >复制</text
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import clipboard from '@system.clipboard'
+export default {
+
+  props: ['key', 'idx'],
+
+  onKeyNameClick() {
+    $utils.showToast('改名功能待实现')
+  },
+
+  onCopyBtnClick() {
+    clipboard.set({
+      text: this.key.value,
+      success: () => {
+        $utils.showToast('key已经复制到剪贴板')
+      }
+    })
+  },
+
+  onInit() {
+    console.log('key', this.key, this.idx)
+    // console.log('card', 'name', this.devObj.name)
+  }
+}
+</script>
+
+<style lang="less">
+@primary-color: #3b4789;
+@secondry-color: #d6d6d6;
+@font-color: #a7a7a7;
+
+.card {
+  flex-direction: column;
+  border-color: @primary-color;
+  border-radius: 16px;
+  border-width: 3px;
+  padding: 32px;
+  margin: 24px 0;
+  background-color: #ffffff;
+  width: 100%;
+  /* justify-content: center;
+  align-items: center; */
+
+  .header {
+    align-items: flex-end;
+
+    .date {
+      font-size: 24px;
+      color: @font-color;
+    }
+
+    .name {
+      color: @primary-color;
+      font-size: 36px;
+      flex-grow: 1;
+    }
+  }
+
+  .value {
+    margin: 48px 0;
+    padding: 16px;
+    font-size: 24px;
+    border-width: 2px;
+    border-radius: 8px;
+    border-color: @secondry-color;
+    color: @font-color;
+    lines: 1;
+  }
+
+  .divider {
+    width: 100%;
+    margin-bottom: 48px;
+  }
+
+  .footer {
+    justify-content: space-between;
+
+    text {
+      font-size: 30px;
+      padding: 16px 48px;
+      border-width: 2px;
+      border-radius: 16px;
+    }
+  }
+}
+/* .wrapper {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.title {
+  text-align: center;
+  color: #212121;
+} */
+</style>

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

@@ -0,0 +1,59 @@
+<import name="key-card" src="./card"></import>
+<template>
+  <div class="wrapper">
+    <!-- <text class="title">device</text>
+    <text class="title">device</text> -->
+    <div class="header">
+      <text>Key</text>
+      <image @click="onPlusBtnClick" src="/assets/images/plus.svg" />
+    </div>
+    <list style="width: 80%">
+      <list-item type="keyitem" for="{{ key in keys}}">
+        <key-card key="{{ key }}" idx="{{ $idx }}"></key-card>
+      </list-item>
+    </list>
+  </div>
+</template>
+
+<script>
+export default {
+  data: {
+    keys: [
+      { name: "Default", value: "PDU1DSE543JDZpq8Lx2gsSE543JD…", date: "2021/12/01" },
+      { name: "点击改Key名", value: "PDU1DSE543JDZpq8Lx2gsSE543JD…", date: "2021/12/01" },
+    ],
+  },
+
+  onPlusBtnClick() {
+    // $utils.showToast('aaaaa')
+    this.keys.push(
+      { name: "Default", value: "PDU1DSE543JDZpq8Lx2gsSE543JD…", date: "2021/12/01" },
+    )
+  },
+
+  onInit() {
+    console.log('key', 'init', this.keys)
+  }
+}
+</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>