Merge branch 'dev-1.0' of…

Merge branch 'dev-1.0' of https://gitlab.infra.miyatech.com/pengguangpu/doublescreen-back into dev-1.0

pages/poster/poster.acss

@@ -56,6 +56,7 @@
     white-space: nowrap;
     display: flex;
     margin-top: 60rpx;
+    padding-left: 19rpx;
 }
 
 .posterScrollViewItem {
@@ -63,7 +64,37 @@
     flex-grow: 0;
     width: 180rpx;
     height: 100%;
-    border: 2px solid red;
+    /* border: 1px solid red; */
     display: flex;
     flex-direction: column;
 }
+
+.posterSelected {
+    margin-top: 7rpx;
+    border: 2px solid #007AFF;
+    border-radius: 10rpx;
+    box-sizing: border-box;
+    width: 170rpx;
+    height: 264rpx;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    align-content: center;
+}
+
+.posterNonSelected {
+    margin-top: 7rpx;
+    /* border: 2px solid #007AFF; */
+    /* border-radius: 10rpx; */
+    width: 170rpx;
+    height: 263rpx;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    align-content: center;
+}
+
+.posterSelected image{
+    border-radius: 5rpx;
+    border: 0rpx solid white;
+}
\ No newline at end of file

pages/poster/poster.axml

@@ -3,31 +3,38 @@
   <view class="posterBottomView">
     <!--横向海报列表-->
     <scroll-view class="posterScrollView" scroll-x="{{true}}" style="width: 100%">
-      <block a:for="{{6}}">
-        <view class="posterScrollViewItem">
-          <view style="margin:0 auto;color:#007AFF;margin-top:14rpx;" hidden="{{}}">
+      <block a:for="{{posterList}}">
+        <view class="posterScrollViewItem" data-index="{{index}}" onTap="onPosterItemClicked">
+          <view style="margin:0 auto;color:#007AFF;margin-top:14rpx;height:27rpx;font-size:19rpx;">
+            <block a:if="{{posterList[index].selected}}">
               <text>显示中</text>
+            </block>
           </view>
-          <!--选中时的边框图-->
-          <view style="margin:0 auto;">
-            <image mode="aspectFit" style="margin:0 auto;width:156rpx;height:249rpx;margin-top:13rpx;" hidden="{{}}" src="/images/bg_poster_demo.png"/>
+          <view class="{{posterList[index].selected ?'posterSelected':'posterNonSelected'}}">
+            <image mode="aspectFit" style="width:156rpx;margin:0 auto;height:250rpx;" src="/images/bg_poster_demo.png"/>
           </view>
-          <image mode="aspectFit" style="margin:0 auto;width:22rpx;height:22rpx;margin-top:14rpx;" hidden="{{}}" src="/images/icon_success.png"/>
-          <!-- <image mode="aspectFit" style="margin:0 auto;width:22rpx;height:22rpx;margin-top:14rpx;" hidden="{{}}" src="/images/.png"/> -->
+          <block a:if="{{posterList[index].selected}}">
+            <image mode="aspectFit" style="margin:0 auto;width:22rpx;height:22rpx;margin-top:14rpx;" src="/images/icon_success.png"/>
+          </block>
+          <block a:else>
+            <image mode="aspectFit" style="margin:0 auto;width:22rpx;height:22rpx;margin-top:14rpx;" src="/images/icon_non_select.png"/>
+          </block>
         </view>
       </block>
+      <!--最后一处加上空白间隔view-->
+      <view style="height:100%;padding-right:19rpx;"></view>
     </scroll-view>
   </view>
   <!--topTitle-->
-  <view class="topView">
-    <!--返回键-->
-    <view class="posterBackButton">
-      <image mode="aspectFit" style="width:9rpx;height:18rpx;margin-right:8rpx;" src="/images/icon_back.png"/>
-      <text>返回</text>
-    </view>
+  <view class="topView" onTap="onPosterPageBack">
     <!--title-->
     <view class="titleText">
       <text>海报</text>
     </view>
+    <!--返回键-->
+    <view class="posterBackButton" onTap="onPosterPageBack">
+      <image mode="aspectFit" style="width:9rpx;height:18rpx;margin-right:8rpx;" src="/images/icon_back.png"/>
+      <text>返回</text>
+    </view>
   </view>
 </view>
\ No newline at end of file

pages/poster/poster.js

 Page({
   data: {
+    posterList: null
+  },
+  onLoad() {
+    let context = this;
+    this.setData({
+      posterList: context.requestPosterList()
+    });
+  },
 
+  onPosterItemClicked(event) {
+    console.log("event==>" + JSON.stringify(event));
+    //获取点击的index
+    var index = event.target.dataset.index;
+    var tempList = [];
+    tempList = tempList.concat(this.data.posterList);
+    //遍历改变posterList状态
+    for (var i = 0; i < tempList.length; i++) {
+      if (i == index) {
+        tempList[i].selected = true;
+      } else {
+        tempList[i].selected = false;
+      }
+    }
+    this.setData({
+      posterList: tempList
+    })
   },
-  onLoad() {},
+
+  /** 请求服务器加载海报图片*/
+  requestPosterList() {
+    //just test
+    return [
+      { url: "", selected: true },
+      { url: "", selected: false },
+      { url: "", selected: false },
+      { url: "", selected: false },
+      { url: "", selected: false },
+      { url: "", selected: false },
+      { url: "", selected: false },
+      { url: "", selected: false },
+    ];
+  },
+
+  /**
+   * 返回按钮 
+   */
+  onPosterPageBack(event) {
+    console.log("event==>" + JSON.stringify(event));
+  }
 });