From adfb5b0d7d8b9e540ef56d314fc548117687f394 Mon Sep 17 00:00:00 2001 From: kylin L <452061493@qq.com> Date: Tue, 23 Jan 2024 11:51:49 +0800 Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89tabbar=20=E5=92=8Cht?= =?UTF-8?q?tp=E7=AD=89=E5=85=AC=E5=85=B1=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 +- api/index.js | 17 +++ api/tabBar.js | 18 ++++ main.js | 4 + mixin/video.js | 212 +++++++++++++++++++++++++++++++++++++ package-lock.json | 11 +- package.json | 3 +- pages.json | 85 +++++++-------- pages/index/index.vue | 93 +++++++++++------ pages/scan/scan.vue | 3 +- utils/config.js | 2 + utils/formatFilter.js | 12 +++ utils/http.js | 25 +++++ utils/index.js | 237 ++++++++++++++++++++++++++++++++++++++++++ utils/nativeMsg.js | 180 ++++++++++++++++++++++++++++++++ 15 files changed, 823 insertions(+), 82 deletions(-) create mode 100755 api/index.js create mode 100755 api/tabBar.js create mode 100644 mixin/video.js create mode 100755 utils/config.js create mode 100755 utils/formatFilter.js create mode 100755 utils/http.js create mode 100755 utils/index.js create mode 100755 utils/nativeMsg.js diff --git a/.gitignore b/.gitignore index e4c8a80..d4116b5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ # maven ignore unpackage/ node_modules/ -.hbuilderx/ \ No newline at end of file +.hbuilderx/ +.idea/ \ No newline at end of file diff --git a/api/index.js b/api/index.js new file mode 100755 index 0000000..8364ee7 --- /dev/null +++ b/api/index.js @@ -0,0 +1,17 @@ +// 批量导出文件 +const requireApi = require.context( + // api 目录的相对路径 + '.', + // 是否查询子目录 + false, + // 查询文件的一个后缀 + /.js$/ +) + +let module = {} +requireApi.keys().forEach((key, index)=>{ + if (key === './index.js') return; + Object.assign(module, requireApi(key)); +}) + +export default module; \ No newline at end of file diff --git a/api/tabBar.js b/api/tabBar.js new file mode 100755 index 0000000..d7d798f --- /dev/null +++ b/api/tabBar.js @@ -0,0 +1,18 @@ +import $http from '@/utils/http.js' + +/** 获取所有tabbar */ +export const listTabbar = (data) => { + return $http({ + method: 'POST', + url: 'small/project/tab/listByApp', + data + }) +} + +// export const getDigitalPlan = (data) => { +// return $http({ +// method: 'GET', +// url: 'api/cmdMangeApi/getDigitalPlan/'+data, +// data +// }) +// } \ No newline at end of file diff --git a/main.js b/main.js index 5bb89f4..8fbe857 100644 --- a/main.js +++ b/main.js @@ -7,7 +7,11 @@ import store from '@/store/store.js' //导入网络请求的包 import {$http} from '@escook/request-miniprogram' +import api from './api' +import * as filters from '@/utils/formatFilter' + uni.$http = $http +Vue.prototype.$api = api $http.baseUrl = 'http://localhost:85' diff --git a/mixin/video.js b/mixin/video.js new file mode 100644 index 0000000..9e8ffe2 --- /dev/null +++ b/mixin/video.js @@ -0,0 +1,212 @@ +data() { + return { + /* 分页 参数 设置 */ + page: 1, //当前页数 + last_page: 0, //总页面数 + status: 'loadmore', + iconType: 'flower', + loadText: { + loadmore: '上拉加载', + loading: '努力加载中', + nomore: '没有更多了' + }, + } + }, + created() { + + }, + methods: { + /* 跳转外链 */ + goReLaunch(val) { + uni.reLaunch({ + url: val + }); + }, + + + /* 跳转 重定向 */ + goRedirectTo(val) { + uni.redirectTo({ + url: val + }); + }, + + /* 跳转 Navigate*/ + goNavigateTo(val) { + if (val) { + uni.navigateTo({ + url: val, + }); + } else { + this.showToast("敬请期待..."); + } + }, + + + /* 跳转 switchTab*/ + goSwitchTab(url) { + uni.switchTab({ + url: url + }); + }, + + /* 复制链接 方法 */ + copy(value) { + if (value) { + uni.setClipboardData({ + data: value, //要被复制的内容 + success: () => { //复制成功的回调函数 + this.showToast(`复制成功`); + }, + fail: () => { + this.showToast(`复制失败`); + }, + }); + } else { + this.showToast(`暂无可以复制内容哦`); + } + }, + + /* 排序 小到大 */ + compare(prop) { + return function(obj1, obj2) { + var val1 = obj1[prop]; + var val2 = obj2[prop]; + return val1 - val2; + } + }, + + /* 排序 大到小 */ + compare1(prop) { + return function(obj1, obj2) { + var val1 = obj1[prop]; + var val2 = obj2[prop]; + return val2 - val1; + } + }, + + /* 时分秒转时间戳 + * status == 1 =>年月日 时 + * status == ? =>时分秒 + */ + time_to_sec(time, status) { + let data = new Date(); + if (time) { + if (status == 1) { + let sec = new Date(time).getTime() / 1000; + return sec; + } else { + let year = data.getFullYear(); + let month = data.getMonth() + 1; + let day = data.getDate(); + let sec = new Date(year + '/' + month + '/' + day + ' ' + time).getTime() / 1000; + return sec; + } + } + }, + + /* 银行卡号 验证 */ + luhnCheck(bankno) { + var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一位（与luhn进行比较） + var first15Num = bankno.substr(0, bankno.length - 1); //前15或18位 + var newArr = new Array(); + for (var i = first15Num.length - 1; i > -1; i--) { //前15或18位倒序存进数组 + newArr.push(first15Num.substr(i, 1)); + } + var arrJiShu = new Array(); //奇数位*2的积 <9 + var arrJiShu2 = new Array(); //奇数位*2的积 >9 + var arrOuShu = new Array(); //偶数位数组 + for (var j = 0; j < newArr.length; j++) { + if ((j + 1) % 2 == 1) { //奇数位 + if (parseInt(newArr[j]) * 2 < 9) arrJiShu.push(parseInt(newArr[j]) * 2); + else arrJiShu2.push(parseInt(newArr[j]) * 2); + } else //偶数位 + arrOuShu.push(newArr[j]); + } + var jishu_child1 = new Array(); //奇数位*2 >9 的分割之后的数组个位数 + var jishu_child2 = new Array(); //奇数位*2 >9 的分割之后的数组十位数 + for (var h = 0; h < arrJiShu2.length; h++) { + jishu_child1.push(parseInt(arrJiShu2[h]) % 10); + jishu_child2.push(parseInt(arrJiShu2[h]) / 10); + } + var sumJiShu = 0; //奇数位*2 < 9 的数组之和 + var sumOuShu = 0; //偶数位数组之和 + var sumJiShuChild1 = 0; //奇数位*2 >9 的分割之后的数组个位数之和 + var sumJiShuChild2 = 0; //奇数位*2 >9 的分割之后的数组十位数之和 + var sumTotal = 0; + for (var m = 0; m < arrJiShu.length; m++) { + sumJiShu = sumJiShu + parseInt(arrJiShu[m]); + } + for (var n = 0; n < arrOuShu.length; n++) { + sumOuShu = sumOuShu + parseInt(arrOuShu[n]); + } + for (var p = 0; p < jishu_child1.length; p++) { + sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]); + sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]); + } + //计算总和 + sumTotal = parseInt(sumJiShu) + parseInt(sumOuShu) + parseInt(sumJiShuChild1) + parseInt(sumJiShuChild2); + //计算luhn值 + var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10; + var luhn = 10 - k; + if (lastNum == luhn) { + // $("#banknoInfo").html("luhn验证通过"); + return true; + } else { + // $("#banknoInfo").html("银行卡号必须符合luhn校验"); + return false; + } + }, + + /* 对象 过滤不需要的字段 保留需要字段 */ + filterObj(obj, arr) { + if (typeof(obj) !== "object" || !Array.isArray(arr)) { + throw new Error("参数格式不正确") + } + const result = {} + Object.keys(obj).filter((key) => arr.includes(key)).forEach((key) => { + result[key] = obj[key] + }) + return result + }, + + /* 小黑窗 公用函数 */ + showToast(msg, icon) { + uni.showToast({ + title: msg, + icon: icon ? icon : 'none', + duration: 2000, + mask: true, + }); + }, + + /* loading 小黑窗 公用函数 */ + showLoading(msg) { + uni.showLoading({ + title: msg, + mask: true, + }); + }, + + /* 隐藏 loading 小黑窗 公用函数*/ + hideLoading() { + setTimeout(() => { + uni.hideLoading(); + }, 2000); + }, + + /* 返回上一页 */ + onBack(backnum) { + uni.navigateBack({ + delta: backnum, + }); + }, + + /* 设置标题 */ + setNavigationBarTitle(title) { + uni.setNavigationBarTitle({ + title: title + }) + }, + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0f1bb25..c2e2225 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,13 +9,22 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "@escook/request-miniprogram": "^0.2.1" + "@escook/request-miniprogram": "^0.2.1", + "moment": "^2.26.0" } }, "node_modules/@escook/request-miniprogram": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz", "integrity": "sha512-ueWV5YsaEm/ycQZuEjMiA88GFMhfBQSjy9GrP9omy4xAQajkGTbYIlnhzsDfWzRPmRC1fKmAiKMrCVcgS+SHcQ==" + }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } } } } diff --git a/package.json b/package.json index 3051e3d..c0a3681 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "author": "", "license": "ISC", "dependencies": { - "@escook/request-miniprogram": "^0.2.1" + "@escook/request-miniprogram": "^0.2.1", + "moment": "^2.26.0" } } diff --git a/pages.json b/pages.json index 07da6f8..0029a9d 100644 --- a/pages.json +++ b/pages.json @@ -1,53 +1,45 @@ { "pages": [{ - "path" : "pages/index/index", - "style" : - { - "navigationBarTitleText" : "全民演练", - "enablePullDownRefresh" : false - } - }, - { - "path" : "pages/scan/scan", - "style" : - { - "navigationBarTitleText" : "全民演练", - "enablePullDownRefresh" : false - } - }, - { - "path" : "pages/my/my", - "style" : + "path": "pages/index/index", + "style": { + "navigationBarTitleText": "全民演练", + "enablePullDownRefresh": false + } + }, { - "navigationBarTitleText" : "全民演练", - "enablePullDownRefresh" : false, - "navigationStyle": "custom" - } - }, - { - "path" : "pages/knowledge/knowledge", - "style" : + "path": "pages/scan/scan", + "style": { + "navigationBarTitleText": "全民演练", + "enablePullDownRefresh": false + } + }, { - "navigationBarTitleText" : "全民演练", - "enablePullDownRefresh" : false - } - }], - "subPackages": [ + "path": "pages/my/my", + "style": { + "navigationBarTitleText": "全民演练", + "enablePullDownRefresh": false, + "navigationStyle": "custom" + } + }, { - "root": "subpkg", - "pages": [ - { - "path": "list/list", - "style" : - { - "navigationBarTitleText" : "场景演练", - "navigationBarTextStyle": "black", - "enablePullDownRefresh" : false - } - } - ] + "path": "pages/knowledge/knowledge", + "style": { + "navigationBarTitleText": "全民演练", + "enablePullDownRefresh": false + } } ], + "subPackages": [{ + "root": "subpkg", + "pages": [{ + "path": "list/list", + "style": { + "navigationBarTitleText": "场景演练", + "navigationBarTextStyle": "black", + "enablePullDownRefresh": false + } + }] + }], "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "全民演练", @@ -59,8 +51,7 @@ }, "tabBar": { "selectedColor": "#009eff", - "list":[ - { + "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tab_icons/home.png" @@ -74,11 +65,11 @@ "pagePath": "pages/knowledge/knowledge", "text": "知识库", "iconPath": "static/tab_icons/knownledge.png" - },{ + }, { "pagePath": "pages/my/my", "text": "我的", "iconPath": "static/tab_icons/my.png" } ] } -} +} \ No newline at end of file diff --git a/pages/index/index.vue b/pages/index/index.vue index 96cfad6..f484ed1 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -6,15 +6,18 @@ + - - - + + + @@ -30,56 +33,84 @@ //轮播图数据列表 swiperList: [], //场景入口 - sceneList:[] + sceneList: [] }; }, onLoad() { + this.listTabbar(); this.getSwiperList() }, methods: { - + listTabbar() { + this.$api.listTabbar({}) + .then(res => { + for(var i=0; i console.log(e)); //捕获异常 + }, + async getSwiperList() { - + const { data: res - } = await uni.$http.post('/small/customImage/listAll',{page:'home'}) + } = await uni.$http.post('/small/customImage/listAll') if (!res.success) return uni.$showMsg() - res.data.forEach(item=>{ - item.uploadPath = uni.$http.baseUrl +item.uploadPath - if (item.position === "top"){ + res.data.forEach(item => { + item.uploadPath = 'http://localhost:85' + item.uploadPath + if (item.position === "top") { this.topImg = item.uploadPath - } else if(item.position.indexOf("banner") !=-1){ + } else if (item.position === "middle") { this.swiperList.push(item.uploadPath) - } else if(item.position.indexOf("bottom-left") !=-1){ - this.leftImg = item.uploadPath - } else if(item.position.indexOf("bottom-right") !=-1){ - this.rightImg = item.uploadPath - } + } else if (item.position === "bottom") { + this.sceneList.push(item.uploadPath) + } }) - this.sceneList.push(this.leftImg) - this.sceneList.push(this.rightImg) + uni.$showMsg('数据请求成功！') }, - navClickHandler(item) { - uni.navigateTo({ - url: '/subpkg/list/list' - }) - }, } } + \ No newline at end of file diff --git a/pages/scan/scan.vue b/pages/scan/scan.vue index 3740b45..52e624e 100644 --- a/pages/scan/scan.vue +++ b/pages/scan/scan.vue @@ -1,6 +1,7 @@ diff --git a/utils/config.js b/utils/config.js new file mode 100755 index 0000000..1a15544 --- /dev/null +++ b/utils/config.js @@ -0,0 +1,2 @@ +let url_config = "http://localhost:85/" +export default url_config \ No newline at end of file diff --git a/utils/formatFilter.js b/utils/formatFilter.js new file mode 100755 index 0000000..79f2d94 --- /dev/null +++ b/utils/formatFilter.js @@ -0,0 +1,12 @@ +import moment from 'moment' + +// 日期时间格式化过滤器（2019-12-17 15:31:34） +let dateTimeFormat = (value, format = 'YYYY-MM-DD HH:mm:ss') => moment(value).format(format) + +// 日期时间格式化过滤器（2019-12-17） +let dateFormat = (value, format = 'YYYY-MM-DD') => moment(value).format(format) + +// 金钱格式化过滤器 (￥ 34567.99) +let moneyFormat = (value, unit = '￥') => `${unit} ${Number(value).toFixed(2)}` + +export { dateTimeFormat, dateFormat, moneyFormat } diff --git a/utils/http.js b/utils/http.js new file mode 100755 index 0000000..d60b2ad --- /dev/null +++ b/utils/http.js @@ -0,0 +1,25 @@ +import urlConfig from '@/utils/config.js' + +export default function $http(options) { + const { method, url, data } = options + + return new Promise((reslove, reject) => { + uni.request({ + method, + url: urlConfig + url, + data, + dataType: 'json' + }).then(res => { + if (res[1].data.success) { + reslove(res[1].data) + }else if(res[1].statusCode == 200){ + reslove(res[1].data) + } + else { + reject(res[1].data) + } + }).catch(err => { + reject(err) + }) + }) +} \ No newline at end of file diff --git a/utils/index.js b/utils/index.js new file mode 100755 index 0000000..5fa0691 --- /dev/null +++ b/utils/index.js @@ -0,0 +1,237 @@ +import dayjs from 'dayjs' +import { + MAP_KEY +} from '@/config' + +const QQMapWX = require('@/lib/qqmap-wx-jssdk.min.js') +const qqmapsdk = new QQMapWX({ + key: MAP_KEY +}) + +/** + * dayjs格式化日期 + * + * @export + * @param {*} date 日期 + * @param {string} [fmt='YYYY-MM-DD'] 日期格式，详细参考：https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/API-reference.md#%E6%A0%BC%E5%BC%8F%E5%8C%96 + * @returns + */ +export function formatDate(date, fmt = 'YYYY-MM-DD') { + return dayjs(date).format(fmt) +} + +/** + * 逆地址解析（坐标转具体位置信息） + * @doc 文档参考：https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html + * @export + * @param {*} location 坐标：{ latitude: 39.984060, longitude: 116.307520 } + * @returns + */ +export function reverseGeocoder(location) { + return new Promise((resolve, reject) => { + qqmapsdk.reverseGeocoder({ + location: location, + get_poi: 1, + poi_options: 'policy=1;page_size=20;page_index=1', + success: res => { + resolve(res) + }, + fail: err => { + reject(err) + uni.showToast({ + title: err.message, + icon: 'none', + duration: 3000 + }) + } + }) + }) +} + +/** + * 地图关键词搜索 + * @doc 文档参考：https://lbs.qq.com/qqmap_wx_jssdk/method-search.html + * @export + * @param {*} keyword 搜索关键词 + * @param {*} location 坐标：{ latitude: 39.984060, longitude: 116.307520 } + * @returns + */ +export function mapSearch(keyword, location) { + return new Promise((resolve, reject) => { + qqmapsdk.search({ + keyword: keyword, + location: location, + page_size: 20, + auto_extend: 0, + success: res => { + resolve(res) + }, + fail: err => { + reject(err) + uni.showToast({ + title: err.message, + icon: 'none', + duration: 3000 + }) + } + }) + }) +} + +/** + * 授权请求 + * + * @export + * @param {*} authorizeScope 更多scope参考：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html + * @param {*} modal modal弹窗参数信息 + * @returns + */ +export function setAuthorize(authorizeScope, modal) { + return new Promise((resolve, reject) => { + console.log("--------------------AAAAAAAAAAAAAAAAAAAAAAAAAAA------------------"); + if (!modal) { + modal = { + title: '授权', + content: '需要您设置授权已使用相应功能', + confirmText: '设置' + } + } + console.log("--------------------BBBBBBBBBBBBBBBBBBBBBBBBBBB------------------"); + uni.getSetting({ + success(res) { + // hasAuthor === undefined 表示 初始化进入，从未授权 + // hasAuthor === true 表示 已授权 + // hasAuthor === false 表示 授权拒绝 + const hasAuthor = res.authSetting[authorizeScope] + switch (hasAuthor) { + case undefined: + uni.authorize({ + scope: authorizeScope, + success: res => { + resolve(res) + }, + fail: err => { + uni.showToast({ + title: '授权失败', + icon: 'none', + duration: 3000 + }) + reject(err) + } + }) + break + case true: + resolve() + break + case false: + uni.showModal({ + ...modal, + success: res => { + if (res.confirm) { + uni.openSetting({ + success: res => { + if (res.authSetting[ + authorizeScope]) { + resolve(res) + } else { + reject(res) + uni.showToast({ + title: '授权失败', + icon: 'none', + duration: 3000 + }) + } + }, + fail: err => { + reject(err) + uni.showToast({ + title: '打开设置异常', + icon: 'none', + duration: 3000 + }) + } + }) + } else { + reject(res) + uni.showToast({ + title: '授权失败', + icon: 'none', + duration: 3000 + }) + } + }, + fail: err => { + reject(err) + uni.showToast({ + title: '弹窗异常', + icon: 'none', + duration: 3000 + }) + } + }) + break + } + }, + fail: err => { + reject(err) + uni.showToast({ + title: '获取当前设置异常', + icon: 'none', + duration: 3000 + }) + } + }); + console.log("--------------------BBBBBBBBBBBBBBBBBBBBBBBBBBB------------------"); + }) +} + +/** + * 获取用户当前位置信息 + * + * @export + */ +export function getLocation() { + return new Promise((resolve, reject) => { + const scope = 'scope.userLocation' + const modal = { + title: '授权', + content: '需要您授权使用位置信息', + confirmText: '设置' + } + setAuthorize(scope, modal).then(() => { + uni.getLocation({ + type: 'gcj02', + // altitude: true, + success: res => { + console.log( + "--------------------DDDDDDDDDDDDDDDDDDDDDDDDD------------------" + ); + resolve(res) + }, + fail: err => { + reject(err) + uni.showToast({ + title: '获取位置信息失败', + icon: 'none', + duration: 3000 + }) + } + }); + }).catch(err => { + reject(err) + }) + }) +} + +/** + * 获取当前日期 + * + * @export + */ +export function getNowDate() { + let today = new Date(); + let year = today.getFullYear(); + let month = today.getMonth() + 1; + let date = today.getDate(); + return year + "-" + month + "-" + date; +} \ No newline at end of file diff --git a/utils/nativeMsg.js b/utils/nativeMsg.js new file mode 100755 index 0000000..9e32f32 --- /dev/null +++ b/utils/nativeMsg.js @@ -0,0 +1,180 @@ +const { statusBarHeight } = uni.getSystemInfoSync(); +class NativeMsg { + // 整个区域的宽高 + viewStyle = { + backgroundColor: "rgba(255,255,255,0)", + top: "0px", + left: "0px", + width: "100%", + // 取图片的高度（带阴影的尺寸） + height: `${uni.upx2px(239)}px` + }; + constructor(item, cb) { + // 记录内容信息，以供回调使用 + this.item = item; + // 弹出、消失动画要用 + this.offsetTop = -statusBarHeight - uni.upx2px(159); + // 上边界 + this.startTop = -statusBarHeight - uni.upx2px(159); + // 下边界 + this.endTop = statusBarHeight; + // 上滑关闭要用 + this.clientY = 0; + // nativeObj.View 实例 + this.view = null; + // 背景图片 + this.bgBitmap = null; + // 回调函数 + this.cb = cb || null; + // 隐藏过程flag，防止重复执行 + this.hiding = false; + // 标记当前弹窗状态 + this.status = "active"; + this.create(); + } + // 创建区域以及背景 + create() { + this.loadBg().then(() => { + let _view = null; + // 创建 View区域 + _view = new plus.nativeObj.View(`alarmMsg-${this.item.alarmId || "ins"}`, this.viewStyle); + // 画背景 + _view.drawBitmap( + this.bitmap, + {}, + { width: this.viewStyle.width, height: this.viewStyle.height, left: 0, top: 0 }, + "alarm-bg" + ); + // 拦截触摸事件: 开启后 区域内的触摸事件不会透传到下面 + _view.interceptTouchEvent(true); + // 增加点击事件监听 + _view.addEventListener("click", () => { + if (this.hiding) return; + this.hiding = true; + this.cb && this.cb({ type: "click", result: this.item }); + this.animationHide(); + }); + // 触摸事件监听 + _view.addEventListener("touchstart", res => { + this.clientY = res.clientY; + }); + // 触摸事件监听 + _view.addEventListener("touchmove", res => { + const { clientY } = res; + let offsetY = this.clientY - clientY; + if (offsetY > 25 && !this.hiding) { + this.hiding = true; + this.cb && this.cb({ type: "move", result: this.item }); + this.animationHide(); + } + }); + // 保存 + this.view = _view; + // 画内容 + this.drawInfo(); + // 显示 + this.animationShow(); + }); + } + // 加载背景图片 + loadBg() { + // 创建Bitmap图片 + this.bitmap = new plus.nativeObj.Bitmap("nativeMsg-bg"); + // 以Promise方式封装 图片加载过程 + return new Promise((resolve, reject) => { + // 加载图片, 路径需要注意 + this.bitmap.load( + "../static/alarm-bg.png", + () => { + resolve(); + }, + error => { + console.log(" ====> error", error); + reject(); + } + ); + }); + } + // 画内容 + drawInfo() { + const { warningTypeStr, projectName, description } = this.item; + this.view.draw([ + { + tag: "font", + id: "mainFont", + text: warningTypeStr, + textStyles: { size: `${uni.upx2px(36)}px`, color: "#262626", weight: "bold", align: "left" }, + position: { top: `${uni.upx2px(60)}px`, left: `${uni.upx2px(80)}px`, height: "wrap_content" } + }, + { + tag: "font", + id: "projectFont", + text: projectName, + textStyles: { size: `${uni.upx2px(24)}px`, color: "#7B7B7B", align: "right", overflow: "ellipsis" }, + position: { + top: `${uni.upx2px(60)}px`, + left: `50%`, + width: `${uni.upx2px(750 / 2 - 40 - 20)}px`, + height: "wrap_content" + } + }, + { + tag: "font", + id: "infoFont", + text: description, + textStyles: { size: `${uni.upx2px(28)}px`, color: "#7B7B7B", align: "left", overflow: "ellipsis" }, + position: { + top: `${uni.upx2px(117)}px`, + left: `${uni.upx2px(80)}px`, + width: `${uni.upx2px(670 - 40 - 10)}px`, + height: "wrap_content" + } + } + ]); + } + // 简易向下出现动画 + animationShow() { + this.view.show(); + this.view.setStyle({ + ...this.viewStyle, + top: `${this.offsetTop++}px` + }); + if (this.offsetTop >= this.endTop) { + this.status = "active"; + return; + } + setTimeout(() => { + this.animationShow(); + }, 0); + } + // 简易向上消失动画 + animationHide() { + this.view.setStyle({ + ...this.viewStyle, + top: `${this.offsetTop--}px` + }); + if (this.offsetTop <= this.startTop) { + this.view.close(); + this.hiding = false; + this.status = "close"; + return; + } + setTimeout(() => { + this.animationHide(); + }, 0); + } + // 获取当前状态 + getStatus() { + return this.status; + } + // 不用动画，直接消失 + hide() { + this.view.hide(); + this.view.close(); + } +} + +// 对外暴露一个创建实例的方法 +export function createAlarm(item, cb) { + return new NativeMsg(item, cb); +}