liedou_uniapp/pages/my/my.vue

<template>
  <view class="page-wrap" :style="{ 'padding-top': `${statusBarHeight + 16}px;` }">
	  <!-- 剪切板弹框 -->
	  <clipboard v-if="is_clipbpard" @close="clipbpardClose"></clipboard>
    <!-- S 我的信息 -->
    <block>
      <!-- 我的信息 - 未登录 -->
      <view v-if="!isLogin" class="unlogin-wrap" @click="onClickToLogin">
        <image class="avatar" src="https://ld.726p.com/ldyx_static/imgs/avatar-unlogin.png" />
        <view class="login-btn">点击登录</view>
      </view>
      <!-- 我的信息 - 已登录 -->
      <view v-else class="login-wrap">
        <view class="lt-wrap">
          <image class="avatar" :src="userInfo.img" />
          <image v-if="userInfo.user_level == 1" class="tag" src="https://ld.726p.com/ldyx_static/imgs/tag-vip.png" />
          <image v-else-if="userInfo.user_level == 2" class="tag" src="https://ld.726p.com/ldyx_static/imgs/tag-svip.png" />
          <image v-else-if="userInfo.user_level == 3" class="tag" src="https://ld.726p.com/ldyx_static/imgs/tag-yys.png" />
        </view>
        <view class="rt-wrap">
			<view class="flex-center">
				<view class="phone">{{ userInfo.name }}</view>
				<view class="copy-yqm" v-if="userInfo.user_level != 1" @click="copyEvent">复制邀请码</view>
			</view>
          <view class="bm-wrap" style="margin-top:20rpx" v-if="userInfo.user_level != 1">
            <view @click="goFriendPage">好友 {{ userInfo.all_friends || '0' }}</view>
            <view class="money" @click="onClickWithdraw">余额 ￥{{ userInfo.account_balance }}</view>
            <view class="take-btn" @click="onClickWithdraw">提现</view>
          </view>
        </view>
      </view>
    </block>
    <!-- E 我的信息 -->

    <!-- S 我的收益 -->
    <view class="income-wrap" v-if="isLogin && userInfo.user_level != 1">
      <view class="tp-wrap">
        <view class="tp-lt-wrap">
          <text>我的收益</text>
          <text v-if="isLogin" class="money">￥{{ userInfo.all_settlement_income || '-' }}</text>
          <text v-else class="money">￥--</text>
        </view>
        <view v-if="isLogin" class="tp-rt-wrap" @click="goProfitPage()">
          <text>+{{ userInfo.this_day_forecast_income }}元</text>
          <image class="arrow-rt" src="https://ld.726p.com/ldyx_static/imgs/arrow-rt.png" />
        </view>
      </view>
      <view class="bm-wrap">每月25号可提现上月结算收益</view>
    </view>
    <!-- E 我的收益 -->

    <!-- S 会员升级提示 -->
    <view v-if="isLogin && userInfo.user_level == 1" class="level-tips-wrap">
      <view class="lt-wrap">
        <image class="icon" src="https://ld.726p.com/ldyx_static/imgs/icon-notice.png" />
        <text class="tips">升级到超级会员才有佣金收益，联系服务商升级</text>
      </view>
      <view class="rt-btn" @click="showService = true">升级</view>
    </view>
    <!-- E 会员升级提示 -->

    <!-- S 常用功能 -->
    <view class="menu-wrap">
      <view class="menu-header">常用功能</view>
      <view class="menu-content">
         <!-- for-5 -->
        <view class="menu-item" v-for="item in menu1" :key="item.id" @click="onClickMenu(item.id)">
        <button class="inviteFriend" v-if="item.id === 'yqhy'" open-type="share" data-source="inviteFriend">
          <image class="item-icon" :src="item.icon" />
          <text class="item-label">{{ item.label }}</text>
        </button>
        <block v-else>
          <image class="item-icon" :src="item.icon" />
          <text class="item-label">{{ item.label }}</text>
        </block>
        </view>
      </view>
    </view>
    <!-- E 常用功能 -->

    <!-- S 必备工具 -->
    <view class="menu-wrap">
      <view class="menu-header">必备工具</view>
      <view class="menu-content">
        <view class="menu-item" v-for="item in menu2" :key="item.id" @click="onClickMenu(item.id)">
          <image class="item-icon2" :src="item.icon" />
          <text class="item-label">{{ item.label }}</text>
        </view>
      </view>
    </view>
    <!-- E 必备工具 -->

    <!-- 版本号 -->
    <view class="version-wrap">
		<!-- #ifdef H5 -->
		<icp></icp>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		当前版本：V{{ version }}
		<!-- #endif -->
	</view>

	<!-- 客服弹框 -->
	<serviceProvider :show="showService" @close="showService=false" hint="升级超级会员，请联系服务商!"></serviceProvider>
  </view>
