bonus-material-app/src/pages/back/backCode.vue

<template>
    <view class="accept page-common">
        <div class="card">
            <div>任务信息</div>
            <uni-forms :model="taskInfo" label-width="160rpx" :border="true">
                <uni-forms-item label="退料单位" name="unitName">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.unitName }}</span>
                </uni-forms-item>
               <uni-forms-item label="退料工程：" name="proName">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.proName }}</span>
                </uni-forms-item>
                <uni-forms-item label="退料单号：" name="code">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.code }}</span>
                </uni-forms-item>
                <uni-forms-item label="退料人员：" name="backPerson">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.backPerson }}</span>
                </uni-forms-item>
                <uni-forms-item label="联系电话：" name="phone">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.phone }}</span>
                </uni-forms-item>
            </uni-forms>
        </div>
        <div class="card" style="margin-top: 10px;">
            <uni-row :gutter="24">
                <uni-col :span="6">接收方式：</uni-col>
                <uni-col :span="6">
                    <view class="coding-btn" @click="scanStart">编码识别</view>
                </uni-col>
                <uni-col :span="6">
                    <view class="coding-btn" @click="scanStart">编码识别</view>
                </uni-col>
                <uni-col :span="6">
                    <view class="coding-btn" @click="scanStart">二维码识别</view>
                </uni-col>
            </uni-row>
        </div>


        <div class="card" style="margin-top: 10px;">
           <!-- <div>扫码识别</div>
            <div style="width: 94%;height: 120px;margin: 10px;border: 1px solid #ccc;">
               
            </div> -->

            
            <uni-row :gutter="24" style="display: flex; align-items: center;margin-bottom: 10px;">
                <uni-col :span="6">设备编码：</uni-col>
                <uni-col :span="12">
                    <uni-easyinput placeholder="请输入内容" v-model="maCode"/>
                </uni-col>
                <uni-col :span="6">
                    <view class="coding-btn" style="padding: 10rpx 0;color: #fe9a09;background-color: #fff7eb;border: 1px solid #fe9a09;"
                        @click="getMaInfo"
                        >编码检索</view>
                </uni-col>
            </uni-row>
            <uni-row :gutter="24" style="display: flex; align-items: center;margin-bottom: 10px;">
                <uni-col :span="6">物资类型：</uni-col>
                <uni-col :span="16">
                    {{ typeName }}
                </uni-col>
            </uni-row>
            <uni-row :gutter="24" style="display: flex; align-items: center;margin-bottom: 10px;">
                <uni-col :span="6">规格型号：</uni-col>
                <uni-col :span="16">
                    {{ materialName }}
                </uni-col>
            </uni-row>
            <uni-row :gutter="24" style="display: flex; align-items: center;margin-bottom: 10px;">
                <uni-col :span="6">设备状态：</uni-col>
                <uni-col :span="16">
                    {{ maStatusName }}
                </uni-col>
            </uni-row>
            
            <uni-row :gutter="24" style="display: flex; align-items: center;margin-bottom: 10px;">
                <uni-col :span="6">外观判定：</uni-col>
                <uni-col :span="16">
                    <uni-easyinput placeholder="请输入内容" v-model="apDetection"/>
                </uni-col>
            </uni-row>
            <uni-row :gutter="24" style="display: flex; align-items: center;margin-bottom: 10px;">
                <uni-col :span="6">附件：</uni-col>
                <uni-col :span="16">
                    <div class="upload" @click="uploadImg" v-if="imgBeseUrl==''">+</div>
                    <div class="upload" @click="uploadImg" v-else>
						<image :src="imgBeseUrl" style="width: 160rpx;height: 160rpx;" mode=""></image>
					</div>
                </uni-col>
            </uni-row>
        </div>

        <div class="btn">
            <!-- <button class="btn-cont" @click="reject">取消</button> -->
            <button class="btn-cont" @click="submitCode">确认</button>
        </div>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'  
import { getMachine,insertApp } from '../../services/back.js';
import { baseURL } from '@/utils/http'
const taskInfo = ref({})    
const maId = ref("")  //编码
const maCode = ref("")  //编码
const typeName = ref("")//物资类型
const materialName = ref("")  //规格型号
const typeId = ref("")  //类型id
const maStatusName = ref("")  //状态
const apDetection = ref("")  //外观判定
const imgBeseUrl = ref("")  //图片展示
const bmFileInfos = ref([])//图片数组

