boying/pages/user/user.vue

<template>
	<view class="container">
		<view class="user-info-box">
			<view class="detail flex" @click="navTo('/pages/set/userinfo')">
				<view class="portrait-box"><image class="portrait" :src="userInfo.avatar || '../../static/error/missing-face.png'"></image></view>
				<view class="info-box">
					<view class="username">{{ userInfo.nickname || $t('hea.yk') }}</view>
					<view class="font-size-sm">{{ userInfo.mobile || '' }}</view>
				</view>
				<view class="vip">
					<image v-if="isVip == 0" src="../../static/img/cjyg.png" mode=""></image>
					<image v-if="isVip == 1" src="../../static/img/v1.png" mode=""></image>
					<image v-if="isVip == 2" src="../../static/img/uservip.png" mode=""></image>
				</view>
			</view>
			<view class="config iconfont"><text class="setting iconsetting" @click="navTo('/pages/set/userinfo')"></text></view>
		</view>
		<!-- <view class="vip-box" @click="navTo('/pages/user/upgrade')"><image src="../../static/img/vip.png" mode=""></image></view> -->

		<view class="tt">
			<view class="tt-box" @click="navTo('/pages/user/promotion')">
				<image src="../../static/img/tuiguang.png" class="tt-icon1" mode=""></image>
				<view class="tt-txt">{{ $t('hea.wdtg') }}</view>
				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
			</view>
			<view class="tt-box" @click="navTo('/pages/user/team')">
				<image src="../../static/img/team.png" class="tt-icon1" mode=""></image>
				<view class="tt-txt">{{ $t('hea.wdtd') }}</view>
				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
			</view>
			<view class="tt-box" @click="navTo('/pages/profit/profit')">
				<image src="../../static/img/money.png" class="tt-icon5" mode=""></image>
				<view class="tt-txt">{{ $t('hea.syzx') }}</view>
				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
			</view>
			<view class="tt-box" v-if="isVip != -1" @click="navTo('/pages/user/shareQrCode')">
				<image src="../../static/img/share.png" class="tt-icon1" mode=""></image>
				<view class="tt-txt">{{ $t('hea.fxhy') }}</view>
				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
			</view>
			<view class="tt-box" @click="open()">
				<image src="../../static/img/kefu.png" class="tt-icon1" mode=""></image>
				<view class="tt-txt">{{ $t('hea.lxkf') }}</view>
				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
			</view>
			<view class="tt-box" v-if="isGood">
				倒计时：
				<uni-countdown color="#FFF" background-color="#f5c786" :day="ls.stopTimeD" :hour="ls.stopTimeH" :minute="ls.stopTimeM" :second="ls.stopTimeS" :showColon="false" splitorColor="#FFF"></uni-countdown>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="img"><image src="../../static/img/img009.png" mode=""></image></view>
				<view class="mian">
					<view class="delivery">
						<view class="title">{{ $t('foo.yjwndzzskf') }}</view>
						<image src="../../static/img/img010.png" mode=""></image>
					</view>
					<view class="nocancel">{{ $t('foo.kfwx') }}1: {{ text }}</view>
					<view class="nocancel">{{ $t('foo.kfwx') }}2: {{ text1 }}</view>
					<view class="nocancel">{{ $t('foo.kfwx') }}3: {{ text2 }}</view>
					<view class="comfirm-box">
						<view class="cancel" @click="tocall('1')">{{ $t('foo.fzwx') }}1</view>
						<view class="comfirm" @click="tocall('2')">{{ $t('foo.fzwx') }}2</view>
					</view>
					<view class="comfirm-box">
						<view class="comfirm" @click="tocall('3')">{{ $t('foo.fzwx') }}3</view>
						<view class="cancel" @click="cancel">{{ $t('foo.qx') }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-tabbar :list="tabbar" bg-color="#000" active-color="#FAD6B0" inactive-color="#71614f" change="change"></u-tabbar>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniCopy from '@/utils/uni-copy.js';
import { tabbar } from '@/components/tabbar/tabbar.js';
import { mapState, mapMutations } from 'vuex';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { getApplyList } from '../../api/apply.js';
import { getUserInfo } from '@/api/user.js';
import { timeComputed } from '@/utils/rocessor.js';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
	data() {
		return {
			text: 'BYTCKF21',
			text1: 'BYTCKF33',
			text2: 'BYTCKF67',
			isVip: -1,
			ls: [],
			isGood: false,
			tabbar: [
				{
					iconPath: '../../static/tabBar/home.png',
					selectedIconPath: '../../static/tabBar/home-action.png',
					text: this.$t('hea.sy'),
					pagePath: '/pages/index/index'
				},
				{
					iconPath: '../../static/tabBar/center.png',
					selectedIconPath: '../../static/tabBar/center-action.png',
					text: this.$t('hea.shlb'),
					count: 0,
					pagePath: '/pages/user/applyList'
				},
				{
					iconPath: '../../static/tabBar/user.png',
					selectedIconPath: '../../static/tabBar/user-action.png',
					text: this.$t('hea.wd'),
					pagePath: '/pages/user/user'
				}
			]
		};
	},
	components: {
		uniPopup
	},
	watch: {
		lang(val) {
			console.log(val);
			this.$set(this.tabbar[0], 'text', this.$t('hea.sy'));
			this.$set(this.tabbar[1], 'text', this.$t('hea.shlb'));
			this.$set(this.tabbar[2], 'text', this.$t('hea.wd'));
		}
	},
	computed: {
		...mapState(['lang']),
		...mapState('user', ['hasLogin', 'userInfo', 'baseURL', 'urlFile'])
	},
	onShow() {
		uni.setNavigationBarTitle({
			title: this.$t('foo.wd')
		});
		//判断是否已经登录
		if (this.hasLogin) {
			this.loadBaseData();
		} else {
			let obj = this;
			uni.showModal({
				title: obj.$t('hea.login'),
				content: obj.$t('hea.logininfo'),
				success: e => {
					if (e.confirm) {
						saveUrl();
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
		}
	},
	methods: {
		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
		loadBaseData() {
			getUserInfo({})
				.then(({ data }) => {
					console.log(data, 'UserInfo+++++++++++++++++');
					this.isVip = -1;
					let date =  (new Date()).getTime();
					date = (data.jointime + (48 * 3600))*1000 - date
					console.log(date,'nowtime')
					if (date > 0){
						this.isGood = true;
						this.timeComputed(data.jointime + (48 * 3600), this.ls);
					}else {
						this.isGood = false;
					}
					if (data.activity[0].my_join) {
						if (data.activity[0].my_join.status == '1') {
							this.isVip = 0;
						} else {
							console.log(data.activity[0].my_join.status, '123');
							this.isVip = -1;
						}
					}
					if (data.activity[1].my_join) {
						console.log(222);
						if (data.activity[1].my_join.status == '2') {
							console.log(111);
							this.isVip = 2;
						} else if (data.activity[1].my_join.status == '1') {
							this.isVip = 1;
						} else {
							console.log(data.activity[0].my_join.status);
						}
					}

					this.setUserInfo(data);
				})
				.catch(e => {
					console.log(e);
				});
			getApplyList({
				page: 1,
				limit: 1,
				status: 0
			}).then(({ data }) => {
				console.log(data, '1111');
				this.tabbar[1].count = data.count;
			});
		},
		navTo(url) {
			console.log(url);
			if (!this.hasLogin) {
				// 保存地址
				saveUrl();
				// 登录拦截
				interceptor();
			} else {
				uni.navigateTo({
					url
				});
			}
		},
		open() {
			console.log('点击出现弹窗');
			this.$refs.popup.open();
		},
		// 客服弹窗 - 取消
		cancel() {
			this.$refs.popup.close();
		},
		tocall(type) {
			// #ifdef APP-PLUS
			console.log(type);
			let text = '';
			if (type == '1') {
				text = this.text;
			}
			if (type == '2') {
				text = this.text1;
			}
			if (type == '3') {
				text = this.text2;
			}
			uni.setClipboardData({
				data: text,
				success: e => {
					uni.showToast({
						title: '复制成功！'
					});
				},
				fail(e) {
					uni.showToast({
						title: '复制失败',
						icon: false
					});
					console.log(e);
				}
			});
			// #endif
		},
		// 计算倒计时时间
		timeComputed(da, ar) {
			let obj = this;
			// 计算时间，保存需要多少时间到期
			let stopTime = timeComputed(da);
			console.log(stopTime);
			ar.stopTimeD = stopTime.day;
			ar.stopTimeH = stopTime.hours;
			console.log(ar.stopTimeH);
			ar.stopTimeM = stopTime.minutes;
			ar.stopTimeS = stopTime.seconds;
		}
	}
};
</script>

<style lang="scss">
page,
.container {
	background: #000;
	height: 100%;
}
.user-info-box {
	padding: 40rpx 46rpx 0;
	height: 180rpx;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1;
	.detail {
		height: 130rpx;
		.portrait-box {
			height: 100%;
			.portrait {
				width: 130rpx;
				height: 100%;
				border: 5rpx solid #fff;
				border-radius: 50%;
			}
		}
		.info-box {
			margin-left: 20rpx;
			line-height: 1.5;
			.username {
				font-size: $font-lg + 6rpx;
				height: 100%;
			}
		}
		.vip {
			margin-left: 20rpx;
			width: 122rpx;
			height: 36rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.config {
		font-size: 48rpx;
	}
}
.vip-box {
	width: 690rpx;
	height: 200rpx;
	margin: 60rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}

.tt {
	margin: 0 auto;
	width: 750rpx;
	padding: 40rpx 70rpx;
	background-color: #000;

	.tt-box {
		padding: 20rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		color: #ffffff;
		border-bottom: 1px solid #838383;
		.tt-icon1 {
			width: 42rpx;
			height: 37rpx;
		}
		.tt-icon2 {
			width: 49rpx;
			height: 38rpx;
		}
		.tt-icon3 {
			width: 46rpx;
			height: 40rpx;
		}
		.tt-icon4 {
			width: 40rpx;
			height: 42rpx;
		}
		.tt-icon5 {
			width: 44rpx;
			height: 44rpx;
		}
		.tt-txt {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			margin-left: 36rpx;
			color: #ffffff;
			flex: 1;
		}

		.next-icon {
			width: 16rpx;
			height: 25rpx;
		}
	}

	.border-b {
		border-bottom: 1px solid #f0f0f0;
	}
}
.popup-box {
	width: 522rpx;
	padding-bottom: 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	position: relative;
	.img {
		position: relative;
		top: -56rpx;
		left: 0;
		width: 522rpx;
		height: 132rpx;
		display: flex;
		justify-content: center;
		image {
			border-radius: 20rpx 20rpx 0 0;
			width: 450rpx;
			height: 132rpx;
		}
	}

	.mian {
		margin-top: -44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// padding: 32rpx 32rpx;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		text-align: center;

		.delivery {
			font-size: 40rpx;
			color: #333333;
			display: flex;
			align-items: center;
			flex-direction: column;
			.title {
			}
			image {
				margin-top: 48rpx;
				width: 172rpx;
				height: 160rpx;
			}
		}

		.nocancel {
			font-size: 32rpx;
			color: #333333;
			margin-top: 14rpx;
		}

		.comfirm-box {
			margin-top: 52rpx;
			display: flex;
			// margin-bottom: 32rpx;

			// justify-content: space-around;
			.cancel {
				margin-left: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 197rpx;
				height: 74rpx;
				border: 1px solid #dcc786;
				border-radius: 38rpx;

				font-size: 32rpx;
				color: #605128;
			}

			.comfirm {
				margin-left: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 197rpx;
				height: 74rpx;
				background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
				border-radius: 38px;
				font-size: 32rpx;
				color: #605128;
			}
		}
	}
}
</style>