‹
外部商品打卡
按以下步骤完成本次外部平台商品购买打卡：
1
前往外部平台完成商品购买
2
收到商品后，拍摄实物照片
3
上传照片，提交完成打卡任务
📷
拍照 / 相册选择商品实物照片
{{ submitting ? '提交中...' : '✓ 提交完成打卡' }}
.page { min-height: 100vh; background: $facade-fill-gray-50; }
.nav-bar { height: 88rpx; padding: 24rpx 24rpx 0; display: flex; align-items: flex-end; }
.nav-left { display: flex; align-items: center; gap: 10rpx; }
.nav-icon { font-size: 48rpx; color: $facade-text-strong; line-height: 1; }
.nav-title { font-size: 34rpx; font-weight: 600; color: $facade-text-strong; }
.content { padding-bottom: 40rpx; }
.card { margin: 16rpx 20rpx; background: $app-surface; border-radius: 20rpx; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05); }
.card-header { display: flex; align-items: center; gap: 10rpx; padding: 20rpx 24rpx 8rpx; border-bottom: 1rpx solid $facade-fill-2; background: linear-gradient(90deg, $uni-primary-pale, $app-surface); }
.card-icon { font-size: 32rpx; }
.card-title { font-size: 30rpx; font-weight: 600; color: $facade-text-strong; }
.card-body { padding: 24rpx; }
.task-desc { font-size: 26rpx; color: #6B7280; line-height: 1.6; display: block; margin-bottom: 20rpx; }
.step-list { display: flex; flex-direction: column; gap: 16rpx; }
.step-item { display: flex; align-items: center; gap: 16rpx; }
.step-num {
width: 44rpx; height: 44rpx; border-radius: 50%;
background: linear-gradient(135deg, $dim-body, $brand-primary);
color: $app-surface; font-size: 24rpx; font-weight: 600;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.step-text { font-size: 26rpx; color: #374151; }
.upload-area {
width: 100%; height: 320rpx;
border: 2rpx dashed #D1D5DB; border-radius: 16rpx;
display: flex; align-items: center; justify-content: center;
background: $facade-fill-gray-50; overflow: hidden;
margin-bottom: 24rpx;
}
.photo-preview { width: 100%; height: 100%; }
.upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12rpx; }
.upload-icon { font-size: 72rpx; }
.upload-text { font-size: 26rpx; color: #9CA3AF; }
.submit-btn {
background: linear-gradient(135deg, $dim-body, $brand-primary);
color: $app-surface; text-align: center; padding: 22rpx 0;
border-radius: 14rpx; font-size: 30rpx; font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(249,115,22,0.3);
}
.submit-btn:active { transform: scale(0.98); }
.submitting { opacity: 0.6; }
.bottom-spacer { height: 40rpx; }