liubiao/APP
1
0
Fork 0
forked from dyf/APP
Code Pull Requests Activity

6155完成部分协议对接

Browse Source
This commit is contained in:
liub
2025-08-15 16:39:00 +08:00
parent 6ef2bb08b9
commit e95b2466e1
10 changed files with 871 additions and 708 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
components/BottomSlideMenuPlus/BottomSlideMenuPlus.vue
View File

@ -2,17 +2,14 @@
<view class="message-popup" :class="{ 'show': config.show }">
<view class="mask" @click="closeMenu" :class="{ 'show': config.show }"
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}"
>
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}">
</view>
<view class="bottom-slide-menu" :style="{ backgroundColor: config.bgColor }" :class="{ 'show': config.show }"
@touchmove.stop.prevent>
<view class="menu-header" :class="config.showHeader?'':'displayNone'">
<view class="title" :style="{ color: config.textColor}">{{ config.title }}</view>
<view class="close-icon" @click="closeMenu"
:style="{display:(config.showClose?'':'none')}"
>
<view class="close-icon" @click="closeMenu" :style="{display:(config.showClose?'':'none')}">
<image src="/static/Images/public/close.png" mode="aspectFit"></image>
</view>
</view>
@ -29,7 +26,13 @@
<view class="p100" :style="{backgroundColor:config.activeIndex==index?config.itemBgColor:'',
justifyContent:config.textAlign
}">
<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
<view class="imgContent" :style="{
height:config.itemHeight,
width:config.itemHeight
}">
<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
</view>
<text>{{ item.text }}</text>
</view>
@ -61,34 +64,34 @@
config: {
type: Object,
default: () => ({
show: false,//是否显示
showHeader: false,//是否显示标头
showMask:true,//是否显示mask
showDivider: false,//是否在两个项之间显示分隔线
showBtn: false,//是否显示底部按钮
showClose:false,//是否显示右上角关闭按钮
maskBgColor:'',//mask的颜色
menuItems: [],//菜单项 包含icon text
activeIndex: -1,//当前已选中的项编号
bgColor: '#2a2a2a',//主体背景
itemBgColor: '#3a3a3a',//各项被选中后的背景
textColor: '#ffffffde',//各项的文字颜色
textAlign: 'flex-start',//各项的文字居中方式
title: '',//header的文字
dividerColor: '#00000000',//分隔线颜色
dividerThickness: '0rpx',//分隔线宽度
dividerMargin: '10rpx',//分隔线距离两边的宽度
itemHeight: '80rpx',//各项的调试
btnBgColor: "#bbe600",//按钮颜色
btnText: "确定",//按钮文字
btnTextColor: "#000000",//按钮文字颜色
show: false, //是否显示
showHeader: false, //是否显示标头
showMask: true, //是否显示mask
showDivider: false, //是否在两个项之间显示分隔线
showBtn: false, //是否显示底部按钮
showClose: false, //是否显示右上角关闭按钮
maskBgColor: '', //mask的颜色
menuItems: [], //菜单项 包含icon text
activeIndex: -1, //当前已选中的项编号
bgColor: '#2a2a2a', //主体背景
itemBgColor: '#3a3a3a', //各项被选中后的背景
textColor: '#ffffffde', //各项的文字颜色
textAlign: 'flex-start', //各项的文字居中方式
title: '', //header的文字
dividerColor: '#00000000', //分隔线颜色
dividerThickness: '0rpx', //分隔线宽度
dividerMargin: '10rpx', //分隔线距离两边的宽度
itemHeight: '80rpx', //各项的调试
btnBgColor: "#bbe600", //按钮颜色
btnText: "确定", //按钮文字
btnTextColor: "#000000", //按钮文字颜色
})
},
},
methods: {
closeMenu() {
@ -100,19 +103,18 @@
this.$emit('itemClick', item, index);
},
btnClick() {
let item = null;
let index = null;
if (this.config.activeIndex > -1) {
item = this.config.menuItems[this.config.activeIndex];
}
index = this.config.activeIndex;
this.$emit('btnClick', item, index);
this.$emit('btnClick', item, index);
}
}
}
</script>
<style>
@ -126,7 +128,7 @@
}
.p100 {
width: 100%;
width: calc(100% - 20rpx);
height: 100%;
border-radius: 8rpx;
display: flex;
@ -136,7 +138,8 @@
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding: 0rpx 20rpx;
padding: 0rpx 20rpx 0rpx 0rpx;
margin-left: 20rpx;
}
.displayNone {
@ -151,7 +154,7 @@
z-index: 9999;
transition: transform 0.3s ease-out;
transform: translateY(100%);
border-radius: 16rpx 16rpx 0 0;
border-radius: 32rpx 32rpx 0 0;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}
@ -217,11 +220,24 @@
width: 100%;
box-sizing: border-box;
position: relative;
margin-bottom: 20rpx;
}
.menu-item image {
width: 40rpx;
height: 40rpx;
}
.imgContent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
background: #4a4a4a;
border-radius: 10rpx;
margin-right: 20rpx;
}

