MigrateRepos
/
pushdeer
mirror of https://github.com/easychen/pushdeer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #6 from 7YHong/quickapp 

Key页面展示
This commit is contained in:
Easy 2022-01-01 14:21:17 +08:00 committed by GitHub
parent 8ff5f19067 bfea33268d
commit d6914d234b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 302 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
quickapp/pushdeer素材.xd
View File

Binary file not shown.

BIN
quickapp/src/assets/images/divider.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 B

3
quickapp/src/assets/images/divider.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 240 B

6
quickapp/src/helper/utils.js
View File

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

2
quickapp/src/manifest.json
View File

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

4
quickapp/src/pages/Home/index.ux
View File

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

57
quickapp/src/pages/component/Device/card.ux Normal file
View File

@ -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>

57
quickapp/src/pages/component/Device/index.ux Normal file
View File

@ -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>

117
quickapp/src/pages/component/Key/card.ux Normal file
View File

@ -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>

59
quickapp/src/pages/component/Key/index.ux Normal file
View File

@ -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>