rebatedine-mini/src/pages/my.vue

<template>
  <view class="pensonal">
    <network-error />
    <view class="login u-flex"
          @click="login">
      <block v-if="!userInfo.nick_name">
        <image class="avatar"
               src="~@/static/icon/avatar.png"></image>
        <text class="name u-content-color line-50 ml-16 u-flex-1 bold">点击登录</text>
      </block>
      <block v-else>
        <image class="avatar"
               :src="userInfo.head_url"></image>
        <view class="name line-50 ml-16 u-flex-1 u-line-1 bold">{{userInfo.nick_name}}</view>
      </block>
      <block v-if="userInfo.token">
        <view class="info u-font-22"
              @click.stop="toUserDetail">个人信息<u-icon name="arrow-right"></u-icon>
        </view>
      </block>
    </view>
    <view class="commission"
          @click="jumpToCommissionApply">
      <view class="left">
        <image src="~@/static/icon/icon_commission.png"
               class="icon"></image>
        <text class="title">可返金额</text>
      </view>
      <view class="right">
        <text class="right-flag">￥</text>
        <text class="right-money">{{userInfo ? (userInfo.amount*1/100).toFixed(2) : '--'}}</text>
      </view>
    </view>
    <image class="banner"
           :src="bannerUrl"
           @click="jumpToCommission"></image>
    <view class="divider"></view>
    <view class="item-list">
      <view class="item u-flex"
            @click="toDetail(3)">
        <view class="icon-wh icon-order"></view>
        <view class="u-font-28 ml-28 u-flex-1 title">我的订单</view>
        <view class="jiantou-wh icon-jiantou"></view>
      </view>
      <view class="item u-flex u-border-bottom"
            @click="toDetail(2)">
        <view class="icon-wh icon-aboutour"></view>
        <view class="u-font-28 ml-28 u-flex-1 title">关于我们</view>
        <view class="jiantou-wh icon-jiantou "></view>
      </view>
      <view class="item u-flex u-border-bottom"
            @click="toDetail(4)">
        <view class="icon-wh icon-kf"></view>
        <view class="u-font-28 ml-28 u-flex-1 title">联系客服</view>
        <view class="jiantou-wh icon-jiantou "></view>
      </view>
      <view class="item u-flex u-border-bottom"
            @click="toDetail(1)">
        <view class="icon-wh icon-problem"></view>
        <view class="u-font-28 ml-28 u-flex-1 title">常见问题</view>
        <view class="jiantou-wh icon-jiantou "></view>
      </view>
    </view>
  </view>
</template>

<script>
import * as api from '../api/userApi'
export default {
  data () {
    return {}
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
    bannerUrl () {
      return this.$store.state.commission_banner
    }
  },
  onShow () {
    if (this.userInfo) {
      api.getUserInfoByToken().then(({ code, data }) => {
        if (code === 200) {
          this.$store.commit('updateUserInfo', data)
        }
      })
    }
  },
  methods: {
    toDetail (type) {
      let url
      if (type === 4) {
        url = '/pagesSub/my/kefu'
        uni.navigateTo({
          url: url
        })
      }
      if (type === 1 || type === 2) {
        url = type === 1 ? '/pagesSub/my/commonProblem' : '/pagesSub/my/about'
        uni.navigateTo({
          url: url
        })
      }
      if (type === 3) {
        uni.switchTab({
          url: 'order'
        })
      }
    },
    // 登录
    login () {
      if (this.userInfo.token) { return }
      uni.navigateTo({
        url: '/pagesSub/other/login'
      })
    },
    jumpToCommissionApply () {
      if (this.userInfo) {
        uni.navigateTo({ url: '/pagesSub/commission/commission' })
      } else {
        uni.navigateTo({
          url: '/pagesSub/other/login'
        })
      }
    },
    jumpToCommission () {
      if (this.userInfo) {
        uni.navigateTo({ url: '/pagesSub/commission/invite' })
      } else {
        uni.navigateTo({
          url: '/pagesSub/other/login'
        })
      }
    },
    // 个人信息
    toUserDetail () {
      uni.navigateTo({
        url: '/pagesSub/my/userDetail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.divider {
  height: 16rpx;
  background-color: #f4f5f9;
}

.commission {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  box-shadow: 0px 0px 20rpx 2rpx rgba(0, 0, 0, 0.06);
  border-radius: 40rpx;
  height: 100rpx;
  padding: 0 40rpx 0 40rpx;
  margin-bottom: 40rpx;
  .left {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .icon {
      width: 44rpx;
      height: 48rpx;
    }
    .title {
      margin-left: 14rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #111;
    }
  }
  .right {
    color: #ff6632;
    &-flag {
      bottom: 0;
      font-size: 24rpx;
      font-weight: 600;
    }
    &-money {
      bottom: 0;
      font-size: 36rpx;
      font-weight: 600;
    }
  }
}

.banner {
  height: 170rpx;
  width: 90%;
  margin-left: 5%;
  margin-bottom: 40rpx;
}
.pensonal {
  width: 750px;
  background: #fff;
}
.login {
  width: 100%;
  height: 156px;
  align-items: center;
  padding: 8px 0 40px 40px;
}
.info {
  width: 124px;
  height: 48px;
  line-height: 48px;
  background: $bg-personl-info-color;
  color: #ffffff;
  text-align: right;
  border-radius: 100px 0px 0px 100px;
}
.avatar {
  width: 108px;
  height: 108px;
  border-radius: 54px;
}
.name {
  width: 414px;
  height: 50px;
  font-size: 36px;
  margin-left: 16px;
}
.item-list {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0 32px 0 40px;
  .item {
    width: 100%;
    height: 96px;
    .title {
      color: $u-main-color;
    }
  }
}
// .border-bottom {
//   border-bottom: 1px solid $u-border-color;
// }
.icon-wh {
  width: 36px;
  height: 36px;
}
.jiantou-wh {
  width: 14px;
  height: 24px;
}
.ml-28 {
  margin-left: 28px;
}
</style>