Client-Teapay/src/pages/my/index.vue

<template>
  <view class="container">
    <view class="content" :style="isShiMing ? '' : 'padding-top:30rpx;'">
      <!-- 用户信息 -->
      <view class="uerInfo mar_t16 flex_r">
        <view class="user_img">
          <image @click="upheadimg" class="image" :src="userinfo.head_pic" mode=""></image>
          <view class="coupon_info flex_r flex_ac" @tap="goToAutonym" v-if="isShiMing">
            完成实名认证，享受更多权益
            <image src="/static/my/f_close.png" mode="widthFix" class="close_icon" @tap.stop="closeAuto">
            </image>
          </view>
        </view>
        <block v-if="userinfo.nickname">
          <view class="user_con flex_c">
            <view class="user_name flex_r flex_ae ellipsis">
              <view @click="goto('/pages/my/userinfo')">{{
                userinfo.nickname
                }}</view>
              <text v-if="isAuthentication">({{ userinfo.is_authentication == 0 ? "未实名" : "已实名" }})</text>
            </view>
            <view class="flex_r flex_ac">
              <view class="user_level clearfix">
                <img class="level_img" src="/static/my/huangguan.png">
                <span class="level_text">{{ userinfo.level_name }}</span>
              </view>
            </view>
            <view class="user_account flex_r flex_ac mar_t10">
              <view class="account">账号：{{ userinfo.mobile }}</view>
              <view class="copy_account flex_r flex_ac flex_jc" @tap="copyText(userinfo.mobile)">复制</view>
            </view>
          </view>
          <view class="user_option flex_r flex_ac flex_je">
            <image class="code_img" src="/static/my/f_img_code.png" @tap="getImgPage" mode=""></image>
            <!-- <image class="code_img" src="/static/my/setting.png" @tap="getToSetting"></image> -->
          </view>
        </block>
        <block v-else>
          <view class="user_con flex_c flex_jb" @click="login">
            <view class="user_name flex_r flex_ae ellipsis">点此处登录</view>
          </view>
        </block>
      </view>
      <!-- 用户信息-end -->

      <!-- 节点 -->
      <view class="regional" v-if="userinfo.regionalNode">
        <img src="@/static/my/regional.png" alt="" srcset="" class="ico">
        <span class="txtinfo">区域节点：{{ userinfo.regionalNode.regional_name }}</span>
      </view>

      <!-- 账户信息 -->
      <view class="acc_info">
        <view class="acc_head flex_r flex_jb">
          <view class="acc_price">
            <view class="price_txt">账号余额(元)</view>
            <view class="price_num dinB">{{ userinfo.user_money }}</view>
          </view>
          <view class="C flex_r">
            <navigator class="recharge flex_r flex_ac flex_jc" url="/pages/top-up/index" hover-class="none">充值</navigator>
            <navigator class="recharge flex_r flex_ac flex_jc" url="/pages/account/conversion" hover-class="none">转化</navigator>
            <view class="withdraw flex_r flex_ac flex_jc" @tap="getToCash">提现</view>
          </view>
        </view>
        <view class="info_con flex_r flex_jb">
          <view class="info_list flex_c flex_jb">
            <view class="list_name">昨日收益(元)</view>
            <view class="list_text dinB">{{ userinfo.yesterdayProfit || 0 }}</view>
          </view>
          <view class="info_list flex_c flex_jb" @tap="getToAccMoney">
            <view class="list_name">茶宝</view>
            <view class="list_text dinB">{{ userinfo.cha_bao || 0 }}</view>
          </view>
          <view class="info_list flex_c flex_jb" @tap="getToTeaList">
            <view class="list_name">社区(人)</view>
            <view class="list_text dinB">{{ allChaYou || 0 }}</view>
          </view>
        </view>
        <view class="acc_hint mar_t50" @tap="SetHint">如何快速晋升身份权益？看这里>></view>
      </view>
      <!-- 账户信息-end -->
    </view>
    <!-- 功能列表 -->
    <view class="fun_container">
      <view class="fun mar_t30">
        <view class="fun_title">我的账户</view>
        <view class="fun_con mar_t50 flex_r flex_ac">
          <!-- <navigator class="fun_list flex_c flex_ac" url="/pages/top-up/index" hover-class="none">
            <image class="fun_img" src="/static/my/recharge.png" mode=""></image>
            <view class="fun_text">充值</view>
          </navigator> -->
          <navigator class="fun_list flex_c flex_ac" url="/pages/account/wealth" hover-class="none">
            <image class="fun_img" src="/static/my/wealth.png" mode=""></image>
            <view class="fun_text">财富</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" url="/pages/account/consignment" hover-class="none">
            <image class="fun_img" src="/static/my/consign.png" mode=""></image>
            <view class="fun_text">寄卖</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" url="/pages/account/giveAsPresent" hover-class="none">
            <image class="fun_img" src="/static/my/give.png" mode=""></image>
            <view class="fun_text">赠送</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" @click="getImgPage" hover-class="none">
            <image class="fun_img" src="/static/my/sharePoster.png" mode=""></image>
            <view class="fun_text">分享海报</view>
          </navigator>
        </view>
      </view>
      <view class="fun mar_t30">
        <view class="fun_title">账户明细</view>
        <view class="fun_con mar_t50 flex_r flex_ac">
          <navigator class="fun_list flex_c flex_ac" url="/pages/accountDetails/running" hover-class="none">
            <image class="fun_img" src="/static/my/fund.png" mode=""></image>
            <view class="fun_text">流水明细</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" url="/pages/accountDetails/withdraw" hover-class="none">
            <image class="fun_img" src="/static/my/withdraw.png" mode=""></image>
            <view class="fun_text">提现明细</view>
          </navigator>
        </view>
      </view>
      <view class="fun mar_t30">
        <view class="fun_title flex_r flex_ac flex_jb">我的订单
          <navigator class="more flexr flex_ac" url="/pages/szw-order-list/index?status=0" hover-class="none">
            全部订单<image class="more_img" src="/static/my/more.png" mode=""></image>
          </navigator>
        </view>
        <view class="fun_con mar_t50 flex_r flex_ac flex_jb">
          <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index?status=1" hover-class="none">
            <image class="fun_img" src="/static/my/payment.png" mode=""></image>
            <view class="fun_text">待付款</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index?status=5" hover-class="none">
            <image class="fun_img" src="/static/my/pickInStore.png" mode=""></image>
            <view class="fun_text">待自提</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index?status=2" hover-class="none">
            <image class="fun_img" src="/static/my/deliver.png" mode=""></image>
            <view class="fun_text">待发货</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index?status=3" hover-class="none">
            <image class="fun_img" src="/static/my/take.png" mode=""></image>
            <view class="fun_text">待收货</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index?status=4" hover-class="none">
            <image class="fun_img" src="/static/my/refund.png" mode=""></image>
            <view class="fun_text">已完成</view>
          </navigator>
        </view>
      </view>
      <view class="fun mar_t30">
        <view class="fun_title">本地生活</view>
        <view class="fun_con mar_t50 flex_r flex_ac">
          <navigator v-if="local_uinfo.level_id>1" class="fun_list flex_c flex_ac" url="/pagesB/orderingfood/group" hover-class="none">
            <image class="fun_img" src="/static/my/l_group.png" mode=""></image>
            <view class="fun_text">我的团队</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" url="/pagesB/orderingfood/orderlist" hover-class="none">
            <image class="fun_img" src="/static/my/order_history.png" mode=""></image>
            <view class="fun_text">历史订单</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" @click="activation" hover-class="none">
            <image class="fun_img" src="/static/my/upgrade.png" mode=""></image>
            <view class="fun_text">激活升级</view>
          </navigator>
          <!-- <navigator class="fun_list flex_c flex_ac" url="/pagesB/orderingfood/incomeExpenses" hover-class="none">
            <image class="fun_img" src="/static/my/detail.png" mode=""></image>
            <view class="fun_text">收支明细</view>
          </navigator> -->
          <!-- <navigator class="fun_list flex_c flex_ac" @click="getToCash('local')" hover-class="none">
            <image class="fun_img" src="/static/my/deposit.png" mode=""></image>
            <view class="fun_text">提现</view>
          </navigator> -->
        </view>
      </view>
      <view class="fun mar_t30">
        <view class="fun_title">其他</view>
        <view class="fun_con mar_t50 flex_r flex_ac">
          <navigator class="fun_list flex_c flex_ac" url="/pagesB/address/list" hover-class="none">
            <image class="fun_img" src="/static/my/dizhi.png" mode=""></image>
            <view class="fun_text">地址管理</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" url="/pagesB/my/assistant" hover-class="none">
            <image class="fun_img" src="/static/my/assistant.png" mode=""></image>
            <view class="fun_text">开票助手</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" url="/pagesB/invoice/invoiceList" hover-class="none">
            <image class="fun_img" src="/static/my/assistantHistory.png" mode=""></image>
            <view class="fun_text">开票历史</view>
          </navigator>
        </view>
      </view>
      <view class="fun mar_t30">
        <view class="fun_title">我的服务</view>
        <view class="fun_con mar_t50 flex_r flex_ac">
          <navigator class="fun_list flex_c flex_ac" @click="goto('/pages/agreement/index',{tit:'关于我们',type:7})" hover-class="none">
            <image class="fun_img" src="/static/my/about.png" mode=""></image>
            <view class="fun_text">关于我们</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" @click="goto('/pages/agreement/index',{tit:'用户须知',type:8})" hover-class="none">
            <image class="fun_img" src="/static/my/feedback.png" mode=""></image>
            <view class="fun_text">用户须知</view>
          </navigator>
          <navigator class="fun_list flex_c flex_ac" @click="goto('/pages/agreement/index',{tit:'新手教程',type:1})" hover-class="none">
            <image class="fun_img" src="/static/my/green.png" mode=""></image>
            <view class="fun_text">新手教程</view>
          </navigator>
          <view class="fun_list flex_c flex_ac">
            <button open-type="contact" style="background: #fff; border: 0; line-height: 1; padding: 0">
              <image class="fun_img" src="/static/my/service.png" mode=""></image>
              <view class="fun_text">在线客服</view>
            </button>
          </view>
        </view>
      </view>
    </view>
    <view class="fz_w_text">让数字经济赋能美好生活！</view>
    
    <!-- 授权 -->
    <authorize-module v-if="showAuth" :shopInfo="shopInfo" @authGetTelSuccess="onauthGetTelSuccess" />
    <!-- 激活升级 -->
    <activation ref="activation" tit="激活" />
  </view>
