init

uni_modules/nutui-uni/components/hiteggs/hiteggs.ts

@@ -0,0 +1,57 @@
+import type { ExtractPropTypes } from 'vue'
+import { CLICK_EVENT } from '../_constants'
+import { commonProps, makeNumberProp } from '../_utils'
+
+export const hiteggsProps = {
+  ...commonProps,
+  /**
+   * @description 金蛋个数
+   */
+  num: makeNumberProp(9),
+  /**
+   * @description 完整金蛋图片地址
+   */
+  intactImg: {
+    type: String,
+    default:
+      '//img10.360buyimg.com/imagetools/jfs/t1/217651/2/1901/114207/617770f2E74551438/5342f7b949e7bec3.png',
+  },
+  /**
+   * @description 锤子图片
+   */
+  hammer: {
+    type: String,
+    default:
+      '//img13.360buyimg.com/imagetools/jfs/t1/95159/30/17834/9845/61444874E0f463263/924741cae55efb85.png',
+  },
+  /**
+   * @description
+   */
+  splitImg: {
+    type: String,
+    default:
+      '//img13.360buyimg.com/imagetools/jfs/t1/219949/29/1870/75442/61776f7aE5d1a8e07/a8de5321e4e8071e.png',
+  },
+  /**
+   * @description 金蛋图片宽度
+   */
+  width: {
+    type: String,
+    default: '80px',
+  },
+  /**
+   * @description 金蛋图片高度
+   */
+  height: {
+    type: String,
+    default: '80px',
+  },
+}
+
+export type HitEggsProps = ExtractPropTypes<typeof hiteggsProps>
+
+export const hiteggsEmits = {
+  [CLICK_EVENT]: () => true,
+}
+
+export type HitEggsEmits = typeof hiteggsEmits

uni_modules/nutui-uni/components/hiteggs/hiteggs.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, defineComponent, reactive, ref } from 'vue'
+import { CLICK_EVENT, PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import { hiteggsEmits, hiteggsProps } from './hiteggs'
+
+const props = defineProps(hiteggsProps)
+
+const emit = defineEmits(hiteggsEmits)
+const hitIndex = ref()
+const hitClick = ref(false)
+const arr = reactive<any>([])
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+function hitEggs(index: number) {
+  if (hitClick.value)
+    return
+  hitClick.value = true
+  hitIndex.value = index
+  setTimeout(() => {
+    arr.push(index)
+    hitIndex.value = props.num + 1
+    hitClick.value = false
+    emit(CLICK_EVENT)
+  }, 1500)
+}
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-hiteggs`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <div :class="classes" :style="customStyle">
+    <div
+      v-for="(item, index) in num"
+      :key="index"
+      class="nut-eggs-item"
+      :style="{ width, height }"
+    >
+      <image
+        v-if="!(arr.indexOf(index) > -1)"
+        class="intactImg"
+        :src="intactImg"
+        alt=""
+        @click="hitEggs(index)"
+      />
+      <image
+        v-if="arr.indexOf(index) > -1"
+        class="splitImg"
+        :src="splitImg"
+        alt=""
+      />
+      <image
+        class="hammer"
+        :class="{ 'nut-hidden': index !== hitIndex }"
+        style="animation: shake-rotate 0.5s linear 0s infinite"
+        :src="hammer"
+        alt=""
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/hiteggs/index.scss

@@ -0,0 +1,130 @@
+.nut-hiteggs {
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+  padding: 25px;
+  overflow: hidden;
+  background-size: 100% 100%;
+
+  .nut-eggs-item {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+
+    // stylelint-disable selector-class-pattern
+
+    .intactImg {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      animation: move 2s 0s infinite;
+
+      &.hide {
+        opacity: 0;
+      }
+    }
+
+    .splitImg {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 50px;
+    }
+
+    .hammer {
+      position: absolute;
+      top: -15px;
+      right: -18px;
+      width: 50px;
+      height: 30px;
+      transform: rotate(10deg);
+    }
+  }
+}
+
+// stylelint-disable declaration-block-no-duplicate-properties
+
+@keyframes move {
+  0%,
+  65% {
+    transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  70% {
+    transform: rotate(6deg);
+    transform: rotate(6deg);
+  }
+
+  75% {
+    transform: rotate(-6deg);
+    transform: rotate(-6deg);
+  }
+
+  80% {
+    transform: rotate(6deg);
+    transform: rotate(6deg);
+  }
+
+  85% {
+    transform: rotate(-6deg);
+    transform: rotate(-6deg);
+  }
+
+  90% {
+    transform: rotate(6deg);
+    transform: rotate(6deg);
+  }
+
+  95% {
+    transform: rotate(-6deg);
+    transform: rotate(-6deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
+// stylelint-disable keyframes-name-pattern
+
+@keyframes shake-rotate {
+  0% {
+    transform: rotate(10deg);
+    transform: rotate(10deg);
+  }
+
+  20% {
+    transform: rotate(30deg);
+    transform: rotate(30deg);
+  }
+
+  40% {
+    transform: rotate(50deg);
+    transform: rotate(50deg);
+  }
+
+  60% {
+    transform: rotate(50deg);
+    transform: rotate(50deg);
+  }
+
+  80% {
+    transform: rotate(30deg);
+    transform: rotate(30deg);
+  }
+
+  100% {
+    transform: rotate(10deg);
+    transform: rotate(10deg);
+  }
+}

uni_modules/nutui-uni/components/hiteggs/index.ts

@@ -0,0 +1 @@
+export type * from './hiteggs'