mp-ui-user/src/pages/user/index.vue

<template>
  <view class="wrap">
    <!-- 非H5撑高元素 -->
    <!-- <view class="status_bar"></view> -->
    <!-- 头部背景 -->
    <view class="user"></view>
    <!-- 账户信息 -->
    <view class="account">
      <view class="flex account-ava">
        <image :src="avatar + '?imageView2/2/w/150'" mode="aspectFill" v-if="loginState" @click="toSetAvatar()"></image>
        <view class="no-ava" v-else @click="toLogin"></view>
        <view class="account-ava-name" v-if="loginState" @click="toSetAvatar()">{{ userInfo.nickName }}</view>
        <view class="account-ava-no" @click="toLogin" v-else>登录</view>
      </view>
      <view class="flex account-info" v-if="loginState">
        <navigator url="/packagePrize/bean/index" class="flex account-info-item" hover-class="navigator-hover">
          <view>{{ initData.coinNum }}</view>
          <view>我的盲豆</view>
        </navigator>
        <navigator url="/packagePrize/ticket/index" class="flex account-info-item" hover-class="navigator-hover">
          <view>{{ initData.ticketNum }}</view>
          <view>我的盲票</view>
        </navigator>
        <navigator url="/packagePrize/prize/index" class="flex account-info-item" hover-class="navigator-hover">
          <view>{{ initData.prizeNum }}</view>
          <view>我的仓库</view>
        </navigator>
      </view>
      <view class="flex account-info" v-else @click="notLogin">
        <view class="flex account-info-item">
          <view>-</view>
          <view>我的盲豆</view>
        </view>
        <view class="flex account-info-item">
          <view>-</view>
          <view>我的盲票</view>
        </view>
        <view class="flex account-info-item">
          <view>-</view>
          <view>我的仓库</view>
        </view>
      </view>
    </view>
    <!-- 操作项 -->
    <view class="mass">
      <view class="mass-title flex">
        <view>我的订单</view>
        <view @click="toOrder()">全部订单></view>
      </view>
      <view class="action">
        <view class="action-item flex" @click="toOrder('0')">
          <image class="image2" src="../../static/user/user_order1.png" mode="scaleToFill"></image>
          <view class="title">待付款</view>
        </view>
        <view class="action-item flex" @click="toOrder('1,4')">
          <image class="image2" src="../../static/user/user_order2.png" mode="scaleToFill"></image>
          <view class="title">待发货</view>
        </view>
        <view class="action-item flex" @click="toOrder('2')">
          <image class="image2" src="../../static/user/user_order3.png" mode="scaleToFill"></image>
          <view class="title">待收货</view>
        </view>
        <view class="action-item flex" @click="toOrder('3')">
          <image class="image2" src="../../static/user/user_order4.png" mode="scaleToFill"></image>
          <view class="title">已完成</view>
        </view>
      </view>
    </view>
    <view class="mass">
      <view class="mass-title flex">
        <view>常用功能</view>
        <view></view>
      </view>
      <view class="action">
		  <view class="action-item flex" @click="toMyLottery">
		    <image class="image1" src="../../static/user/user_exchange.png" mode="scaleToFill"></image>
		    <view class="title">我的拼团</view>
		  </view>
        <view class="action-item flex" @click="toExchange">
          <image class="image1" src="../../static/user/user_exchange.png" mode="scaleToFill"></image>
          <view class="title">兑换码</view>
        </view>
        <view class="action-item flex" @click="toAddress">
          <image class="image1" src="../../static/user/user_addr.png" mode="scaleToFill"></image>
          <view class="title">我的地址</view>
        </view>
		
        <view class="action-item flex" @click="toCreator">
          <image class="image1" src="../../static/user/user_slice.png" mode="scaleToFill"></image>
          <view class="title">申请创客</view>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <view class="action-item flex" @click="contactService">
          <image class="image1" src="../../static/user/user_kefu.png" mode="scaleToFill"></image>
          <view class="title">联系客服</view>
        </view>
        <!-- #endif -->
        <view class="action-item flex" @click="toAbout">
          <image class="image1" src="../../static/user/user_about.png" mode="scaleToFill"></image>
          <view class="title">关于我们</view>
        </view>
        <view class="action-item flex" @click="logout">
          <image class="image1" src="../../static/user/user_close.png" mode="scaleToFill"></image>
          <view class="title">退出登录</view>
        </view>
      </view>
    </view>
    <custom-tab-bar :activeValue="'user'" />
  </view>
</template>

