@shijiu/jsview-vue-samples 2.2.35 → 2.2.128

package/MetroWidgetDemos/MassiveItems/ContentItem.vue

@@ -0,0 +1,388 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-06-10 14:17:17
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-11 18:20:58
+ * @Description: file content
+-->
+<script setup>
+import posterHolder from "../PerformanceTest/assets/holder_logo.png";
+import couponLeft from "../PerformanceTest/assets/coupon_left.png";
+import couponRight from "../PerformanceTest/assets/coupon_right.png";
+import couponMid from "../PerformanceTest/assets/coupon_mid.png";
+import borderLeft from "../PerformanceTest/assets/line_left.png";
+import borderMid from "../PerformanceTest/assets/line_mid.png";
+import borderRight from "../PerformanceTest/assets/line_right.png";
+import { ref, computed } from "vue";
+
+const picUrl = "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg";
+
+const props = defineProps({
+  data: Object,
+  // query: Object,
+  // onEdge: Function,
+  // onAction: Object,
+});
+
+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; //base width;
+  if (props.data.soldTotal >= 10000) {
+    let text = parseInt(props.data.soldTotal / 10000) + "";
+    width += text.length * 12 + 22;
+  } else {
+    width += (props.data.soldTotal + "").length * 12;
+  }
+  return width;
+});
+
+const soldTotalText = computed(() => {
+  let text = "";
+  if (props.data.soldTotal >= 10000) {
+    text = parseInt(props.data.soldTotal / 10000) + "万";
+  } else {
+    text = props.data.soldTotal;
+  }
+  return text;
+});
+</script>
+
+<template>
+  <div
+    class="frame-background"
+    :style="{
+      transform: focusTransform,
+    }"
+  >
+    <div class="poster-holder">
+      <div
+        :style="{
+          width: 107,
+          height: 23,
+          left: 53,
+          top: 95,
+          backgroundImage: posterHolder,
+        }"
+      />
+    </div>
+    <div
+      class="poster"
+      :style="{
+        backgroundImage: `url(${picUrl})`,
+      }"
+    />
+    <div class="title-font title-layout">
+      {{ data.index + data.name }}
+    </div>
+    <div
+      :style="{
+        height: 24,
+        left: 13,
+        top: 256,
+        width: savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
+      />
+      <div
+        :style="{
+          left: 5,
+          width: savePrizeWidth - 11,
+          height: 24,
+          backgroundImage: couponMid,
+        }"
+      />
+      <div
+        :style="{
+          left: savePrizeWidth - 6,
+          width: 5,
+          height: 24,
+          backgroundImage: couponRight,
+        }"
+      />
+      <div
+        class="ticket-text"
+        :style="{
+          width: savePrizeWidth,
+        }"
+      >
+        {{ `${data.savePrize}元券` }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: 256,
+        left: 27 + savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
+      />
+      <div
+        :style="{
+          left: 7,
+          width: soldTotalWidth - 13,
+          height: 25,
+          backgroundImage: borderMid,
+        }"
+      />
+      <div
+        :style="{
+          left: soldTotalWidth - 7,
+          width: 7,
+          height: 25,
+          backgroundImage: borderRight,
+        }"
+      />
+      <div
+        class="sold-text"
+        :style="{
+          width: soldTotalWidth,
+        }"
+      >
+        {{ `已售${soldTotalText}件` }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        height: 24,
+        left: 13,
+        top: 270,
+        width: savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
+      />
+      <div
+        :style="{
+          left: 5,
+          width: savePrizeWidth - 11,
+          height: 24,
+          backgroundImage: couponMid,
+        }"
+      />
+      <div
+        :style="{
+          left: savePrizeWidth - 6,
+          width: 5,
+          height: 24,
+          backgroundImage: couponRight,
+        }"
+      />
+      <div
+        class="ticket-text"
+        :style="{
+          width: savePrizeWidth,
+        }"
+      >
+        {{ `${data.savePrize}元券` }}
+      </div>
+    </div>
+    <div
+      :style="{
+        top: 270,
+        left: 27 + savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
+      />
+      <div
+        :style="{
+          left: 7,
+          width: soldTotalWidth - 13,
+          height: 25,
+          backgroundImage: borderMid,
+        }"
+      />
+      <div
+        :style="{
+          left: soldTotalWidth - 7,
+          width: 7,
+          height: 25,
+          backgroundImage: borderRight,
+        }"
+      />
+      <div
+        class="sold-text"
+        :style="{
+          width: soldTotalWidth,
+        }"
+      >
+        {{ `已售${soldTotalText}件` }}
+      </div>
+    </div>
+
+    <div
+      :style="{
+        height: 24,
+        left: 13,
+        top: 280,
+        width: savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 5, height: 24, backgroundImage: couponLeft }"
+      />
+      <div
+        :style="{
+          left: 5,
+          width: savePrizeWidth - 11,
+          height: 24,
+          backgroundImage: couponMid,
+        }"
+      />
+      <div
+        :style="{
+          left: savePrizeWidth - 6,
+          width: 5,
+          height: 24,
+          backgroundImage: couponRight,
+        }"
+      />
+      <div
+        class="ticket-text"
+        :style="{
+          width: savePrizeWidth,
+        }"
+      >
+        {{ `${data.savePrize}元券` }}
+      </div>
+    </div>
+    <div
+      :style="{
+        top: 280,
+        left: 27 + savePrizeWidth,
+      }"
+    >
+      <div
+        :style="{ width: 7, height: 25, backgroundImage: borderLeft }"
+      />
+      <div
+        :style="{
+          left: 7,
+          width: soldTotalWidth - 13,
+          height: 25,
+          backgroundImage: borderMid,
+        }"
+      />
+      <div
+        :style="{
+          left: soldTotalWidth - 7,
+          width: 7,
+          height: 25,
+          backgroundImage: borderRight,
+        }"
+      />
+      <div
+        class="sold-text"
+        :style="{
+          width: soldTotalWidth,
+        }"
+      >
+        {{ `已售${soldTotalText}件` }}
+      </div>
+    </div>
+
+    <div class="prize-title-font prize-title-layout">券后</div>
+    <div class="prize-font">
+      {{ `¥${data.prize - data.savePrize}` }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.frame-background {
+  width: 213;
+  height: 337;
+  border-radius: 10;
+  background-color: #f7f7f4;
+  transition: transform 0.2s linear;
+}
+
+.poster-holder {
+  width: 213;
+  height: 213;
+  border-radius: 10 10 0 0;
+  background-color: #cfcac6;
+}
+.poster {
+  width: 213;
+  height: 213;
+  border-radius: 7 7 0 0;
+}
+
+.title-font {
+  font-size: 21;
+  color: #73665c;
+  line-height: 29;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+.title-layout {
+  top: 221;
+  left: 13;
+  width: 193;
+  height: 29;
+}
+.ticket-text {
+  height: 24;
+  color: #ffffff;
+  font-size: 16;
+  text-align: center;
+  line-height: 24;
+}
+.sold-text {
+  height: 25;
+  color: #ff7a00;
+  font-size: 20;
+  text-align: center;
+  line-height: 25;
+}
+.prize-title-layout {
+  width: 35;
+  height: 24;
+  top: 296;
+  left: 13;
+}
+.prize-title-font {
+  color: #de2825;
+  text-align: center;
+  font-size: 17;
+  line-height: 24;
+}
+.prize-font {
+  top: 289;
+  left: 53;
+  width: 158; /*213 - 55*/
+  height: 37;
+  line-height: 37;
+  font-size: 28;
+  color: #de2825;
+}
+</style>

package/MetroWidgetDemos/MassiveItems/Item.vue

@@ -0,0 +1,203 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 15:33:54
+ * @Description: file content
+-->
+<script setup>
+import { ref, onMounted } from "vue";
+import borderLeft from "../PerformanceTest/assets/line_left.png";
+import borderMid from "../PerformanceTest/assets/line_mid.png";
+import borderRight from "../PerformanceTest/assets/line_right.png";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  pre: String,
+});
+
+console.log("Massive-MetroItem item created ", props.pre, props.data.content);
+
+const focused = ref(false);
+
+// 自身的焦点状态自己记录, 通过回调来改变
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+
+// 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+
+onMounted(()=>{
+  console.log("Massive-MetroItem item mounted ", props.pre, props.data.content);
+})
+
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transform: focused ? 'scale3d(1.2, 1.2, 1.2)' : '',
+      transition: 'transform 0.2s linear',
+    }"
+  >
+    <div
+      v-if="focused"
+      :style="{
+        left: -2,
+        top: -2,
+        width: data.width + 4,
+        height: data.height + 4,
+        backgroundColor: '#FF0000',
+      }"
+    ></div>
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+      }"
+    >
+      {{ data.content }}
+    </div>
+
+    <div class="box1">
+      <div class="border-left" :style="{ backgroundImage: borderLeft }"></div>
+      <div
+        class="border-mid"
+        :style="{
+          backgroundImage: borderMid,
+        }"
+      ></div>
+      <div
+        class="border-right"
+        :style="{
+          backgroundImage: borderRight,
+        }"
+      ></div>
+      <div class="prize-title-font prize-title-layout">券后</div>
+    </div>
+
+    <div class="box2">
+      <div class="border-left" :style="{ backgroundImage: borderLeft }"></div>
+      <div
+        class="border-mid"
+        :style="{
+          backgroundImage: borderMid,
+        }"
+      ></div>
+      <div
+        class="border-right"
+        :style="{
+          backgroundImage: borderRight,
+        }"
+      ></div>
+      <div class="prize-title-font prize-title-layout">券后</div>
+    </div>
+
+    <div class="sold-text">
+      {{ `已售12件` }}
+    </div>
+    <div class="prize-font">
+      {{ `¥40` }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.box1 {
+  left: 5;
+  top: 40;
+}
+
+.box2 {
+  left: 45;
+  top: 40;
+}
+
+.border-left {
+  width: 7;
+  height: 25;
+}
+.border-mid {
+  left: 7;
+  width: 37;
+  height: 25;
+}
+.border-right {
+  left: 43;
+  width: 7;
+  height: 25;
+}
+.frame-background {
+  width: 213;
+  height: 337;
+  border-radius: 10;
+  background-color: #f7f7f4;
+  transition: transform 0.2s linear;
+}
+
+.poster-holder {
+  width: 213;
+  height: 213;
+  border-radius: 10 10 0 0;
+  background-color: #cfcac6;
+}
+.poster {
+  width: 213;
+  height: 213;
+  border-radius: 7 7 0 0;
+}
+
+.title-layout {
+  width: 193;
+  height: 29;
+}
+.ticket-text {
+  height: 24;
+  color: #ffffff;
+  font-size: 16;
+  text-align: center;
+  line-height: 24;
+}
+.sold-text {
+  top: 60;
+  width: 100;
+  height: 25;
+  color: #ff7a00;
+  font-size: 20;
+  text-align: center;
+  line-height: 25;
+}
+.prize-title-layout {
+  width: 35;
+  height: 24;
+  left: 13;
+}
+.prize-title-font {
+  color: #de2825;
+  text-align: center;
+  font-size: 17;
+  line-height: 24;
+}
+.prize-font {
+  left: 50;
+  width: 158; /*213 - 55*/
+  height: 37;
+  line-height: 37;
+  font-size: 28;
+  color: #de2825;
+}
+</style>

package/MetroWidgetDemos/MassiveItems/WidgetItem.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { HORIZONTAL, VERTICAL, MetroWidget, useFocusHub } from "jsview";
+import { shallowRef } from "vue";
+import Item from "./Item.vue";
+
+const props = defineProps({
+  data: Object,
+  onItemEdge: Function,
+  onAction: Object,
+});
+const focusHub = useFocusHub();
+const mwRef = shallowRef(null);
+
+const measures = (item) => {
+  return item;
+};
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 42; i++) {
+    data.push({
+      width: 100,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      content: i,
+      color: randomColor(),
+    });
+  }
+  return data;
+};
+const onFocus = (rect) => {
+  /** 重要代码: 参数rect为父MetroWidget传递的, 焦点过来的区域
+   *  因此需要调用setEnterFocusRect来设置焦点进入区域, 以寻找最近的焦点
+   */
+  mwRef.value?.setEnterFocusRect(rect);
+  focusHub.setFocus(props.data.name);
+};
+const onBlur = () => {
+  //onBlur时需要返还焦点给父MetroWidget
+  focusHub.returnFocusToParent();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+
+const onScroll = () => {
+  console.log("testtest on scroll", props.name);
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 900,
+      height: 50,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ data.name }}
+  </div>
+  <!-- 重要代码: sendFocusRectEvent可以让MetroWidget的item在获焦时发送事件, 通知父的MetroWidget进行滚动 -->
+  <!-- 重要代码: onItemEdge直接作为onEdge回调, 既子MetroWidget到达边缘时触发父的onItemEdge -->
+  <metro-widget
+    ref="mwRef"
+    :onScroll="onScroll"
+    :name="data.name"
+    :top="30"
+    :width="data.width"
+    :height="data.height"
+    :provideData="provideData"
+    :direction="VERTICAL"
+    :padding="{
+      left: 30,
+      right: 30,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="measures"
+    :onEdge="onItemEdge"
+    :sendFocusRectEvent="false"
+    :enableItemRenderBreak="true"
+    :placeHolderSetting="{
+      backgroundColor: 'rgba(78,105,127, 0.8)',
+      focusBackgroundColor: '#770088aa',
+      borderRadius: 10,
+      gap: 10,
+    }"
+    :keepTraceRange="2"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" :pre="props.data.name" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/MassiveItems/data.js

@@ -0,0 +1,17 @@
+let data1 = [];
+
+// 添加300个模拟数据
+for (let i = 0; i < 40; i++) {
+  data1.push({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) +
+      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 50000)}`,
+    pictUrl:
+      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
+  });
+}
+
+export { data1 };