完成微信登录对接，及其他界面上的修正
This commit is contained in:
7YHong
parent
b68dc9abcd
commit
37021ea19b
|
|
@ -19,7 +19,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"apex-ui": "^1.9.2",
|
||||
"dayjs": "^1.10.7"
|
||||
"dayjs": "^1.10.7",
|
||||
"markdown-it": "^12.3.2",
|
||||
"punycode": "^2.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
|
|
|
|||
|
|
@ -5,17 +5,13 @@
|
|||
|
||||
const $utils = require('./helper/utils').default
|
||||
const $apis = require('./helper/apis').default
|
||||
const $storage = require('@system.storage')
|
||||
|
||||
console.log('app: create channel');
|
||||
const appInitC = new BroadcastChannel('init');
|
||||
|
||||
/* @desc: 注入方法至全局 global,以便页面调用 */
|
||||
const hook2global = Object.getPrototypeOf(global) || global;
|
||||
hook2global.$utils = $utils
|
||||
hook2global.API = $apis
|
||||
|
||||
const _promiseFactory = (pointer, params = {}) => {
|
||||
hook2global.promiseFactory = (pointer, params = {}) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
params = Object.assign({
|
||||
success: (data) => { resolve(data); },
|
||||
|
|
@ -24,38 +20,9 @@
|
|||
pointer(params);
|
||||
});
|
||||
}
|
||||
hook2global.promiseFactory = _promiseFactory;
|
||||
|
||||
const userinfoFromToken = async (token) => {
|
||||
$apis.setToken(token)
|
||||
let userinfo = await $apis.userInfo()
|
||||
userinfo.token = token
|
||||
hook2global.$userinfo = userinfo
|
||||
_promiseFactory($storage.set, { key: 'token', value: token })
|
||||
appInitC.postMessage(1)
|
||||
appInitC.close()
|
||||
}
|
||||
|
||||
export default {
|
||||
onCreate() {
|
||||
console.log('app: init oncreate');
|
||||
appInitC.onmessage = ({ data: token }) => {
|
||||
console.log('app: login success, data=', JSON.stringify(token));
|
||||
userinfoFromToken(token)
|
||||
}
|
||||
(async () => {
|
||||
let token = await _promiseFactory($storage.get, { key: 'token' })
|
||||
.catch((data, code) => {
|
||||
console.warn(`get token from storage fail, code = ${code}`)
|
||||
})
|
||||
console.log(`app: get token = ${token} from storage success`)
|
||||
if (token.length === 0) {
|
||||
console.log('app: init token.length==0, send init message');
|
||||
appInitC.postMessage(0)
|
||||
return
|
||||
}
|
||||
userinfoFromToken(token)
|
||||
})()
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import $ajax from './ajax'
|
|||
*
|
||||
* 备注：如果您不需要发起请求，删除 apis 目录，以及 app.ux 中引用即可；
|
||||
*/
|
||||
const baseUrl = 'https://pushdeer.qiyanghong.cn:5443/'
|
||||
const baseUrl = 'YOUR_API_ADDRESS'
|
||||
|
||||
let token = ""
|
||||
|
||||
|
|
@ -24,23 +24,26 @@ export default {
|
|||
login() {
|
||||
return to($ajax.get(`${baseUrl}login/fake`).then(res => res.token))
|
||||
},
|
||||
wxLogin(code) {
|
||||
return $ajax.post(`${baseUrl}login/wecode`, { code }).then(res => res.token)
|
||||
},
|
||||
userInfo() {
|
||||
return to($ajax.post(`${baseUrl}user/info`, { token }))
|
||||
return $ajax.post(`${baseUrl}user/info`, { token })
|
||||
},
|
||||
// device
|
||||
deviceReg(name, device_id) {
|
||||
return to($ajax.post(`${baseUrl}device/reg`, { token, is_clip: 1, name, device_id }))
|
||||
return $ajax.post(`${baseUrl}device/reg`, { token, is_clip: 1, name, device_id })
|
||||
.then(res => res.devices)
|
||||
},
|
||||
deviceList() {
|
||||
return to($ajax.post(`${baseUrl}device/list`, { token }))
|
||||
return $ajax.post(`${baseUrl}device/list`, { token })
|
||||
.then(res => res.devices)
|
||||
},
|
||||
deviceRename(id, name) {
|
||||
return to($ajax.post(`${baseUrl}device/rename`, { token, id, name }))
|
||||
return $ajax.post(`${baseUrl}device/rename`, { token, id, name })
|
||||
},
|
||||
deviceRemove(id) {
|
||||
return to($ajax.post(`${baseUrl}device/remove`, { token, id }))
|
||||
return $ajax.post(`${baseUrl}device/remove`, { token, id })
|
||||
},
|
||||
// key
|
||||
keyGen() {
|
||||
|
|
|
|||
|
|
@ -1,66 +1,75 @@
|
|||
{
|
||||
"package": "dev.pushdeer.app",
|
||||
"name": "pushdeer",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": 1,
|
||||
"minPlatformVersion": 1070,
|
||||
"icon": "/assets/images/logo.svg",
|
||||
"features": [
|
||||
{
|
||||
"name": "system.prompt"
|
||||
"package": "dev.pushdeer.app",
|
||||
"name": "pushdeer",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": 1,
|
||||
"minPlatformVersion": 1090,
|
||||
"icon": "/assets/images/logo.png",
|
||||
"features": [
|
||||
{
|
||||
"name": "system.prompt"
|
||||
},
|
||||
{
|
||||
"name": "system.router"
|
||||
},
|
||||
{
|
||||
"name": "system.clipboard"
|
||||
},
|
||||
{
|
||||
"name": "system.fetch"
|
||||
},
|
||||
{
|
||||
"name": "system.storage"
|
||||
},
|
||||
{
|
||||
"name": "system.device"
|
||||
},
|
||||
{
|
||||
"name": "service.push"
|
||||
},
|
||||
{
|
||||
"name": "service.wxaccount",
|
||||
"params": {
|
||||
"appId": "YOUR_APPID"
|
||||
}
|
||||
}
|
||||
],
|
||||
"permissions": [
|
||||
{
|
||||
"origin": "*"
|
||||
}
|
||||
],
|
||||
"config": {
|
||||
"logLevel": "debug"
|
||||
},
|
||||
{
|
||||
"name": "system.router"
|
||||
"router": {
|
||||
"entry": "pages",
|
||||
"pages": {
|
||||
"pages": {
|
||||
"component": "index"
|
||||
},
|
||||
"pages/Home": {
|
||||
"component": "index",
|
||||
"launchMode": "singleTask"
|
||||
},
|
||||
"pages/component": {
|
||||
"component": "devpage"
|
||||
},
|
||||
"pages/swipe": {
|
||||
"component": "index"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "system.clipboard"
|
||||
},
|
||||
{
|
||||
"name": "system.fetch"
|
||||
},
|
||||
{
|
||||
"name": "system.storage"
|
||||
},
|
||||
{
|
||||
"name": "system.device"
|
||||
"display": {
|
||||
"titleBarBackgroundColor": "#f2f2f2",
|
||||
"titleBarTextColor": "#414141",
|
||||
"pages": {
|
||||
"pages": {
|
||||
"titleBar": false
|
||||
},
|
||||
"pages/Home": {
|
||||
"titleBar": false
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"permissions": [
|
||||
{
|
||||
"origin": "*"
|
||||
}
|
||||
],
|
||||
"config": {
|
||||
"logLevel": "debug"
|
||||
},
|
||||
"router": {
|
||||
"entry": "pages",
|
||||
"pages": {
|
||||
"pages": {
|
||||
"component": "index"
|
||||
},
|
||||
"pages/Home": {
|
||||
"component": "index",
|
||||
"launchMode": "singleTask"
|
||||
},
|
||||
"pages/component": {
|
||||
"component": "devpage"
|
||||
},
|
||||
"pages/swipe":{
|
||||
"component": "index"
|
||||
}
|
||||
}
|
||||
},
|
||||
"display": {
|
||||
"titleBarBackgroundColor": "#f2f2f2",
|
||||
"titleBarTextColor": "#414141",
|
||||
"pages": {
|
||||
"pages": {
|
||||
"titleBar": false
|
||||
},
|
||||
"pages/Home": {
|
||||
"titleBar": false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<import name="dev-card" src="./card"></import>
|
||||
<import name="swipe-item" src="../swipeItem"></import>
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- <text class="title">device</text>
|
||||
|
|
@ -10,99 +9,114 @@
|
|||
</div>
|
||||
<list style="width: 80%">
|
||||
<list-item type="devitem" for="{{ dev in devs}}">
|
||||
<swipe-item>
|
||||
<dev-card
|
||||
slot="content"
|
||||
dev-obj="{{ dev }}"
|
||||
idx="{{ $idx }}"
|
||||
></dev-card>
|
||||
<div
|
||||
slot="right"
|
||||
style="height: 60px;width: 100px;padding: 0 20px;justify-content: center;"
|
||||
@click="handleDeleteClick($idx)"
|
||||
>
|
||||
<image src="/assets/images/trash.png"></image>
|
||||
</div>
|
||||
</swipe-item>
|
||||
<slide-view
|
||||
id="sv{{$idx}}"
|
||||
style="width: 100%"
|
||||
buttons="{{slideButton}}"
|
||||
layer="same"
|
||||
isopen="false"
|
||||
edge="right"
|
||||
enableslide="true"
|
||||
@ButtonClick="handleDeleteClick($idx)"
|
||||
>
|
||||
<dev-card dev-obj="{{ dev }}" idx="{{ $idx }}"></dev-card>
|
||||
</slide-view>
|
||||
</list-item>
|
||||
</list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import device from '@system.device'
|
||||
import device from '@system.device'
|
||||
|
||||
const devIcon = {
|
||||
"ios": "/assets/images/device-iphone.png",
|
||||
"default": "/assets/images/device-iphone.png",
|
||||
const devIcon = {
|
||||
"ios": "/assets/images/device-iphone.png",
|
||||
"default": "/assets/images/device-iphone.png",
|
||||
}
|
||||
|
||||
const handleDevResult = (data) => data.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
icon: item.type in devIcon ? devIcon[item.type] : devIcon["default"],
|
||||
}
|
||||
})
|
||||
|
||||
const handleDevResult = (data) => data.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
icon: item.type in devIcon ? devIcon[item.type] : devIcon["default"],
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
data: {
|
||||
devs: [],
|
||||
},
|
||||
|
||||
async onPlusBtnClick() {
|
||||
try {
|
||||
let devId = await promiseFactory(device.getDeviceId, {})
|
||||
.then(res => res.deviceId)
|
||||
let devList = await API.deviceReg($userinfo.name + '的手机', devId)
|
||||
// console.log('devList: ', JSON.stringify(devList));
|
||||
this.devs = handleDevResult(devList)
|
||||
} catch (e) {
|
||||
$utils.showToast(e.name + ':' + e.message)
|
||||
export default {
|
||||
data: {
|
||||
devs: [],
|
||||
slideButton: [
|
||||
{
|
||||
id: "delBtn",
|
||||
buttonWidth: '100px',
|
||||
iconWidth: '38px',
|
||||
iconHeight: '47px',
|
||||
icon: '/assets/images/trash.png',
|
||||
backgroundColor: "transparent",
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
async handleDeleteClick(idx) {
|
||||
async onPlusBtnClick() {
|
||||
try {
|
||||
let devId = await promiseFactory(device.getDeviceId, {})
|
||||
.then(res => res.deviceId)
|
||||
let devList = await API.deviceReg(this.$app.$def.userinfo.name + '的手机', devId)
|
||||
console.log('devList: ', JSON.stringify(devList));
|
||||
this.devs = handleDevResult(devList)
|
||||
} catch (e) {
|
||||
$utils.showToast(e.name + ':' + e.message)
|
||||
}
|
||||
},
|
||||
|
||||
async handleDeleteClick(idx) {
|
||||
this.$element('sv'+idx).close({animation:false})
|
||||
try {
|
||||
const id = this.devs[idx].id
|
||||
console.log(`device: del item: idx=${idx}, id=${id}`);
|
||||
this.devs.splice(idx)
|
||||
console.log('devList: ', JSON.stringify(this.devs));
|
||||
this.devs.splice(idx, 1)
|
||||
API.deviceRemove(id)
|
||||
},
|
||||
} catch (e) {
|
||||
$utils.showToast(e.name + ':' + e.message)
|
||||
}
|
||||
},
|
||||
|
||||
onInit() {
|
||||
console.log('device', 'init');
|
||||
(async () => {
|
||||
let devList = await API.deviceList()
|
||||
// console.log('devList: ', JSON.stringify(devList));
|
||||
this.devs = handleDevResult(devList)
|
||||
// console.log('devs: ', JSON.stringify(this.devs));
|
||||
// [{"uid":"1","is_clip":0,"device_id":"f787bbf3-fffd-a2d7-fef9-716ff1bf1809","name":"新设备","id":1,"type":"ios"},{"uid":"1","is_clip":1,"device_id":"f787bbf3-fffd-a2d7-fef9-716ff1bf1809","name":"easychen+new","id":2,"type":"ios"}]
|
||||
})()
|
||||
},
|
||||
onReady() {
|
||||
console.log('device', 'onready')
|
||||
},
|
||||
}
|
||||
onInit() {
|
||||
console.log('device', 'init');
|
||||
console.log('device: regId=', this.$app.$def.pushRegId);
|
||||
(async () => {
|
||||
let devList = await API.deviceList()
|
||||
console.log('devList: ', JSON.stringify(devList));
|
||||
this.devs = handleDevResult(devList)
|
||||
// console.log('devs: ', JSON.stringify(this.devs));
|
||||
// [{"uid":"1","is_clip":0,"device_id":"f787bbf3-fffd-a2d7-fef9-716ff1bf1809","name":"新设备","id":1,"type":"ios"},{"uid":"1","is_clip":1,"device_id":"f787bbf3-fffd-a2d7-fef9-716ff1bf1809","name":"easychen+new","id":2,"type":"ios"}]
|
||||
})()
|
||||
},
|
||||
onReady() {
|
||||
console.log('device', 'onready')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../../assets/styles/style.less';
|
||||
@import '../../../assets/styles/style.less';
|
||||
|
||||
.wrapper {
|
||||
.flex-box-mixins(column, flex-start, center);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 84px;
|
||||
.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;
|
||||
.header {
|
||||
margin-bottom: 24px;
|
||||
width: 80%;
|
||||
justify-content: space-between;
|
||||
|
||||
text {
|
||||
font-size: 48px;
|
||||
color: #000000;
|
||||
}
|
||||
text {
|
||||
font-size: 48px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<import name="key-card" src="./card"></import>
|
||||
<import name="swipe-item" src="../swipeItem"></import>
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- <text class="title">device</text>
|
||||
|
|
@ -10,107 +9,119 @@
|
|||
</div>
|
||||
<list style="width: 80%">
|
||||
<list-item type="keyitem" for="{{ key in keys}}">
|
||||
<swipe-item>
|
||||
<slide-view
|
||||
id="sv{{$idx}}"
|
||||
style="width: 100%"
|
||||
buttons="{{slideButton}}"
|
||||
layer="same"
|
||||
isopen="false"
|
||||
edge="right"
|
||||
enableslide="true"
|
||||
@ButtonClick="onDelBtnClick($idx)"
|
||||
>
|
||||
<key-card
|
||||
slot="content"
|
||||
key="{{ key }}"
|
||||
idx="{{ $idx }}"
|
||||
@key-reset="onKeyReset"
|
||||
@key-rename="onKeyRename"
|
||||
></key-card>
|
||||
<div
|
||||
slot="right"
|
||||
style="height: 60px;width: 100px;justify-content: center;"
|
||||
@click="onDelBtnClick($idx)"
|
||||
>
|
||||
<image src="/assets/images/trash.png"></image>
|
||||
</div>
|
||||
</swipe-item>
|
||||
</slide-view>
|
||||
</list-item>
|
||||
</list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
const handleKeyResult = (data) => data.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
value: item.key,
|
||||
date: dayjs(item.created_at).format('YYYY/MM/DD'),
|
||||
}
|
||||
})
|
||||
export default {
|
||||
data: {
|
||||
keys: [],
|
||||
},
|
||||
|
||||
async onPlusBtnClick() {
|
||||
let keyList = await API.keyGen()
|
||||
this.keys = handleKeyResult(keyList)
|
||||
},
|
||||
|
||||
async handleRename(e) {
|
||||
console.log(JSON.stringify(e));
|
||||
},
|
||||
|
||||
async onDelBtnClick(idx) {
|
||||
const id = this.keys[idx].id
|
||||
console.log(`key: del item: idx=${idx}, id=${id}`);
|
||||
this.keys.splice(idx)
|
||||
API.keyRemove(id)
|
||||
},
|
||||
|
||||
async onKeyReset({ detail: { idx } }) {
|
||||
console.log(`key: onKeyReset: idx=${idx}`);
|
||||
const id = this.keys[idx].id
|
||||
let result = await API.keyRegen(id)
|
||||
if (!result) { return }
|
||||
let keyList = await API.keyList()
|
||||
this.keys = handleKeyResult(keyList)
|
||||
},
|
||||
|
||||
async onKeyRename({ detail: { idx, newname } }) {
|
||||
const id = this.keys[idx].id
|
||||
console.log(`key: onKeyRename: idx=${idx}, newname=${newname}`);
|
||||
let result = await API.keyRename(id, newname)
|
||||
if (result) {
|
||||
this.keys[idx].name = newname
|
||||
}
|
||||
},
|
||||
|
||||
onInit() {
|
||||
(async () => {
|
||||
let keyList = await API.keyList()
|
||||
// console.log('devList: ', JSON.stringify(devList));
|
||||
this.keys = handleKeyResult(keyList)
|
||||
console.log('keys: ', JSON.stringify(this.keys));
|
||||
})().catch(e => {
|
||||
console.log(e);
|
||||
})
|
||||
}
|
||||
import dayjs from 'dayjs'
|
||||
const handleKeyResult = (data) => data.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
value: item.key,
|
||||
date: dayjs(item.created_at).format('YYYY/MM/DD'),
|
||||
}
|
||||
})
|
||||
export default {
|
||||
data: {
|
||||
keys: [],
|
||||
slideButton: [
|
||||
{
|
||||
id: "delBtn",
|
||||
buttonWidth: '100px',
|
||||
iconWidth: '38px',
|
||||
iconHeight: '47px',
|
||||
icon: '/assets/images/trash.png',
|
||||
backgroundColor: "transparent",
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
async onPlusBtnClick() {
|
||||
let keyList = await API.keyGen()
|
||||
this.keys = handleKeyResult(keyList)
|
||||
},
|
||||
|
||||
async handleRename(e) {
|
||||
console.log(JSON.stringify(e));
|
||||
},
|
||||
|
||||
async onDelBtnClick(idx) {
|
||||
this.$element('sv' + idx).close({ animation: false })
|
||||
const id = this.keys[idx].id
|
||||
console.log(`key: del item: idx=${idx}, id=${id}`);
|
||||
this.keys.splice(idx,1)
|
||||
API.keyRemove(id)
|
||||
},
|
||||
|
||||
async onKeyReset({ detail: { idx } }) {
|
||||
console.log(`key: onKeyReset: idx=${idx}`);
|
||||
const id = this.keys[idx].id
|
||||
let result = await API.keyRegen(id)
|
||||
if (!result) { return }
|
||||
let keyList = await API.keyList()
|
||||
this.keys = handleKeyResult(keyList)
|
||||
},
|
||||
|
||||
async onKeyRename({ detail: { idx, newname } }) {
|
||||
const id = this.keys[idx].id
|
||||
console.log(`key: onKeyRename: idx=${idx}, newname=${newname}`);
|
||||
let result = await API.keyRename(id, newname)
|
||||
if (result) {
|
||||
this.keys[idx].name = newname
|
||||
}
|
||||
},
|
||||
|
||||
onInit() {
|
||||
(async () => {
|
||||
let keyList = await API.keyList()
|
||||
// console.log('devList: ', JSON.stringify(devList));
|
||||
this.keys = handleKeyResult(keyList)
|
||||
console.log('keys: ', JSON.stringify(this.keys));
|
||||
})().catch(e => {
|
||||
console.log(e);
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../../assets/styles/style.less';
|
||||
@import '../../../assets/styles/style.less';
|
||||
|
||||
.wrapper {
|
||||
.flex-box-mixins(column, flex-start, center);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 84px;
|
||||
.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;
|
||||
.header {
|
||||
margin-bottom: 24px;
|
||||
width: 80%;
|
||||
justify-content: space-between;
|
||||
|
||||
text {
|
||||
font-size: 48px;
|
||||
color: #000000;
|
||||
}
|
||||
text {
|
||||
font-size: 48px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,9 @@
|
|||
/>
|
||||
</div>
|
||||
<div if="{{!collapsed}}" class="pushmsg-region">
|
||||
<textarea class="textarea" @change="onTextAreaChange">{{input}}</textarea>
|
||||
<textarea class="textarea" @change="onTextAreaChange">{{
|
||||
input
|
||||
}}</textarea>
|
||||
<text class="pushbtn" @click="onPushBtnClick">推送测试</text>
|
||||
</div>
|
||||
<list>
|
||||
|
|
@ -19,115 +21,127 @@
|
|||
for="{{ msg in msgs}}"
|
||||
>
|
||||
<msg-card msg="{{ msg}}"></msg-card>
|
||||
|
||||
</list-item>
|
||||
</list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
var md = require('markdown-it')();
|
||||
const handleMessageResult = (data) => data.map((item) => {
|
||||
const created_at = dayjs(item.created_at)
|
||||
const diffMinute = dayjs().diff(created_at, 'm')
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.pushkey_name,
|
||||
type: item.type,
|
||||
text: item.type === 'markdown' ? md.render(item.text) : item.text,
|
||||
desp: item.desp,
|
||||
created_at: diffMinute >= 0 && diffMinute <= 10 ? `${diffMinute}分钟前` : created_at.format('YYYY/MM/DD hh:mm:ss'),
|
||||
}
|
||||
}).reverse()
|
||||
|
||||
export default {
|
||||
data: {
|
||||
collapsed: false,
|
||||
supportType: ['text', 'image', 'markdown'],
|
||||
input: '',
|
||||
msgs: [],
|
||||
},
|
||||
|
||||
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');
|
||||
(async () => {
|
||||
let messageList = await API.messageList()
|
||||
console.log('messageList: ', JSON.stringify(messageList));
|
||||
this.msgs = handleMessageResult(messageList)
|
||||
console.log('msgs: ', JSON.stringify(this.msgs));
|
||||
})().catch(e => {
|
||||
console.log(e);
|
||||
})
|
||||
}
|
||||
import dayjs from 'dayjs'
|
||||
var md = require('markdown-it')();
|
||||
const handleMessageResult = (data) => data.reverse().map((item, idx) => {
|
||||
const created_at = dayjs(item.created_at)
|
||||
const diffMinute = dayjs().diff(created_at, 'm')
|
||||
return {
|
||||
idx,
|
||||
id: item.id,
|
||||
name: item.pushkey_name,
|
||||
type: item.type,
|
||||
text: item.type === 'markdown' ? md.render(item.text) : item.text,
|
||||
desp: item.desp,
|
||||
created_at: diffMinute >= 0 && diffMinute <= 10 ? `${diffMinute}分钟前` : created_at.format('YYYY/MM/DD hh:mm:ss'),
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
data: {
|
||||
collapsed: false,
|
||||
supportType: ['text', 'image', 'markdown'],
|
||||
input: '',
|
||||
msgs: [],
|
||||
},
|
||||
|
||||
onArrowBtnClick() {
|
||||
this.collapsed = !this.collapsed
|
||||
},
|
||||
onTextAreaChange(e) {
|
||||
// 只能在change事件里取值，不知道作者怎么想的。。。
|
||||
this.input = e.text
|
||||
},
|
||||
async onPushBtnClick() {
|
||||
if (this.input.length == 0) {
|
||||
$utils.showToast("消息内容为空")
|
||||
return
|
||||
}
|
||||
console.log('message', 'onPushBtnClick', this.input)
|
||||
await API.messagePush(this.input, '', 'text')
|
||||
this.msgs.unshift({ name: "本设备", created_at: "刚刚", type: "text", text: this.input })
|
||||
this.input = ""
|
||||
},
|
||||
|
||||
onInit() {
|
||||
console.log('message', 'init');
|
||||
(async () => {
|
||||
let messageList = await API.messageList()
|
||||
// console.log('messageList: ', JSON.stringify(messageList));
|
||||
this.msgs = handleMessageResult(messageList)
|
||||
// console.log('msgs: ', JSON.stringify(this.msgs));
|
||||
})().catch(e => {
|
||||
console.log(e);
|
||||
})
|
||||
this.$on('msgDel', async (evt) => {
|
||||
evt.stop()
|
||||
const idx = evt.detail
|
||||
console.log('msg" on msgDel idx=' + idx);
|
||||
await API.messageRemove(this.msgs[idx].id)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
|
||||
})
|
||||
this.msgs.splice(idx, 1)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../../assets/styles/style.less';
|
||||
@import '../../../assets/styles/style.less';
|
||||
|
||||
.wrapper {
|
||||
.flex-box-mixins(column, flex-start, center);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 84px;
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
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>
|
||||
|
|
@ -3,56 +3,131 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
<msg-header title="{{msg.name +' · '+ msg.created_at}}"></msg-header>
|
||||
<div style="{{slideStyle}}">
|
||||
|
||||
<slide-view
|
||||
buttons="{{slideButton}}"
|
||||
style="width:100%;height:100%;"
|
||||
layer="same"
|
||||
isopen="false"
|
||||
edge="right"
|
||||
enableslide="true"
|
||||
@ButtonClick="handleDeleteClick"
|
||||
>
|
||||
<div id="rt">
|
||||
<!-- <text if="{{msg.type === 'text'}}" class="text">{{ msg.text }}</text> -->
|
||||
|
||||
<text if="{{msg.type === 'text'}}" class="text">{{ msg.text }}</text>
|
||||
<div if="{{msg.type !=='image'}}" class="text">
|
||||
<richtext type="html" @complete="richtextComplete">{{
|
||||
msg.text
|
||||
}}</richtext>
|
||||
</div>
|
||||
|
||||
<div if="{{msg.type ==='markdown'}}" class="text">
|
||||
<richtext type="html">{{msg.text}}</richtext>
|
||||
<image
|
||||
if="{{msg.type ==='image'}}"
|
||||
class="image"
|
||||
src="{{msg.text}}"
|
||||
></image>
|
||||
</div>
|
||||
</slide-view>
|
||||
</div>
|
||||
|
||||
<image if="{{msg.type ==='image'}}" class="image" src="{{msg.text}}"></image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import clipboard from '@system.clipboard'
|
||||
export default {
|
||||
import clipboard from '@system.clipboard'
|
||||
export default {
|
||||
|
||||
props: ['msg'],
|
||||
props: ['msg'],
|
||||
|
||||
onInit() {
|
||||
// console.log('msg-text',this.msg)
|
||||
if (this.msg.type !== 'image' && this.msg.desp.length > 0) {
|
||||
this.msg.text += "\n" + this.msg.desp
|
||||
data: {
|
||||
contentHeight: '400px',
|
||||
slideButton: [
|
||||
{
|
||||
id: "delBtn",
|
||||
buttonWidth: '100px',
|
||||
iconWidth: '38px',
|
||||
iconHeight: '47px',
|
||||
icon: '/assets/images/trash.png',
|
||||
backgroundColor: "transparent",
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
computed: {
|
||||
slideStyle() {
|
||||
let width = this.msg.type === 'image' ? '100%' : '80%'
|
||||
return `width: ${width};height:${this.contentHeight}`
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
imgComplete({ height }) {
|
||||
console.log('success', this.msg.type, height)
|
||||
this.contentHeight = height + 'px'
|
||||
},
|
||||
|
||||
handleDeleteClick(){
|
||||
console.log('delete:',this.msg.idx);
|
||||
this.$dispatch('msgDel',this.msg.idx)
|
||||
},
|
||||
|
||||
richtextComplete() {
|
||||
let that = this
|
||||
setTimeout(() => {
|
||||
that.$element('rt').getBoundingClientRect({
|
||||
success: ({ height }) => {
|
||||
console.log('success', this.msg.type, height)
|
||||
this.contentHeight = height + 'px'
|
||||
},
|
||||
fail: (errorData, errorCode) => {
|
||||
console.log('fail', errorData, errorCode)
|
||||
|
||||
},
|
||||
complete: () => {
|
||||
console.log('complete')
|
||||
|
||||
}
|
||||
})
|
||||
}, 100)
|
||||
// this.
|
||||
},
|
||||
|
||||
onInit() {
|
||||
// console.log('msg-text',this.msg)
|
||||
if (this.msg.type !== 'image' && this.msg.desp.length > 0) {
|
||||
this.msg.text += "\n" + this.msg.desp
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
console.log('onready', this.msg.type);
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../../assets/styles/style.less';
|
||||
@import '../../../assets/styles/style.less';
|
||||
|
||||
.card {
|
||||
.flex-box-mixins(column, flex-start, center);
|
||||
margin: 24px 0;
|
||||
width: 100%;
|
||||
.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;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.image {
|
||||
/* width: 100%; */
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,13 +19,25 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import storage from '@system.storage'
|
||||
import router from '@system.router'
|
||||
export default {
|
||||
data: {
|
||||
settings: [
|
||||
{ label: "登录为 Easy", optName: "退出", handler: () => { $utils.showToast('点击了退出按钮') } },
|
||||
{ label: "自定义服务器", optName: "扫码", handler: () => { $utils.showToast('点击了扫码按钮') } },
|
||||
{ label: "", optName: "退出", handler: () => {
|
||||
promiseFactory(storage.clear)
|
||||
.then(() => {
|
||||
router.replace({
|
||||
uri: 'pages'
|
||||
})
|
||||
})
|
||||
.catch(e => {
|
||||
$utils.showToast(e)
|
||||
})
|
||||
} },
|
||||
// { label: "自定义服务器", optName: "扫码", handler: () => { $utils.showToast('点击了扫码按钮') } },
|
||||
{ label: "喜欢PushDeer？", optName: "评分", handler: () => { $utils.showToast('点击了评分按钮') } }
|
||||
]
|
||||
],
|
||||
},
|
||||
|
||||
onLogoutBtnClick() {
|
||||
|
|
@ -38,6 +50,7 @@ export default {
|
|||
evt.stop()
|
||||
this.settings[evt.detail].handler();
|
||||
})
|
||||
this.settings[0].label = "登录为 " + this.$app.$def.userinfo.name
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -16,66 +16,135 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import router from '@system.router'
|
||||
import storage from '@system.storage'
|
||||
import router from '@system.router'
|
||||
// import push from '@service.push'
|
||||
import wxaccount from '@service.wxaccount'
|
||||
|
||||
const appInitC = new BroadcastChannel('init')
|
||||
appInitC.onmessage = ({ data }) => {
|
||||
console.log(`index: received app init message:${data}`);
|
||||
if (data === 1) {
|
||||
appInitC.close()
|
||||
router.replace({
|
||||
uri: 'pages/Home'
|
||||
})
|
||||
export default {
|
||||
// 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
|
||||
private: {
|
||||
},
|
||||
|
||||
onWxSignBtnClick() {
|
||||
var type = wxaccount.getType();
|
||||
console.log('index:wxtype:' + type)
|
||||
if (type == 'APP') {
|
||||
const that = this
|
||||
wxaccount.authorize({
|
||||
scope: 'snsapi_userinfo',
|
||||
state: 'randomString',
|
||||
success: function (data) {
|
||||
console.log("wxaccount authorize success:" + JSON.stringify(data));
|
||||
that.onWxLoginSuccess(data).catch(e => {
|
||||
$utils.showToast(e)
|
||||
})
|
||||
},
|
||||
fail: function (data, code) {
|
||||
console.log("wxaccount authorize fail:" + data + ", code:" + code);
|
||||
},
|
||||
cancel: function () {
|
||||
console.log("wxaccount authorize cancelled.");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("wxaccount not available.");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
export default {
|
||||
// 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
|
||||
private: {
|
||||
},
|
||||
async onWxLoginSuccess(data) {
|
||||
let token = await API.wxLogin(data.code)
|
||||
console.log('wxaccount login success token=' + token);
|
||||
await this.loginSuccess(token)
|
||||
},
|
||||
|
||||
async onWxSignBtnClick() {
|
||||
API.login()
|
||||
.then(token => {
|
||||
appInitC.postMessage(token)
|
||||
})
|
||||
},
|
||||
async loginSuccess(token) {
|
||||
let that = this
|
||||
console.log('index: loginsuccess');
|
||||
promiseFactory(storage.set, { key: 'token', value: token })
|
||||
let regIdFromStorage = await promiseFactory(storage.get, { key: 'regId' })
|
||||
API.setToken(token)
|
||||
let userinfo = await API.userInfo()
|
||||
userinfo.token = token
|
||||
this.$app.$def.userinfo = userinfo
|
||||
|
||||
onInit() {
|
||||
},
|
||||
}
|
||||
// push.subscribe({
|
||||
// success: function ({ regId }) {
|
||||
// console.log(`push.subscribe succeeded, regIdFromStorage=${regIdFromStorage}, regId=${regId}`);
|
||||
// // console.log('todo: 若regId发生改变，需要上报服务器');
|
||||
// that.$app.$def.pushRegId = regId
|
||||
// if (regIdFromStorage !== regId) {
|
||||
// // TODO 上报新的推送ID
|
||||
// promiseFactory(storage.set, { key: 'regId', value: regId })
|
||||
// }
|
||||
// },
|
||||
// fail: function (data, code) {
|
||||
// console.log("push.subscribe failed, result data=" + JSON.stringify(data) + ", code=" + code);
|
||||
// },
|
||||
// complete: function () {
|
||||
// console.log("push.subscribe completed");
|
||||
// }
|
||||
// })
|
||||
// push.on({
|
||||
// callback: function (ret) {
|
||||
// console.log('received pass through message, ret = ' + JSON.stringify(ret));
|
||||
// }
|
||||
// })
|
||||
|
||||
router.replace({
|
||||
uri: 'pages/Home'
|
||||
})
|
||||
},
|
||||
|
||||
onInit() {
|
||||
(async () => {
|
||||
let token = await promiseFactory(storage.get, { key: 'token' })
|
||||
console.log(`index: get token = ${token} from storage success`)
|
||||
if (token.length !== 0) {
|
||||
await this.loginSuccess(token)
|
||||
}
|
||||
})()
|
||||
.catch(e => {
|
||||
console.log('catch:' + e);
|
||||
$utils.showToast(e);
|
||||
})
|
||||
.finally(() => {
|
||||
console.log('index: init complete');
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.wrapper {
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.logo {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
height: 60%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 60%;
|
||||
width: 50%;
|
||||
.btn-group {
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
/* margin: 0 auto; */
|
||||
|
||||
text {
|
||||
margin: 16px 0;
|
||||
padding: 24px;
|
||||
border-width: 3px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
/* margin: 0 auto; */
|
||||
|
||||
text {
|
||||
margin: 16px 0;
|
||||
padding: 24px;
|
||||
border-width: 3px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
}
|
||||
.btn-wx {
|
||||
color: #296c05;
|
||||
border-color: #296c05;
|
||||
}
|
||||
.btn-wx {
|
||||
color: #296c05;
|
||||
border-color: #296c05;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue