.

project.config.json

@@ -57,10 +57,10 @@
 					"scene": null
 				},
 				{
-					"id": -1,
+					"id": 2,
 					"name": "选座新",
 					"pathName": "pages/chooseSeat/chooseSeat",
-					"query": "couponId=22&scheduleId=729543818&cinemaId=45100",
+					"query": "couponId=22&scheduleId=729543827&cinemaId=45100",
 					"scene": null
 				}
 			]

src/pages/chooseSeat/chooseSeat.less

@@ -1,484 +1,28 @@
 @gap: 60rpx;
-.container {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    position: relative;
-    // justify-content: space-between;
-    height: 100vh;
-    // width: 100vh;
-}
-
-.Room {
-    .room_movie-infor {
-        padding: 30rpx @gap;
-        line-height: 2;
-        border-bottom: 1rpx solid #ddd;
-        &_title {
-            color: #000;
-            font-size: 16px;
-        }
-        &_desc {
-            color: #858b92;
-            font-size: 14px;
-        }
-    }
-    .room_legend {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        // justify-content: space-evenly; // 均匀分布
-        // justify-content: space-between; // 两边顶头
-        // justify-content: space-around; // 两边相加
-        align-items: center;
-        height: 90rpx;
-        icon {
-            // width: 32rpx;
-            // height: 32rpx;
-            // background-color: pink;
-        }
-        &_item {
-            margin-right: 40rpx;
-            color: #858b92;
-            font-size: 12px;
-            &:last-child {
-                margin: 0;
-            }
-        }
-    }
-    .room_screen{
-        position: absolute;
-        z-index: 1;
-        left: 0;
-        // right: 0;
-        top: 100%;
-        height: 0;
-        text-align: center;
-
-        &_specific{
-            display: inline-block;
-            // height: 40rpx;
-            min-width: 300rpx;
-            padding: 15rpx 2em 15rpx;
-            background: #E6E9EC;
-            // pointer-events: none;
-            border-radius: 0 0 90rpx 90rpx;
-            color: #555F67;
-            font-size: 11px;
-            line-height: 1;
-        }
-
-    }
-    .room_footer {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        z-index: 999;
-        // display: flex;
-        // justify-content: center;
-        min-height: 120rpx;
-        background: #fff;
-        border-top:1rpx solid #d7dbe0;
-
-        &_voucher-count {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            // height: 100%;
-            padding-top: 40rpx;
-            // padding: 40rpx;
-            // border-top: 1rpx solid #d7dbe0;
-            color: #858b92;
-        }
-        &_select {
-            // position: absolute;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            min-height: 120rpx;
-            // border-top: 1rpx solid #d7dbe0;
-            padding: 40rpx @gap;
-            background: inherit;
-
-            .selected-seat {
-                // display: flex;
-                // flex-wrap: nowrap;
-                margin-bottom: 30rpx;
-                margin-left: -@gap;
-                margin-right: -@gap;
-                width: auto;
-                white-space: nowrap;
-
-                // overflow: hidden;
-                // overflow-x: auto;
-                // -webkit-overflow-scrolling: touch;
-                white-space: nowrap;
-                &_item {
-                    position: relative;
-                    display: inline-flex;
-                    flex-direction:column;
-                    align-items: center;
-                    justify-content: center;
-
-                    width: 20.3%;
-                    margin: 0 10rpx;
-                    padding: 30rpx 0;
-                    border: 1rpx solid #d7dbe0;
-                    border-radius: 20rpx;
-                    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
-                    color: #858b92;
-                    line-height:1.2;
-
-
-                    &:before{
-                        content: '';
-                        position: absolute;
-                        top: 50%;
-                        left: 0;
-                        transform: translate(-50%, -50%);
-                        width: 20rpx;
-                        height: 20rpx;
-                        border-radius: 0 100px 100px 0;
-                        background: inherit;
-                        border: inherit;
-                        border-color: inherit;
-                        box-shadow: inset 0 2px 14px rgba(0,0,0,.02);
-                    }
-                    &:after{
-                        content: '';
-                        position: absolute;
-                        top: 50%;
-                        right: 100%;
-                        transform: translate(0, -50%);
-                        width: 12rpx;
-                        height: 20rpx;
-                        background: #fff;
-                    }
-                
-
-                    &:first-child {
-                        margin-left: @gap;
-                    }
-                    &:last-child {
-                        margin-right: @gap;
-                    }
-
-                    b{display: balck;font-size: 10px;}
-                    view,b{
-                        pointer-events: none;
-                    }
-                    .seat{
-                        &-name{
-                            // font-size: 16px;
-                        }
-                        &-desc{
-                            color: #D7DBE0;
-                        }
-                        &-price{
-                            color: #F16E24;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.roomBox {
-    position: relative;
-    overflow: hidden;
-    flex: 1;
-    width: inherit;
-    height: inherit;
-    background-color: #F6F7F7;
-    padding-top: 70rpx;
-}
-.inner {
-    width: 100vw;
-    height: 100vh;
-}
-
-.movie-indicator {
-    padding: 20rpx;
-    width: 100%;
-    background: #fff;
-    z-index: 10;
-}
-.movie-indicator:after {
-    content: ' ';
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    height: 1px;
-    border-top: 1px solid #e5e5e5;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: scaleY(0.5);
-    transform: scaleY(0.5);
-}
-.movie-info {
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    padding-top: 4rpx;
-}
-
-.info-title {
-    padding-bottom: 10rpx;
-    color: #333;
-    font-size: 30rpx;
-    font-weight: bold;
-}
-
-.info-desc {
-    font-size: 24rpx;
-    color: #333;
-}
-
-.movie-action {
-    position: absolute;
-    right: 20px;
-    top: 10px;
-    font-size: 24rpx;
-    color: #1b97ff;
-}
-
-.room {
-    position: relative;
-    // transform-origin: 50% 50%;
-    // transform: scale(0.3, 0.3);
-    // padding-bottom: 300rpx;
-    // background: pink;
-}
-
-.row {
-    display: inherit;
-    // align-items:center;
-    flex-wrap: nowrap;
-    position: relative;
-    height: 80rpx;
-    padding-top: 20rpx;
-    font-size: 12px;
-    line-height: 1;
-}
-
-.line-num {
-    left: 5rpx;
-    width: 20rpx;
-    line-height: 80rpx;
-    background-color: hsla(0, 0, 91%, 0.5);
-    color: #888666;
-    text-align: center;
-    font-size: 36rpx;
-    position: fixed;
-    display: none;
-}
-
-.center-line {
-    position: absolute;
-    z-index: 1;
-    height: 375rpx;
-    border: 1rpx solid #cccccc;
-    border-spacing: 4px;
-    border-style: dashed;
-    pointer-events: none;
-}
-
-.seat {
-    width: 60rpx;
-    height: 60rpx;
-    margin: 10rpx;
-    z-index: 10;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100%;
-}
-
-.flex_grow {
-    display: flex;
-    flex-grow: 0;
-}
-.choosed-container {
-    height: 220rpx;
-    flex-grow: 0;
-    box-sizing: border-box;
-    background: F2F1F6;
-    position: relative;
-}
-
-.seats-choosed {
-    padding: 24rpx 0 24rpx 30rpx;
-    position: relative;
-    white-space: nowrap;
-}
-.seats-choosed:after {
-    content: ' ';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 1px;
-    border-top: 1px solid #e5e5e5;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: scaleY(0.5);
-    transform: scaleY(0.5);
-}
-
-.seats-display {
-    padding: 0rpx 0rpx 80rpx 30rpx;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    box-sizing: border-box;
-    bottom: 0;
-    background: #f2f1f6;
-    display: flex;
-    align-items: flex-end;
-}
-.seat_displat_text {
-    font-size: 20rpx;
-    color: #666;
-    margin: 0 20rpx 0 6rpx;
-}
-
-.choosed {
-    display: inline-block;
-    font-size: 24rpx;
-    color: #888666;
-    padding: 8rpx 0 8rpx 30rpx;
-    background-color: #ffffff;
-    margin-right: 8rpx;
-    border: 2rpx solid #29cc6d;
-    border-radius: 8rpx;
-    color: #29cc6d;
-    position: relative;
-    box-sizing: border-box;
-    width: 169rpx;
-}
-
-.choosed_close {
-    position: absolute;
-    width: 20rpx;
-    height: 20rpx;
-    display: block;
-    padding: 0;
-    right: 10rpx;
-    top: 14rpx;
-}
-
-.cinema_info_title {
-    border: 1px solid #cdcdcd;
-    border-bottom: none;
-    color: #f2f1f6;
-    height: 8px;
-    padding-left: 8rpx;
-    padding-right: 8rpx;
-    z-index: 50;
-    background: #f2f1f6;
-}
-.cinema_info_text {
-    margin-top: -5px;
-    z-index: 51;
-    background: #f2f1f6;
-    padding: 0 8rpx 0 8rpx;
-}
-.cinema_info_line {
-    position: absolute;
-    border-bottom: 1px solid #e5e5e5;
-    width: 100%;
-    margin-top: 5px;
-}
-.ico-cancel{
-    position: absolute;
-    top:20rpx;
-    right:5rpx;
-    width:30rpx;
-    height:30rpx;
-    border-radius: 100%;
-    // background: #aaa;
-    transform: translateY(-50%);
-    color: transparent;
-    pointer-events: none;
-
-    &:after,
-    &:before{
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 60%;
-        height: 1px;
-        background: #777;
-        transform: translate(-50%,-50%) rotate(45deg) scaleY(.5);
-    }
-    &:before{
-        transform: translate(-50%,-50%) rotate(-45deg) scaleY(.5);
-    }
-}
-.indicator-scroller {
-    position: absolute;
-    z-index: 9;
-    top: 70rpx;
-    width: 40rpx;
-    /* pointer-events:none; */
-    transform-origin: 50% 0;
-}
-.indicator {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    position: absolute;
-    z-index: 1000;
-    left: 0;
-    width: 40rpx;
-    background: rgba(152, 160, 168, .6);
-    border-radius: 4em;
-    color: #fff;
-}
-
-//
-.flex-column {
-    flex-direction: column;
-}
-.flex-row {
-    flex-direction: row;
-}
-.flex-center {
-    justify-content: center;
-    align-items: center;
-}
-.flex-auto {
-    flex: 1;
-}
-
 @seatDefault: '../../../common/images/icon/seat_01.svg';
 @seatSold: '../../../common/images/icon/seat_02.svg';
 @seatCurrent: '../../../common/images/icon/seat_03.svg';
 
-@seatLoveLeftDefault: '../../../common/images/icon/seat_love_1_01.svg';
-@seatLoveRightDefault: '../../../common/images/icon/seat_love_2_01.svg';
+@seatLoveLeftDefault: '../../../common/images/icon/seat_love_2_01.svg';
+@seatLoveRightDefault: '../../../common/images/icon/seat_love_1_01.svg';
 
-@seatLoveLeftSold: '../../../common/images/icon/seat_love_1_02.svg';
-@seatLoveRightSold: '../../../common/images/icon/seat_love_2_02.svg';
-
-@seatLoveLeftCurrent: '../../../common/images/icon/seat_love_1_03.svg';
-@seatLoveRightCurrent: '../../../common/images/icon/seat_love_2_03.svg';
+@seatLoveLeftSold: '../../../common/images/icon/seat_love_2_02.svg';
+@seatLoveRightSold: '../../../common/images/icon/seat_love_1_02.svg';
 
+@seatLoveLeftCurrent: '../../../common/images/icon/seat_love_2_03.svg';
+@seatLoveRightCurrent: '../../../common/images/icon/seat_love_1_03.svg';
 
 @seatBestArea: '../../../common/images/icon/seat_area.svg';
 icon {
-    width: 32rpx;
-    height: 32rpx;
+    width: 30px;
+    height: 30px;
     background-repeat: no-repeat;
     background-position: 50% 50%;
-    background-size: contain;
+    background-size: 80%;
     &[type=~'seatDefault'] {
         background-image: data-uri('image/svg+xml;charset=UTF-8', @seatDefault);
     }
-    
+
     &[type=~'seatSold'] {
         background-image: data-uri(@seatSold);
     }
@@ -490,25 +34,284 @@ icon {
     }
 
     &[type=~'seatLoveLeftDefault'] {
+        background-size: 85%;
+        background-position: center left;
         background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveLeftDefault);
     }
     &[type=~'seatLoveRightDefault'] {
+        background-size: 85%;
+        background-position: center right;
         background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveRightDefault);
     }
 
     &[type=~'seatLoveLeftSold'] {
+        background-position: center left;
         background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveLeftSold);
     }
     &[type=~'seatLoveRightSold'] {
+        background-position: center right;
         background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveRightSold);
     }
 
     &[type=~'seatLoveLeftCurrent'] {
+        background-position: center left;
         background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveLeftCurrent);
     }
     &[type=~'seatLoveRightCurrent'] {
+        background-position: center right;
         background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveRightCurrent);
     }
+}
+page {
+    position: relative;
+    height: 100%;
+}
+.seat-map-container {
+    background: #f6f7f7;
+    overflow: hidden;
+    .seat-map-view {
+        position: relative;
+        .seat-item {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background-repeat: no-repeat;
+            background-position: 50% 50%;
+            background-size: 80%;
+            &.normal {
+                background-image: data-uri('image/svg+xml;charset=UTF-8', @seatDefault);
+                &.disabled {
+                    background-image: data-uri(@seatSold);
+                }
+                &.selected {
+                    background-image: data-uri(@seatCurrent);
+                }
+            }
+            &.love-left {
+                background-size: 85%;
+                background-position: center left;
+                background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveLeftDefault);
+                &.disabled {
+                    background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveLeftSold);
+                }
+                &.selected {
+                    background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveLeftCurrent);
+                }
+            }
+            &.love-right {
+                background-size: 85%;
+                background-position: center right;
+                background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveRightDefault);
+                &.disabled {
+                    background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveRightSold);
+                }
+                &.selected {
+                    background-image: data-uri('image/svg+xml;charset=UTF-8', @seatLoveRightCurrent);
+                }
+            }
+        }
+    }
+    .hall-name {
+        width: 180px;
+        height: 30px;
+        text-align: center;
+        line-height: 30px;
+        position: absolute;
+        top: 0;
+        background: rgba(230, 233, 236, 1);
+        border-radius: 0px 0px 33px 33px;
+        color: #555f67;
+        font-size: 14px;
+    }
+    .rows {
+        position: absolute;
+        left: 10px;
+        background: #98a0a8;
+        width: 18px;
+        border-radius: 9px;
+    }
+    .row-item {
+        font-size: 10px;
+        color: white;
+        position: absolute;
+        width: 18px;
+        left: 10px;
+        text-align: center;
+    }
+}
+.schedule-info {
+    padding: 15px 0 0 32px;
+    height: 84px;
+    border-bottom: 1px solid #e0e4e8;
+    .show-name {
+        color: #33393e;
+        font-size: 16px;
+        font-weight: bold;
+        line-height: 22px;
+    }
+    .show-time {
+        color: #858b92;
+        font-size: 13px;
+        line-height: 17px;
+        margin-top: 9px;
+    }
+}
+.room-legend {
+    position: relative;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 45px;
+    icon {
+        width: 18px;
+        height: 18px;
+        margin-right: 6px;
+    }
+    .room_legend_item {
+        display: flex;
+        color: #858b92;
+        font-size: 12px;
+    }
+    &_item {
+        margin-right: 40rpx;
+        color: #858b92;
+        font-size: 12px;
+        &:last-child {
+            margin: 0;
+        }
+    }
+}
+.usable-count {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    height: calc(40px + env(safe-area-inset-bottom));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid #e0e4e8;
+    padding-bottom: 0;
+    padding-bottom: env(safe-area-inset-bottom);
+    box-sizing: border-box;
+    color: #858b92;
+    font-size: 13px;
+    background: white;
+}
+.selected-seat-list {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 152px;
+    height: calc(152px + env(safe-area-inset-bottom));
+    border-top: 1px solid #e0e4e8;
+    padding-bottom: 0;
+    padding-bottom: env(safe-area-inset-bottom);
+    box-sizing: border-box;
+    background: white;
+    .selected-seat-scroll {
+        width: 100%;
+        margin-top: 26px;
+        height: 73px;
+        overflow: hidden;
+        white-space: nowrap;
+        .seat-wrapper {
+            display: inline-block;
+            margin-left: 10px;
+            &:first-child {
+                margin-left: 30px;
+            }
+        }
+        .selected-seat-item {
+            // display: flex;
+            // flex-wrap: nowrap;
+            width: auto;
+            padding: 15px;
+            white-space: nowrap;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border: 1rpx solid #d7dbe0;
+            border-radius: 20rpx;
+            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
+            color: #858b92;
+            line-height: 1.2;
+
+            &:before {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 0;
+                transform: translate(-50%, -50%);
+                width: 20rpx;
+                height: 20rpx;
+                border-radius: 0 100px 100px 0;
+                background: inherit;
+                border: inherit;
+                border-color: inherit;
+                box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.02);
+            }
+            &:after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                right: 100%;
+                transform: translate(0, -50%);
+                width: 12rpx;
+                height: 20rpx;
+                background: #fff;
+            }
 
+            b {
+                display: balck;
+                font-size: 10px;
+            }
+            view,
+            b {
+                pointer-events: none;
+            }
+            .seat {
+                &-name {
+                    // font-size: 16px;
+                }
+                &-desc {
+                    color: #d7dbe0;
+                }
+                &-price {
+                    color: #f16e24;
+                }
+            }
+        }
+    }
+}
+.ico-cancel {
+    position: absolute;
+    top: 20rpx;
+    right: 5rpx;
+    width: 30rpx;
+    height: 30rpx;
+    border-radius: 100%;
+    // background: #aaa;
+    transform: translateY(-50%);
+    color: transparent;
+    pointer-events: none;
 
+    &:after,
+    &:before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 60%;
+        height: 1px;
+        background: #777;
+        transform: translate(-50%, -50%) rotate(45deg) scaleY(0.5);
+    }
+    &:before {
+        transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.5);
+    }
 }

