zhongtuanCatering/pages/index/user.vue

<template>
	<s-layout title="我的" tabbar="/pages/index/user" navbar="custom" :bgStyle="template.style?.background"
		:navbarStyle="template.style?.navbar" onShareAppMessage :showFloatButton="true">
		<!-- 登录信息 -->
		<view class="myBox">
			<view class="box flex justify-start align-items flex-column">
				<scroll-view @touchmove.prevent scroll-y="true" :show-scrollbar="true"
					class="con-center flex flex-start flex-column">
					<view class="header flex align-items">
						<view class="hea-left flex align-items">
							<image :src="avatar" mode="" class="avatar" @click="clickTop"></image>
							<view class="first-header flex justify-center align-items">
								<view class="flex flex-column" @click="clickTop">
									<!-- <view
										style="display: flex;align-items: center;;margin-bottom: 20rpx;font-weight: 800;font-size: 34rpx;color: #181818;">
										<view>{{ userName }}</view>
										<view style="padding-left: 20rpx; height: 35rpx;">
											<image v-if="shop_auth_info.auth_status == 1" src="/static/my/owenr.png" mode=""
												style="width: 35rpx; height: 35rpx;">
											</image>
										</view>
									</view> -->
									<view style="color: #909090; font-size: 24rpx;">{{ bio || '带着热爱，在搭子圈里撒野~'}}</view>
								</view>
								<image src="/static/goods-empty.png" mode=""
									style="width: 50rpx; height: 50rpx;position: absolute;right: 0;" @click="clickTop">
								</image>
							</view>
						</view>
						<!-- <view class="hea-right flex flex-column align-items" @click="out()" v-if="token">
							<image src="../../static/my/Leave.png" mode="" style="width: 64rpx; height: 64rpx;"></image>
							<span>退出登录</span>
						</view> -->
					</view>

					
		
					<view style="height: 80rpx;width: 100%;"></view>
				</scroll-view>
		
		
		
				<!-- 授权登录 -->
				<u-popup :show="showPopup" mode="center" round="20"
					:customStyle="{ 'width': '644rpx', 'height': '426rpx','position': 'relative'}" :closeable="false"
					@close="close">
					<!-- 隐私协议 -->
					<lsl-protocol-popup title="用户协议和隐私政策提示" predesc="感谢您使用洛阳多样青春搭+。为保护您的个人信息安全，在您洛阳多样青春搭+的服务前，请务必仔细阅读"
						subdesc='以了解详细内容。如您同意，请点击“同意并继续”并开始使用我们的服务。'
						top_img='https://naweigetetest2.hschool.com.cn/dyqc/dyqclogo.png' color="#C9935C" hideTabBar="true"
						:onNeed='false' :other="other" :title_style="'padding-top:60rpx;'"
						open_type='agreePrivacyAuthorization' @agree_call="miniLogin()">
					</lsl-protocol-popup>
		
					<view class="popup">
						<img class="img_shouquan" src="https://naweigetetest2.hschool.com.cn/dyqc/shou1.png" alt="" />
						<text id="txt2">授权成功后即可参加多种户外活动</text>
						<button class="texbut" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
							授权登录
							<!-- <u-icon label="" labelColor="#fff" size="28" name="/static/wechat1.png"></u-icon> -->
						</button>
					</view>
				</u-popup>
		
				<!-- <u-toast ref="uToast"></u-toast> -->
			</view>
		
		</view>
		
		<!-- <s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
      <s-block-item :type="item.type" :data="item.data" :styles="item.style" />
    </s-block> -->
	</s-layout>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import {
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';

	// 隐藏原生tabBar
	uni.hideTabBar({
		fail: () => {},
	});

	const template = computed(() => sheep.$store('app').template.user);
	const isLogin = computed(() => sheep.$store('user').isLogin);

	onShow(() => {
		sheep.$store('user').updateUserData();
	});

	onPullDownRefresh(() => {
		sheep.$store('user').updateUserData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});

	onPageScroll(() => {});
</script>

<style lang="scss" scoped>
	.myBox {
		position: fixed;
		padding-top: 200rpx;
		width: 750rpx;
		min-height: 100vh;
		background-color: #F5F5F5;
		// background-image: url("https://naweigetetest2.hschool.com.cn/dyqc/bgx2.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}
	
	.box {
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	
		// padding-top: env(safe-area-inset-top);
		/* 顶部安全距离 */
		.backImg {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}
	
	.w-100 {
		width: 100%;
	}
	
	.flex {
		display: flex;
	}
	
	.flex-start {
		align-items: flex-start;
	}
	
	.justify-center {
		justify-content: center;
	}
	
	.align-items {
		align-items: center;
	}
	
	.flex-column {
		flex-flow: column;
	}
	
	.justify-start {
		justify-content: start;
	}
	
	
	.con-center {
		height: 1314rpx;
	
		.header {
			width: 690rpx;
			justify-content: space-between;
			margin: 0 auto;
	
			.hea-left {
				width: 100%;
				position: relative;
	
				.avatar {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}
	
	
	
				.first-header {
					margin-left: 18rpx;
	
					span {
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 34rpx;
						color: #181818;
						// line-height: 26rpx;
					}
				}
	
				.line {
					width: 320rpx;
					height: 1rpx;
					background: #BABDC7;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					margin: 19rpx 0 7rpx 0;
				}
	
				.red {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 26rpx;
					color: #FF4949;
					line-height: 32rpx;
				}
			}
	
			.hea-right {
				// width: 20%;
			}
	
			.line {}
	
		}
	}
	
	.top_box {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 32rpx;
	
		view {
			background: #FFFFFF;
			border-radius: 18rpx;
			width: 330rpx;
			padding: 20rpx 0;
	
			image {
				width: 70rpx;
				height: 70rpx;
				margin-left: 30rpx;
			}
	
			span {
				margin-left: 20rpx;
			}
	
			.p1 {
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #323232;
			}
	
			.p2 {
				width: 100%;
				margin-top: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #9C9C9C;
			}
		}
	
		.top_box_right {
			margin-left: 30rpx;
		}
	}
	
	.first {
		width: 690rpx;
		padding-bottom: 32rpx;
		margin-top: 52rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	
		.centerBox {
			flex-wrap: wrap;
	
			view {
				width: 120rpx;
				margin: 42rpx 90rpx 0 0;
				position: relative;
	
				.numberPos {
					position: absolute;
					right: 0%;
					top: 0;
				}
	
				.text {
					font-weight: 500;
					font-size: 30rpx;
					color: #181818;
				}
			}
		}
	}
	
	.popup {
	
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-left: 73rpx;
		padding-right: 73rpx;
	
		.img_shouquan {
			position: absolute;
			width: 680rpx;
			height: 857rpx;
			left: -25rpx;
			top: -390rpx;
		}
	
	
		#txt2 {
			text-align: center;
			margin-top: 200rpx;
			font-size: 28rpx;
			color: #525252;
			margin-bottom: 60rpx;
			position: relative;
			font-weight: 500;
		}
	
		.texbut {
			width: 317rpx;
			height: 90rpx;
			border-radius: 45rpx;
			background: #323232;
			font-size: 34rpx;
			color: #fff;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.jifen {
		width: 690rpx;
		height: 86rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 41rpx;
		justify-content: space-between;
	
		.left {
			margin-left: 32rpx;
	
			.title {
				width: 104rpx;
				height: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 26rpx;
				color: #181818;
				line-height: 32rpx;
				margin: 0 12rpx 0 6rpx;
			}
	
			.scoring {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 42rpx;
				color: #FFB134;
				line-height: 32rpx;
			}
		}
	
		.right {
			margin-right: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #9E9E9E;
			line-height: 32rpx;
	
			span {
				margin-right: 8rpx;
			}
		}
	}
	
	.mymoney {
	
		width: 690rpx;
		height: 200rpx;
		background: #323232;
		border-radius: 24rpx;
		position: relative;
		align-items: flex-start;
		margin: 0 auto;
		margin-top: 30rpx;
	
		.myyue {
			margin-top: 30rpx;
			margin-left: 30rpx;
			color: #ffffff;
		}
	
		.tixian {
			width: 148rpx;
			height: 68rpx;
			position: absolute;
			right: -10rpx;
			top: 45rpx;
	
		}
	
		.tixianwz {
			position: absolute;
			right: 35rpx;
			top: 62rpx;
			font-size: 28rpx;
			color: #323232;
		}
	
		.botmoney {
			margin-top: 22rpx;
			margin-left: 30rpx;
			color: #777777;
			font-weight: 400;
			font-size: 26rpx;
	
			.shu {
				width: 2rpx;
				height: 22rpx;
				margin: 0 20rpx;
				background: #848484;
			}
		}
	
	}
	
	.service {
		margin: 0 auto;
		margin-top: 30rpx;
		height: 206rpx;
		// background: url("https://naweigetetest2.hschool.com.cn/dyqc/zhuliren.png");
		background-size: 690rpx 206rpx;
		padding-bottom: 0;
	}
	
	.hot {
		//   margin-top: 30rpx;
		margin-bottom: 100rpx;
	
	
	}
	
	.part {
		width: 162rpx;
		height: 70rpx;
		// background: url(@/static/index/shangche.png);
		background-size: 162rpx 70rpx;
		background-repeat: no-repeat;
		font-family: 'YouSheBiaoTiHei';
		font-weight: 400;
		font-size: 42rpx;
		color: #BBFC5B;
	}
	
	.part1 {
		width: 162rpx;
		height: 70rpx;
		// background: url(@/static/index/shangchew.png);
		background-size: 162rpx 70rpx;
		background-repeat: no-repeat;
		font-family: 'YouSheBiaoTiHei';
		font-weight: 400;
		font-size: 42rpx;
		color: #9C9C9C;
	}
	
	.content {
		// height: 462rpx;
		// overflow-x: auto;
		/* 允许横向滚动 */
		// white-space: nowrap;
	
		width: 690rpx;
		margin: 0 auto;
	
		.bbb {
			background: #ffffff;
			margin-top: 24rpx;
			border-radius: 36rpx;
		}
	
		.right {
			margin-left: 30rpx;
			width: 100%;
	
			.title {
				width: 95%;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #323232;
			}
	
			.first-image {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #9C9C9C;
	
				span {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #222222;
				}
			}
	
			.row {
				margin: 10rpx 0 26rpx 0;
	
				.remen {
					// width: 136rpx;
					height: 40rpx;
					background: #ebfaf5;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
	
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #14bc84;
					line-height: 28rpx;
					padding: 2rpx 8rpx;
				}
	
				.line-colum {
					width: 1rpx;
					height: 32rpx;
					background: #7a7a7a;
					margin: 0 13rpx;
				}
	
				.name {
					width: 110rpx;
					height: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #7a7a7a;
					line-height: 32rpx;
					margin-left: 12rpx;
				}
			}
	
	
			.jigou {
				width: 312rpx;
				// height: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #7a7a7a;
				margin: 4rpx 0 14rpx 0;
			}
	
			.time {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #323232;
				line-height: 30rpx;
	
				.time_tex {
					width: 116rpx;
					height: 42rpx;
					background: #BBFC5B;
					border-radius: 159rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #323232;
					display: flex;
					justify-content: center;
					align-items: center;
				}
	
				.time_texs {
					background: #FF4810;
					color: #ffffff;
				}
	
			}
	
			.imgs_con {
				width: 202rpx;
				height: 202rpx;
				margin-right: 12rpx;
	
				&:first-child {
					border-radius: 18rpx 0 0 18rpx;
				}
	
				&:nth-child(3) {
					border-radius: 0 18rpx 18rpx 0;
				}
			}
	
		}
	
		.bottom {
			margin: 32rpx 0 32rpx 24rpx;
			width: 655rpx;
	
			.toptext {
				width: 480rpx;
	
				.smalld {
					margin-left: 0 !important;
				}
			}
	
			.number {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #3D3D3D;
				line-height: 30rpx;
				width: 242rpx;
				margin-left: 20rpx;
			}
	
			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 26rpx;
				color: #7a7a7a;
			}
	
			.money {
				width: 150rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #ff2323;
				justify-content: flex-end;
			}
		}
	
		.ovr {
			width: 312rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 18rpx;
			margin-right: 24rpx;
		}
	}
</style>