冲刺记录8
今日任务：完成了新界面的设计，添加删除修改查询功能
遇到困难：查询后会在之前显示的内容下显示，希望能够去掉之前的内容
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;
}
