shuquAi/pages/user/user.vue

<template>
	<view>
		<view class="user">
			<!-- <wike-skeleton :count="1" v-if="homeTemplate.length === 0" type="user"></wike-skeleton> -->
			<!-- 头部 -->
			<view class="user-wrap" :style="{ backgroundImage: `url(${'https://source.iduomi.cc/user_bg.jpg'})` }">
				<view class="setting iconfont icon31shezhi"></view>
				<view v-if="hasLogin" class="info">
					<image class="avatar" mode="aspectFill"
						:src="userInfo.avatar?userInfo.avatar:'/static/images/head.jpg'"></image>
					<view class="nickname">
						<text
							@click="copyText(userInfo.nickname?userInfo.nickname:'默认用户')">{{userInfo.nickname?userInfo.nickname:'默认用户'}}</text>
						<u-icon name="edit-pen" color="#18b566" size="20" @click="modify"></u-icon>
					</view>

				</view>
				<view v-else class="info" @click="getlogin">
					<image class="avatar" mode="aspectFill" src="/static/images/head.jpg"></image>
					<view class="nickname">点击立即登录/注册</view>
				</view>
			</view>

			<!-- 订单状态 -->
			<view class="order-status">
				<view class="status-wrap">
					<view class="cell" style="background: #000000d4;height: 112rpx;">
						<view class="cell-left">
							<i class="iconfont icon-yongjinguanli" style="color: #ffd465;"></i>
							<block>
								<view class="cell-text" style="color: #ffd465;font-size: 30rpx;font-weight: bold;">
									<!-- 佣金： {{userInfo.commission }} -->
									{{commissionMoney.toFixed(2)}}
								</view>
							</block>
						</view>
						<!-- <navigator class="b-btn"
							:url="hasLogin ? '/pages/user/commission/commission-log' : '/pages/user/signin'"
							@click="getroute">查看佣金</navigator> -->
						<view class="btnBox">
							<navigator class="b-btn"
								:url="hasLogin ? '/pages/user/commission/commission-log' : '/pages/user/signin'"
								@click="getroute">任务佣金</navigator>

							<navigator class="b-btn"
								:url="hasLogin ? '/pages/user/commission/commission-log2' : '/pages/user/signin'"
								@click="getroute">推广佣金</navigator>
						</view>
					</view>
				</view>
			</view>

			<!-- 用户功能 -->
			<view class="com-item">
				<view class="com-wrap">
					<navigator class="cell" v-for="(item, index) in userList" :key="index"
						:url="hasLogin ? item.url : '/pages/user/signin'" @click="">
						<view class="cell-left">
							<u-icon v-if="item.ques" name="question-circle-fill" :color="item.color" size="22"></u-icon>
							<i v-else class="iconfont" :class="item.iconName"
								:style="{color:item.icon=='grid-fill'?'rgb(255, 202, 40)':item.icon=='question-circle-fill'?'rgb(49, 201, 232)':item.icon=='setting-fill'?'rgb(90, 199, 37)':'#26B3A0'}"></i>
							<view class="cell-text">{{ item.title }}</view>
						</view>
						<u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
					</navigator>
				</view>
			</view>

			<!-- 用户服务 -->
			<view class="com-item">
				<view class="com-wrap">
					<navigator class="cell" v-for="(item, index) in serverList" :key="index" :url="item.path">
						<view class="cell-left">
							<u-icon :name="item.icon" color="#26B3A0" size="22"></u-icon>
							<view class="cell-text">{{ item.title }}</view>
						</view>
						<u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
					</navigator>
				</view>
			</view>
			<view class="com-item"><wike-ad></wike-ad></view>
		</view>
		<wike-tabbar :onTabbar="true" :isShowAnimate="true"></wike-tabbar>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		API_ROOT
	} from '@/common/request/request';
	import {
		userInfo
	} from '@/api/my/index.js'

	import {
		taskCount,
		recommendCount
	} from '@/api/my/index.js'

	let interstitialAd = null,
		timer,
		time2;
	export default {
		components: {},
		data() {
			return {
				// totalMoney: 0,
				commissionMoney: 0,
				tuskMoney: 0,

				userInfo: {},

				API_ROOT: API_ROOT,
				perfectResume: false, //简历是否完善
				tobheight: 45,
				platform: this.$platform.get(),
				showrealname: false,
				showworkermy: false,
				avatar: '',
				isLoading: true,
				// userInfo: {
				// 	headPicUrl: '/static/images/user/avatar.jpg',
				// 	nickName: '史蒂芬.林'
				// },
				orderStatusList: [{
						name: '待付款',
						icon: 'iconfont icon31daifukuan',
						status: 10
					},
					{
						name: '待发货',
						icon: 'iconfont icon31daifahuo',
						status: 30
					},
					{
						name: '待收货',
						icon: 'iconfont icon31daishouhuo',
						status: 40
					},
					{
						name: '待评价',
						icon: 'iconfont icon31daipingjia',
						status: 50
					},
					{
						name: '已完成',
						icon: 'iconfont icon31yiguanzhudianpu',
						status: 55
					}
				],
				currentIndex: 0,
				list: [{
						icon: '/static/images/user/class-01.png',
						text: '我的电子券'
					},
					{
						icon: '/static/images/user/class-02.png',
						text: '退换/售后'
					},
					{
						icon: '/static/images/user/class-03.png',
						text: '我的积分'
					},
					{
						icon: '/static/images/user/class-04.png',
						text: '送礼提醒'
					}
				],
				userList: [{
						title: '我的课程',
						icon: 'question-circle-fill',
						path: 'collect-list',
						// url: '/pages/user/score/index',
						url: '/pages/user/score/record/index',
						iconName: 'icon-kecheng'
					},
					{
						title: '我的任务',
						icon: 'question-circle-fill',
						path: 'collect-list',
						url: '/pages/user/work/index',
						iconName: 'icon-renwu'
					},
					{
						title: '账户余额',
						icon: 'question-circle-fill',
						path: 'collect-list',
						url: '/pages/user/commission/commission-log',
						iconName: 'icon-yue'
					},
					{
						title: '推广者中心',
						icon: 'grid-fill',
						path: 'collect-list',
						url: '/pages/user/commission/index',
						iconName: 'icon-tuandui'
					},
					{
						title: '问答记录',
						icon: 'question-circle-fill',
						path: 'collect-list',
						url: '/pages/user/takenotes/takenotes',
						iconName: 'icon-tuandui',
						ques: true,
						color: 'rgb(49, 201, 232)'
					},

					{
						title: '修改用户信息',
						icon: 'setting-fill',
						path: 'collect-list',
						url: '/pages/user/userinfo',
						iconName: 'icon-xiugaioryijian'
					}
				],
				serverList: [{
						title: '联系客服',
						icon: 'server-fill',
						path: '/pages/user/public/kefu'
					},
					{
						title: '系统设置',
						icon: 'setting-fill',
						path: '/pages/user/set/index'
					}
				],
				commission_setting: {},
				showcarmi: false,
				carmi: ''
			};
		},
		computed: {
			...mapGetters(['hasLogin']),

			// totalMoney() {
			// 	return this.commissionMoney + this.tuskMoney
			// }
		},

		async onShow() {
			let res = await userInfo()
			console.log('用户个人信息返回值', res);
			if (res.code == 0) {
				this.userInfo = res.data
			}
		},

		async onLoad() {
			if (!uni.getStorageSync('token')) {
				uni.redirectTo({
					url: '/pages/user/signin'
				})
			}


			let ress = await taskCount()
			if (ress.code == 0) {
				this.commissionMoney = Number(ress.data.cashing)
				// console.log('我的--任务佣金汇总返回值', ress, this.commissionMoney);
			}
			let res1 = await recommendCount()
			if (res1.code == 0) {
				this.tuskMoney = Number(ress.data.cashing)
				// console.log('我的--推广佣金汇总返回值', res1, this.tuskMoney);
			}



			this.isLoading = false;
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/user/signin'
				});
			}
		},
		onReady() {

		},
		onUnload() {

		},
		methods: {
			getlogin() {
				// console.log(2222);
				uni.navigateTo({
					url: '/pages/user/signin'
				});
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						// console.log('success');
						uni.showToast({
							title: '用户名复制成功'
						});
					}
				});
			},
			modify() {
				uni.navigateTo({
					url: '/pages/user/userinfo'
				})
			},
			clickuimage(e) {

				uni.previewImage({
					urls: [e]
				})
			},
			getCommissionSetting() {
				this.$http('conf.getGroupConf', {
					group: 'system.commission'
				}).then(res => {
					if (res.code == 0) {
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
						if (res.data.is_commission == 1) {
							let obj = {
								title: '我的团队',
								icon: 'grid-fill',
								path: 'address-list',
								url: '/pages/user/commission/index'
							};
							this.userList.splice(0, 0, obj);
						}
						if (this.appInfo.is_aipainting && this.appInfo.is_aipainting == 1) {
							let draw = {
								title: '绘画记录',
								icon: 'edit-pen-fill',
								path: 'address-list',
								url: '/pages/user/draw/draw'
							};
							this.userList.splice(1, 0, draw);
						}
					}
				});
			},
			getroute() {
				if (!this.hasLogin) {
					uni.setStorageSync('route', '/pages/user/user');
				}
			},
			exchange() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/user/signin'
					});
					uni.setStorageSync('route', '/pages/user/user');
					return;
				}
				uni.showLoading({
					title: '卡密兑换中...'
				});
				this.$http('member.kami', {
					code: this.carmi
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '兑换成功'
						});
						this.getUserData();
						this.showcarmi = false;
					}
				});
			},
			getuserinfo() {
				uni.navigateTo({
					url: '/pages/user/userinfo'
				});
			},
			getPersonalRealNameInfo() {
				this.$http('vertify.getPersonalRealNameInfo').then(res => {
					if (res.code == 0) {
						this.showrealname = false;
					} else {
						this.showrealname = true;
					}
				});
			},
			workermy() {
				this.$http('worker.my').then(res => {
					if (res.code == 0) {
						if (res.data.name) {
							this.showworkermy = true;
						} else {
							this.showworkermy = false;
						}
					} else {
						this.showworkermy = false;
					}
				});
			},
			getfeedback() {
				uni.showModal({
					content: '请联系客服,提供您的宝贵意见',
					title: '提示',
					confirmText: '联系客服',
					confirmColor: '#00ca88',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/user/public/kefu'
							});
						}
					}
				});
			},
			showInterstitial() {
				time2 = setInterval(
					function() {
						interstitialAd.show().catch(err => {
							console.error(err);
						});
					},
					this.appInfo.gap ? this.appInfo.gap * 1000 : 12000
				);
			}
		}
	};
