세모튜브
小程序 앱만들기 - 9 - 2 : 행사검색 Layout 만들기 본문
유튜브강좌 : youtu.be/M2k5G30Up6A
github : https://github.com/semotube/korTourInfo
semotube/korTourInfo
Contribute to semotube/korTourInfo development by creating an account on GitHub.
github.com
아래 이미지를 확인해 보면 서비스분류를 검색조건에 넣을수 있다.
서비스분류도 넣어서 행사검색을 처리하도록 하자.
요청메세지 메뉴얼
서비스분류 : 메뉴얼에는 없지만 추가
지역,시군구 : 지역,시군구 코드
행사 시작일 : 형식 20200526
행사 종료일 : 형식 20200526
소스처리
initData() : code에 행사코드 전용 코드 받기 => init4Festival()
util에 오늘 날짜 받아오는 코드 수정 => getToday()
change : eventStartDateChange(), eventEndDateChange()
search : searchFestival() 추가
initData(){
.
.
// 행사검색 : Festival
resCode = code.init4Festival();
let toDay = util.getToday("-");//picker에서 예)2017-09-01 형식으로 사용.
this.setData({
[`tabArray[1].contentIndex`]: 3,//contentArray 3번 고정 { code: "15", name: "행사/공연/축제" },
[`tabArray[1].categoryIndex`]: [0, 0, 0],
[`tabArray[1].areaIndex`]: [0, 0],
[`tabArray[1].arrangeIndex`]: 0,
[`tabArray[1].categoryArray`]: resCode[0],
[`tabArray[1].areaArray`]: resCode[1],
[`tabArray[1].arrangeArray`]: resCode[2],
[`tabArray[1].today`]: toDay,
[`tabArray[1].eventStartDate`]: toDay,
[`tabArray[1].eventEndDate`]: toDay,
})
// Bind Change 처리
////////////////////////////////////////////////////////////////////////////////
.
.
eventStartDateChange(e) {
this.setData({
[`tabArray[${this.data.TabCur}].eventStartDate`]: e.detail.value,
})
},
eventEndDateChange(e) {
this.setData({
[`tabArray[${this.data.TabCur}].eventEndDate`]: e.detail.value,
})
},
// search
//////////////////////////////////////////////////////
.
.
searchFestival() {
let that = this;
let tab = that.data.tabArray[that.data.TabCur];
api.request(api.SearchFestival, {
cat1: tab.categoryArray[0][tab.categoryIndex[0]].code,
cat2: tab.categoryArray[1][tab.categoryIndex[1]].code,
cat3: tab.categoryArray[2][tab.categoryIndex[2]].code,
areaCode: tab.areaArray[0][tab.areaIndex[0]].code,
sigunguCode: tab.areaArray[1][tab.areaIndex[1]].code,
eventStartDate: util.replaceDate(tab.eventStartDate),//ex)20200520
eventEndDate: util.replaceDate(tab.eventEndDate),//ex)20200520
arrange: tab.arrangeArray[tab.arrangeIndex].code,
numOfRows: tab.numOfRows,
pageNo: tab.pageNo + 1,
listYN: tab.listYN,
}).then(function (res) {
// console.log("res : ", 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.searchFestival();//다시 읽어드림
} else {
util.showToast("NO 데이터","error");
}
} else {
//자료를 추가로 읽어드림 reLoad 상태
if(item != undefined) {
console.log("searchFestival() 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.init4Festival() 추가
// init
////////////////////////////////////////////////////////////////////////////////////
.
.
function init4Festival() {
let categoryArray = initCategoryArray(3);//Festival contentId = 3 : 행사검색이므로 3으로 고정.
let areaArray = initAreaArray();
return [categoryArray, areaArray, arrangeArray];
}util.getToday() 수정, util.replaceDate() 추가
const getToday = (txt = '') => { //문자를 입력 받아 그 문자로 처리.
let date = new Date();//new Date('December 25, 1995 23:15:30');
return [date.getFullYear(), date.getMonth() + 1, date.getDate()].map(formatNumber).join(txt);//join('-');
}
.
.
function replaceDate(date_str)
{
if(date_str===undefined) return;
return date_str.replace(/-/gi,"");
}
.
.
module.exports = {
.
.
replaceDate,
.
.
.
레이아웃
검색조건용 모달상자 수정
우선 search.js 소스에서 class Tab { .. } 의 keyword는 제거. 통합검색에서만 사용하기 때문.
class Tab {
constructor(name) {
this.name = name;
this.conArray = [];//condition : 조건Array
//this.keyword = "";
this.resArray = [];//result : 결과Array
this.numOfRows = 20;//페이지당 갯수
this.pageNo = 0;//현재 페이지
this.pageTot = 0;//전체 페이지 = totalCnt / numOfRows
this.listYN = "N";//(Y=목록, N=개수)
}
}기존 모달상자에 항목을 추가 하고 <view class="cu-form-group" /> 에 hidden를 넣어 필요시만 출력하게 처리.
<!-- modal -->
<!-- ================================================================================================ -->
<!-- 통합검색 , 행사검색 modal -->
<view class="cu-modal drawer-modal justify-end {{modalName=='keyword'?'show':''}}" bindtap="hideModal">
<view class="cu-dialog basis-90 text-right" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
<form>
<view class="cu-form-group" hidden="{{tabArray[TabCur].contentArray == null}}">
<view class="title">타입</view>
<picker bindchange="contentChange" value="{{tabArray[TabCur].contentIndex}}" range-key="name" range="{{tabArray[TabCur].contentArray}}">
<view class="picker">
{{tabArray[TabCur].contentArray[tabArray[TabCur].contentIndex].name}}
</view>
</picker>
</view>
<view class="cu-form-group" hidden="{{tabArray[TabCur].categoryArray == null}}">
<view class="title">분류</view>
<picker mode="multiSelector" bindcolumnchange="categoryColumnChange" value="{{tabArray[TabCur].categoryIndex}}" range-key="name" range="{{tabArray[TabCur].categoryArray}}">
<view class="picker">
{{tabArray[TabCur].categoryArray[0][tabArray[TabCur].categoryIndex[0]].name}}，
{{tabArray[TabCur].categoryArray[1][tabArray[TabCur].categoryIndex[1]].name}},
{{tabArray[TabCur].categoryArray[2][tabArray[TabCur].categoryIndex[2]].name}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">지역</view>
<picker mode="multiSelector" bindcolumnchange="areaColumnChange" value="{{tabArray[TabCur].areaIndex}}" range-key="name" range="{{tabArray[TabCur].areaArray}}">
<view class="picker">
{{tabArray[TabCur].areaArray[0][tabArray[TabCur].areaIndex[0]].name}}，
{{tabArray[TabCur].areaArray[1][tabArray[TabCur].areaIndex[1]].name}}
</view>
</picker>
</view>
<view class="cu-form-group" hidden="{{tabArray[TabCur].eventStartDate == null}}">
<view class="title">시작일</view>
<picker mode="date" value="{{tabArray[TabCur].eventStartDate}}" start="2000-01-01" end="2040-12-31" bindchange="eventStartDateChange">
<view class="picker">
{{tabArray[TabCur].eventStartDate}}
</view>
</picker>
</view>
<view class="cu-form-group" hidden="{{tabArray[TabCur].eventEndDate == null}}">
<view class="title">종료일</view>
<picker mode="date" value="{{tabArray[TabCur].eventEndDate}}" start="2000-01-01" end="2040-12-31" bindchange="eventEndDateChange">
<view class="picker">
{{tabArray[TabCur].eventEndDate}}
</view>
</picker>
</view>
<view class="cu-form-group" hidden="{{tabArray[TabCur].keyword == null}}">
<view class="title">검색어</view>
<input type="text" value="{{tabArray[0].keyword}}" bindinput="keywordChange" placeholder="두글자 이상 검색어를 입력해주세요"></input>
</view>
<view class="cu-form-group">
<view class="title">정렬</view>
<picker bindchange="arrangeChange" value="{{tabArray[TabCur].arrangeIndex}}" range-key="name" range="{{tabArray[TabCur].arrangeArray}}">
<view class="picker">
{{tabArray[TabCur].arrangeArray[tabArray[TabCur].arrangeIndex].name}}
</view>
</picker>
</view>
</form>
<view class="padding flex flex-direction">
<button class="cu-btn bg-red margin-tb-sm lg" bindtap="bindSearch">검색</button>
</view>
</view>
</view>
행사검색 scroll-view
<!-- 행사검색 scroll-view -->
<block wx:if="{{TabCur==1}}">
<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>
실행화면
리스트
검색조건창
'미니프로그램-小程序 > 위챗-관광정보 앱' 카테고리의 다른 글
| 小程序 앱만들기 - 9 - 4 : 홈화면 수정 - 마치며 (0) | 2020.05.28 |
|---|---|
| 小程序 앱만들기 - 9 - 3 : 숙박검색 Layout 만들기 (0) | 2020.05.27 |
| 小程序 앱만들기 - 9 - 1 : 즐겨찾기 기능 만들기 (0) | 2020.05.27 |
| 小程序 앱만들기 - 8-4 : 추가 이미지 Layout 만들기 (0) | 2020.05.26 |
| 小程序 앱만들기 - 8-3 : <template>이용하여 Layout 보여주기 - 소개정보 (0) | 2020.05.26 |
'미니프로그램-小程序/위챗-관광정보 앱' Related Articles
more
