zhangsiye/mini/pages/my/index.vue

<template>
  <view class="container">
    <!--用户信息-->
    <view class="header main-between cross-center">
      <view class="user-box main-left cross-center">
        <view class="head-img">
          <!--   #ifdef  MP-KUAISHOU | MP-TOUTIAO   -->
          <image :src="userInfo.avatar?userInfo.avatar:'/static/image/default-head-img.png'" />
          <!--   #endif  -->
          <!--   #ifdef  MP-WEIXIN   -->
          <button open-type="chooseAvatar" class="avatar cross-center" @chooseavatar="handleGetUserInfo">
            <image :src="userInfo.avatar?userInfo.avatar:'/static/image/default-head-img.png'" />
          </button>
          <!--   #endif  -->
        </view>
        <view class="base">
          <!--   #ifdef  MP-KUAISHOU | MP-TOUTIAO   -->
          <view v-if="!userInfo.nickname" class="nickname cross-center" @click="handleGetUserInfo">未授权登陆</view>
          <!--   #endif  -->
          <!--   #ifdef  MP-WEIXIN   -->
          <input
            v-if="!userInfo.nickname"
            class="nickname cross-center"
            type="nickname"
            value="填写昵称"
            @change="handleNickname"
          >
          <!--   #endif  -->
          <view v-if="userInfo.nickname" class="nickname cross-center">{{ userInfo.nickname }}</view>
          <view v-if="userInfo.info.is_vip" class="vip cross-center">
            VIP到期时间: {{ userInfo.info.end_at }}
          </view>
        </view>
      </view>
      <!--   #ifdef  MP-KUAISHOU | MP-TOUTIAO   -->
      <button open-type="getUserInfo" class="refresh" @click="handleGetUserInfo">刷新</button>
      <!--   #endif  -->
      <!--   #ifdef  MP-WEIXIN   -->
      <!--      <button class="refresh" @click="handleNickname">保存</button>-->
      <!--   #endif  -->
    </view>
    <!--充值-->
    <view class="recharge main-between cross-center">
      <view class="static-box main-left cross-center">
        <view class="icon">
          <image src="/static/image/gold-bag.png" mode="aspectFill" />
        </view>
        <view class="overage">{{ userInfo.info.integral }}金币</view>
      </view>
      <view class="recharge-btn" @click="recharge.show = true">充值</view>
    </view>
    <!--历史-->
    <view class="history" @click="$u.route('/pages/my/history')">
      <view class="header main-between cross-center">
        <text>历史观看记录</text>
        <u-icon name="arrow-right" :color="$colors.infoColor" bold />
      </view>
      <view class="content dir-left-nowrap cross-center">
        <view
          v-for="(item,index) in history"
          :key="index"
          class="episode"
        >
          <view class="cover-image">
            <image :src="item.detail.episode.cover_img" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>
    <!--菜单-->
    <view class="menu-group">
      <button
        v-for="(menu,index) in menus"
        :key="index"
        class="menu-item main-between cross-center"
        :open-type="menu.type ? menu.type : ''"
        @click="handleMenu(menu)"
      >
        <view class="left-box dir-left-nowrap cross-center">
          <view class="icon">
            <image :src="menu.icon" />
          </view>
          <text>{{ menu.name }}</text>
        </view>
        <u-icon name="arrow-right" :color="$colors.infoColor" bold />
      </button>
    </view>
    <!--tab bar-->
    <tab-bar />
    <!--充值-->
    <recharge :show.sync="recharge.show" />
  </view>
</template>

