fix：测试修改

composables/NumberRoll.vue

@@ -0,0 +1,167 @@
+<template>
+  <ul
+    class="base-num-roll"
+    :style="{ height: rollHeightRef }"
+  >
+    <li
+      v-for="index in liTranslate.length"
+      :key="index"
+      :class="customClassRef"
+    >
+      <div
+        :style="[
+          liTranslate[index - 1],
+          { 'transition-duration': +durationRef / 1000 + 's' },
+          { 'transition-timing-function': transitionTimingFunctionRef },
+        ]"
+      >
+        <p
+          v-for="n in 10"
+          :key="n"
+          :style="{ height: rollHeightRef }"
+        >
+          {{ reverseDirectionRef ? 10 - n : n - 1 }}
+        </p>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, toRefs } from 'vue'
+
+/**
+ * props
+ */
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  startNumber: {
+    type: [Number, String],
+    default: 0,
+    validator: (value: number | string) => Number.isInteger(+value) && +value >= 0,
+  },
+  endNumber: {
+    type: [Number, String],
+    default: 0,
+    validator: (value: number | string) => Number.isInteger(+value) && +value >= 0,
+  },
+  duration: {
+    type: [Number, String],
+    default: 3000,
+    validator: (value: number | string) => Number.isInteger(+value) && +value >= 0,
+  },
+  transitionTimingFunction: {
+    type: String,
+    default: 'ease-in-out',
+    validator: (value: string) =>
+      ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'].includes(value) || value.includes('cubic-bezier'),
+  },
+  minLength: {
+    type: [Number, String],
+    default: 0,
+    validator: (value: number | string) => Number.isInteger(+value) && +value >= 0,
+  },
+  rollHeight: {
+    type: String,
+    required: true,
+    validator: (value: string) => /^\d+(px|rem|em|%)+$/g.test(value),
+  },
+  reverseDirection: {
+    type: Boolean,
+    default: false,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+})
+
+const {
+  // fixme 如果模板直接使用同名的变量，会报错，所以加了`Ref`
+  startNumber: startNumberRef,
+  endNumber: endNumberRef,
+  duration: durationRef,
+  transitionTimingFunction: transitionTimingFunctionRef,
+  minLength: minLengthRef,
+  rollHeight: rollHeightRef,
+  reverseDirection: reverseDirectionRef,
+  autoplay: autoplayRef,
+  customClass: customClassRef,
+} = toRefs(props)
+
+/**
+ * data
+ */
+const liTranslate = ref<{ transform: string }[]>([])
+const rollNumber = computed(() => endNumberRef.value.toString().padStart(+minLengthRef.value, '0'))
+const rollHeightUnit = computed(() => rollHeightRef.value.replace(/\d/g, ''))
+const rollHeightNumber = computed(() => +rollHeightRef.value.replace(new RegExp(rollHeightUnit.value, 'g'), ''))
+
+/**
+ * watch
+ */
+watch([startNumberRef, rollHeightRef, minLengthRef, reverseDirectionRef], init, { immediate: true })
+
+/**
+ * life cycle
+ */
+onMounted(() => autoplayRef.value && setTimeout(start, 1000))
+
+/**
+ * methods
+ */
+// eslint-disable-next-line no-undef
+defineExpose({ start, reset: init })
+
+function init() {
+  liTranslate.value.length = 0
+  startNumberRef.value
+    .toString()
+    .padStart(+minLengthRef.value, '0')
+    .split('')
+    .forEach((number, idx) => setLiTranslate(idx, +number))
+}
+
+function start() {
+  liTranslate.value.length = 0
+  rollNumber.value.split('').forEach((number, idx) => setLiTranslate(idx, +number))
+}
+
+function setLiTranslate(idx: number, number: number) {
+  // Vue3
+  liTranslate.value[idx] = {
+    transform: `translateY(${
+      (reverseDirectionRef.value ? (+number - 9) * rollHeightNumber.value : -number * rollHeightNumber.value) +
+      rollHeightUnit.value
+    })`,
+  }
+}
+</script>
+
+<style lang="scss">
+.base-num-roll {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+  display: inline-flex;
+  li {
+    transition-property: transform;
+    box-sizing: border-box;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    p {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

nuxt.config.ts

@@ -16,6 +16,7 @@ export default defineNuxtConfig({
       script: [
         { src: "isMobile.js" },
         { src: "aff.js" },
+        // { src: "vue3-number-roll.js" },
       ]
     },
   },
@@ -37,6 +38,7 @@ export default defineNuxtConfig({
     '@nuxtjs/tailwindcss',
     "@huntersofbook/naive-ui-nuxt",
     '@vant/nuxt',
+    // 'vue3-number-roll'
   ],
   vant: {
 

pages/index.vue

@@ -156,6 +156,15 @@
             {{ item }}
           </li>
         </ul>
+        <!-- <div class="flex justify-center items-center mx-[5px] my-[20px]">
+          <section class="text-center">
+            <number-roll ref="numberRollRef" class="custom" custom-class="num-item"
+              start-number="00000000" end-number="30701374"
+               transition-timing-function="ease-in-out"
+              min-length="5" roll-height="60"
+              :reverse-direction="false" :autoplay="false" />
+          </section>
+        </div> -->
         <span>
           人加入
         </span>
@@ -347,16 +356,24 @@
   </n-modal>
   <!-- <nuxt-link to="/list/123">news-1</nuxt-link> -->
 </template>
+
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { postListData, downInfo, sendSms, postCustomer } from '~/server/api/index'
 import { provice } from '~/utils/city'
+// import NumberRoll from '~/composables/NumberRoll.vue'
 import {
   FormRules,
   useMessage,
   FormInst,
 } from 'naive-ui'
+// 滚动
+// const numberRollRef = ref<typeof NumberRoll>()
+  const goTo = () => {
+  // @ts-ignore
+  numberRollRef.value.start()
+}
 // console.log('provice',provice)
 const router = useRouter()
 const headerTitle = reactive([
@@ -542,15 +559,16 @@ const verifyCodeFn = async () => {
 
   }
 }
+const intervalBtn = ref()
 // 倒计时
 const countDown = () => {
   // 设置倒计时
-  const intervalBtn = setInterval(() => {
+  intervalBtn.value = setInterval(() => {
     if (countdown.value == 1) {
       // 清除定时器
-      clearInterval(intervalBtn)
+      clearInterval(intervalBtn.value)
       // 重置倒计时状态
-      countdown.value = 0
+      countdown.value = 1
     };
     // 倒计时
     countdown.value--
@@ -579,6 +597,17 @@ const fouse = () => {
   showModal.value = false
 }
 const btn = () => {
+  customer.value = {
+    sceneType: "loanofficial", // 场景
+    companyName: null,// 公司名称
+    customName: null, // 姓名
+    city: null, // 所在城市
+    phone: null, // 手机号
+    verifyCode: null, //验证码
+    channel: 16, //pc官网16 手机端17
+  }
+  clearInterval(intervalBtn.value)
+  countdown.value = 0
   showModal.value = true
 }
 
@@ -587,6 +616,16 @@ const handleUpdateValue = (value: string) => {
 }
 </script>
 <style scoped lang="scss">
+.num-item {
+  border-radius: 4px;
+  width: 50px;
+  height: 60px;
+  margin: 10px;
+  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(244, 244, 255, 0.961) 50%, rgb(255, 255, 255) 100%);
+  font-size: 36px;
+  color: #fff;
+}
+
 p {
   color: var(--link-color)
 }
@@ -649,6 +688,7 @@ img {
 ::v-deep(.n-button) {
   border-radius: 4px !important;
 }
+
 // 框
 ::v-deep(.n-card-header__main) {
   flex: inherit !important;
@@ -730,11 +770,13 @@ img {
 .message ::v-deep(.van-button__content) {
   font-size: 16px;
 }
+
 .modalCss ::v-deep(.n-button) {
   border-radius: 4px !important;
   height: 55px !important;
 }
+
 .submission ::v-deep(.n-button) {
- width: 700px !important;
+  width: 700px !important;
 }
 </style>

pages/m_user.vue

@@ -516,15 +516,16 @@ const verifyCodeFn = async () => {
 
   }
 }
+const intervalBtn = ref()
 // 倒计时
 const countDown = () => {
   // 设置倒计时
-  const intervalBtn = setInterval(() => {
+  intervalBtn.value = setInterval(() => {
     if (countdown.value == 1) {
       // 清除定时器
-      clearInterval(intervalBtn)
+      clearInterval(intervalBtn.value)
       // 重置倒计时状态
-      countdown.value = 0
+      countdown.value = 1
     };
     // 倒计时
     countdown.value--
@@ -553,6 +554,17 @@ const fouse = () => {
   showModal.value = false
 }
 const btn = () => {
+  customer.value = {
+    sceneType: "loanofficial", // 场景
+    companyName: null,// 公司名称
+    customName: null, // 姓名
+    city: null, // 所在城市
+    phone: null, // 手机号
+    verifyCode: null, //验证码
+    channel: 17, //pc官网16 手机端17
+  }
+  clearInterval(intervalBtn.value)
+  countdown.value = 0
   showModal.value = true
 }