CommunityApp/pagesM/pages/integral_list.vue

<template>
  <view class="dt-page">
    <view class="hd-wrap">
      <image class="hd-bg" src="http://139.9.103.171:1888/img/image/integral_hd.png" mode="aspectFill"></image>

      <view class="point-wrap" @tap="tapExplain">
        <image class="icon" src="http://139.9.103.171:1888/img/image/explain.png" mode="aspectFit"></image>
        <text>积分说明</text>
      </view>
      <view class="hd-mn">
        <view>我的积分</view>
        <view class="value">8382</view>
      </view>
      
    </view>

    <view class="mn-wrap">
      <view v-for="(item,idx) in dataList" :key="idx" class="item">
        <view class="lt">
          <view class="title">{{item.title}}</view>
          <view class="date">{{item.date}}</view>
        </view>
        <view class="rt">
          <view v-if="item.value>0" class="dt-color-primary">+{{item.value|moneyEx}}</view>
          <view v-else class="dt-color-error">{{item.value|moneyEx}}</view>
        </view>
      </view>
    </view>

    <!-- 说明 -->
    <view class="description" v-if="isShowDescription" @tap="closeToast">
      <view class="description-box" @tap.native.stop="showDescriptionClick">
        <view class="description-title">积分说明</view>
        <scroll-view scroll-y class="description-scroll-view">
          <view class="description-content">
            1.会员通过现金、银行卡、网上移动端支付等方式实际支付的金额，按1元人民币＝1积分的方式累计积分。例如，如果会员实际支付人民币500元，可获得500积分。\n\n2.以下情况不积分：促销活动礼品或赠品\n\n3.如果会员对是否发生“不诚实交易行为”有疑义的，应在10个工作日内向客服提出并提交相关举证材料，我们将在10个工作日内告知处理结果。\n\n7.积分不得转移、转让或赠送给第三人。\n\n8.积分不能找零或偿还。已经使用的用于积分兑换的积分，不可变更。\n\n9.FILA有权视情况对积分规则进行修订。FILA将通过官方渠道更新信息并告知会员。如果FILA认定变更事项会对会员权益产生重大影响的，FILA应通过官方途径提前30天通知会员。\n\n积分有效期：积分产生之日起365天，过期前30天会通过FILA VIP微信号提醒会员积分即将到期。
          </view>
        </scroll-view>
        <button class="btn-submit" @tap="closeToast">我知道了</button>
      </view>
    </view>
  </view>
</template>
<script>
import DtDialog from '../comps/dt_dialog.vue'
export default {
  components:{
    DtDialog
  },
  data(){
    return {
      isShowDescription:true,
      dataList:[
        {
          title:'赠送',
          value:20.50,
          date:'2018-01-26 12:33:54'
        },
        {
          title:'兑换《霹雳娇娃》电影票',
          value:-65.84,
          date:'2018-01-26 12:33:54'
        },
        {
          title:'赠送',
          value:20.50,
          date:'2018-01-26 12:33:54'
        },
      ]
    }
  },
  methods:{
    showDescriptionClick(){},
    tapExplain(){
      this.isShowDescription = true
    },
    closeToast(){
      this.isShowDescription = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dt-page{
  min-height:100vh;
  background-color:#f2f2f2;
  .hd-wrap{
    position:relative;
    width:100%;
    height:200upx;

    .hd-bg{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    .point-wrap{
      position:absolute;
      top:0;
      right:0;
      padding:20upx 30upx;
      display:flex;
      align-items: center;
      font-size:20upx;
      font-weight:500;
      color:#fff;
      z-index:6;

      .icon{
        margin-right:10upx;
        width:20upx;
        height:20upx;
      }
    }
    .hd-mn{
      position:relative;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width:100%;
      height:100%;
      font-size:24upx;
      font-weight:500;
      color:#fff;
      line-height: 1;
      z-index:2;

      .value{
        padding-top:20upx;
        font-size:60upx;
        font-weight:bold;
      }
    }
  }

  .mn-wrap{
    .item{
      display:flex;
      align-items: center;
      justify-content: space-between;
      height: 100upx;
      padding:0 30upx;
      
      background-color:#fff;
      border-bottom:1upx solid #f2f2f2;

      .lt{
        flex:3;
        display:flex;
        justify-content: center;
        height:100%;
        display:flex;
        flex-direction:column;
        .title{
          font-size:26upx;
          font-weight:bold;
        }
        .date{
          padding-top:15upx;
          line-height: 1;
          font-size:20upx;
          font-weight:400;
          color:#999;
        }
      }
      .rt{
        flex:1;
        display:flex;
        justify-content: flex-end;
        align-items: center;
        height:100%;
        font-size:30upx;
        font-weight:bold;

      }
    }
  }

  .description {
    position: fixed;
    width:100vw;
    height: 100vh;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;

    .description-box {
      position: fixed;
      top:50%;left:50%;
      transform: translate(-50%,-50%);
      width:600upx;
      height: fit-content;
      max-height: 740upx;
      padding-bottom:90upx;
      background: #fff;
      border-radius: 10upx;
      
      .btn-submit{
        position:absolute;
        bottom:0;left:0;
        width:100%;
        height:90upx;
        background-color:$dt-color-primary;
        font-size:32upx;
        line-height: 90upx;
        border-radius:0 0 10upx 10upx;
        border: 0;
      }

      .description-scroll-view {
        height: fit-content;
        max-height: 50vh;
      }
      .description-title {
        padding: 35upx 0 39upx 0;
        line-height: 1;
        text-align: center;
        font-size:30upx;
        font-weight:bold;
      }
      .description-content {
        padding: 0 30upx 50upx 30upx;
        display: flex;
        flex-direction: column;
        white-space: pre-wrap;
        font-size:28upx;
        color:#666666;
      }
    }
  }
}
</style>