<script>
import env from '../../config/env.js'
import $http from '@/utils/request.js'
import appId from '@/config/appId.js'
import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
import Auth from '../../components/auth/auth.vue'
export default {
  components: {
    CustomTabBar,
    Auth,
  },
  data() {
    return {
      loginState: false, // 判断是否登录
      authState: false,
      userInfo: {}, //
      avatar: '',
      certifyStatus: {},
      info: {},
      authShow: false,
      initData: {},
      userInfo: '',
    };
  },

  onShow() {
    this.loginState = uni.getStorageSync('token') ? true : false
    if (this.loginState) {
      this.getInit()
      this.getBaseInfo()
    }
  },

  methods: {
    // 我的数据
    getInit() {
      uni.showLoading({
        title: '加载中'
      });
      $http.post('/api/v1/mp/user/mine/init', {}).then(res => {
        uni.hideLoading();
        if (res.code == 0) {
          this.initData = res.data
        }
      }).catch(() => {
        uni.hideLoading();
      })
    },

    getBaseInfo() {
      $http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
        if (res.code == 0) {
          this.userInfo = res.data
          this.avatar = env.filePublic + res.data.avatar
        }
      }).catch(() => {

      })
    },
	//我的拼团
    toMyLottery(){
		uni.navigateTo({
		  url: "/packageOperate/lottery/my"
		})
	},
    // 跳转编辑头像与昵称页面
    toSetAvatar() {
      uni.navigateTo({
        url: "/packageOther/avatar/index"
      })
    },

    // 跳转登录
    toLogin() {
      uni.navigateTo({
        url: "/pages/login/index"
      })
    },

    // 我的订单
    toOrder(e) {
      if (!this.loginState) {
        uni.$u.toast('请登录');
        return
      }
      if (e) {
        uni.navigateTo({
          url: `/packageGoods/order/index?status=${e}`
        })
      } else {
        uni.navigateTo({
          url: `/packageGoods/order/index`
        })
      }
    },

    //兑换专区
    toExchange() {
      if (!this.loginState) {
        uni.$u.toast('请登录');
        return
      }
      uni.navigateTo({
        url: '/packageOperate/exchange/index'
      })
    },

    // 我的地址
    toAddress() {
      if (!this.loginState) {
        uni.$u.toast('请登录');
        return
      }
      uni.navigateTo({
        url: '/packageOperate/address/index'
      })
    },

    //申请创客
    toCreator() {
      if (!this.loginState) {
        uni.$u.toast('请登录');
        return
      }
      uni.navigateTo({
        url: '/packageOperate/creator/index'
      })
    },

    // 关于我们
    toAbout() {
      uni.navigateTo({
        url: '/packageOther/about/index'
      })
    },

    // 没有登录
    notLogin() {
      uni.$u.toast('请登录');
    },

    // 注销登录
    logout() {
      let _this = this
      if (!this.loginState) {
        uni.$u.toast('已退出登录');
        return
      }
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success(res) {
          if (res.confirm) {
            uni.clearStorage()
            _this.loginState = false
            _this.authState = false
          }
        }
      })
    },

    // 联系客服
    contactService() {
      // #ifdef MP-WEIXIN
      if (appId == 1) {
        // wx.openCustomerServiceChat({
        // 	extInfo: {
        // 		url: 'https://work.weixin.qq.com/kfid/kfc36c0d90028adbd24'
        // 	},
        // 	corpId: 'ww02da63d80c66284b',
        // })
        uni.navigateTo({
          url: `/pages/index/wxofficial`
        })
      } else {
        wx.openCustomerServiceChat({
          extInfo: {
            url: 'https://work.weixin.qq.com/kfid/kfcf9da505d4dc18c87'
          },
          corpId: 'ww8522e336cfe5045b',
        })
      }
      // #endif
    },
  },
  //分享好友
  onShareAppMessage(res) {
    return {
      title: '盲票，玩的就是有趣',
      path: '/pages/index/index'
    }
  },
  //分享朋友圈
  onShareTimeline() {
    return {
      title: '盲票，玩的就是有趣',
      // query: { userId: this.userInfo.userId,
      // 		type: 1, },
      query: `userId=${this.userInfo.userId ? this.userInfo.userId : null}&type=1`
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .u-cell__body {
  padding: 20rpx 0;
}

.status_bar {
  width: 100%;
  height: var(--status-bar-height);
}
</style>

<style lang="scss" scoped>
.wrap {
  padding-bottom: 200rpx;
}
.user {
  display: flex;
  align-items: center;
  height: 520rpx;
  background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/mine_bkg.png)
    center center no-repeat;
  background-size: 100vw 520rpx;
}

.account {
  margin-top: -350rpx;
  margin-bottom: 34rpx;

  // 头像
  &-ava {
    justify-content: flex-start;
    margin-top: 34rpx;
    padding: 0 30rpx;

    image {
      width: 106rpx;
      height: 106rpx;
      border-radius: 50%;
      border: 2px solid #ffffff;
      overflow: hidden;
    }

    .no-ava {
      width: 106rpx;
      height: 106rpx;
      border-radius: 50%;
      overflow: hidden;
      background: #fff;
    }

    &-name {
      margin-left: 20rpx;
      font-size: 32rpx;
      color: #333;
    }

    &-no {
      margin-left: 20rpx;
      color: #ffffff;
      font-size: 34rpx;
    }
  }

  // 信息
  &-info {
    height: 200rpx;
    justify-content: space-between;
    padding: 0 28rpx;
    border-radius: 18rpx;

    &-item {
      flex-direction: column;
      background: linear-gradient(
        90deg,
        #faf8fe 0%,
        rgba(255, 255, 255, 0) 100%
      );
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6rpx;
      width: 31%;
      font-size: 28rpx;
      height: 124rpx;

      view {
        line-height: 50rpx;
      }

      view:first-child {
        color: $uni-text-color;
        font-size: 36rpx;
      }
    }
  }
}

.mass {
  margin: 0 28rpx;
  padding: 40rpx 30rpx;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.12);
  border-radius: 10rpx;
  margin-bottom: 34rpx;

  &-title {
    justify-content: space-between;

    view:first-child {
      font-size: 32rpx;
      font-weight: 500;
      color: #000033;
      line-height: 19px;
    }
    view:last-child {
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }
  }
  .action {
    display: flex;
    flex-wrap: wrap;

    &-item {
      width: 25%;
      flex-direction: column;
      margin-top: 40rpx;

      .image1 {
        width: 56rpx;
        height: 56rpx;
      }

      .image2 {
        width: 68rpx;
        height: 68rpx;
      }

      .title {
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #666666;
        line-height: 32rpx;
      }
    }
  }
}
</style>