冲刺记录7

今日任务：今天完成了相机图片的显示，添加新的功能界面

遇到困难：无

<template>

  <view class="container">

    <!-- 搜索输入框和确认按钮放在一行 -->

    <view class="search-container">

      <input type="text" v-model="searchKeyword" placeholder="输入关键词进行搜索" class="search-input" @keyup.enter="startSearch">

    </view>

   

    <!-- 记录列表 -->

    <view v-for="(record, index) in filteredRecords" :key="index" class="record-item">

      <view class="record">

        <view :class="[record.type === 'income' ? 'type income' : 'type expense']">{{ record.type === 'income' ? '❤' : '-' }}</view>

        <view class="details">

          <view v-if="!record.editing" class="detail-item">

            <span class="date">{{ record.date }}</span>

          </view>

          <view v-if="record.editing" class="detail-item">

            <input type="text" v-model="record.newDate" class="edit-input">

          </view>

          <view v-if="!record.editing" class="detail-item">

            <span class="place">{{ record.place }}</span>

          </view>

          <view v-if="record.editing" class="detail-item">

            <input type="text" v-model="record.newPlace" class="edit-input">

          </view>

          <view v-if="!record.editing" class="detail-item">

            <span class="remark">{{ record.remark }}</span>

          </view>

          <view v-if="record.editing" class="detail-item">

            <input type="text" v-model="record.newRemark" class="edit-input">

          </view>

          <view class="photo-container" v-if="record.photo" @click="displayPhoto(record.photo)">

            <!-- 使用image标签来显示照片 -->

            <image :src="record.photo" alt="记录照片" class="record-photo"></image>

          </view>

        </view>

        <view class="button-group">

          <button class="modify-button" @click="toggleEditing(index)">{{ record.editing ? '保存' : '修改' }}</button>

          <button class="delete-button" @click="deleteRecord(index)">删除</button>

        </view>

      </view>

    </view>

   

    <!-- Photo Modal -->

    <view class="photo-modal" v-if="showPhotoModal" @click="hidePhotoModal">

      <image :src="selectedPhoto" class="modal-photo"></image>

    </view>

  </view>

</template>

<script>

export default {

  data() {

    return {

      records: [],

      showPhotoModal: false,

      selectedPhoto: null,

      searchKeyword: '', // 添加搜索关键词变量

      isSearching: false // 添加搜索状态变量

    };

  },

  computed: {

    // 根据搜索关键词筛选记录

    filteredRecords() {

      const keyword = this.searchKeyword.toLowerCase();

      return this.records.filter(record =>

        record.date.toLowerCase().includes(keyword) ||

        record.place.toLowerCase().includes(keyword) ||

        record.remark.toLowerCase().includes(keyword)

      );