v3-lab-xcx/pages_student/accessApplication/accessApplication.vue

<!-- 准入申请 -->
<template>
    <view id="accessApplication">
        <view class="button-max-box" @click="goFaceImage">
            <img src="@/images/basicsModules/icon_001.png">
            <view>身份验证</view>
            <view :class="!identifyType?'colorA':'marginType'">{{!identifyType?'去认证':'已认证'}}</view>
            <img v-if="!identifyType" src="@/images/basicsModules/icon_04.png">
        </view>
        <view class="for-box" v-for="(item,index) in dataList" :key="index">
            <view class="button-view" @click="selectImage(index)" v-if="!item.url">+ 添加</view>
            <img :src="item.url" @click="selectImage(index)" v-else>
            <view class="for-title">{{item.materialName}}</view>
        </view>
        <view class="null-p"></view>
        <view class="bottom-button-view" @click="accessReview">提交</view>
    </view>
</template>

<script>
    import { config } from '@/api/request/config.js'
    import { studentinfoFacemy,subjectMaterialList,accessReview } from '@/api/apiDemo/index.js'
    export default {
        data() {
            return {
                identifyType:1,
                itemData:{},
                dataList:[]
            }
        },
        onLoad(option) {
            this.itemData = JSON.parse(decodeURIComponent(option.item));
            this.dataList = JSON.parse(decodeURIComponent(option.list));
            console.log("this.itemData",this.itemData)
            console.log("this.dataList",this.dataList)
            this.studentinfoFacemy();
            // this.subjectMaterialList();
        },
        methods: {
            //提交接口
            async accessReview(){
                let self = this;
                if(!this.identifyType){
                    uni.showToast({
                        title: '请先认证身份验证',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    return
                }
                if(!this.dataList[0]){
                    uni.showToast({
                        title: '该实验室未配置准入资格,无法申请~',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    return
                }
                let obj = {
                    subjectId:self.itemData.id,
                    securityGroupId:self.dataList[0].configureId,
                    buildId:self.itemData.buildId,
                    deptId:self.itemData.deptId,
                    approvalDetails:[],
                };
                for(let i=0;i<self.dataList.length;i++){
                    if(!self.dataList[i].url){
                        uni.showToast({
                            title: '请上传'+self.dataList[i].materialName,
                            icon:"none",
                            mask:true,
                            duration: 2000
                        });
                        return
                    }
                    let newObj = {
                        materialName:self.dataList[i].materialName,
                        materialUrl:self.dataList[i].url,

                    }
                    obj.approvalDetails.push(newObj);
                }
                const {data} = await accessReview(obj);
                if(data.code == 200){
                    uni.showToast({
                        title: '提交成功',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    setTimeout(function(){
                        uni.navigateBack();
                    },2000);
                }
            },
            //查询实验室下的安全准入资格材料表
            async subjectMaterialList(){
                let obj = {
                    subjectId:this.itemData.id
                }
                const {data} = await subjectMaterialList(obj)
                if(data.code == 200){
                    this.dataList = data.data;
                }
            },
            //获取当前身份人脸验证状态
            async studentinfoFacemy(){
                let obj = {
                    studentsId:uni.getStorageSync('userId')
                }
                const {data} = await studentinfoFacemy(obj)
                if(data.code == 200){
                    this.ifFaceFeature = data.data.ifFaceFeature;
                }
            },
            // 图片上传
            selectImage(index) {
                let self = this;
                wx.chooseImage({
                    count: 1,
                    sizeType: ["original", "compressed"],
                    sourceType: ["album", "camera"],
                    success: function(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+'/base/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){
							self.$set(self.dataList[index],'url',config.base_url+res.data.url);
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
                    },
                    fail: err => {},
                    complete: () => {
                        uni.hideLoading()
                    }
                });
            },
            goFaceImage(){
                if (!this.identifyType){
                    uni.navigateTo({
                        url: '/pages_basics/faceImage',
                    });
                }
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #accessApplication{
        height:100%;
        width:100%;
        display flex
        flex-direction column
        .button-max-box{
            height:100rpx;
            display flex
            background #fff
            margin-bottom:20rpx;
            img:nth-child(1){
                height:30rpx;
                width:30rpx;
                margin:37rpx 28rpx 33rpx 20rpx;
            }
            view{
                line-height:100rpx;
            }
            view:nth-child(2){
                flex:1;
                color:#333333;
                font-size: 28rpx;
            }
            view:nth-child(3){
                width:120rpx;
                text-align center;
                color:#CCCCCC;
                font-size: 28rpx;
            }
            img:nth-child(4){
                height:24rpx;
                width:12rpx;
                margin:39rpx 20rpx 0 0;
            }
            .colorA{
                color:#E45656!important;
            }
            .marginType{
                margin-right:12rpx;
            }
        }
        .for-box{
            height:430rpx;
            width:710rpx;
            margin:20rpx 20rpx 0;
            background: url("@/pages_student/images/icon_08.png")
            background-size 100%
            .button-view{
                text-align center
                line-height:348rpx;
                color: #999999;
                font-size:30rpx;
            }
            img{
                width:706rpx;
                height:344rpx;
                margin:2rpx;
                border-top-right-radius 20rpx
                border-top-left-radius 20rpx
            }
            .for-title{
                line-height:80rpx;
                margin-left:28rpx;
                color: #999999;
                font-size:30rpx;
            }
        }
        .bottom-button-view{
            font-size:30rpx;
            text-align center;
            color: #FFFFFF;
            width: 750rpx;
            height: 100rpx;
            line-height: 100rpx;
            background: #0183FA;
            margin-top:40rpx;
        }
        .null-p{
            flex:1;
        }
    }
</style>