28 changed files with 8719 additions and 0 deletions
@ -0,0 +1,20 @@ |
|||
<script> |
|||
export default { |
|||
onLaunch: function() { |
|||
console.log('App Launch') |
|||
}, |
|||
onShow: function() { |
|||
console.log('App Show') |
|||
}, |
|||
onHide: function() { |
|||
console.log('App Hide') |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@import './common/uni.css'; |
|||
@import "./common/main.css"; |
|||
@import "./common/icon.css"; |
|||
@import "./common/iconfont.css"; |
|||
</style> |
|||
@ -0,0 +1,23 @@ |
|||
import http from '@/common/request' |
|||
|
|||
export function getDevice(dev_eui, limit, offset) { |
|||
let data = {} |
|||
if(dev_eui){ |
|||
data.dev_eui = dev_eui |
|||
} |
|||
if(limit){ |
|||
data.limit = limit |
|||
} |
|||
if(offset){ |
|||
data.offset = offset |
|||
} |
|||
return http.get('/device/info',data) |
|||
} |
|||
|
|||
export function postDevice(dev) { |
|||
return http.post('/device/info',dev) |
|||
} |
|||
|
|||
export function delDevice(id) { |
|||
return http.del(`/device/${id}`) |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
Date.prototype.format = function(format) { |
|||
var o = { |
|||
"M+": this.getMonth() + 1, //month
|
|||
"d+": this.getDate(), //day
|
|||
"h+": this.getHours(), //hour
|
|||
"m+": this.getMinutes(), //minute
|
|||
"s+": this.getSeconds(), //second
|
|||
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
|
|||
"S": this.getMilliseconds() //millisecond
|
|||
} |
|||
|
|||
if (/(y+)/.test(format)) { |
|||
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); |
|||
} |
|||
|
|||
for (var k in o) { |
|||
if (new RegExp("(" + k + ")").test(format)) { |
|||
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); |
|||
} |
|||
} |
|||
return format; |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,74 @@ |
|||
@font-face { |
|||
font-family: "iconfont"; |
|||
src: url('//at.alicdn.com/t/font_1339011_fnx8kfgj0pj.eot?t=1565167418581'); /* IE9 */ |
|||
src: url('//at.alicdn.com/t/font_1339011_fnx8kfgj0pj.eot?t=1565167418581#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
|||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), |
|||
url('//at.alicdn.com/t/font_1339011_fnx8kfgj0pj.woff?t=1565167418581') format('woff'), |
|||
url('//at.alicdn.com/t/font_1339011_fnx8kfgj0pj.ttf?t=1565167418581') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
|||
url('//at.alicdn.com/t/font_1339011_fnx8kfgj0pj.svg?t=1565167418581#iconfont') format('svg'); /* iOS 4.1- */ |
|||
} |
|||
|
|||
.iconfont { |
|||
font-family: "iconfont"; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-shebei:before { |
|||
content: "\e606"; |
|||
} |
|||
|
|||
.icon-lora:before { |
|||
content: "\e7bd"; |
|||
} |
|||
|
|||
.icon-NATwangguan:before { |
|||
content: "\e665"; |
|||
} |
|||
|
|||
.icon-wendu:before { |
|||
content: "\e61f"; |
|||
} |
|||
|
|||
.icon-ditu:before { |
|||
content: "\e601"; |
|||
} |
|||
|
|||
.icon-wenshidu:before { |
|||
content: "\e600"; |
|||
} |
|||
|
|||
.icon-shebei2:before { |
|||
content: "\e643"; |
|||
} |
|||
|
|||
.icon-kuaicheduanxinwangguan:before { |
|||
content: "\eb53"; |
|||
} |
|||
|
|||
.icon-kuaicheduanxinwangguan1:before { |
|||
content: "\eb5f"; |
|||
} |
|||
|
|||
.icon-wenshidu1:before { |
|||
content: "\e602"; |
|||
} |
|||
|
|||
.icon-shidu:before { |
|||
content: "\e653"; |
|||
} |
|||
|
|||
.icon-yemian-copy-copy-copy:before { |
|||
content: "\e603"; |
|||
} |
|||
|
|||
.icon-gerenzhongxinwoderenwubiaozhuntoumianxing:before { |
|||
content: "\e604"; |
|||
} |
|||
|
|||
.icon-gateway:before { |
|||
content: "\e615"; |
|||
} |
|||
|
|||
File diff suppressed because it is too large
@ -0,0 +1,16 @@ |
|||
import Request from '@/js_sdk/luch-request/request' |
|||
|
|||
const http = new Request(); |
|||
|
|||
http.setConfig((config) => { /* 设置全局配置 */ |
|||
config.baseUrl = 'https://api.alinkwise.com'; /* 根域名不同 */ |
|||
return config; |
|||
}) |
|||
http.interceptor.request((config, cancel) => { /* 请求之前拦截器 */ |
|||
return config; |
|||
}) |
|||
|
|||
http.interceptor.response((response) => { /* 请求之后拦截器 */ |
|||
return response |
|||
}) |
|||
export default http; |
|||
File diff suppressed because it is too large
@ -0,0 +1,182 @@ |
|||
<template> |
|||
<view class="search" :style="{ backgroundColor: backgroundColor }"> |
|||
<view class="content" :style="{ 'border-radius': radius + 'px', border: border }"> |
|||
<view class="content-box" :class="{ center: mode === 2 }"> |
|||
<text class="icon icon-search"></text> |
|||
<input class="input" :class="{ center: !active && mode === 2 }" :focus="isFocus" :placeholder="placeholder" v-model="inputVal" @focus="focus" @blur="blur" /> |
|||
<!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> --> |
|||
<text v-if="isDelShow" class="icon icon-del" @click="clear"></text> |
|||
</view> |
|||
<view v-show="(active && show && button === 'inside') || (isDelShow && button === 'inside')" class="searchBtn" @click="search">搜索</view> |
|||
</view> |
|||
<view v-if="button === 'outside'" class="button" :class="{ active: show || active }" @click="search"> |
|||
<view class="button-item">{{ !show ? searchName : '搜索' }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
mode: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
button: { |
|||
type: String, |
|||
default: 'outside' |
|||
}, |
|||
show: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
radius: { |
|||
type: String, |
|||
default: '60' |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: '请输入搜索内容' |
|||
}, |
|||
backgroundColor: { |
|||
type: String, |
|||
default: '#fff' |
|||
}, |
|||
border: { type: String, default: '1px #f5f5f5 solid' } |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
active: false, |
|||
inputVal: '', |
|||
searchName: '取消', |
|||
isDelShow: false, |
|||
isFocus: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
focus() { |
|||
this.active = true; |
|||
}, |
|||
blur() { |
|||
this.isFocus = false; |
|||
if (!this.inputVal) { |
|||
this.active = false; |
|||
} |
|||
}, |
|||
clear() { |
|||
this.inputVal = ''; |
|||
this.active = false; |
|||
this.$emit('search', ''); |
|||
}, |
|||
getFocus() { |
|||
this.isFocus = true; |
|||
}, |
|||
search() { |
|||
if (!this.inputVal) return; |
|||
console.log(this.inputVal); |
|||
this.$emit('search', this.inputVal); |
|||
} |
|||
}, |
|||
watch: { |
|||
inputVal(newVal) { |
|||
if (newVal) { |
|||
this.searchName = '搜索'; |
|||
this.isDelShow = true; |
|||
} else { |
|||
this.searchName = '取消'; |
|||
this.isDelShow = false; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.search { |
|||
display: flex; |
|||
width: 100%; |
|||
border-bottom: 1px #f5f5f5 solid; |
|||
box-sizing: border-box; |
|||
padding: 15upx; |
|||
font-size: $uni-font-size-base; |
|||
background: #fff; |
|||
.content { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 60upx; |
|||
border: 1px #ccc solid; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
transition: all 0.2s linear; |
|||
border-radius: 30px; |
|||
|
|||
.content-box { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
&.center { |
|||
justify-content: center; |
|||
} |
|||
.icon { |
|||
padding: 0 15upx; |
|||
&.icon-del { |
|||
font-size: 38upx; |
|||
} |
|||
} |
|||
.input { |
|||
width: 100%; |
|||
max-width: 100%; |
|||
line-height: 60upx; |
|||
height: 60upx; |
|||
transition: all 0.2s linear; |
|||
&.center { |
|||
width: 200upx; |
|||
} |
|||
&.sub { |
|||
// position: absolute; |
|||
width: auto; |
|||
color: grey; |
|||
} |
|||
} |
|||
} |
|||
.searchBtn { |
|||
height: 100%; |
|||
flex-shrink: 0; |
|||
padding: 0 30upx; |
|||
background: $uni-color-success; |
|||
line-height: 60upx; |
|||
color: #fff; |
|||
border-left: 1px #ccc solid; |
|||
transition: all 0.3s; |
|||
} |
|||
} |
|||
|
|||
.button { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
width: 0; |
|||
transition: all 0.2s linear; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
&.active { |
|||
padding-left: 15upx; |
|||
width: 100upx; |
|||
} |
|||
} |
|||
} |
|||
@font-face { |
|||
font-family: 'iconfont'; |
|||
src: url('https://at.alicdn.com/t/font_989023_efq0mtli526.ttf') format('truetype'); |
|||
} |
|||
.icon { |
|||
font-family: iconfont; |
|||
font-size: 32upx; |
|||
font-style: normal; |
|||
color: #999; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,173 @@ |
|||
<template> |
|||
<view class='refreshBox' :style="isTranform"> |
|||
<view class='refresh' :style="isZoom" :class="isEnd==2?'animationSmall':''"> |
|||
<view class='refreshWord' v-if="isEnd == 0">松开刷新</view> |
|||
<view class='refreshCirle animation' v-if="isEnd == 1"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'refresh', |
|||
props: { |
|||
isTop:{ |
|||
type:Number, |
|||
default:1 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isTranf: 0, |
|||
touchStart: '', |
|||
touchMove: '', |
|||
isEnd: 0 |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
refreshStart(e) { |
|||
if (this.isEnd == 0 && this.isTop == 1) { |
|||
this.touchStart = e.changedTouches[0].pageY |
|||
} |
|||
}, |
|||
refreshMove(e){ |
|||
if (this.isEnd == 0 && this.isTop == 1) { |
|||
var touchStart = this.touchStart, |
|||
oldMove = this.touchMove, |
|||
newMove = e.changedTouches[0].pageY |
|||
if (touchStart <= newMove) { |
|||
var isTranf = touchStart > newMove ? 0 : newMove - touchStart |
|||
this.isTranf = isTranf |
|||
this.touchMove = e.changedTouches[0].pageY |
|||
} |
|||
} else{ |
|||
this.isTranf = 0 |
|||
this.isEnd = 0 |
|||
this.touchStart = 9999 |
|||
} |
|||
}, |
|||
refreshEnd(e) { |
|||
var that = this |
|||
if (this.isEnd == 0 && this.isTop == 1) { |
|||
if (this.isTranf >= 90) { |
|||
this.isTranf = 125 |
|||
this.isEnd = 1 |
|||
this.$emit('isRefresh'); |
|||
} else { |
|||
this.isTranf = 0 |
|||
} |
|||
} |
|||
}, |
|||
endAfter(){ |
|||
this.isEnd = 2 |
|||
setTimeout(() => { |
|||
this.isTranf = 0 |
|||
this.isEnd = 0 |
|||
}, 600) |
|||
} |
|||
}, |
|||
computed: { |
|||
isTranform() { |
|||
var isTranf = this.isTranf > 150 ? 150 : this.isTranf |
|||
var isTemp = `transform: translateY(${isTranf-100}px);` |
|||
return isTemp |
|||
}, |
|||
isZoom() { |
|||
var isTranf = this.isTranf > 125 ? 125 : this.isTranf |
|||
var isTemp = `zoom:${isTranf/125};` |
|||
return isTemp |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.refreshBox { |
|||
margin:0 auto; |
|||
width: 100%; |
|||
height: 100upx; |
|||
overflow: hidden; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
max-height: 300upx; |
|||
position: fixed; |
|||
z-index: 999; |
|||
top: 0; |
|||
left: 0; |
|||
transform: translateY(-100upx); |
|||
} |
|||
|
|||
.animationSmall { |
|||
animation: small 1.1s both; |
|||
} |
|||
|
|||
@keyframes small { |
|||
0% { |
|||
transform: scale(1) |
|||
} |
|||
20%{ |
|||
transform: scale(1.4) |
|||
} |
|||
100% { |
|||
transform: scale(0) |
|||
} |
|||
} |
|||
.refreshWord{ |
|||
width: 150upx; |
|||
height: 26upx; |
|||
font-size: 24upx; |
|||
line-height: 26upx; |
|||
text-align: center; |
|||
border-radius: 26upx; |
|||
} |
|||
|
|||
.refresh { |
|||
min-width: 50upx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 50upx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0 0 16upx 0 rgba(0, 0, 0, 0.10); |
|||
border-radius: 50upx; |
|||
} |
|||
|
|||
.refreshCirle { |
|||
width: 26upx; |
|||
height: 26upx; |
|||
border-radius: 50%; |
|||
display: inline-block; |
|||
position: relative; |
|||
border: 6upx solid black; |
|||
border-bottom-color: transparent; |
|||
border-top-color: transparent; |
|||
} |
|||
|
|||
.animation { |
|||
animation: rotate 1.1s infinite; |
|||
animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65); |
|||
} |
|||
|
|||
@keyframes rotate { |
|||
0% { |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
.true { |
|||
color: black; |
|||
} |
|||
|
|||
.iconYes { |
|||
width: 34upx; |
|||
height: 34upx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,368 @@ |
|||
<template> |
|||
<view> |
|||
<view |
|||
class="fab-box fab" |
|||
:class="{ |
|||
leftBottom: leftBottom, |
|||
rightBottom: rightBottom, |
|||
leftTop: leftTop, |
|||
rightTop: rightTop |
|||
}" |
|||
> |
|||
<view |
|||
class="fab-circle" |
|||
:class="{ |
|||
left: horizontal === 'left' && direction === 'horizontal', |
|||
top: vertical === 'top' && direction === 'vertical', |
|||
bottom: vertical === 'bottom' && direction === 'vertical', |
|||
right: horizontal === 'right' && direction === 'horizontal' |
|||
}" |
|||
:style="{ 'background-color': styles.buttonColor }" |
|||
@click="open" |
|||
> |
|||
<text class="icon icon-jia" :class="{ active: showContent }"></text> |
|||
</view> |
|||
<view |
|||
class="fab-content" |
|||
:class="{ |
|||
left: horizontal === 'left', |
|||
right: horizontal === 'right', |
|||
flexDirection: direction === 'vertical', |
|||
flexDirectionStart: flexDirectionStart, |
|||
flexDirectionEnd: flexDirectionEnd |
|||
}" |
|||
:style="{ width: boxWidth, height: boxHeight, background: styles.backgroundColor }" |
|||
> |
|||
<view v-if="flexDirectionStart || horizontalLeft" class="fab-item first"></view> |
|||
<view |
|||
class="fab-item" |
|||
v-for="(item, index) in content" |
|||
:key="index" |
|||
:class="{ active: showContent }" |
|||
:style="{ |
|||
color: item.active ? styles.selectedColor : styles.color |
|||
}" |
|||
@click="taps(index, item)" |
|||
> |
|||
<image |
|||
class="content-image" |
|||
:src="item.active ? item.selectedIconPath : item.iconPath" |
|||
mode="" |
|||
></image> |
|||
<text class="text">{{ item.text }}</text> |
|||
</view> |
|||
<view v-if="flexDirectionEnd || horizontalRight" class="fab-item first"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
pattern: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
} |
|||
}, |
|||
horizontal: { |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
vertical: { |
|||
type: String, |
|||
default: 'bottom' |
|||
}, |
|||
direction: { |
|||
type: String, |
|||
default: 'horizontal' |
|||
}, |
|||
content: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
fabShow: false, |
|||
flug: true, |
|||
showContent: false, |
|||
styles: { |
|||
color: '#3c3e49', |
|||
selectedColor: '#007AFF', |
|||
backgroundColor: '#fff', |
|||
buttonColor: '#3c3e49' |
|||
} |
|||
}; |
|||
}, |
|||
created() { |
|||
if (this.top === 0) { |
|||
this.fabShow = true; |
|||
} |
|||
// 初始化样式 |
|||
this.styles = Object.assign({}, this.styles, this.pattern); |
|||
}, |
|||
methods: { |
|||
open() { |
|||
this.showContent = !this.showContent; |
|||
}, |
|||
/** |
|||
* 按钮点击事件 |
|||
*/ |
|||
taps(index, item) { |
|||
this.$emit('trigger', { |
|||
index, |
|||
item |
|||
}); |
|||
}, |
|||
/** |
|||
* 获取 位置信息 |
|||
*/ |
|||
getPosition(types, paramA, paramB) { |
|||
if (types === 0) { |
|||
return this.horizontal === paramA && this.vertical === paramB; |
|||
} else if (types === 1) { |
|||
return this.direction === paramA && this.vertical === paramB; |
|||
} else if (types === 2) { |
|||
return this.direction === paramA && this.horizontal === paramB; |
|||
} else { |
|||
return this.showContent && this.direction === paramA |
|||
? this.contentWidth |
|||
: this.contentWidthMin; |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
pattern(newValue, oldValue) { |
|||
console.log(JSON.stringify(newValue)); |
|||
this.styles = Object.assign({}, this.styles, newValue); |
|||
} |
|||
}, |
|||
computed: { |
|||
contentWidth(e) { |
|||
return uni.upx2px((this.content.length + 1) * 110 + 20) + 'px'; |
|||
}, |
|||
contentWidthMin() { |
|||
return uni.upx2px(110) + 'px'; |
|||
}, |
|||
// 动态计算宽度 |
|||
boxWidth() { |
|||
return this.getPosition(3, 'horizontal'); |
|||
}, |
|||
// 动态计算高度 |
|||
boxHeight() { |
|||
return this.getPosition(3, 'vertical'); |
|||
}, |
|||
// 计算左下位置 |
|||
leftBottom() { |
|||
return this.getPosition(0, 'left', 'bottom'); |
|||
}, |
|||
// 计算右下位置 |
|||
rightBottom() { |
|||
return this.getPosition(0, 'right', 'bottom'); |
|||
}, |
|||
// 计算左上位置 |
|||
leftTop() { |
|||
return this.getPosition(0, 'left', 'top'); |
|||
}, |
|||
rightTop() { |
|||
return this.getPosition(0, 'right', 'top'); |
|||
}, |
|||
flexDirectionStart() { |
|||
return this.getPosition(1, 'vertical', 'top'); |
|||
}, |
|||
flexDirectionEnd() { |
|||
return this.getPosition(1, 'vertical', 'bottom'); |
|||
}, |
|||
horizontalLeft() { |
|||
return this.getPosition(2, 'horizontal', 'left'); |
|||
}, |
|||
horizontalRight() { |
|||
return this.getPosition(2, 'horizontal', 'right'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.fab-box { |
|||
position: fixed; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.fab-box.top { |
|||
width: 60upx; |
|||
height: 60upx; |
|||
right: 30upx; |
|||
bottom: 60upx; |
|||
border: 1px #5989b9 solid; |
|||
background: #6699cc; |
|||
border-radius: 10upx; |
|||
color: #fff; |
|||
transition: all 0.3; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.fab-box.active { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.fab-box.fab { |
|||
z-index: 10; |
|||
} |
|||
|
|||
.fab-box.fab.leftBottom { |
|||
left: 30upx; |
|||
bottom: 60upx; |
|||
} |
|||
|
|||
.fab-box.fab.leftTop { |
|||
left: 30upx; |
|||
top: 80upx; |
|||
/* #ifdef H5 */ |
|||
top: calc(80upx + var(--window-top)); |
|||
/* #endif */ |
|||
} |
|||
|
|||
.fab-box.fab.rightBottom { |
|||
right: 30upx; |
|||
bottom: 60upx; |
|||
} |
|||
|
|||
.fab-box.fab.rightTop { |
|||
right: 30upx; |
|||
top: 80upx; |
|||
/* #ifdef H5 */ |
|||
top: calc(80upx + var(--window-top)); |
|||
/* #endif */ |
|||
} |
|||
|
|||
.fab-circle { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
width: 110upx; |
|||
height: 110upx; |
|||
background: #3c3e49; |
|||
/* background: #5989b9; */ |
|||
border-radius: 50%; |
|||
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2); |
|||
z-index: 11; |
|||
} |
|||
|
|||
.fab-circle.left { |
|||
left: 0; |
|||
} |
|||
|
|||
.fab-circle.right { |
|||
right: 0; |
|||
} |
|||
|
|||
.fab-circle.top { |
|||
top: 0; |
|||
} |
|||
|
|||
.fab-circle.bottom { |
|||
bottom: 0; |
|||
} |
|||
|
|||
.fab-circle .icon-jia { |
|||
color: #ffffff; |
|||
font-size: 50upx; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.fab-circle .icon-jia.active { |
|||
transform: rotate(135deg); |
|||
} |
|||
|
|||
.fab-content { |
|||
background: #6699cc; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
border-radius: 100upx; |
|||
overflow: hidden; |
|||
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); |
|||
transition: all 0.2s; |
|||
width: 110upx; |
|||
} |
|||
|
|||
.fab-content.left { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.fab-content.right { |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.fab-content.flexDirection { |
|||
flex-direction: column; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.fab-content.flexDirectionStart { |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.fab-content.flexDirectionEnd { |
|||
flex-direction: column; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.fab-content .fab-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 110upx; |
|||
height: 110upx; |
|||
font-size: 24upx; |
|||
color: #fff; |
|||
opacity: 0; |
|||
transition: opacity 0.2s; |
|||
} |
|||
|
|||
.fab-content .fab-item.active { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.fab-content .fab-item .content-image { |
|||
width: 50upx; |
|||
height: 50upx; |
|||
margin-bottom: 5upx; |
|||
} |
|||
|
|||
.fab-content .fab-item.first { |
|||
width: 110upx; |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: 'iconfont'; |
|||
src: url('https://at.alicdn.com/t/font_1028200_xhbo4rn58rp.ttf?t=1548214263520') |
|||
format('truetype'); |
|||
} |
|||
|
|||
.icon { |
|||
font-family: 'iconfont' !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-jia:before { |
|||
content: '\e630'; |
|||
} |
|||
|
|||
.icon-arrow-up:before { |
|||
content: '\e603'; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,35 @@ |
|||
### Icon 图标 |
|||
|
|||
用于展示 icon，组件名：``uni-icon``，代码块： uIcon。 |
|||
|
|||
**使用方式：** |
|||
|
|||
在 ``script`` 中引用组件 |
|||
|
|||
```javascript |
|||
import uniIcon from "@/components/uni-icon/uni-icon.vue" |
|||
export default { |
|||
components: {uniIcon} |
|||
} |
|||
``` |
|||
|
|||
在 ``template`` 中使用组件 |
|||
|
|||
```html |
|||
<uni-icon type="contact" size="30"></uni-icon> |
|||
``` |
|||
|
|||
实际效果参考：[https://github.com/dcloudio/uni-ui](https://github.com/dcloudio/uni-ui) |
|||
|
|||
**Icon 属性说明：** |
|||
|
|||
|属性名 |类型|默认值 |说明| |
|||
|---|----|---|---| |
|||
|type |String |-|图标图案，参考下表| |
|||
|color |String |-|图标颜色 | |
|||
|size |Number |24|图标大小| |
|||
|@click |EventHandle|-|点击 Icon 触发事件| |
|||
|
|||
**type 类型：** |
|||
|
|||
 |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,57 @@ |
|||
import Request from './request' |
|||
const test = new Request(); |
|||
test.setConfig((config) => { /* 设置全局配置 */ |
|||
config.baseUrl = 'http://www.aaa.cn'; |
|||
config.header = { |
|||
a: 1, |
|||
b: 2 |
|||
} |
|||
return config |
|||
}) |
|||
test.interceptor.request((config, cancel) => { /* 请求之前拦截器 */ |
|||
config.header = { |
|||
...config.header, |
|||
a: 1 |
|||
} |
|||
/* |
|||
if (!token) { // 如果token不存在，调用cancel 会取消本次请求，但是该函数的catch() 仍会执行
|
|||
cancel('token 不存在') // 接收一个参数，会传给catch((err) => {}) err.errMsg === 'token 不存在'
|
|||
} |
|||
*/ |
|||
return config; |
|||
}) |
|||
test.interceptor.response((response) => { /* 请求之后拦截器 */ |
|||
return response; |
|||
}) |
|||
|
|||
const http = new Request(); |
|||
http.setConfig((config) => { /* 设置全局配置 */ |
|||
config.baseUrl = 'http://www.bbb.cn'; /* 根域名不同 */ |
|||
config.header = { |
|||
a: 1, |
|||
b: 2 |
|||
} |
|||
return config |
|||
}) |
|||
http.interceptor.request((config, cancel) => { /* 请求之前拦截器 */ |
|||
config.header = { |
|||
...config.header, |
|||
b: 1 |
|||
} |
|||
/* |
|||
if (!token) { // 如果token不存在，调用cancel 会取消本次请求，但是该函数的catch() 仍会执行
|
|||
cancel('token 不存在') // 接收一个参数，会传给catch((err) => {}) err.errMsg === 'token 不存在'
|
|||
} |
|||
*/ |
|||
return config; |
|||
}) |
|||
http.interceptor.response((response) => { /* 请求之后拦截器 */ |
|||
console.log(response); |
|||
return response; |
|||
}) |
|||
export { |
|||
http, |
|||
test |
|||
}; |
|||
|
|||
|
|||
@ -0,0 +1,148 @@ |
|||
**插件使用说明** |
|||
|
|||
- 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截 |
|||
- 支持全局挂载 |
|||
- 支持多个全局配置实例 |
|||
- 支持typescript、javascript 版本(如果不使用ts版本，则可以把luch-request-ts 文件夹删除) |
|||
- 下载后把 http-request 文件夹放到项目 utils/ 目录下 |
|||
|
|||
|
|||
**Example** |
|||
--- |
|||
创建实例 |
|||
|
|||
``` javascript |
|||
const http = new Request(); |
|||
``` |
|||
|
|||
执行` GET `请求 |
|||
|
|||
``` javascript |
|||
http.get('/user/login', {userName: 'name', password: '123456'}).then(res => { |
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
// 局部修改配置，局部配置优先级高于全局配置 |
|||
http.get('/user/login', {userName: 'name', password: '123456'}, { |
|||
header: {}, /* 会覆盖全局header */ |
|||
dataType: 'json', |
|||
responseType: 'text' |
|||
}).then(res => { |
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
``` |
|||
执行` POST `请求 |
|||
|
|||
``` javascript |
|||
http.post('/user/login', {userName: 'name', password: '123456'} ).then(res => { |
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
// 局部修改配置，局部配置优先级高于全局配置 |
|||
http.post('/user/login', {userName: 'name', password: '123456'}, { |
|||
header: {}, /* 会覆盖全局header */ |
|||
dataType: 'json', |
|||
responseType: 'text' |
|||
}).then(res => { |
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
``` |
|||
|
|||
**全局请求配置** |
|||
-- |
|||
``` javascript |
|||
{ |
|||
baseUrl: '', /* 全局根路径，需要注意，如果请求的路径为绝对路径，则不会应用baseUrl */ |
|||
header: { |
|||
'Content-Type': 'application/json;charset=UTF-8' |
|||
}, |
|||
method: 'GET', |
|||
dataType: 'json', |
|||
responseType: 'text' |
|||
} |
|||
``` |
|||
|
|||
|
|||
全局配置修改` setConfig ` |
|||
|
|||
``` javascript |
|||
/** |
|||
* @description 修改全局默认配置 |
|||
* @param {Function} |
|||
*/ |
|||
http.setConfig((config) => { /* config 为默认全局配置*/ |
|||
config.baseUrl = 'http://www.bbb.cn'; /* 根域名 */ |
|||
config.header = { |
|||
a: 1, |
|||
b: 2 |
|||
} |
|||
return config |
|||
}) |
|||
``` |
|||
|
|||
**拦截器** |
|||
-- |
|||
|
|||
在请求之前拦截 |
|||
|
|||
``` javascript |
|||
/** |
|||
* @param { Function} cancel - 取消请求,调用cancel 会取消本次请求，但是该函数的catch() 仍会执行 |
|||
* |
|||
* @param {String} text ['handle cancel'| any] - catch((err) => {}) err.errMsg === 'handle cancel'。非必传，默认'handle cancel' |
|||
* @cancel {Object} config - catch((err) => {}) err.config === config; 非必传，默认为request拦截器修改之前的config |
|||
* function cancel(text, config) {} |
|||
*/ |
|||
http.interceptor.request((config, cancel) => { /* cancel 为函数，如果调用会取消本次请求。需要注意：调用cancel,本次请求的catch仍会执行。必须return config */ |
|||
config.header = { |
|||
...config.header, |
|||
a: 1 |
|||
} |
|||
/* |
|||
if (!token) { // 如果token不存在，调用cancel 会取消本次请求，但是该函数的catch() 仍会执行 |
|||
cancel('token 不存在', config) // 把修改后的config传入，之后响应就可以拿到修改后的config。 如果调用了cancel但是不传修改后的config，则catch((err) => {}) err.config 为request拦截器修改之前的config |
|||
} |
|||
*/ |
|||
return config; |
|||
}) |
|||
``` |
|||
|
|||
在请求之后拦截 |
|||
|
|||
``` javascript |
|||
http.interceptor.response((response) => { /* 必须return response*/ |
|||
console.log(response); |
|||
return response; |
|||
}) |
|||
``` |
|||
|
|||
**typescript使用** |
|||
-- |
|||
在` request.ts `里还暴露了五个接口 |
|||
```javascript |
|||
{ |
|||
options, // request 方法配置参数 |
|||
handleOptions, // get/post 方法配置参数 |
|||
config, // init 全局config接口(setConfig 参数接口) |
|||
requestConfig, // 请求之前参数配置项 |
|||
response // 响应体 |
|||
} |
|||
``` |
|||
|
|||
|
|||
**issue** |
|||
-- |
|||
有任何问题或者建议可以=> <a href="https://ask.dcloud.net.cn/question/74922" target="_blank">issue提交</a>,先给个五星好评QAQ!! |
|||
|
|||
|
|||
**作者想说** |
|||
-- |
|||
- 主体代码3kb |
|||
- 目前该插件已经上项目，遇到任何问题请先检查自己的代码（排除新版本发布的情况）。最近新上了` typescript ` 版本，因为本人没使用过ts,所以写的不好的地方，还请见谅~ |
|||
####创作不易，五星好评你懂得！ |
|||
@ -0,0 +1,111 @@ |
|||
/** |
|||
* Request 0.0.8 |
|||
* @Class uni-app request网络请求库 |
|||
* @Author lu-ch |
|||
* @Date 2019-07-25 |
|||
* @Email webwork.s@qq.com |
|||
* http://ext.dcloud.net.cn/plugin?id=392
|
|||
* **/ |
|||
export default class Request { |
|||
config = { |
|||
baseUrl: '', |
|||
header: { |
|||
'Content-Type': 'application/json;charset=UTF-8' |
|||
}, |
|||
method: 'GET', |
|||
dataType: 'json', |
|||
responseType: 'text' |
|||
} |
|||
|
|||
static posUrl (url) { /* 判断url是否为绝对路径 */ |
|||
return /(http|https):\/\/([\w.]+\/?)\S*/.test(url) |
|||
} |
|||
|
|||
interceptor = { |
|||
request: (f) => { |
|||
if (f) { |
|||
this.requestBeforeFun = f |
|||
} |
|||
}, |
|||
response: (f) => { |
|||
if (f) { |
|||
this.requestComFun = f |
|||
} |
|||
} |
|||
} |
|||
|
|||
static requestBeforeFun (config) { |
|||
return config |
|||
} |
|||
|
|||
static requestComFun (response) { |
|||
return response |
|||
} |
|||
|
|||
setConfig (f) { |
|||
this.config = f(this.config) |
|||
} |
|||
|
|||
request (options = {}) { |
|||
options.baseUrl = this.config.baseUrl |
|||
options.dataType = options.dataType || this.config.dataType |
|||
options.responseType = options.responseType || this.config.responseType |
|||
options.url = Request.posUrl(options.url) ? options.url : (options.baseUrl + options.url) |
|||
options.data = options.data || {} |
|||
options.header = options.header || this.config.header |
|||
options.method = options.method || this.config.method |
|||
return new Promise((resolve, reject) => { |
|||
let next = true |
|||
let _config = null |
|||
options.complete = (response) => { |
|||
let statusCode = response.statusCode |
|||
response.config = _config |
|||
response = this.requestComFun(response) |
|||
if (statusCode === 200) { // 成功
|
|||
resolve(response) |
|||
} else { |
|||
reject(response) |
|||
} |
|||
} |
|||
let cancel = (t = 'handle cancel', config = options) => { |
|||
let err = { |
|||
errMsg: t, |
|||
config: config |
|||
} |
|||
reject(err) |
|||
next = false |
|||
} |
|||
|
|||
_config = { ...this.requestBeforeFun(options, cancel) } |
|||
if (!next) return |
|||
uni.request(_config) |
|||
}) |
|||
} |
|||
|
|||
get (url, data, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
data, |
|||
method: 'GET', |
|||
...options |
|||
}) |
|||
} |
|||
|
|||
post (url, data, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
data, |
|||
method: 'POST', |
|||
...options |
|||
}) |
|||
} |
|||
|
|||
del (url, data, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
data, |
|||
method: 'DELETE', |
|||
...options |
|||
}) |
|||
} |
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
import Vue from 'vue' |
|||
import App from './App' |
|||
import './common/dateUtils' |
|||
|
|||
Vue.config.productionTip = false |
|||
|
|||
App.mpType = 'app' |
|||
|
|||
const app = new Vue({ |
|||
...App |
|||
}) |
|||
app.$mount() |
|||
@ -0,0 +1,76 @@ |
|||
{ |
|||
"name" : "deviceIDApp", |
|||
"appid" : "__UNI__1E9AE51", |
|||
"description" : "", |
|||
"versionName" : "1.0.0", |
|||
"versionCode" : "100", |
|||
"transformPx" : false, |
|||
/* 5+App特有相关 */ |
|||
"app-plus" : { |
|||
"usingComponents" : true, |
|||
"splashscreen" : { |
|||
"alwaysShowBeforeRender" : true, |
|||
"waiting" : true, |
|||
"autoclose" : true, |
|||
"delay" : 0 |
|||
}, |
|||
/* 模块配置 */ |
|||
"modules" : {}, |
|||
/* 应用发布信息 */ |
|||
"distribute" : { |
|||
/* android打包配置 */ |
|||
"android" : { |
|||
"permissions" : [ |
|||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CAMERA\"/>", |
|||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>", |
|||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
|||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>", |
|||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
|||
] |
|||
}, |
|||
/* ios打包配置 */ |
|||
"ios" : {}, |
|||
/* SDK配置 */ |
|||
"sdkConfigs" : {} |
|||
} |
|||
}, |
|||
/* 快应用特有相关 */ |
|||
"quickapp" : {}, |
|||
/* 小程序特有相关 */ |
|||
"mp-weixin" : { |
|||
"appid" : "wx7ee0db110b58b021", |
|||
"setting" : { |
|||
"urlCheck" : true, |
|||
"minified" : true, |
|||
"postcss" : true, |
|||
"es6" : true |
|||
}, |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-alipay" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-baidu" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-toutiao" : { |
|||
"usingComponents" : true |
|||
} |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
{ |
|||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages |
|||
|
|||
{ |
|||
"path": "pages/device/device", |
|||
"style": {"navigationBarTitleText": "设备"} |
|||
} |
|||
,{ |
|||
"path" : "pages/about/about", |
|||
"style" : {"navigationBarTitleText": "关于"} |
|||
} |
|||
], |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "black", |
|||
"navigationBarTitleText": "设备管理", |
|||
"navigationBarBackgroundColor": "#F8F8F8", |
|||
"backgroundColor": "#F8F8F8" |
|||
}, |
|||
"tabBar": { |
|||
"backgroundColor": "#ffffff", |
|||
"color": "#cdcdcd", |
|||
"selectedColor": "#50B7EA", |
|||
"borderStyle": "white", |
|||
"list": [ |
|||
{ |
|||
"pagePath": "pages/device/device", |
|||
"iconPath": "static/device.png", |
|||
"selectedIconPath": "static/device_active.png", |
|||
"text": "设备" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/about/about", |
|||
"iconPath": "static/about.png", |
|||
"selectedIconPath": "static/about_active.png", |
|||
"text": "关于" |
|||
} |
|||
] |
|||
} |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<view> |
|||
设备录入APP |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,229 @@ |
|||
<template> |
|||
<view @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd"> |
|||
<refresh ref="refresh" @isRefresh='isRefresh'></refresh> |
|||
<mSearch :mode="2" button="inside" @search="setSearch($event)" ></mSearch> |
|||
<scroll-view scroll-y="true" style="height:1000upx" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper" show-scrollbar="true"> |
|||
<view class="cu-list menu-avatar margin-top"> |
|||
<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in deviceList" :key="index" |
|||
@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index"> |
|||
<image src="/static/lora.png" class="cu-avatar round lg"></image> |
|||
<view class="content padding-tb-sm"> |
|||
<view> |
|||
<text class="text-lg">{{item.devEUI}}</text> |
|||
</view> |
|||
<view class="flex"> |
|||
<text class="flex-sub text-df text-black">{{item.devAddr}}</text> |
|||
<text class="flex-sub text-df text-grey">{{item.username}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="action"> |
|||
<view class="text-grey text-xs">{{item.createAt | dateFilter(true)}}</view> |
|||
<view class="text-grey text-xs">{{item.createAt | dateFilter(false)}}</view> |
|||
</view> |
|||
<view class="move"> |
|||
<view class="bg-red" @click="handleDeleteItem(item.id,index)">删除</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="text-align: center;">----------------底线----------------</view> |
|||
</scroll-view> |
|||
<uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="vertical" @trigger="trigger"></uni-fab> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import refresh from '@/components/refresh/refresh.vue'; |
|||
import mSearch from '@/components/mehaotian-search/mehaotian-search.vue'; |
|||
import uniFab from '@/components/uni-fab/uni-fab.vue'; |
|||
import { getDevice,postDevice,delDevice } from '@/api/device.js'; |
|||
|
|||
export default { |
|||
components: { |
|||
refresh, |
|||
mSearch, |
|||
uniFab |
|||
}, |
|||
data() { |
|||
return { |
|||
deviceList: [], |
|||
pattern: { |
|||
color: '#7A7E83', |
|||
backgroundColor: '#fff', |
|||
selectedColor: '#007AFF', |
|||
buttonColor:"#007AFF" |
|||
}, |
|||
content: [ |
|||
{ |
|||
iconPath: '/static/lora.png', |
|||
selectedIconPath: '/static/lora.png', |
|||
text: '添加终端', |
|||
active: false |
|||
} |
|||
], |
|||
userInfo: {}, |
|||
listTouchStart: 0, |
|||
listTouchDirection: null, |
|||
modalName: null, |
|||
total: 0, |
|||
offset: 0, |
|||
pageNum: 1, |
|||
limit: 10, |
|||
query: "" |
|||
}; |
|||
}, |
|||
onLoad(){ |
|||
this.getUserInfo(); |
|||
this.search(); |
|||
}, |
|||
filters:{ |
|||
dateFilter(msg,flag){ |
|||
const d = new Date(msg); |
|||
if(flag){ |
|||
return d.format('yyyy/MM/dd') |
|||
}else{ |
|||
return d.format('hh:mm:ss') |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
fetchDeviceList(content,limit,offset){ |
|||
getDevice(content,limit,offset).then(response => { |
|||
this.deviceList = response.data.data.result |
|||
this.total = response.data.data.total |
|||
}) |
|||
}, |
|||
handleDeleteItem(id,index){ |
|||
delDevice(id).then(response => { |
|||
if(response.data && response.data.code == 0){ |
|||
this.deviceList.splice(index, 1) |
|||
} |
|||
}) |
|||
}, |
|||
refreshStart(e) { |
|||
this.$refs.refresh.refreshStart(e); |
|||
}, |
|||
refreshMove(e){ |
|||
this.$refs.refresh.refreshMove(e); |
|||
}, |
|||
refreshEnd(e) { |
|||
this.$refs.refresh.refreshEnd(e); |
|||
}, |
|||
isRefresh(){ |
|||
setTimeout(() => { |
|||
this.search() |
|||
uni.showToast({ |
|||
icon: 'success', |
|||
title: '刷新成功' |
|||
}) |
|||
this.$refs.refresh.endAfter() //刷新结束调用 |
|||
}, 1000) |
|||
}, |
|||
setSearch(val) { |
|||
this.query = val |
|||
this.search() |
|||
}, |
|||
search(){ |
|||
this.fetchDeviceList(this.query,this.limit,this.offset) |
|||
}, |
|||
getUserInfo() { |
|||
uni.getUserInfo({ |
|||
provider: 'weixin', |
|||
success: (result) => { |
|||
this.userInfo = result.userInfo; |
|||
console.log(result); |
|||
}, |
|||
fail: (error) => { |
|||
console.log('getUserInfo fail', error); |
|||
} |
|||
}); |
|||
}, |
|||
// ListTouch触摸开始 |
|||
ListTouchStart(e) { |
|||
this.listTouchStart = e.touches[0].pageX |
|||
}, |
|||
|
|||
// ListTouch计算方向 |
|||
ListTouchMove(e) { |
|||
this.listTouchDirection = this.listTouchStart - e.touches[0].pageX > 80 ? 'left' : 'right' |
|||
}, |
|||
|
|||
// ListTouch计算滚动 |
|||
ListTouchEnd(e) { |
|||
if (this.listTouchDirection == 'left') { |
|||
this.modalName = e.currentTarget.dataset.target |
|||
} else { |
|||
this.modalName = null |
|||
} |
|||
this.listTouchDirection = null |
|||
}, |
|||
scrolltolower(e){ |
|||
console.log(e) |
|||
this.offset = (this.pageNum - 1) * this.limit |
|||
if(this.offset > this.total) { |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '已经到底啦' |
|||
}) |
|||
return; |
|||
} |
|||
setTimeout(() => { |
|||
this.search() |
|||
this.$refs.refresh.endAfter() |
|||
}, 1000) |
|||
this.pageNum ++ |
|||
}, |
|||
scrolltoupper(e){ |
|||
console.log(e) |
|||
this.offset = 0 |
|||
this.pageNum = 1 |
|||
setTimeout(() => { |
|||
this.search() |
|||
this.$refs.refresh.endAfter() |
|||
}, 1000) |
|||
}, |
|||
trigger(e) { |
|||
console.log(e); |
|||
this.content[e.index].active = !e.item.active; |
|||
const that = this |
|||
uni.scanCode({ |
|||
onlyFromCamera: true, |
|||
success: function (res) { |
|||
console.log(res) |
|||
if(res.scanType == 'QR_CODE' && res.result){ |
|||
const arr = res.result.split('|') |
|||
if(arr.length >= 2){ |
|||
const dev = {devEUI:arr[0],devAddr:arr[1]} |
|||
if(that.userInfo){ |
|||
dev.username = that.userInfo.nickName |
|||
} |
|||
postDevice(dev).then(response => { |
|||
if(response.data){ |
|||
if(response.data.code == 0){ |
|||
that.search() |
|||
uni.showToast({ |
|||
icon: 'success', |
|||
title: '添加终端成功' |
|||
}) |
|||
}else{ |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '终端已存在' |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
margin-top: 10upx; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,106 @@ |
|||
/** |
|||
* 这里是uni-app内置的常用样式变量 |
|||
* |
|||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 |
|||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App |
|||
* |
|||
*/ |
|||
|
|||
/** |
|||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 |
|||
* |
|||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 |
|||
*/ |
|||
|
|||
/* 颜色变量 */ |
|||
|
|||
/* 行为相关颜色 */ |
|||
$uni-color-primary: #007aff; |
|||
$uni-color-success: #4cd964; |
|||
$uni-color-warning: #f0ad4e; |
|||
$uni-color-error: #dd524d; |
|||
|
|||
/* 文字基本颜色 */ |
|||
$uni-text-color:#333;//基本色 |
|||
$uni-text-color-inverse:#fff;//反色 |
|||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息 |
|||
$uni-text-color-placeholder: #808080; |
|||
$uni-text-color-disable:#c0c0c0; |
|||
|
|||
/* 背景颜色 */ |
|||
$uni-bg-color:#ffffff; |
|||
$uni-bg-color-grey:#f8f8f8; |
|||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色 |
|||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 |
|||
|
|||
/* 边框颜色 */ |
|||
$uni-border-color:#c8c7cc; |
|||
|
|||
/* 尺寸变量 */ |
|||
|
|||
/* 文字尺寸 */ |
|||
$uni-font-size-sm:24upx; |
|||
$uni-font-size-base:28upx; |
|||
$uni-font-size-lg:32upx; |
|||
|
|||
/* 图片尺寸 */ |
|||
$uni-img-size-sm:40upx; |
|||
$uni-img-size-base:52upx; |
|||
$uni-img-size-lg:80upx; |
|||
|
|||
/* Border Radius */ |
|||
$uni-border-radius-sm: 4upx; |
|||
$uni-border-radius-base: 6upx; |
|||
$uni-border-radius-lg: 12upx; |
|||
$uni-border-radius-circle: 50%; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-row-sm: 10px; |
|||
$uni-spacing-row-base: 20upx; |
|||
$uni-spacing-row-lg: 30upx; |
|||
|
|||
/* 垂直间距 */ |
|||
$uni-spacing-col-sm: 8upx; |
|||
$uni-spacing-col-base: 16upx; |
|||
$uni-spacing-col-lg: 24upx; |
|||
|
|||
/* 透明度 */ |
|||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 |
|||
|
|||
/* 文章场景相关 */ |
|||
$uni-color-title: #2C405A; // 文章标题颜色 |
|||
$uni-font-size-title:40upx; |
|||
$uni-color-subtitle: #555555; // 二级标题颜色 |
|||
$uni-font-size-subtitle:36upx; |
|||
$uni-color-paragraph: #3F536E; // 文章段落颜色 |
|||
$uni-font-size-paragraph:30upx; |
|||
|
|||
// custom |
|||
|
|||
/* 页面左右间距 */ |
|||
$page-row-spacing: 30upx; |
|||
$page-color-base: #f8f8f8; |
|||
$page-color-light: #f8f6fc; |
|||
$base-color: #fa436a; |
|||
|
|||
/* 文字尺寸 */ |
|||
$font-sm: 24upx; |
|||
$font-base: 28upx; |
|||
$font-lg: 32upx; |
|||
/*文字颜色*/ |
|||
$font-color-dark: #303133; |
|||
$font-color-base: #606266; |
|||
$font-color-light: #909399; |
|||
$font-color-disabled: #C0C4CC; |
|||
$font-color-spec: #4399fc; |
|||
/* 边框颜色 */ |
|||
$border-color-dark: #DCDFE6; |
|||
$border-color-base: #E4E7ED; |
|||
$border-color-light: #EBEEF5; |
|||
/* 图片加载中颜色 */ |
|||
$image-bg-color: #eee; |
|||
/* 行为相关颜色 */ |
|||
$uni-color-primary:#fa436a; |
|||
$uni-color-success: #4cd964; |
|||
$uni-color-warning: #f0ad4e; |
|||
$uni-color-error: #dd524d; |
|||
Loading…
Reference in new issue