|
|
@@ -1,248 +1,260 @@
|
|
|
-/**
|
|
|
- * 雪碧图注册表
|
|
|
- * 用途：sprite-icon 按 sheet + name 从多张 CDN 雪碧图裁切显示图标
|
|
|
- * 图片地址随 ext.json / 环境 imgHost 变化，必须用函数运行时读取，不能用 this.$constant
|
|
|
- */
|
|
|
-import constant from "@/constant/index";
|
|
|
-
|
|
|
-/** 默认图床（ext 未配置 imgHost 时的兜底） */
|
|
|
-const DEFAULT_IMG_HOST = "https://img.huaml.com";
|
|
|
-
|
|
|
-/** 未传 sheet 时默认使用的雪碧图 key */
|
|
|
-const DEFAULT_SHEET_KEY = "main";
|
|
|
-
|
|
|
-/**
|
|
|
- * 雪碧图注册表：每张图含 path、原图尺寸、icons 坐标
|
|
|
- */
|
|
|
-export const SPRITE_SHEETS = {
|
|
|
- main: {
|
|
|
- path: "/hhb/sprite_icon/main-index.webp?time=2607171640",
|
|
|
- width: 500,
|
|
|
- height: 500,
|
|
|
- icons: {
|
|
|
- "dengji-biandong": { x: 14, y: 17, w: 32, h: 32 },
|
|
|
- "yue-biandong": { x: 60, y: 16, w: 32, h: 32 },
|
|
|
- "huiyuan-quanyi": { x: 102, y: 14, w: 33, h: 32 },
|
|
|
- "lianxikefu": { x: 145, y: 17, w: 32, h: 32 },
|
|
|
- "huangguan": { x: 189, y: 20, w: 22, h: 21 },
|
|
|
- "shezhi": { x: 13, y: 62, w: 34, h: 36 },
|
|
|
- "shaixuan": { x: 71, y: 67, w: 25, h: 25 },
|
|
|
- "dianpu-fill": { x: 116, y: 63, w: 31, h: 30 },
|
|
|
- "huoche-cheng": { x: 171, y: 68, w: 23, h: 21 },
|
|
|
- "huoche-lv": { x: 204, y: 68, w: 23, h: 21 },
|
|
|
- "gou-quan": { x: 246, y: 68, w: 22, h: 21 },
|
|
|
- "huashu": { x: 4, y: 118, w: 52, h: 49 },
|
|
|
- "hua": { x: 94, y: 118, w: 52, h: 49 },
|
|
|
- "dianpu-line": { x: 167, y: 114, w: 51, h: 51 },
|
|
|
- "tuichu": { x: 243, y: 111, w: 49, h: 51 },
|
|
|
- "xiaoxi": { x: 8, y: 186, w: 45, h: 45 },
|
|
|
- "qianbao": { x: 68, y: 182, w: 55, h: 50 },
|
|
|
- "huoche-da": { x: 142, y: 182, w: 60, h: 50 },
|
|
|
- "baoguo": { x: 219, y: 182, w: 50, h: 50 },
|
|
|
- "fanghu-yuan": { x: 282, y: 182, w: 42, h: 50 },
|
|
|
- "youhuiquan-yellow": { x: 344, y: 184, w: 50, h: 50 },
|
|
|
- "gengduo-quan": { x: 274, y: 102, w: 52, h: 52 },
|
|
|
- "icon-home": { x: 274, y: 102, w: 52, h: 52 },
|
|
|
- "icon-home-active": { x: 274, y: 102, w: 52, h: 52 },
|
|
|
- "gengduo-quan": { x: 274, y: 102, w: 52, h: 52 },
|
|
|
- "icon-home": { x: 7, y: 245, w: 50, h: 50 },
|
|
|
- "icon-home-active": { x: 60, y: 245, w: 50, h: 50 },
|
|
|
- "icon-category": { x: 116, y: 245, w: 50, h: 50 },
|
|
|
- "icon-category-active": { x: 176, y: 245, w: 50, h: 50 },
|
|
|
- "icon-cart": { x: 238, y: 245, w: 50, h: 50 },
|
|
|
- "icon-cart-active": { x: 293, y: 245, w: 50, h: 50 },
|
|
|
- "icon-order": { x: 366, y: 245, w: 50, h: 50 },
|
|
|
- "icon-order-active": { x: 418, y: 245 , w: 50, h: 50 },
|
|
|
- "cart-delete": { x: 7, y: 298 , w: 46, h: 52 },//购物车-删除
|
|
|
- "notice": { x: 216, y: 15 , w: 31, h: 31 },//公告通知
|
|
|
- }
|
|
|
- },
|
|
|
- /** 进货/供货商专用雪碧图，坐标待设计稿测量后补全 */
|
|
|
- order: {
|
|
|
- path: "/hhb/sprite_icon/icon-order.webp?time=26072009",
|
|
|
- width: 600,
|
|
|
- height: 600,
|
|
|
- icons: {
|
|
|
- "ps-shop": { x: 257, y: 8 , w: 57, h: 52 },//商家配送
|
|
|
- "ps-shop-active": { x: 190, y: 8 , w: 57, h: 52 },//商家配送-active
|
|
|
- "ps-paotui": { x: 198, y: 63 , w: 60, h: 52 },//跑腿配送
|
|
|
- "ps-paotui-active": { x: 129, y: 63 , w: 60, h: 52 },//跑腿配送-active
|
|
|
- "ps-daodian": { x: 383, y: 8 , w: 48, h: 50 },//到店自取
|
|
|
- "ps-daodian-active": { x: 324, y: 8 , w: 49, h: 50 },//到店自取-active
|
|
|
- "ps-kuaidi": { x: 72, y: 63 , w: 49, h: 50 },//快递
|
|
|
- "ps-kuaidi-active": { x: 12, y: 63 , w: 49, h: 50 },//快递-active
|
|
|
- "ps-wuliu": { x: 441, y: 8 , w: 67, h: 52 },//物流
|
|
|
- "ps-wuliu-active": { x: 518, y: 8 , w: 67, h: 52 },//物流-active
|
|
|
- "huoche": { x: 7, y: 8 , w: 46, h: 50 },//配送说明-小货车
|
|
|
- "youhuiquan": { x: 267, y: 63 , w: 58, h: 50 },//优惠券
|
|
|
- "beizhu": { x: 12, y: 8 , w: 50, h: 50 },//订单-备注
|
|
|
- "shijian": { x: 70, y: 8 , w: 52, h: 52 },//配送时间
|
|
|
- "shijianduan": { x: 129, y: 8 , w: 52, h: 52 },//配送时间段
|
|
|
- "dingwei": { x: 339, y: 63 , w: 42, h: 51 },//定位
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-/** tabBar 未选中 / 选中 图标名映射（main 雪碧图） */
|
|
|
-export const TAB_SPRITE_MAP = {
|
|
|
- home: { normal: "dianpu-line", active: "dianpu-fill" },
|
|
|
- order: { normal: "huoche-lv", active: "huoche-da" },
|
|
|
- mine: { normal: "gou-quan", active: "qianbao" }
|
|
|
-};
|
|
|
-
|
|
|
-/** @deprecated 兼容旧引用 */
|
|
|
-export const MAIN_INDEX_SPRITE = {
|
|
|
- width: SPRITE_SHEETS.main.width,
|
|
|
- height: SPRITE_SHEETS.main.height
|
|
|
-};
|
|
|
-
|
|
|
-/** @deprecated 兼容旧引用 */
|
|
|
-export const MAIN_INDEX_ICONS = SPRITE_SHEETS.main.icons;
|
|
|
-
|
|
|
-function buildIconSheetIndex(sheets) {
|
|
|
- const index = {};
|
|
|
- Object.keys(sheets).forEach((sheetKey) => {
|
|
|
- const icons = sheets[sheetKey].icons || {};
|
|
|
- Object.keys(icons).forEach((name) => {
|
|
|
- if (index[name] && index[name] !== sheetKey && process.env.NODE_ENV !== "production") {
|
|
|
- console.warn(`[sprite] 图标名 "${name}" 在 ${index[name]} 与 ${sheetKey} 中重复，以 ${sheetKey} 为准`);
|
|
|
- }
|
|
|
- index[name] = sheetKey;
|
|
|
- });
|
|
|
- });
|
|
|
- return index;
|
|
|
-}
|
|
|
-
|
|
|
-const ICON_SHEET_INDEX = buildIconSheetIndex(SPRITE_SHEETS);
|
|
|
-
|
|
|
-function getImgHostBase() {
|
|
|
- let base = (constant.imgUrl || DEFAULT_IMG_HOST).replace(/\/$/, "");
|
|
|
- if (base.indexOf("http://") === 0) {
|
|
|
- base = `https://${base.slice(7)}`;
|
|
|
- }
|
|
|
- return base;
|
|
|
-}
|
|
|
-
|
|
|
-function rpx2px(rpx) {
|
|
|
- if (typeof uni !== "undefined" && typeof uni.upx2px === "function") {
|
|
|
- return uni.upx2px(rpx);
|
|
|
- }
|
|
|
- return rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 计算图标显示宽高与缩放比（支持按宽度 size 或按高度 height 等比缩放）
|
|
|
- * @param {{ w: number, h: number }} icon 雪碧图坐标中的原始宽高
|
|
|
- * @param {{ size?: number|string, height?: number|string }} opts
|
|
|
- * @returns {{ displayW: number, displayH: number, scale: number }}
|
|
|
- */
|
|
|
-function resolveSpriteDisplaySize(icon, opts = {}) {
|
|
|
- const heightNum = Number(opts.height);
|
|
|
- const useHeight = opts.height !== "" && opts.height != null && !Number.isNaN(heightNum) && heightNum > 0;
|
|
|
-
|
|
|
- let scale;
|
|
|
- let displayW;
|
|
|
- let displayH;
|
|
|
-
|
|
|
- if (useHeight) {
|
|
|
- displayH = Math.round(heightNum);
|
|
|
- scale = displayH / icon.h;
|
|
|
- displayW = Math.round(icon.w * scale);
|
|
|
- } else {
|
|
|
- const sizeNum = Number(opts.size);
|
|
|
- displayW = !Number.isNaN(sizeNum) && sizeNum > 0 ? sizeNum : 48;
|
|
|
- scale = displayW / icon.w;
|
|
|
- displayH = Math.round(icon.h * scale);
|
|
|
- }
|
|
|
-
|
|
|
- return { displayW, displayH, scale };
|
|
|
-}
|
|
|
-
|
|
|
-export function resolveSprite(name, sheetKey = "") {
|
|
|
- if (!name) {
|
|
|
- return null;
|
|
|
- }
|
|
|
- let key = sheetKey;
|
|
|
- if (!key) {
|
|
|
- key = ICON_SHEET_INDEX[name] || DEFAULT_SHEET_KEY;
|
|
|
- }
|
|
|
- const sheet = SPRITE_SHEETS[key];
|
|
|
- if (!sheet) {
|
|
|
- return null;
|
|
|
- }
|
|
|
- const icon = (sheet.icons || {})[name];
|
|
|
- if (!icon) {
|
|
|
- return null;
|
|
|
- }
|
|
|
- return { sheetKey: key, sheet, icon };
|
|
|
-}
|
|
|
-
|
|
|
-export function getSpriteSheetUrl(sheetKey = DEFAULT_SHEET_KEY) {
|
|
|
- const sheet = SPRITE_SHEETS[sheetKey];
|
|
|
- if (!sheet) {
|
|
|
- return "";
|
|
|
- }
|
|
|
- return `${getImgHostBase()}${sheet.path}`;
|
|
|
-}
|
|
|
-
|
|
|
-export function spriteImageStyle(name, size = 48, sheetKey = "", height = "") {
|
|
|
- const resolved = resolveSprite(name, sheetKey);
|
|
|
- if (!resolved) {
|
|
|
- if (process.env.NODE_ENV !== "production") {
|
|
|
- console.warn(`[sprite-icon] 未找到图标: name=${name}${sheetKey ? ` sheet=${sheetKey}` : ""}`);
|
|
|
- }
|
|
|
- return { wrap: "", inner: "", image: "" };
|
|
|
- }
|
|
|
- const { sheet, icon } = resolved;
|
|
|
- const { displayW, displayH, scale } = resolveSpriteDisplaySize(icon, { size, height });
|
|
|
- const sheetW = sheet.width * scale;
|
|
|
- const sheetH = sheet.height * scale;
|
|
|
- const left = -rpx2px(icon.x * scale);
|
|
|
- const top = -rpx2px(icon.y * scale);
|
|
|
- const sheetWPx = rpx2px(sheetW);
|
|
|
- const sheetHPx = rpx2px(sheetH);
|
|
|
- return {
|
|
|
- wrap: `position:relative;width:${displayW}rpx;height:${displayH}rpx;overflow:hidden;line-height:0;`,
|
|
|
- inner: `position:absolute;left:${left}px;top:${top}px;width:${sheetWPx}px;height:${sheetHPx}px;`,
|
|
|
- image: "width:100%;height:100%;display:block;"
|
|
|
- };
|
|
|
-}
|
|
|
-
|
|
|
-export function spriteStyle(name, size = 48, sheetKey = "", height = "") {
|
|
|
- const resolved = resolveSprite(name, sheetKey);
|
|
|
- if (!resolved) {
|
|
|
- return "";
|
|
|
- }
|
|
|
- const { sheetKey: key, sheet, icon } = resolved;
|
|
|
- const { displayW, displayH, scale } = resolveSpriteDisplaySize(icon, { size, height });
|
|
|
- const sheetW = sheet.width * scale;
|
|
|
- const sheetH = sheet.height * scale;
|
|
|
- const posX = rpx2px(icon.x * scale);
|
|
|
- const posY = rpx2px(icon.y * scale);
|
|
|
- const sheetWPx = rpx2px(sheetW);
|
|
|
- const sheetHPx = rpx2px(sheetH);
|
|
|
- const url = getSpriteSheetUrl(key);
|
|
|
- return [
|
|
|
- `width:${displayW}rpx`,
|
|
|
- `height:${displayH}rpx`,
|
|
|
- `background-image:url(${url})`,
|
|
|
- `background-size:${sheetWPx}px ${sheetHPx}px`,
|
|
|
- `background-position:-${posX}px -${posY}px`,
|
|
|
- "background-repeat:no-repeat",
|
|
|
- "display:inline-block",
|
|
|
- "flex-shrink:0",
|
|
|
- "vertical-align:middle"
|
|
|
- ].join(";");
|
|
|
-}
|
|
|
-
|
|
|
-export function getMainIndexSpriteUrl() {
|
|
|
- return getSpriteSheetUrl(DEFAULT_SHEET_KEY);
|
|
|
-}
|
|
|
-
|
|
|
-export function mainIndexSpriteImageStyle(name, size = 48, height = "") {
|
|
|
- return spriteImageStyle(name, size, DEFAULT_SHEET_KEY, height);
|
|
|
-}
|
|
|
-
|
|
|
-export function mainIndexSpriteStyle(name, size = 48, height = "") {
|
|
|
- return spriteStyle(name, size, DEFAULT_SHEET_KEY, height);
|
|
|
-}
|
|
|
+/**
|
|
|
+ * 雪碧图注册表
|
|
|
+ * 用途：sprite-icon 按 sheet + name 从多张 CDN 雪碧图裁切显示图标
|
|
|
+ * 图片地址随 ext.json / 环境 imgHost 变化，必须用函数运行时读取，不能用 this.$constant
|
|
|
+ */
|
|
|
+import constant from "@/constant/index";
|
|
|
+
|
|
|
+/** 默认图床（ext 未配置 imgHost 时的兜底） */
|
|
|
+const DEFAULT_IMG_HOST = "https://img.huaml.com";
|
|
|
+
|
|
|
+/** 未传 sheet 时默认使用的雪碧图 key */
|
|
|
+const DEFAULT_SHEET_KEY = "main";
|
|
|
+
|
|
|
+/**
|
|
|
+ * 雪碧图注册表：每张图含 path、原图尺寸、icons 坐标
|
|
|
+ */
|
|
|
+export const SPRITE_SHEETS = {
|
|
|
+ main: {
|
|
|
+ path: "/hhb/sprite_icon/main-index.webp?time=2607171640",
|
|
|
+ width: 500,
|
|
|
+ height: 500,
|
|
|
+ icons: {
|
|
|
+ "dengji-biandong": { x: 14, y: 17, w: 32, h: 32 },
|
|
|
+ "yue-biandong": { x: 60, y: 16, w: 32, h: 32 },
|
|
|
+ "huiyuan-quanyi": { x: 102, y: 14, w: 33, h: 32 },
|
|
|
+ "lianxikefu": { x: 145, y: 17, w: 32, h: 32 },
|
|
|
+ "huangguan": { x: 189, y: 20, w: 22, h: 21 },
|
|
|
+ "shezhi": { x: 13, y: 62, w: 34, h: 36 },
|
|
|
+ "shaixuan": { x: 71, y: 67, w: 25, h: 25 },
|
|
|
+ "dianpu-fill": { x: 116, y: 63, w: 31, h: 30 },
|
|
|
+ "huoche-cheng": { x: 171, y: 68, w: 23, h: 21 },
|
|
|
+ "huoche-lv": { x: 204, y: 68, w: 23, h: 21 },
|
|
|
+ "gou-quan": { x: 246, y: 68, w: 22, h: 21 },
|
|
|
+ "huashu": { x: 4, y: 118, w: 52, h: 49 },
|
|
|
+ "hua": { x: 94, y: 118, w: 52, h: 49 },
|
|
|
+ "dianpu-line": { x: 167, y: 114, w: 51, h: 51 },
|
|
|
+ "tuichu": { x: 243, y: 111, w: 49, h: 51 },
|
|
|
+ "xiaoxi": { x: 8, y: 186, w: 45, h: 45 },
|
|
|
+ "qianbao": { x: 68, y: 182, w: 55, h: 50 },
|
|
|
+ "huoche-da": { x: 142, y: 182, w: 60, h: 50 },
|
|
|
+ "baoguo": { x: 219, y: 182, w: 50, h: 50 },
|
|
|
+ "fanghu-yuan": { x: 282, y: 182, w: 42, h: 50 },
|
|
|
+ "youhuiquan-yellow": { x: 344, y: 184, w: 50, h: 50 },
|
|
|
+ "gengduo-quan": { x: 274, y: 102, w: 52, h: 52 },
|
|
|
+ "icon-home": { x: 274, y: 102, w: 52, h: 52 },
|
|
|
+ "icon-home-active": { x: 274, y: 102, w: 52, h: 52 },
|
|
|
+ "gengduo-quan": { x: 274, y: 102, w: 52, h: 52 },
|
|
|
+ "icon-home": { x: 7, y: 245, w: 50, h: 50 },
|
|
|
+ "icon-home-active": { x: 60, y: 245, w: 50, h: 50 },
|
|
|
+ "icon-category": { x: 116, y: 245, w: 50, h: 50 },
|
|
|
+ "icon-category-active": { x: 176, y: 245, w: 50, h: 50 },
|
|
|
+ "icon-cart": { x: 238, y: 245, w: 50, h: 50 },
|
|
|
+ "icon-cart-active": { x: 293, y: 245, w: 50, h: 50 },
|
|
|
+ "icon-order": { x: 366, y: 245, w: 50, h: 50 },
|
|
|
+ "icon-order-active": { x: 418, y: 245 , w: 50, h: 50 },
|
|
|
+ "cart-delete": { x: 7, y: 298 , w: 46, h: 52 },//购物车-删除
|
|
|
+ "notice": { x: 216, y: 15 , w: 31, h: 31 },//公告通知
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 进货/供货商专用雪碧图，坐标待设计稿测量后补全 */
|
|
|
+ order: {
|
|
|
+ path: "/hhb/sprite_icon/icon-order.webp?time=26072009",
|
|
|
+ width: 600,
|
|
|
+ height: 600,
|
|
|
+ icons: {
|
|
|
+ "ps-shop": { x: 257, y: 8 , w: 57, h: 52 },//商家配送
|
|
|
+ "ps-shop-active": { x: 190, y: 8 , w: 57, h: 52 },//商家配送-active
|
|
|
+ "ps-paotui": { x: 198, y: 63 , w: 60, h: 52 },//跑腿配送
|
|
|
+ "ps-paotui-active": { x: 129, y: 63 , w: 60, h: 52 },//跑腿配送-active
|
|
|
+ "ps-daodian": { x: 383, y: 8 , w: 48, h: 50 },//到店自取
|
|
|
+ "ps-daodian-active": { x: 324, y: 8 , w: 49, h: 50 },//到店自取-active
|
|
|
+ "ps-kuaidi": { x: 72, y: 63 , w: 49, h: 50 },//快递
|
|
|
+ "ps-kuaidi-active": { x: 12, y: 63 , w: 49, h: 50 },//快递-active
|
|
|
+ "ps-wuliu": { x: 441, y: 8 , w: 67, h: 52 },//物流
|
|
|
+ "ps-wuliu-active": { x: 518, y: 8 , w: 67, h: 52 },//物流-active
|
|
|
+ "huoche": { x: 7, y: 8 , w: 46, h: 50 },//配送说明-小货车
|
|
|
+ "youhuiquan": { x: 267, y: 63 , w: 58, h: 50 },//优惠券
|
|
|
+ "beizhu": { x: 12, y: 8 , w: 50, h: 50 },//订单-备注
|
|
|
+ "shijian": { x: 70, y: 8 , w: 52, h: 52 },//配送时间
|
|
|
+ "shijianduan": { x: 129, y: 8 , w: 52, h: 52 },//配送时间段
|
|
|
+ "dingwei": { x: 339, y: 63 , w: 42, h: 51 },//定位
|
|
|
+ }
|
|
|
+ },
|
|
|
+ member: {
|
|
|
+ path: "/hhb/sprite_icon/icon-member.webp",
|
|
|
+ width: 500,
|
|
|
+ height: 500,
|
|
|
+ icons: {
|
|
|
+ "member-levle1": { x: 0, y: 0, w: 80, h: 80 },
|
|
|
+ "member-levle2": { x: 80, y: 0, w: 80, h: 80 },
|
|
|
+ "member-levle3": { x: 160, y: 0, w: 80, h: 80 },
|
|
|
+ "member-levle4": { x: 240, y: 0, w: 80, h: 80 },
|
|
|
+ "member-levle5": { x: 320, y: 0, w: 80, h: 80 },
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** tabBar 未选中 / 选中 图标名映射（main 雪碧图） */
|
|
|
+export const TAB_SPRITE_MAP = {
|
|
|
+ home: { normal: "dianpu-line", active: "dianpu-fill" },
|
|
|
+ order: { normal: "huoche-lv", active: "huoche-da" },
|
|
|
+ mine: { normal: "gou-quan", active: "qianbao" }
|
|
|
+};
|
|
|
+
|
|
|
+/** @deprecated 兼容旧引用 */
|
|
|
+export const MAIN_INDEX_SPRITE = {
|
|
|
+ width: SPRITE_SHEETS.main.width,
|
|
|
+ height: SPRITE_SHEETS.main.height
|
|
|
+};
|
|
|
+
|
|
|
+/** @deprecated 兼容旧引用 */
|
|
|
+export const MAIN_INDEX_ICONS = SPRITE_SHEETS.main.icons;
|
|
|
+
|
|
|
+function buildIconSheetIndex(sheets) {
|
|
|
+ const index = {};
|
|
|
+ Object.keys(sheets).forEach((sheetKey) => {
|
|
|
+ const icons = sheets[sheetKey].icons || {};
|
|
|
+ Object.keys(icons).forEach((name) => {
|
|
|
+ if (index[name] && index[name] !== sheetKey && process.env.NODE_ENV !== "production") {
|
|
|
+ console.warn(`[sprite] 图标名 "${name}" 在 ${index[name]} 与 ${sheetKey} 中重复，以 ${sheetKey} 为准`);
|
|
|
+ }
|
|
|
+ index[name] = sheetKey;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return index;
|
|
|
+}
|
|
|
+
|
|
|
+const ICON_SHEET_INDEX = buildIconSheetIndex(SPRITE_SHEETS);
|
|
|
+
|
|
|
+function getImgHostBase() {
|
|
|
+ let base = (constant.imgUrl || DEFAULT_IMG_HOST).replace(/\/$/, "");
|
|
|
+ if (base.indexOf("http://") === 0) {
|
|
|
+ base = `https://${base.slice(7)}`;
|
|
|
+ }
|
|
|
+ return base;
|
|
|
+}
|
|
|
+
|
|
|
+function rpx2px(rpx) {
|
|
|
+ if (typeof uni !== "undefined" && typeof uni.upx2px === "function") {
|
|
|
+ return uni.upx2px(rpx);
|
|
|
+ }
|
|
|
+ return rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 计算图标显示宽高与缩放比（支持按宽度 size 或按高度 height 等比缩放）
|
|
|
+ * @param {{ w: number, h: number }} icon 雪碧图坐标中的原始宽高
|
|
|
+ * @param {{ size?: number|string, height?: number|string }} opts
|
|
|
+ * @returns {{ displayW: number, displayH: number, scale: number }}
|
|
|
+ */
|
|
|
+function resolveSpriteDisplaySize(icon, opts = {}) {
|
|
|
+ const heightNum = Number(opts.height);
|
|
|
+ const useHeight = opts.height !== "" && opts.height != null && !Number.isNaN(heightNum) && heightNum > 0;
|
|
|
+
|
|
|
+ let scale;
|
|
|
+ let displayW;
|
|
|
+ let displayH;
|
|
|
+
|
|
|
+ if (useHeight) {
|
|
|
+ displayH = Math.round(heightNum);
|
|
|
+ scale = displayH / icon.h;
|
|
|
+ displayW = Math.round(icon.w * scale);
|
|
|
+ } else {
|
|
|
+ const sizeNum = Number(opts.size);
|
|
|
+ displayW = !Number.isNaN(sizeNum) && sizeNum > 0 ? sizeNum : 48;
|
|
|
+ scale = displayW / icon.w;
|
|
|
+ displayH = Math.round(icon.h * scale);
|
|
|
+ }
|
|
|
+
|
|
|
+ return { displayW, displayH, scale };
|
|
|
+}
|
|
|
+
|
|
|
+export function resolveSprite(name, sheetKey = "") {
|
|
|
+ if (!name) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ let key = sheetKey;
|
|
|
+ if (!key) {
|
|
|
+ key = ICON_SHEET_INDEX[name] || DEFAULT_SHEET_KEY;
|
|
|
+ }
|
|
|
+ const sheet = SPRITE_SHEETS[key];
|
|
|
+ if (!sheet) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ const icon = (sheet.icons || {})[name];
|
|
|
+ if (!icon) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return { sheetKey: key, sheet, icon };
|
|
|
+}
|
|
|
+
|
|
|
+export function getSpriteSheetUrl(sheetKey = DEFAULT_SHEET_KEY) {
|
|
|
+ const sheet = SPRITE_SHEETS[sheetKey];
|
|
|
+ if (!sheet) {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ return `${getImgHostBase()}${sheet.path}`;
|
|
|
+}
|
|
|
+
|
|
|
+export function spriteImageStyle(name, size = 48, sheetKey = "", height = "") {
|
|
|
+ const resolved = resolveSprite(name, sheetKey);
|
|
|
+ if (!resolved) {
|
|
|
+ if (process.env.NODE_ENV !== "production") {
|
|
|
+ console.warn(`[sprite-icon] 未找到图标: name=${name}${sheetKey ? ` sheet=${sheetKey}` : ""}`);
|
|
|
+ }
|
|
|
+ return { wrap: "", inner: "", image: "" };
|
|
|
+ }
|
|
|
+ const { sheet, icon } = resolved;
|
|
|
+ const { displayW, displayH, scale } = resolveSpriteDisplaySize(icon, { size, height });
|
|
|
+ const sheetW = sheet.width * scale;
|
|
|
+ const sheetH = sheet.height * scale;
|
|
|
+ const left = -rpx2px(icon.x * scale);
|
|
|
+ const top = -rpx2px(icon.y * scale);
|
|
|
+ const sheetWPx = rpx2px(sheetW);
|
|
|
+ const sheetHPx = rpx2px(sheetH);
|
|
|
+ return {
|
|
|
+ wrap: `position:relative;width:${displayW}rpx;height:${displayH}rpx;overflow:hidden;line-height:0;`,
|
|
|
+ inner: `position:absolute;left:${left}px;top:${top}px;width:${sheetWPx}px;height:${sheetHPx}px;`,
|
|
|
+ image: "width:100%;height:100%;display:block;"
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+export function spriteStyle(name, size = 48, sheetKey = "", height = "") {
|
|
|
+ const resolved = resolveSprite(name, sheetKey);
|
|
|
+ if (!resolved) {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ const { sheetKey: key, sheet, icon } = resolved;
|
|
|
+ const { displayW, displayH, scale } = resolveSpriteDisplaySize(icon, { size, height });
|
|
|
+ const sheetW = sheet.width * scale;
|
|
|
+ const sheetH = sheet.height * scale;
|
|
|
+ const posX = rpx2px(icon.x * scale);
|
|
|
+ const posY = rpx2px(icon.y * scale);
|
|
|
+ const sheetWPx = rpx2px(sheetW);
|
|
|
+ const sheetHPx = rpx2px(sheetH);
|
|
|
+ const url = getSpriteSheetUrl(key);
|
|
|
+ return [
|
|
|
+ `width:${displayW}rpx`,
|
|
|
+ `height:${displayH}rpx`,
|
|
|
+ `background-image:url(${url})`,
|
|
|
+ `background-size:${sheetWPx}px ${sheetHPx}px`,
|
|
|
+ `background-position:-${posX}px -${posY}px`,
|
|
|
+ "background-repeat:no-repeat",
|
|
|
+ "display:inline-block",
|
|
|
+ "flex-shrink:0",
|
|
|
+ "vertical-align:middle"
|
|
|
+ ].join(";");
|
|
|
+}
|
|
|
+
|
|
|
+export function getMainIndexSpriteUrl() {
|
|
|
+ return getSpriteSheetUrl(DEFAULT_SHEET_KEY);
|
|
|
+}
|
|
|
+
|
|
|
+export function mainIndexSpriteImageStyle(name, size = 48, height = "") {
|
|
|
+ return spriteImageStyle(name, size, DEFAULT_SHEET_KEY, height);
|
|
|
+}
|
|
|
+
|
|
|
+export function mainIndexSpriteStyle(name, size = 48, height = "") {
|
|
|
+ return spriteStyle(name, size, DEFAULT_SHEET_KEY, height);
|
|
|
+}
|
