6.12

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

打码量(行)：150

博客量(篇)：1

了解到知识点：检测程序bug

</view>
</template>

methods: {
addIncomeRecord() {
if (!this.place) {
uni.showToast({
title: '请输入地点',
icon: 'none'
});
return;
}
const record = {
type: 'income',
place: this.place,
date: new Date().toISOString().substr(0, 10),
remark: this.remark || '无备注',
photo: this.photo
};
this.saveRecord(record);
},
async handleClick() {
try {
// 使用fetch API发送POST请求
const response = await fetch('http://192.168.1.176:8081/book', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: this.inputValue,
date:new Date().toISOString().substr(0, 10),
place:this.place,
remark:this.remark,
photo: this.photo,
}) // 传递输入框的值，并去除首尾空格
});

// 检查响应状态码
if (response.ok) {
// 请求成功处理
const data = await response.json(); // 解析响应数据
console.log(data); // 输出后端返回的数据
this.saveRecord(data);
alert('写入成功！'); // 弹出成功提示
} else {
// 请求失败处理
console.error('写入失败:', response.statusText); // 输出错误信息
alert('写入失败，请稍后重试！'); // 弹出错误提示
}
} catch (error) {
// 捕获异常并处理
console.error('请求失败:', error); // 输出错误信息
alert('请求失败，请稍后重试！'); // 弹出错误提示
}

},
saveRecord(record) {
let records = uni.getStorageSync('records') || [];
records.push(record);
uni.setStorageSync('records', records);
uni.showToast({
title: '记录添加成功',
icon: 'success'
});
this.resetForm();
},
resetForm() {
this.place = '';
this.remark = '';
this.photo = null;
this.loadRecords();
},
capturePhoto() {
uni.chooseImage({
count: 1,
sourceType: ['camera'],
success: (res) => {
const tempFilePath = res.tempFilePaths[0];
uni.request({
url: tempFilePath,
method: 'GET',
responseType: 'arraybuffer',
success: (response) => {
const base64Image = 'data:image/jpeg;base64,' + uni
.arrayBufferToBase64(response.data);
this.photo = base64Image;
},
fail: (err) => {
console.error('获取图片失败:', err);
uni.showToast({
title: '获取图片失败',
icon: 'none'
});
}
});
},
fail: (err) => {
console.error('选择图片失败:', err);
uni.showToast({
title: '选择图片失败',
icon: 'none'
});
}
});
},

loadRecords() {
this.records = uni.getStorageSync('records') || [];
},
getCurrentLocation() {
uni.getLocation({
type: 'wgs84',
success: (res) => {
let latitude = res.latitude;
let longitude = res.longitude;

uni.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
data: {
key: 'SAJBZ-ARBL3-J7J3D-RCA7O-FTVNZ-4JBYJ',
location: `${latitude},${longitude}`,
get_poi: 1
},
success: (res) => {
if (res.data && res.data.result && res.data.result.address) {
let address = res.data.result.address;
this.place = address;
} else {
console.error('无法获取地址信息或返回数据结构不正确:', res.data);
uni.showToast({
title: '获取位置信息失败',
icon: 'none'
});
}
},
fail: (err) => {
uni.showToast({
title: '获取位置信息失败',
icon: 'none'
});
console.error('获取位置信息失败：', err);
}
});
},
fail: (err) => {
uni.showToast({
title: '获取位置信息失败',
icon: 'none'
});
console.error('获取位置信息失败：', err);
}
});
},
gotohome() {
uni.navigateTo({
url: '/pages/social/social'
});
},
gotojilu() {
uni.navigateTo({
url: '/pages/jilu/jilu'
});
},
gototongji() {
uni.navigateTo({
url: '/pages/tongji/tongji'
});
},
gotoask() {
uni.navigateTo({
url: '/pages/ask/ask'
});
},
async recognizePhoto() {
if (!this.photo) {
uni.showToast({
title: '请先上传照片',
icon: 'none'
});
return;
}

try {
await this.getAccessToken();
} catch (error) {
uni.showToast({
title: '获取Access Token失败，请检查Client ID和Client Secret',
icon: 'none'
});
console.error('获取Access Token失败：', error);
return;
}

const base64Image = this.photo.split(',')[1];

uni.request({
url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token=' +
this.accessToken,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
data: {
image: base64Image
},
success: (res) => {
if (res.data.error_code) {
uni.showToast({
title: '识别失败，请重试',
icon: 'none'
});
console.error('识别失败：', res.data.error_msg);
} else {
const firstKeyword = res.data.result[0]
.keyword; // Get the first recognized keyword
console.log('识别结果：', firstKeyword); // Output the first recognized keyword
this.remark =
firstKeyword; // Assign the first recognized keyword to the remark input field
uni.showToast({
title: '识别成功',
icon: 'success'
});
}
},
fail: (err) => {
uni.showToast({
title: '请求失败，请重试',
icon: 'none'
});
console.error('请求失败：', err);
}
});
},

