冲刺记录4

今日任务：测试相机功能，使得程序可以i调用手机相机进行拍照

遇到困难：在电脑上无法测试能否调用相机，不方便测试

<template>

    <view class="container" :style="{ backgroundImage: `url(${backgroundImage})` }">

        <view class="photo-container">

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

            <view class="photo-frame" v-if="photo">

                <image :src="photo" alt="照片预览" class="preview-photo"></image>

            </view>

        </view>

        <view class="blank-space1"></view>

        <view class="input-container">

            <input type="text" v-model="place" placeholder="地点" class="input-field">

        </view>

        <view class="input-container">

            <input type="text" v-model="remark" placeholder="备注" class="input-field">

        </view>

        <view class="bottom-nav">

            <!-- 修改底部导航栏样式及图标 -->

            <view class="nav-item" @click="gototongji">

                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22" style="transform: scale(0.3);">

                    <path

                        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"

                        fill="none" stroke="#fff" stroke-width="1" />

                </svg>

                <text x="12" y="20" fill="#000000" text-anchor="middle">足迹</text>

            </view>

            <view class="nav-item" @click="gotohome">

                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22" style="transform: scale(0.3);">

                    <path

                        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"

                        fill="none" stroke="#fff" stroke-width="1" />

                </svg>

                <text x="12" y="22" fill="#000000" text-anchor="middle">社交</text>

            </view>

            <view class="nav-item" @click="gotojilu">

                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22" style="transform: scale(0.3);">

                    <path

                        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"

                        fill="none" stroke="#fff" stroke-width="1" />

                </svg>

                <text x="12" y="12" fill="#000000" text-anchor="middle">记录</text>

            </view>

            <view class="nav-item" @click="gotoask">

                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22" style="transform: scale(0.3);">

                    <path

                        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"

                        fill="none" stroke="#fff" stroke-width="1" />

                </svg>

                <text x="12" y="12" fill="#000000" text-anchor="middle">问答</text>

            </view>

        </view>

        <view class="btn-container">

            <button @click="capturePhoto" class="btn camera-btn">拍照</button>

            <button @click="getCurrentLocation" class="btn location-btn">定位</button>

            <button @click="recognizePhoto" class="btn recognition-btn">识别</button> <!-- 新增的识别按钮 -->

            <button @click="addIncomeRecord" class="btn income-btn">保存</button>

            <button @click="handleClick" class="btn s-btn">上传</button>

        </view>