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

<template>
  <view class="container">
    <view
      class="content"
      :style="userinfo.is_authentication == 1 ? 'padding-top:30rpx;' : ''"
    >
      <!-- 用户信息 -->
      <view class="uerInfo mar_t16 flex_r">
        <view class="user_img">
          <image
            class="image"
            :src="
              userinfo && userinfo.head_pic != ''
                ? userinfo.head_pic
                : '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/my/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.nickname
              }}<text
                >({{
                  userinfo.is_authentication == 0 ? "未实名" : "已实名"
                }})</text
              ></view
            >
            <view class="flex_r flex_ac">
              <view class="user_level flex_r mar_t10">
                <image
                  class="level_img"
                  src="/static/my/huangguan.png"
                  mode=""
                ></image>
                <view class="level_text">{{ userinfo.level_name }}</view>
              </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">
            <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"
              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>{{ userinfo.user_money }}</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">{{ userinfo.yesterdayProfit || 0 }}</view>
          </view>
          <view class="info_list flex_c flex_jb" @tap="getToAccMoney">
            <view class="list_name">积分</view>
            <view class="list_text">{{ userinfo.integral || 0 }}</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">{{ userinfo.friends || 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 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/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>
        </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/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>
          <navigator
            class="fun_list flex_c flex_ac"
            url="/pages/accountDetails/topup"
            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/accountDetails/integral"
            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"
      @authGetTelSuccess="onauthGetTelSuccess"
    ></authorize-module>
    <!-- 授权-end -->
    <newauthorize ref="newauthorize"/>
  </view>
</template>

<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
// let reqApi = new ReqApi();
// import { ReqApi } from "@/utils/reqTools.js";
import authorizeModule from "@/components/authorize-module/index";
// import newauthorize from "@/components/authorize-module/new";
import uniCopy from "../../utils/copy";
import { get, post, u_post } from "@/request/api.js";
export default {
  components: {
    authorizeModule,
    // newauthorize
  },
  data() {
    return {
      showAuth: false,
      shopInfo: {}, // 商铺信息
      userInfoAccount: {}, // 账户数据
      customerServiceWeiXin: "", // 客服微信
      isShiMing: true,
      agentName: "", // 缘起
      user_id: undefined,
      userinfo: undefined, // 获取用户信息

      unid: '',
    };
  },
  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 () {
    this.userinfo = uni.getStorageSync("userinfo");
    this.isShiMing = this.userinfo.is_authentication == 0 ? true : false;
    let token = uni.getStorageSync("token");
    if (!token) {
      this.login();
    }
  },
  methods: {
    login() {
      let that = this
      // #ifdef  MP-WEIXIN
      wx.login({
        success(res) {
          if (res.code) {
            post("appletLogin", { code: res.code }).then(res => {
              if(res.code === 0){
                if(res.data.token){
                  uni.setStorageSync('token', res.data.token);
                  that.getuserInfo();
                }else{
                  that.unid = res.data.unid
                  // setTimeout(() => {
                    that.showAuth = true
                    that.shopInfo = app.globalData.shopInfo
                  // }, 500);
                }
              }
            });
          }
        },
      });
      // #endif

      // #ifdef  H5 || APP-PLUS
      this.goto("/pages/my/login");
      // #endif
    },
    onauthGetTelSuccess(da){
      this.showAuth = false;
      post("getMobile", {unid:this.unid, ...da.detail}).then(res => {
            if (res.code === 0) {
                uni.setStorageSync('token', res.data.token);
                this.getuserInfo();
            }
      })
    },
    getuserInfo() {
        post("/user/userinfo").then((res) => {
            if (res.code === 0) {
                uni.setStorageSync('userinfo', res.data.data);
                this.userinfo = res.data.data
            }
        });
    },

    //授权并登录
    onAuthSuccess: function () {
      var that = this;
      uni.showLoading({ mask: true });
      appEv.setData((res) => {
        uni.hideLoading();
        that.showAuth = false;
      });
    },
    // 跳转到实名页面
    goToAutonym() {
		// post('/user/isPayAuth').then(res => {
		// 	if(res.code === 0){
		// 		if(res.data.)
		// 	}
		// })
		// return
      uni.navigateTo({
        url: "/pages/autonym-submit/index",
      });
    },
    // 关闭实名信息
    closeAuto() {
      this.isShiMing = false;
    },
    // 未开放提示信息
    SetHint: function () {
      appEv.errTips("此功能暂未开放");
    },

    //是否实名
    async isrealName() {
      let n = await u_post("ShuZiTeaYW/userInfo/realName");
      return n.status == 200;
    },
    // 跳转到分享页面
    getImgPage: function () {
      let that = this;
      if (this.isrealName()) {
        uni.navigateTo({
          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;
      if (this.isrealName()) {
        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(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>