src/pages/chooseSeat/chooseSeat.wpy

@@ -3,6 +3,99 @@
 </style>
 <template>
     <view class="Room container">
+        <view class="schedule-info">
+            <view class="show-name">{{show.showName}}</view>
+            <view class="show-time">
+                {{showTime}}
+            </view>
+        </view>
+        <view class="room-legend">
+            <view class="room_legend_item">
+                <icon type="seatDefault" />
+                <view>可选</view>
+            </view>
+            <view class="room_legend_item">
+                <icon type="seatSold" />
+                <view>不可选</view>
+            </view>
+            <view class="room_legend_item">
+                <icon type="seatCurrent" />
+                <view>已选</view>
+            </view>
+            <view wx:if="{{!!hasLove}}" class="room_legend_item">
+                <icon type="seatLoveRightDefault" style="margin:0" />
+                <icon type="seatLoveLeftDefault" />
+                <view>情侣座</view>
+            </view>
+            <view wx:if="{{!!hasBestArea}}" class="room_legend_item">
+                <icon type="seatBestArea" />
+                <view>最佳观影区</view>
+            </view>
+        </view>
+        <movable-area wx:if="{{seats.length}}" class="seat-map-container" style="width:{{seatMapContainerWidth}}px;height:{{seatMapContainerHeight}}px;" scale-area="true">
+            <movable-view class="seat-map-view" style="width:{{seatMapWidth}}px;height:{{seatMapHeight}}px;"
+                scale="true" x="30" y="30" scale-value="{{initScale}}" animation="{{false}}" inertia="true" direction="all" bindscale="onScale" bindchange="onChange">
+                <view
+                    wx:for="{{seats}}"
+                    class="seat-item {{item.selected===true?'selected':''}} {{item.status!==1?'disabled':''}} {{item.flag===0?'normal':''}} {{item.flag===1?'love-left':''}} {{item.flag===2?'love-right':''}}"
+                    data-flag="{{item.flag}}"
+                    data-ext-id="{{item.extId}}"
+                    id="{{item.extId}}"
+                    bindtap="onTapSeat"
+                    style="top:{{item.topPx}}px;left:{{item.leftPx}}px">
+                </view>
+                <!-- <block wx:for="{{seats}}">
+                    <icon
+                        wx:if="{{item.flag === 0}}"
+                        data-ext-id="{{item.extId}}"
+                        type="{{(item.status === 1) ? 'seatDefault' : (item.status === 0) ? 'seatSold' : (item.status === 2) ? 'seatCurrent' : 'none'}}"
+                        class="seat-item"
+                        id="{{item.extId}}" bindtap="chooseSeat"
+                        style="top:{{item.topPx}}px;left:{{item.leftPx}}px">
+                        {{item.name}}
+                    </icon>
+                    <icon
+                        wx:elif="{{item.flag === 2}}"
+                        data-ext-id="{{item.extId}}"
+                        type="{{(item.status === 1) ? 'seatLoveLeftDefault' : (item.status === 0) ? 'seatLoveLeftSold' : (item.status === 2) ? 'seatLoveLeftCurrent' : 'none'}}"
+                        class="seat-item"
+                        id="{{item.extId}}" bindtap="chooseSeat"
+                        style="top:{{item.topPx}}px;left:{{item.leftPx}}px">>
+                        {{item.name}}
+                    </icon>
+                    <icon
+                        wx:elif="{{item.flag === 1}}"
+                        data-ext-id="{{item.extId}}"
+                        type="{{(item.status === 1) ? 'seatLoveRightDefault' : (item.status === 0) ? 'seatLoveRightSold' : (item.status === 2) ? 'seatLoveRightCurrent' : 'none'}}"
+                        class="seat-item"
+                        id="{{item.extId}}" bindtap="chooseSeat"
+                        style="top:{{item.topPx}}px;left:{{item.leftPx}}px">>
+                        {{item.name}}
+                    </icon>
+                </block> -->
+            </movable-view>
+            <view class="hall-name" style="left:{{centerLine-90}}px">
+                {{schedule.hallName}}
+            </view>
+            <view class="rows" style="{{rowIndicatorStyle}}">
+            </view>
+            <view class="row-item" wx:for="{{rows}}" style="top:{{y+item.top*scale}}px;line-height:{{scale*30}}px">{{item.rowName}}</view>
+        </movable-area>
+        <view class="usable-count" wx:if="{{selectedSeats.length===0}}">
+            {{usableCouponCount}}张兑换券可用
+        </view>
+        <view class="selected-seat-list">
+            <scroll-view class="selected-seat-scroll" scroll-x="true">
+                <view class="seat-wrapper" wx:for="{{selectedSeats}}">
+                    <view class="selected-seat-item">
+                        <view class="seat-name">{{item.name}}</view>
+                        <b class="seat-desc">兑换券抵扣</b>
+                        <i class="ico-cancel" />
+                    </view>
+                </view>
+            </scroll-view>
+
+        </view>
     </view>
 </template>
 
