<template>
|
<van-popup round :value="props.showPopup" @input="val => this.$emit('input', val)" :close-on-click-overlay="false"
|
position="bottom">
|
<div class="relative px-15 pt-23 px-4 pb-10">
|
<div class="flex justify-between py-4 items-center">
|
<h4 class="font-20 font-500 text-black">{{ $t('cycle') }}</h4>
|
<img @click="onClose" class="z-20 w-8 h-8" src="./close.png" alt="" />
|
</div>
|
<div class="flex flex-col justify-center">
|
<section v-for="(item, index) in infoList" :key="index">
|
<p class="mt-2">{{ item.title }}</p>
|
<ul class="mt-2 mb-4 border-b-1 flex flex-wrap">
|
<li v-for="(_item, _index) in item.list" :key="_index" :class="{
|
'active':
|
_item.value === quotesStore.stage
|
}" class="bg-btn-gray mr-4 rounded px-4 py-1 mb-4" @click="onItemClick(_item)">
|
{{ _item.label }}
|
</li>
|
</ul>
|
</section>
|
</div>
|
</div>
|
</van-popup>
|
</template>
|
|
<script setup>
|
import { useQuotesStore } from '@/store/quotes.store';
|
import { SET_STAGE } from '@/store/types.store';
|
import { useI18n } from "vue-i18n";
|
const { t } = useI18n()
|
const props = defineProps({
|
showPopup: {
|
type: Boolean,
|
default: false
|
}
|
})
|
|
const quotesStore = useQuotesStore()
|
console.log(quotesStore.stage)
|
|
const emits = defineEmits(['close', 'select'])
|
|
const infoList = [
|
// {
|
// title: '秒', list: [
|
// { label: '分时', value: '1sec' },
|
// ]
|
// },
|
{
|
title: t('minute'), list: [
|
{ label: '1' + t('minute'), value: '1min', seconds: 5 * 60 * 1000 },
|
// { label: '3分钟', value: '3min' },
|
{ label: '5' + t('minute'), value: '5min', seconds: 5 * 60 * 1000 },
|
{ label: '15' + t('minute'), value: '15min', seconds: 15 * 60 * 1000 },
|
{ label: '30' + t('minute'), value: '30min', seconds: 30 * 60 * 1000 },
|
// { label: '45分钟', value: '45min' },
|
]
|
},
|
{
|
title: t('Hour'), list: [
|
{ label: '1' + t('Hour'), value: '60min', seconds: 1 * 60 * 60 * 1000 },
|
// { label: '2小时', value: '2hour' },
|
// { label: '3小时', value: '3hour' },
|
{ label: '4' + t('Hour'), value: '4hour', seconds: 4 * 60 * 60 * 1000 }
|
]
|
},
|
{
|
title: t('day'), list: [
|
{ label: '1' + t('day'), value: '1day', seconds: 1 * 24 * 60 * 60 * 1000 },
|
{ label: '1' + t('week'), value: '1week', seconds: 7 * 24 * 60 * 60 * 1000 },
|
{ label: '1' + t('moon'), value: '1mon', seconds: 30 * 24 * 60 * 60 * 1000 },
|
// { label: '1年', value: '1year' }
|
]
|
}
|
]
|
|
|
const onClose = () => {
|
emits('close')
|
}
|
|
const onItemClick = (item) => {
|
let timeValue = ''
|
timeValue = item.value
|
quotesStore[SET_STAGE]({ stage: item.value, seconds: item.seconds })
|
emits('select', item.value)
|
onClose()
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
.active {
|
background: $btn_main !important;
|
color: $text_color !important;
|
}
|
</style>
|
