@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/SimpleWidgetDemo/components/ContentItem.vue

@@ -1,412 +1,412 @@
-<!--
- * @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,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-})
-class ContentItem extends Vue {
-  constructor(props) {
-    super(props);
-    //    console.log("cchtest2 ContentItem constructor " + new Date().getTime());
-    this.focused = false;
-    this.setup = setup(() => {
-      return {
-        posterHolder,
-        couponLeft,
-        couponMid,
-        couponRight,
-        borderLeft,
-        borderMid,
-        borderRight,
-      };
-    });
-  }
-
-  onFocus() {
-    this.focused = true;
-  }
-
-  onBlur() {
-    this.focused = false;
-  }
-
-  onClick() {}
-
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  }
-
-  get focusTransform() {
-    return this.focused ? "scale3d(1.2, 1.2, 1)" : null;
-  }
-
-  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"
-    :style="{
-      transform: focusTransform,
-    }"
-  >
-    <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: 213px;
-  height: 337px;
-  border-radius: 10px 10px 10px 10px;
-  background-color: #f7f7f4;
-  transition: transform 0.2s linear;
-}
-
-.poster-holder {
-  width: 213px;
-  height: 213px;
-  border-radius: 10px 10px 0px 0px;
-  background-color: #cfcac6;
-}
-.poster {
-  width: 213px;
-  height: 213px;
-  border-radius: 7px 7px 0px 0px;
-}
-
-.title-font {
-  font-size: 21px;
-  color: #73665c;
-  line-height: 29px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-.title-layout {
-  top: 221;
-  left: 13;
-  width: 193px;
-  height: 29px;
-}
-.ticket-text {
-  height: 24;
-  color: #ffffff;
-  font-size: 16px;
-  text-align: center;
-  line-height: 24px;
-}
-.sold-text {
-  height: 25px;
-  color: #ff7a00;
-  font-size: 20px;
-  text-align: center;
-  line-height: 25px;
-}
-.prize-title-layout {
-  width: 35px;
-  height: 24px;
-  top: 296;
-  left: 13;
-}
-.prize-title-font {
-  color: #de2825;
-  text-align: center;
-  font-size: 17px;
-  line-height: 24px;
-}
-.prize-font {
-  top: 289;
-  left: 53;
-  width: 158; /*213 - 55*/
-  height: 37px;
-  line-height: 37px;
-  font-size: 28px;
-  color: #de2825;
-}
+<!--
+ * @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,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+  },
+})
+class ContentItem extends Vue {
+  constructor(props) {
+    super(props);
+    //    console.log("cchtest2 ContentItem constructor " + new Date().getTime());
+    this.focused = false;
+    this.setup = setup(() => {
+      return {
+        posterHolder,
+        couponLeft,
+        couponMid,
+        couponRight,
+        borderLeft,
+        borderMid,
+        borderRight,
+      };
+    });
+  }
+
+  onFocus() {
+    this.focused = true;
+  }
+
+  onBlur() {
+    this.focused = false;
+  }
+
+  onClick() {}
+
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  }
+
+  get focusTransform() {
+    return this.focused ? "scale3d(1.2, 1.2, 1)" : null;
+  }
+
+  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"
+    :style="{
+      transform: focusTransform,
+    }"
+  >
+    <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: 213px;
+  height: 337px;
+  border-radius: 10px 10px 10px 10px;
+  background-color: #f7f7f4;
+  transition: transform 0.2s linear;
+}
+
+.poster-holder {
+  width: 213px;
+  height: 213px;
+  border-radius: 10px 10px 0px 0px;
+  background-color: #cfcac6;
+}
+.poster {
+  width: 213px;
+  height: 213px;
+  border-radius: 7px 7px 0px 0px;
+}
+
+.title-font {
+  font-size: 21px;
+  color: #73665c;
+  line-height: 29px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+.title-layout {
+  top: 221;
+  left: 13;
+  width: 193px;
+  height: 29px;
+}
+.ticket-text {
+  height: 24;
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 24px;
+}
+.sold-text {
+  height: 25px;
+  color: #ff7a00;
+  font-size: 20px;
+  text-align: center;
+  line-height: 25px;
+}
+.prize-title-layout {
+  width: 35px;
+  height: 24px;
+  top: 296;
+  left: 13;
+}
+.prize-title-font {
+  color: #de2825;
+  text-align: center;
+  font-size: 17px;
+  line-height: 24px;
+}
+.prize-font {
+  top: 289;
+  left: 53;
+  width: 158; /*213 - 55*/
+  height: 37px;
+  line-height: 37px;
+  font-size: 28px;
+  color: #de2825;
+}
 </style>