创新实训（十二）

酒店查询界面应该是一个比较复杂的页面了，它需要先接受用户输入，进行景点的检索，并且显示搜索结果，接下来要处理用户对景点的选择并实时体现在界面上，在用户进行酒店的检索时还要确定用户当前选择的景点和用户当前在景点搜索框中选择的城市是否一致，不一致则传递用户选择景点的对应城市。

部分方法代码如下:

  methods: {
    show() {
      if (this.province == "") {
        alert("请选择省份！");
      } else {
        if (this.city == "") {
            alert("请选择城市！");
        } else {
          this.count=1;
          if(this.searchScenic==undefined||this.searchScenic==""){
            if(this.province!=this.trueprovince){
              this.hasScenic = false;
              this.chooseScenics = [];
              this.scenicandaddress = [];
            }
            this.listloading = true;
          var url =
            "http://api.map.baidu.com/place/v2/search?query=" +
            encodeURIComponent("旅游景点") +
            "&region=" +
            encodeURIComponent(this.city) +
            "&output=json&page_size=4&page_num=0&ak=***"+"&callback=showScenic";
          this.$jsonp(url)
            .then((res) => {
                this.showScenic(res);
            })
            .catch((res) => {
              alert("出错了！");
            });
          }else{
            if(this.province!=this.trueprovince){
              this.hasScenic = false;
              this.chooseScenics = [];
              this.scenicandaddress = [];
            }
            this.listloading = true;
          var url =
            "http://api.map.baidu.com/place/v2/search?query=" +
            encodeURIComponent(this.searchScenic) +"&tag="+
            encodeURIComponent("旅游景点")+ "&region=" +
            encodeURIComponent(this.city) +
            "&output=json&page_size=4&page_num=0&ak=***"+"&callback=showScenic";
          this.$jsonp(url)
            .then((res) => {
                this.showScenic(res);
            })
            .catch((res) => {
              alert("出错了！");
            });
          }
        }
      }
      this.trueprovince=this.province;
      this.truecity=this.city;
      this.listloading=false;
    },

    showScenic(res){
      var array = res.results;
                this.listloading = false;
                if (array == undefined || array.length <= 0) {
                  console.log("no");
                  this.hasScenics = false;
                  this.noScenic = true;
                } else {
                  this.scenics = [];
                  this.$forceUpdate();
                  this.hasScenics = true;
                  this.noScenic = false;
                  array.forEach((item, index, array) => {
                    this.scenics.push({
                      name: item.name,
                      address: item.address,
                    });
                  });
                  this.timedisable = false;
                  this.$forceUpdate();
                }
    },

    load() {
      this.loading = true;
      if (this.province == "") {
        alert("请选择省份！");
      } else {
        if (this.city == "") {
          if (
            this.province == "北京市" ||
            this.province == "天津市" ||
            this.province == "上海市" ||
            this.province == "重庆市"
          ) {
            var url =
              "http://api.map.baidu.com/place/v2/search?query=" +
              encodeURIComponent("旅游景点") +
              "&region=" +
              encodeURIComponent(this.province) +
              "&output=json&page_size=4&page_num=" +
              this.count +
              "&ak=***"+"&callback=loadScenic";
              this.$jsonp(url)
            .then((res)=>{
                this.loadScenic(res);
            })
          } else {
            alert("请选择城市！");
          }
        } else {
          if(this.searchScenic==undefined||this.searchScenic==""){
            this.loading = true;
          var url =
            "http://api.map.baidu.com/place/v2/search?query=" +
            encodeURIComponent("旅游景点") +
            "&region=" +
            encodeURIComponent(this.city) +
            "&output=json&page_size=4&page_num=" +
            this.count +
            "&ak=***"+"&callback=loadScenic";
          }
          else{
            this.listloading = true;
          this.chooseScenics = [];
          var url =
            "http://api.map.baidu.com/place/v2/search?query=" +
            encodeURIComponent(this.searchScenic) +"&tag="+
            encodeURIComponent("旅游景点")+ "&region=" +
            encodeURIComponent(this.city) +
            "&output=json&page_size=4&page_num=" +
            this.count +
            "&ak=***"+"&callback=loadScenic";
          }

          this.$jsonp(url)
            .then((res) => {
              this.loadScenic(res);
            })
            .catch((res) => {
              alert("加载出错了！");
            });
        }
      }
      this.listloading = false;
    },

    loadScenic(res){
      this.loading=false;
                var array = res.results;
                if (array == undefined || array.length <= 0) {
                  console.log("no");
                  this.noMore = true;
                } else {
                  array.forEach((item, index, array) => {
                    this.scenics.push({
                      name: item.name,
                      address: item.address,
                    });
                  });
                  this.count = this.count + 1;
                }
    },

    deleteScenic(name){
      var index=this.chooseScenics.indexOf(name)
      this.chooseScenics.splice(index,1);
      this.scenicandaddress.splice(index,1);
      if (this.chooseScenics.length <= 0) {
        this.hasScenic = false;
      }
    },

    choose(item) {
      if (this.chooseScenics == []) {
        this.chooseScenics.push(item.name);
        this.scenicandaddress.push(item.name+" "+item.address)
        console.log("push");
        this.hasScenic = true;
      } else {
        if (this.chooseScenics.indexOf(item.name) > -1) {
          this.deleteScenic(item.name);
          console.log("delete");
          if (this.chooseScenics.length <= 0) {
            this.hasScenic = false;
          }
        } else {
          if (this.chooseScenics.length >= 10) {
            alert("选择景点数量超过10个！");
          } else {
            this.chooseScenics.push(item.name);
            this.scenicandaddress.push(item.name+" "+item.address)
            console.log("push");
          }
        }
      }
      // this.$forceUpdate();
    },

    findCitys(prov) {
      this.city = "";
      this.citys = [];
      if (
        prov == "北京市" ||
        prov == "天津市" ||
        prov == "上海市" ||
        prov == "重庆市"
      ) {
        this.hasCity = false;
        this.city = prov;
      } else {
        this.hasCity = true;
        var url =
          "http://api.map.baidu.com/place/v2/search?query=" +
          encodeURIComponent("商圈") +
          "&region=" +
          encodeURIComponent(prov) +
          "&output=json&page_size=20&ak=***"+"&callback=getCitys";
        this.$jsonp(url)
          .then((res) => {
             this.getCitys(res);
          })
          .catch((res) => {
            alert("百度出错了！");
          });
      }
    },

    getCitys(res){
      this.loading = false;
            var array = res.results;
            if (array == undefined || array.length <= 0) {
              console.log("no");
            } else {
              array.forEach((item, index, array) => {
                this.citys.push(item.name);
                this.$forceUpdate();
              });
            }
    },

    findHotels() {
      if (this.chooseScenics.length <= 0) {
        alert("请选择至少一个景点！");
      } else {
        if (this.value1 == "") {
          alert("请选择日期！");
        } else {
          var onescenic = false;
          if(this.chooseScenics.length==1){
            onescenic = true;
          }
          this.$router.push({
            name: "hotels",

            //query/
            query: {
              scenics: this.chooseScenics,
              scenicandaddress:this.scenicandaddress,
              date1: String(this.value1[0]),
              date2: String(this.value1[1]),
              city: this.truecity,
              province:this.trueprovince,
              type:this.type,
              firstScenic:this.chooseScenics[0],
              oneScenic:onescenic,
            },
          });
        }
      }
    },
  },