</script>
<style lang="scss">
	.btnBox {
		display: flex;
		justify-content: space-between;
		width: 45%;
	}


	page {
		background: #f2f2f2;
	}

	.btn-hover {
		background: #f2f2f2 !important;
	}

	.user {
		// height: 1800rpx;
		padding-bottom: 200rpx;

		.user-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 56vw;
			padding: 30rpx;
			z-index: 9;
			// border-radius: 0 0 20% 20%;
			// background: url('https://mp-ea41a5d2-ea75-4ec6-aa57-ac841611f485.cdn.bspapp.com/cloudstorage/796de0fd-c730-40b8-9177-1250bb76d0a3.jpg') no-repeat;
			background-size: cover;

			.setting {
				color: #fff;
				position: absolute;
				top: 60rpx;
				left: 60rpx;
				font-size: 50rpx;
			}

			.info {
				position: absolute;
				text-align: center;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					border: 3px solid #fff;
				}

				.nickname {
					color: #fff;
					font-size: 30rpx;
					margin-top: 20rpx;
					font-weight: bold;
					display: flex;
				}
			}
		}

		.order-status {
			padding: 0 20rpx;
			margin-top: -8vw;

			.status-wrap {
				border-radius: 25rpx;
				overflow: hidden;

				.status-list {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					background: #fff;
					padding-top: 30rpx;
					padding-bottom: 30rpx;

					.status-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.item-icon {
							line-height: 1;
							font-size: 65rpx;
							color: #bbb;
						}

						.item-text {
							font-size: 28rpx;
							color: #666;
							margin-top: 5rpx;
						}
					}
				}
			}
		}

		.com-item {
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 20rpx;

			.com-wrap {
				border-radius: 25rpx;
				overflow: hidden;
			}
		}

		.cell {
			height: 110rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-bottom: 1px solid #f8f8f8;

			&:active {
				background: #f2f2f2;
			}

			&:last-child {
				border-bottom: none !important;
			}

			.cell-left {
				display: flex;
				align-items: center;

				.cell-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.cell-text {
					color: #666;
					font-size: 32rpx;
					margin-left: 20rpx;
					// font-size: 30rpx;
				}
			}

			.iconfont {
				font-size: 40rpx;
				color: #999;
			}
		}
	}

	.b-btn {
		// position: absolute;
		// right: 20upx;
		// top: 24upx;
		width: 132upx;
		height: 50upx;
		text-align: center;
		line-height: 50upx;
		font-size: 24upx;
		color: #36343c;
		border-radius: 30px;
		background: #ffd465;
		z-index: 1;
	}

	.carmimodal {
		width: 600rpx;
		border-radius: 20rpx;
		position: relative;

		.carmiclose {
			position: absolute;
			right: 15rpx;
			top: 15rpx;
		}

		.carmititle {
			background: #26b3a0;
			color: #fff;
			height: 120rpx;
			line-height: 120rpx;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			border-radius: 20rpx 20rpx 0 0;
			margin-bottom: 60rpx;
		}

		.carmiinput {
			margin: 30rpx;
		}

		.carmiexchange {
			margin: 80rpx 30rpx 90rpx 30rpx;
			background: #26b3a0;
			color: #fff;
			border-radius: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.kf_qrcode {
			// margin-left: 200rpx;
			margin-bottom: 30rpx;
		}
	}
</style>