cunShiGuan/pages/user/index.vue

<template>
	<view class="body">
		<view class="nabBar" style="background-image: url('/static/image/矩形 13.png'); background-size: cover">
			<u-navbar :placeholder="true" :leftIconSize="0"></u-navbar>
		</view>
		<view class="section_1">
			<view class="section_2">
				<view class="box_20">
					<view class="group_16" style="background-image: url('/static/image/组 129.png'); background-size: cover">
						<image
							src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/268e511f88af4703aeaf741b83b79569_mergeImage.png"
							class="image_22"
						></image>
						<view class="text-group_15">
							<text lines="1" class="text_2">白云下的棉絮</text>
							<text lines="1" class="text_3">村民证信息</text>
						</view>
						<view class="section_3">
							<view class="image-text_44">
								<u-icon name="edit-pen" color="#FFFFFF"></u-icon>

								<text lines="1" class="text-group_12">资料编辑</text>
							</view>
						</view>
					</view>
				</view>
				<view class="box_21">
					<view class="box_22">
						<view class="image-wrapper_1" @click="jiFenBtn">
							<image src="/static/image/jf.png" class="image_1"></image>
						</view>
						<view class="image-wrapper_2">
							<image src="/static/image/tg.png" class="image_2"></image>
						</view>
					</view>
				</view>
				<view class="box_2">
					<view class="group_17">
						<view class="group_18">
							<view class="box_23">
								<view class="group_3">
									<view class="image-text_34">
										<image src="/static/image/余额.png" class="label_1"></image>
										<text lines="1" class="text-group_1">我的收藏</text>
									</view>
									<uni-icons type="forward" size="24" color="#666666"></uni-icons>
								</view>
							</view>
						</view>
						<view class="fenge"></view>
						<view class="group_19">
							<view class="group_3">
								<view class="image-text_35">
									<image src="/static/image/账期(3).png" class="label_2"></image>
									<text lines="1" class="text-group_2">邀请好友</text>
								</view>
								<uni-icons type="forward" size="24" color="#666666"></uni-icons>
							</view>
						</view>
						<view class="fenge"></view>
						<view class="group_20">
							<view class="group_3">
								<view class="image-text_35">
									<image src="/static/image/账期 拷贝.png" class="label_2"></image>
									<text lines="1" class="text-group_2">我的投稿</text>
								</view>
								<uni-icons type="forward" size="24" color="#666666"></uni-icons>
							</view>
						</view>
						<view class="fenge"></view>
						<view class="group_21">
							<view class="group_3">
								<view class="image-text_35">
									<image src="/static/image/账期(1).png" class="label_2"></image>
									<text lines="1" class="text-group_2">我的好友</text>
								</view>
								<uni-icons type="forward" size="24" color="#666666"></uni-icons>
							</view>
						</view>
						<view class="fenge"></view>
						<view class="group_22">
							<view class="group_3">
								<view class="image-text_35">
									<image src="/static/image/账期(2).png" class="label_2"></image>
									<text lines="1" class="text-group_2">积分日志</text>
								</view>
								<uni-icons type="forward" size="24" color="#666666"></uni-icons>
							</view>
						</view>
						<view class="fenge"></view>
						<view class="group_23">
							<view class="group_3">
								<view class="image-text_35">
									<image src="/static/image/账期.png" class="label_2"></image>
									<text lines="1" class="text-group_2">加入我们</text>
								</view>
								<uni-icons type="forward" size="24" color="#666666"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
var _token = '';
var _this;

