动态存值总结

效果图:(填过信息的为红色,未填信息的为绿色)

点击图片时 出现弹框 填写信息

代码:

    //点击图片时弹窗
    info(id) {
      this.key_ID=id //保存图片id
      this.data_obj=JSON.parse(localStorage.getItem(`${id}`));//拿出存的(是个对象)
      this.data_obj?this.form=this.data_obj:''//如果存在就把存的数据给from没有不做任何操作
      this.axios.selectRooms({
          id: id
        }).then(res => {
          this.form = res.data;
          this.apartmentId = res.data.apartment_id;
        }).catch(res => {});
    },

    //弹窗确定按钮
    addroom(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.apartment_id = this.apartmentId;
            this.form.hoteldescribe_id = this.hoteldescribeId;
            this.form.student_user_id = this.student_user_id;
            this.form.hotel_group_id = this.$route.query.listid;
            //1.把表单里的信息存到对应的id中(this.key_ID在每次点击不同的图片时会都会不同)
            // (比如点开第一张图,this.key_ID==1,填的this.form是第一张图里的信息。点开第二张图,this.key_ID==2,填的this.form是第二张图里的信息)
            //所以有五张图的话，会存储五个this.key_ID(是个对象)
            localStorage.setItem(`${this.key_ID}`,JSON.stringify(this.form)); 
            this.dialogVisible=false
            this.axios.statusValue({
              id:this.key_ID
            }).then(res=>{
              if(res.data==1){
                this.getapp()
              }
            }).catch(err=>{
              
            })
          } else {
            this.dialogVisible=true
            this.$message({
                type:"info",
                message:"请依次录入客户信息!~"
            })
            return false;
          }
        });
    }

 //确认入住按钮
    queding() {
      this.dataarry.forEach(el=>{
        this.list.push(JSON.parse(localStorage.getItem(el.id))) //把存的每个信息追加到list数组中
      })
      //追加好了后遍历list数组，如果有一张图的信息没填，则nowrite==1，跳出循环遍历
    for(var i=0;i<this.list.length;i++){
        if(this.list[i]==null){
            this.nowrite = 1;  //定义一个变量，初始值为1，表示未填
            break
        }else{
            this.nowrite = 0;
        }
    }
    //如果nowrite==1，则让他无法提交
    if(this.nowrite === 1){
      alert("您尚未全部填写完成,请填写完成后再试...!")
       window.location.reload()
    }
    else{
        this.axios.clientApplyFor(
            this.list
        ).then(res=>{
            if(res.data==1){
                this.$message({
                    type:"success",
                    message:"申请入住成功!等待酒店受理~请稍等..."
                })
                setTimeout(() => {
                    history.back();
                }, 850);
            }else{
                this.$message({
                    type:"info",
                    message:"抱歉!申请入住失败"
                })
            }
        }).catch(err=>{

        })
    }
    },