小程序 앱만들기 - 8-4 : 추가 이미지 Layout 만들기

유튜브 강좌 : youtu.be/UIUgCOm75TA

 

 

우선 detailImage 오퍼레이션의 매뉴얼을 확인해봐야 한다.

기본적으로 요청 파라메터는 아래와 같다.

단, 음식점 타입일경우 컨텐츠 이미지 받은 다음 음식 이미지를 더 요구하자.

 

 

소스처리

  onLoad: function (options) {
    console.log("options : ", options);

    this.detailCommon(options.contentid, options.contenttypeid);
    this.detailIntro(options.contentid, options.contenttypeid);
    this.detailImage(options.contentid, options.contenttypeid);
  },
  
  .
  .
  .
  
//이미지정보
  detailImage(contentId, contentTypeId, imageYN="Y") {
    let that = this;
    that.data.tabArray[2].reqState = "start";
    api.request(api.DetailImage, {
      contentId: contentId,//콘텐츠ID
      imageYN: imageYN,//Y=콘텐츠 이미지 조회, N=”음식점”타입의 음식지 이미지
      subImageYN: "Y",//Y=원본,썸네일 이미지, 조회 N=Null
    }).then(function (res) {
      if (res.response.header.resultMsg === "OK") {
        let item = res.response.body.items.item;
        if (!Array.isArray(item)) item = [item];
        
        console.log("item detailImage: [imageYN : "+imageYN+"] =>>>>>", item)
        if( item[0] != undefined) {
          that.setData({
            [`tabArray[2].resArray`]: imageYN == "Y" ? item : that.data.tabArray[2].resArray.concat(item),
          })
        }
        if( contentTypeId == "39" && imageYN == "Y") {
          that.detailImage(contentId, contentTypeId, "N");//음식점일때 컨텐츠이미지 받은다음 음식이미지를 더 요구하자.
        } else {
          that.reqFinished(2);
        }
      } else { console.error("resultMsg != 'OK' : ", res.response.header.resultMsg) }
    })
    .catch(function (res) {
      util.hideLoading();
      console.error("catch : ", res)
    })
  },

 

 

 

레이아웃

<!-- 추가이미지 view -->
<block wx:if="{{TabCur==2}}">
  <view class="cu-card" wx:if="{{tabArray[TabCur].resArray != ''}}">
    <view class="cu-item bg-img" style="background-image:url({{item.smallimageurl}}); height: 400rpx" wx:for="{{tabArray[TabCur].resArray}}" wx:key="index">
    </view>
  </view>
  <view wx:else class="padding-top-xl text-center text-shadow text-grey">
    <text class="text-bold text-xxl">데이터가 없습니다.</text>
  </view>
</block>

 

 

 

실행화면

음식점인경우 추가이미지(옵션 : "Y") 와 메뉴이미지(옵션 : "N")가 다 나오는건 아니다.

아래 음식점은 나오므로 테스트 해보자

조건 검색어 : 가마목

컨텐츠이미지 받은다음 음식이미지를 더 요구했을때 음식이미지 정보를 받은경우이다.

 

실행결과

 

 

 

request 마지막 처리

  - 3곳의 request가 "finished"일때 util.hideLoading(); 호출에 로딩바로 종료한다.

//공통정보  
.
        that.reqFinished(0);
.
.
//소개정보
.
        that.reqFinished(1);
.
.
//이미지정보
.
          that.reqFinished(2);
.
.
.

  
  reqFinished(curTab) {
    let tab = this.data.tabArray;
    tab[curTab].reqState = "finished";

    if( tab[0].reqState == "finished" && tab[1].reqState == "finished" && tab[2].reqState == "finished" ) {
      console.log("all finished ============= : ")
      util.hideLoading();
    }
  },