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 @click="upheadimg" class="image" :src="userinfo.head_pic" 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">
							<view @click="goto('/pages/my/userinfo')">{{ userinfo.nickname }}</view>
							<text>({{ userinfo.is_authentication == 0 ? "未实名" : "已实名" }})</text>
						</view>
						<view class="flex_r flex_ac">
							<view class="user_level clearfix">
								<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 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="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.cha_bao || 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=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=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=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/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 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" />
		<!-- 授权-end -->
	</view>
</template>

<script>
	let page = 1;
	let app = getApp();
	var appEv = app.$vm.$options;
	import authorizeModule from "@/components/authorize-module/index";
	import uniCopy from "@/utils/copy";
	import { get, 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: "",
				
				// isGetUserInfo:false,
				invited:'',

				updataUserimg: {},
			};
		},
		onLoad: function(options) {
			//推荐人ID
			if (options.invite) {
				app.globalData.agentId = options.invite;
				this.invited = options.invite
			}
			// 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 token = uni.getStorageSync("token");
			
			this.userinfo = uni.getStorageSync("userinfo");
			this.isShiMing = this.userinfo.is_authentication == 0 ? true : false;
			
			if (!token) {
				this.login();
			}
			if(token){
				this.getuserInfo();
			}
		},
		methods: {
			login() {
				let that = this;
				// #ifdef  MP-WEIXIN
				wx.login({
					success(res) {
						if (res.code) {
							// wx.request({
							// 	url: `https://api.weixin.qq.com/sns/jscode2session?appid=wx8ebee994ea7c5af3&secret=f80039555c022bf0a805bed83358fa01&js_code=${res.code}&grant_type=authorization_code`,
							// 	success:(res)=>{
							// 		console.log(res);
							// 	}
							// })

							post("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("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;
						this.isShiMing = this.userinfo.is_authentication == 0 ? true : false;
					}
				});
			},

			//授权并登录
			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() {
				uni.navigateTo({
					url: "/pages/tea-rule/index",
				});
				
			},

			// 跳转到分享页面
			getImgPage: function() {
				let that = this;
				if (this.userinfo.is_authentication == 1) {
					uni.navigateTo({
						url: "/pages/invi-img/index",
					});
				} else {
					appEv.errTips("您还未实名");
					uni.navigateTo({
						url: "/pages/autonym-submit/index",
					});
				}
			},
			// 跳转到提现页面
			getToCash: function() {
				let that = this;
				if (this.userinfo.is_authentication == 1) {
					uni.navigateTo({
						url: "/pages/cash/index",
					});
				} else {
					appEv.errTips("您还未实名");
					uni.navigateTo({
						url: "/pages/autonym-submit/index",
					});
				}
			},
			// 复制账号
			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.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ["compressed"], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ["album", "camera"], // album 从相册选图，camera 使用相机，默认二者都有
					success: function (res) {
						var arr = res.tempFiles;
						that.$up(arr[0].path).then(res => {
							post("user/setup", {
								head_pic: res,
								nickname: that.userinfo.nickname
							}).then((res) => {
								that.getuserInfo();
								appEv.errTips("更换成功");
							});
						});
					},
				});
			},
		},
	};
</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 {
		color: #6b2909;
		// padding: 0 16rpx;
		// border-radius: 13rpx;
		// font-size: 20rpx;
		// margin-left: -14rpx;
		// margin-top: 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 {
		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 {
		margin-top: 10rpx;
		background: linear-gradient(to right, #ffeabd, #ffc479);
		padding: 5rpx 20rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		.level_img,.level_text{
			// vertical-align: middle;
			float: left;
		}
		.level_text{
			font-size: 28rpx;
			margin-left: 12rpx;
		}
	}

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