@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/DivMetroPerformance/App.vue

@@ -1,157 +0,0 @@
-<script>
-import { Options, Vue } from "vue-class-component";
-import { data1, data2, data3 } from "./data";
-import GridPlate from "./utils/GridPlate.vue";
-import Item from "./components/ContentItem.vue";
-import MyTab from "./components/MyTab.vue";
-import { useFocusHub } from "jsview";
-
-@Options({
-  components: {
-    GridPlate,
-    Item,
-    MyTab,
-  },
-})
-class App extends Vue {
-  constructor(props) {
-    super(props);
-    this.focusNode = null;
-    this.contentData = data1;
-    this.myId = 0;
-    this.focusStyle = {};
-    this.requestDataTime = 0;
-
-    window.sStyleChangeCount = 0;
-    window.sStyleChangeCost = 0;
-    window.sStyleTextChangeCost = 0;
-
-    window.sStylePropCount = 0;
-    window.sStylePropCost = 0;
-
-    console.log("App created");
-  }
-
-  setup() {
-    return {
-      focusHub: useFocusHub()
-    }
-  }
-
-  onKeyDown(ev) {
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      return true;
-    }
-    return false;
-  }
-
-  getMeasures() {
-    return {
-      width: 227,
-      height: 351,
-      focusable: true,
-    };
-  }
-  onFocus() {
-    console.log("App onFocus", this.$refs.rootNode);
-  }
-  onItemFocus(id) {
-    if (this.requestDataTime != 0) {
-      clearTimeout(this.requestDataTime);
-      this.requestDataTime = 0;
-    }
-    // this.requestDataTime = setTimeout(()=>{
-    if (!window.JsvDebugTimeToken) {
-      window.JsvDebugTimeToken = {
-        start: 0,
-      };
-    }
-    window.JsvDebugTimeToken.start = Date.now();
-    console.log(
-      "JsvTestTime onItemFocus start time=" + window.JsvDebugTimeToken.start
-    );
-
-    window.sStyleChangeCount = 0;
-    window.sStyleChangeCost = 0;
-    window.sStyleTextChangeCost = 0;
-    window.sStylePropCount = 0;
-    window.sStylePropCost = 0;
-
-    switch (id) {
-      case 0:
-        this.contentData = data1;
-        break;
-      case 1:
-        this.contentData = data2;
-        break;
-      case 2:
-        this.contentData = data3;
-        break;
-    }
-    this.myId = id;
-    // }, 0);
-  }
-
-  beforeUnmount() {
-    if (this.requestDataTime != 0) {
-      clearTimeout(this.requestDataTime);
-      this.requestDataTime = 0;
-    }
-  }
-
-  mounted() {
-    this.focusHub.setFocus("tab");
-    window.jJsvRuntimeBridge?.notifyPageLoaded();
-  }
-}
-
-export default App;
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="rootNode"
-    autoFocus
-    :onKeyDown="onKeyDown"
-    :onFocus="onFocus"
-  >
-    <div class="rootSize">
-      <div :style="{ left: 50, top: 50 }">
-        <my-tab name="tab" :onItemFocus="onItemFocus" />
-      </div>
-
-      <div class="widgetPos">
-        <grid-plate
-          name="simpleWidget"
-          :key="myId"
-          :data="contentData"
-          :width="1253"
-          :height="600"
-          :measures="getMeasures"
-        >
-          <template #renderItem="{ data }">
-            <Item :data="data" />
-          </template>
-        </grid-plate>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.rootSize {
-  top: 0;
-}
-
-.widgetPos {
-  top: 120;
-  left: 50;
-}
-
-.focusPos {
-  top: 10;
-  left: 10;
-}
-</style>

package/DivMetroPerformance/Item.vue