</template>
<script>
let app = getApp();
var appEv = app.$vm.$options;
import uniCopy from "@/utils/copy";
import authorizeModule from "@/components/authorize-module/index";
import activation from "@/components/activation/activation.vue"
import { post } from "@/request/api.js";
export default {
  components: {
    authorizeModule,
    activation
  },
  data() {
    return {
      showAuth: false,
      shopInfo: {}, // 商铺信息
      userInfoAccount: {}, // 账户数据
      customerServiceWeiXin: "", // 客服微信
      isShiMing: true, //未实名提示弹窗
      agentName: "", // 缘起
      user_id: undefined,
      userinfo: {}, // 获取用户信息

      unid: "",

      // isGetUserInfo:false,
      invited: "",

      allChaYou: "",

      isAuthentication: uni.getStorageSync("isAuthentication"), //是否开启实名模块
      local_uinfo: {}, //本地生活信息
    };
  },
  onLoad(options) {
    //推荐人ID
    if (options.invite) {
      app.globalData.agentId = options.invite;
      this.invited = options.invite;
    }
    this.closeAuto(); //关闭实名功能
    this.getchayou(); //获取茶友
    this.getLU(); //本地生活信息
  },
  onShow() {
    let token = uni.getStorageSync("token");
    this.userinfo = uni.getStorageSync("userinfo");

    if (!token) this.login()
    else this.getuserInfo()
  },
  methods: {
    login() {
      let that = this;
      // #ifdef  MP-WEIXIN
      wx.login({
        success(res) {
          if (res.code) {
            post("v1/appletLogin", {
              code: res.code,
              invite: that.invited,
            }).then((res) => {
              if (res.code === 0) {
                if (res.data.token) {
                  uni.setStorageSync("token", res.data.token);
                  that.getuserInfo();
                } else {
                  that.unid = res.data.unid;
                  that.shopInfo = app.globalData.shopInfo;
                  that.showAuth = true; //调取授权弹窗
                }
              }
            });
          }
        },
      });
      // #endif

      // #ifdef  H5 || APP-PLUS
      this.goto("/pages/my/login");
      // #endif
    },
    // 获取手机号
    onauthGetTelSuccess(da) {
      this.showAuth = false;
      post("v1/getMobile", {
        unid: this.unid,
        ...da.detail,
      }).then((res) => {
        if (res.code === 0) {
          uni.setStorageSync("token", res.data.token);
          this.getuserInfo();
        }
      });
    },
    // 获取userinfo
    async getuserInfo() {
      let res = await uni.userfun();
      if(res.user_id){
        if (this.isAuthentication) this.isShiMing = res.is_authentication == 0;
        else this.isShiMing = false;
        this.userinfo = res;
      }else this.login();
    },
    //授权并登录
    onAuthSuccess() {
      var that = this;
      uni.showLoading({
        mask: true,
      });
      appEv.setData((res) => {
        uni.hideLoading();
        that.showAuth = false;
      });
    },
    // 跳转到实名页面
    goToAutonym() {
      this.goto("/pages/autonym-submit/index")
    },
    // 关闭实名信息 提示
    closeAuto() {
      this.isShiMing = false;
    },
    // 未开放提示信息
    SetHint() {
      this.goto('/pages/agreement/index',{tit:'用户身份及权益',type:24})
    },
    // 跳转到分享页面
    getImgPage() {
      if (this.isAuthentication) {
        if (this.userinfo.is_authentication == 1) {
          this.goto("/pages/invi-img/index")
        } else {
          appEv.errTips("您还未实名");
          this.goToAutonym();
        }
      } else {
        this.goto("/pages/invi-img/index")
      }
    },
    // 跳转到提现页面
    getToCash(type) {
      if (this.isAuthentication) {
        if (this.userinfo.is_authentication == 1) {
          this.goto("/pages/cash/index",{type})
        } else {
          appEv.errTips("您还未实名");
          this.goToAutonym();
        }
      } else {
        this.goto("/pages/cash/index",{type})
      }
    },
    // 复制账号
    copyText(e) {
      uniCopy({
        content: e,
        success: (res) => {},
        error: (e) => {},
      });
    },
    // 跳转到用户设置页面
    getToSetting: function() {
      uni.navigateTo({
        url: "/pages/setting/index",
      });
    },
    // 跳转到我的茶友页面
    getToTeaList: function() {
      uni.navigateTo({
        url: "/pages/my-tea-list/index",
      });
    },
    // 跳转到拼豆页面
    getToBean: function() {
      uni.navigateTo({
        url: "/pages/bean-info/index",
      });
    },
    // 跳转到拼团金页面
    getToAccMoney: function() {
      uni.navigateTo({
        url: "/pages/my-acc-money/my-acc-money",
      });
    },
    // 点击头像
    upheadimg() {
      let that = this;
      uni.previewImage({
        urls: [that.userinfo.head_pic],
        current: 0,
      });
    },
    // 获取茶友
    getchayou() {
      post("v1/my/chayou").then((res) => {
        if (res.code === 0) {
          this.allChaYou = res.data.data.below + res.data.data.lower_level;
        }
      });
    },
    async getLU() {
      this.local_uinfo = await uni.Luserfun()
    },
    activation(){
        this.$refs.activation.open()
    }
  },
};
</script>
<style lang="scss">
// 页面配置
page {
  background: #f5f5f5;
}

