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
            class="image"
            :src="
              userInfo && userInfo.headimgurl != ''
                ? userInfo.headimgurl
                : 'https://tea.soowin.com/mnt/image/m_avar.jpg'
            "
            mode=""
          ></image>
          <view
            class="coupon_info flex_r flex_ac"
            v-if="!isShiMing"
            @tap="goToAutonym"
          >
            完成实名认证，享受更多权益
            <image
              src="/static/f_close.png"
              mode="widthFix"
              class="close_icon"
              @tap.stop="closeAuto"
            ></image>
            <view class="sj_icon"></view>
          </view>
        </view>
        <block v-if="userInfo && userInfo != ''">
          <view class="user_con flex_c">
            <view class="user_name flex_r flex_ae ellipsis"
              >{{ userInfo.weiXinNiceName
              }}<text
                >({{ userInfo.identifyFlag == 0 ? "未实名" : "已实名" }})</text
              ></view
            >
            <view class="flex_r flex_ac">
              <view class="user_level flex_r mar_t10">
                <image
                  class="level_img"
                  src="/static/huangguan.png"
                  mode=""
                ></image>
                <view class="level_text">{{ userInfo.leve }}</view>
              </view>
            </view>
            <view class="user_account flex_r flex_ac mar_t10">
              <view class="account">账号：{{ userInfo.userAccount }}</view>
              <view
                class="copy_account flex_r flex_ac flex_jc"
                @tap="copyText(userInfo.userAccount)"
                >复制</view
              >
            </view>
          </view>
          <view class="user_option flex_r flex_ac">
            <image
              class="code_img"
              src="/static/f_img_code.png"
              @tap="getImgPage"
              mode=""
            ></image>
            <image
              class="code_img"
              src="/static/setting.png"
              @tap="getToSetting"
              mode=""
            ></image>
          </view>
        </block>
        <block v-else>
          <view class="user_con flex_c flex_jb">
            <view class="user_name flex_r flex_ae ellipsis">点此处登录</view>
          </view>
        </block>
      </view>
      <!-- 用户信息-end -->

      <!-- 账户信息 -->
      <view class="acc_info">
        <view class="acc_head flex_r flex_ac flex_jb">
          <view class="acc_price"
            >账号余额￥<text>{{ userInfoAccount.commission }}</text></view
          >
          <view class="C flex_r flex_ac">
            <navigator
              class="recharge flex_r flex_ac flex_jc"
              url="/pages/top-up/index"
              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">{{ userInfoAccount.yesterdayProfit }}</view>
          </view>
          <view class="info_list flex_c flex_jb" @tap="getToAccMoney">
            <view class="list_name">拼团金</view>
            <view class="list_text">{{ userInfoAccount.accountMoney }}</view>
          </view>
          <!-- 					<view class="info_list flex_c flex_jb" @tap="getToBean">
						<view class="list_name">拼豆</view>
						<view class="list_text">{{userInfoAccount.accountBean}}</view>
					</view> -->
          <view class="info_list flex_c flex_jb" @tap="getToTeaList">
            <view class="list_name">茶友(人)</view>
            <view class="list_text">{{ userInfoAccount.teaFriends }}</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 flex_jb">
          <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/wealth/index"
            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/consign-list/index"
            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/give/index"
            hover-class="none"
          >
            <image class="fun_img" src="/static/my/give.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 flex_jb">
          <navigator
            class="fun_list flex_c flex_ac"
            url="/pages/my-pintuan/index"
            hover-class="none"
          >
            <image
              class="fun_img"
              src="/static/my/pintaun_icon.png"
              mode=""
            ></image>
            <view class="fun_text">我的拼团</view>
          </navigator>
          <navigator
            class="fun_list flex_c flex_ac"
            url="/pages/group-list/index"
            hover-class="none"
          >
            <image class="fun_img" src="/static/my/my_pintuan.png" mode=""></image>
            <view class="fun_text">发起拼团</view>
          </navigator>
          <navigator
            class="fun_list flex_c flex_ac"
            url="/pages/group-order/index"
            hover-class="none"
          >
            <image
              class="fun_img"
              src="/static/my/dingdan_icon.png"
              mode=""
            ></image>
            <view class="fun_text">拼团订单</view>
          </navigator>
          <navigator
            class="fun_list flex_c flex_ac"
            url="/pages/acc-money-list/index"
            hover-class="none"
          >
            <image
              class="fun_img"
              src="/static/my/pintaunjin_icon.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 flex_jb">
          <navigator
            class="fun_list flex_c flex_ac"
            url="/pages/fund-list/index"
            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/withdraw-list/index"
            hover-class="none"
          >
            <image class="fun_img" src="/static/my/withdraw.png" mode=""></image>
            <view class="fun_text">提现明细</view>
          </navigator>
          <navigator
            class="fun_list flex_c flex_ac"
            url="/pages/top-up-list/index"
            hover-class="none"
          >
            <image class="fun_img" src="/static/my/topup.png" mode=""></image>
            <view class="fun_text">充值明细</view>
          </navigator>
          <navigator
            class="fun_list flex_c flex_ac"
            url="/pages/sign-list/index"
            hover-class="none"
          >
            <image class="fun_img" src="/static/my/inte-list.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=1"
            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=2"
            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=3"
            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=4"
            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=5"
            hover-class="none"
          >
            <image class="fun_img" src="/static/my/evaluate.png" mode=""></image>
            <view class="fun_text">待评价</view>
          </navigator>
          <navigator
            class="fun_list flex_c flex_ac"
            url="/pages/order-refund-list/index?status=5"
            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 flex_jb">
          <navigator
            class="fun_list flex_c flex_ac"
            url="/pages/about/index"
            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"
            url="/pages/notice/index"
            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"
            url="/pages/course/index"
            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 mar_t20 mar_b20">茶，让生活更美好！</view>
    <!-- 功能列表-end -->

    <!-- 授权 -->
    <authorize-module
      v-if="showAuth"
      :shopInfo="shopInfo"
      @authSuccess="onAuthSuccess"
      @onGotUserInfo="onGotUserInfo"
    ></authorize-module>
    <!-- 授权-end -->
  </view>