async getAccessToken() {
console.log('正在获取Access Token...');
try {
const res = await uni.request({
url: 'https://aip.baidubce.com/oauth/2.0/token',
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
grant_type: 'client_credentials',
client_id: this.baiduClientId,
client_secret: this.baiduClientSecret
}
});
console.log('获取Access Token的响应：', res);
if (res && res.data && res.data.access_token) {
this.accessToken = res.data.access_token;
} else {
console.error('获取Access Token失败：', res);
throw new Error('Failed to get access token');
}
} catch (error) {
console.error('获取Access Token失败：', error);
throw error;
}
}
},
mounted() {
this.loadRecords();
}
};
</script>

/* 修改导航栏图标样式 */
.nav-item {
flex: 1;
text-align: center;
cursor: pointer;
}

.nav-item text {
vertical-align: middle;
/* Align text vertically in the middle */
}

.blank-space1 {
height: 20px;
}

.blank-space {
height: 20px;
}

.container {
padding: 20px;
/* 设置背景图片填充整个容器 */
background-size: cover;
/* 让背景图片居中 */
background-position: center;
/* 设置背景图片不重复 */
background-repeat: no-repeat;
/* 设置容器高度为页面高度 */
height: 100vh;
border: 1px solid pink;
/* 设置边框为粉色 */
}

.input-container {
margin-bottom: 20px;
position: relative;
/* 使按钮能够相对于输入框定位 */
}

.input-field {
padding: 10px;
border: 1px solid #FFC0CB;
/* 设置粉色边框 */
border-radius: 5px;
line-height: 30px;
/* 输入框的高度是 30px */
}

.location-btn {
background-color: #FFC1C1;
color: #fff;
}

.btn-container {
text-align: center;
display: flex;
justify-content: center;
}

.btn {
width: 100px;
padding: 10px 0;
border-radius: 5px;
cursor: pointer;
margin: 0 5px;
}

.income-btn {
background-color: #28a745;
color: #fff;
}
.s-btn{
background-color: #FFDAB9;
color: #fff;
}

.recognition-btn {
background-color: #FFEC8B;
color: #fff;
}

.expense-btn {
background-color: #dc3545;
color: #fff;
}

.camera-btn {
background-color: #007bff;
color: #fff;
}

.photo-container {
margin-top: 10px;
text-align: center;
}

.photo-frame {
max-width: 300px;
/* 最大宽度 */
margin: 0 auto;
/* 居中显示 */
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
/* 隐藏超出相框的部分 */
}

.photo-frame img {
width: 100%;
height: auto;
display: block;
/* 防止图片底部留白 */
object-fit: cover;
/* 图片等比例缩放以填充容器 */
object-position: center bottom;
/* 图片底部与相框底部对齐 */
}

.preview-photo {
max-width: 100%;
/* 图片宽度最大不超过相框宽度 */
max-height: 100%;
/* 图片高度最大不超过相框高度 */
}

.record-item {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
position: relative;
width: 100%;
}

.record {
display: flex;
align-items: center;
}

.type {
font-size: 20px;
margin-right: 10px;
}

.details {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
}

.amount,
.date,
.remark {
font-size: 18px;
margin-right: 10px;
}

.delete-button,
.modify-button {
background-color: #dc3545;
color: #fff;
border: none;
padding: 3px 6px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
}

.button-group {
display: flex;
position: absolute;
top: 5px;
right: 10px;
}

.delete-button {
margin-left: 5px;
}

/* Add font color */
.type.income {
color: #28a745;
}

.type.expense {
color: #dc3545;
}

.record-photo {
margin-top: 10px;
max-width: 100%;
max-height: 200px;
}
</style>

posted @ 2024-06-12 17:24 赵千万阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部

zhaoqianwan

6.12

公告