.container {
  // padding: 0 0 30rpx;
  box-sizing: border-box;
}

.content {
  padding: 66rpx 30rpx 0;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background-image: linear-gradient(to bottom, #fff, #f5f5f5);
}

// 页面配置-end

// 用户信息
.close_icon {
  margin-left: 24rpx;
  width: 26rpx;
}

.coupon_info {
  position: absolute;
  top: -70rpx;
  left: 0;
  border-radius: 12rpx;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
  padding: 10rpx 24rpx;
  transition: all 0.6s ease;
  width: 420rpx;
}

.uerInfo {
  width: 100%;
}

.code_img:nth-child(1) {
  margin-left: 20rpx;
}

.code_img {
  width: 42rpx;
  height: 44rpx;
  margin-left: 36rpx;
}

.account {
  font-size: 26rpx;
  color: #121212;
  margin-right: 20rpx;
}

.user_img .image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.user_con {
  width: calc(100% - 136rpx - 140rpx - 20rpx);
  overflow: hidden;
}

.user_img {
  width: 136rpx;
  height: 136rpx;
  margin-right: 20rpx;
  border-radius: 50%;
  position: relative;
}

.user_name text {
  font-size: 26rpx;
  font-family: "SourceHanSansSC-Medium";
  color: #121212;
  font-weight: 500;
}

.copy_account {
  width: 60rpx;
  height: 32rpx;
  background: #f1d3a8;
  font-size: 22rpx;
  color: #6b2909;
  border-radius: 6rpx;
}

.user_name {
  width: 100%;
  overflow: hidden;
  font-size: 44rpx;
  color: #121212;
  font-family: "SourceHanSansSC-Medium";
  font-weight: 500;
  line-height: 1;
}

.user_option {
  width: 140rpx;
  text-align: right;
}

// 用户信息-end

// 账户信息
.acc_head {
  width: 100%;
  overflow: hidden;
}

.acc_price .price_txt {
  font-size: 24rpx;
  color: #fff;
}

.acc_price .price_num {
  font-size: 50rpx;
  color: #fff;
  // font-weight: bold;
  // font-family: "SourceHanSansSC-Bold";
}

.info_list:nth-child(1) {
  padding-left: 0;
}

.list_name {
  font-size: 24rpx;
  color: #ffffff;
}

.list_text {
  font-size: 36rpx;
  color: #fff;
  // font-family: "SourceHanSansSC-Bold";
  // font-weight: bold;
}

.info_list:nth-last-child(1) {
  border-right: 0;
}

.info_con {
  width: 100%;
  overflow: hidden;
  margin-top: 40rpx;
}

.acc_hint {
  width: 100%;
  overflow: hidden;
  font-size: 20rpx;
  color: #fff;
}

.info_list {
  width: calc(100% / 3);
  height: 78rpx;
  align-items: inherit;
  box-sizing: border-box;
  padding-left: 30rpx;
}

.withdraw {
  width: 100rpx;
  height: 54rpx;
  background: #fff;
  border-radius: 27rpx;
  font-size: 26rpx;
  color: #11a375;
  font-family: "SourceHanSansSC-Medium";
}

.recharge {
  width: 100rpx;
  height: 54rpx;
  box-sizing: border-box;
  border: 3rpx solid #fff;
  color: #fff;
  font-family: "SourceHanSansSC-Medium";
  border-radius: 27rpx;
  font-size: 26rpx;
  margin-right: 16rpx;
}

.regional{
  padding: 0 10rpx;
  margin-top: 16rpx;
  .ico{
    width: 32rpx;
    height: 32rpx;
    margin-right: 12rpx;
  }
  .txtinfo{
    color: #000;
    font-size: 25rpx;
  }
  .ico,.txtinfo{
    vertical-align: middle;
  }
}

.acc_info {
  width: 100%;
  overflow: hidden;
  background: url("~@/static/my/myBack.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 16rpx;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 38rpx;
}

// 账户信息-end

// 功能列表
.more {
  font-size: 24rpx;
  color: #999999;
}

.fun_con {
  width: 100%;
  overflow: hidden;
}

.fun_text {
  font-size: 24rpx;
  color: #333333;
}

.fun_list{
  width: 25%;
}

.fun_list button::after {
  border: 0 !important;
}

.more_img {
  width: 12rpx;
  height: 20rpx;
  margin-left: 11rpx;
}

.fun_img {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 20rpx;
}

.fun_container {
  width: 100%;
  overflow: hidden;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.fun_title {
  padding: 0 30rpx;
  font-size: 32rpx;
  color: #232323;
  font-family: "SourceHanSansSC-Bold";
  font-weight: bold;
}

.fun {
  width: 100%;
  overflow: hidden;
  border-radius: 16rpx;
  background: #fff;
  padding: 30rpx 0;
  box-sizing: border-box;
}

.user_level {
  margin-top: 10rpx;
  background: linear-gradient(to right, #ffeabd, #ffc479);
  padding: 6rpx 20rpx;
  border-radius: 6rpx;
  overflow: hidden;
  
  .level_img {
    width: 38rpx;
    height: 30rpx;
    z-index: 30;
  }

  .level_text {
    color: #6b2909;
    font-size: 28rpx;
    margin-left: 12rpx;
    display: inline-block;
    height: 30rpx;
    line-height: 30rpx;
  }

  .level_img,
  .level_text {
    float: left;
  }
}

// 功能列表-end
</style>