import * as os from "os"
|
import dxui from '../../dxmodules/dxUi.js'
|
import dxMap from '../../dxmodules/dxMap.js'
|
import screen from '../screen.js'
|
import pinyin from './pinyin/pinyin.js'
|
// import utils from "../common/utils/utils.js"
|
import i18n from "./i18n.js"
|
import std from '../../dxmodules/dxStd.js'
|
|
const viewUtils = {}
|
|
viewUtils.font = function (size, style) {
|
return dxui.Font.build('/app/code/resource/font/AlibabaPuHuiTi-2-65-Medium.ttf', size || 14, style || dxui.Utils.FONT_STYLE.NORMAL)
|
}
|
|
// 语义化颜色
|
viewUtils.color = {
|
// 成功，绿色
|
success: 0x00BF8A,
|
// 失败，红色
|
fail: 0xFF0000,
|
// 警告，黄色
|
warning: 0xFFA800,
|
// 默认：蓝色
|
default: 0x00a8ff
|
}
|
|
// 清除样式
|
viewUtils._clearStyle = function (obj) {
|
obj.radius(0)
|
obj.borderWidth(0)
|
obj.padAll(0)
|
}
|
|
// 图片按钮封装，按钮根据图片大小设置，矩形
|
viewUtils.imageBtn = function (parent, id, src, dataI18n, textColor) {
|
const zoom = 1.02
|
|
const imageBox = dxui.View.build(id, parent)
|
viewUtils._clearStyle(imageBox)
|
imageBox.bgOpa(0)
|
|
const image = dxui.Image.build(id + 'image', imageBox)
|
image.source(src)
|
image.update()
|
const width = image.width()
|
const height = image.height()
|
imageBox.setSize(width * zoom + 5, height * zoom + 5)
|
imageBox.scroll(false)
|
image.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
|
if (dataI18n) {
|
const textLbl = dxui.Label.build(id + 'text', image)
|
textLbl.textFont(viewUtils.font(Math.round(height / 3)))
|
if (textColor !== undefined && textColor !== null) {
|
textLbl.textColor(textColor)
|
} else {
|
textLbl.textColor(0xffffff)
|
}
|
textLbl.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
textLbl.dataI18n = dataI18n
|
}
|
|
imageBox.on(dxui.Utils.ENUM.LV_EVENT_PRESSED, () => {
|
image.obj.lvImgSetZoom(256 * zoom)
|
})
|
|
imageBox.on(dxui.Utils.ENUM.LV_EVENT_RELEASED, () => {
|
image.obj.lvImgSetZoom(256)
|
})
|
|
return imageBox
|
}
|
|
// 创建标题栏
|
viewUtils.title = function (parent, backScreen, id, dataI18n, backCb) {
|
const titleBox = dxui.View.build(id, parent)
|
viewUtils._clearStyle(titleBox)
|
titleBox.setSize(800, 70)
|
titleBox.bgColor(0xffffff)
|
|
if (dataI18n) {
|
const titleLbl = dxui.Label.build(id + 'title', titleBox)
|
titleLbl.textFont(viewUtils.font(32))
|
titleLbl.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
titleLbl.dataI18n = dataI18n
|
}
|
|
const back = viewUtils.imageBtn(titleBox, id + 'back', '/app/code/resource/image/back.png')
|
back.setSize(80, 70)
|
back.align(dxui.Utils.ALIGN.LEFT_MID, 0, 0)
|
|
back.on(dxui.Utils.EVENT.CLICK, () => {
|
if (backScreen) {
|
dxui.loadMain(backScreen)
|
}
|
if (backCb) {
|
backCb()
|
}
|
})
|
|
return titleBox
|
}
|
|
// 输入框
|
viewUtils.input = function (parent, id, mode, enter = () => { }, dataI18n) {
|
const input = dxui.Textarea.build(id + 'input', parent)
|
viewUtils._clearStyle(input)
|
input.align(dxui.Utils.ALIGN.TOP_MID, 0, 100)
|
input.textAlign(dxui.Utils.TEXT_ALIGN.LEFT_MID)
|
input.setOneLine(true)
|
input.borderWidth(2)
|
input.setBorderColor(0xE7E7E7)
|
const font = viewUtils.font(26)
|
const superSetSize = input.setSize
|
input.setSize = (width, height) => {
|
superSetSize.call(input, width, height)
|
input.padAll((height - 4 - font.obj.lvFontGetLineHeight()) / 2)
|
input.padLeft(30)
|
input.padRight(30)
|
}
|
input.setSize(650, 100)
|
input.radius(13)
|
input.textFont(font)
|
if (dataI18n) {
|
// 只有在dxui.all中，才能使用dataI18n
|
dxui.all[id + 'input' + 'obj'] = input.obj
|
input.obj.dataI18n = dataI18n
|
input.obj.text = (text) => {
|
input.obj.lvTextareaSetPlaceholderText(text)
|
}
|
}
|
|
input.on(dxui.Utils.EVENT.CLICK, () => {
|
input.setBorderColor(0x3670f7)
|
pinyin.show(mode || pinyin.getMode(), (data) => {
|
if (typeof data == 'string') {
|
input.lvTextareaAddText(data)
|
} else if (typeof data == 'object') {
|
switch (data.cmd) {
|
case 'enter':
|
enter()
|
pinyin.hide()
|
break
|
case 'backspace':
|
input.lvTextareaDelChar()
|
break
|
}
|
}
|
})
|
if (mode) {
|
pinyin.lock()
|
}
|
})
|
input.on(dxui.Utils.EVENT.DEFOCUSED, () => {
|
dxMap.get("INPUT_KEYBOARD").put("defocus", "defocus")
|
})
|
|
let root = parent
|
let rootId = parent.id
|
while ((rootId = dxui.all[rootId].parent) != "0") {
|
root = dxui.all[rootId]
|
}
|
|
root.on(dxui.Utils.EVENT.CLICK, () => {
|
input.setBorderColor(0xE7E7E7)
|
// pinyin.hide()
|
})
|
|
root.on(dxui.Utils.ENUM.LV_EVENT_SCREEN_UNLOADED, () => {
|
input.setBorderColor(0xE7E7E7)
|
// pinyin.hide()
|
input.text('')
|
})
|
return input
|
}
|
|
// 确认弹窗
|
viewUtils.confirmInit = function () {
|
const confirm = dxui.View.build('confirm', dxui.Utils.LAYER.TOP)
|
viewUtils._clearStyle(confirm)
|
confirm.setSize(screen.screenSize.width, screen.screenSize.height)
|
confirm.bgColor(0x0)
|
confirm.bgOpa(50)
|
confirm.hide()
|
|
const box = dxui.View.build('confirmBox', confirm)
|
viewUtils._clearStyle(box)
|
box.setSize(500, 300)
|
box.radius(20)
|
box.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
box.bgColor(0xffffff)
|
|
const title = dxui.Label.build('confirmTitle', box)
|
title.align(dxui.Utils.ALIGN.TOP_MID, 0, 22)
|
title.textFont(viewUtils.font(30))
|
title.text("Confirm")
|
|
const close = viewUtils.imageBtn(box, 'confirmClose', '/app/code/resource/image/close_small.png')
|
close.align(dxui.Utils.ALIGN.TOP_RIGHT, -28, 18)
|
|
const content = dxui.Label.build('confirmContent', box)
|
content.align(dxui.Utils.ALIGN.TOP_MID, 0, 114)
|
content.textFont(viewUtils.font(24))
|
content.textColor(0x767676)
|
content.text("Are you sure you want to exit?")
|
content.textAlign(dxui.Utils.TEXT_ALIGN.CENTER)
|
|
const ok = dxui.Button.build('okBtn', box)
|
ok.align(dxui.Utils.ALIGN.BOTTOM_LEFT, 69, -31)
|
ok.bgColor(0x0)
|
ok.radius(10)
|
ok.setSize(150, 50)
|
const okLbl = dxui.Label.build('okLbl', ok)
|
okLbl.textFont(viewUtils.font(26))
|
okLbl.dataI18n = 'confirm.ok'
|
okLbl.textColor(0xffffff)
|
okLbl.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
ok.on(dxui.Utils.EVENT.CLICK, () => {
|
confirm.hide()
|
if (typeof viewUtils.confirm.okFunc == 'function') {
|
viewUtils.confirm.okFunc()
|
}
|
})
|
|
const no = dxui.Button.build('noBtn', box)
|
no.align(dxui.Utils.ALIGN.BOTTOM_RIGHT, -69, -31)
|
no.bgColor(0xF3F3F3)
|
no.radius(10)
|
no.setSize(150, 50)
|
const noLbl = dxui.Label.build('noLbl', no)
|
noLbl.textFont(viewUtils.font(26))
|
noLbl.dataI18n = 'confirm.no'
|
noLbl.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
noLbl.textColor(0x0)
|
no.on(dxui.Utils.EVENT.CLICK, () => {
|
confirm.hide()
|
})
|
|
close.on(dxui.Utils.EVENT.CLICK, () => {
|
confirm.hide()
|
if (typeof viewUtils.confirm.noFunc == 'function') {
|
viewUtils.confirm.noFunc()
|
}
|
})
|
viewUtils.confirm = { confirm, box, title, close, content, ok, no, okLbl, noLbl }
|
}
|
|
viewUtils.confirmClose = function () {
|
viewUtils.confirm.confirm.hide()
|
}
|
|
viewUtils.confirmOpen = function (title, content, ok, no) {
|
viewUtils.confirm.confirm.moveForeground()
|
viewUtils.confirm.title.dataI18n = title
|
viewUtils.confirm.content.dataI18n = content
|
if (ok) {
|
viewUtils.confirm.ok.show()
|
viewUtils.confirm.okFunc = ok
|
} else {
|
viewUtils.confirm.ok.hide()
|
}
|
if (no) {
|
viewUtils.confirm.no.show()
|
viewUtils.confirm.noFunc = no
|
} else {
|
viewUtils.confirm.no.hide()
|
}
|
viewUtils.confirm.confirm.show()
|
i18n.refreshObj(viewUtils.confirm.title)
|
i18n.refreshObj(viewUtils.confirm.content)
|
viewUtils.confirm.content.update()
|
viewUtils.confirm.box.height(viewUtils.confirm.content.height() + 257)
|
}
|
|
|
viewUtils.bottomBtn = function (parent, id, dataI18n, click, btnColor = 0x000000, textColor = 0xffffff, fontSize = 28) {
|
const btn = dxui.Button.build(id, parent)
|
btn.align(dxui.Utils.ALIGN.BOTTOM_MID, 0, -124)
|
btn.bgColor(btnColor)
|
btn.setSize(620, 100)
|
btn.radius(60)
|
const btnLbl = dxui.Label.build(id + 'lbl', btn)
|
btnLbl.dataI18n = dataI18n
|
btnLbl.textFont(viewUtils.font(fontSize))
|
btnLbl.textColor(textColor)
|
btnLbl.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
btn.on(dxui.Utils.EVENT.CLICK, click)
|
return btn
|
}
|
|
// 循环滚动
|
viewUtils.cycleList = function (parent, id, size, maxNum, template = () => { }, update = () => { }) {
|
const cycleList = dxui.View.build(id, parent)
|
viewUtils._clearStyle(cycleList)
|
cycleList.setSize(size[0], size[1])
|
cycleList.cycleList = []
|
cycleList.cycleIndex = 0
|
for (let i = -1; i < (maxNum + 1); i++) {
|
const cycleItem = dxui.View.build(id + 'item' + i, cycleList)
|
viewUtils._clearStyle(cycleItem)
|
cycleItem.setSize(size[0], size[1] / maxNum)
|
cycleItem.bgOpa(0)
|
cycleItem.borderWidth(1)
|
cycleItem.setBorderColor(0xDEDEDE)
|
cycleItem.obj.setStyleBorderSide(dxui.Utils.ENUM.LV_BORDER_SIDE_BOTTOM, 0)
|
cycleItem.userdata = template(cycleItem)
|
cycleList.cycleIndex = i
|
update(cycleItem.userdata, i)
|
if (cycleList.cycleList.length > 0) {
|
cycleItem.alignTo(cycleList.cycleList[cycleList.cycleList.length - 1], dxui.Utils.ALIGN.OUT_BOTTOM_MID, 0, 0)
|
} else {
|
cycleItem.align(dxui.Utils.ALIGN.TOP_MID, 0, 0)
|
}
|
cycleList.cycleList.push(cycleItem)
|
}
|
cycleList.scrollToY(size[1] / maxNum, false)
|
|
cycleList.on(dxui.Utils.ENUM.LV_EVENT_SCROLL, () => {
|
if (cycleList.scrollTop() >= size[1] / maxNum * 2) {
|
const cycleItem = cycleList.cycleList.shift()
|
cycleList.cycleList.push(cycleItem)
|
for (let i = 0; i < cycleList.cycleList.length; i++) {
|
const item = cycleList.cycleList[i]
|
if (i == 0) {
|
item.align(dxui.Utils.ALIGN.TOP_MID, 0, 0)
|
} else {
|
item.alignTo(cycleList.cycleList[i - 1], dxui.Utils.ALIGN.OUT_BOTTOM_MID, 0, 0)
|
}
|
}
|
cycleList.cycleIndex += 1
|
update(cycleItem.userdata, cycleList.cycleIndex)
|
cycleList.scrollToY(size[1] / maxNum, false)
|
} else if (cycleList.scrollTop() <= 0) {
|
const cycleItem = cycleList.cycleList.pop()
|
cycleList.cycleList.unshift(cycleItem)
|
for (let i = 0; i < cycleList.cycleList.length; i++) {
|
const item = cycleList.cycleList[i]
|
if (i == 0) {
|
item.align(dxui.Utils.ALIGN.TOP_MID, 0, 0)
|
} else {
|
item.alignTo(cycleList.cycleList[i - 1], dxui.Utils.ALIGN.OUT_BOTTOM_MID, 0, 0)
|
}
|
}
|
cycleList.cycleIndex -= 1
|
update(cycleItem.userdata, cycleList.cycleIndex)
|
cycleList.scrollToY(size[1] / maxNum, false)
|
}
|
})
|
cycleList.refresh = () => {
|
cycleList.cycleList.forEach((item, index) => {
|
update(item.userdata, index)
|
})
|
}
|
return cycleList
|
}
|
|
viewUtils.statusPanel = function (parent, successI18n, failI18n) {
|
const successBg = dxui.Image.build(parent.id + 'successBg', parent)
|
successBg.source('/app/code/resource/image/successBg.png')
|
successBg.align(dxui.Utils.ALIGN.BOTTOM_MID, 0, 0)
|
successBg.hide()
|
|
const successIcon = dxui.Image.build(parent.id + 'successIcon', successBg)
|
successIcon.source('/app/code/resource/image/success_fill.png')
|
successIcon.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
|
const successLbl = dxui.Label.build(parent.id + 'successLbl', successBg)
|
successLbl.textFont(viewUtils.font(38))
|
successLbl.textColor(0xffffff)
|
successLbl.dataI18n = successI18n
|
successLbl.textAlign(dxui.Utils.TEXT_ALIGN.CENTER)
|
successLbl.align(dxui.Utils.ALIGN.TOP_MID, 0, 244)
|
|
const failBg = dxui.Image.build(parent.id + 'failBg', parent)
|
failBg.source('/app/code/resource/image/failBg.png')
|
failBg.align(dxui.Utils.ALIGN.BOTTOM_MID, 0, 0)
|
failBg.hide()
|
|
const failIcon = dxui.Image.build(parent.id + 'failIcon', failBg)
|
failIcon.source('/app/code/resource/image/delete_fill.png')
|
failIcon.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
|
const failLbl = dxui.Label.build(parent.id + 'failLbl', failBg)
|
failLbl.textFont(viewUtils.font(38))
|
failLbl.textColor(0xffffff)
|
failLbl.dataI18n = failI18n
|
failLbl.textAlign(dxui.Utils.TEXT_ALIGN.CENTER)
|
failLbl.align(dxui.Utils.ALIGN.TOP_MID, 0, 244)
|
|
return {
|
success: (dataI18n) => {
|
if (dataI18n) {
|
successLbl.dataI18n = dataI18n
|
i18n.refreshObj(successLbl)
|
}
|
successBg.show()
|
failBg.hide()
|
std.setTimeout(() => {
|
successBg.hide()
|
}, 3000)
|
},
|
fail: (dataI18n) => {
|
if (dataI18n) {
|
failLbl.dataI18n = dataI18n
|
i18n.refreshObj(failLbl)
|
}
|
failBg.show()
|
successBg.hide()
|
std.setTimeout(() => {
|
failBg.hide()
|
}, 3000)
|
},
|
successBg: successBg,
|
failBg: failBg
|
}
|
}
|
|
// 新增弹窗布局 - 小型状态面板
|
viewUtils.smallStatusPanel = function (parent, successI18n, failI18n) {
|
const successBg = dxui.Image.build(parent.id + 'smallSuccessBg', parent)
|
successBg.source('/app/code/resource/image/view_s.png') // 成功背景图
|
successBg.setSize(499, 97) // 设置尺寸
|
successBg.align(dxui.Utils.ALIGN.BOTTOM_MID, 0, 0)
|
successBg.hide()
|
|
const successLbl = dxui.Label.build(parent.id + 'smallSuccessLbl', successBg)
|
successLbl.textFont(viewUtils.font(24, dxui.Utils.FONT_STYLE.BOLD))
|
successLbl.textColor(0xffffff)
|
successLbl.dataI18n = successI18n
|
successLbl.textAlign(dxui.Utils.TEXT_ALIGN.CENTER)
|
successLbl.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
|
const failBg = dxui.Image.build(parent.id + 'smallFailBg', parent)
|
failBg.source('/app/code/resource/image/view_f.png') // 失败背景图
|
failBg.setSize(499, 97) // 设置尺寸
|
failBg.align(dxui.Utils.ALIGN.BOTTOM_MID, 0, 0)
|
failBg.hide()
|
|
const failLbl = dxui.Label.build(parent.id + 'smallFailLbl', failBg)
|
failLbl.textFont(viewUtils.font(24, dxui.Utils.FONT_STYLE.BOLD))
|
failLbl.textColor(0xffffff)
|
failLbl.dataI18n = failI18n
|
failLbl.textAlign(dxui.Utils.TEXT_ALIGN.CENTER)
|
failLbl.align(dxui.Utils.ALIGN.CENTER, 0, 0)
|
|
return {
|
success: (dataI18n) => {
|
if (dataI18n) {
|
successLbl.dataI18n = dataI18n
|
i18n.refreshObj(successLbl)
|
}
|
successBg.show()
|
failBg.hide()
|
std.setTimeout(() => {
|
successBg.hide()
|
}, 3000)
|
},
|
fail: (dataI18n) => {
|
if (dataI18n) {
|
failLbl.dataI18n = dataI18n
|
i18n.refreshObj(failLbl)
|
}
|
failBg.show()
|
successBg.hide()
|
std.setTimeout(() => {
|
failBg.hide()
|
}, 3000)
|
},
|
successBg: successBg,
|
failBg: failBg
|
}
|
}
|
|
export default viewUtils
|
