wechat/src/pages/user/customization/customizationDetail.vue

<template>
  <div v-if="showPage">
    <div class="top">
      <img :src="topImg">
      <div>
        <div class="list">
          <img :src='cover'>
          <div>
            <div>云台天境台历定制</div>
            <div>主办方: {{detail.CaseName}}</div>
            <div>参与时间: {{toolClass.dateFormat(detail.CreateDate)}}</div>
          </div>
          <span>{{detail.MakeStatus === 'making' ? '制作中' : '制作完成'}}</span>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="title">定制模版</div>
      <img :src="detail.cover.CalendarImg">
      <div class="text">云台天境日历模版</div>
    </div>
    <div class="bottom">
      <div class="title">定制预览</div>
      <div class="pic-list">
        <img
          v-for="(item,index) in detail.Imgs"
          :src="item.CalendarImg"
          :key="index"
          v-if="showMore || index < 4"
        >
      </div>
      <div v-if="!showMore" @click="more()" class="more">
        查看更多
        <i class="iconfont icon-xia"></i>
      </div>
      <div v-else @click="noMore()" class="more">
        收起
        <i class="iconfont icon-shang"></i>
      </div>
    </div>
    <div class="foot">
      <div>联系我们: 400-2435 3756</div>
    </div>
  </div>
</template>

<script>
import cover from '@/common/icon/heise.png'
import topImg from '@/common/icon/topImg.png'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapCustomizationState, mapActions: mapCustomizationActions } = createNamespacedHelpers('customization')
export default {
  data () {
    return {
      topImg,
      cover,
      showPage: false,
      showMore: false
    }
  },
  created () {
    this.getDetail({ calendarId: this.$route.query.id }).then(() => {
      this.showPage = true
    })
  },
  computed: {
    ...mapCustomizationState({
      detail: item => item.detail
    })
  },
  methods: {
    ...mapCustomizationActions(['getDetail']),
    more () {
      this.showMore = true
    },
    noMore () {
      this.showMore = false
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 0.16rem;
  padding: 0.2rem 0 0.1rem 0.25rem;
  text-align: left;
}
.top {
  > img {
    width: 100%;
  }
  > div {
    height: 0.85rem;
    background: #f2f2f2;
    position: relative;
    .list {
      box-sizing: border-box;
      position: absolute;
      bottom: 0.1rem;
      left: 50%;
      transform: translateX(-50%);
      width: 3.43rem;
      height: 1.1rem;
      background: #fff;
      padding: 0.16rem 0.1rem;
      display: flex;
      box-shadow: 0px 2px 8px 0px rgba(204, 204, 204, 0.5);
      border-radius: 10px;
      img {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 0.05rem;
      }
      > div {
        padding: 0.05rem 0.14rem;
        flex: 1;
        div:nth-of-type(1) {
          color: #000;
          padding: 0px;
        }
        div:nth-of-type(2) {
          padding-top: 0.12rem;
        }
        div {
          font-size: 0.12rem;
          padding-top: 0.08rem;
          color: #999999;
        }
      }
      span {
        position: absolute;
        right: 0;
        top: 0.1rem;
        display: block;
        background: linear-gradient(
          270deg,
          rgba(227, 191, 172, 1) 0%,
          rgba(178, 144, 132, 1) 100%
        );
        border-radius: 10px 0px 0px 10px;
        padding: 1px 0.1rem 2px 0.15rem;
        font-size: 0.12rem;
      }
    }
  }
}
.main {
  border-bottom: 0.1rem solid #f2f2f2;
  text-align: center;
  .text {
    padding-bottom: 0.15rem;
  }
  img {
    width: 1.65rem;
    margin: 20px;
  }
}
.bottom {
  .pic-list {
    padding: 0.05rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    img {
      width: 1.65rem;
      height: 2.6rem;
      margin: 0.08rem;
    }
  }
  .more {
    color: #77a5f0;
    text-align: center;
    margin-bottom: 0.1rem;
    i {
      color: #77a5f0;
    }
  }
}
.foot {
  height: 0.9rem;
  text-align: center;
  line-height: 0.9rem;
  background: #f2f2f2;
}
</style>