</template>

<script>
let page = 1;
let app = getApp();
// let reqApi = new ReqApi();
var appEv = app.$vm.$options;
// import { ReqApi } from "@/utils/reqTools.js";
import authorizeModule from "@/components/authorize-module/index";
// import uniCopy from "@/js_sdk/xb-copy/uni-copy.js";
import { get, post } from "@/request/api.js";
export default {
  components: {
    authorizeModule,
  },
  data() {
    return {
      showAuth: false,
      shopInfo: {}, // 商铺信息
      userInfo: "", // 用户信息
      userInfoAccount: {}, // 账户数据
      customerServiceWeiXin: "", // 客服微信
      isShiMing: true,
      agentName: "", // 缘起
    };
  },
  onLoad: function (options) {
    //推荐人ID
    if (options.agentId) {
      app.globalData.agentId = options.agentId;
    }
    if (options && options.scene) {
      var scene = decodeURIComponent(options.scene).split("&");
      if (scene.length > 0) {
        var agentId = scene[0].split(":");
        app.globalData.agentId =
          agentId[1] && agentId[1] != "" ? agentId[1] : app.globalData.agentId;
      }
    }
  },
  onShow: function () {
    let that = this;
    let userId =
      app.globalData.systemUserInfo && app.globalData.systemUserInfo.userId
        ? app.globalData.systemUserInfo.userId
        : "";
    if (!userId || userId == "" || userId == undefined) {
      // #ifdef  MP-WEIXIN
      that.showAuth = true;
      appEv.authorizeUserInfo((res) => {
        if (res) {
          that.shopInfo = app.globalData.shopInfo;

          that.showAuth = false;
          that.loadData();
        }
      });
      // #endif

      // #ifdef  H5 || APP-PLUS
      uni.showToast({
        title: "跳转登录页",
        icon: "none",
        duration: 1200,
        mask: true,
      });
      // #endif
    } else {
      this.loadData();
    }
  },
  methods: {
    // 获取用户信息
    loadData: function () {
      let that = this;
      const info = reqApi.getMyIndex();
      if (info) {
        info.then((res) => {
          if (res.data.status == 200) {
            that.userInfo = res.data.userInfo;
            that.userInfoAccount = res.data.userInfoAccount;
            that.customerServiceWeiXin = res.data.customerServiceWeiXin;
            that.isShiMing = res.data.userInfo.identifyFlag == 0 ? false : true;
          }
        });
      }
    },
    //授权并登录
    onAuthSuccess: function () {
      var that = this;
      uni.showLoading({ mask: true });
      appEv.setData((res) => {
        that.loadData();
        uni.hideLoading();
        that.showAuth = false;
      });
    },
    // 跳转到实名页面
    goToAutonym: function () {
      let that = this;
      const info = reqApi.identifyUserPayment();
      if (info) {
        info.then((res) => {
          if (res.data.status == 200) {
            uni.navigateTo({
              url: "/pages/autonym-submit/index",
            });
          } else if (res.data.status == 999) {
            uni.navigateTo({
              url: "/pages/autonym-pay/index",
            });
          } else {
            appEv.errTip(res.data.msg);
          }
        });
      }
    },
    // 关闭实名信息
    closeAuto: function () {
      this.isShiMing = true;
    },
    // 未开放提示信息
    SetHint: function () {
      appEv.errTips("此功能暂未开放");
    },
    // 跳转到分享页面
    getImgPage: function () {
      let that = this;
      const info = reqApi.realName();
      if (info) {
        info.then((res) => {
          if (res.data.status == 200) {
            uni.navigateTo({
              // url:'/pages/mytest/poster'
              url: "/pages/invi-img/index",
            });
          } else {
            appEv.errTips("您还未实名");
            const infor = reqApi.identifyUserPayment();
            if (infor) {
              infor.then((rea) => {
                if (rea.data.status == 200) {
                  uni.navigateTo({
                    url: "/pages/autonym-submit/index",
                  });
                } else if (rea.data.status == 999) {
                  uni.navigateTo({
                    url: "/pages/autonym-pay/index",
                  });
                } else {
                  appEv.errTip(rea.data.msg);
                }
              });
            }
          }
        });
      }
    },
    // 跳转到提现页面
    getToCash: function () {
      let that = this;
      const info = reqApi.realName();
      if (info) {
        info.then((res) => {
          if (res.data.status == 200) {
            uni.navigateTo({
              url: "/pages/cash/index",
            });
          } else {
            appEv.errTips("您还未实名");
            const infor = reqApi.identifyUserPayment();
            if (infor) {
              infor.then((rea) => {
                if (rea.data.status == 200) {
                  uni.navigateTo({
                    url: "/pages/autonym-submit/index",
                  });
                } else if (rea.data.status == 999) {
                  uni.navigateTo({
                    url: "/pages/autonym-pay/index",
                  });
                } else {
                  appEv.errTip(rea.data.msg);
                }
              });
            }
          }
        });
      }
    },
    // 复制账号
    copyText: function (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",
      });
    },
  },
};
</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;
}
.sj_icon {
  position: absolute;
  top: 100%;
  left: 60rpx;
  border-top: 16rpx solid rgba(0, 0, 0, 0.8);
  border-right: 16rpx solid transparent;
  border-left: 16rpx solid transparent;
  border-bottom: 0;
}
.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;
}
.level_img {
  width: 42rpx;
  height: 35rpx;
  z-index: 30;
}
.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;
}
.level_text {
  padding: 0 16rpx;
  border-radius: 13rpx;
  font-size: 20rpx;
  color: #6b2909;
  margin-left: -14rpx;
  margin-top: 6rpx;
}
.user_name {
  width: 100%;
  overflow: hidden;
  font-size: 46rpx;
  color: #121212;
  font-family: "SourceHanSansSC-Medium";
  font-weight: 500;
  line-height: 1;
}
// 用户信息-end

