動態存值總結

效果圖:(填過信息的爲紅色,未填信息的爲綠色)

點擊圖片時 出現彈框 填寫信息

代碼:

    //點擊圖片時彈窗
    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=>{

        })
    }
    },