49 lines
1.9 KiB
Vue
49 lines
1.9 KiB
Vue
<template>
|
||
<common-cell :name="name" :required="required">
|
||
<view class="exercise-row">
|
||
<input class="exercise-input" type="number" :disabled="disableChange" :value="frequency" placeholder="次数" @input="changeFrequency" />
|
||
<text class="exercise-unit">次/周</text>
|
||
<input class="exercise-input" type="number" :disabled="disableChange" :value="duration" placeholder="时长" @input="changeDuration" />
|
||
<text class="exercise-unit">min/次</text>
|
||
</view>
|
||
</common-cell>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
import commonCell from '../common-cell.vue';
|
||
|
||
const emits = defineEmits(['change']);
|
||
const props = defineProps({
|
||
form: { type: Object, default: () => ({}) },
|
||
name: { default: '' },
|
||
title: { default: '' },
|
||
required: { type: Boolean, default: false },
|
||
disableChange: { type: Boolean, default: false },
|
||
});
|
||
|
||
const values = computed(() => {
|
||
const matched = String(props.form?.[props.title] || '').match(/^\s*(\d*)\s*次\/周\s*[；;]\s*(\d*)\s*min\/次\s*$/);
|
||
return matched ? { frequency: matched[1], duration: matched[2] } : { frequency: '', duration: '' };
|
||
});
|
||
const frequency = computed(() => values.value.frequency);
|
||
const duration = computed(() => values.value.duration);
|
||
|
||
function emitValue(nextFrequency, nextDuration) {
|
||
emits('change', {
|
||
title: props.title,
|
||
value: !nextFrequency && !nextDuration ? '' : `${nextFrequency || ''}次/周；${nextDuration || ''}min/次`,
|
||
});
|
||
}
|
||
function changeFrequency(event) { emitValue(event.detail.value, duration.value); }
|
||
function changeDuration(event) { emitValue(frequency.value, event.detail.value); }
|
||
</script>
|
||
|
||
<style>
|
||
@import '../cell-style.css';
|
||
|
||
.exercise-row { display: flex; align-items: center; gap: 10rpx; white-space: nowrap; }
|
||
.exercise-input { width: 96rpx; min-width: 96rpx; padding: 8rpx 10rpx; border: 1rpx solid #dcdfe6; border-radius: 8rpx; font-size: 28rpx; }
|
||
.exercise-unit { flex-shrink: 0; font-size: 26rpx; color: #303133; }
|
||
</style>
|