zoukankan      html  css  js  c++  java
  • vue select的change事件,将点击过的城市名存在数组中,下次调用不需要再调用接口

    <template>
    		<div id="body" class="application" v-show="show" v-cloak>
    			<div class="applicationForm">
    				<div class="essentialInformation">
    					<ul>
    						<li>
    							<div class="agencyNamjian fr">
    								<img src="../assets/img/xiala.png" width="100%" height="100%" />
    							</div>
    							<div class="agencyName agencyJantou">
                                              <span class="plaseCity" v-show="plaseCityShow" v-text="plaseProvinceText"></span>
    							  <select v-model='provinceSelect' @change ="cityChange(1)">
    								<option v-for="(item,index) in application.province" :key="index" :value="item.id" v-text="item.title"></option>
    							  </select>
    							</div>
    						</li>
    						<li>
    							<div class="agencyNamjian fr">
    								<img src="../assets/img/xiala.png" width="100%" height="100%" />
    							</div>
    							<div class="agencyName agencyJantou">
                                                <span class="plaseCity" v-show="plaseCityShow" v-text="plaseCityText"></span>
    								<select v-model="citySelect" @change="cityChange(2)">
                                                  <option v-for="(item,index) in city" :key="index" :value="item.id" v-text="item.title"></option>
    								</select>
    							</div>
    						</li>
    						<li>
    							<div class="agencyNamjian fr ">
    								<img src="../assets/img/xiala.png" width="100%" height="100%" />
    							</div>
    							<div class="agencyName agencyJantou noBorder">
                                                <span class="plaseCity" v-show="plaseCityShow" v-text="plaseCountyText"></span>
    								<select v-model="countySelect">
                                                  <option v-for="(item,index) in county" :key="index" :value="item.id" v-text="item.title"></option>
    								</select>
    							</div>
    						</li>
    					</ul>
    				</div>
    			</div>
    		</div>
      </template>
    <script>
      export default {
        name: 'application',
        data () {
          return {
            show: false,
            application: {
              province: [],
              city: {},
              county: {}
            },
            city: [],
            county: [],
            provinceSelect: '',
            citySelect: '',
            countySelect: '',
            tishi: false,
            tishiTxt: '',
            plaseCityShow: true,
            plaseCityText: '请子选择城市',
            plaseProvinceText: '请选择城市',
            plaseCountyText: '请选择(区)县'
          }
        },
        methods: {
          verify: function () {
            let thisObj = this
            this.$chaos.setTitle('报名表单')
            this.$chaos.verify(function () {
              thisObj.$chaos.ajax({
                data: {
                  pid: '0'
                },
                slient: true,
                userinfo: true,
                url: 'get_address_by_pid',
                callback: function (type, res) {
                  if (type !== 'success') {
                    return
                  }
                  if (res.status) {
                    thisObj.application.province = res.info.region_list
                    thisObj.show = true
                  } else {
                    thisObj.$vux.toast.show({
                      text: res.msg,
                      type: 'text',
                      position: 'bottom'
                    })
                  }
                }
              })
              thisObj.$chaos.ajax({
                slient: true,
                userinfo: true,
                url: 'user_is_sign',
                callback: function (type, res) {
                  if (type !== 'success') {
                    return
                  }
                  if (res.status) {
                    let userInfo = thisObj.$chaos.getUserInfo()
                    if (userInfo.user_info.is_sign === 1) {
                      window.location.href = '#/CourseList'
                    } else {
                      userInfo.user_info.is_buy_course = 1
                      thisObj.$chaos.setUserInfo(userInfo)
                    }
                  } else {
                    thisObj.$vux.toast.show({
                      text: res.msg,
                      type: 'text',
                      position: 'bottom'
                    })
                  }
                }
              })
            }, false)
          },
          cityChange: function (type) {
            let thisObj = this
            if (type === 1) {
              if (thisObj.provinceSelect === '' || typeof thisObj.provinceSelect === 'undefined') {
                return
              }
              if (typeof thisObj.application.city[thisObj.provinceSelect] === 'undefined') {
                thisObj.plaseCityShow = false
                thisObj.$chaos.ajax({
                  data: {
                    pid: thisObj.provinceSelect
                  },
                  slient: true,
                  userinfo: true,
                  url: 'Attend/get_address_by_pid',
                  callback: function (type, res) {
                    if (type !== 'success') {
                      return
                    }
                    if (res.status) {
                      thisObj.application.city[thisObj.provinceSelect] = res.info.region_list
                      thisObj.city = res.info.region_list
                      thisObj.citySelect = thisObj.city[0]['id']
                    } else {
                      thisObj.$vux.toast.show({
                        text: res.msg,
                        type: 'text',
                        position: 'bottom'
                      })
                    }
                  }
                })
              } else {
                thisObj.city = thisObj.application.city[thisObj.provinceSelect]
                thisObj.citySelect = thisObj.city[0]['id']
              }
            } else {
              if (thisObj.city === '' || typeof thisObj.city === 'undefined') {
                return
              } else {
                if (typeof thisObj.application.county[thisObj.city] === 'undefined') {
                  thisObj.$chaos.ajax({
                    data: {
                      pid: thisObj.citySelect
                    },
                    slient: true,
                    userinfo: true,
                    url: 'Attend/get_address_by_pid',
                    callback: function (type, res) {
                      if (type !== 'success') {
                        return
                      }
                      if (res.status) {
                        thisObj.application.county[thisObj.citySelect] = res.info.region_list
                        thisObj.county = res.info.region_list
                        thisObj.countySelect = thisObj.county[0]['id']
                      } else {
                        thisObj.$vux.toast.show({
                          text: res.msg,
                          type: 'text',
                          position: 'bottom'
                        })
                      }
                    }
                  })
                } else {
                  thisObj.county = thisObj.application.county[thisObj.citySelect]
                  thisObj.countySelect = thisObj.county[0]['id']
                }
              }
            }
          }
        },
        created: function () {
          this.verify()
        },
        watch: {
          '$route': 'verify'
        }
      }
    </script>
    <style scoped>
      [v-cloak] {
        display: none;
      }
      .plaseCity{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        line-height: 55px;
        text-indent: 10px;
      }
      .essentialInformation, .importaInformation {
        background: #FFFFFF;
      }
      .essentialInformation {
        margin: 10px 0;
      }
      .essentialInformation ul, .importaInformation ul {
        margin: 0 15px;
      }
      .agencyNameImg {
         20px;
        height: 20px;
        line-height: 4.3;
      }
      .fl {
        float: left;
      }
      .noBorder {
        border: 0;
      }
      .essentialInformation:after {
        content: '';
        display: block;
        clear: both;
      }
      .agencyNamjian {
         11px;
        height: 8px;
        line-height: 4.3;
      }
      .agencyJantou {
        padding-right: 40px;
        position: relative;
      }
      .agencyName {
        margin-left: 30px;
        border-bottom: 1px solid #cccccc;
        line-height: 3.8
      }
      .essentialInformation input, .essentialInformation select {
         100%;
        text-indent: 10px;
        border: 0;
        -webkit-appearance: none;
        background: transparent;
      }
      .essentialInformation select {
        height: 55px;
        position: relative;
        z-index: 0;
      }
      .agencyBut {
        margin-top: 100px;
      }
      .squadButton {
        text-align: center;
        color: #fff;
        background: #fbac36;
        margin: 0 30px;
        line-height: 2.5;
        font-size: 16px;
        box-shadow: 0px 1px 5px #ccc;
      }
      .agencyBut {
        margin-top: 100px;
      }
    
    </style>
    

      

  • 相关阅读:
    python 多个变量赋值
    python标准数据类型
    Python 变量类型
    H3C 扩展ACL与基于时间的ACL
    H3C BGP-filter-policy
    H3C 标准ACL
    H3C BGP实验集合
    H3C IS-IS实验大集合(ipv6)
    H3C ISIS实验大集合(IPv4)
    JS 封装一个显示时间的函数
  • 原文地址:https://www.cnblogs.com/gqx-html/p/7596464.html
Copyright © 2011-2022 走看看