anmo-master/pages/my/index.vue

<template>
	<view class="my-page">
		<view class="headtop">
			<view class="icon-box">
				<image class="icon" src="/static/images/my/wallet-icon.png" mode=""></image>
				<view class="text" @click="goNav('/my/wallet/mymoneydetail')">钱包明细</view>
			</view>
			<view class="u-flex">
				<view class="u-m-r-10">
					<image :src="avatar" style="width: 100rpx;height: 100rpx;border-radius: 100rpx;"
						@click="goNav('/pages/my/userinfo')"></image>
				</view>
				<view class="u-flex-1 u-m-l-10 " v-if="!isLogin">
					<view class="margin-left-xs">
						<view style="font-weight: bold;font-size: 32rpx;color: #222222;">{{userName}}</view>
						<view class="flex  margin-top-sm" v-if="XCXIsSelect != '否'"
							style="font-size: 24rpx;color: #222222;">
							<view v-if="renzheng == 0" @click.stop="goNav('/my/renzheng/rzType')">
								暂未实名认证
							</view>
							<view v-if="renzheng == 1" @click.stop="goNav('/my/renzheng/index')">
								审核中
							</view>
							<view v-if="renzheng == 2" @click.stop="goNav('/my/renzheng/index')">
								已实名认证
							</view>
							<view v-if="renzheng == 3" @click.stop="goNav('/my/renzheng/index')">
								已拒绝
							</view>
						</view>

					</view>
				</view>
				<view v-else class="text-xl u-p-l-20 text-bold" @click="goLogin('/pages/public/login')">
					登录
				</view>
			</view>
			<view class="moneybox" v-if="XCXIsSelect != '否'">
					<view class="flex box-content">
						<view class="money-item">
							<view class="label">账户余额(元)</view>
							<view class="money_text">{{money?money:'0'}}</view>
							<view class="desc-btn" @click="goQian()">立即提现
							</view>
						</view>
						<view class="money-item" @click="goNav('/my/wallet/mymoneydetail')">
							<view class="label">今日收益</view>
							<view class="money_text">{{dayMoney?dayMoney:'0'}}</view>
						</view>
						<view class="money-item">
							<view class="label">本月提现</view>
							<view class="money_text">{{cashMoney?cashMoney:'0'}}</view>
							<view class="desc-btn" @click="goQian()">立即提现
							</view>
						</view>
						
						<view class="money-item" @click="goNav('/my/wallet/mymoneydetail')">
							<view class="label">本月收益</view>
							<view class="money_text">{{monthMoney?monthMoney:'0'}}</view>
						</view>
				</view>
				<view class="number-box">
					<view class="number-item">
						<view class="number">{{ordersScore}}</view>
						<view class="label">综合评分</view>
					</view>
					<view class="number-item">
						<view class="number">{{succeedRate | formatPrice}}%</view>
						<view class="label">成交率</view>
					</view>
					<view class="number-item">
						<view class="number">{{sumCount}}</view>
						<view class="label">服务次数</view>
					</view>
					<view class="number-item"@click="goNav('/my/wallet/xinyongfendetail')">
						<view class="number">{{creditScore}}</view>
						<view class="label">信用分</view>
					</view>
				</view>

				
				
			</view>
			
			<view class="list-content">
				
				<view class="sub-title">
					常用工具
				</view>
				<view class="box-list">
					<view class="box" v-if="renzheng == 0 && XCXIsSelect != '否'" @click="goNav('/my/renzheng/rzType')">
						<image src="../../static/images/my/renzheng.png"></image>
						<view class="box_text">实名认证</view>
					</view>
					<!-- <view class="box" v-if="renzheng > 0 && XCXIsSelect != '否'" @click="goNav('/my/renzheng/index')">
						<image src="../../static/images/my/renzheng.png"></image>
						<view class="box_text">实名认证</view>
					</view> -->
					<view class="box" @click="goNav('/pages/my/jingjiren')" v-if="renzheng > 0 && XCXIsSelect != '否'">
							<image src="../../static/images/my/shops.png"></image>
							<view class="box_text">邀请师傅</view>
						</view>
					<view class="box" @click="goNav('/my/publish/money')" v-if="bzjCheck != '否' && XCXIsSelect != '否'">
						<image src="../../static/images/my/baozhengjin.png"></image>
						<view class="box_text">保证金</view>
					</view>
					<view class="box" @click="goNav('/my/wallet/index')" v-if="XCXIsSelect != '否'">
						<image src="../../static/images/my/fbgl.png"></image>
						<view class="box_text">我的钱包</view>
					</view>
					<view class="box" @click="goChat()">
						<image src="../../static/images/my/kefu.png"></image>
						<view class="box_text">联系客服</view>
					</view>
					<view class="box" @click="goNav('/my/help/feedbackIndex')">
						<image src="../../static/images/my/help.png"></image>
						<view class="box_text">帮助中心</view>
					</view>
					<view class="box" @click="goNav('/my/team/team')" v-if="renzheng > 0 && XCXIsSelect != '否'">
						<image src="../../static/images/my/team.png"></image>
						<view class="box_text">我的团队</view>
					</view>
					<view class="box" @click="goNav('/my/publish/index')">
						<image src="../../static/images/my/yjian.png"></image>
						<view class="box_text">我的项目</view>
					</view>
					<view class="box" @click="goNav('/my/setting/index')">
						<image src="../../static/images/my/me.png"></image>
						<view class="box_text">设置中心</view>
					</view>
					<view class="box" @click="goNav('/package/pages/zysc/index/index')" v-if="shopSel != '否'">
						<image src="../../static/images/my/shop.png"></image>
						<view class="box_text">采购商城</view>
					</view>
				</view>
			</view>
			
		</view>
		<view v-if="XCXIsSelect != '否'">
			<view class="task-box" v-if="!phone || !openId || renzheng != 2">
					<image class="icon" src="/static/images/my/task-title.png" mode=""></image>
					<image class="logo" src="/static/images/my/task-logo.png" mode=""></image>
				<view class="task-list">
					<view class="flex align-center justify-between margin-top-sm" style="padding-bottom: 22rpx;border-bottom: 1rpx solid #F0F0F0;">
						<view>
							<view class="flex align-center">
								<view class="xinshou">新手任务</view>
								<view class="title">手机号授权</view>
							</view>
							<view class="margin-top-xs" style="font-size: 24rpx;color: #AAAAAA;margin-top: 22rpx;">
								以免客户无法联系到您，从而错失客户</view>
						</view>
						<view class="btn1" v-if="phone">已完成</view>
						<view class="btn" v-if="!phone">去完成</view>
					</view>
					<view class="flex align-center justify-between margin-top-sm" style="padding-bottom: 22rpx;border-bottom: 1rpx solid #F0F0F0;">
						<view>
							<view class="flex align-center">
								<view class="xinshou">新手任务</view>
								<view class="title">关注公众号</view>
							</view>
							<view class="text-26 margin-top-xs"
								style="font-size: 24rpx;color: #AAAAAA;margin-top: 22rpx;">
								方便接收新订单/状态消息提醒</view>
						</view>
						<view class="btn1" v-if="openId">已完成</view>
						<view class="btn" v-if="!openId" @click="gowxImage()">去完成</view>
					</view>
					<view class="flex align-center justify-between margin-top-sm">
						<view>
							<view class="flex align-center">
								<view class="xinshou">新手任务</view>
								<view class="title">认证信息</view>
							</view>
							<view class="text-26 margin-top-xs"
								style="font-size: 24rpx;color: #AAAAAA;margin-top: 22rpx;">
								实名认证/头像/资质</view>
						</view>
						<view class="btn1" v-if="renzheng == 2" @click.stop="goNav('/my/renzheng/index')">已完成</view>
						<view class="btn" v-if="renzheng == 0" @click.stop="goNav('/my/renzheng/rzType')">去完成</view>
						<view class="btn" v-if="renzheng != 0 && renzheng != 2"
							@click.stop="goNav('/my/renzheng/index')">去完成</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ordersScore: 0,
				creditScore: 0,
				phone: '',
				openId: '',
				avatar: '../../static/logo.png',
				isLogin: true,
				userName: '匿名',
				money: 0, //累计余额
				dayMoney: 0, //今日收益
				monthMoney: 0, //本月预估收益
				cashMoney: 0, // 本月预估提现
				userId: '',
				isVip: false,
				invitationCode: '', //邀请码
				succeedRate: 0,
				sumCount: 0,
				renzheng: 0,
				bzjCheck: '否',
				XCXIsSelect: '否',
				shopSel:'否',
				isCashDeposit: ''
			}
		},
		onLoad() {
			this.XCXIsSelect = this.$queue.getData("XCXIsSelect");
			this.shopSel = this.$queue.getData('shopSel');
		},
		onShow() {
			this.bzjCheck = this.$queue.getData("bzjCheck");
			this.userId = uni.getStorageSync('userId')
			if (this.userId) {
				this.isLogin = false
				this.getUserInfo()
				this.getCount();
				this.getAmount()
				this.getIsVip()
				this.getArtificer()
			} else {
				this.ordersScore = 0;
				this.creditScore = 0;
				this.succeedRate = 0;
				this.sumCount = 0;
				this.isLogin = true
				this.userName = '匿名'
				this.money = 0
				this.dayMoney = 0
				this.monthMoney = 0
				this.cashMoney = 0
				this.avatar = '../../static/logo.png'
			}

		},
		filters: {
			formatPrice(data) {
				if (typeof(data) === "number") {
					return parseFloat(parseFloat(data) * 100).toFixed();
				}
				return 0.00;
			}
		},
		methods: {
			goChat() {
				let kefu = this.$queue.getData('kefu'); // 用户端联系方式 1 手机号 2企业微信
				let kefuPhone = this.$queue.getData('kefuPhone');
				if (this.userId) {
					if (kefu == 1) {
						uni.makePhoneCall({
							phoneNumber: kefuPhone //仅为示例
						});
					} else {
						// #ifdef MP-WEIXIN
						let that = this
						try {
							wx.openCustomerServiceChat({
								extInfo: {
									url: that.$queue.getData('kefuUrl')
								},
								corpId: that.$queue.getData('kefuAppId'),
								success(res) {},
								fail(res) {
									console.error(res)
								}
							})
						} catch (error) {
							console.error("catchcatch" + error)
							uni.showToast({
								title: '请更新至微信最新版本'
							});
						}
						// #endif
						// #ifndef MP-WEIXIN
						let url = this.$queue.getData('kefuUrl');
						if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1) {
							uni.navigateTo({
								url
							});
						} else {
							//#ifndef H5
							uni.navigateTo({
								url: '/pages/index/webView?url=' + url
							});
							//#endif
							//#ifdef H5
							window.location.href = url;
							//#endif
						}
						// #endif
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录,请先登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pages/public/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			//跳转打开微信公众号
			gowxImage() {
			
				
				this.$Request.get('/app/common/type/2').then(res => {
					if (res.code == 0) {
						var imgPaths = [];
						imgPaths.push(res.data.value)
						uni.previewImage({
			            
			
							current: 0,
							urls: imgPaths, //图片路径是个数组，数组里面放图片的全路径
							longPressActions: { //长按保存图片到相册
								itemList: ['保存图片'],
								success: (data) => {
									uni.saveImageToPhotosAlbum({ //保存图片到相册
										filePath: res.data.value,
										success: function() {
											uni.showToast({
												icon: 'success',
												title: '保存成功'
											})
										},
										fail: (err) => {
											uni.showToast({
												icon: 'none',
												title: '保存失败，请重新尝试'
											})
										}
									});
								},
								fail: (err) => {
									console.log(err.errMsg);
								}
							}
						})
			
					}
				});
			
			},
			//跳转用户端
			gouser() {
				wx.navigateToMiniProgram({
					appId: 'wx36626f7398972421',
					path: '/pages/index/index',
					envVersion: 'release', // 打开正式版
					success(res) {
						// 打开成功
					},
					fail: function(err) {
						console.log(err);
					}
				})
			},
			getCount() {
				this.$Request.get("/app/artificer/selectArtificerIndex").then(res => {
					if (res.code == 0) {
						this.succeedRate = res.data.succeedRate;
						console.log(this.succeedRate)
						this.sumCount = res.data.sumCount;
					}
				})
			},
			goQian() {
				uni.navigateTo({
					url: '/my/wallet/index'
				})
			},
			bindFb() {
				let renzheng = uni.getStorageSync('renzheng')
				console.log(this.userId, renzheng)

				if (this.userId) {
					uni.navigateTo({
						url: '/my/publish/editor'
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未实名认证,请先认证',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/my/renzheng/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			goNav(e, name) {
				console.log(e)
				if (this.userId) {
					uni.navigateTo({
						url: e
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录,请先登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pages/public/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			goLogin(e) {
				uni.navigateTo({
					url: e
				})
			},
			//我的收益
			getAmount() {
				this.$Request.get("/app/artificer/selectArtificerMoney").then(res => {
					if (res.code == 0) {
						this.money = res.data.money //累计余额
						this.dayMoney = res.data.dayMoney //今日收益
						this.monthMoney = res.data.monthMoney //本月预估收益
						this.cashMoney = res.data.cashMoney //本月预估提现
					}
				});
			},
			getUserInfo() {
				this.$Request.get("/app/user/selectUserById").then(res => {
					if (res.code == 0) {
						if(!res.data.wxOpenId){//授权微信
							let url = window.location.origin + '/my/wallet/test'
							return window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbcba29ef4f698074&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`
						}
						this.userName = res.data.userName
						this.invitationCode = res.data.invitationCode
						this.avatar = res.data.avatar ? res.data.avatar : '../../static/logo.png'
						// this.isAuthentication = res.data.isAuthentication

						this.phone = res.data.phone;
						this.openId = res.data.openId;

						//保证金
						if (res.data.isCashDeposit == 1 || res.data.isCashDeposit == null) {
							this.isCashDeposit = 1
							uni.setStorageSync("isCashDeposit", this.isCashDeposit)
						} else if (res.data.isCashDeposit == 2) {
							this.isCashDeposit = 2
							uni.setStorageSync("isCashDeposit", this.isCashDeposit)
						} else if (res.data.isCashDeposit == 3) {
							this.isCashDeposit = 3
							uni.setStorageSync("isCashDeposit", this.isCashDeposit)
						}

						uni.setStorageSync('avatar', res.data.avatar)
						uni.setStorageSync('invitationCode', res.data.invitationCode)

						//实名认证
						if (res.data.isAuthentication == 0 || res.data.isAuthentication == null) {
							this.renzheng = 0
							uni.setStorageSync("renzheng", this.renzheng)
						} else if (res.data.isAuthentication == 1) {
							this.renzheng = 1
							uni.setStorageSync("renzheng", this.renzheng)
						} else if (res.data.isAuthentication == 2) {
							this.renzheng = 2
							uni.setStorageSync("renzheng", this.renzheng)
						} else if (res.data.isAuthentication == 3) {
							this.renzheng = 3
							uni.setStorageSync("renzheng", this.renzheng)
						}

					}
				});


			},
			//获取技师的信息
			getArtificer() {
				this.$Request.getT("/app/artificer/selectArtificer").then(res => {
					if (res.code == 0) {
						this.creditScore = res.data.creditScore ? res.data.creditScore : 0;
						this.ordersScore = res.data.ordersScore ? res.data.ordersScore : 0;
						// uni.setStorageSync("status", res.data.status)
						uni.setStorageSync('artificerId', res.data.artificerId)
					}
				});
			},
			//会员
			getIsVip() {
				this.$Request.get("/app/UserVip/isUserVip").then(res => {
					if (res.code == 0) {
						this.isVip = res.data
						uni.setStorageSync('isVIP', res.data)
					}
				});
			},
			//退出登录
			TuiLogin() {
				let that = this
				if (that.userId) {
					uni.showModal({
						title: '提示',
						content: '确定退出登录吗？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.removeStorageSync('userName')
								uni.removeStorageSync('avatar')
								uni.removeStorageSync('userId')
								uni.removeStorageSync('token')
								uni.removeStorageSync('phone')
								uni.removeStorageSync('zhiFuBaoName')
								uni.removeStorageSync('zhiFuBao')
								uni.removeStorageSync('invitationCode')
								uni.removeStorageSync('unionId')
								uni.removeStorageSync('openId')
								uni.removeStorageSync('isVIP')
								uni.showToast({
									title: '退出成功！',
									icon: 'none'
								})
								that.isLogin = true
								that.userName = '匿名'
								that.money = 0
								that.dayMoney = 0
								that.monthMoney = 0
								that.cashMoney = 0
								that.avatar = '../../static/logo.png'
								that.userId = uni.getStorageSync('userId')
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录,请先登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pages/public/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}


			},

		}
	}
</script>

<style lang="scss" scoped>
	.my-page {
		background: linear-gradient( 180deg, #C2F0EE 0%, #FAF7E6 63%, #F5F5F5 2006rpx);
		padding: 20rpx 32rpx;
		min-height: calc(100vh - 50rpx) ;
		.headtop{
			position: relative;
			.icon-box{
				position: absolute;
				right: -32rpx;
				top: 40rpx;
				display: flex;
				justify-content: flex-end;
				width: 208rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				text-align: right;
				padding-right: 20rpx;
				border-radius: 32rpx 0rpx 0rpx 32rpx;
				.icon{
					width: 72rpx;
					height: 72rpx;
					position: absolute;
					left: -16rpx;
					bottom: 0;
				}
				.text{
					font-size: 28rpx;
					color: #25BCDE;
				}
			}
		}
		.moneybox {
			width: 686rpx;
			// height: 288rpx;
			background: linear-gradient( 180deg, #71EFAB 0%, #58E79A 49%, #3FDE88 100%);
			border-radius: 32rpx;
			box-sizing: border-box;
			padding-top: 28rpx;
			margin-top: 28rpx;
			.box-content{
				padding: 0 28rpx;
			}
			.money-item{
				flex: 1;
				text-align: center;
				.label{
					font-size: 24rpx;
					color: rgba(255,255,255,0.9);
				}
				.money_text {
					font-weight: 800;
					font-size: 40rpx;
					color: #FFFFFF;
					margin-top: 12rpx;
				}
				.desc-btn{
					font-size: 22rpx;
					color: #007449;
					margin-top: 6rpx;
				}
			}
		}
		.number-box{
			display: flex;
			width: 686rpx;
			height: 158rpx;
			background: linear-gradient( 180deg, #71EFAB 0%, #58E79A 49%, #FFF 100%);
			box-shadow: inset 0rpx 6rpx 8rpx 2rpx rgba(255,255,255,0.16);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			box-sizing: border-box;
			padding: 30rpx 0;
			margin-top: 30rpx;
			.number-item{
				flex: 1;
				text-align: center;
				.number{
					font-weight: bold;
					font-size: 36rpx;
					color: #222222;
				}
				.label{
					font-size: 24rpx;
					color: #222222;
					margin-top: 16rpx;
				}
				
			}
		}
		.task-box{
			background: linear-gradient( 180deg, #BAFFD9 0%, #FFFFFF 29%, #FFFFFF 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			padding: 28rpx;
			position: relative;
			margin-top: 20rpx;
			.icon{
				width: 142rpx;
				height: 32rpx;
			}
			.logo{
				width: 376rpx;
				height: 64rpx;
				position: absolute;
				right: 0;
				top: 0;
			}
			
			.task-list{
				
				.btn {
					width: 156rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background: #1EDA94;
					border-radius: 60rpx 60rpx 60rpx 60rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				
				.btn1 {
					width: 156rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background: rgba(30,218,148,0.3);
					border-radius: 60rpx 60rpx 60rpx 60rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				
				.xinshou {
					width: 128rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: #FFC934;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 24rpx;
					color: #FFFFFF;
				}
				
				.title {
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
					margin-left: 16rpx;
				}
				
			}
		}
		
	}
	.list-content{
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		padding: 28rpx 0;
		margin-top: 20rpx;
		.sub-title{
			margin-left: 28rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			margin-bottom: 28rpx;
		}
		.box-list{
			display: flex;
			flex-wrap: wrap;
			.box {
				width: 25%;
				text-align: center;
				margin-bottom: 28rpx;
			
				.box_text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #090909;
					margin-top: 20rpx;
				}
			
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		
		
	}
	

	

	
</style>