create-jsview 2.1.367-test.0 → 2.1.428

package/template-vue-vite/dist-test-jsview-chunk/js/App.d35f431e.js

@@ -0,0 +1,524 @@
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { a as ref, c as computed, o as openBlock, e as createElementBlock, f as createBaseVNode, g as normalizeStyle, u as unref, G as toDisplayString, s as shallowRef, b as resolveComponent, k as createVNode, P as normalizeClass, F as Fragment, E as onBeforeUnmount, t as onMounted, A as createBlock, l as withCtx } from "./vue.889a9b8b.js";
+import { a as useRouter, u as useFocusHub, c as bridge, V as VERTICAL, g as _sfc_main$F, E as EdgeDirection } from "./jsview-vue-entry.415721d8.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+let data1 = [];
+for (let i = 0; i < 40; i++) {
+  data1.push({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) + 200}`,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 5e4)}`,
+    pictUrl: "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg"
+  });
+}
+let data2 = [];
+for (let i = 0; i < 50; i++) {
+  data2.push({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) + 200}`,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 5e4)}`,
+    pictUrl: "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg"
+  });
+}
+let data3 = [];
+for (let i = 0; i < 30; i++) {
+  data3.push({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) + 200}`,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 5e4)}`,
+    pictUrl: "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg"
+  });
+}
+const posterHolder = "" + new URL("../assets/holder_logo.5d13253c.png", import.meta.url).href;
+const couponLeft = "" + new URL("../assets/coupon_left.c9f544cb.png", import.meta.url).href;
+const couponRight = "" + new URL("../assets/coupon_right.248ee7dc.png", import.meta.url).href;
+const couponMid = "" + new URL("../assets/coupon_mid.ef262879.png", import.meta.url).href;
+const borderLeft = "" + new URL("../assets/line_left.36cc4bd9.png", import.meta.url).href;
+const borderMid = "" + new URL("../assets/line_mid.21f25bbe.png", import.meta.url).href;
+const borderRight = "" + new URL("../assets/line_right.3a4bbae6.png", import.meta.url).href;
+const ContentItem_vue_vue_type_style_index_0_scoped_2f66a7f2_lang = "";
+const _sfc_main$2 = {
+  __name: "ContentItem",
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const focused = ref(false);
+    const onFocus = () => {
+      focused.value = true;
+    };
+    const onBlur = () => {
+      focused.value = false;
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    const focusTransform = computed(() => {
+      return focused.value ? "scale3d(1.2, 1.2, 1)" : null;
+    });
+    const savePrizeWidth = computed(() => {
+      return 10 * props.data.savePrize.length + 26;
+    });
+    const soldTotalWidth = computed(() => {
+      let width = 44 + 22;
+      if (props.data.soldTotal >= 1e4) {
+        let text = parseInt(props.data.soldTotal / 1e4) + "";
+        width += text.length * 12 + 22;
+      } else {
+        width += (props.data.soldTotal + "").length * 12;
+      }
+      return width;
+    });
+    const soldTotalText = computed(() => {
+      let text = "";
+      if (props.data.soldTotal >= 1e4) {
+        text = parseInt(props.data.soldTotal / 1e4) + "万";
+      } else {
+        text = props.data.soldTotal;
+      }
+      return text;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "frame-background",
+        style: normalizeStyle({
+          transform: unref(focusTransform)
+        })
+      }, [
+        createBaseVNode("div", { class: "poster-holder" }, [
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              width: 107,
+              height: 23,
+              left: 53,
+              top: 95,
+              backgroundImage: unref(posterHolder)
+            })
+          }, null, 4)
+        ]),
+        createBaseVNode("div", {
+          class: "poster",
+          style: normalizeStyle({
+            backgroundImage: `url(${__props.data.pictUrl})`
+          })
+        }, null, 4),
+        createBaseVNode("div", { class: "title-font title-layout" }, toDisplayString(__props.data.index + __props.data.name), 1),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            height: 24,
+            left: 13,
+            top: 256,
+            width: unref(savePrizeWidth)
+          })
+        }, [
+          createBaseVNode("div", {
+            style: normalizeStyle({ width: 5, height: 24, backgroundImage: unref(couponLeft) })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: 5,
+              width: unref(savePrizeWidth) - 11,
+              height: 24,
+              backgroundImage: unref(couponMid)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: unref(savePrizeWidth) - 6,
+              width: 5,
+              height: 24,
+              backgroundImage: unref(couponRight)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            class: "ticket-text",
+            style: normalizeStyle({
+              width: unref(savePrizeWidth)
+            })
+          }, toDisplayString(`${__props.data.savePrize}元券`), 5)
+        ], 4),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            top: 256,
+            left: 27 + unref(savePrizeWidth)
+          })
+        }, [
+          createBaseVNode("div", {
+            style: normalizeStyle({ width: 7, height: 25, backgroundImage: unref(borderLeft) })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: 7,
+              width: unref(soldTotalWidth) - 13,
+              height: 25,
+              backgroundImage: unref(borderMid)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: unref(soldTotalWidth) - 7,
+              width: 7,
+              height: 25,
+              backgroundImage: unref(borderRight)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            class: "sold-text",
+            style: normalizeStyle({
+              width: unref(soldTotalWidth)
+            })
+          }, toDisplayString(`已售${unref(soldTotalText)}件`), 5)
+        ], 4),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            height: 24,
+            left: 13,
+            top: 270,
+            width: unref(savePrizeWidth)
+          })
+        }, [
+          createBaseVNode("div", {
+            style: normalizeStyle({ width: 5, height: 24, backgroundImage: unref(couponLeft) })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: 5,
+              width: unref(savePrizeWidth) - 11,
+              height: 24,
+              backgroundImage: unref(couponMid)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: unref(savePrizeWidth) - 6,
+              width: 5,
+              height: 24,
+              backgroundImage: unref(couponRight)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            class: "ticket-text",
+            style: normalizeStyle({
+              width: unref(savePrizeWidth)
+            })
+          }, toDisplayString(`${__props.data.savePrize}元券`), 5)
+        ], 4),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            top: 270,
+            left: 27 + unref(savePrizeWidth)
+          })
+        }, [
+          createBaseVNode("div", {
+            style: normalizeStyle({ width: 7, height: 25, backgroundImage: unref(borderLeft) })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: 7,
+              width: unref(soldTotalWidth) - 13,
+              height: 25,
+              backgroundImage: unref(borderMid)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: unref(soldTotalWidth) - 7,
+              width: 7,
+              height: 25,
+              backgroundImage: unref(borderRight)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            class: "sold-text",
+            style: normalizeStyle({
+              width: unref(soldTotalWidth)
+            })
+          }, toDisplayString(`已售${unref(soldTotalText)}件`), 5)
+        ], 4),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            height: 24,
+            left: 13,
+            top: 280,
+            width: unref(savePrizeWidth)
+          })
+        }, [
+          createBaseVNode("div", {
+            style: normalizeStyle({ width: 5, height: 24, backgroundImage: unref(couponLeft) })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: 5,
+              width: unref(savePrizeWidth) - 11,
+              height: 24,
+              backgroundImage: unref(couponMid)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: unref(savePrizeWidth) - 6,
+              width: 5,
+              height: 24,
+              backgroundImage: unref(couponRight)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            class: "ticket-text",
+            style: normalizeStyle({
+              width: unref(savePrizeWidth)
+            })
+          }, toDisplayString(`${__props.data.savePrize}元券`), 5)
+        ], 4),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            top: 280,
+            left: 27 + unref(savePrizeWidth)
+          })
+        }, [
+          createBaseVNode("div", {
+            style: normalizeStyle({ width: 7, height: 25, backgroundImage: unref(borderLeft) })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: 7,
+              width: unref(soldTotalWidth) - 13,
+              height: 25,
+              backgroundImage: unref(borderMid)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            style: normalizeStyle({
+              left: unref(soldTotalWidth) - 7,
+              width: 7,
+              height: 25,
+              backgroundImage: unref(borderRight)
+            })
+          }, null, 4),
+          createBaseVNode("div", {
+            class: "sold-text",
+            style: normalizeStyle({
+              width: unref(soldTotalWidth)
+            })
+          }, toDisplayString(`已售${unref(soldTotalText)}件`), 5)
+        ], 4),
+        createBaseVNode("div", { class: "prize-title-font prize-title-layout" }, "券后"),
+        createBaseVNode("div", { class: "prize-font" }, toDisplayString(`¥${__props.data.prize - __props.data.savePrize}`), 1)
+      ], 4);
+    };
+  }
+};
+const styleSheetsContent$2 = { "2f66a7f2": { ".frame-background": '{"width":213,"height":337,"borderRadius":"10","backgroundColor":"#f7f7f4","transition":"transform 0.2s linear"}', ".poster-holder": '{"width":213,"height":213,"borderRadius":"10 10 0 0","backgroundColor":"#cfcac6"}', ".poster": '{"width":213,"height":213,"borderRadius":"7 7 0 0"}', ".title-font": '{"fontSize":21,"color":"#73665c","lineHeight":29,"overflow":"hidden","whiteSpace":"nowrap","textOverflow":"ellipsis","textAlign":"center"}', ".title-layout": '{"top":221,"left":13,"width":193,"height":29}', ".ticket-text": '{"height":24,"color":"#ffffff","fontSize":16,"textAlign":"center","lineHeight":24}', ".sold-text": '{"height":25,"color":"#ff7a00","fontSize":20,"textAlign":"center","lineHeight":25}', ".prize-title-layout": '{"width":35,"height":24,"top":296,"left":13}', ".prize-title-font": '{"color":"#de2825","textAlign":"center","fontSize":17,"lineHeight":24}', ".prize-font": '{"top":289,"left":53,"width":158,"height":37,"lineHeight":37,"fontSize":28,"color":"#de2825"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$2);
+const Item = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2f66a7f2"]]);
+const MyTab_vue_vue_type_style_index_0_scoped_6feff360_lang = "";
+const _sfc_main$1 = {
+  __name: "MyTab",
+  props: {
+    name: String,
+    onEdgeDown: Function,
+    onItemFocus: Function
+  },
+  setup(__props) {
+    const props = __props;
+    let activeId = shallowRef(0);
+    let focused = shallowRef(false);
+    const tab1Class = computed(() => {
+      if (activeId.value == 0) {
+        return focused.value ? "text-active item-focused" : "text-active item-normal";
+      } else {
+        return "text-normal item-normal";
+      }
+    });
+    const tab2Class = computed(() => {
+      if (activeId.value == 1) {
+        return focused.value ? "text-active item-focused" : "text-active item-normal";
+      } else {
+        return "text-normal item-normal";
+      }
+    });
+    const tab3Class = computed(() => {
+      if (activeId.value == 2) {
+        return focused.value ? "text-active item-focused" : "text-active item-normal";
+      } else {
+        return "text-normal item-normal";
+      }
+    });
+    const onKeyDown = (ev) => {
+      switch (ev.keyCode) {
+        case 37:
+          activeId.value--;
+          if (activeId.value < 0) {
+            activeId.value = 2;
+          }
+          props.onItemFocus(activeId.value);
+          break;
+        case 39:
+          activeId.value++;
+          if (activeId.value > 2) {
+            activeId.value = 0;
+          }
+          props.onItemFocus(activeId.value);
+          break;
+        case 40:
+          props.onEdgeDown();
+          break;
+      }
+    };
+    const onFocus = () => {
+      focused.value = true;
+    };
+    const onBlur = () => {
+      focused.value = false;
+    };
+    const actionDefines = {
+      onBlur,
+      onFocus,
+      onKeyDown
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_component_jsv_focus_block, {
+          name: props.name,
+          onAction: actionDefines
+        }, null, 8, ["name"]),
+        createBaseVNode("div", {
+          class: normalizeClass(unref(tab1Class))
+        }, "Tab1", 2),
+        createBaseVNode("div", {
+          class: normalizeClass(unref(tab2Class)),
+          style: { left: 220 }
+        }, "Tab2", 2),
+        createBaseVNode("div", {
+          class: normalizeClass(unref(tab3Class)),
+          style: { left: 440 }
+        }, "Tab3", 2)
+      ], 64);
+    };
+  }
+};
+const styleSheetsContent$1 = { "6feff360": { ".text-normal": '{"width":200,"height":50,"lineHeight":50,"color":"#444444","fontSize":25,"textAlign":"center"}', ".text-active": '{"width":200,"height":50,"lineHeight":50,"color":"#ffffff","fontSize":25,"textAlign":"center"}', ".item-focused": '{"width":200,"height":50,"backgroundColor":"#008080"}', ".item-normal": '{"width":200,"height":50,"backgroundColor":"#87CECB"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$1);
+const MyTab = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6feff360"]]);
+const App_vue_vue_type_style_index_0_scoped_390a906c_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const router = useRouter();
+    const focusHub = useFocusHub();
+    let contentData = data1;
+    const mwRef = shallowRef(null);
+    const onKeyDown = (ev) => {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 1e4) {
+        router.go(-1);
+        return true;
+      }
+      return false;
+    };
+    const provideData = () => {
+      return contentData;
+    };
+    const measures = () => {
+      return {
+        width: 227,
+        height: 351,
+        focusable: true
+      };
+    };
+    const onFocus = () => {
+      focusHub.setFocus("mw");
+    };
+    const onWidgetEdge = (edge) => {
+      if (edge.direction === EdgeDirection.top) {
+        focusHub.setFocus("tab");
+      }
+    };
+    const onTabEdge = () => {
+      focusHub.setFocus("mw");
+    };
+    const onItemFocus = (id) => {
+      switch (id) {
+        case 0:
+          contentData = data1;
+          break;
+        case 1:
+          contentData = data2;
+          break;
+        case 2:
+          contentData = data3;
+          break;
+      }
+      mwRef.value?.refreshData(true);
+    };
+    onBeforeUnmount(() => {
+    });
+    onMounted(() => {
+      bridge.notifyPageLoaded();
+    });
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        ref: "rootNode",
+        autoFocus: "",
+        onKeyDown,
+        onFocus
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", { class: "rootSize" }, [
+            createBaseVNode("div", { style: { left: 50, top: 50 } }, [
+              createVNode(MyTab, {
+                name: "tab",
+                onEdgeDown: onTabEdge,
+                onItemFocus
+              })
+            ]),
+            createBaseVNode("div", { class: "widgetPos" }, [
+              createVNode(unref(_sfc_main$F), {
+                name: "mw",
+                ref_key: "mwRef",
+                ref: mwRef,
+                provideData,
+                width: 1253,
+                height: 600,
+                padding: { left: 26, top: 36, right: 26, bottom: 36 },
+                direction: unref(VERTICAL),
+                measures,
+                onEdge: onWidgetEdge
+              }, {
+                renderItem: withCtx(({ data, query, onEdge, onAction }) => [
+                  createVNode(Item, {
+                    data,
+                    query,
+                    onEdge,
+                    onAction
+                  }, null, 8, ["data", "query", "onEdge", "onAction"])
+                ]),
+                _: 1
+              }, 8, ["direction"])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+};
+const styleSheetsContent = { "390a906c": { ".rootSize": '{"top":0}', ".widgetPos": '{"top":120,"left":50}', ".focusPos": '{"top":10,"left":10}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-390a906c"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.d35f431e.js.map
+
+/*jsvmd5:6b4ea8254d59a43c5f810e23c12c69eb*/