</template>

<script>
  const app = getApp()
  const $router = app.globalData.$router
  import packageConfig from '../../package.json'
	import serviceProvider from '@/components/serviceProvider.vue'
  export default {
	  components:{serviceProvider},
    data() {
      return {
        statusBarHeight: app.globalData.statusBarHeight,
        version: packageConfig.version,
        menu1: [
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu-wdsy.png',
            label: '我的收益',
            id: 'wdsy',
          },
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu-wddd.png',
            label: '我的订单',
            id: 'wddd',
          },
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu-wdhy.png',
            label: '我的好友',
            id: 'wdhy',
          },
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu-yqhy.png',
            label: '邀请好友',
            id: 'yqhy',
          },
          {
            icon: '/static/imgs/icon-fyb.png',
            label: '分佣榜',
            id: 'fyb',
          },
        ],
        menu2: [
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu2-scll.png',
            label: '收藏/浏览',
            id: 'scll',
          },
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu2-xszn.png',
            label: '新手指南',
            id: 'xszn',
          },
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu2-zskf.png',
            label: '专属客服',
            id: 'zskf',
          },
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu2-tqjs.png',
            label: '特权介绍',
            id: 'tqjs',
          },
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu2-yysht.png',
            label: '运营商后台',
            id: 'yysht',
          },
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu2-yhfk.png',
            label: '用户反馈',
            id: 'yhfk',
          },
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu2-cjwt.png',
            label: '常见问题',
            id: 'cjwt',
          },
          {
            icon: 'https://ld.726p.com/ldyx_static/imgs/menu2-sz.png',
            label: '设置',
            id: 'sz',
          },
        ],
        isLogin: false, // 用户是否已登录
        userInfo: {}, // 用户信息
		showService:false
      };
    },
    onShow() {
      this.handleSetUserInfo()
    },
	//下拉刷新
	async onPullDownRefresh(){
		let userInfo = uni.getStorageSync('userInfo') || ''
		if (userInfo) {
		  await app.handleGetUserInfo() // 获取用户信息
		  let userInfo = uni.getStorageSync('userInfo') || ''
		  this.userInfo = {...userInfo}
		  this.isLogin = true
		} else {
		  this.isLogin = false
		}
		uni.stopPullDownRefresh()
	},
    methods: {
		// 点击提现
		onClickWithdraw() {
			$router.navigateTo({
				url: `/pages/subPackages/my/withdrawDetail`
			})
		},
      // 监听点击"登录"
      onClickToLogin() {
        $router.navigateTo({
          url: `/pages/subPackages/login/loginPhone`
        })
      },
	  // 去我的收益页面
	  goProfitPage(){
		  $router.navigateTo({
		  	url: `/pages/subPackages/my/profit`
		  })
	  },
      // 监听点击菜单按钮
      onClickMenu(menuId) {
		if (menuId === 'yqhy') return; //邀请好友
        if (menuId === 'wdsy') { // 我的收益
			if (this.isLogin) {
				if (this.userInfo.user_level == 1) { // 普通会员无此权限
					app.handleShowModal('升级到超级会员才有此功能权限，联系服务商升级！').then(()=>{
						this.showService = true
					})
				} else {
					this.goProfitPage()
				}
			} else { // 未登录，去登录
				this.onClickToLogin()
			}
        } else if (menuId === 'wddd') { // 我的订单
			if (this.isLogin) {
				if (this.userInfo.user_level == 1) { // 普通会员无此权限
					app.handleShowModal('升级到超级会员才有此功能权限，联系服务商升级！').then(()=>{
						this.showService = true
					})
				} else {
					$router.navigateTo({
					  url: `/pages/subPackages/myOrderList/index`
					})
				}
			} else { // 未登录，去登录
				this.onClickToLogin()
			}
        } else if (menuId === 'wdhy') {
			if (this.isLogin) {
				if (this.userInfo.user_level == 1) { // 普通会员无此权限
					app.handleShowModal('升级到超级会员才有此功能权限，联系服务商升级！').then(()=>{
						this.showService = true
					})
				} else {
					this.goFriendPage()
				}
			} else { // 未登录，去登录
				this.onClickToLogin()
			}
		} else if (menuId === 'scll') { // 收藏浏览
		  $router.navigateTo({
		  	url: `/pages/subPackages/my/scll`
		  })
		} else if (menuId === 'zskf') { // 专属客服
			$router.navigateTo({
				url: `/pages/subPackages/my/zskf`
			})
		} else if (menuId === 'xszn') { // 新手指南
			$router.navigateTo({
				url: `/pages/subPackages/my/xszn`
			})
		} else if (menuId === 'tqjs') { //特权介绍
			$router.navigateTo({
				url: `/pages/subPackages/my/tqjs`
			})
		} else if (menuId === 'yysht') { // 运营商后台
			//判断是否登录，如果没有登录去登录页
			if (this.isLogin) {
				if (this.userInfo.user_level != 3) { //判断用户是不是运营商
					uni.showToast({ title: '您还不是运营商', icon: 'none' })
				} else { // 联系运营商，升级为超级会员
					this.showService = true
				}
			} else { // 未登录，去登录
				this.onClickToLogin()
			}

		} else if (menuId === 'yhfk') { // 用户反馈
			$router.navigateTo({
				url: `/pages/subPackages/my/feedback`
			})
		} else if (menuId === 'cjwt') { // 常见问题
			$router.navigateTo({
				url: `/pages/subPackages/my/commonProblem`
			})
		} else if (menuId === 'sz') { // 设置
			$router.navigateTo({
				url: `/pages/subPackages/my/setup`
			})
    } else if (menuId === 'fyb') { // 分佣榜
			$router.navigateTo({
				url: `/pages/subPackages/my/commissionRank`
			})
		} else {
        uni.showToast({ title: '敬请期待', icon: 'none' })
      }
      },
	  // 去我的好友页面
	  goFriendPage(){
		  $router.navigateTo({
		    url: `/pages/subPackages/my/friendList`
		  })
	  },
	  // 去webview页面
	  goWebViewPage(type){
		  // 去运营商后台页面
		  if(type == 'yys'){
			let url = encodeURIComponent(this.userInfo.operator_system)
			  $router.navigateTo({
				url: `/pages/webView/webView?url=${url}&title=运营商后台`
			  })
		  }
	  },
      // 监听点击版本号
      onClickVersion() {
        console.log('onClickVersion => ')
      },
      // 从本地存储中读取用户信息 => 回显到页面中
      async handleSetUserInfo() {
        let userInfo = uni.getStorageSync('userInfo') || ''
        if (userInfo) {
		  await app.handleGetUserInfo(true) // 获取用户信息
		  let userInfo = uni.getStorageSync('userInfo') || ''
          this.userInfo = {...userInfo}
          this.isLogin = true
        } else {
          this.isLogin = false
        }
      },
	  //复制邀请码
	  copyEvent(){
		  this.$copyEvent({text:this.userInfo.invite_code})
	  },
    },
  }
