日付のフォーマット指定と変更がうまくいかない
This commit is contained in:
parent
cd5615d354
commit
c8a81364ef
|
@ -1,52 +1,58 @@
|
||||||
<template>
|
<template>
|
||||||
<MkStickyContainer>
|
<MkStickyContainer>
|
||||||
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
<template #header>
|
||||||
<MkSpacer :content-max="900">
|
<XHeader :actions="headerActions" :tabs="headerTabs" />
|
||||||
<div class="uqshojas">
|
</template>
|
||||||
<div v-for="ad in ads" class="_panel _gaps_m ad">
|
<MkSpacer :content-max="900">
|
||||||
<MkAd v-if="ad.url" :specify="ad"/>
|
<div class="uqshojas">
|
||||||
<MkInput v-model="ad.url" type="url">
|
<MkPagination v-slot="{ items }" :pagination="pagination" :on-vnode-updated="update()">
|
||||||
<template #label>URL</template>
|
<div v-for="ad in items" class="_panel _gaps_m ad">
|
||||||
</MkInput>
|
<MkAd v-if="ad.url" :specify="ad" />
|
||||||
<MkInput v-model="ad.imageUrl">
|
<MkInput v-model="ad.url" type="url">
|
||||||
<template #label>{{ i18n.ts.imageUrl }}</template>
|
<template #label>URL</template>
|
||||||
</MkInput>
|
</MkInput>
|
||||||
<MkRadios v-model="ad.place">
|
<MkInput v-model="ad.imageUrl">
|
||||||
<template #label>Form</template>
|
<template #label>{{ i18n.ts.imageUrl }}</template>
|
||||||
<option value="square">square</option>
|
</MkInput>
|
||||||
<option value="horizontal">horizontal</option>
|
<MkRadios v-model="ad.place">
|
||||||
<option value="horizontal-big">horizontal-big</option>
|
<template #label>Form</template>
|
||||||
</MkRadios>
|
<option value="square">square</option>
|
||||||
<!--
|
<option value="horizontal">horizontal</option>
|
||||||
<div style="margin: 32px 0;">
|
<option value="horizontal-big">horizontal-big</option>
|
||||||
{{ i18n.ts.priority }}
|
</MkRadios>
|
||||||
<MkRadio v-model="ad.priority" value="high">{{ i18n.ts.high }}</MkRadio>
|
<!--
|
||||||
<MkRadio v-model="ad.priority" value="middle">{{ i18n.ts.middle }}</MkRadio>
|
<div style="margin: 32px 0;">
|
||||||
<MkRadio v-model="ad.priority" value="low">{{ i18n.ts.low }}</MkRadio>
|
{{ i18n.ts.priority }}
|
||||||
</div>
|
<MkRadio v-model="ad.priority" value="high">{{ i18n.ts.high }}</MkRadio>
|
||||||
-->
|
<MkRadio v-model="ad.priority" value="middle">{{ i18n.ts.middle }}</MkRadio>
|
||||||
<FormSplit>
|
<MkRadio v-model="ad.priority" value="low">{{ i18n.ts.low }}</MkRadio>
|
||||||
<MkInput v-model="ad.ratio" type="number">
|
|
||||||
<template #label>{{ i18n.ts.ratio }}</template>
|
|
||||||
</MkInput>
|
|
||||||
<MkInput v-model="ad.startsAt" type="datetime-local">
|
|
||||||
<template #label>{{ i18n.ts.startingperiod }}</template>
|
|
||||||
</MkInput>
|
|
||||||
<MkInput v-model="ad.expiresAt" type="datetime-local">
|
|
||||||
<template #label>{{ i18n.ts.expiration }}</template>
|
|
||||||
</MkInput>
|
|
||||||
</FormSplit>
|
|
||||||
<MkTextarea v-model="ad.memo">
|
|
||||||
<template #label>{{ i18n.ts.memo }}</template>
|
|
||||||
</MkTextarea>
|
|
||||||
<div class="buttons">
|
|
||||||
<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
|
|
||||||
<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
|
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
|
<FormSplit>
|
||||||
|
<MkInput v-model="ad.ratio" type="number">
|
||||||
|
<template #label>{{ i18n.ts.ratio }}</template>
|
||||||
|
</MkInput>
|
||||||
|
<MkInput v-model="ad.startsAt" type="datetime-local">
|
||||||
|
<template #label>{{ i18n.ts.startingperiod }}</template>
|
||||||
|
</MkInput>
|
||||||
|
<MkInput v-model="ad.expiresAt" type="datetime-local">
|
||||||
|
<template #label>{{ i18n.ts.expiration }}</template>
|
||||||
|
</MkInput>
|
||||||
|
</FormSplit>
|
||||||
|
<MkTextarea v-model="ad.memo">
|
||||||
|
<template #label>{{ i18n.ts.memo }}</template>
|
||||||
|
</MkTextarea>
|
||||||
|
<div class="buttons">
|
||||||
|
<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i
|
||||||
|
class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
|
||||||
|
<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}
|
||||||
|
</MkButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</MkPagination>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</MkSpacer>
|
||||||
</MkSpacer>
|
</MkStickyContainer>
|
||||||
</MkStickyContainer>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -56,6 +62,7 @@ import MkButton from '@/components/MkButton.vue';
|
||||||
import MkInput from '@/components/MkInput.vue';
|
import MkInput from '@/components/MkInput.vue';
|
||||||
import MkTextarea from '@/components/MkTextarea.vue';
|
import MkTextarea from '@/components/MkTextarea.vue';
|
||||||
import MkRadios from '@/components/MkRadios.vue';
|
import MkRadios from '@/components/MkRadios.vue';
|
||||||
|
import MkPagination from '@/components/MkPagination.vue';
|
||||||
import FormSplit from '@/components/form/split.vue';
|
import FormSplit from '@/components/form/split.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
|
@ -67,19 +74,24 @@ let ads: any[] = $ref([]);
|
||||||
const localTime = new Date();
|
const localTime = new Date();
|
||||||
const localTimeDiff = localTime.getTimezoneOffset() * 60 * 1000;
|
const localTimeDiff = localTime.getTimezoneOffset() * 60 * 1000;
|
||||||
|
|
||||||
os.api('admin/ad/list').then(adsResponse => {
|
// os.api('admin/ad/list').then(adsResponse => {
|
||||||
ads = adsResponse.map(r => {
|
// ads = adsResponse.map(r => {
|
||||||
const exdate = new Date(r.expiresAt);
|
// const exdate = new Date(r.expiresAt);
|
||||||
const stdate = new Date(r.startsAt);
|
// const stdate = new Date(r.startsAt);
|
||||||
exdate.setMilliseconds(exdate.getMilliseconds() - localTimeDiff);
|
// exdate.setMilliseconds(exdate.getMilliseconds() - localTimeDiff);
|
||||||
stdate.setMilliseconds(stdate.getMilliseconds() - localTimeDiff);
|
// stdate.setMilliseconds(stdate.getMilliseconds() - localTimeDiff);
|
||||||
return {
|
// return {
|
||||||
...r,
|
// ...r,
|
||||||
expiresAt: exdate.toISOString().slice(0, 16),
|
// expiresAt: exdate.toISOString().slice(0, 16),
|
||||||
startsAt: stdate.toISOString().slice(0, 16),
|
// startsAt: stdate.toISOString().slice(0, 16),
|
||||||
};
|
// };
|
||||||
});
|
// });
|
||||||
});
|
// });
|
||||||
|
|
||||||
|
const pagination = {
|
||||||
|
endpoint: 'admin/ad/list' as const,
|
||||||
|
limit: 10,
|
||||||
|
};
|
||||||
|
|
||||||
function add() {
|
function add() {
|
||||||
ads.unshift({
|
ads.unshift({
|
||||||
|
@ -141,12 +153,11 @@ definePageMetadata({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.uqshojas {
|
.uqshojas {
|
||||||
> .ad {
|
>.ad {
|
||||||
padding: 32px;
|
padding: 32px;
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-bottom: var(--margin);
|
margin-bottom: var(--margin);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}</style>
|
||||||
</style>
|
|
||||||
|
|
Loading…
Reference in New Issue