building-materials-shop-uniapp-241014/pages_order/order/pictureOrder.vue

<template>
	<view class="hand-top">
		<navbar
		title="快捷下单"
		leftClick 
		@leftClick="$utils.navigateBack"
		/>
		<view class="picture-top">
			<view class="left-icon"></view>
			<text>拍照下单</text>
		</view>
		<view class="picture-upload">
			<view class="upload-content" @click="chooseImage" v-if="!imageUrl">
				<uv-icon name="camera-fill" color="#D03F25" size="200"></uv-icon>
			</view>
            <view class="image-preview" v-else>
                <image :src="imageUrl" mode="aspectFit" class="preview-img"></image>
                <view class="preview-actions">
                    <view class="action-btn delete" @click="deleteImage">
                        <uv-icon name="trash" size="40rpx" color="#D03F25"></uv-icon>
                        <text>删除</text>
                    </view>
                    <view class="action-btn retake" @click="chooseImage">
                        <uv-icon name="camera" size="40rpx" color="#D03F25"></uv-icon>
                        <text>重拍</text>
                    </view>
                </view>
            </view>
			<view class="text-upload">
				<text>(拍照上传你所需要识别的产品图片)</text>
			</view>
		</view>
		<view class="fast-order">
			<view class="picture-button" @click="submitPictureOrder" :style="imageUrl ? '' : 'opacity: 0.5;'">
				<text>快捷下单</text>
			</view>
		</view>
        
        <!-- 上传进度指示器 -->
        <view class="upload-progress" v-if="isUploading">
            <view class="progress-bg">
                <view class="progress-bar" :style="{width: uploadProgress + '%'}"></view>
            </view>
            <text class="progress-text">{{uploadProgress}}%</text>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '', // 图片本地路径
                imageOssUrl: '', // 上传到OSS后的图片路径
                isUploading: false, // 是否正在上传
                uploadProgress: 0, // 上传进度
                recognitionResult: null, // 识别结果
			};
		},
        methods: {
            // 选择图片
            chooseImage() {
                uni.chooseImage({
                    count: 1, // 只选择一张图片
                    sizeType: ['compressed'], // 压缩图片
                    sourceType: ['camera', 'album'], // 相机和相册都允许
                    success: (res) => {
                        // 获取选择的图片路径
                        this.imageUrl = res.tempFilePaths[0];
                        console.log('已选择图片', this.imageUrl);
                    },
                    fail: (err) => {
                        console.error('选择图片失败', err);
                    }
                });
            },
            
            // 删除图片
            deleteImage() {
                uni.showModal({
                    title: '提示',
                    content: '确定要删除这张图片吗？',
                    success: (res) => {
                        if (res.confirm) {
                            this.imageUrl = '';
                            this.imageOssUrl = '';
                            this.recognitionResult = null;
                        }
                    }
                });
            },
            
            // 提交图片订单
            submitPictureOrder() {
                if (!this.imageUrl) {
                    uni.showToast({
                        title: '请先拍照上传图片',
                        icon: 'none'
                    });
                    return;
                }
                
                if (this.isUploading) {
                    uni.showToast({
                        title: '正在上传中，请稍候',
                        icon: 'none'
                    });
                    return;
                }
                
                // 显示加载提示
                // uni.showLoading({
                //     title: '上传中...'
                // });
                
                this.isUploading = true;
                this.uploadProgress = 0;
                
                // 上传图片
                this.uploadImage();
            },
            
            // 上传图片
            uploadImage() {
                // 模拟上传进度
                const simulateProgress = () => {
                    this.uploadProgress = 0;
                    const interval = setInterval(() => {
                        this.uploadProgress += 5;
                        if (this.uploadProgress >= 90) {
                            clearInterval(interval);
                        }
                    }, 100);
                    return interval;
                };
                
                const progressInterval = simulateProgress();
                
                // 使用OSS上传服务上传图片
                this.$Oss.ossUpload(this.imageUrl).then(url => {
                    // 上传成功
                    clearInterval(progressInterval);
                    this.uploadProgress = 100;
                    this.imageOssUrl = url;
                    console.log('图片上传成功', url);
                    
                    // 调用拍照下单接口
                    this.createPictureOrder(url);
                }).catch(err => {
                    // 上传失败
                    clearInterval(progressInterval);
                    console.error('图片上传失败', err);
                    this.handleUploadFailed('图片上传失败，请重试');
                });
            },
            
            // 创建拍照订单
            createPictureOrder(imageUrl) {
                this.$api('addOrder', {
                    imageUrl: imageUrl,
                    type: '0', //0表示拍照下单
                }, res => {
                    uni.hideLoading();
                    this.isUploading = false;
                    
                    if (res.code === 0) {
                        // 下单成功
                        uni.showToast({
                            title: '下单成功',
                            icon: 'success',
                            duration: 1500,
                            success: () => {
                                uni.reLaunch({
                                	url: '/pages/index/index'
                                })
                            }
                        });
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: res.message || '下单失败',
                            showCancel: false
                        });
                    }
                }, err => {
                    // 错误处理
                    uni.hideLoading();
                    this.isUploading = false;
                    console.error('下单请求失败', err);
                    this.handleUploadFailed('网络请求失败，请检查网络连接');
                });
            },
            
            // 处理上传失败情况
            handleUploadFailed(message) {
                uni.hideLoading();
                this.isUploading = false;
                this.uploadProgress = 0;
                
                uni.showModal({
                    title: '上传失败',
                    content: message,
                    showCancel: false
                });
            }
        }
	}
