FE-V2-XCX/pages/casuallyPat.vue

<!-- 随手拍 -->
<template>
    <view id="casuallyPat">
        <view class="casuallyPatList-page-go" :class="casuallyNum>0?'casuallyPatList-page-go-num':''" v-if="casuallyType" @click="goPage">
            <view>收到随手拍</view>
            <view>未处理{{casuallyNum}}条</view>
            <img src="@/images/icon_04.png">
        </view>
        <view class="casuallyPat-page">
            <view class="picker-box">
                <view class="left-box">实验室：</view>
                <view class="right-box">
                    <picker @change="bindPickerChange" :value="laboratoryIndex" :range="laboratory">
                        <view class="right-min-box">
                            <view :class="{'colorA':newData.laboratory=='请选择实验室'}">{{newData.laboratory}}</view>
                            <img src="@/images/icon_06.png">
                        </view>
                    </picker>
                </view>
            </view>
            <view class="up-img-box">
                <view class="title-view">照片:</view>
                <view class="img-max-box">
                    <view class="img-box" v-for="(item,index) in newData.imgList" :key="index">
                        <img class="img-data" :src="item">
                        <img class="position-img" src="@/images/icon_ssp_closure.png" @click="delImg(index)">
                    </view>
                    <img class="add-button" src="@/images/icon_07.png" @click="selectImage" v-if="newData.imgList.length<9">
                </view>
            </view>
            <view class="input-box">
                <view class="left-box">描述：</view>
                <textarea v-model="newData.text" maxlength="200" placeholder="请输入描述"></textarea>
            </view>
        </view>
        <view class="up-button-box" @click="upDataButton">提交</view>
    </view>
</template>

