hookehuyr

feat(上传): 添加独立的媒体上传页面

实现媒体文件上传功能,包括图片和视频的选择、预览和上传
移除Dashboard页面的上传逻辑,改为跳转到新页面
添加文件大小和时长限制校验
...@@ -29,6 +29,7 @@ export default { ...@@ -29,6 +29,7 @@ export default {
29 'pages/AlbumList/index', 29 'pages/AlbumList/index',
30 'pages/ActivitiesCover/index', 30 'pages/ActivitiesCover/index',
31 'pages/PointsList/index', 31 'pages/PointsList/index',
32 + 'pages/UploadMedia/index',
32 ], 33 ],
33 window: { 34 window: {
34 backgroundTextStyle: 'light', 35 backgroundTextStyle: 'light',
......
...@@ -60,7 +60,6 @@ ...@@ -60,7 +60,6 @@
60 <Photograph size="20" class="mr-2" /> 60 <Photograph size="20" class="mr-2" />
61 拍照留念,奖励积分 61 拍照留念,奖励积分
62 </view> 62 </view>
63 - <view class="text-xs text-gray-200 mt-1">支持jpg、png格式图片(≤10MB)或60秒内视频</view>
64 </view> 63 </view>
65 </view> 64 </view>
66 65
...@@ -206,36 +205,10 @@ const uploadFile = (filePath) => { ...@@ -206,36 +205,10 @@ const uploadFile = (filePath) => {
206 }); 205 });
207 }; 206 };
208 207
208 +/**
209 + * 打开拍照上传页面
210 + */
209 const openCamera = () => { 211 const openCamera = () => {
210 - Taro.chooseMedia({ 212 + Taro.navigateTo({ url: '/pages/UploadMedia/index' });
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 } 213 }
241 </script> 214 </script>
......
1 +export default {
2 + navigationBarTitleText: '拍照留念',
3 + navigationBarBackgroundColor: '#ffffff',
4 + navigationBarTextStyle: 'black',
5 + backgroundColor: '#f9fafb'
6 +}
...\ No newline at end of file ...\ No newline at end of file
1 +.upload-media-page {
2 + min-height: 100vh;
3 + background-color: #f9fafb;
4 +}
5 +
6 +.upload-area {
7 + padding: 1rem;
8 +}
9 +
10 +.upload-button {
11 + border: 2px dashed #d1d5db;
12 + border-radius: 0.5rem;
13 + padding: 2rem;
14 + display: flex;
15 + flex-direction: column;
16 + align-items: center;
17 + justify-content: center;
18 + margin-bottom: 1rem;
19 + background-color: #ffffff;
20 + transition: all 0.3s ease;
21 +
22 + &:active {
23 + background-color: #f3f4f6;
24 + border-color: #9ca3af;
25 + }
26 +}
27 +
28 +.preview-container {
29 + margin-bottom: 1rem;
30 +
31 + .preview-item {
32 + position: relative;
33 + border-radius: 0.5rem;
34 + overflow: hidden;
35 + background-color: #ffffff;
36 + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
37 + }
38 +
39 + .remove-button {
40 + position: absolute;
41 + top: 0.5rem;
42 + right: 0.5rem;
43 + width: 2rem;
44 + height: 2rem;
45 + background-color: rgba(0, 0, 0, 0.5);
46 + border-radius: 50%;
47 + display: flex;
48 + align-items: center;
49 + justify-content: center;
50 + z-index: 10;
51 + }
52 +
53 + .video-overlay {
54 + position: absolute;
55 + inset: 0;
56 + display: flex;
57 + align-items: center;
58 + justify-content: center;
59 +
60 + .play-button {
61 + width: 4rem;
62 + height: 4rem;
63 + background-color: rgba(0, 0, 0, 0.6);
64 + border-radius: 50%;
65 + display: flex;
66 + align-items: center;
67 + justify-content: center;
68 + }
69 + }
70 +}
71 +
72 +.file-info {
73 + margin-top: 0.75rem;
74 + padding: 0.75rem;
75 + background-color: #ffffff;
76 + border-radius: 0.5rem;
77 +}
78 +
79 +.action-buttons {
80 + display: flex;
81 + gap: 0.75rem;
82 +
83 + .button {
84 + flex: 1;
85 + padding: 0.75rem;
86 + border-radius: 0.5rem;
87 + text-align: center;
88 + font-weight: 500;
89 + transition: all 0.3s ease;
90 +
91 + &.secondary {
92 + background-color: #f3f4f6;
93 + color: #374151;
94 +
95 + &:active {
96 + background-color: #e5e7eb;
97 + }
98 + }
99 +
100 + &.primary {
101 + background-color: #3b82f6;
102 + color: #ffffff;
103 +
104 + &:active {
105 + background-color: #2563eb;
106 + }
107 + }
108 + }
109 +}
110 +
111 +.video-modal {
112 + position: fixed;
113 + inset: 0;
114 + background-color: #000000;
115 + z-index: 9999;
116 +
117 + .close-button {
118 + position: absolute;
119 + top: 1rem;
120 + right: 1rem;
121 + width: 2.5rem;
122 + height: 2.5rem;
123 + background-color: rgba(0, 0, 0, 0.5);
124 + border-radius: 50%;
125 + display: flex;
126 + align-items: center;
127 + justify-content: center;
128 + z-index: 10000;
129 + }
130 +
131 + video {
132 + width: 100vw;
133 + height: 100vh;
134 + position: absolute;
135 + top: 0;
136 + left: 0;
137 + }
138 +}
139 +
140 +.preview-modal {
141 + position: fixed;
142 + top: 0;
143 + left: 0;
144 + width: 100%;
145 + height: 100%;
146 + background: rgba(0, 0, 0, 1);
147 + z-index: 9999;
148 + display: flex;
149 + align-items: center;
150 + justify-content: center;
151 +
152 + .preview-container {
153 + position: relative;
154 + width: 100%;
155 + height: 100%;
156 + display: flex;
157 + align-items: center;
158 + justify-content: center;
159 + }
160 +
161 + .preview-image {
162 + max-width: 100%;
163 + max-height: 100%;
164 + object-fit: contain;
165 + }
166 +
167 + .close-btn {
168 + position: absolute;
169 + top: 20rpx;
170 + right: 20rpx;
171 + width: 60rpx;
172 + height: 60rpx;
173 + background: rgba(0, 0, 0, 0.5);
174 + border-radius: 50%;
175 + display: flex;
176 + align-items: center;
177 + justify-content: center;
178 + z-index: 10000;
179 + }
180 +}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.