|
|
@@ -27,6 +27,7 @@
|
|
|
<view v-for="(r, idx) in records" :key="r.id" class="list-item">
|
|
|
<view class="date">{{ r.date }}</view>
|
|
|
<view class="value">{{ r.height }} cm</view>
|
|
|
+ <button class="btn-delete" @click.stop.prevent="confirmDeleteRecord(r.id)">✕</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -521,6 +522,27 @@ function confirmAdd() {
|
|
|
closeAdd()
|
|
|
}
|
|
|
|
|
|
+// 删除记录逻辑:弹出确认对话框,确认后从 records 中移除
|
|
|
+function confirmDeleteRecord(id: string) {
|
|
|
+ if (typeof uni !== 'undefined' && uni.showModal) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '删除记录',
|
|
|
+ content: '确认要删除该条身高记录吗?此操作无法撤销。',
|
|
|
+ confirmText: '删除',
|
|
|
+ cancelText: '取消',
|
|
|
+ success: (res: any) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ records.value = records.value.filter(r => r.id !== id)
|
|
|
+ uni.showToast({ title: '已删除', icon: 'success' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ // Fallback:直接删除
|
|
|
+ records.value = records.value.filter(r => r.id !== id)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -595,9 +617,9 @@ function confirmAdd() {
|
|
|
|
|
|
.list-item {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
padding: 20rpx;
|
|
|
- border-bottom: 1rpx solid #f0f0f0
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
}
|
|
|
|
|
|
.list-item .date {
|
|
|
@@ -606,7 +628,24 @@ function confirmAdd() {
|
|
|
|
|
|
.list-item .value {
|
|
|
color: #333;
|
|
|
- font-weight: 600
|
|
|
+ font-weight: 600;
|
|
|
+ flex: 1; /* allow value to take remaining space */
|
|
|
+ text-align: right; /* keep value left aligned so delete button on right */
|
|
|
+}
|
|
|
+
|
|
|
+.btn-delete {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ min-width: 60rpx;
|
|
|
+ min-height: 60rpx;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #fff0f0;
|
|
|
+ color: #d9534f;
|
|
|
+ border: 1rpx solid rgba(217,83,79,0.15);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
}
|
|
|
|
|
|
.fab {
|