@@ -1,58 +0,0 @@
-<script>
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  methods: {
-    onFocus() {
-      this.focus = true;
-    },
-    onBlur() {
-      this.focus = false;
-    },
-    onClick() {
-      console.log("item click");
-    },
-    getStyle() {
-      const width = this.focus
-        ? (this.data.blocks.w - 10) * (1 / 0.8)
-        : this.data.blocks.w - 10;
-      const height = this.focus
-        ? (this.data.blocks.h - 10) * (1 / 0.8)
-        : this.data.blocks.h - 10;
-      const posx = this.focus ? (this.data.blocks.w - 10 - width) / 2 : 0;
-      const posy = this.focus ? (this.data.blocks.h - 10 - height) / 2 : 0;
-      return {
-        left: posx,
-        top: posy,
-        width: width,
-        height: height,
-        color: "#FFFFFF",
-        backgroundColor: this.focus ? "#FF0000" : this.data.color,
-      };
-    },
-  },
-  data() {
-    return {
-      focus: false,
-      anim: null,
-    };
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <div :style="{ ...getStyle() }">
-    {{ data.content }}
-  </div>
-</template>
-
-<style scoped></style>

package/DivMetroPerformance/components/ContentItem.vue

@@ -1,384 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-06-10 14:17:17
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-18 14:14:05
- * @Description: file content
--->
-<script>
-import { Options, Vue, setup } from "vue-class-component";
-import posterHolder from "../assets/holder_logo.png";
-import couponLeft from "../assets/coupon_left.png";
-import couponRight from "../assets/coupon_right.png";
-import couponMid from "../assets/coupon_mid.png";
-import borderLeft from "../assets/line_left.png";
-import borderMid from "../assets/line_mid.png";
-import borderRight from "../assets/line_right.png";
-
-@Options({
-  props: {
-    data: Object,
-  },
-})
-class ContentItem extends Vue {
-  constructor(props) {
-    super(props);
-    //    console.log("cchtest2 ContentItem constructor " + new Date().getTime());
-    this.setup = setup(() => {
-      return {
-        posterHolder,
-        couponLeft,
-        couponMid,
-        couponRight,
-        borderLeft,
-        borderMid,
-        borderRight,
-      };
-    });
-  }
-
-  created() {}
-
-  get savePrizeWidth() {
-    return 10 * this.data.savePrize.length + 26;
-  }
-
-  get soldTotalWidth() {
-    let width = 44 + 22; //base width;
-    if (this.data.soldTotal >= 10000) {
-      let text = parseInt(this.data.soldTotal / 10000) + "";
-      width += text.length * 12 + 22;
-    } else {
-      width += (this.data.soldTotal + "").length * 12;
-    }
-    return width;
-  }
-
-  get soldTotalText() {
-    let text = "";
-    if (this.data.soldTotal >= 10000) {
-      text = parseInt(this.data.soldTotal / 10000) + "万";
-    } else {
-      text = this.data.soldTotal;
-    }
-    return text;
-  }
-}
-
-export default ContentItem;
-</script>
-
-<template>
-  <div class="frame-background">
-    <div class="poster-holder">
-      <div
-        :style="{
-          width: 107,
-          height: 23,
-          left: 53,
-          top: 95,
-          backgroundImage: setup.posterHolder,
-        }"
-      />
-    </div>
-    <div
-      class="poster"
-      :style="{
-        backgroundImage: `url(${data.pictUrl})`,
-      }"
-    />
-    <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: setup.couponLeft }"
-      />
-      <div
-        :style="{
-          left: 5,
-          width: savePrizeWidth - 11,
-          height: 24,
-          backgroundImage: setup.couponMid,
-        }"
-      />
-      <div
-        :style="{
-          left: savePrizeWidth - 6,
-          width: 5,
-          height: 24,
-          backgroundImage: setup.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: setup.borderLeft }"
-      />
-      <div
-        :style="{
-          left: 7,
-          width: soldTotalWidth - 13,
-          height: 25,
-          backgroundImage: setup.borderMid,
-        }"
-      />
-      <div
-        :style="{
-          left: soldTotalWidth - 7,
-          width: 7,
-          height: 25,
-          backgroundImage: setup.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: setup.couponLeft }"
-      />
-      <div
-        :style="{
-          left: 5,
-          width: savePrizeWidth - 11,
-          height: 24,
-          backgroundImage: setup.couponMid,
-        }"
-      />
-      <div
-        :style="{
-          left: savePrizeWidth - 6,
-          width: 5,
-          height: 24,
-          backgroundImage: setup.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: setup.borderLeft }"
-      />
-      <div
-        :style="{
-          left: 7,
-          width: soldTotalWidth - 13,
-          height: 25,
-          backgroundImage: setup.borderMid,
-        }"
-      />
-      <div
-        :style="{
-          left: soldTotalWidth - 7,
-          width: 7,
-          height: 25,
-          backgroundImage: setup.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: setup.couponLeft }"
-      />
-      <div
-        :style="{
-          left: 5,
-          width: savePrizeWidth - 11,
-          height: 24,
-          backgroundImage: setup.couponMid,
-        }"
-      />
-      <div
-        :style="{
-          left: savePrizeWidth - 6,
-          width: 5,
-          height: 24,
-          backgroundImage: setup.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: setup.borderLeft }"
-      />
-      <div
-        :style="{
-          left: 7,
-          width: soldTotalWidth - 13,
-          height: 25,
-          backgroundImage: setup.borderMid,
-        }"
-      />
-      <div
-        :style="{
-          left: soldTotalWidth - 7,
-          width: 7,
-          height: 25,
-          backgroundImage: setup.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 10 10 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;
-  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>