小程序 앱만들기 - 9 - 3 : 숙박검색 Layout 만들기

유튜브 강좌 : youtu.be/O1SnJQFcYkw

github : https://github.com/semotube/korTourInfo

semotube/korTourInfo

 

 

 

요청메세지 메뉴얼

지역,시군구 : 지역,시군구 코드

숙박선택 : 전체, 한옥, 베니키아, 굿스테이 => 선택시 1 아닐시 0

 

소스처리

initData() : code에 행사코드 전용 코드 받기 => init4Stay()

change : stayChange() 추가

search : searchStay() 추가

  initData(){
  .
  .
  
  // 숙박검색 : Stay
    resCode = code.init4Stay();
    this.setData({
      [`tabArray[2].areaIndex`]: [0, 0],
      [`tabArray[2].stayIndex`]: 0,
      [`tabArray[2].arrangeIndex`]: 0,
      [`tabArray[2].areaArray`]: resCode[0],
      [`tabArray[2].stayArray`]: resCode[1],
      [`tabArray[2].arrangeArray`]: resCode[2],
    })
  },
  
  .
  .
  
// Bind Change 처리
////////////////////////////////////////////////////////////////////////////////

.
.

  stayChange(e) {
    this.setData({
      [`tabArray[${this.data.TabCur}].stayIndex`]: e.detail.value,
    })
  },
  
  .
  .
  
// search
//////////////////////////////////////////////////////

.
.

  searchStay() {
    let that = this;
    let tab = that.data.tabArray[that.data.TabCur];
    api.request(api.SearchStay, {
      areaCode: tab.areaArray[0][tab.areaIndex[0]].code,
      sigunguCode: tab.areaArray[1][tab.areaIndex[1]].code,
      goodStay: tab.stayIndex == 1 ? 1 : 0,// index 순서주의
      hanOk: tab.stayIndex == 2 ? 1 : 0,
      benikia: tab.stayIndex == 3 ? 1 : 0,
      arrange: tab.arrangeArray[tab.arrangeIndex].code,
      numOfRows: tab.numOfRows,
      pageNo: tab.pageNo + 1,
      listYN: tab.listYN,
    }).then(function (res) {
      if (res.response.header.resultMsg === "OK") {
        let item = res.response.body.items.item;
        if (!Array.isArray(item)) item = [item];

        if( tab.listYN === "N" ) {
//처음(검색시작버튼)이거나 refresh이므로 pageTot계산후 첫 List를 다시 읽어드림.
          if( item[0].totalCnt ) { 
            that.setData({
              [`tabArray[${that.data.TabCur}].pageTot`]: Math.ceil(item[0].totalCnt/tab.numOfRows),
              [`tabArray[${that.data.TabCur}].listYN`]: "Y",//List
              [`tabArray[${that.data.TabCur}].resArray`]: [],//result 초기화.
              [`tabArray[${that.data.TabCur}].pageNo`]: 0,//현재페이지 초기화.
            })
            that.searchStay();//다시 읽어드림
          } else {
            util.showToast("NO 데이터","error");
          }
        } else {
//자료를 추가로 읽어드림 reLoad 상태
          if(item != undefined) { 
            console.log("searchStay() item : ", item)
            that.setData({
              [`tabArray[${that.data.TabCur}].resArray`]: tab.resArray.concat( item ),
              [`tabArray[${that.data.TabCur}].pageNo`]: tab.pageNo + 1,//페이지+1.
            })
          } else {  
            util.showToast("NO 데이터","error");
          }
        }
        util.hideLoading();
      } else { console.error("resultMsg != 'OK' : ", res.response.header.resultMsg) }
    })
    .catch(function (res) {
      util.hideLoading();
      console.error("catch : ", res)
    })    
  },

 

code.init4Stay() 및 stayArray[] 추가

stayArray[] : "전체", "굿스테이", "한옥", "베니키아"

let stayArray= [
  {code : "", name: "전체"},
  {code : "1", name: "굿스테이"},//순서확인
  {code : "1", name: "한옥"},
  {code : "1", name: "베니키아"},
];

.
.
.


// init
////////////////////////////////////////////////////////////////////////////////////
.
.

function init4Stay() {
  let areaArray = initAreaArray();
  return [areaArray, stayArray, arrangeArray];
}

 

레이아웃

검색조건용 모달상자 수정

기존 모달상자에 숙박선택 항목을 추가.

<!-- modal -->
<!-- ================================================================================================ -->
<!-- 통합검색 , 행사검색, 숙박검색 modal -->

.
.

      <view class="cu-form-group" hidden="{{tabArray[TabCur].stayArray == null}}">
        <view class="title">숙박선택</view>
        <picker bindchange="stayChange" value="{{tabArray[TabCur].stayIndex}}" range-key="name" range="{{tabArray[TabCur].stayArray}}">
          <view class="picker">
          {{tabArray[TabCur].stayArray[tabArray[TabCur].stayIndex].name}}
          </view>
        </picker>
      </view>      

.
.

숙박검색 scroll-view

<!-- 숙박검색 scroll-view -->
<block wx:if="{{TabCur==2}}">
  <scroll-view wx:if="{{tabArray[TabCur].resArray.length}}" scroll-y="{{modalName==null}}" class="page {{modalName!=null?'show':''}}">
    <view class="cu-list menu-avatar">
      <view class="cu-item" wx:for="{{tabArray[TabCur].resArray}}" wx:key="index" bindtap="bindDetail" data-item="{{item}}">
        <view class="cu-avatar radius lg" style="background-image:url({{item.firstimage2}});">
          <text wx:if="{{!item.firstimage2}}" class="cuIcon-picfill lg text-gray"></text>
        </view>
        <view class="content">
          <view>
            <text class="text-cut">{{item.title}}</text>
          </view>
          <view class="text-gray text-sm flex">
            <text class="cuIcon-phone text-grey margin-right-xs"></text> {{item.tel}}
          </view>
        </view>
        <view class="action">
          <view class="text-grey text-xs">{{script.toDate(item.modifiedtime)}}</view>
          <view class="text-grey text-xs"><text class="cuIcon-attention margin-right-xs"></text>{{item.readcount}}</view>
        </view>
      </view>
    </view>
  </scroll-view>
  <view wx:else class="padding-top-xl text-center text-shadow text-grey">
    <text class="text-bold text-xxl">데이터가 없습니다.</text>
  </view>
</block>

 

실행화면

리스트

조건 검색창

 

 

상단 네비게이션바에 제목 바꾸기

소스처리

data 에 title 배열 추가.

data: {
.
.
  title: ["통합검색","행사검색","숙박검색","즐겨찾기"],
.
.
},

레이아웃

검색 => {{title[TabCur]}}

<!-- 상단 네비게이션바 부분 -->
.
.

    <view class="content" style="top:{{StatusBar}}px">
      <text class="">{{title[TabCur]}}</text>
    </view>
.
.

실행화면