Selaa lähdekoodia

feat(health): 添加身高记录删除功能

- 在身高记录项中添加删除按钮
- 实现确认删除逻辑,支持 uni-app 环境下的弹窗确认
- 为删除按钮添加样式,确保界面美观与可用性
- 调整列表项布局,使内容对齐更合理
- 添加删除成功提示信息
mcbaiyun 2 kuukautta sitten
vanhempi
commit
553180741d
1 muutettua tiedostoa jossa 42 lisäystä ja 3 poistoa
  1. 42 3
      src/pages/health/height.vue

+ 42 - 3
src/pages/health/height.vue

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