Initial Commit

pages/add-person/add-person.js

@@ -0,0 +1,136 @@
+// add-person.js
+const storage = require('../../utils/storage')
+
+Page({
+  data: {
+    personId: null,
+    formData: {
+      avatar: '',
+      name: '',
+      nickname: '',
+      remark: ''
+    }
+  },
+
+  onLoad(options) {
+    // 如果是编辑模式
+    if (options.id) {
+      this.setData({ personId: options.id })
+      this.loadPerson(options.id)
+    }
+  },
+
+  /**
+   * 加载人员信息（编辑模式）
+   */
+  loadPerson(id) {
+    const person = storage.getPersonById(id)
+    if (person) {
+      this.setData({ formData: person })
+      wx.setNavigationBarTitle({ title: '编辑人员' })
+    }
+  },
+
+  /**
+   * 输入框变化
+   */
+  onInputChange(e) {
+    const field = e.currentTarget.dataset.field
+    const value = e.detail.value
+    this.setData({
+      [`formData.${field}`]: value
+    })
+  },
+
+  /**
+   * 文本框变化
+   */
+  onTextareaChange(e) {
+    this.setData({
+      'formData.remark': e.detail.value
+    })
+  },
+
+  /**
+   * 选择头像
+   */
+  chooseAvatar() {
+    wx.chooseImage({
+      count: 1,
+      sizeType: ['compressed'],
+      sourceType: ['album', 'camera'],
+      success: (res) => {
+        // 这里可以上传到服务器，暂时使用本地路径
+        this.setData({
+          'formData.avatar': res.tempFilePaths[0]
+        })
+      }
+    })
+  },
+
+  /**
+   * 取消
+   */
+  onCancel() {
+    wx.navigateBack()
+  },
+
+  /**
+   * 提交
+   */
+  onSubmit() {
+    const { formData, personId } = this.data
+
+    // 验证姓名
+    if (!formData.name || formData.name.trim() === '') {
+      wx.showToast({
+        title: '请输入姓名',
+        icon: 'none'
+      })
+      return
+    }
+
+    if (personId) {
+      // 编辑模式
+      const success = storage.updatePerson(personId, formData)
+      if (success) {
+        wx.showToast({
+          title: '保存成功',
+          icon: 'success'
+        })
+        setTimeout(() => {
+          wx.navigateBack()
+        }, 1500)
+      } else {
+        wx.showToast({
+          title: '保存失败',
+          icon: 'none'
+        })
+      }
+    } else {
+      // 新增模式
+      const newPerson = storage.addPerson({
+        name: formData.name,
+        nickname: formData.nickname || '',
+        avatar: formData.avatar || '',
+        remark: formData.remark || ''
+      })
+
+      if (newPerson) {
+        wx.showToast({
+          title: '添加成功',
+          icon: 'success'
+        })
+        setTimeout(() => {
+          wx.navigateBack()
+        }, 1500)
+      } else {
+        wx.showToast({
+          title: '添加失败',
+          icon: 'none'
+        })
+      }
+    }
+  }
+})
+

pages/add-person/add-person.wxml

@@ -0,0 +1,41 @@
+<!--add-person.wxml-->
+<view class="container">
+  <view class="form">
+    <!-- 头像上传 -->
+    <view class="form-item">
+      <text class="label">头像（可选）</text>
+      <view class="avatar-upload" bindtap="chooseAvatar">
+        <image wx:if="{{formData.avatar}}" class="avatar" src="{{formData.avatar}}" mode="aspectFill" />
+        <view wx:else class="avatar-placeholder">
+          <text class="icon">📷</text>
+          <text class="text">点击上传头像</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 姓名 -->
+    <view class="form-item">
+      <text class="label required">姓名</text>
+      <input class="input" placeholder="请输入姓名" value="{{formData.name}}" bindinput="onInputChange" data-field="name" />
+    </view>
+
+    <!-- 昵称 -->
+    <view class="form-item">
+      <text class="label">昵称</text>
+      <input class="input" placeholder="请输入昵称（可选）" value="{{formData.nickname}}" bindinput="onInputChange" data-field="nickname" />
+    </view>
+
+    <!-- 备注 -->
+    <view class="form-item">
+      <text class="label">备注</text>
+      <textarea class="textarea" placeholder="添加一些备注信息（可选）" value="{{formData.remark}}" bindinput="onTextareaChange" />
+    </view>
+
+    <!-- 操作按钮 -->
+    <view class="buttons">
+      <button class="btn btn-cancel" bindtap="onCancel">取消</button>
+      <button class="btn btn-submit" bindtap="onSubmit">保存</button>
+    </view>
+  </view>
+</view>
+

pages/add-person/add-person.wxss

@@ -0,0 +1,115 @@
+/**add-person.wxss**/
+.container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 120rpx;
+}
+
+.form {
+  padding: 32rpx;
+}
+
+.form-item {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 32rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+}
+
+.label {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 24rpx;
+  display: block;
+}
+
+.label.required::after {
+  content: ' *';
+  color: #ff5722;
+}
+
+/* 头像上传 */
+.avatar-upload {
+  text-align: center;
+}
+
+.avatar {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  background-color: #f0f0f0;
+}
+
+.avatar-placeholder {
+  width: 200rpx;
+  height: 200rpx;
+  margin: 0 auto;
+  border-radius: 50%;
+  background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #ddd;
+}
+
+.avatar-placeholder .icon {
+  font-size: 60rpx;
+  display: block;
+  margin-bottom: 16rpx;
+}
+
+.avatar-placeholder .text {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.input {
+  background-color: #f5f5f5;
+  border-radius: 8rpx;
+  padding: 24rpx;
+  font-size: 28rpx;
+}
+
+.textarea {
+  background-color: #f5f5f5;
+  border-radius: 8rpx;
+  padding: 24rpx;
+  font-size: 28rpx;
+  min-height: 160rpx;
+}
+
+.buttons {
+  display: flex;
+  gap: 24rpx;
+  margin-top: 40rpx;
+}
+
+.btn {
+  flex: 1;
+  height: 88rpx;
+  line-height: 88rpx;
+  border-radius: 16rpx;
+  font-size: 32rpx;
+  border: none;
+}
+
+.btn-cancel {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.btn-submit {
+  background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
+  color: #fff;
+}
+
+.btn-cancel::after {
+  border: none;
+}
+
+.btn-submit::after {
+  border: none;
+}
+