import { uploadImage } from '@/service/api/common.js';
export default {
	components: {},
	data() {
		return {
			isLogin: false,
			show: false,
			username: '未登录',
			face: '',
			user: {
				nickname: '未登录',
				id: '未登录'
			},
			avatarUrl: '',
			wxnickname: '',
			items: [
				[1, '', '荣誉', '/pages/user/medal'],
				[0, '', '好友', '/pages/user/friends'],
				[0, '', '积分', '/pages/user/scorelog'],
				[0, '', '传承值', '']
			],
			getFace: false,
			userdata: {
				friendsLists: [],
				friendsTotal: 0,
				user: {
					score: '0',
					exp: '0'
				}
			}
		};
	},
	onShow() {
		/* 调用userInfo()从本地获取用户信息 */
		this.user = this.$common.userInfo();

		if (this.user && this.user.nickname.indexOf('微信') >= 0) {
			this.getFace = true;
		}
	},
	onLoad(option) {
		/* 来到我的页面判断用户是否登录 */
		_this = this;
		this.user = this.$common.userInfo();
		console.log(this.user);
		// if (this.user === 'undefined' || this.user === '' || this.user === [] || this.user === null) {
		// 	/* 跳转到登录页 */
		// 	this.$common.toLogin();
		// } else {
		// 	/* 刷新 */
		// 	this.$api.refreshUser({}, (val) => {
		// 		console.log(val);
		// 		if (val.code == 401) {
		// 			this.$common.navigateTo('/pages/user/login');
		// 			return;
		// 		}

		// 		this.user = val.data.user;
		// 		this.avatarUrl = this.user.avatar;
		// 		this.auth = val.data.auth;
		// 		this.$db.set('user', val.data.user);
		// 		this.$db.set('auth', val.data.auth);
		// 		this.$api.getWuyuanUser({}, (val) => {
		// 			console.log(val);
		// 			this.userdata = val.data;
		// 		});
		// 	});
		// 	this.isLogin = true;
		// }
	},
	methods: {
		jiFenBtn() {
			uni.navigateTo({
				url: '/user_fenbao/jiFen/jiFen'
			});
		}
	}
};
</script>
<style>
.nabBar {
	height: 500rpx;
}
.u-navbar--fixed.data-v-95dec1ae {
	opacity: 0;
}
.uni-icons.data-v-a2e81f6e {
	margin-right: 40rpx;
	line-height: 100rpx;
}
.fenge {
	width: 615rpx;
	height: 1rpx;
	margin: auto;
	background: #ededed;
}
.section_1 {
	display: flex;
	flex-direction: column;
	width: 750rpx;
}
.section_2 {
	background-color: rgba(248, 248, 248, 1);
	width: 749rpx;
	display: flex;
	flex-direction: column;
}
.box_21 {
	width: 749rpx;
	height: 200rpx;
	/* margin-top: 65rpx; */
	display: flex;
	flex-direction: column;
}
.box_22 {
	width: 683rpx;
	height: 95rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 65rpx 0 0 32rpx;
}
.image-wrapper_1 {
	box-shadow: 8px 13px 27px 0px rgba(165, 165, 165, 0.39);
	background-color: rgba(250, 245, 241, 1);
	border-radius: 10rpx;
	height: 95rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
}
.image_1 {
	width: 330rpx;
	height: 95rpx;
}
.image-wrapper_2 {
	box-shadow: 8px 13px 27px 0px rgba(165, 165, 165, 0.39);
	background-color: rgba(250, 245, 241, 1);
	border-radius: 10rpx;
	height: 95rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
}
.image_2 {
	width: 330rpx;
	height: 95rpx;
}
.box_2 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 20rpx;

	display: flex;
	flex-direction: column;
	width: 690rpx;
	margin: -1rpx 0 0 29rpx;
}
.group_17 {
	width: 749rpx;

	margin-left: -29rpx;
	display: flex;
	flex-direction: column;
}
.group_18 {
	width: 749rpx;
	height: 104rpx;
	display: flex;
	flex-direction: row;
}
.box_23 {
	position: relative;
	width: 749rpx;
	height: 104rpx;
	display: flex;
	flex-direction: row;
}

.group_3 {
	width: 749rpx;
	height: 104rpx;
	display: flex;
	justify-content: space-between;
}
.image-text_34 {
	width: 173rpx;
	height: 44rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 28rpx 0 0 53rpx;
}
.label_1 {
	width: 44rpx;
	height: 44rpx;
}
.text-group_1 {
	width: 118rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: rgba(0, 0, 0, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin-top: 9rpx;
}

.group_19 {
	width: 749rpx;
	height: 105rpx;
	margin-top: 1rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.box_4 {
	width: 749rpx;
	height: 104rpx;
	flex-direction: row;
	display: flex;
}
.image-text_35 {
	width: 174rpx;
	height: 44rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 28rpx 0 0 52rpx;
}
.label_2 {
	width: 44rpx;
	height: 44rpx;
}
.text-group_2 {
	width: 118rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: rgba(0, 0, 0, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin-top: 13rpx;
}

.group_20 {
	width: 749rpx;
	height: 105rpx;
	margin-top: 1rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.group_21 {
	width: 749rpx;
	height: 106rpx;
	margin-top: 1rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.group_22 {
	width: 749rpx;
	height: 109rpx;
	margin-top: 1rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.group_23 {
	width: 749rpx;
	height: 104rpx;
	margin-top: -3rpx;
	display: flex;
	flex-direction: row;
}
.box_20 {
	display: flex;
	flex-direction: column;
	width: 679rpx;
	position: absolute;
	left: 35rpx;
	top: 147rpx;
	box-shadow: 8px 13px 27px 0px rgba(211, 245, 251);
	background-color: rgba(211, 245, 251);
}
.group_16 {
	width: 679rpx;
	height: 388rpx;
	flex-direction: row;
	display: flex;
}
.image_22 {
	width: 120rpx;
	height: 120rpx;
	margin: 52rpx 0 0 39rpx;
}
.text-group_15 {
	width: 243rpx;
	height: 82rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 70rpx 0 0 22rpx;
}
.text_2 {
	width: 243rpx;
	height: 40rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 42rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 42rpx;
}
.text_3 {
	width: 120rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin-top: 19rpx;
}
.section_3 {
	width: 176rpx;
	height: 52rpx;
	background-color: #dfc09f;
	border-radius: 30rpx 0 0 30rpx;
	display: flex;
	flex-direction: row;
	margin: 69rpx 1rpx 0 82rpx;
}
.image-text_44 {
	width: 127rpx;
	height: 26rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 11rpx 0 0 30rpx;
}

.text-group_12 {
	width: 95rpx;
	height: 22rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	white-space: nowrap;
	line-height: 24rpx;
	margin-top: 3rpx;
	margin-left: 5rpx;
}
</style>