@@ -21,12 +114,92 @@ export default class Index extends wepy.page {
         Modal
     };
     data = {
-        seats: []
+        show: {},
+        schedule: {},
+        seats: [],
+        seatMapContainerWidth: 0,
+        seatMapContainerHeight: 0,
+        seatMapWidth: 0,
+        seatMapHeight: 0,
+        initScale: 1,
+        scale: 1,
+        x: 30,
+        y: 30,
+        rows: [],
+        usableCouponCount: 0,
+        selectedSeats: []
+    };
+    computed = {
+        showTime() {
+            if (this.schedule.showTime && this.schedule.closeTime) {
+                return `${this.schedule.showTime.substring(5, 16)} ～ ${this.schedule.closeTime.substring(11, 16)} （${this.schedule.showVersion}）`;
+            }
+            return;
+        },
+        centerLine() {
+            return (this.seatMapWidth * this.scale) / 2 + this.x;
+        },
+        rowIndicatorStyle() {
+            if (this.rows.length) {
+                return `top:${this.y + this.rows[0].top - 15}px;height:${(this.rows[this.rows.length - 1].top - this.rows[0].top + 60) * this.scale}px`;
+            }
+        },
+        hasLove() {
+            return (
+                this.seats.filter(i => {
+                    return i.flag === 1 || i.flag === 2;
+                }).length > 0
+            );
+        }
+    };
+    methods = {
+        getSeatType(flag) {
+            switch (flag) {
+                case 0:
+                    return 'normal';
+                case 1:
+                    return 'loveLeft';
+                case 2:
+                    return 'loveRight';
+                default:
+                    return '';
+            }
+        },
+        onScale(e) {
+            this.scale = e.detail.scale;
+            this.x = e.detail.x;
+            this.y = e.detail.y;
+            // this.centerLine = (this.seatMapWidth * this.scale) / 2 - 90;
+            this.$apply();
+        },
+        onChange(e) {
+            this.x = e.detail.x;
+            this.y = e.detail.y;
+        },
+        onTapSeat(e) {
+            let index = this.seats.findIndex(i => {
+                return i.extId == e.target.dataset.extId;
+            });
+            if (index > -1) {
+                if (e.target.dataset.flag === 1) {
+                    if (!this.chooseSeat(index + 1)) {
+                        return;
+                    }
+                } else if (e.target.dataset.flag === 2) {
+                    if (!this.chooseSeat(index - 1)) {
+                        return;
+                    }
+                }
+                this.chooseSeat(index);
+            }
+        }
     };
