CommunityApp/pagesM/pages/integral.vue

<template>
  <view class="dt-page">
    <view class="hd-wrap">
      <image class="avatar" src="http://139.9.103.171:1888/img/image/avatar.png" mode="aspectFill"></image>
      <view class="phone">130****0800</view>
      <view class="right-wrap">
        <view>积分:</view>
        <view class="point">562</view>
        <image class="arrow" src="http://139.9.103.171:1888/img/image/arrow.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="scroll-tab-wrap">
      <DtScrollTab :dataList="tabList" :current.sync="curTab" @change="onTabChange"/>
    </view>
        
    <view class="goods-list">
      <view v-for="(item,idx) in goodsList" :key="idx" 
        class="goods"
        @tap="tapToExchange(item)">
        
        <image class="goods-main" src="http://139.9.103.171:1888/img/image/noData.png" mode="aspectFill"></image>
        <view class="goods-name">众生丸(薄膜衣 浓缩丸)</view>
        <view class="goods-params">
          <view class="params">特价抢购</view>
          <view class="params">包邮</view>
        </view>
        <view class="goods-point">200积分</view>
      </view>
    </view>
  </view>
</template>
<script>
import DtScrollTab from '../comps/dt_scroll_tab.vue'
export default {
  components:{
    DtScrollTab
  },
  data(){
    return {
      curTab:0,
      tabList:['全部','优惠券','好物券','商品','会员卡'],
      goodsList:[
        {}, {},
        {}, {},
        {}
      ]
    }
  },
  methods:{
    
    onTabChange(idx){

    },
    tapToExchange(item){
      uni.navigateTo({
        url:'/pagesM/pages/integral_exchange'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dt-page{
  min-height:100vh;
  background-color:#f2f2f2;

  .hd-wrap{
    display:flex;
    align-items: center;
    width:100%;
    height:90upx;
    line-height:90upx;
    background-color:#fff;  
    .avatar{
      margin-left:30upx;
      margin-right:10upx;
      width:60upx;
      height:60upx;
      border-radius:50%;
    }
    .phone{
      flex:1;
      font-size:28upx;
      color:#333333;
    }
    .right-wrap{
      display:flex;
      align-items: center;
      font-size:28upx;
      .point{
        margin-left:10upx;
        color:$dt-color-primary;
      }
      .arrow{
        margin-right:30upx;
        margin-left:20upx;
        width:12upx;
        height:22upx;
      }
    }
  }
  .scroll-tab-wrap{
    margin:20upx 0;
  }
  .goods-list{
    display:flex;
    flex-wrap:wrap;
    padding-left:16upx;
    padding-bottom:20upx;
    .goods{
      margin-right:10upx;
      margin-bottom:10upx;
      display: flex;
      flex-wrap:wrap;
      width:352upx;
      height:460upx;
      padding:26upx 26upx 0;
      box-sizing:border-box;
      background-color:#fff;
      .goods-main{
        width:300upx;
        height:250upx;  
      }
      .goods-name{
        font-size:28upx;
        color:#333333;
      }
      .goods-params{
        display:flex;
        flex-wrap:wrap;
        line-height: 30upx;
        height: 30upx;

        .params{
          position:relative;
          margin-right:20upx;
          width:90upx;
          height:30upx;
          border-radius:4upx;
          font-size:18upx;
          line-height:30upx;
          text-align:center;
          font-weight:400;
          color:#EE1515;
        }
        .params:before{
          position:absolute;
          top:-1upx;left:-1upx;
          width:100%;
          height:100%;
          border:1upx solid currentColor;
          border-radius:4upx;
          content:'';
        }
      }
      .goods-point{
        font-size:30upx;
        color:$dt-color-primary;
        font-weight:bold;
      }
    }
  }
}
</style>