</script>

<style scoped lang="scss">
	.hand-top{
		background-color: #ffffff;
        position: relative;
		.picture-top{
			color: #333333;
			height: 100rpx;
			display: flex;
			align-items: center;
			background-color: #ffffff;
			.left-icon{
				background-color: #D03F25;
				display: inline-block;
				width: 10rpx;
				height: 30rpx;
				border-radius: 100rpx;
				margin-left: 50rpx;
				margin-right: 20rpx;
				padding-bottom: 5rpx;
			}
		}
		.picture-upload{
			background-color: #ffffff;
			height: 550rpx;
			.upload-content{
				width: 680rpx;
				height: 400rpx;
				background-color: #ffffff;
				background-color: #F4F4F4;
				margin: auto;
				margin-top: 50rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 60rpx;
			}
            .image-preview {
                width: 680rpx;
                height: 400rpx;
                background-color: #F4F4F4;
                margin: auto;
                margin-top: 60rpx;
                border-radius: 20rpx;
                position: relative;
                overflow: hidden;
                
                .preview-img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
                
                .preview-actions {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 80rpx;
                    background-color: rgba(0, 0, 0, 0.5);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    
                    .action-btn {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        padding: 10rpx 30rpx;
                        
                        text {
                            color: #fff;
                            font-size: 24rpx;
                            margin-top: 6rpx;
                        }
                    }
                }
            }
			.text-upload{
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				color: #666666;
			}
			
		}
		.fast-order{
			.picture-button{
				color: #ffffff;
				background-color: #DC2828;
				width: 85%;
				height: 100rpx;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100rpx;
			}
		}
        
        .upload-progress {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600rpx;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 20rpx;
            padding: 30rpx;
            text-align: center;
            z-index: 999;
            
            .progress-bg {
                width: 100%;
                height: 20rpx;
                background-color: #eee;
                border-radius: 10rpx;
                overflow: hidden;
                margin-bottom: 20rpx;
                
                .progress-bar {
                    height: 100%;
                    background-color: #D03F25;
                    border-radius: 10rpx;
                    transition: width 0.2s;
                }
            }
            
            .progress-text {
                color: #fff;
                font-size: 28rpx;
            }
        }
	}
</style>