mirror of
https://github.com/easychen/pushdeer.git
synced 2024-12-05 08:29:22 +08:00
消息、设置页面的展示
暂缺md、image类型消息展示
This commit is contained in:
7YHong
parent
d6914d234b
commit
d58e00d9c0
Binary file not shown.
BIN
quickapp/src/assets/images/arrow-down.png
Normal file
BIN
quickapp/src/assets/images/arrow-down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
quickapp/src/assets/images/arrow-up.png
Normal file
BIN
quickapp/src/assets/images/arrow-up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -2,5 +2,4 @@
|
||||
flex-direction: @column;
|
||||
justify-content: @justify;
|
||||
align-items: @align;
|
||||
height: 100%;
|
||||
}
|
||||
@ -1,9 +1,3 @@
|
||||
@brand: #09ba07;
|
||||
|
||||
@white: #ffffff;
|
||||
@black: #000000;
|
||||
@grey: #9393aa;
|
||||
@red: #fa0101;
|
||||
@green: #ffff00;
|
||||
|
||||
@size-factor: 5px;
|
||||
@primary-color: #3b4789;
|
||||
@secondry-color: #d6d6d6;
|
||||
@font-color: #a7a7a7;
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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="settings" src="./device"></import>
|
||||
<import name="message" src="../component/Message"></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;
|
||||
|
||||
@ -41,6 +41,7 @@ export default {
|
||||
.wrapper {
|
||||
.flex-box-mixins(column, flex-start, center);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 84px;
|
||||
|
||||
.header {
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,6 +43,7 @@ export default {
|
||||
.wrapper {
|
||||
.flex-box-mixins(column, flex-start, center);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 84px;
|
||||
|
||||
.header {
|
||||
|
||||
130
quickapp/src/pages/component/Message/index.ux
Normal file
130
quickapp/src/pages/component/Message/index.ux
Normal file
@ -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>
|
||||
52
quickapp/src/pages/component/Message/msg-header.ux
Normal file
52
quickapp/src/pages/component/Message/msg-header.ux
Normal file
@ -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>
|
||||
42
quickapp/src/pages/component/Message/msg-text.ux
Normal file
42
quickapp/src/pages/component/Message/msg-text.ux
Normal file
@ -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>
|
||||
49
quickapp/src/pages/component/Settings/card.ux
Normal file
49
quickapp/src/pages/component/Settings/card.ux
Normal file
@ -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>
|
||||
65
quickapp/src/pages/component/Settings/index.ux
Normal file
65
quickapp/src/pages/component/Settings/index.ux
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user