<script>
import TabBar from '../../components/TabBar/index'
import { mapState } from 'vuex'
import Recharge from '../../components/Recharge/index'
export default {
  name: 'My',
  components: { Recharge, TabBar },
  data() {
    return {
      history: [],
      menus: [
        { icon: '/static/image/my-page/order.png', name: '消费记录', href: '/pages/my/consume' },
        { icon: '/static/image/my-page/recharge.png', name: '充值记录', href: '/pages/my/recharge' },
        { icon: '/static/image/my-page/share.png', name: '分享好友', type: 'share' },
        { icon: '/static/image/my-page/contact.png', name: '联系客服', type: 'contact' },
        { icon: '/static/image/my-page/protocol.png', name: '用户协议', href: '/pages/my/protocol' }
      ],
      recharge: {
        show: false
      },
      code: null
    }
  },
  computed: {
    ...mapState({
      userInfo: seate => seate.user.info
    })
  },
  methods: {
    getHistory() {
      this.$api.user.episode.record({ limit: 3 }).then(res => {
        this.history = res.data
      })
    },
    handleMenu(menu) {
      if (menu.href) {
        this.$u.route(menu.href)
      }
    },
    handleGetUserInfo(res) {
      // #ifdef  MP-KUAISHOU
      this.$loading('数据刷新中...')
      uni.authorize({
        scope: 'scope.userInfo',
        success: () => {
          uni.getUserInfo({
            withCredentials: true,
            success: res => {
              this.getCode().then(code => {
                const params = {
                  encryptedData: res.encryptedData,
                  iv: res.iv,
                  signature: res.signature,
                  code: code
                }
                this.$api.user.update(params).then(res => {
                  this.code = null
                  this.$hideLoading()
                  this.$store.dispatch('user/info', res.data)
                }).catch(() => {
                  this.$hideLoading()
                })
              })
            }
          })
        }
      })
      // #endif
      // #ifdef  MP-TOUTIAO
      uni.getUserProfile({
        success: res => {
          this.getCode().then(code => {
            const params = {
              encryptedData: res.encryptedData,
              iv: res.iv,
              signature: res.signature,
              code: code
            }
            this.$loading('数据刷新中...')
            this.$api.user.update(params).then(res => {
              this.code = null
              this.$hideLoading()
              this.$store.dispatch('user/info', res.data)
            }).catch(() => {
              this.$hideLoading()
            })
          })
        }
      })
      // #endif
      // #ifdef  MP-WEIXIN
      this.$api.user.update({ avatar: res.detail.avatarUrl }).then(res => {
        this.code = null
        this.$hideLoading()
        this.$store.dispatch('user/info', res.data)
      }).catch(() => {
        this.$hideLoading()
      })
      // #endif
    },
    handleNickname(res) {
      if (res.detail.value === '填写昵称') {
        return
      }
      this.$api.user.update({ nickname: res.detail.value }).then(res => {
        this.code = null
        this.$hideLoading()
        this.$store.dispatch('user/info', res.data)
      }).catch(() => {
        this.$hideLoading()
      })
    },
    getCode() {
      return new Promise(resolve => {
        if (this.code) {
          return resolve(this.code)
        }
        uni.login({
          provider: uni.$u.platform,
          success: loginRes => {
            this.code = loginRes.code
            // 四分钟失效
            setTimeout(() => {
              this.code = null
            }, 1000 * 4 * 60)
            resolve(this.code)
          }
        })
      })
    }
  },
  onShow() {
    this.getHistory()
  }
}
</script>

<style lang="scss" scoped>
  .container {
    padding: 20px 20rpx 0;
    font-size: 30rpx;
    >.header{
      .user-box{
        .head-img{
          .avatar{
            background: transparent;
          }
          image{
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
          }
        }
        .base{
          margin-left: 30rpx;
          .nickname{
            color: $primary-color;
            font-size: 32rpx;
          }
          .vip{
            font-size: 22rpx;
            color: #fff;
            margin-top: 6rpx;
          }
        }
      }
      .refresh{
        background: $primary-color;
        color: #fff;
        border-radius: 30rpx;
        padding: 10rpx 0;
        width: 140rpx;
        text-align: center;
        letter-spacing: .1rem;
        line-height: initial;
      }
    }
    .recharge{
      background: url("/static/image/my-recharge-bg.png") no-repeat center;
      background-size: 100%;
      height: 200rpx;
      margin-top: 20rpx;
      margin-bottom: 10rpx;
      .static-box{
        margin-left: 30rpx;
        .icon{
          border-radius: 20rpx;
          image{
            width: 100rpx;
            height: 100rpx;
          }
        }
        .overage{
          font-weight: 800;
          margin-left: 20rpx;
          font-size: 32rpx;
        }
      }
      .recharge-btn{
        border: 1rpx solid #fff;
        padding: 10rpx 0 ;
        text-align: center;
        width: 140rpx;
        margin-right: 20rpx;
        border-radius: 30rpx;
        color: #ffffff;
      }
    }
    .history{
      background: #1B203C;
      height: 300rpx;
      border-radius: 15rpx;
      padding: 20rpx 30rpx;
      margin-bottom: 40rpx;
      >.header{
        text{
          color: $info-color;
          font-weight: 600;
        }
      }
      .content{
        margin-top: 20rpx;
        .episode{
          width: calc(100%/4);
          margin-left: 20rpx;
          &:first-child{
            margin-left: 0;
          }
          .cover-image{
            image{
              width: 100%;
              height: 200rpx;
              border-radius: 16rpx;
            }
          }
        }
      }
    }
    .menu-group{
      .menu-item{
        padding: 20rpx 0;
        background: transparent;
        border: none;
        text-align: unset;
        width: 100%;
        line-height: initial;
        font-size: initial;
        justify-content: space-between;
        &:after{
          content: unset;
        }
        .left-box{
          flex: 1;
          .icon{
            transform: translateY(4rpx);
            image{
              width: 55rpx;
              height: 55rpx;
            }
          }
          text{
            color: #fff;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
</style>