341
components/TextToHex/TextToHex.vue
View File

@ -1,149 +1,194 @@
<template>
<view>
<!-- 只创建一个Canvas用于复用 -->
<canvas
type="2d"
canvas-id="reusableCanvas"
:width="currentCanvasWidth"
:height="currentCanvasHeight"
class="offscreen-canvas"
></canvas>
</view>
</template>
<script>
export default {
name: "TextToHex",
props: {
txts: {
type: Array,
default: () => [],
validator: (value) => value.every(item => typeof item === 'string')
},
fontSize: {
type: Number,
default: 16,
validator: (value) => value > 0 && value <= 100
},
bgColor:{
type:String,
default:"#000000"
<template>
<view>
<canvas type="2d" canvas-id="reusableCanvas" :width="currentCanvasWidth" :height="currentCanvasHeight"
class="offscreen-canvas"></canvas>
</view>
</template>
<script>
export default {
name: "TextToHexV1",
props: {
txts: {
type: Array,
default: () => [],
validator: (value) => value.every(item => typeof item === 'string')
},
color:{
type:String,
default:"#FFFFFF"
}
},
data() {
return {
// 当前Canvas的宽高（动态调整）
currentCanvasWidth: 0,
currentCanvasHeight: 0,
// Canvas上下文（复用）
ctx: null
};
},
computed: {
validTxts() {
return this.txts.filter(line => line.trim() !== '');
}
},
mounted() {
// 初始化Canvas上下文（只创建一次）
this.ctx = uni.createCanvasContext('reusableCanvas', this);
},
methods: {
/**
* 估算单行文本所需的Canvas宽度
*/
calcLineWidth(textLine) {
return textLine.length * this.fontSize;
},
/**
* 清除Canvas内容
*/
clearCanvas() {
this.ctx.setFillStyle(this.bgColor);
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
},
/**
* 复用单个Canvas处理所有文本行
*/
async drawAndGetPixels() {
if (this.validTxts.length === 0) {
return [];
}
const result = [];
const ctx = this.ctx;
// 循环处理每行文本
for (let i = 0; i < this.validTxts.length; i++) {
const textLine = this.validTxts[i];
// 1. 动态调整Canvas尺寸
this.currentCanvasWidth = this.calcLineWidth(textLine);
this.currentCanvasHeight = this.fontSize;
// 2. 清空Canvas（绘制背景）
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setTextBaseline('middle');
ctx.setFontSize(this.fontSize);
ctx.font = `${this.fontSize}px SimHei, Microsoft YaHei, Arial, sans-serif`;
// 4. 绘制当前行文本
let currentX = 0;
const currentY = this.fontSize / 2;
for (let j = 0; j < textLine.length; j++) {
const char = textLine[j];
ctx.fillText(char, currentX, currentY);
// 按实际字符宽度计算间距
const charWidth = ctx.measureText(char).width;
currentX += charWidth ;
}
// 5. 异步绘制并获取像素数据（串行处理避免冲突）
await new Promise((resolve, reject) => {
ctx.draw(false, () => {
uni.canvasGetImageData({
canvasId: 'reusableCanvas',
x: 0,
y: 0,
width: this.currentCanvasWidth,
height: this.currentCanvasHeight,
success: res => {
result.push({
line: textLine,
pixelData: res.data,
width: this.currentCanvasWidth,
height: this.currentCanvasHeight
});
resolve();
},
fail: err => {
// console.error(`处理第${i+1}行失败:`, err);
reject(err);
}
});
});
});
}
return result;
}
}
};
</script>
<style >
.offscreen-canvas {
position: fixed;
left: -9999px;
top: -9999px;
visibility: hidden;
}
</style>
fontSize: {
type: Number,
default: 16,
validator: (value) => value > 0 && value <= 100
},
bgColor: {
type: String,
default: "#ffffff"
},
color: {
type: String,
default: "#000000"
}
},
data() {
return {
// 当前Canvas的宽高（动态调整）
currentCanvasWidth: 0,
currentCanvasHeight: 0,
// Canvas上下文（复用）
ctx: null
};
},
computed: {
validTxts() {
return this.txts.filter(line => line.trim() !== '');
}
},
mounted() {
// 初始化Canvas上下文（只创建一次）
this.ctx = uni.createCanvasContext('reusableCanvas', this);
},
methods: {
/**
* 估算单行文本所需的Canvas宽度
*/
calcLineWidth(textLine) {
return textLine.length * this.fontSize;
},
/**
* 清除Canvas内容
*/
clearCanvas() {
this.ctx.setFillStyle(this.bgColor);
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
},
/**
* 复用单个Canvas处理所有文本行
*/
async drawAndGetPixels() {
let convertCharToMatrix=function(imageData) {
// console.log("imgData=",imageData)
let matrix = [];
// 逐行处理
for (let y = 0; y < 16; y++) {
let byte1 = 0,
byte2 = 0;
// 每行16个像素，分为两个字节
for (let x = 0; x < 16; x++) {
// 计算像素在imageData中的索引 (RGBA格式)
let index = (y * 16 + x) * 4;
let red = imageData[index];
// 黑色像素（R值较低）视为1，白色视为0
let isBlack = red < 128;
if (x < 8) {
// 第一个字节（左8位）
if (isBlack) {
byte1 |= 0x80 >> x; // 从左到右设置位
}
} else {
// 第二个字节（右8位）
if (isBlack) {
byte2 |= 0x80 >> (x - 8);
}
}
}
// 将字节转换为两位十六进制字符串
matrix.push('0x' + byte1.toString(16).padStart(2, '0').toUpperCase());
matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase());
}
return matrix;
}
let drawTxt=async (textLine)=> {
let result = {};
let ctx = this.ctx;
// 1. 动态调整Canvas尺寸
this.currentCanvasWidth = this.calcLineWidth(textLine);
this.currentCanvasHeight = this.fontSize;
// 2. 清空Canvas（绘制背景）
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setTextBaseline('middle');
ctx.setFontSize(this.fontSize);
ctx.font = `${this.fontSize}px "PingFang SC", PingFang SC, Arial, sans-serif`;
// 4. 绘制当前行文本
let currentX = 0;
let currentY = this.fontSize / 2;
for (let j = 0; j < textLine.length; j++) {
let char = textLine[j];
ctx.fillText(char, currentX, currentY);
// 按实际字符宽度计算间距
let charWidth = ctx.measureText(char).width;
currentX += charWidth;
}
// 5. 异步绘制并获取像素数据（串行处理避免冲突）
await new Promise((resolve, reject) => {
ctx.draw(false, () => {
uni.canvasGetImageData({
canvasId: 'reusableCanvas',
x: 0,
y: 0,
width: this.currentCanvasWidth,
height: this.currentCanvasHeight,
success: res => {
result={
line: textLine,
pixelData: res.data,
width: this.currentCanvasWidth,
height: this.currentCanvasHeight
};
resolve();
},
fail: err => {
// console.error(`处理第${i+1}行失败:`, err);
reject(err)
}
});
});
});
return result;
}
let arr = [];
// 循环处理每行文本
for (let i = 0; i < this.validTxts.length; i++) {
let linePixls = [];
let item = this.validTxts[i];
console.log("item=",item);
for (var j = 0; j < item.length; j++) {
let result = await drawTxt(item[j]);
linePixls.push(convertCharToMatrix(result.pixelData));
}
console.log("hexs=",linePixls.join(","));
arr.push(linePixls);
}
return arr;
}
}
};
</script>
<style>
.offscreen-canvas {
position: fixed;
left: -9999px;
top: -9999px;
visibility: hidden;
}
</style>

6
components/global-loading/global-loading.vue
View File

@ -23,10 +23,10 @@
return {
visible: false,
dotsCount: 12,
dotColors: ['#CEF231c2'],
dotColors: ['#CEF231'],
text: '请稍候...',//文本文字
textColor: '#FFFFFFde',//文本颜色
radius: 35,//圆的半径
radius: 32,//圆的半径
duration: 1200,//动画的播放速度
colorIndex: 0
}
@ -158,7 +158,7 @@
position: absolute;
top: 50%;
left: 50%;
width: 4rpx;
width: 6rpx;
height: 30rpx;
border-radius: 12rpx;
/* margin-top: -4rpx;