Blame view

apps/pages/showorder/components/order-slide-item.vue 2.56 KB
htoooth authored
1 2
<template>
  <div class="order-wrapper">
htoooth authored
3 4 5 6 7 8 9 10
    <Slide :data="list"
          :loop="false"
          :autoPlay="false"
          class="slide-container"
          @change="slideChangeHandler"
          :threshold="0.05"
          @options="slideOptions"
    >
htoooth authored
11 12 13 14 15 16 17 18 19 20
      <SlideItem v-for="i in list">
        <div class="image-wrapper">
          <img class="image" :src="i" alt="">
        </div>
      </SlideItem>

      <template slot="dots"><i></i></template>
    </Slide>

    <div class="image-preview-footer">
htoooth authored
21
      <span class="image-preview-counter">{{currentPageIndex + 1}}/{{list.length}}</span>
htoooth authored
22
    </div>
htoooth authored
23 24 25

    <AvatarHeader class="avatar-wrapper"></AvatarHeader>
htoooth authored
26
    <DescFooter class="footer-wrapper" @on-comment-click="onCommentClick"></DescFooter>
htoooth authored
27 28 29 30 31 32 33
  </div>
</template>

<script>

import {Slide} from 'cube-ui';
import AvatarHeader from './avatar-header';
htoooth authored
34 35
import DescFooter from './desc-footer';
htoooth authored
36 37 38 39
export default {
  name: 'ShowOrderItem',
  components: {
    AvatarHeader,
htoooth authored
40
    DescFooter,
htoooth authored
41
    Slide,
htoooth authored
42
    SlideItem: Slide.Item,
htoooth authored
43 44 45 46 47 48 49 50
  },
  data() {
    return {
      list: [
        'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mpd5uj21hc0tyws2.jpg',
        'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0ncnnej21hc0zetxo.jpg',
        'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mqvu5j21hc0zkgzz.jpg',
      ],
htoooth authored
51 52 53 54 55 56 57
      currentPageIndex: 0,
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        click: false,
        directionLockThreshold: 0,
        stopPropagation: true
htoooth authored
58
      }
htoooth authored
59 60 61 62 63 64
    };
  },
  methods: {
    close() {

    },
htoooth authored
65 66
    onclick(e) {
    },
htoooth authored
67 68
    slideChangeHandler(currentPageIndex) {
      this.currentPageIndex = currentPageIndex;
htoooth authored
69 70 71
    },
    onCommentClick() {
      this.$emit('on-comment-click', {});
htoooth authored
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
    }
  }
};
</script>

<style lang="scss" scoped>
.order-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url('~statics/image/showorder/sd_bg@2x.png');
  background-size: cover;
}

.avatar-wrapper {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 2;
}

.image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .image {
    width: 100%;
  }
}

.image-preview-footer {
  position: absolute;
  width: 180px;
  height: 60px;
  background: rgba(0, 0, 0, 0.4);
  top: 110px;
  right: -60px;
  border-radius: 30px;
}

.image-preview-counter {
htoooth authored
115
  margin-left: 40px;
htoooth authored
116 117
  font-size: 26px;
  color: white;
htoooth authored
118 119
  height: 60px;
  line-height: 60px;
htoooth authored
120
}
htoooth authored
121 122 123 124 125 126 127 128 129 130 131 132 133

.footer-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.test {
  position: absolute;
  top: 50px;
  left: 100px;
}
htoooth authored
134
</style>