xmt/pages/user/user.vue

<template>
	<view class="content">
		<view class="top" style="position: relative;">
			<view class="avater">
				<image :src="userInfo.avatar" class="avater-img" mode="" v-if="userInfo.avatar"></image>
				<image src="../../static/error/missing-face.png" mode="" v-else class="avater-img"></image>
			</view>
			<view class="name-box">
				<view class="name-top">
					{{userInfo.nickname || '游客'}}<text v-if="userInfo && userInfo.level_name && userInfo.level > 1">{{'('+ userInfo.level_name +')'}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="joinus" @click="navTo('/pages/user/registerMember')">
			<image src="../../static/img/join-us.png" mode=""></image>
			<view class="left-tit">
				注册企业会员 加入成为自媒体
			</view>
			<view class="join-btn">
				注册会员
			</view>
		</view> -->
		<view class="btm-box flex" @click="downFile" style="margin-top: -20rpx;">
			<image src="../../static/icon/u-0.png" mode="widthFix" class="left-img"></image>
			<view class="">台企联入会申请</view>
			<image src="../../static/icon/goto.png" mode="widthFix" class="right-img"></image>
		</view>
		<view class="btm-box flex" @click="navTo('/pages/user/mydy')">
			<image src="../../static/icon/u-1.png" mode="widthFix" class="left-img"></image>
			<view class="">我的订阅</view>
			<image src="../../static/icon/goto.png" mode="widthFix" class="right-img"></image>
		</view>
		
		<view class="btm-box flex" @click="navTo('/pages/user/mypl')">
			<image src="../../static/icon/u-2.png" mode="widthFix" class="left-img"></image>
			<view class="">我的评论</view>
			<image src="../../static/icon/goto.png" mode="widthFix" class="right-img"></image>
		</view>
		<view class="btm-box flex" @click="navTo('/pages/user/mymsg')">
			<image src="../../static/icon/u-3.png" mode="widthFix" class="left-img"></image>
			<view class="">回复我的</view>
			<image src="../../static/icon/goto.png" mode="widthFix" class="right-img"></image>
		</view>
		<view class="btm-box flex" @click="openKf">
			<image src="../../static/icon/u-4.png" mode="widthFix" class="left-img"></image>
			<view class="">联系客服</view>
			<image src="../../static/icon/goto.png" mode="widthFix" class="right-img"></image>
		</view>
		<view class="btm-box flex" @click="navToQy()">
			<image src="../../static/icon/u-5.png" mode="widthFix" class="left-img"></image>
			<view class="" v-if="qyzc.state !=2">企业注册</view>
			<view class="" v-else>
				企业设置
			</view>
			<image src="../../static/icon/goto.png" mode="widthFix" class="right-img"></image>
		</view>
		<view class="btm-box flex" @click="navTo('/pages/set/set')">
			<image src="../../static/icon/u-6.png" mode="widthFix" class="left-img"></image>
			<view class="">设置</view>
			<image src="../../static/icon/goto.png" mode="widthFix" class="right-img"></image>
		</view>
		<uni-popup ref="popupkf" 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">已经为您定制专属客服</view>
						<image src="../../static/img/img010.png" mode=""></image>
					</view>
					<view class="">
						
					</view>
					<view class="nocancel">会员部主任</view>
					<view class="nocancel">林飞:13957687556<text class="copy-phone" @click="comfirm('13957687556')">复制</text></view>
					<view class="nocancel">新华社</view>
					<view class="nocancel">彭芬 :13883824048<text class="copy-phone" @click="comfirm('13883824048')">复制</text></view>
					<view class="nocancel">技术人员</view>
					<view class="nocancel">陈志翱:15381835932<text class="copy-phone" @click="comfirm('15381835932')">复制</text></view>
					<!-- <view class="comfirm-box">
						<view class="cancel" @click="cancel">取消</view>
						<view class="comfirm" @click="comfirm(text)">复制微信</view>
					</view> -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		downFile
	} from '@/api/index.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		getUserInfo,
		logout,
		enterprise
	} from '@/api/user.js';
	// #ifdef H5
	import {
		weixindata
	} from '@/utils/wxAuthorized';
	// #endif
	export default {
		data() {
			return {
				name:'',
				signDate:'',
				id:0,
				is_over:0,
				newTime: 0,
				money: '',
				mid: '',
				text: 'fen57698762',//客服
				qyzc:{state:3},//企业注册
			}
		},
		filters: {
			time(val) {
				let str = '';
				// console.log(val)
				if (val) {
					let date = new Date(val * 1000);
					let Y = date.getFullYear();
					let M = date.getMonth() + 1 > 9 ? (date.getMonth()+1) : '0' + (date.getMonth()+1);
					let D = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
					str = Y + '年' + M + '月' + D + '日';
				}
				return str;
			},
		},
		onShow() {
			enterprise().then(res=>{
				if(res.msg == '未发起企业认证') {
					
				}else {
					this.qyzc = res.data
				}
			})
			console.log(this);
			let obj = this
			//	判断是否已经登录
			if (this.hasLogin) {
				this.loadBaseData();
			} else {
				saveUrl();
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
			}
		},
		onReady() {
			console.log(99999)
			// detail_training({
			// 	id:this.id,
			// }).then(({data}) => {
			// 	console.log(999,data)
			// 	this.name = data.name
			// 	this.signDate = data.add_time
			// 	this.is_over = data.is_over
			// })
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo']),
			...mapState(['weichatObj']),
		},
		methods: {
			...mapMutations('user', ['setUserInfo','logout']),
			// 登出
			loginout() {
				let obj = this;
				uni.showModal({
					content: '确定要退出登录么',
					success: e => {
						if (e.confirm) {
							logout({}).then(e => {
									obj.logout();
									uni.switchTab({
										url: '/pages/index/index'
									})
								})
								.catch(e => {
									console.log(e);
								});
						}
					}
				});
			},
			loadBaseData() {
				getUserInfo({}).then(({
					data
				}) => {
					this.setUserInfo(data);
				});
				// #ifdef H5
				weixindata();
				// #endif
			},
			navTo(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			navToQy(url){
			if(this.qyzc.state ==1){
				this.$api.msg('认证审核中')
			}else if(this.qyzc.state ==2){
				uni.navigateTo({
					url:'/pages/set/setinfo'
				})
			}else{
				uni.navigateTo({
					url:'/pages/user/registerMember'
				})
			}
			},
			// 文件下载
			downFile(){
				downFile().then(res=>{
					if(res.status==200){
						window.location.href=res.data[0].url
					}
				})
			},
			// 打开客服弹窗
			openKf() {
				this.$refs.popupkf.open()
			},
			cancel() {
				this.$refs.popupkf.close();
			},
			comfirm(text) {
				console.log(text);
				const result = this.uniCopy(text);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
				this.$refs.popupkf.close();
			},
			uniCopy(content) {
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						console.log('success');
						return true;
					}
				});
				//#endif
			
				/**
				 * H5端的复制逻辑
				 */
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) {
					//为了兼容有些浏览器 queryCommandSupported 的判断
					// 不支持
					return false;
				}
				let textarea = document.createElement('textarea');
				textarea.value = content;
				textarea.readOnly = 'readOnly';
				document.body.appendChild(textarea);
				textarea.select(); // 选择对象
				textarea.setSelectionRange(0, content.length); //核心
				let result = document.execCommand('copy'); // 执行浏览器复制命令
				textarea.remove();
				return result;
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;
		height: auto;
		background: #fff;
	}
	.content {
		line-height: 1.5;
		background-color: #fff;
		height: 100%;
		.top {
			width: 750rpx;
			height: 524rpx;
			// background-color: #fa7e67;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding-left: 55rpx;
			align-items: center;
			justify-content: center;
			background-image: url(../../static/img/user-bg.png);
			background-size: 100% 100%;
			.avater {
				width: 150rpx;
				height: 150rpx;
				// margin-right: 28rpx;

				.avater-img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.name-box {
				// flex: 1;
				padding-top: 25rpx;
				.name-top {
					font-size: 42rpx;
					font-weight: 400;
					margin-bottom: 15rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
				}
				.name-bottom{
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					// justify-content: center;
					
					.nameInfo{
						color: #FFFFFF;
						padding: 6rpx 16rpx;
						border: 1rpx solid #FFFFFF;
						border-radius: 12rpx;
						// background-color: pink;
					}
				}

				.name-footbox {
					.name-foot {
						text-align: center;
						font-size: 22rpx;
						font-weight: 400;
						color: #FFFFFF;
						background: rgba(255, 255, 255, 0.2);
						border: 1px solid #FFFFFF;
						border-radius: 20rpx;
						padding: 3rpx 13rpx;
					}
				}

			}
		}

		.center-box {
			width: 687rpx;
			// height: 235px;
			background: #FFE8E8;
			border-radius: 16rpx;
			margin: -90rpx auto 0;

			.center-top {
				width: 687rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 0 0;
				display: flex;
				align-items: center;
				padding-left: 30rpx;

				.top-left {
					width: 126rpx;
					line-height: 32rpx;
					text-align: center;
					background: linear-gradient(0deg, #C90F1B, #F14D33);
					font-size: 22rpx;
					font-weight: 400;
					color: #FFFFFF;
					border-radius: 20rpx;
					margin-right: 10rpx;
				}

				.top-right {
					font-size: 22rpx;
					font-weight: 400;
					color: #CB151D;
				}
			}

			.center-foot {
				height: 155rpx;
				display: flex;

				.foot-list {
					flex: 1;
					text-align: center;
					padding-top: 20rpx;

					.list-top {
						font-size: 39rpx;
						font-weight: 400;
						color: #CB141D;
						line-height: 58rpx;
					}

					.list-foot {
						font-size: 39rpx;
						font-weight: 400;
						color: #666666;
						line-height: 58rpx;
					}
				}
			}
		}

		.tt {
			display: flex;
			flex-wrap: wrap;
			padding-left:32rpx;
			.tt-box {
				width: 206rpx;
				height: 206rpx;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 35rpx;
				margin-bottom: 30rpx;
				image {
					width: 64rpx;
					height: 64rpx;
				}
				.tt-txt {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #5A5A74;
					padding-top: 35rpx;
				}
			}

		}
	}
	.nav-wrapper {
		width: 678rpx;
		// height: 560rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 24rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		margin: 32rpx auto 0;
		color: #555555;
		.nav-item {
			height: 115rpx;
			border-bottom: 1rpx #F6F6F6 solid;
			&:last-of-type {
				border-bottom: none;
			}
			justify-content: space-between;
			align-items: center;
			padding: 0 36rpx 0 40rpx;
			.item-left {
				
				align-items: center;
				image {
					// background-color: red;
				}
				.img1 {
					width: 34rpx;
					height: 34rpx;
					margin-right: 21rpx;
				}
				.img2 {
					width: 36rpx;
					height: 32rpx;
					margin-right: 19rpx;
				}
				.img3 {
					width: 28rpx;
					height: 36rpx;
					margin-right: 25rpx;
				}
				.img4 {
					width: 36rpx;
					height: 28rpx;
					margin-right: 19rpx;
				}
				.title {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #555555;
				}
			}
			.item-right {
				line-height: 115rpx;
			}
		}
	}
	.sy-box {
		position: absolute;
		bottom: 80rpx;
		// bottom: 105rpx;
		// height: 148rpx;
		width: 750rpx;
	
		// background-color: #bfa;
		.sy-item {
			flex-grow: 1;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
	
			.sy-item-val {
				font-size: 50rpx;
				font-weight: bold;
			}
		}
	}
	.btm-box {
		align-items: center;
		width: 706rpx;
		height: 104rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 28rpx;
		margin: 20rpx auto;
		position: relative;
		padding: 0 33rpx 0 24rpx;
		font-size: 29rpx;
		font-weight: bold;
		color: #5d5d5d;
		.left-img {
			width: 40rpx;
		}
		.right-img {
			width: 14rpx;
		}
		view {
			flex-grow: 1;
			padding-left: 12rpx;
		}
	}
	.joinus {
		width: 744rpx;
		height: 134rpx;
		position: relative;
		// margin: ;
		// background-color: red;
		margin: -134rpx auto 0;
		image {
			width: 744rpx;
			height: 134rpx;
		}
		.left-tit {
			width: 490rpx;
			height: 130rpx;
			line-height: 130rpx;
			position: absolute;
			padding-left: 50rpx;
			top:0;
			left: 0;
			font-size: 31rpx;
			font-weight: 400;
			color: #FFFBF3;
		}
		.join-btn {
			font-size: 22rpx;
			font-weight: bold;
			color: #784244;
			width: 170rpx;
			height: 60rpx;
			line-height: 60rpx;
			position: absolute;
			top: 35rpx;
			right: 58rpx;
			// background-color: #fff;
			border-radius: 30rpx;
			padding-left: 20rpx;
		}
	}
	.popup-box {
		width: 522rpx;
		height: 605rpx;
		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;
				.copy-phone {
					display: inline-block;
					padding: 0 10rpx;
					border: 1rpx solid #f1dba8;
					border-radius: 10rpx;
					color:#e4c77d;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
	
			.comfirm-box {
				margin-top: 10rpx;
				display: flex;
				// margin-bottom: 32rpx;
	
				// justify-content: space-around;
				.cancel {
					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>