倒计时 ​

<template>
  <view style="padding: 12px">
    <view>
      <view>演示效果</view>
      <view style="display: flex; flex-wrap: wrap; justify-content: center; padding: 24rpx">
        <view style="padding: 20px 40px; background-color: #f7f7f7">
          <jp-countdown
            color="#FFFFFF"
            :splitor-color="attribute.splitorColor"
            :background-color="attribute.timebackgroundColor"
            border-color="#000"
            :show-day="attribute.showday"
            :second="attribute.second"
            :show-colon="attribute.showColon"
            @timeup="timeend"
          ></jp-countdown>
        </view>
      </view>
    </view>
    <view style="margin-top: 20px">
      <view style="margin: 12px 0">
        <view style="font-size: 16px">倒计时样式</view>
        <jp-section-selector current="0" vibrate-short :list="['天', '时分秒', '文字时分秒']" @change="countChange"></jp-section-selector>
      </view>

      <view style="margin: 12px 0">
        <view style="font-size: 16px">Theme</view>
        <jp-section-selector current="0" vibrate-short :list="attribute.themeList" @change="countChange2"></jp-section-selector>
      </view>
      <view style="margin: 12px 0">
        <view style="font-size: 16px">splitorColor</view>
        <jp-section-selector current="0" vibrate-short :list="attribute.themeList" @change="countChange3"></jp-section-selector>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
  showday: true,
  second: 3600 * 60,
  showColon: false,
  themeList: ['#000', '#007AFF', '#1CBBB4'],
  timebackgroundColor: '#000',
  splitorColor: '#000'
})

const countChange = (index) => {
  if (index === 0) {
    attribute.showday = true
    attribute.showColon = false
  }
  if (index === 1) {
    attribute.showday = false
    attribute.showColon = true
  }
  if (index === 2) {
    attribute.showday = false
    attribute.showColon = false
  }
}
const countChange2 = (index) => {
  attribute.timebackgroundColor = attribute.themeList[index]
}
const countChange3 = (index) => {
  attribute.splitorColor = attribute.themeList[index]
}
const timeend = () => {}
</script>

<style scoped lang="scss"></style>