// 账户信息
.acc_head {
  width: 100%;
  overflow: hidden;
}
.acc_price {
  font-size: 24rpx;
  color: #fff;
}
.info_list:nth-child(1) {
  padding-left: 0;
}
.list_name {
  font-size: 24rpx;
  color: #ffffff;
}
.info_list:nth-last-child(1) {
  border-right: 0;
}
.info_con {
  width: 100%;
  overflow: hidden;
  margin-top: 60rpx;
}
.acc_hint {
  width: 100%;
  overflow: hidden;
  font-size: 20rpx;
  color: #fff;
}
.acc_price text {
  font-size: 46rpx;
  font-family: "SourceHanSansSC-Bold";
  color: #fff;
}
.list_text {
  font-size: 34rpx;
  font-size: 34rpx;
  font-family: "SourceHanSansSC-Bold";
  font-weight: bold;
  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";
  margin-left: 20rpx;
}
.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;
}
.acc_info {
  width: 100%;
  overflow: hidden;
  background: url("~@/static/my/myBack.png") no-repeat;
  border-radius: 16rpx;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 50rpx;
  background-size: 100% 100%;
}
// 账户信息-end

// 功能列表
.more {
  font-size: 24rpx;
  color: #999999;
}
.fun_con {
  width: 100%;
  overflow: hidden;
}
.fun_text {
  font-size: 24rpx;
  color: #333333;
}
.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 {
  font-size: 32rpx;
  color: #232323;
  font-family: "SourceHanSansSC-Bold";
  font-weight: bold;
}
.fun {
  width: 100%;
  overflow: hidden;
  border-radius: 16rpx;
  background: #fff;
  padding: 30rpx;
  box-sizing: border-box;
}
.user_level {
  background: linear-gradient(to right, #ffeabd, #ffc479);
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  border-radius: 6rpx;
  overflow: hidden;
}
// 功能列表-end
</style>