recycle-mobile/src/pages/mine/index.vue

<template>
  <view>
    <view class="bg-container"></view>

    <zj-page-layout
    	:hasFooter="false"
    	:isScroll="true"
    	:refresherTriggered="refresherTriggered"
    	@refresherrefresh="refresherrefresh">
      <template slot="header">
        <view class="header-container" :style="cuStyle">我的</view>
      </template>

      <view class="all-container">
        <view class="user-container card">
          <view class="user">
            <image src="@/static/common/logo.png" mode="aspectFill"></image>
            <view class="main" v-if="isLogin">
              <view class="name">张三</view>
              <view class="real">实名认证</view>
            </view>
            <view class="main" v-else @tap="navToPage('/pages/login/indexs')">
              <view class="name">请先登录</view>
            </view>
          </view>
          <view class="stats">
            <view class="item" v-for="(item, index) in userStats" :key="index" @tap="$navPage(item.url)">
              <view class="num">{{item.num}}</view>
              <view class="text">{{item.name}}</view>
            </view>
          </view>
        </view>

        <view class="stats-container card">
          <view class="top">
            <view class="left">我发布的</view>
            <view class="right" @tap="$navPage(`/pages/mine/myIssue/list`)">全部<text class="iconfont icon-jinru"></text></view>
          </view>
          <view class="stats">
            <view class="item" v-for="(item, index) in issueStats" :key="index" @tap="$navPage(`/pages/mine/myIssue/list`)">
              <view class="icon">
                <text class="iconfont" :class="item.icon"></text>
                <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
              </view>
              <view class="text">{{item.name}}</view>
            </view>
          </view>
        </view>

        <view class="stats-container card">
          <view class="top">
            <view class="left">我买到的</view>
            <view class="right" @tap="$navPage(`/pages/mine/myBuy/list`)">全部<text class="iconfont icon-jinru"></text></view>
          </view>
          <view class="stats">
            <view class="item" v-for="(item, index) in buyStats" :key="index" @tap="$navPage(`/pages/mine/myBuy/list`)">
              <view class="icon">
                <text class="iconfont" :class="item.icon"></text>
                <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
              </view>
              <view class="text">{{item.name}}</view>
            </view>
          </view>
        </view>

        <view class="menu-container card">
          <block v-for="(item, index) in pageList" :key="index">
            <view class="item" v-if="item.url != 'contact'" @tap="navToPage(item.url)">
              <view class="name">{{item.name}}</view>
              <text class="iconfont icon-jinru"></text>
            </view>
            <button class="item" v-else open-type="contact" :plain="true">
            	<view class="name">{{item.name}}</view>
            	<text class="iconfont icon-jinru"></text>
            </button>
          </block>
        </view>
      </view>
    </zj-page-layout>
  </view>
</template>

<script>
export default {
  data() {
    return {
      refresherTriggered: false,
      userInfo: {},

      userStats: [
        { name: '我的点赞', num: 0, url: '/pages/mine/myLike' },
        { name: '我的收藏', num: 0, url: '/pages/mine/myCollection' },
        { name: '我的收益', num: 0, url: '/pages/mine/myEarnings/list' },
      ],
      issueStats: [
        { name: '我的发布', icon: 'icon-xiangji', num: 1 },
        { name: '已卖出', icon: 'icon-xiangji', num: 0 },
        { name: '已下架', icon: 'icon-xiangji', num: 0 },
      ],
      buyStats: [
        { name: '待付款', icon: 'icon-xiangji', num: 0 },
        { name: '待发货', icon: 'icon-xiangji', num: 0 },
        { name: '待收货', icon: 'icon-xiangji', num: 0 },
      ],

      pageList: [
        { name: '我的地址', url: '/pages/mine/address/list' },
        { name: '防骗指南', url: '/pages/mine/parse?type=1' },
        { name: '联系客服', url: 'contact' },
        { name: '隐私政策', url: '/pages/mine/parse?type=2' },
        { name: '用户协议', url: '/pages/mine/parse?type=3' },
      ],
    }
  },

  computed:{
    isLogin() {
      return this.$store.state.user.token ? true : false;
    },
  	cuStyle(){
  		return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
  	},
  },

  watch: {

  },

  onShow() {
    this.$getUserInfo().then(data => {
      this.userInfo = data;
    })
  },

  methods: {
    // 触发下拉刷新
    refresherrefresh(e) {
    	this.refresherTriggered = true;

    },

    navToPage(url) {
      if(!this.isLogin) {
        url = '/pages/login/indexs';
      }
      this.$navToPage({
        url
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.all-container {
  padding: 0 30rpx 30rpx;
}

.card {
  @include zj-card;
}

.header-container {
  font-size: 32rpx;
  color: #ffffff;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  position: relative;
}

.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 750rpx;
  background: linear-gradient(to bottom, $theme-color, #f4f2f2);
}

.user-container {
  padding: 20rpx 20rpx 40rpx;
  .user {
    display: flex;
    align-items: center;
    image {
      width: 88rpx;
      height: 88rpx;
      border-radius: 50%;
    }
    .main {
      margin-left: 20rpx;
      .name {
        font-size: 32rpx;
      }
      .real {
        margin-top: 12rpx;
        background: $theme-color;
        border-radius: 4rpx;
        font-size: 20rpx;
        color: #ffffff;
        padding: 4rpx 8rpx;
      }
    }
  }
  .stats {
    display: flex;
    margin-top: 30rpx;
    .item {
      flex: 1;
      text-align: center;
      .num {
        font-size: 36rpx;
        font-weight: 500;
      }
      .text {
        margin-top: 8rpx;
        font-size: 24rpx;
      }
    }
  }
}

.stats-container {
  padding: 20rpx 20rpx 40rpx;
  margin-top: 30rpx;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      font-size: 32rpx;
      font-weight: 500;
    }
    .right {
      font-size: 24rpx;
      color: $sec-font;
      text {
        font-size: 28rpx;
      }
    }
  }
  .stats {
    display: flex;
    margin-top: 40rpx;
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .icon {
        position: relative;
        .iconfont {
          font-size: 48rpx;
        }
      }
      .text {
        margin-top: 8rpx;
        font-size: 24rpx;
      }
    }
  }
}

.menu-container {
  margin-top: 30rpx;
  .item {
  	display: flex;
  	align-items: center;
    justify-content: space-between;
  	height: 100rpx;
  	padding: 0 30rpx;
    border: none;
  	border-bottom: 1px solid #f5f5f5;

  	&:last-child {
  		border: none;
  	}

  	.name {
  		font-size: 32rpx;
  	}

  	.iconfont {
  		font-size: 28rpx;
  		color: $sec-font;
  	}
  }
}
</style>