jufubao-movie 1.0.36-beta1 → 1.0.36-beta3

package/src/components/JfbMovieTfkFilmList/ContentCinema.vue

@@ -0,0 +1,145 @@
+<template>
+  <view class="content" @click="handleCinemaDetail">
+    <view class="title">{{item['cinema_name']}}</view>
+    <view class="address">{{item['address']}}</view>
+    <view class="bottom">
+      <view class="distance">
+        <template v-if="item['distance']">
+          <xd-font-icon size="26" icon="icondizhi" :color="color.SEAT"></xd-font-icon>
+          <text :style="{color: color.SEAT}">{{item['distance']}}</text>
+        </template>
+      </view>
+      <view class="btn">
+        <view
+          v-for="(name,index) in item['cinema_type_name']"
+          :key="index"
+          @click.stop="handleBtn(item['cinema_type'][index])"
+          :style="{
+            backgroundColor:color[item['cinema_type'][index]],
+            color:'#fff'
+          }">{{name}}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton.vue";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
+
+  export default {
+    name:'ContentCinema',
+    components:{
+      XdButton,
+      XdFontIcon
+    },
+    props:{
+      item:Object,
+      color: {
+        type: Object,
+        default: {}
+      },
+
+    },
+    data(){
+      return {
+
+      }
+    },
+    created() {
+
+    },
+    methods:{
+      handleCinemaDetail(){
+        //优先在线选座
+        if(this.item['cinema_type'].includes('SEAT')) {
+          this.handleSchedule();
+          return
+        }
+        if(this.item['cinema_type'].includes('CODE')) {
+          this.handleCodeDetail();
+          return
+        }
+        if(this.item['cinema_type'].includes('SELL')) {
+          this.handleCashierDetail();
+          return
+        }
+        console.error(`${JSON.stringify(this.item['cinema_type'])}`)
+      },
+
+      handleBtn(code){
+        if(code === 'SEAT') this.handleSchedule();
+        else if(code === 'CODE') this.handleCodeDetail();
+        else if(code === 'SELL') this.handleCashierDetail();
+        else console.error(`${JSON.stringify(this.item['cinema_type'])}`)
+      },
+
+      //电子码
+      handleCodeDetail(){
+        console.warn(`handleCodeDetail`)
+        this.$emit('on-code-detail', this.item);
+      },
+      //核销
+      handleCashierDetail(){
+        console.warn(`handleCashierDetail`)
+        this.$emit('on-cashier-detail', this.item);
+      },
+
+      //选座排期
+      handleSchedule(){
+        console.warn(`handleSchedule`)
+        this.$emit('on-schedule', this.item);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+.content {
+  .title {
+    font-size: 32rpx;
+    line-height: 40rpx;
+    margin-bottom: 20rpx;
+    color: #333;
+    font-weight: 500;
+  }
+  .address {
+    font-size: 24rpx;
+    line-height: 30rpx;
+    color: #999;
+    margin-bottom: 15rpx;
+  }
+
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 30rpx;
+
+    & > .distance {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      & > text {
+        margin-left: 10rpx;
+        font-size: 24rpx;
+      }
+    }
+
+    & > .btn {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      & > view {
+        margin-left: 10rpx;
+        padding: 0 30rpx;
+        line-height: 60rpx;
+        border-radius: 30rpx;
+        font-size: 26rpx;
+      }
+    }
+  }
+}
+</style>

package/src/components/JfbMovieTfkFilmList/ContentItem.vue

@@ -0,0 +1,164 @@
+<template>
+  <view class="content" @click="handleDetail(item)">
+    <view
+      class="image"
+      :style="{marginRight: outSpacing + 'rpx',borderRadius:borderRadius+'rpx'}"
+    >
+      <image :src="item['poster']"  :alt="item['show_name']"></image>
+    </view>
+    <view class="middle">
+      <view class="name">{{item['show_name']}}</view>
+      <view class="other">类型：{{item['type']}}</view>
+      <view class="other">导演：{{item['director']}}</view>
+      <view class="other">主演：{{item['leading_role']}}</view>
+    </view>
+    <view class="right">
+      <view class="score">
+        <template v-if="item['remark']">
+          <text>评分：</text><text :style="{color:color}">{{item['remark']}}</text>
+        </template>
+      </view>
+      <view class="btn">
+        <template v-if="type === 'hot'">
+          <xd-button
+            v-if="item['show_button'] === '1'"
+            type="primary"
+            style="display:block;"
+            size="small"
+            @click.stop="handleBuy(item)">购票</xd-button>
+          <xd-button
+            v-else-if="item['show_button'] === '2'"
+            type="subPrimary"
+            style="display:block;"
+            size="small"
+            @click="handleBuy(item)">预售</xd-button>
+        </template>
+        <template v-if="type === 'rightnow'">
+          <xd-button
+            v-if="item['show_button'] === '3'"
+            type="success"
+            style="display:block;"
+            size="small"
+            @click.stop="handleDetail(item)"
+          >想看</xd-button>
+          <xd-button
+            v-else-if="item['show_button'] === '2'"
+            type="subPrimary"
+            style="display:block;"
+            size="small"
+            @click.stop="handleBuy(item)">预售</xd-button>
+        </template>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton.vue";
+  export default {
+    name:'ContentItem',
+    components:{
+      XdButton
+    },
+    props:{
+      item:Object,
+      outSpacing: {
+        type: Number|String,
+        default: 20
+      },
+      color: {
+        type: String,
+        default: ''
+      },
+      type:{
+        type: String,
+        default: 'hot'
+      },
+      borderRadius:{
+        type: String,
+        default: '10'
+      }
+
+    },
+    created() {
+
+    },
+    methods:{
+      handleDetail(item){
+        console.log('handleDetail.item',item,item.id);
+        this.$emit('on-film-detail',item.id);
+      },
+      handleBuy(item){
+        console.log('handleDetail.item',item,item.id);
+        this.$emit('on-buy',item.id);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .image {
+    width: 160rpx;
+    height: 240rpx;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    & > image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .middle {
+    flex: 1;
+    & .name {
+      font-size: 36rpx;
+      font-weight: 600;
+      margin-bottom: 20rpx;
+      .uni-max-cut(2, 90);
+      line-height: 45rpx;
+    }
+
+    & .other {
+      font-size: 25rpx;
+      color: #999;
+      .uni-max-cut(1,36);
+      line-height: 36rpx;
+      margin-bottom: 10rpx;
+      &:last-child {
+        margin-bottom: 0!important;
+      }
+    }
+  }
+
+  .right {
+    flex-shrink: 0;
+    display: flex;
+    align-content: space-between;
+    align-items: flex-end;
+    justify-content: flex-end;
+    flex-flow: wrap;
+    height: 100%;
+    box-sizing: border-box;
+    width: 160rpx;
+
+    & .score {
+      height: 40rpx;
+      width:100%;
+      text-align: right;
+      & > text:nth-child(1) {
+        font-size: 20rpx;
+      }
+      & > text:nth-child(2) {
+        font-size: 28rpx;
+      }
+
+    }
+
+  }
+}
+</style>