//根据编码获取设备类型
const getMaInfo = () => {
    console.log(maCode.value)
    let param={
        "maCode":maCode.value,
        "unitId":taskInfo.value.unitId,
        "proId":taskInfo.value.proId
    }
    getMachine(param).then(res => {
		console.log(res)
        if(res.code==200){
            if(res.data&&res.data.length>0){
                typeName.value = res.data[0].typeName;
                materialName.value = res.data[0].materialName;
                maStatusName.value = res.data[0].maStatusName;
                maId.value = res.data[0].maId;
                typeId.value = res.data[0].typeId;
            }else{
                uni.showToast({ title: '该编码非该单位工程领用，不可退料！', icon: 'none' })
            }
        }
	}).catch(error => {
		console.log(error) 
	})  
}
// 扫码识别按钮
const scanStart = () => {
    console.log('编码识别--')
    // 只允许通过相机扫码
    uni.scanCode({
    	onlyFromCamera: true,
    	scanType: ['qrCode', 'pdf417'],
    	success: (res) => {
    		console.log('扫码结果：' + res.result); 
			maCode.value = res.result
    	},
    	fail: (err) => { 
    		// uni.showToast({
    		// 	title: '取消',
    		// 	icon: 'none'
    		// });
    	}
    });
}
//提交
const submitCode = () => {
    console.log(taskInfo.value)
    // console.log(typeList.value)
    let obj = {
       "maId":maId.value,
       "maCode":maCode.value,
       "typeId":typeId.value,
       "apDetection":apDetection.value,
       "bmFileInfos":bmFileInfos.value
    }
    let param = {
        "backApplyInfo":taskInfo.value,
        "backApplyDetails":obj
    }
    insertApp(param).then(res => { 
        console.log(res)
        if(res.code==200){
			uni.showToast({ title: '编辑成功', icon: 'none' })
			uni.navigateBack({
				delta: 1 // 返回到已存在的页面
			});
		}else{
			uni.showToast({ title: res.msg, icon: 'none' })
		}
	}).catch(error => {
		console.log(error) 
	})  
} 

//上传
const uploadImg = () => {
    uni.chooseImage({
    count: 1, //图片可选择数量
    sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
    sourceType: ['album', 'camera',], //album 从相册选图，camera 使用相机，默认二者都有。
    success: res => {
        console.log(res)
        let imgFiles = res.tempFilePaths //图片的本地文件路径列表
		imgBeseUrl.value = imgFiles[0]
        // console.log('本地地址', imgFiles)
        // console.log('请求地址', baseURL+"/file/upload") 
		uni.uploadFile({
			// url: baseURL+"/file/upload",//app
			url: "/file/upload",//h5
			filePath: imgFiles[0],
			name: 'file', 
			success: (res) => {
				res = JSON.parse(res.data)
				console.log('上传成功', res.code);
				console.log('上传成功', res.data);
				if(res.code&&res.code==200){
					let obj = {
						"name":res.data.name,
						"url":res.data.url,
						"taskType":"10"
					}
					// console.log(obj)
					bmFileInfos.value = [obj]
					uni.showToast({ title: '上传成功', icon: 'none' })
				}else{
					bmFileInfos.value = []
					uni.showToast({ title: '上传失败', icon: 'none' })
				}
			},
			fail: (err) => {
			  console.error('上传失败', err);
			}
		});
        // this.$refs.vForm.clearValidate()
    }
	})
}

onLoad((options)=>{
	console.log(options)
	taskInfo.value = JSON.parse(options.taskInfo)
    console.log(taskInfo.value)
})
</script>

<style lang="scss">
.accept {
    padding: 10px;
    height: 100%;
    word-break: break-all;
}
.card {
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2upx 4upx 0 rgba(0, 0, 0, 0.1);
}
.coding-btn {
    padding: 5rpx 0;
    background-color: #409eff;
    border-radius: 6rpx;
    text-align: center;
    color: #fff;
    font-size: 14px;
}
.upload {
    width: 80px;
    height: 80px;
    background-color: #f5f5f5;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #ccc;
    margin-top: 10px;
}
.btn {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;

    .btn-cont {
        width: 40%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #3784fb;
        color: #fff;
        border-radius: 20px;
        // 取消按钮淡蓝色
        // &:first-child {
        //     background-color: #aacefb;
        // }
    }
}
</style>