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>
|