uniapp/pagesHome/account/index.vue

<template>
	<home-frame @toPath="toPath">
		<view class="main">
			<view class="one">
				<view class="one_1">
					<image class="image"
						:src="userInfo.logo_url&&userInfo.logo_url.length>0?userInfo.logo_url[0].url:''" mode="">
					</image>
				</view>
				<view class="one_2">
					<view class="name">
						{{userInfo.name||'暂无'}}
					</view>
					<view class="id">
						<uni-icons type="phone-filled" size="15" color="var(--rgbfff)"></uni-icons>
						:{{userInfo.phone||'暂无'}}
					</view>
					<view class="vip" v-if="userInfo&&userInfo.is_vip=='1'">
						<uni-icons type="vip-filled" size="15" color="var(--rgbffd)"></uni-icons>
						:{{userInfo.vip_end_time}}
					</view>
				</view>
				<view class="one_3" v-if="!userInfo._id">
					<button size="mini" @tap="toLogin()">注册/登录</button>
				</view>
			</view>
			<view class="two">
				<view class="list" v-for="(item,index) in basicInfo.account_btn" :key="index" @tap="toCommon(item)">
					<image class="image" :src="item.img_url&&item.img_url.length>0?item.img_url[0].url:''" mode="">
					</image>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="thr">
				<span @tap="toMark(basicInfo.customer_mobile)">客服电话：{{basicInfo.customer_mobile}}</span>
			</view>
		</view>
	</home-frame>
</template>

<script>
	import homeFrame from "../components/home-frame.vue";
	export default {
		components: {
			homeFrame
		},
		data() {
			return {
				// 基本信息
				basicInfo: {},
				// 用户信息
				userInfo: {},
			};
		},
		onLoad() {

		},
		onShow() {
			const that = this;
			that.searchBasic();
		},
		methods: {
			searchBasic() {
				const that = this;
				uni.getStorage({
					key: 'basicInfo',
					success: (res) => {
						let data = res.data
						data.account_btn = data.account_btn.sort((a, b) => {
							return a.sort - b.sort
						});
						that.$set(that, `basicInfo`, data);
						that.search()
					}
				})
			},
			search() {
				const that = this;
				let user = {
					name: that.basicInfo.name,
					phone: 'test',
					logo_url: that.basicInfo.logo_url
				}
				uni.getStorage({
					key: 'token',
					success: async (res) => {
						let arr = that.$jwt(res.data);
						let aee = await that.$api(`user/${arr._id}`, 'GET');
						if (aee.errcode == '0') {
							user._id = aee.data._id;
							user.id = aee.data.id;
							user.phone = aee.data.phone;
							if (aee.data && aee.data.nick_name) user.name = aee.data.nick_name;
							if (aee.data && aee.data.logo_url) user.logo_url = aee.data.logo_url;
							if (aee.data && aee.data.is_vip) user.is_vip = aee.data.is_vip;
							if (aee.data && aee.data.vip_end_time) user.vip_end_time = aee.data.vip_end_time;
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
				that.$set(that, `userInfo`, user)
			},
			// 注册,登录
			toLogin() {
				uni.navigateTo({
					url: '/pagesAccount/login/index'
				})
			},
			// 功能按钮跳转
			toCommon(e) {
				const that = this;
				if (e.is_jump == '0') {
					if (e.nature == 'share') {
						that.share()
					} else if (e.nature == 'logout') {
						uni.removeStorage({
							key: 'token',
							success: function(res) {
								uni.showToast({
									title: '退出登录成功',
									icon: 'none'
								})
								that.searchBasic()
							},
							fail: (err) => {
								console.log(err);
							}
						});
					}

				} else if (e.is_jump == '1') {
					that.toPath({
						type: e.type,
						route: e.route
					})
				}
			},
			// 分享
			share() {
				const that = this;
				let system = that.$config.system
				let basicInfo = that.basicInfo;
				if (system.uniPlatform == 'app') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: that.$config.app_url,
						title: system.appName,
						summary: "我正在玩自由天空，赶紧和我一起体验吧",
						imageUrl: basicInfo.logo_url && basicInfo.logo_url.length > 0 ? basicInfo.logo_url[0].url :
							'',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
							uni.showToast({
								title: JSON.stringify(err),
								icon: 'none'
							})
						}
					});
				} else if (system.uniPlatform == 'mp-weixin') {
					uni.showToast({
						title: '小程序未开通分享功能！',
						icon: "none"
					})
				}
			},
			// 跳转页面
			toPath(e) {
				let url = `/${e.route}`;
				if (e.type == '0') uni.navigateTo({
					url
				})
				else if (e.type == '1') uni.redirectTo({
					url
				})
				else if (e.type == '2') uni.reLaunch({
					url
				})
				else if (e.type == '3') uni.switchTab({
					url
				})
			},
			// 拨打电话
			toMark(e) {
				uni.makePhoneCall({
					phoneNumber: e
				})
			}
		},
	};
</script>

<style lang="scss">
	.main {
		position: relative;
		background-color: var(--rgb000);
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 92vh;
		overflow-y: auto;

		.one {
			display: flex;
			padding: 2vw;
			margin: 0 0 10px 0;

			.one_1 {
				width: 80px;
				height: 80px;
				overflow: hidden;
				margin: 0 2vw 0 0;

				.image {
					width: 100%;
					height: 80px;
					overflow: hidden;
					border-radius: 90%;
				}
			}

			.one_2 {
				flex-grow: 1;
				color: var(--rgbfff);
				font-size: 16px;
				font-weight: bold;
				padding: 2vw 0;
				overflow: hidden;

				.name {

					font-size: 18px;
					margin: 0 0 1vw 0;
					background: linear-gradient(to bottom right, var(--rgbfa4), var(--rgbfff));
					color: transparent;
					background-clip: text;
					-webkit-background-clip: text;

				}

				.vip {
					color: var(--rgbffd);
				}

			}

			.one_3 {
				padding: 4vw 0;
				overflow: hidden;

				button {
					background-color: var(--rgbfa4);
					color: var(--rgbfff);
				}
			}
		}

		.two {
			display: flex;
			// justify-content: space-around;
			flex-wrap: wrap;
			padding: 0 2vw;

			.list {
				width: 22%;
				height: 74px;
				margin: 0 10px 10px 0;
				text-align: center;
				background: linear-gradient(to bottom right, var(--rgb000), var(--rgbfa4));
				border: 1px solid var(--rgb111);
				border-radius: 5px;

				.image {
					width: 20px;
					height: 20px;
					margin: 3vw 0 2vw 0;
				}

				.name {
					color: var(--rgbfff);
					font-size: 14px;
				}
			}

			.list:nth-child(4n) {
				margin: 0 0 10px 0;
			}
		}

		.thr {
			position: absolute;
			width: 100%;
			bottom: 5px;
			text-align: center;
			color: var(--rgbfff);
			font-size: 14px;
		}
	}
</style>