页面更新
This commit is contained in:
parent
6aa3876189
commit
9432b55708
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3598721 */
|
||||
src: url('//at.alicdn.com/t/c/font_3598721_z5jk4kgjfv.woff2?t=1703600739909') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_3598721_z5jk4kgjfv.woff?t=1703600739909') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_3598721_z5jk4kgjfv.ttf?t=1703600739909') format('truetype');
|
||||
font-family: "iconfont"; /* Project id 4424810 */
|
||||
src: url('//at.alicdn.com/t/c/font_4424810_0wqy30upiu1m.woff2?t=1706272714682') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_4424810_0wqy30upiu1m.woff?t=1706272714682') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_4424810_0wqy30upiu1m.ttf?t=1706272714682') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -13,438 +13,10 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-xiangxiajiantoucuxiao:before {
|
||||
content: "\e8c8";
|
||||
}
|
||||
|
||||
.icon-xiangshangjiantoucuxiao:before {
|
||||
content: "\e8d8";
|
||||
}
|
||||
|
||||
.icon-yiwancheng:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.icon-zanting1:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
|
||||
.icon-yuedu:before {
|
||||
content: "\e810";
|
||||
}
|
||||
|
||||
.icon-sanjiao:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.icon-24gf-clockCircle:before {
|
||||
content: "\eb40";
|
||||
}
|
||||
|
||||
.icon-shuaxin:before {
|
||||
content: "\e782";
|
||||
}
|
||||
|
||||
.icon-jia1:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
|
||||
.icon-fuzhi:before {
|
||||
content: "\ee15";
|
||||
}
|
||||
|
||||
.icon-daoru:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
.icon-erweima:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.icon-xiazai:before {
|
||||
content: "\e635";
|
||||
}
|
||||
|
||||
.icon-didian:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
|
||||
.icon-jiaoyu-1:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
|
||||
.icon-jiaoyu:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.icon-huanjing-2:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-huanjing:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.icon-jiaqi:before {
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.icon-shipin-1:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-yuyan:before {
|
||||
content: "\e618";
|
||||
}
|
||||
|
||||
.icon-xiaofei:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
.icon-shenghuo:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.icon-keji:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.icon-jiaotong:before {
|
||||
content: "\e626";
|
||||
}
|
||||
|
||||
.icon-shenghuo-1:before {
|
||||
content: "\e628";
|
||||
}
|
||||
|
||||
.icon-qihouyuhuanjing:before {
|
||||
content: "\e629";
|
||||
}
|
||||
|
||||
.icon-xiaofei-1:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.icon-huanjing-1:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.icon-shipin:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.icon-keji-1:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.icon-tiku:before {
|
||||
content: "\e6dc";
|
||||
}
|
||||
|
||||
.icon-Union1:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.icon-Union:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-tousujianyi:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.icon-shengyin1:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.icon-bofang1:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.icon-lock-full:before {
|
||||
content: "\e881";
|
||||
}
|
||||
|
||||
.icon-bofang:before {
|
||||
content: "\e625";
|
||||
}
|
||||
|
||||
.icon-zanting:before {
|
||||
content: "\e662";
|
||||
}
|
||||
|
||||
.icon-shengyin2:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
|
||||
.icon-quanping1:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-shangyishou:before {
|
||||
content: "\e718";
|
||||
}
|
||||
|
||||
.icon-xiayishou:before {
|
||||
content: "\e719";
|
||||
}
|
||||
|
||||
.icon-jingyin:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-arow_down:before {
|
||||
content: "\e6d7";
|
||||
}
|
||||
|
||||
.icon-kefu:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.icon-jiazai:before {
|
||||
content: "\e6af";
|
||||
}
|
||||
|
||||
.icon-yuanquan:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-fanhui:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
|
||||
.icon-a-ziyuan511:before {
|
||||
content: "\e78c";
|
||||
}
|
||||
|
||||
.icon-circleyuanquan:before {
|
||||
content: "\e71e";
|
||||
}
|
||||
|
||||
.icon-circle2yuanquan:before {
|
||||
content: "\e71f";
|
||||
}
|
||||
|
||||
.icon-ai-copy:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.icon-shanchu1:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
|
||||
.icon-gantanhao:before {
|
||||
content: "\e685";
|
||||
}
|
||||
|
||||
.icon-jianhao:before {
|
||||
content: "\e729";
|
||||
}
|
||||
|
||||
.icon-shizhongclock74:before {
|
||||
content: "\e6ba";
|
||||
}
|
||||
|
||||
.icon-jia:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.icon-wenhao:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.icon-wancheng1:before {
|
||||
content: "\e66e";
|
||||
}
|
||||
|
||||
.icon-shengyin:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.icon-jiantou_zuoyouqiehuan_o:before {
|
||||
content: "\eb95";
|
||||
}
|
||||
|
||||
.icon-bangdingweixin:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.icon-qiehuan1:before {
|
||||
content: "\ec56";
|
||||
}
|
||||
|
||||
.icon-shuyi_fanyi-36:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.icon-zhijiao-triangle:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.icon-chenggong1:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.icon-arow_up:before {
|
||||
content: "\e6e5";
|
||||
}
|
||||
|
||||
.icon-arrow-down:before {
|
||||
content: "\e7b2";
|
||||
}
|
||||
|
||||
.icon-jiantou_xiangyouliangci:before {
|
||||
content: "\eb09";
|
||||
}
|
||||
|
||||
.icon-jiantou_xiangzuoliangci:before {
|
||||
content: "\eb0a";
|
||||
}
|
||||
|
||||
.icon-app_icons--:before {
|
||||
content: "\e621";
|
||||
}
|
||||
|
||||
.icon-24gf-playCircle:before {
|
||||
content: "\ea83";
|
||||
}
|
||||
|
||||
.icon-youjiantou11:before {
|
||||
content: "\e634";
|
||||
}
|
||||
|
||||
.icon-22:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.icon-shanchu:before {
|
||||
content: "\e8b6";
|
||||
content: "\e6ac";
|
||||
}
|
||||
|
||||
.icon-quanping:before {
|
||||
content: "\e7cf";
|
||||
}
|
||||
|
||||
.icon-youjiantou:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.icon-qiehuan:before {
|
||||
content: "\e691";
|
||||
}
|
||||
|
||||
.icon-guanbi-yanjing:before {
|
||||
content: "\e6e3";
|
||||
}
|
||||
|
||||
.icon-eye:before {
|
||||
content: "\e77a";
|
||||
}
|
||||
|
||||
.icon-sousuo2:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.icon-dianzan1:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.icon-guanbi1:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.icon-icon:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.icon-duihao:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.icon-24gf-play:before {
|
||||
content: "\ea82";
|
||||
}
|
||||
|
||||
.icon-paixu:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-shaixuan:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
|
||||
.icon-yangshengqi:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-dianzan:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-sousuo:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.icon-zuojiantou:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.icon-guanbi2:before {
|
||||
content: "\e725";
|
||||
}
|
||||
|
||||
.icon-xiangshangjiantou:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
.icon-shouye:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.icon-luyin:before {
|
||||
content: "\e615";
|
||||
}
|
||||
|
||||
.icon-sousuo1:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.icon-guanbi:before {
|
||||
content: "\e624";
|
||||
}
|
||||
|
||||
.icon-xiajiantou:before {
|
||||
content: "\eb6d";
|
||||
}
|
||||
|
||||
.icon-shangjiantou:before {
|
||||
content: "\eb6e";
|
||||
}
|
||||
|
||||
.icon-icon_tianjia:before {
|
||||
content: "\eb89";
|
||||
}
|
||||
|
||||
.icon-guanzhu:before {
|
||||
content: "\e739";
|
||||
}
|
||||
|
||||
.icon-fenxiang_2:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-guanzhu-yiguanzhu:before {
|
||||
content: "\e703";
|
||||
}
|
||||
|
||||
.icon-fenxiang1:before {
|
||||
content: "\e8b0";
|
||||
}
|
||||
|
||||
.icon-bianjisekuai:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-xiala2:before {
|
||||
content: "\e619";
|
||||
.icon-xiangyou1:before {
|
||||
content: "\e775";
|
||||
}
|
||||
|
|
|
|||
903
components/HM-dragSorts/HM-dragSorts.vue
Normal file
903
components/HM-dragSorts/HM-dragSorts.vue
Normal file
|
|
@ -0,0 +1,903 @@
|
|||
<template>
|
||||
<view class="HM-drag-sort" :style="{'background-color': listBackgroundColor}">
|
||||
<!-- 拖拽中显示的行 -->
|
||||
<view class="rowBox-shadow" id="shadowRowBox">
|
||||
<view class="hm-row-shadow move" id="shadowRow">
|
||||
<view class="modules" v-if="false">
|
||||
<!-- 内容 -->
|
||||
<view class="row-content">
|
||||
<view class="row" :style="{'height': rowHeight+'px'}">
|
||||
<image v-if="shadowRow.icon" class="icon" :src="shadowRow.icon"></image>
|
||||
<text class="text">{{shadowRow.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 拖拽图标 -->
|
||||
<view class="drag-content">
|
||||
<view class="drag-icon" :style="{'height': rowHeight+'px'}">
|
||||
<text class="iconfont icon-drag"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 拖拽列表 -->
|
||||
<!-- <scroll-view class="color scroll-view" :id="'scrollView_'+guid" :scroll-y="true"
|
||||
:style="{'height': ListHeight+'px'}" :scroll-top="scrollViewTop" @scroll="drag.scroll"
|
||||
:scroll-with-animation="scrollAnimation">
|
||||
<view class="list">
|
||||
|
||||
</view>
|
||||
</scroll-view> -->
|
||||
<!-- <view class="card" >
|
||||
<view class="card_left" v-for="(row,index) in dragList" :key="index" v-if="index==0">
|
||||
<view class="img">
|
||||
<image src="@/static/sc.png" mode="" v-show="index === 0"></image>
|
||||
<image src="@/static/sc1.png" mode="" v-show="index !== 0"></image>
|
||||
</view>
|
||||
<view class="txt">
|
||||
{{row.name}}({{row.num}})
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_right">
|
||||
<image src="@/static/xg.png" mode="" @click.stop="xiugai()"
|
||||
style="width: 34rpx;height: 34rpx;margin-right: 30rpx;"></image>
|
||||
<image src="@/static/xq.png" mode=""></image>
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-for="(row,index) in dragList" :key="row.HMDrag_id" class="rowBox ani">
|
||||
<!-- 注意,这里的style只有在行首次渲染出来才有效,后面拖动列表,style会被wxs修改,这里的style就不会再生效了 -->
|
||||
<view class="hm-row" :style="{'transform': 'translate3d(0,' + (row.HMDrag_sort-index)*100 + '%,-1px)'}" :data-sort="row.HMDrag_sort" :data-id="row.HMDrag_id" :id="row.HMDrag_id">
|
||||
<view class="modules" v-if="false" >
|
||||
<!-- 内容 -->
|
||||
<view class="row-content">
|
||||
<view class="row" @tap="triggerClick(row.HMDrag_sort, row)" :style="{'height': rowHeight+'px'}">
|
||||
<image v-if="row.icon" class="icon" :src="row.icon"></image>
|
||||
<text class="text">{{row.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 拖拽图标 -->
|
||||
<view v-if="row.disabled" class="drag-content" >
|
||||
<view class="drag-icon" :style="{'height': rowHeight+'px'}">
|
||||
<text class="iconfont icon-drag disabled"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="drag-content" :data-id="row.HMDrag_id" @touchstart="drag.touchstart"
|
||||
@touchmove="drag.touchmove" @touchend="drag.touchend">
|
||||
<view class="drag-icon" :style="{'height': rowHeight+'px'}">
|
||||
<text class="iconfont icon-drag"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card" >
|
||||
|
||||
<view class="card_left">
|
||||
<view class="img">
|
||||
<!-- <image src="@/static/sc.png" mode="" v-show="index === 0"></image> -->
|
||||
<image src="@/static/sc1.png" mode=""></image>
|
||||
</view>
|
||||
<view class="txt">
|
||||
{{row.name}}({{row.num}})
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_right">
|
||||
<image src="@/static/xg.png" mode="" @click.stop="xiugai()"
|
||||
style="width: 34rpx;height: 34rpx;margin-right: 30rpx;"></image>
|
||||
<image src="@/static/xq.png" mode="" :data-id="row.HMDrag_id" @touchstart="drag.touchstart"
|
||||
@touchmove="drag.touchmove" @touchend="drag.touchend"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 数据跳板 -->
|
||||
<view id="dataView" style="display: none !important;" :data-guid="guid" :prop="wxsDataStr" :change:prop="drag.receiveData">触发wxs跳板,请勿删除</view>
|
||||
<!-- #ifdef APP-VUE || H5 -->
|
||||
<view style="display: none !important;" :prop="scrollCommand" :change:prop="renderjs.runCommand">触发renderjs跳板,请勿删除</view>
|
||||
<!-- #endif -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script src="./drag.wxs" module="drag" lang="wxs"></script>
|
||||
<script module="renderjs" lang="renderjs">
|
||||
// APP or H5端 renderjs 实现拖拽中的自动滚动列表
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
e: null,
|
||||
ScrollView: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
runCommand(e) {
|
||||
if (e == null) {
|
||||
return
|
||||
}
|
||||
this.e = e;
|
||||
this.getScrollView(document.getElementById('scrollView_' + this.e.guid))
|
||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
||||
this.AnimationFrameID = window.requestAnimationFrame(this.Animation);
|
||||
if (e.command == "stop") {
|
||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
||||
return;
|
||||
}
|
||||
},
|
||||
Animation() {
|
||||
if (this.e.command == "stop") {
|
||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
||||
return;
|
||||
}
|
||||
// 计算最大滚动高度
|
||||
let maxScrollTop = this.e.rowLength * this.e.rowHeight - this.e.ListHeight;
|
||||
if (this.e.command == "up") {
|
||||
this.ScrollView.scrollTop -= 3
|
||||
} else if (this.e.command == "down") {
|
||||
this.ScrollView.scrollTop += 3;
|
||||
}
|
||||
if (this.ScrollView.scrollTop < 0) {
|
||||
this.ScrollView.scrollTop = 0;
|
||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
||||
}
|
||||
if (this.ScrollView.scrollTop > maxScrollTop) {
|
||||
this.ScrollView.scrollTop = maxScrollTop;
|
||||
window.cancelAnimationFrame(this.AnimationFrameID);
|
||||
}
|
||||
this.AnimationFrameID = window.requestAnimationFrame(this.Animation);
|
||||
},
|
||||
getScrollView(DOM) {
|
||||
|
||||
if (this.ScrollView != null) {
|
||||
return this.ScrollView;
|
||||
}
|
||||
let styleStr = DOM.getAttribute('style');
|
||||
|
||||
if (DOM.className == 'uni-scroll-view' && styleStr != null && styleStr.indexOf('overflow') > -1 && styleStr
|
||||
.indexOf(
|
||||
'auto') > -1) {
|
||||
this.ScrollView = DOM;
|
||||
return DOM;
|
||||
} else {
|
||||
this.getScrollView(DOM.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
/**
|
||||
* 拖拽排序组件 HM-dragSort
|
||||
* @description 拖拽排序组件 HM-dragSort
|
||||
* @property {ObjectArray} list = [] 列表数据,数据格式[{"name": "花呗","icon": "/static/img/1.png",}]
|
||||
* @property {Boolean} feedbackGenerator = [true|false] 是否拖动触感反馈
|
||||
* @property {Boolean} longTouch = [true|false] 是否长按拖动
|
||||
* @property {Boolean} autoScroll = [true|false] 是否拖拽至边缘自动滚动列表
|
||||
* @property {Number} longTouchTime = [] 选填,触发长按时长,单位:ms,默认350ms,不支持微信小程序
|
||||
* @property {Number} listHeight = 0 选填,可拖动列表整体的高度,单位:px,默认等于窗口高度
|
||||
* @property {Number} rowHeight = 44 选填,行高,单位:px,默认44px
|
||||
* @property {String} listBackgroundColor 选填,列表底色,注意是列表的底色,不是行的底色,默认#FFFFFF
|
||||
* @event {Function} change 行位置发生改变时触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'}
|
||||
* @event {Function} confirm 拖拽结束且行位置发生了改变触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'}
|
||||
*/
|
||||
export default {
|
||||
name: 'HM-dragSort',
|
||||
data() {
|
||||
return {
|
||||
guid: "",
|
||||
isAppH5: true, //是否APPH5 无需手动配置
|
||||
shadowRow: {}, // 存放被拖拽行数据
|
||||
// 列表数据
|
||||
dragList: [],
|
||||
ListHeight: this.listHeight, // scroll-view列表高度
|
||||
|
||||
// 控制滑动
|
||||
scrollViewTop: 0, // 滚动条位置
|
||||
scrollCommand: null, //传递renderjs数据
|
||||
isHoldTouch: false, //是否正在拖拽
|
||||
isScrolling: false, //是否正在滚动视图
|
||||
scrollAnimation: false, //滚动动画 在微信端开启
|
||||
scrollTimer: null, //定时器-控制滚动 微信小程序端使用 实现类似requestAnimationFrame效果
|
||||
wxsDataObj: [],
|
||||
wxsDataStr: "[]"
|
||||
}
|
||||
},
|
||||
// #ifdef VUE3
|
||||
emits: ['change', 'confirm'],
|
||||
// #endif
|
||||
props: {
|
||||
//是否开启拖动震动反馈
|
||||
feedbackGenerator: {
|
||||
value: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启长按拖动
|
||||
longTouch: {
|
||||
value: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoScroll: {
|
||||
value: Boolean,
|
||||
default: true
|
||||
},
|
||||
longTouchTime: {
|
||||
value: Number,
|
||||
default: 300
|
||||
},
|
||||
// 列表数据
|
||||
list: {
|
||||
value: Array,
|
||||
default: []
|
||||
},
|
||||
// 行高度 默认44行高
|
||||
rowHeight: {
|
||||
value: Number,
|
||||
default: 44
|
||||
},
|
||||
// 组件高度 默认windowHeight满屏
|
||||
listHeight: {
|
||||
value: Number,
|
||||
default: 0
|
||||
},
|
||||
listBackgroundColor: {
|
||||
value: String,
|
||||
default: "#fff"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
longTouch(val) {
|
||||
// #ifdef VUE3
|
||||
if (!val) {
|
||||
console.error('vue3目前仅支持长按拖拽!');
|
||||
}
|
||||
// #endif
|
||||
|
||||
this.pushWxsData('longTouch', val);
|
||||
},
|
||||
longTouchTime(val) {
|
||||
this.pushWxsData('longTouchTime', val);
|
||||
},
|
||||
feedbackGenerator(val) {
|
||||
this.pushWxsData('feedbackGenerator', val);
|
||||
},
|
||||
autoScroll(val) {
|
||||
this.pushWxsData('autoScroll', val);
|
||||
},
|
||||
list: {
|
||||
handler(val) {
|
||||
this.initList(val); //数据变化重新初始化list
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
listHeight: {
|
||||
handler(val) {
|
||||
|
||||
this.ListHeight = val;
|
||||
this.pushWxsData('ListHeight', this.ListHeight);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.guid = this.getGuid();
|
||||
|
||||
const res = uni.getSystemInfoSync();
|
||||
// #ifdef MP-WEIXIN
|
||||
let state = this.compareVersion(res.hostVersion, '2.14.2');
|
||||
if (state < 0) {
|
||||
console.error('当前微信基础库:' + res.hostVersion + ',HM-dragSorts组件仅支持微信基础库2.14.2+,请切换基础库!');
|
||||
}
|
||||
this.scrollAnimation = true;
|
||||
this.isAppH5 = false;
|
||||
// #endif
|
||||
if (this.listHeight == 0) {
|
||||
this.ListHeight = res.windowHeight;
|
||||
// #ifdef VUE3
|
||||
// vue3 要减去导航栏和状态栏高度
|
||||
if (res.windowHeight == res.screenHeight) {
|
||||
this.ListHeight = res.windowHeight - 45 - res.statusBarHeight;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
this.pushWxsData('isAppH5', this.isAppH5);
|
||||
this.pushWxsData('ListHeight', this.ListHeight);
|
||||
this.pushWxsData('longTouch', this.longTouch);
|
||||
},
|
||||
methods: {
|
||||
xiugai(){
|
||||
console.log('111');
|
||||
},
|
||||
getGuid() {
|
||||
function S4() {
|
||||
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
||||
}
|
||||
return (S4() + S4() + "_" + S4() + "_" + S4() + "_" + S4() + "_" + S4() + S4() + S4());
|
||||
},
|
||||
|
||||
initList() {
|
||||
let tmpList = JSON.parse(JSON.stringify(this.list));
|
||||
for (let i = 0, len = tmpList.length; i < len; i++) {
|
||||
// 组件内赋予临时id和sort
|
||||
if (!tmpList[i].hasOwnProperty('HMDrag_id')) {
|
||||
tmpList[i].HMDrag_id = 'HMDragId_' + this.getGuid();
|
||||
}
|
||||
tmpList[i].HMDrag_sort = i;
|
||||
}
|
||||
if (this.dragList.length > 0) {
|
||||
setTimeout(() => {
|
||||
this.dragList.splice(0, this.dragList.length, ...tmpList);
|
||||
}, 50)
|
||||
} else {
|
||||
this.dragList = JSON.parse(JSON.stringify(tmpList));
|
||||
}
|
||||
this.pushWxsData('lastInitTime', (new Date()).valueOf());
|
||||
},
|
||||
loadShadowRow(e) {
|
||||
|
||||
this.shadowRow = this.getMoveRow(e.rowSort);
|
||||
},
|
||||
|
||||
//兼容微信小程序震动
|
||||
vibrate() {
|
||||
uni.vibrateShort()
|
||||
},
|
||||
// 控制自动滚动视图
|
||||
pageScroll(e) {
|
||||
// 滚动 up-上滚动 down-下滚动
|
||||
if (e.command == "up" || e.command == "down") {
|
||||
if (!this.isHoldTouch) {
|
||||
this.isHoldTouch = true;
|
||||
this.scrollViewTop = e.scrollTop;
|
||||
}
|
||||
if (this.isScrolling) {
|
||||
return;
|
||||
};
|
||||
this.isScrolling = true;
|
||||
|
||||
if (this.isAppH5) {
|
||||
// APP端和H5端 执行renderjs的滚动
|
||||
e.ListHeight = this.ListHeight;
|
||||
e.rowHeight = this.rowHeight;
|
||||
e.rowLength = this.dragList.length;
|
||||
this.scrollCommand = e;
|
||||
return;
|
||||
}
|
||||
|
||||
// 微信小程序执行以下逻辑
|
||||
this.scrollTimer != null && clearInterval(this.scrollTimer);
|
||||
let maxHeight = this.rowHeight * this.dragList.length + 1 - this.ListHeight;
|
||||
let runTick = true;
|
||||
// 逻辑层传递到视图层需要时间，可能会出现滚动不流畅现象
|
||||
this.scrollTimer = setInterval(() => {
|
||||
if (!runTick) {
|
||||
return;
|
||||
}
|
||||
this.runScroll(e.command, maxHeight);
|
||||
runTick = false;
|
||||
this.$nextTick(function() {
|
||||
runTick = true;
|
||||
})
|
||||
}, 16.6)
|
||||
}
|
||||
// 停止滚动
|
||||
if (e.command == "stop") {
|
||||
// #ifdef APP-PLUS || H5
|
||||
// 停止指定传递到renderjs
|
||||
this.scrollCommand = e;
|
||||
// #endif
|
||||
this.isScrolling && this.stopScroll();
|
||||
}
|
||||
},
|
||||
// 微信端的滚动
|
||||
runScroll(command, maxHeight) {
|
||||
if (command == "up") {
|
||||
this.scrollViewTop -= 5
|
||||
}
|
||||
if (command == "down") {
|
||||
this.scrollViewTop += 5;
|
||||
}
|
||||
if (this.scrollViewTop < 0) {
|
||||
this.scrollViewTop = 0;
|
||||
clearInterval(this.scrollTimer);
|
||||
}
|
||||
if (this.scrollViewTop > maxHeight) {
|
||||
this.scrollViewTop = maxHeight;
|
||||
clearInterval(this.scrollTimer);
|
||||
}
|
||||
},
|
||||
//停止滚动
|
||||
stopScroll() {
|
||||
this.scrollTimer != null && clearInterval(this.scrollTimer);
|
||||
this.isScrolling = false;
|
||||
this.scrollingtop = 0;
|
||||
},
|
||||
//
|
||||
getMoveRow(HMDrag_sort) {
|
||||
for (let i = 0, len = this.dragList.length; i < len; i++) {
|
||||
if (this.dragList[i].HMDrag_sort == HMDrag_sort) {
|
||||
return JSON.parse(JSON.stringify(this.dragList[i]));
|
||||
}
|
||||
}
|
||||
},
|
||||
//
|
||||
triggerClick(index, row) {
|
||||
let tmpRow = JSON.parse(JSON.stringify(row));
|
||||
// 清除临时id和sort
|
||||
delete tmpRow.HMDrag_id;
|
||||
delete tmpRow.HMDrag_sort;
|
||||
this.$emit('onclick', {
|
||||
index: index,
|
||||
row: JSON.parse(JSON.stringify(tmpRow))
|
||||
});
|
||||
},
|
||||
change(e) {
|
||||
e.moveRow = this.getMoveRow(e.index);
|
||||
// 清除组件临时赋予的id
|
||||
delete e.moveRow.HMDrag_id;
|
||||
delete e.moveRow.HMDrag_sort;
|
||||
this.$emit('change', e);
|
||||
},
|
||||
sort(e) {
|
||||
this.stopScroll();
|
||||
this.isHoldTouch = false;
|
||||
let moveRow = this.getMoveRow(e.index);
|
||||
// 检测清除临时id和sort
|
||||
delete moveRow.HMDrag_id;
|
||||
delete moveRow.HMDrag_sort;
|
||||
|
||||
let list = JSON.parse(JSON.stringify(this.dragList));
|
||||
let tmpList = [];
|
||||
for (let i = 0, len = list.length; i < len; i++) {
|
||||
// 检测清除临时id和sort
|
||||
delete list[i].HMDrag_id;
|
||||
delete list[i].HMDrag_sort;
|
||||
let index = e.sortArray[i];
|
||||
this.dragList[i].HMDrag_sort = index;
|
||||
tmpList[index] = list[i];
|
||||
}
|
||||
// 触发组件confirm 并传递数据
|
||||
this.$emit('confirm', {
|
||||
list: tmpList,
|
||||
index: e.index,
|
||||
moveTo: e.offset,
|
||||
moveRow: moveRow
|
||||
});
|
||||
|
||||
},
|
||||
getNowList(){
|
||||
let list = JSON.parse(JSON.stringify(this.dragList));
|
||||
let tmpList = [];
|
||||
for (let i = 0, len = list.length; i < len; i++) {
|
||||
let tmpSotr = list[i].HMDrag_sort;
|
||||
tmpList[tmpSotr] = list[i];
|
||||
// 检测清除临时id和sort
|
||||
delete tmpList[tmpSotr].HMDrag_id;
|
||||
delete tmpList[tmpSotr].HMDrag_sort;
|
||||
}
|
||||
return tmpList;
|
||||
},
|
||||
splice() {
|
||||
let deleteIndex = arguments[0];
|
||||
let deleteLength = arguments[1];
|
||||
let len = arguments.length;
|
||||
let waitPushList = [];
|
||||
for (let i = 2; i < len; i++) {
|
||||
let newRow = arguments[i]
|
||||
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
||||
newRow.HMDrag_sort = deleteIndex+i-2;
|
||||
waitPushList.push(newRow);
|
||||
}
|
||||
let minDeleteSort = deleteIndex;
|
||||
let maxDeleteSort = deleteLength>0?deleteIndex+deleteLength-1:deleteIndex;
|
||||
let offsetSort = waitPushList.length - deleteLength;
|
||||
let deleteIndexArray = [];
|
||||
|
||||
for (let i = this.dragList.length-1; i >=0; i--) {
|
||||
let row = this.dragList[i];
|
||||
let rowSort = row.HMDrag_sort;
|
||||
// 跳过
|
||||
if(rowSort<minDeleteSort){
|
||||
continue;
|
||||
}
|
||||
// 删除
|
||||
if(deleteLength>0 && rowSort >= minDeleteSort && rowSort <=maxDeleteSort){
|
||||
this.dragList.splice(i,1);
|
||||
continue;
|
||||
}
|
||||
if(offsetSort!=0 && rowSort>=maxDeleteSort){
|
||||
let newSort = rowSort + offsetSort;
|
||||
this.dragList[i].HMDrag_sort = newSort;
|
||||
|
||||
}
|
||||
}
|
||||
this.dragList.push(...waitPushList);
|
||||
this.pushNewSort();
|
||||
|
||||
let list = JSON.parse(JSON.stringify(this.dragList));
|
||||
let tmpList = this.getNowList();
|
||||
return tmpList;
|
||||
},
|
||||
push(){
|
||||
let len = arguments.length;
|
||||
let waitPushList = [];
|
||||
let startSotr = this.dragList.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
let newRow = arguments[i]
|
||||
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
||||
newRow.HMDrag_sort = startSotr+i;
|
||||
waitPushList.push(newRow);
|
||||
}
|
||||
this.dragList.push(...waitPushList);
|
||||
this.pushNewSort();
|
||||
let tmpList = this.getNowList();
|
||||
return tmpList;
|
||||
},
|
||||
unshift(){
|
||||
let len = arguments.length;
|
||||
let waitPushList = [];
|
||||
for (let i = 0; i < len; i++) {
|
||||
let newRow = arguments[i]
|
||||
newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
|
||||
newRow.HMDrag_sort = i;
|
||||
waitPushList.push(newRow);
|
||||
}
|
||||
for (let i = this.dragList.length-1; i >=0; i--) {
|
||||
let row = this.dragList[i];
|
||||
let rowSort = row.HMDrag_sort;
|
||||
let newSort = rowSort + len;
|
||||
this.dragList[i].HMDrag_sort = newSort;
|
||||
}
|
||||
this.dragList.push(...waitPushList);
|
||||
this.pushNewSort();
|
||||
let tmpList = this.getNowList();
|
||||
return tmpList;
|
||||
},
|
||||
pushNewSort(){
|
||||
let sortArray=[];
|
||||
for (let i = 0,len = this.dragList.length; i<len; i++) {
|
||||
sortArray.push(this.dragList[i].HMDrag_sort);
|
||||
}
|
||||
this.pushWxsData('sortArray', sortArray);
|
||||
this.pushWxsData('lastInitTime', (new Date()).valueOf());
|
||||
},
|
||||
pushWxsData(key=null, val=null) {
|
||||
this.wxsDataObj.splice(0,8,['guid', this.guid],
|
||||
['listLength', this.dragList.length],
|
||||
['ListHeight', this.ListHeight],
|
||||
['isAppH5', this.isAppH5],
|
||||
['longTouch', this.longTouch],
|
||||
['longTouchTime', this.longTouchTime],
|
||||
['feedbackGenerator', this.feedbackGenerator],
|
||||
['autoScroll', this.autoScroll]);
|
||||
let index = -1;
|
||||
let sotrArrayIndex = -1;
|
||||
for (let i = 0; i < this.wxsDataObj.length; i++) {
|
||||
if (this.wxsDataObj[i][0] == key) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (index > -1) {
|
||||
this.wxsDataObj[index][1] = val;
|
||||
if(key == 'sortArray'){
|
||||
sotrArrayIndex = index;
|
||||
}
|
||||
} else {
|
||||
this.wxsDataObj.push([key, val]);
|
||||
if(key == 'sortArray'){
|
||||
sotrArrayIndex = this.wxsDataObj.length-1;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.guid == "") {
|
||||
return;
|
||||
}
|
||||
this.wxsDataStr = JSON.stringify(this.wxsDataObj);
|
||||
},
|
||||
compareVersion(v1, v2) {
|
||||
v1 = v1.split('.')
|
||||
v2 = v2.split('.')
|
||||
const len = Math.max(v1.length, v2.length)
|
||||
|
||||
while (v1.length < len) {
|
||||
v1.push('0')
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0')
|
||||
}
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i])
|
||||
const num2 = parseInt(v2[i])
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1
|
||||
} else if (num1 < num2) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 32rpx auto 0;
|
||||
width: 682rpx;
|
||||
height: 114rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
|
||||
.card_left {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-left: 48rpx;
|
||||
|
||||
.img {
|
||||
width: 35.3rpx;
|
||||
height: 35.3rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
margin-left: 52rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.card_right {
|
||||
margin-right: 38rpx;
|
||||
|
||||
image {
|
||||
width: 45.51rpx;
|
||||
height: 31.86rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
//默认
|
||||
$row-background-color:#fff;
|
||||
$border-color :#c8c7cb;
|
||||
$shadow-color-moveing :rgba(0, 0, 0, 0.5);
|
||||
$drag-icon-color:#c7c7cb;
|
||||
$drag-icon-color-disabled:#e7e7eb;
|
||||
//Dark模式
|
||||
$Dark-row-background-color:#000;
|
||||
$Dark-border-color :#3d3d40;
|
||||
$Dark-shadow-color-moveing :rgba(0, 0, 0, 0.5);
|
||||
$Dark-drag-icon-color:#c7c7cb;
|
||||
$Dark-drag-icon-color-disabled:#e7e7eb;
|
||||
|
||||
//字体图标 拖拽图标
|
||||
@font-face {
|
||||
font-family: "HM-DS-font";
|
||||
src: url('data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYqxv5sAAAYsAAAAHEdERUYAKQAKAAAGDAAAAB5PUy8yPVJI1gAAAVgAAABWY21hcAAP6o8AAAHAAAABQmdhc3D//wADAAAGBAAAAAhnbHlmwsmUEgAAAxAAAAA0aGVhZBgr3I8AAADcAAAANmhoZWEH3gOFAAABFAAAACRobXR4DAAAAAAAAbAAAAAQbG9jYQAaAAAAAAMEAAAACm1heHABEQAYAAABOAAAACBuYW1lKeYRVQAAA0QAAAKIcG9zdEdJTj8AAAXMAAAANwABAAAAAQAAXdXjiV8PPPUACwQAAAAAANqGzEkAAAAA2obMSQAAALsEAAJFAAAACAACAAAAAAAAAAEAAAOA/4AAXAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEAAwAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5uTm5AOA/4AAXAOAAIAAAAABAAAAAAAABAAAAAAAAAAEAAAABAAAAAAAAAMAAAADAAAAHAABAAAAAAA8AAMAAQAAABwABAAgAAAABAAEAAEAAObk//8AAObk//8ZHwABAAAAAAAAAQYAAAEAAAAAAAAAAQIAAAACAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoAAAADAAAAuwQAAkUAAwAHAAsAABEhFSEVIRUhFSEVIQQA/AAEAPwABAD8AAJFRlxGXEYAAAAAAAASAN4AAQAAAAAAAAAVACwAAQAAAAAAAQAIAFQAAQAAAAAAAgAHAG0AAQAAAAAAAwAIAIcAAQAAAAAABAAIAKIAAQAAAAAABQALAMMAAQAAAAAABgAIAOEAAQAAAAAACgArAUIAAQAAAAAACwATAZYAAwABBAkAAAAqAAAAAwABBAkAAQAQAEIAAwABBAkAAgAOAF0AAwABBAkAAwAQAHUAAwABBAkABAAQAJAAAwABBAkABQAWAKsAAwABBAkABgAQAM8AAwABBAkACgBWAOoAAwABBAkACwAmAW4ACgBDAHIAZQBhAHQAZQBkACAAYgB5ACAAaQBjAG8AbgBmAG8AbgB0AAoAAApDcmVhdGVkIGJ5IGljb25mb250CgAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAAVgBlAHIAcwBpAG8AbgAgADEALgAwAABWZXJzaW9uIDEuMAAAaQBjAG8AbgBmAG8AbgB0AABpY29uZm9udAAARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgAAR2VuZXJhdGVkIGJ5IHN2ZzJ0dGYgZnJvbSBGb250ZWxsbyBwcm9qZWN0LgAAaAB0AHQAcAA6AC8ALwBmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQAAaHR0cDovL2ZvbnRlbGxvLmNvbQAAAgAAAAAAAAAKAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAEAAAAAQACAQIMZHJhZ3NlcXVlbmNlAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAMAAQAEAAAAAgAAAAAAAAABAAAAANWkJwgAAAAA2obMSQAAAADahsxJ') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "HM-DS-font" !important;
|
||||
font-style: normal;
|
||||
|
||||
&.icon-drag {
|
||||
&:before {
|
||||
content: "\e6e4";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 定义颜色 start
|
||||
//默认颜色
|
||||
.color,
|
||||
.rowBox-shadow {
|
||||
&.scroll-view {
|
||||
border-bottom: 1rpx $border-color solid;
|
||||
border-top: 1rpx $border-color solid;
|
||||
}
|
||||
|
||||
.hm-row-shadow,
|
||||
.hm-row {
|
||||
.modules {
|
||||
|
||||
.row-content {
|
||||
.row {
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
background-color: $row-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-content {
|
||||
.drag-icon {
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
background-color: $row-background-color;
|
||||
.iconfont {
|
||||
color: $drag-icon-color;
|
||||
}
|
||||
.disabled{
|
||||
color: $drag-icon-color-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.move {
|
||||
box-shadow: 0 1px 5px $shadow-color-moveing;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 暗黑模式
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
//Dark模式
|
||||
.color .rowBox-shadow {
|
||||
&.scroll-view {
|
||||
border-bottom: 1rpx $Dark-border-color solid;
|
||||
border-top: 1rpx $Dark-border-color solid;
|
||||
}
|
||||
|
||||
.hm-row-shadow,
|
||||
.hm-row {
|
||||
.modules {
|
||||
.row-content {
|
||||
.row {
|
||||
border-bottom: solid 1rpx $Dark-border-color;
|
||||
background-color: $Dark-row-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-content {
|
||||
.drag-icon {
|
||||
border-bottom: solid 1rpx $Dark-border-color;
|
||||
background-color: $Dark-row-background-color;
|
||||
.iconfont {
|
||||
color: $Dark-drag-icon-color;
|
||||
}
|
||||
.disabled{
|
||||
color: $Dark-drag-icon-color-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.move {
|
||||
box-shadow: 0 1px 5px $Dark-shadow-color-moveing;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 定义颜色 end
|
||||
.HM-drag-sort {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.scroll-view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rowBox,
|
||||
.rowBox-shadow {
|
||||
width: 100%;
|
||||
|
||||
.hm-row-shadow,
|
||||
.hm-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
||||
.modules {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
|
||||
.row-content {
|
||||
width: 100%;
|
||||
flex-shrink: 1;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drag-content {
|
||||
flex-shrink: 0;
|
||||
|
||||
.drag-icon {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.iconfont {
|
||||
font-size: 22px;
|
||||
color: #c7c7cb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hm-row-shadow {
|
||||
|
||||
&.move {
|
||||
opacity: 0.8;
|
||||
|
||||
view {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hm-row {
|
||||
opacity: 1;
|
||||
|
||||
&.hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.ani {
|
||||
transition: transform 0.2s;
|
||||
-webkit-transition: transform 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.hm-row {
|
||||
view {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rowBox-shadow {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// transform-style:preserve-3d;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
371
components/HM-dragSorts/drag.wxs
Normal file
371
components/HM-dragSorts/drag.wxs
Normal file
|
|
@ -0,0 +1,371 @@
|
|||
|
||||
|
||||
var scrollTop = {}; //滚动条位置
|
||||
// 排序列表
|
||||
var sortList={};
|
||||
var isMove = false; //是否可拖动 长按事件控制切换这个状态
|
||||
var touchTimer = false; //长按事件定时器
|
||||
// 当页面有多个当前组件时，guid用来识别当前的列表的。因为一个页面内多个组件的wxs作用域相同。
|
||||
|
||||
|
||||
function setScrollTop(tmpGuid) {
|
||||
if (typeof scrollTop[tmpGuid] == "undefined") {
|
||||
scrollTop[tmpGuid] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function scroll(event, instance) {
|
||||
var dataView = instance.selectComponent('#dataView');
|
||||
var viewData = dataView.getDataset();
|
||||
setScrollTop(viewData.guid)
|
||||
scrollTop[viewData.guid] = event.detail.scrollTop;
|
||||
}
|
||||
|
||||
function initVar(state, instance) {
|
||||
var dataView = instance.selectComponent('#dataView');
|
||||
var viewData = dataView.getDataset();
|
||||
// 读取配置项
|
||||
// 获取scroll-view id
|
||||
config = All_Config[viewData.guid];
|
||||
|
||||
setScrollTop(config.guid);
|
||||
state.initscrollTop = scrollTop[config.guid];
|
||||
|
||||
}
|
||||
function getRowSort(findId,instance){
|
||||
for (var i = 0; i < sortList[config.guid].length; i++) {
|
||||
if(sortList[config.guid][i].id==findId){
|
||||
currentRowView = sortList[config.guid][i].rowView;
|
||||
return sortList[config.guid][i].lastSort;
|
||||
}
|
||||
}
|
||||
}
|
||||
var shadowRowBoxView=null;
|
||||
var shadowRowView = null;
|
||||
var currentRowView=null;
|
||||
var rowSort=0;
|
||||
var sorting = false;
|
||||
function touchstart(event, instance) {
|
||||
if(sorting){
|
||||
return ;
|
||||
}
|
||||
sorting = true;
|
||||
// 兼容setTimeout
|
||||
if(typeof setTimeout ==="undefined" && typeof instance.setTimeout !== 'undefined'){
|
||||
setTimeout = instance.setTimeout;
|
||||
clearTimeout = instance.clearTimeout;
|
||||
}
|
||||
|
||||
isMove = false;
|
||||
var rowData = event.instance.getDataset();
|
||||
var state = instance.getState();
|
||||
if (event.touches.length == 1) {
|
||||
state.point = event.touches[0];
|
||||
|
||||
state.islongTap = true;
|
||||
state.rowData = rowData;
|
||||
//读取数据
|
||||
initVar(state, instance);
|
||||
}
|
||||
var rowStyle = event.instance.getComputedStyle(['height']);
|
||||
config.rowHeight = parseFloat(rowStyle.height); //获取行高
|
||||
// 计算shadowRow.style.top
|
||||
|
||||
rowSort = getRowSort(rowData.id,instance);
|
||||
var shadowRowTop = rowSort * config.rowHeight;
|
||||
shadowRowTop = shadowRowTop - scrollTop[config.guid];
|
||||
// 加载shadowRow数据
|
||||
instance.callMethod("loadShadowRow", {
|
||||
rowSort: rowSort
|
||||
});
|
||||
state.shadowRowTop = shadowRowTop;
|
||||
// 设置shadowRow初始位置
|
||||
shadowRowBoxView = instance.selectComponent('#shadowRowBox');
|
||||
shadowRowBoxView.setStyle({
|
||||
'top': shadowRowTop + 'px'
|
||||
})
|
||||
shadowRowView = instance.selectComponent('#shadowRow')
|
||||
//长按事件
|
||||
if (config.longTouch) {
|
||||
touchTimer && clearTimeout(touchTimer);
|
||||
touchTimer = setTimeout(function() {
|
||||
longpress(event, instance);
|
||||
}, config.longTouchTime)
|
||||
}
|
||||
}
|
||||
|
||||
function longpress(event, instance) {
|
||||
if (config.longTouch) {
|
||||
isMove = true;
|
||||
moveRow(instance, 0)
|
||||
}
|
||||
}
|
||||
|
||||
function touchmove(event, instance) {
|
||||
var state = instance.getState();
|
||||
var rowData = event.instance.getDataset();
|
||||
var movePoint = event.touches[0];
|
||||
var initPoint = state.point;
|
||||
var moveY = movePoint.pageY - initPoint.pageY;
|
||||
if (config.longTouch) {
|
||||
if (Math.abs(moveY) > 10) {
|
||||
clearTimeout(touchTimer);
|
||||
}
|
||||
if (!isMove) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
moveRow(instance, moveY);
|
||||
//阻止滚动页面
|
||||
if (event.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function touchend(event, instance) {
|
||||
if (config.longTouch) {
|
||||
clearTimeout(touchTimer);
|
||||
if (!isMove) {
|
||||
oldOffset = null;
|
||||
sorting = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (lastCommand != "stop") {
|
||||
lastCommand = "stop";
|
||||
config.autoScroll && instance.callMethod("pageScroll", {
|
||||
'guid': config.guid,
|
||||
'command': "stop"
|
||||
});
|
||||
}
|
||||
var state = instance.getState();
|
||||
// 把隐藏的行重新显示
|
||||
resetRowStyle(instance,state.rowData.id)
|
||||
// 隐藏ShadowRow
|
||||
resetShadowRowStyle(instance,state.offset)
|
||||
if (typeof state.offset !== "undefined" && rowSort != state.offset && state.offset != null) {
|
||||
var sortArray=[];
|
||||
for (var i = 0; i < sortList[config.guid].length; i++) {
|
||||
sortList[config.guid][i].lastSort = sortList[config.guid][i].newSort;
|
||||
sortArray.push(sortList[config.guid][i].newSort);
|
||||
sortList[config.guid][i].rowView.removeClass('ani');
|
||||
}
|
||||
instance.callMethod("sort", {
|
||||
index: rowSort,
|
||||
offset: state.offset,
|
||||
sortArray:sortArray
|
||||
});
|
||||
} else {
|
||||
sorting = false;
|
||||
triggerFeedbackGenerator(instance); //震动反馈
|
||||
return false;
|
||||
}
|
||||
state.offset = null;
|
||||
oldOffset = null;
|
||||
sorting = false;
|
||||
triggerFeedbackGenerator(instance); //震动反馈
|
||||
return false;
|
||||
}
|
||||
// 重置列表行
|
||||
function resetRowStyle(instance,id) {
|
||||
currentRowView.removeClass('hide');
|
||||
}
|
||||
// 重置拖拽行
|
||||
function resetShadowRowStyle(instance,offset) {
|
||||
shadowRowBoxView.removeClass('show');
|
||||
shadowRowBoxView.addClass('hide');
|
||||
shadowRowBoxView.setStyle({});
|
||||
}
|
||||
var lastCommand = '';
|
||||
|
||||
// move Row
|
||||
function moveRow(instance, moveY) {
|
||||
var state = instance.getState();
|
||||
|
||||
// 显示shadowRowBox
|
||||
shadowRowBoxView.removeClass('hide');
|
||||
shadowRowBoxView.hasClass('show') || shadowRowBoxView.addClass('show');
|
||||
// 移动shadowRowBox里面的shadowRow
|
||||
shadowRowView.setStyle({
|
||||
'transform': 'translate3d(0,' + moveY + 'px,10px)',
|
||||
'-webkit-transform': 'translate3d(0,' + moveY + 'px,10px)'
|
||||
});
|
||||
// 隐藏列表对应行
|
||||
currentRowView.hasClass('hide') || currentRowView.addClass('hide');
|
||||
currentRowView.removeClass('ani')
|
||||
var listClientY = state.shadowRowTop + moveY + config.rowHeight/2;
|
||||
var tmpscrollListTop = scrollTop[config.guid];
|
||||
|
||||
// 拖拽至边缘滚动视图 距离顶部距离1.5行高触发上滚动 下滚动同理
|
||||
var callMethodData = {
|
||||
guid: config.guid,
|
||||
command: listClientY < config.ListHeight * 0.2 ? "up" : listClientY > config.ListHeight - (config.ListHeight * 0.2) ? "down" :
|
||||
"stop",
|
||||
scrollTop: tmpscrollListTop,
|
||||
}
|
||||
// 把滚动指令发给逻辑层
|
||||
if (lastCommand != callMethodData.command) {
|
||||
lastCommand = callMethodData.command;
|
||||
config.autoScroll && instance.callMethod("pageScroll", callMethodData);
|
||||
}
|
||||
|
||||
var moveOffset = moveY + scrollTop[config.guid] - state.initscrollTop;
|
||||
var offset = calcOffset(rowSort, moveOffset);
|
||||
if (offset <= 2 || offset >= config.listLength - 2) {
|
||||
callMethodData.command = 'stop';
|
||||
}
|
||||
// 为减少卡顿，微信小程序端，在滚动视图期间不进行列表位置交换
|
||||
if (config.autoScroll && (!config.isAppH5) && callMethodData.command != 'stop') {
|
||||
return;
|
||||
}
|
||||
oldOffset = oldOffset == null ? rowSort : oldOffset;
|
||||
if (offset < 0 || offset >= config.listLength) {
|
||||
return;
|
||||
}
|
||||
if (offset == oldOffset) {
|
||||
return;
|
||||
}
|
||||
|
||||
oldOffset = offset;
|
||||
state.offset = offset;
|
||||
//触发change事件 并交换列表位置
|
||||
instance.callMethod("change", {
|
||||
index: rowSort,
|
||||
moveTo: state.offset
|
||||
});
|
||||
for (var i = 0; i < sortList[config.guid].length; i++) {
|
||||
var sort = sortList[config.guid][i].lastSort;
|
||||
var newSort = sortList[config.guid][i].newSort;
|
||||
if ((sort >= offset && sort <= rowSort) || (sort <= offset && sort >= rowSort)) {
|
||||
if(sort == rowSort) {
|
||||
newSort = offset;
|
||||
}else{
|
||||
newSort = sort < rowSort ? sort+1 : sort-1;
|
||||
}
|
||||
}else{
|
||||
newSort = sort;
|
||||
}
|
||||
if(sortList[config.guid][i].newSort == newSort){
|
||||
continue;
|
||||
}
|
||||
sortList[config.guid][i].newSort = newSort;
|
||||
var translateY = (sortList[config.guid][i].newSort-sortList[config.guid][i].sort) * 100;
|
||||
sortList[config.guid][i].rowView.hasClass('ani') || sortList[config.guid][i].rowView.addClass('ani');
|
||||
sortList[config.guid][i].rowView.setStyle({
|
||||
'transform': 'translate3d(0,' + translateY + '%,0)',
|
||||
'-webkit-transform': 'translate3d(0,' + translateY + '%,0)'
|
||||
});
|
||||
}
|
||||
triggerFeedbackGenerator(instance); //震动反馈
|
||||
}
|
||||
//计算偏移index
|
||||
var oldOffset = null;
|
||||
function calcOffset(initSort, moveY) {
|
||||
var offset = initSort + parseInt(moveY / config.rowHeight); //偏移 行高的倍数
|
||||
var rest = moveY % config.rowHeight;
|
||||
if (rest > 0) {
|
||||
offset = offset + (rest / config.rowHeight >= 0.6 ? 1 : 0);
|
||||
if (offset < oldOffset) {
|
||||
offset = rest / config.rowHeight <= 0.4 ? offset : oldOffset;
|
||||
}
|
||||
} else
|
||||
{
|
||||
offset = offset + (rest / config.rowHeight <= -0.6 ? -1 : 0);
|
||||
if (offset > oldOffset) {
|
||||
offset = rest / config.rowHeight >= -0.4 ? offset : oldOffset;
|
||||
}
|
||||
}
|
||||
return offset;
|
||||
}
|
||||
|
||||
//触感反馈
|
||||
//wxs 不支持条件编译，所以用此方法判断
|
||||
var isiOSAPP = typeof plus != "undefined" && plus.os.name == 'iOS';
|
||||
var UISelectionFeedbackGenerator;
|
||||
var impact
|
||||
|
||||
if (isiOSAPP) {
|
||||
UISelectionFeedbackGenerator = plus.ios.importClass("UISelectionFeedbackGenerator");
|
||||
impact = new UISelectionFeedbackGenerator();
|
||||
impact.init();
|
||||
}
|
||||
function triggerFeedbackGenerator(instance) {
|
||||
if (!config.feedbackGenerator) {
|
||||
//关闭触感反馈
|
||||
return;
|
||||
}
|
||||
if (isiOSAPP) {
|
||||
//异步，避免与点击事件冲突
|
||||
setTimeout(function(){
|
||||
impact.selectionChanged();
|
||||
},0)
|
||||
} else {
|
||||
if (typeof plus != "undefined") {
|
||||
plus.device.vibrate(12)
|
||||
} else {
|
||||
instance.callMethod("vibrate");
|
||||
}
|
||||
}
|
||||
}
|
||||
var All_Config={};
|
||||
var config = {};
|
||||
function receiveData(e,state, instance){
|
||||
var data = JSON.parse(e);
|
||||
var tmp_config = {};
|
||||
var hasGuid = false;
|
||||
var sortArray=[];
|
||||
for(var i=0;i<data.length;i++){
|
||||
var arr = data[i];
|
||||
switch (arr[0]){
|
||||
case "sortArray":
|
||||
sortArray = arr[1];
|
||||
break;
|
||||
default:
|
||||
if(arr[0]=='guid'){
|
||||
hasGuid = true;
|
||||
}
|
||||
tmp_config[arr[0]] = arr[1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(!hasGuid){
|
||||
return;
|
||||
}
|
||||
var isUpdateList = false;
|
||||
if(typeof All_Config[tmp_config.guid] == "undefined" ||typeof All_Config[tmp_config.guid].lastInitTime == "undefined" || All_Config[tmp_config.guid].lastInitTime!=tmp_config.lastInitTime){
|
||||
isUpdateList = true;
|
||||
}
|
||||
All_Config[tmp_config.guid] = tmp_config;
|
||||
if(isUpdateList){
|
||||
updateSortList(tmp_config.guid, instance,sortArray);
|
||||
}
|
||||
}
|
||||
// 更新guid对应的排序列表
|
||||
function updateSortList(guid, instance,sortArray) {
|
||||
|
||||
sortList[guid]=[];
|
||||
var pageSortList = instance.selectAllComponents('.hm-row');
|
||||
for (var i = 0; i < pageSortList.length; i++){
|
||||
var tmp_row = {id:pageSortList[i].getDataset().id,sort:i,lastSort:parseInt(pageSortList[i].getDataset().sort),newSort:i,rowView:pageSortList[i]};
|
||||
if(sortArray.length>0){
|
||||
tmp_row.lastSort = sortArray[i];
|
||||
tmp_row.newSort = tmp_row.lastSort;
|
||||
}
|
||||
sortList[guid].push(tmp_row);
|
||||
var translateY = (tmp_row.lastSort-tmp_row.sort) * 100;
|
||||
tmp_row.rowView.setStyle({
|
||||
'transform': 'translate3d(0,' + translateY + '%,0)',
|
||||
'-webkit-transform': 'translate3d(0,' + translateY + '%,0)'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
// 输出
|
||||
module.exports = {
|
||||
receiveData:receiveData,
|
||||
scroll: scroll,
|
||||
longpress: longpress,
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend
|
||||
}
|
||||
|
|
@ -55,6 +55,7 @@
|
|||
if(index==0){
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index',
|
||||
routeType: 'wx://modal',
|
||||
success() {
|
||||
this.currentTabbarIndex = index
|
||||
}
|
||||
|
|
@ -63,6 +64,7 @@
|
|||
}else if(index==1){
|
||||
uni.switchTab({
|
||||
url:'/pages/tj',
|
||||
routeType: 'wx://modal',
|
||||
success() {
|
||||
this.currentTabbarIndex = index
|
||||
}
|
||||
|
|
@ -70,6 +72,7 @@
|
|||
}else if(index==2){
|
||||
uni.switchTab({
|
||||
url:'/pages/my',
|
||||
routeType: 'wx://modal',
|
||||
success() {
|
||||
this.currentTabbarIndex = index
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"libVersion": "latest",
|
||||
"appid" : "wx5affa901f005d975",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
|
|
|
|||
60
pages.json
60
pages.json
|
|
@ -33,6 +33,66 @@
|
|||
"navigationBarTextStyle": "#FFFFFF",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/chongzhi",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/shouzhi",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/shebei/ewm",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/shebei/fenzu",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/shebei/setting",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/fztx",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,481 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="page">
|
||||
<u-navbar :is-back="false" title="首页" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'
|
||||
id="navbar">
|
||||
</u-navbar>
|
||||
<view class="zhuhu" v-if="false">
|
||||
<view class="card1">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
设备
|
||||
</view>
|
||||
<view class="right">
|
||||
<image class="img1" src="@/static/off.png" mode="" style="margin-right: 30rpx;"></image>
|
||||
<image class="img1" src="@/static/share.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mid">
|
||||
<view class="mid_left">
|
||||
<image src="../../static/db.png" mode=""></image>
|
||||
</view>
|
||||
<view class="mid_right">
|
||||
<view class="mid_top">
|
||||
2501号
|
||||
</view>
|
||||
<view class="mid_bot">
|
||||
<view class="txt">电表号：32562365BD253</view>
|
||||
<div class="tip">在线</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot">
|
||||
<view class="bot_left">
|
||||
<view class="echarts">
|
||||
|
||||
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
|
||||
<l-echart ref="chart" @finished="initChart"></l-echart>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot_right">
|
||||
<view class="cont">
|
||||
<view class="tit">
|
||||
150KWH
|
||||
</view>
|
||||
<view class="txt">
|
||||
总电量
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" style="margin-left: 60rpx;">
|
||||
<view class="tit">
|
||||
0.5元/度
|
||||
</view>
|
||||
<view class="txt">
|
||||
电价
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card2">
|
||||
<view class="tit">实时</view>
|
||||
<view class="cont_box">
|
||||
<view class="cont">
|
||||
<view class="top">1.5KW</view>
|
||||
<view class="bot">实时功率</view>
|
||||
</view>
|
||||
<view class="cont" style="width: 70rpx;">
|
||||
<view class="top">43A</view>
|
||||
<view class="bot">电流</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="top">220V</view>
|
||||
<view class="bot">电压</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="card3">
|
||||
<view class="tit">其他</view>
|
||||
<view class="cont_box">
|
||||
<view class="cont">
|
||||
<view class="top">
|
||||
<image src="@/static/sz.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bot">其他设置</view>
|
||||
</view>
|
||||
<view class="cont" style="width: 58rpx;">
|
||||
<view class="top">
|
||||
<image src="@/static/yc.png" mode="" style="width: 58rpx;height: 60rpx;"></image>
|
||||
</view>
|
||||
<view class="bot">异常</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="top">
|
||||
<image src="@/static/fx.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bot">用电分析</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="button">电费充值</view>
|
||||
<view class="zhanwei" style="width: 100%;height: 300rpx;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="fd">
|
||||
|
||||
</view>
|
||||
<tab-bar :indexs='0'></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import * as echarts from 'echarts'
|
||||
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
async initChart() {
|
||||
let value = 100;
|
||||
let value2=552.03
|
||||
const option = {
|
||||
// backgroundColor:"#061740",
|
||||
title: {
|
||||
show: false,
|
||||
text: `历史请求满意度`, // 图表标题
|
||||
x: 'center',
|
||||
y: '20',
|
||||
textStyle: {
|
||||
color: '#333', //'#fff',
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie', // 饼图类型
|
||||
radius: ['98%', '70%'], // 饼图半径，第一个值是内半径，第二个值是外半径
|
||||
silent: true,
|
||||
clockwise: true,
|
||||
startAngle: 90, // 起始角度
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
|
||||
data: [
|
||||
{
|
||||
value: value,
|
||||
name: '占比', // 数据项名称
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#8883F0', // 数据项颜色
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: 'center',
|
||||
formatter: ` {a|${value2}}\n\n{b|剩余电量}`, // 标签内容格式
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
color: '#333',
|
||||
},
|
||||
b: {
|
||||
fontSize: 11,
|
||||
color: '#888',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 100 - value,
|
||||
name: '',
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#173164',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'gauge', // 仪表盘类型
|
||||
radius: '130%', // 仪表盘半径，占图表容器的百分比
|
||||
center: ['50%', '50%'], // 仪表盘中心位置
|
||||
startAngle: 359,
|
||||
endAngle: 359.9,
|
||||
splitNumber: 2, // 刻度分割段数
|
||||
hoverAnimation: true,
|
||||
axisTick: {
|
||||
show: true, // 是否显示刻度线
|
||||
length: 10, // 刻度线长度
|
||||
lineStyle: {
|
||||
color: 'auto',
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
length: 0, // 刻度线分隔线长度
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#061740',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false, // 是否显示刻度标签
|
||||
},
|
||||
pointer: {
|
||||
show: false, // 是否显示指针
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
show: false, // 是否显示仪表盘详情
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// console.log( this.$refs.chartRef,'1111');
|
||||
const chart = await this.$refs.chart.init(echarts);
|
||||
console.log(option);
|
||||
chart.setOption(option)
|
||||
// chart.resize({
|
||||
// width: uni.upx2px(210), // Convert 210rpx to pixels
|
||||
// height: uni.upx2px(190.14) // Convert 190.14rpx to pixels
|
||||
// });
|
||||
return chart
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: F7FAFE;
|
||||
}
|
||||
.page{
|
||||
.zhuhu{
|
||||
margin-top: 20rpx;
|
||||
padding: 0 40rpx;
|
||||
.card1{
|
||||
padding: 34rpx 0 0 40rpx;
|
||||
width: 670rpx;
|
||||
height: 583rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(53,140,255,0.1);
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
.top{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left{
|
||||
font-size: 35rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
.right{
|
||||
margin-right: 56rpx;
|
||||
.img1{
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mid{
|
||||
margin-top: 54rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-content: flex-start;
|
||||
.mid_left{
|
||||
image{
|
||||
width: 37rpx;
|
||||
height: 98rpx;
|
||||
}
|
||||
}
|
||||
.mid_right{
|
||||
margin-left: 40rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.mid_top{
|
||||
width: 100%;
|
||||
font-size: 42rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
.mid_bot{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
.txt{
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #95989D;
|
||||
}
|
||||
.tip{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 19rpx;
|
||||
width: 38rpx;
|
||||
height: 23rpx;
|
||||
background: rgba(204,204,204,0);
|
||||
opacity: 1;
|
||||
border: 2rpx solid #8883F0;
|
||||
border-radius: 40rpx;
|
||||
font-size: 14rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bot{
|
||||
margin-top: 83rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
.bot_left{
|
||||
width: 210rpx;
|
||||
height: 190.14rpx;
|
||||
.echarts{
|
||||
width: 210rpx;
|
||||
height: 190.14rpx;
|
||||
}
|
||||
}
|
||||
.bot_right{
|
||||
// margin-top: 50rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
.cont{
|
||||
.tit{
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 600;
|
||||
color: #262B37;
|
||||
line-height: 49rpx;
|
||||
}
|
||||
.txt{
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card2{
|
||||
padding-top: 40rpx;
|
||||
margin-top: 24rpx;
|
||||
width: 670rpx;
|
||||
height: 254rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53,140,255,0.1);
|
||||
border-radius: 28rpx;
|
||||
.tit{
|
||||
margin-left: 40rpx;
|
||||
|
||||
font-size: 35rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
.cont_box{
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
.cont{
|
||||
width: 110rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.top{
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
.bot{
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card3{
|
||||
padding-top: 40rpx;
|
||||
margin-top: 24rpx;
|
||||
width: 670rpx;
|
||||
height: 318rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53,140,255,0.1);
|
||||
border-radius: 28rpx;
|
||||
.tit{
|
||||
margin-left: 40rpx;
|
||||
|
||||
font-size: 35rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
.cont_box{
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
.cont{
|
||||
width: 112rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.top{
|
||||
image{
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
.bot{
|
||||
margin-top: 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.button{
|
||||
margin-left: 76rpx;
|
||||
margin-top: 178rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 520rpx;
|
||||
height: 104rpx;
|
||||
background: #8883F0;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
310
pages/my.vue
310
pages/my.vue
|
|
@ -1,6 +1,114 @@
|
|||
<template>
|
||||
<view>
|
||||
<tab-bar :indexs='2'></tab-bar>
|
||||
<view class="page">
|
||||
<u-navbar :is-back="false" title="我的" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36'
|
||||
height='36'
|
||||
id="navbar">
|
||||
</u-navbar>
|
||||
<view class="userpage" v-if="false">
|
||||
<view class="img">
|
||||
<!-- <image src="" mode=""></image> -->
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="tit">
|
||||
其他
|
||||
</view>
|
||||
<view class="card" @click="topage(1)">
|
||||
<image src="../static/icon.png" mode=""></image>
|
||||
<view class="conts">
|
||||
<view class="top">充值记录</view>
|
||||
<view class="bot">
|
||||
01:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<image src="../static/icon.png" mode=""></image>
|
||||
<view class="conts">
|
||||
<view class="top">常见问题</view>
|
||||
<view class="bot">
|
||||
充值、体现、使用说明
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<image src="../static/icon.png" mode=""></image>
|
||||
<view class="conts">
|
||||
<view class="top">意见反馈</view>
|
||||
<view class="bot">
|
||||
01:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fdpage">
|
||||
<view class="top_box">
|
||||
<view class="userinfo">
|
||||
<view class="img">
|
||||
<image src="../static/off.png" mode=""></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="username">
|
||||
用户昵称
|
||||
</view>
|
||||
<view class="num">
|
||||
共1台设备
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tit">
|
||||
我的钱包
|
||||
</view>
|
||||
<view class="cont_box">
|
||||
<view class="cont">
|
||||
<view class="top" >
|
||||
<view class="txt" style="font-size: 24rpx;">
|
||||
￥
|
||||
</view>
|
||||
52.00
|
||||
</view>
|
||||
<view class="bot">
|
||||
钱包余额
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="top" >
|
||||
<image src="@/static/zh.png" mode="" style="width: 61.83rpx;height: 46.35rpx;"></image>
|
||||
</view>
|
||||
<view class="bot">
|
||||
钱包余额
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="top" >
|
||||
<image src="@/static/mx.png" mode="" style="width: 45rpx;height: 55rpx;"></image>
|
||||
</view>
|
||||
<view class="bot">
|
||||
钱包余额
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot_box">
|
||||
<view class="botcard">
|
||||
<div class="txt">告警设备</div>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<div class="txt">起充金额</div>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<div class="txt">帮助中心</div>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<div class="txt">设置</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<tab-bar :indexs='2' style=""></tab-bar>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,15 +116,207 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
bgc: {
|
||||
backgroundColor: "#8883F0",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
topage(num){
|
||||
if(num==1){
|
||||
uni.navigateTo({
|
||||
url:"/pages/userpage/chongzhi",
|
||||
animationType: 'slide-in-top',
|
||||
animationDuration: 200
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" >
|
||||
page{
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
.page{
|
||||
// position: relative;
|
||||
width: 750rpx;
|
||||
height: 100vh;
|
||||
.userpage{
|
||||
.img{
|
||||
// position: absolute;
|
||||
// position: fixed;
|
||||
margin-top: -170rpx;
|
||||
width: 750rpx;
|
||||
height: 444rpx;
|
||||
background-color: #8883F0;
|
||||
z-index: 1;
|
||||
}
|
||||
.cont{
|
||||
// position: absolute;
|
||||
// position: fixed;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin-top: -185rpx;
|
||||
width: 750rpx;
|
||||
height: 1;
|
||||
padding: 0 40rpx;
|
||||
|
||||
padding-top: 96rpx;
|
||||
border-radius: 200rpx 0 0 0;
|
||||
background: #F7FAFE;
|
||||
z-index: 10;
|
||||
.tit{
|
||||
margin-left: 40rpx;
|
||||
font-size: 40rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 600;
|
||||
color: #262B37;
|
||||
}
|
||||
.card{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-top: 40rpx;
|
||||
width: 670rpx;
|
||||
height: 160rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53,140,255,0.1);
|
||||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||||
image{
|
||||
margin-left: 40rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
.conts{
|
||||
margin-left: 40rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.top{
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 600;
|
||||
color: #262B37;
|
||||
}
|
||||
.bot{
|
||||
margin-top: 4rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #95989D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.fdpage{
|
||||
.top_box{
|
||||
padding-top: 40rpx;
|
||||
width: 750rpx;
|
||||
height: 458rpx;
|
||||
background-color: #8883F0;
|
||||
.userinfo{
|
||||
margin-left: 56rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-content: flex-start;
|
||||
.img{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
image{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
margin-left: 28rpx;
|
||||
.username{
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.num{
|
||||
margin-top: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #ABA8F4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tit{
|
||||
margin-top: 32rpx;
|
||||
margin-left: 56rpx;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.cont_box{
|
||||
margin-top: 28rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.cont{
|
||||
width: 116rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
.top{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: baseline;
|
||||
font-size: 36rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.bot{
|
||||
margin-top: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bot_box{
|
||||
padding: 40rpx 50rpx ;
|
||||
margin-top: -50rpx;
|
||||
width: 750rpx;
|
||||
// min-height: 500rpx;
|
||||
background: #F7FAFE;
|
||||
border-radius: 50rpx 50rpx 0 0;
|
||||
.botcard{
|
||||
margin-bottom: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 38rpx;
|
||||
width: 650rpx;
|
||||
height: 118rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
.txt{
|
||||
font-size: 30rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #383838;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
129
pages/shebei/ewm.vue
Normal file
129
pages/shebei/ewm.vue
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="设备二维码" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="card">
|
||||
<view class="top">
|
||||
<view class="img">
|
||||
<image src="../../static/db.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
<view class="info">
|
||||
<view class="top">
|
||||
1125房
|
||||
</view>
|
||||
<view class="bot">
|
||||
蓝牙电表号：YM02263659BD
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ewm">
|
||||
<image src="" mode=""></image>
|
||||
</view>
|
||||
<view class="tip">
|
||||
租客扫码进行添加设备绑定
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
保存到相册
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
page{
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
.page{
|
||||
width: 750rpx;
|
||||
.card{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
padding-top: 73rpx;
|
||||
width: 586rpx;
|
||||
height: 823rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(42,130,228,0.1);
|
||||
margin: 85rpx auto 0;
|
||||
.top{
|
||||
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
.img{
|
||||
width: 36rpx;
|
||||
height: 96rpx;
|
||||
image{
|
||||
width: 36rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info{
|
||||
margin-left: 26rpx;
|
||||
.top{
|
||||
font-size: 38rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #383838;
|
||||
}
|
||||
.bot{
|
||||
margin-top: 5rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #383838;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ewm{
|
||||
margin-top: 73rpx;
|
||||
width: 381.98rpx;
|
||||
height: 381.98rpx;
|
||||
image{
|
||||
width: 381.98rpx;
|
||||
height: 381.98rpx;
|
||||
}
|
||||
}
|
||||
.tip{
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
margin: 118rpx auto 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 396rpx;
|
||||
height: 80rpx;
|
||||
background: #8883F0;
|
||||
border-radius: 40rpx;
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
257
pages/shebei/fenzu.vue
Normal file
257
pages/shebei/fenzu.vue
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="设备分组" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="fzbox">
|
||||
<view class="card" :class="{fixed: index === 0}" v-for="(item,index) in obj " :key="index" v-if="index==0">
|
||||
<view class="card_left">
|
||||
<view class="img">
|
||||
<image src="@/static/sc.png" mode="" v-show="index === 0"></image>
|
||||
<image src="@/static/sc1.png" mode="" v-show="index !== 0"></image>
|
||||
</view>
|
||||
<view class="txt">
|
||||
{{item.name}}({{item.num}})
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_right">
|
||||
<image src="@/static/xg.png" mode=""
|
||||
style="width: 34rpx;height: 34rpx;margin-right: 30rpx;"></image>
|
||||
<image src="@/static/xq.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<HM-dragSorts ref="dragSorts" :list="newobj" :autoScroll="true" :feedbackGenerator="false" rowHeight='65'
|
||||
@change="change" @confirm="confirm" @onclick="onclick" :listBackgroundColor='F7FAFE'></HM-dragSorts>
|
||||
|
||||
</view>
|
||||
<view class="btn">
|
||||
<image src="@/static/tj.png" mode=""></image>
|
||||
新建分组
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dragSorts from '@/components/HM-dragSorts/HM-dragSorts.vue'
|
||||
export default {
|
||||
components: {
|
||||
'HM-dragSorts': dragSorts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
obj: [],
|
||||
newobj:[],
|
||||
cardHeight: 114,
|
||||
touchStartIndex: -1,
|
||||
startY: 0,
|
||||
direction: 'vertical',
|
||||
touchMoveTimer: null,
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
totalHeight() {
|
||||
return this.obj.length * this.cardHeight;
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
this.generateAndLogObject();
|
||||
},
|
||||
methods: {
|
||||
push() {
|
||||
// 和数组的push使用方法一致，可以push单行，也可以push多行
|
||||
this.$refs.dragSorts.push({
|
||||
"name": "push行",
|
||||
"icon": "/static/img/2.png"
|
||||
});
|
||||
},
|
||||
unshift() {
|
||||
// 和数组的unshift使用方法一致，可以unshift单行，也可以unshift多行
|
||||
this.$refs.dragSorts.unshift({
|
||||
"name": "unshift行",
|
||||
"icon": "/static/img/2.png"
|
||||
});
|
||||
},
|
||||
splice() {
|
||||
// 和数组的unshift使用方法一致 下标1开始删除1个并在下标1位置插入行
|
||||
this.$refs.dragSorts.splice(1, 1, {
|
||||
"name": "splice行",
|
||||
"icon": "/static/img/2.png"
|
||||
});
|
||||
},
|
||||
onclick(e) {
|
||||
console.log('=== onclick start ===');
|
||||
console.log("被点击行: " + JSON.stringify(e.value));
|
||||
console.log("被点击下标: " + JSON.stringify(e.index));
|
||||
console.log('=== onclick end ===');
|
||||
},
|
||||
change(e) {
|
||||
console.log('=== change start ===');
|
||||
console.log("被拖动行: " + JSON.stringify(e.moveRow));
|
||||
console.log('原始下标：', e.index);
|
||||
console.log('移动到：', e.moveTo);
|
||||
console.log('=== change end ===');
|
||||
},
|
||||
confirm(e) {
|
||||
console.log('=== confirm start ===');
|
||||
console.log("被拖动行: " + JSON.stringify(e.moveRow));
|
||||
console.log('原始下标：', e.index);
|
||||
console.log('移动到：', e.moveTo);
|
||||
console.log('=== confirm end ===');
|
||||
},
|
||||
generateRandomName() {
|
||||
const communityNames = ["碧桂园", "万达", "万科", "金华小区", "太姥山小区", "宁德时代", "霞浦小区"];
|
||||
const randomIndex = Math.floor(Math.random() * communityNames.length);
|
||||
return communityNames[randomIndex];
|
||||
},
|
||||
|
||||
generateObject() {
|
||||
const object = {
|
||||
arrays: [],
|
||||
};
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const array = {
|
||||
name: i === 0 ? "全部" : this.generateRandomName(),
|
||||
num: Math.floor(Math.random() * 100),
|
||||
top: i * this.cardHeight,
|
||||
};
|
||||
object.arrays.push(array);
|
||||
}
|
||||
|
||||
return object.arrays;
|
||||
},
|
||||
|
||||
generateAndLogObject() {
|
||||
this.obj = this.generateObject();
|
||||
this.newobj = this.obj.slice(1);
|
||||
|
||||
console.log(this.obj);
|
||||
},
|
||||
|
||||
handleTouchStart(e) {
|
||||
this.touchStartIndex = e.currentTarget.dataset.index;
|
||||
this.startY = e.touches[0].clientY;
|
||||
},
|
||||
|
||||
handleTouchMove(e) {
|
||||
clearTimeout(this.touchMoveTimer);
|
||||
|
||||
this.touchMoveTimer = setTimeout(() => {
|
||||
const deltaY = e.touches[0].clientY - this.startY;
|
||||
const newIndex = Math.floor((this.obj[this.touchStartIndex].top + deltaY) / this.cardHeight);
|
||||
const maxIndex = this.obj.length - 1;
|
||||
|
||||
if (newIndex >= 1 && newIndex <= maxIndex) {
|
||||
this.obj[this.touchStartIndex].top += deltaY;
|
||||
this.obj[newIndex].top -= deltaY;
|
||||
|
||||
this.startY = e.touches[0].clientY;
|
||||
this.$nextTick(() => {
|
||||
this.direction = 'vertical';
|
||||
});
|
||||
} else {
|
||||
this.direction = 'none';
|
||||
}
|
||||
}, 16); // 控制触发频率，大约 60 帧每秒
|
||||
},
|
||||
|
||||
handleTouchEnd() {
|
||||
this.touchStartIndex = -1;
|
||||
this.startY = 0;
|
||||
},
|
||||
|
||||
handleMoveChange(e) {
|
||||
this.obj = e.detail.source;
|
||||
|
||||
// 调整位置，防止重叠
|
||||
this.obj.forEach((item, index) => {
|
||||
// 添加保护，确保 item 存在
|
||||
if (item) {
|
||||
item.top = index * this.cardHeight;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 750rpx;
|
||||
|
||||
.fzbox {
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 32rpx auto 0;
|
||||
width: 682rpx;
|
||||
height: 114rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
|
||||
.card_left {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-left: 48rpx;
|
||||
|
||||
.img {
|
||||
width: 35.3rpx;
|
||||
height: 35.3rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
margin-left: 52rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.card_right {
|
||||
margin-right: 38rpx;
|
||||
|
||||
image {
|
||||
width: 45.51rpx;
|
||||
height: 31.86rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 32rpx auto 0;
|
||||
border-radius: 30rpx;
|
||||
width: 682rpx;
|
||||
height: 114rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
|
||||
image {
|
||||
margin-right: 28rpx;
|
||||
width: 39.92rpx;
|
||||
height: 39.92rpx;
|
||||
}
|
||||
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans,
|
||||
Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
295
pages/shebei/setting.vue
Normal file
295
pages/shebei/setting.vue
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="设置" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="card">
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
备注
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="txt">
|
||||
无
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
分组
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="txt">
|
||||
华鑫
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
电价设置
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="txt">
|
||||
0.5元/度
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
欠费断电
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="txt">
|
||||
欠费20度断电
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
S/N
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="txt">
|
||||
TMTM21516232
|
||||
</view>
|
||||
<!-- <view class="iconfont icon-xiangyou1"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
类型
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="txt">
|
||||
TC002电表
|
||||
</view>
|
||||
<!-- <view class="iconfont icon-xiangyou1"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
Wifi配网
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="txt">
|
||||
ESP2001
|
||||
</view>
|
||||
<!-- <view class="iconfont icon-xiangyou1"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-mask :show="showloading"></u-mask>
|
||||
<view class="fz" v-show="showfz">
|
||||
<view class="fz_top">
|
||||
<view class="iconfont icon-shanchu">
|
||||
|
||||
</view>
|
||||
<view class="tit">
|
||||
设备分组
|
||||
</view>
|
||||
<view class="txt">
|
||||
管理
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_cont">
|
||||
<view class="cards" v-for="item in 10" :key="item">
|
||||
<view class="txt">
|
||||
全部
|
||||
</view>
|
||||
<view class="num">
|
||||
1
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhanwei" style="width: 100%;height: 100rpx;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dd">
|
||||
<u-select v-model="show" :list="list" title='欠费断电'></u-select>
|
||||
</view>
|
||||
<view class="btn">
|
||||
解除绑定
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
showloading: true,
|
||||
showfz: false,
|
||||
show: true,
|
||||
list: [{
|
||||
value: '1',
|
||||
label: '欠费立即断电'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '欠费不断点'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 750rpx;
|
||||
|
||||
.card {
|
||||
padding: 16rpx 38rpx;
|
||||
margin: 60rpx auto 0;
|
||||
width: 654rpx;
|
||||
// height: 734rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
opacity: 1;
|
||||
|
||||
.li {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 94rpx;
|
||||
border-bottom: #E5E5E5 solid 2rpx;
|
||||
|
||||
.tit {
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
.txt {
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #95989D;
|
||||
}
|
||||
|
||||
.icon-xiangyou1 {
|
||||
margin-left: 6rpx;
|
||||
color: #95989D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 52rpx auto 0;
|
||||
width: 654rpx;
|
||||
height: 100rpx;
|
||||
background: #FF4F4F;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
opacity: 1;
|
||||
border-radius: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fz {
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 750rpx;
|
||||
height: 1152rpx;
|
||||
background: #F7FAFE;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
z-index: 10071;
|
||||
|
||||
.fz_top {
|
||||
margin: 18rpx 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.icon-shanchu {
|
||||
margin-left: 40rpx;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.txt {
|
||||
margin-right: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #2A82E4;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.card_cont {
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
height: 1030rpx;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.cards {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 40rpx;
|
||||
width: 682rpx;
|
||||
border-radius: 30rpx;
|
||||
height: 114rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
|
||||
.txt {
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
223
pages/tj.vue
223
pages/tj.vue
|
|
@ -14,12 +14,21 @@
|
|||
25.36
|
||||
</div>
|
||||
<view class="echarts">
|
||||
|
||||
|
||||
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
|
||||
<l-echart ref="chart" @finished="initChart"></l-echart>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
<view class="list">
|
||||
<view class="card_list">
|
||||
<view class="left">
|
||||
2023年04月
|
||||
</view>
|
||||
<view class="right">
|
||||
5.30 度
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<tab-bar :indexs='1'></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -38,94 +47,108 @@
|
|||
},
|
||||
onLoad() {
|
||||
// setTimeout(() => {
|
||||
|
||||
|
||||
// this.initChart()
|
||||
// }, 300);
|
||||
// this.initChart()
|
||||
},
|
||||
methods: {
|
||||
generateWaveData(length) {
|
||||
const data = [];
|
||||
for (let i = 0; i < length; i++) {
|
||||
const y = Math.sin((i / (length - 1)) * Math.PI * 2); // 正弦函数生成波浪形状的y值
|
||||
data.push((y + 1) * 50); // 映射到0-100的范围
|
||||
}
|
||||
return data;
|
||||
},
|
||||
const data = [];
|
||||
for (let i = 0; i < length; i++) {
|
||||
const y = Math.sin((i / (length - 1)) * Math.PI * 2); // 正弦函数生成波浪形状的y值
|
||||
data.push((y + 1) * 50); // 映射到0-100的范围
|
||||
}
|
||||
return data;
|
||||
},
|
||||
async initChart() {
|
||||
console.log('111111');
|
||||
// let _this = this
|
||||
const waveData = this.generateWaveData(10);
|
||||
const option = {
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 10,
|
||||
bottom: 30,
|
||||
// containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: false, // 隐藏轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 隐藏刻度
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#fff', // x轴标签文字颜色
|
||||
fontSize: 11, // x轴标签文字大小
|
||||
rotate: 90, // 逆时针旋转180°
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 隐藏分隔线
|
||||
},
|
||||
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'], // 数据项
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
},
|
||||
visualMap: {
|
||||
type: 'piecewise',
|
||||
show: false,
|
||||
dimension: 0,
|
||||
seriesIndex: 0,
|
||||
pieces: [
|
||||
{
|
||||
gt: 1,
|
||||
lt: 3,
|
||||
color: 'rgba(0, 0, 180, 0.4)',
|
||||
},
|
||||
{
|
||||
gt: 5,
|
||||
lt: 7,
|
||||
color: 'rgba(0, 0, 180, 0.4)',
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: 0.6,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#E0DBFF', // 折线颜色
|
||||
width: 4,
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#B4B0F7' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: [200, 560, 3000, 580, 250, 300, 450],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: 50,
|
||||
right: 10,
|
||||
top: 10,
|
||||
bottom: 30,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 11,
|
||||
rotate: 0,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 11,
|
||||
formatter: function (value) {
|
||||
// 保留两位小数，没有小数时显示00
|
||||
return value+'.00'+ '度'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
type: 'piecewise',
|
||||
show: false,
|
||||
dimension: 0,
|
||||
seriesIndex: 0,
|
||||
pieces: [{
|
||||
gt: 1,
|
||||
lt: 3,
|
||||
color: 'rgba(0, 0, 180, 0.4)',
|
||||
},
|
||||
{
|
||||
gt: 5,
|
||||
lt: 7,
|
||||
color: 'rgba(0, 0, 180, 0.4)',
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [{
|
||||
type: 'line',
|
||||
smooth: 0.6,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#E0DBFF',
|
||||
width: 4,
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#B4B0F7'
|
||||
}, ]),
|
||||
},
|
||||
},
|
||||
data: [20.00, 56.00, 30.00, 58.00, 25.00, 30.00, 45.00],
|
||||
}],
|
||||
};
|
||||
// console.log( this.$refs.chartRef,'1111');
|
||||
const chart = await this.$refs.chart.init(echarts);
|
||||
console.log(option);
|
||||
|
|
@ -165,7 +188,7 @@
|
|||
border-radius: 40rpx;
|
||||
|
||||
.month {
|
||||
|
||||
|
||||
margin-left: 22rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
|
|
@ -191,7 +214,7 @@
|
|||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.echarts {
|
||||
margin-left: 22rpx;
|
||||
margin-top: 60rpx;
|
||||
|
|
@ -201,5 +224,39 @@
|
|||
height: 320rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.card_list {
|
||||
width: 632rpx;
|
||||
height: 88rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
opacity: 1;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 16rpx;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
margin-left: 52rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
pages/userpage/chongzhi.vue
Normal file
152
pages/userpage/chongzhi.vue
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<view class="pages">
|
||||
<u-navbar title="充值记录" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
|
||||
<view class="tops">
|
||||
<view class="tit">充值记录</view>
|
||||
<view class="more">更多</view>
|
||||
</view>
|
||||
<view class="cards">
|
||||
<view class="card_left">
|
||||
<view class="top">用户充值</view>
|
||||
<view class="bot">
|
||||
2023-12-11 15:12:11
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_right">
|
||||
<view class="top">+220.00度</view>
|
||||
<view class="bot">
|
||||
￥60.00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
电费充值
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
|
||||
.pages {
|
||||
width: 750rpx;
|
||||
|
||||
.tops {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.tit {
|
||||
margin-left: 36rpx;
|
||||
font-size: 48rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-right: 36rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 672rpx;
|
||||
height: 154rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
margin: 18rpx auto;
|
||||
border-radius: 30rpx;
|
||||
|
||||
.card_left {
|
||||
margin-left: 50rpx;
|
||||
|
||||
.top {
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
|
||||
.bot {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
.card_right {
|
||||
margin-right: 24rpx;
|
||||
text-align: right;
|
||||
|
||||
.top {
|
||||
margin-top: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0
|
||||
}
|
||||
|
||||
.bot {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
margin-left: 116rpx;
|
||||
margin-top: 124rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 520rpx;
|
||||
height: 104rpx;
|
||||
background: #8883F0;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
177
pages/userpage/fztx.vue
Normal file
177
pages/userpage/fztx.vue
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="房租到期提醒" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="card">
|
||||
<view class="tip">
|
||||
<view class="txt">
|
||||
房租到期提醒
|
||||
</view>
|
||||
|
||||
<u-switch v-model="checked" active-color="#8883F0"></u-switch>
|
||||
</view>
|
||||
<view class="tip">
|
||||
<view class="tit">
|
||||
开启后，发送通知到微信公众号
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="tip" style="margin-top: 62rpx;">
|
||||
<view class="txt">
|
||||
提醒方式
|
||||
</view>
|
||||
|
||||
<view class="switch">
|
||||
<view class="cont" :class="tipindex==0?'act':''" @click="tipindex=0">
|
||||
单次
|
||||
</view>
|
||||
<view class="cont " :class="tipindex==1?'act':''" @click="tipindex=1">
|
||||
每月
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tip" style="margin-top: 70rpx;">
|
||||
<view class="txt">
|
||||
提醒日期
|
||||
</view>
|
||||
|
||||
<view class="txt">
|
||||
请选择
|
||||
<view class="iconfont icon-xiangyou1" style="color: #C4C4C4;"></view>
|
||||
</view>
|
||||
</view>
|
||||
<u-picker mode="time" v-model="show" :params="params" :default-time="defaultTime"
|
||||
start-year='2024'></u-picker>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
checked: false,
|
||||
tipindex: 0,
|
||||
show: true,
|
||||
params: {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false
|
||||
},
|
||||
times: '2024-1-26',
|
||||
defaultTime:''
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.onPickerReady()
|
||||
},
|
||||
methods: {
|
||||
onPickerReady() {
|
||||
// 在onReady生命周期中设置默认时间为当前时间
|
||||
this.setDefaultTime();
|
||||
},
|
||||
setDefaultTime() {
|
||||
// 获取当前时间
|
||||
const currentTime = new Date();
|
||||
|
||||
// 格式化时间，以符合 u-picker 组件的要求
|
||||
const formattedTime = this.formatTime(currentTime);
|
||||
|
||||
// 设置默认时间
|
||||
this.defaultTime = formattedTime;
|
||||
console.log(this.defaultTime, 'defaultTime');
|
||||
},
|
||||
formatTime(time) {
|
||||
// 实现一个函数，以符合所需的日期格式（年月日）
|
||||
const year = time.getFullYear();
|
||||
const month = (time.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = time.getDate().toString().padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 750rpx;
|
||||
|
||||
.card {
|
||||
padding: 62rpx 38rpx;
|
||||
margin: 50rpx auto 0;
|
||||
width: 654rpx;
|
||||
height: 390rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
|
||||
.tip {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.txt {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10rpx;
|
||||
width: 132rpx;
|
||||
height: 48rpx;
|
||||
background: #E5E5E5;
|
||||
border-radius: 15rpx;
|
||||
|
||||
.cont {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60rpx;
|
||||
height: 42rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #383838;
|
||||
}
|
||||
|
||||
.act {
|
||||
border-radius: 10rpx;
|
||||
width: 60rpx;
|
||||
height: 42rpx;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
156
pages/userpage/shouzhi.vue
Normal file
156
pages/userpage/shouzhi.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<view class="pages">
|
||||
<u-navbar title="收支明细" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
|
||||
<view class="tops">
|
||||
<view class="tit">充值记录</view>
|
||||
<view class="more">更多</view>
|
||||
</view>
|
||||
<view class="cards" >
|
||||
<view class="card_left">
|
||||
<view class="top">用户充值</view>
|
||||
<view class="bot">
|
||||
2023-12-11 15:12:11
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_right">
|
||||
<view class="top">+220.00度</view>
|
||||
<view class="bot">
|
||||
￥60.00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
电费充值
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
obj:{}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
|
||||
.pages {
|
||||
width: 750rpx;
|
||||
|
||||
.tops {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.tit {
|
||||
margin-left: 36rpx;
|
||||
font-size: 48rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-right: 36rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 672rpx;
|
||||
height: 154rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
margin: 18rpx auto;
|
||||
border-radius: 30rpx;
|
||||
|
||||
.card_left {
|
||||
margin-left: 50rpx;
|
||||
|
||||
.top {
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
|
||||
.bot {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
.card_right {
|
||||
margin-right: 24rpx;
|
||||
text-align: right;
|
||||
|
||||
.top {
|
||||
margin-top: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0
|
||||
}
|
||||
|
||||
.bot {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
margin-left: 116rpx;
|
||||
margin-top: 124rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 520rpx;
|
||||
height: 104rpx;
|
||||
background: #8883F0;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
BIN
static/db.png
Normal file
BIN
static/db.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 9.3 KiB |
BIN
static/fx.png
Normal file
BIN
static/fx.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 697 B |
BIN
static/icon.png
Normal file
BIN
static/icon.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 967 B |
BIN
static/mx.png
Normal file
BIN
static/mx.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 420 B |
BIN
static/off.png
Normal file
BIN
static/off.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 2.7 KiB |
BIN
static/sc.png
Normal file
BIN
static/sc.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 709 B |
BIN
static/sc1.png
Normal file
BIN
static/sc1.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 638 B |
BIN
static/share.png
Normal file
BIN
static/share.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 2.3 KiB |
BIN
static/sz.png
Normal file
BIN
static/sz.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 2.1 KiB |
BIN
static/tj.png
Normal file
BIN
static/tj.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 429 B |
BIN
static/xg.png
Normal file
BIN
static/xg.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 431 B |
BIN
static/xq.png
Normal file
BIN
static/xq.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 182 B |
BIN
static/yc.png
Normal file
BIN
static/yc.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 1.1 KiB |
BIN
static/zh.png
Normal file
BIN
static/zh.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 513 B |
Loading…
Reference in New Issue
Block a user