</script>

<style lang="scss" scoped>
.page-wrap {
  position: relative;
  min-height: 100vh;
  background-image: url("https://ld.726p.com/ldyx_static/imgs/my-bg.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 370rpx;
  background-color: #F5F5F5;
  .unlogin-wrap {
    display: flex;
    align-items: center;
    padding: 40rpx 0 0 40rpx;
    .avatar {
      width: 112rpx;
      height: 112rpx;
    }
    .login-btn {
      margin-left: 20rpx;
      font-size: 36rpx;
      color: #fff;
    }
  }
  .login-wrap {
    display: flex;
    align-items: center;
    padding: 40rpx 0 0 40rpx;
    .lt-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      .avatar {
        width: 112rpx;
        height: 112rpx;
        border-radius: 50%;
      }
      .tag {
        position: relative;
        top: -10rpx;
        width: 114rpx;
        height: 26rpx;
      }
    }
    .rt-wrap {
      margin-left: 20rpx;
      .phone {
        font-size: 34rpx;
        color: #fff;
      }
      .bm-wrap {
        margin-top: 36rpx;
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: #fff;
        .money {
          margin: 0 30rpx;
        }
        .take-btn {
          font-size: 26rpx;
          color: #F6DB4A;
        }
      }
    }
  }
  .income-wrap {
    margin: 50rpx auto 0;
    padding: 24rpx 18rpx 24rpx 10rpx;
    width: 95%;
    background-color: #fff;
    border-radius: 20rpx;
    .tp-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tp-lt-wrap {
        font-size: 30rpx;
        color: #555;
        .money {
          margin-left: 20rpx;
          color: #F52B18;
          font-size: 32rpx;
          font-weight: 500;
        }
      }
      .tp-rt-wrap {
        color: #F52B18;
        font-size: 30rpx;
        .arrow-rt {
          margin-left: 20rpx;
          width: 14rpx;
          height: 22rpx;
        }
      }
    }
    .bm-wrap {
      margin-top: 20rpx;
      font-size: 26rpx;
      color: #999;
    }
  }
  .level-tips-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20rpx auto 0;
    padding: 20rpx;
    width: 95%;
    background-color: #fff;
    border-radius: 20rpx;
    .lt-wrap {
      display: flex;
      align-items: center;
      .icon {
        width: 34rpx;
        height: 28rpx;
      }
      .tips {
        margin-left: 10rpx;
        font-size: 26rpx;
        color: #F10B00;
      }
    }
    .rt-btn {
      width: 80rpx;
      text-align: center;
      font-size: 27rpx;
      border-radius: 34rpx;
      border: 2rpx solid #F10B00;
      color: #F10B00;
    }
  }
  .menu-wrap {
    margin: 20rpx auto 0;
    width: 95%;
    background-color: #fff;
    border-radius: 20rpx;
    .menu-header {
      padding: 20rpx 0 6rpx 30rpx;
      font-size: 30rpx;
      color: #555;
      border-bottom: 2rpx solid #eee;
    }
    .menu-content {
      padding: 30rpx 0 10rpx;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30rpx;
        margin-right: 20rpx;
        width: calc((100% - 60rpx) / 4); // 30rpx 是前3个元素的右间距之和（20 * 3）
        &:nth-of-type(4n + 0) {
          margin-right: 0;
        }
        &.for-5 {
          width: calc((100% - 80rpx) / 5); // 40rpx 是前4个元素的右间距之和（20 * 4）
          &:nth-of-type(5n + 0) {
            margin-right: 0;
          }
        }
        .inviteFriend{
          display: flex;
          flex-direction: column;
          align-items: center;
          background-color: transparent;
          padding: 0;
          &::after{
            border: none;
          }
        }
        .item-icon {
          width: 46rpx;
          height: 48rpx;
        }
        .item-icon2 {
          width: 38rpx;
          height: 46rpx;
        }
        .item-label {
          margin-top: 10rpx;
          font-size: 26rpx;
          color: #666;
          line-height: 40rpx;
        }
      }
    }
  }
  .version-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 80rpx;
    text-align: center;
    font-size: 28rpx;
    color: #aaa;
  }
}
.flex-center{
	display: flex;
	align-items: center;
}
.copy-yqm{
	font-size: 20rpx;
	line-height: 30rpx;
	border: 2rpx solid #FFFFFF;
	padding: 0 20rpx;
	border-radius: 30rpx;
	color: #FFFFFF;
	margin-left: 40rpx;
}
</style>