6.4

所花时间（包括上课）：3

打码量(行)：250

博客量(篇)：1

了解到知识点：手机内部文件储存

 

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

      );

    }

  },

  methods: {

    publishToQzone(record) {

      // 构建QQ空间发布内容

      const qzoneContent = `日期：${record.date}\n地点：${record.place}\n备注：${record.remark}`;

      

      // 调用QQ空间发布接口

      // Your QQ space API call goes here

      

      // This is just a placeholder code, replace it with your actual API call

      // For example, you might use Ajax, fetch, or a specific SDK for QQ space

      

      // Example using fetch API:

      fetch('YOUR_QZONE_API_URL', {

        method: 'POST',

        body: JSON.stringify({

          content: qzoneContent,

          photo: record.photo // If there's a photo, include it in the request

        }),

        headers: {

          'Content-Type': 'application/json'

        }

      })

      .then(response => {

        if (response.ok) {

          uni.showToast({

            title: '发布成功',

            icon: 'success'

          });

        } else {

          uni.showToast({

            title: '发布失败，请重试',

            icon: 'none'

          });

        }

      })

      .catch(error => {

        uni.showToast({

          title: '网络错误，请重试',

          icon: 'none'

        });

      });

    },

    loadRecords() {

      let storedRecords = uni.getStorageSync('records') || [];

      this.records = storedRecords.map(record => ({

        ...record,

        editing: false,

        newDate: record.date,

        newPlace: record.place,

        newRemark: record.remark

      }));

    },

    deleteRecord(index) {

      uni.showModal({

        title: '确认删除',

        content: '是否确定删除该记录？',

        success: (res) => {

          if (res.confirm) {

            this.records.splice(index, 1);

            uni.setStorageSync('records', this.records);

          }

        }

      });

    },

    toggleEditing(index) {

      // Toggle editing status of the current record

      this.records.forEach((record, i) => {

        if (i !== index) {

          record.editing = false; // Ensure editing status of other records is false

        }

      });

      this.records[index].editing = !this.records[index].editing;

      // If it's a save operation, save the modified record to local storage and set editing status to false

      if (!this.records[index].editing) {

        // Update record properties with edited values

        this.records[index].date = this.records[index].newDate;

        this.records[index].place = this.records[index].newPlace;

        this.records[index].remark = this.records[index].newRemark;

        uni.setStorageSync('records', this.records);

      }

    },

    displayPhoto(photoUrl) {

      this.selectedPhoto = photoUrl;

      this.showPhotoModal = true;

    },

    hidePhotoModal() {

      this.showPhotoModal = false;

    },

    startSearch() {

      this.isSearching = true;

    }

  },

  mounted() {

    this.loadRecords();

  }

};

</script>

 

<style scoped>

.container {

  padding: 20px;

  background-image: url('/static/111.jpg');

  background-size: cover;

  background-position: center;

  min-height: 100vh; /* 确保容器至少填满整个视口高度 */

  background-attachment: fixed; /* 背景图像固定在视口 */

  overflow-y: auto; /* 允许垂直滚动 */

}

 

.search-container {

  display: flex;

  align-items: center;

  margin-bottom: 20px;

  height: 3p;

}

 

.search-input {

  height: 35px;

  flex: 1; /* 使用剩余空间 */

  padding: 5px 10px;

  font-size: 16px;

  border: 1px solid #FFC0CB;

  border-radius: 3px;

}

 

.record-item {

  margin-bottom: 20px;

  border: 1px solid #FFC0CB;

  padding: 10px;

  position: relative;

  width: 100%;

}

 

.record {

  display: flex;

  align-items: center;

}

 

.type {

  font-size: 20px;

  margin-right: 10px;

}

 

.details {

  display: flex;

  flex-direction: column;

}

 

.detail-item {

  margin-bottom: 10px;

}

 

.detail-item span {

  font-size: 18px;

}

 

.date {

  color: #28a745; /* Green color for date */

}

 

.place {

  color: #007bff; /* Blue color for place */

}

 

.remark {

  color: #ff69b4; /* Pink color for remark */

}

 

.record-photo {

  max-width: 100%;

  max-height: 400px;

}

 

.delete-button,

.modify-button {

  background-color: #dc3545;

  color: #fff;

  border: none;

  padding: 3px 3px; /* 将这里的数值改小 */

  border-radius: 3px;

  cursor: pointer;

  height: 30px;

  line-height: 200%;

  font-size: 12px;

}

 

.button-group {

  display: flex;

  position: absolute;

  top: 5px;

  right: 10px;

}

 

.delete-button {

  margin-left: 5px;

}

.back-button {

  margin-left: 10px;

}

 

/* Add font color */

.type.income {

  color: #28a745; /* Green color */

}

 

.type.expense {

  color: #dc3545; /* Red color */

}

 

/* Style for input fields */

.edit-input {

  width: 100%;

  padding: 2px 5px;

  font-size: 16px;

}

 

/* Photo Modal Styles */

.photo-modal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 9999; /* Ensure the modal is above other elements */

}

 

.modal-photo {

  max-width: 80%; /* Adjust the max width as needed */

  max-height: 80%; /* Adjust the max height as needed */

}

</style>