<script>
    import { config } from '@/api/request/config.js'
    import { getSubjectDict,addPhotoNote,myIsadmin } from '@/api/index.js'
    import { appReceivePhotoNote } from '@/api/index.js'
    export default {
        data() {
            return {
                userType:0,
				casuallyType:false,
                //收到未处理随手拍数量
                casuallyNum:"",
                laboratory:['请选择实验室'],
                laboratoryList:[],
                laboratoryIndex:0,
                newData:{
                    laboratory:"请选择实验室",
                    text:"",
                    imgList:[],
                    realImgList:[]
                }
            }
        },
        onLoad() {
            this.userType = uni.getStorageSync('userType')
        },
        onShow(){
			this.myIsadmin();
            this.getSubjectDict();
            if(this.userType == 1){
                this.appReceivePhotoNote();
            }
        },
        methods: {
            goPage(){
                uni.navigateTo({
                    url: '/pages_manage/workbench/receiveCasuallyPat/receiveCasuallyPat',
                });
            },
            //获取管理员工作台随手拍数量数据
            async appReceivePhotoNote(){
                const {data} = await appReceivePhotoNote();
                if(data.code == 200){
                    this.casuallyNum = data.data.photoCount;
                }
            },
            //提交按钮
            upDataButton(){
                let self = this;
                if(self.newData.laboratory == '请选择实验室'){
                    uni.showToast({
                        title: '请选择实验室',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    return
                }
                if(!self.newData.text){
                    uni.showToast({
                        title: '请输入描述信息',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    return
                }
                if(!self.newData.imgList[0]){
                    uni.showToast({
                        title: '请添加图片',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    return
                }
                uni.showModal({
                    content: '确认要提交吗?',
                    cancelColor:"#999",
                    confirmColor:"#0183FA",
                    success: function (res) {
                        if (res.confirm) {
                            self.addPhotoNote();
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
			async myIsadmin(){
				let self = this;
				let {data} = await myIsadmin()
                if(data.code == 200){
					this.casuallyType = data.data;
                }
			},
            // 随手拍实验室列表
            async getSubjectDict(){
                let self = this;
                let {data} = await getSubjectDict()
                if(data.code == 200){
                    if(data.data[0]){
                        let list = [];
                        for(let i=0;i<data.data.length;i++){
                            list.push(data.data[i].name);
                        }
                        this.laboratory = list;
                        this.laboratoryList = data.data;
                    }
                    // this.violationData = data.data;
                }
            },
            // 随手拍提交
            async addPhotoNote(){
                let self = this;
                let obj = {
                    imgUrls:self.newData.realImgList,
                    subjectId:self.laboratoryList[self.laboratoryIndex].id,
                    describe:self.newData.text,
                }
                let {data} = await addPhotoNote(obj)
                if(data.code == 200){
                    uni.showToast({
                        title: '提交成功',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    setTimeout(function(){
                        uni.navigateBack();
                    },2000);
                }
            },
            //实验室选择器
            bindPickerChange(e){
                this.laboratoryIndex = e.target.value;
                this.newData.laboratory = this.laboratory[this.laboratoryIndex];
            },
            // 图片上传
            selectImage(index) {
                let self = this;
                if(self.newData.imgList.length>4){
                    uni.showToast({
                        title: '最多上传5张图片',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    return
                }
                wx.chooseImage({
                    count: 1,
                    sizeType: ["original", "compressed"],
                    sourceType: ["album", "camera"],
                    success: function(res) {
						console.log(res)
                        let tempFilePaths = res.tempFilePaths[0];
                        self.uploadImg(tempFilePaths,index);
                    }
                });
            },
            async uploadImg(tempFilePaths,index){
                var self = this;
                uni.showLoading({
                    title: '上传中',
                    mask: true
                });
                uni.uploadFile({
                    url: config.base_url+'/file/upload', //仅为示例，非真实的接口地址
                    header:{'Authorization':uni.getStorageSync('token')},
                    filePath: tempFilePaths,
                    name: 'file',
                    formData: {
                        'user': 'test'
                    },
                    success: (uploadFileRes) => {
                        let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){
						    var url=config.base_url+res.data.url;
                            url=url.replace("//","/").replace("https:/","https://").replace("http:/","http://");
							self.newData.imgList.push(url);
                            self.newData.realImgList.push(res.data.url)
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
                    },
                    fail: err => {},
                    complete: () => {
                        uni.hideLoading()
                    }
                });
            },
            //删除图片
            delImg(index){
                this.newData.imgList.splice(index,1);
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #casuallyPat{
        height:100%;
        width:100%;
        background #f5f5f5
        overflow-y scroll
		.casuallyPatList-page-go-num{
			background rgba(249,95,95,0.2)!important;
            view:nth-child(2){
                color:#F95F5F!important;
            }
		}
        .casuallyPatList-page-go{
			background rgba(0,0,0,0.1);
            height:80rpx;
            display flex
            view{
                font-size:28rpx;
                line-height:80rpx;
            }
            view:nth-child(1){
                margin-left:21rpx;
                flex:1;
                color:#333;
            }
            view:nth-child(2){
                color:#333;
                margin-right:30rpx;
            }
            img:nth-child(3){
                margin:29rpx 20rpx 0 0;
                width:12rpx;
                height:24rpx;
            }
        }
        .casuallyPat-page{
            background #fff
            margin:20rpx;
            overflow hidden
            border-radius:20rpx;
            padding:30rpx;
            .picker-box{
                height:80rpx;
                display flex
                .left-box{
                    width:140rpx;
                    line-height:80rpx;
                    font-size: 30rpx;
                    color:#333;
                }
                .right-box{
                    flex:1;
                    width:470rpx;
                    .right-min-box{
                        display: flex;
                        height:76rpx;
                        border:2rpx solid #E0E0E0;
                        border-radius: 10rpx;
                        .colorA{
                            color:#999!important;
                        }
                        view{
                            flex:1;
                            font-size: 24rpx;
                            color: #333;
                            margin-left:22rpx;
                            line-height:78rpx;
                        }
                        img{
                            width:24rpx;
                            height:12rpx;
                            margin:32rpx 16rpx 0 0;
                        }
                    }
                }
            }
            .input-box{
                height:250rpx;
                display flex
                margin-top:30rpx;
                .left-box{
                    width:140rpx;
                    line-height:80rpx;
                    font-size: 30rpx;
                    color:#333;
                }
                textarea{
                    width:470rpx;
                    border-radius: 10rpx;
                    border:2rpx solid #E0E0E0;
                    height:206rpx;
                    padding:20rpx;
                    font-size: 24rpx;
                    color: #333;
                }
            }
            .up-img-box{
                display flex
                margin-top:30rpx;
                .title-view{
                    width:140rpx;
                    line-height:80rpx;
                    font-size: 30rpx;
                    color:#333;
                }
                .img-max-box{
                    width:510rpx;
                    .img-box{
                        display inline-block
                        height:150rpx;
                        width:150rpx;
                        position relative
                        margin:0 20rpx 20rpx 0;
                        .img-data{
                            height:150rpx;
                            width:150rpx;
                        }
                        .position-img{
                            position absolute
                            right:0;
                            top:0;
                            width:36rpx;
                            height:36rpx;
                        }
                    }
                    .add-button{
                        display inline-block
                        height:150rpx;
                        width:150rpx;
                    }
                }
            }
        }
        .up-button-box{
            width: 550rpx;
            height: 80rpx;
            line-height: 80rpx;
            background: #0183FA;
            border-radius: 20rpx;
            font-size:30rpx;
            margin:80rpx auto;
            text-align center;
            color:#fff;
        }
    }
</style>