hookehuyr

feat(拍照功能): 添加拍照上传功能并显示格式限制提示

添加拍照或选择媒体文件上传功能,支持图片和视频格式
显示文件格式和大小的限制提示信息
处理上传过程中的错误提示和成功反馈
...@@ -55,9 +55,12 @@ ...@@ -55,9 +55,12 @@
55 55
56 <!-- Photo button --> 56 <!-- Photo button -->
57 <view class="px-5 mt-6"> 57 <view class="px-5 mt-6">
58 - <view class="w-full bg-blue-500 text-white py-3 rounded-lg flex items-center justify-center"> 58 + <view @tap="openCamera" class="w-full bg-blue-500 text-white py-3 rounded-lg flex flex-col items-center justify-center">
59 - <Photograph size="20" class="mr-2" /> 59 + <view class="flex items-center justify-center">
60 - 拍照留念,奖励积分 60 + <Photograph size="20" class="mr-2" />
61 + 拍照留念,奖励积分
62 + </view>
63 + <view class="text-xs text-gray-200 mt-1">支持jpg、png格式图片(≤10MB)或60秒内视频</view>
61 </view> 64 </view>
62 </view> 65 </view>
63 66
...@@ -90,6 +93,7 @@ import Taro from '@tarojs/taro'; ...@@ -90,6 +93,7 @@ import Taro from '@tarojs/taro';
90 import { Setting, Photograph, Right } from '@nutui/icons-vue-taro'; 93 import { Setting, Photograph, Right } from '@nutui/icons-vue-taro';
91 import BottomNav from '../../components/BottomNav.vue'; 94 import BottomNav from '../../components/BottomNav.vue';
92 import PointsCollector from '@/components/PointsCollector.vue' 95 import PointsCollector from '@/components/PointsCollector.vue'
96 +import BASE_URL from '@/utils/config';
93 97
94 const todaySteps = ref(2000); 98 const todaySteps = ref(2000);
95 const pointsCollectorRef = ref(null) 99 const pointsCollectorRef = ref(null)
...@@ -149,4 +153,89 @@ const goToProfile = () => { ...@@ -149,4 +153,89 @@ const goToProfile = () => {
149 const openAlbumList = () => { 153 const openAlbumList = () => {
150 Taro.navigateTo({ url: '/pages/AlbumList/index' }); 154 Taro.navigateTo({ url: '/pages/AlbumList/index' });
151 }; 155 };
156 +
157 +/**
158 + * 显示提示信息
159 + */
160 +const showToast = (message, type = 'success') => {
161 + const icon = type === 'error' ? 'error' : 'success';
162 + Taro.showToast({
163 + title: message,
164 + icon: icon,
165 + duration: 2000
166 + });
167 +};
168 +
169 +/**
170 + * 上传文件到服务器
171 + */
172 +const uploadFile = (filePath) => {
173 + // 显示上传中提示
174 + Taro.showLoading({
175 + title: '上传中',
176 + mask: true
177 + });
178 +
179 + wx.uploadFile({
180 + url: BASE_URL + '/admin/?m=srv&a=upload',
181 + filePath,
182 + name: 'file',
183 + header: {
184 + 'content-type': 'multipart/form-data',
185 + },
186 + success: function (res) {
187 + let upload_data = JSON.parse(res.data);
188 + Taro.hideLoading({
189 + success: () => {
190 + if (res.statusCode === 200) {
191 + console.log('上传成功', upload_data.data.src);
192 + showToast('上传成功', 'success');
193 + } else {
194 + showToast('服务器错误,稍后重试!', 'error');
195 + }
196 + },
197 + });
198 + },
199 + fail: function (res) {
200 + Taro.hideLoading({
201 + success: () => {
202 + showToast('上传失败,稍后重试!', 'error');
203 + }
204 + });
205 + }
206 + });
207 +};
208 +
209 +const openCamera = () => {
210 + Taro.chooseMedia({
211 + count: 1,
212 + mediaType: ['image', 'video'],
213 + sourceType: ['album', 'camera'],
214 + maxDuration: 60,
215 + sizeType: ['compressed'],
216 + success: function (res) {
217 + const tempFile = res.tempFiles[0];
218 + const { tempFilePath, size, duration, fileType } = tempFile;
219 +
220 + if (fileType === 'image') {
221 + if (size > 10 * 1024 * 1024) {
222 + showToast('图片大小不能超过10MB', 'error');
223 + return;
224 + }
225 + }
226 +
227 + if (fileType === 'video') {
228 + if (duration > 60) {
229 + showToast('视频时长不能超过60秒', 'error');
230 + return;
231 + }
232 + }
233 +
234 + uploadFile(tempFilePath);
235 + },
236 + fail: function () {
237 + showToast('选择文件失败', 'error');
238 + }
239 + });
240 +}
152 </script> 241 </script>
......