-    computed = {};
-    methods = {};
     onShow() {}
     onLoad(options) {
+        wx.showLoading({
+            title: '加载中',
+            mask: true
+        });
         this.scheduleId = options.scheduleId;
         this.couponId = options.couponId;
         this.cinemaId = options.cinemaId;
@@ -34,12 +207,53 @@ export default class Index extends wepy.page {
             couponId: options.couponId
         })
             .then(res => {
+                this.show = res.show;
+                this.schedule = res.schedule;
                 this.seats = res.seatMap.seats;
+                this.usableCouponCount = res.usableCouponCount;
+                let sysInfo = wx.getSystemInfoSync();
+                let windowWidth = sysInfo.windowWidth;
+
+                this.seatMapContainerWidth = windowWidth;
+                this.seatMapContainerHeight = sysInfo.windowHeight - 130;
+                this.seatMapWidth = res.width;
+                this.seatMapHeight = res.height;
+
+                this.scale = this.initScale = (this.seatMapContainerWidth - 60) / this.seatMapWidth;
+
+                let rowMap = {};
+                res.seatMap.seats.forEach(i => {
+                    if (i.topPx) {
+                        rowMap[i.rowName] = i.topPx;
+                    }
+                });
+                let rows = [];
+                for (let rowName in rowMap) {
+                    rows.push({
+                        rowName: rowName,
+                        top: rowMap[rowName]
+                    });
+                }
+                rows.sort((a, b) => {
+                    return a.top - b.top;
+                });
+                this.rows = rows;
+                wx.hideLoading();
                 this.$apply();
             })
             .catch(e => {
+                wx.hideLoading();
                 console.log(e);
             });
     }
+    chooseSeat(index) {
+        if (this.seats[index] && this.seats[index].status === 1) {
+            this.seats[index].selected = !!!this.seats[index].selected;
+            this.selectedSeats = this.seats.filter(i => i.selected === true);
+            this.$apply();
+            return true;
+        }
+        return false;
+    }
 }
 </script>