yudao-mall-uniapp/pages/XDHome/myHome/myHome.vue

<!-- 参考模板 -->
<template>
	<s-layout class="homepage-wrap ss-w-100 box-sizing" title="我的" navbar="haha"
		tabbar="/pages/XDHome/myHome/myHome">
		<view class="body" :style="'padding-top:' + bottomHeight">
			<view class="bg-box">
				<view class="top-title-box">
					我的
				</view>
				<text style="color: #fff;" class="textIcon icon-shezhi icon-navigation dw-box" @click="jumpCollection"></text>
				<!-- 用户头像 -->
				<view class="ss-flex-2 ss-col-center user-info-box">
					<view style="width: 80rpx; height: 80rpx;" @tap="sheep.$router.go('/pages/user/info')">
						<image class="wh" style="border-radius:40rpx;" referrerpolicy="no-referrer"
							src="/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png" />
					</view>
					<view style="margin-left:10rpx;font-size: 24rpx;">
						用户：202409115263541
					</view>
					<view class="ss-flex-1"></view>
					<view style="font-size: 24rpx;margin-right: 10rpx;" @click="jumpGroup">邀请码绑定</view>
					<text style="color: #fff;margin-right: 15rpx;"
						class="textIcon icon-saomajihuo icon-navigation"></text>
				</view>
			</view>

			<view class="user-box">
				<view class="ss-flex-2 ss-col-center">
					<view style="font-size:30rpx;color:#474E55;font-weight: 650;" @click="jumpWallet">
						账户余额
					</view>
					<view style="font-size:20rpx;color:#4D535C;margin-left: 30rpx;">温馨提示：点击可查看嘀咚余额明细</view>
					<view class="ss-flex-1"></view>
					<text style="color: red;font-size: 40rpx;"
						class="textIcon icon-wodeyouhuiquan icon-navigation"></text>
					<view style="font-size:25rpx;color:#4D535C;margin-left: 10rpx;" @click="jumpYouh">优惠券</view>
				</view>
				<view class="ss-flex-2 ss-col-center">
					<view style="font-size: 60rpx;color: #3D444E;font-weight: 650;" @click="jumpWallet">0.00</view>
					<view class="ss-flex-1"></view>
					<view style="font-size: 60rpx;color: #3D444E;font-weight: 650;" @click="jumpYouh">8</view>
				</view>
				<!-- 进行绝对定位 -->
				<view class='bottom-box'>
					<view class="ss-flex-2 ss-col-center">
						<text style="color: #333;font-size: 35rpx;" class="textIcon icon-qianbao icon-navigation"
							@click="jumpWallet"></text>
						<view style="font-size: 24rpx;" @click="jumpWallet">钱包</view>
						<view class="ss-flex-1"></view>
						<view style="font-size: 23rpx;" @click="jumpGroup">劵码兑换</view>
						<text style="color: #333;font-size: 30rpx;font-weight: 650;"
							class="textIcon icon-gengduo icon-navigation"></text>
						<view style="font-size: 23rpx;margin-left: 30rpx;" @click="jumpManey">去充值</view>
						<text style="color: #333;font-size: 30rpx;font-weight: 650;"
							class="textIcon icon-gengduo icon-navigation"></text>
					</view>
				</view>
			</view>
			<view style="width: 100%;height:20rpx;"></view>

			<!-- 进行滚动 -->
			<view class="list-wrap">
				<scroll-view scroll-y="true" class="list">


					<view class="ss-flex-2 ss-col-center ss-row-between public-box" style="margin-top: 20rpx;">
						<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;"
							@click="jumpCollect">
							<text style="color: #5FC3D1;font-size: 36rpx;font-weight: 650;"
								class="textIcon icon-shoucang2 icon-navigation"></text>
							<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">我的收藏</view>
						</view>
						<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;" @click="jumpYouh">
							<text style="color: #5FC3D1;font-size: 36rpx;font-weight: 650;"
								class="textIcon icon-jigouyouhuibao icon-navigation"></text>
							<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">优惠包</view>
						</view>
						<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;">
							<text style="color: #5FC3D1;font-size: 36rpx;font-weight: 650;"
								class="textIcon icon-yingxiaotuiguang icon-navigation"></text>
							<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">营销推广</view>
						</view>
						<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;">
							<text style="color: #5FC3D1;font-size: 36rpx;font-weight: 650;"
								class="textIcon icon-kefu icon-navigation"></text>
							<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">嘀咚客服</view>
						</view>
					</view>
					<!-- 会员 -->
					<view class="member-box ss-flex-2 ss-col-center">
						<text style="color: #fff;font-size: 38rpx;font-weight: 650;"
							class="textIcon icon-huiyuan icon-navigation"></text>
						<view style="font-size: 30rpx;color:#fff;margin-left: 5rpx;font-weight: 650;">嘀咚会员</view>
						<view class="meassage-box">点亮会员仅享尊贵特权</view>
						<view class="ss-flex-1"></view>
						<view class="obstacles-box" @click="jumpObstacles">立即开通</view>
					</view>
					<!-- 我的订单 -->

					<view class="my-order-box">
						<view class="ss-flex-2 ss-col-center">
							<view style="font-size: 28rpx;color: #283240;">我的订单</view>
							<view class="ss-flex-1"></view>
							<view style="font-size: 24rpx;color: #283240;" @click="jumpOrderInfo">全部订单</view>
							<text style="color: #333;font-size: 32rpx;font-weight: 650;"
								class="textIcon icon-gengduo icon-navigation"></text>
						</view>
						<view class="ss-flex-2 ss-col-center ss-row-between public-box" style="margin-top: 20rpx;">
							<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;"
								@click="jumpOrderInfo">
								<text style="color: #5FC3D1;font-size: 50rpx;font-weight: 650;"
									class="textIcon icon-dingdandaifukuan icon-navigation"></text>
								<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">待付款
								</view>
							</view>
							<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;"
								@click="jumpOrderInfo">
								<text style="color: #5FC3D1;font-size: 50rpx;font-weight: 650;"
									class="textIcon icon-jinhangzhong1 icon-navigation"></text>
								<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">进行中
								</view>
							</view>
							<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;"
								@click="jumpOrderInfo">
								<text style="color: #5FC3D1;font-size: 50rpx;font-weight: 650;"
									class="textIcon icon-daipingjiadingdan icon-navigation"></text>
								<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">待评价
								</view>
							</view>
							<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;"
								@click="jumpOrderInfo">
								<text style="color: #5FC3D1;font-size: 50rpx;font-weight: 650;"
									class="textIcon icon-shouhoutuikuan icon-navigation"></text>
								<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">退款/取消
								</view>
							</view>
						</view>
					</view>
					<!-- 众多功能 -->
					<view class="numerous-box ss-flex-2 ss-col-center ss-row-left" style="flex-wrap: wrap;">
						<view class="ss-flex-2 ss-col-center ss-row-center"
							style="flex-wrap: wrap;margin-top: 20rpx;margin-left: 10rpx;" v-for="item in numerousData"
							:key="item.text" @click="jumpAllFeat(item)">
							<text style="color: #555;font-size: 40rpx;" class="textIcon icon-navigation"
								:class="item.icon"></text>
							<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">
								{{item.text}}</view>
						</view>
					</view>
					<view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx;margin-bottom: 20rpx;">
						<view class="ss-flex-1"></view>
						<text class="textIcon icon-shoucang" style="font-size: 22rpx;color: #666666;"></text>
						<text class="textIcon icon-shoucang" style="font-size: 25rpx;color: #666666;"></text>
						<text class="textIcon icon-shoucang" style="font-size: 28rpx;color: #666666;"></text>
						<view style="margin-left: 10rpx; color: #444; font-size: 30rpx;margin-right: 10rpx;">热门推荐</view>
						<text class="textIcon icon-shoucang" style="font-size: 28rpx;color: #666666;"></text>
						<text class="textIcon icon-shoucang" style="font-size: 25rpx;color: #666666;"></text>
						<text class="textIcon icon-shoucang" style="font-size: 22rpx;color: #666666;"></text>
						<view class="ss-flex-1"></view>
					</view>
					<!-- 使用瀑布流布局 -->
					<view class="content-test">
						<view @click="gopreview(item.id)" style="padding-bottom: 30rpx">
							<view class="list-test" v-for="(item, index) in swiperList" :key="item.id">
								<view style="height: 310rpx" class="box-sizing">
									<image @click="jumpTechnicianDetails" class="wh" referrerpolicy="no-referrer"
										src="/static/lanhu_shouye/psq752p4oxrur1kwz38o9hz2uugu327v8c905774083-1ff9-40d7-8687-01c969b1461d.png" />
								</view>
								<view class="ss-flex ss-flex-nowrap box-sizing" style="height: 40rpx; margin-top: 15rpx">
									<view style="font-size: 24rpx"> 王琳sf谁 </view>
									<view class="ss-flex-1"></view>
									<view class="ss-flex-2 ss-col-center">
										<text class="textIcon icon-shoucang" style="font-size: 22rpx;color: #009FE8;"></text>
										<view style="margin-left: 5rpx; color: #444; font-size: 24rpx">4.9</view>
									</view>
									<view class="ss-flex-2 ss-col-center" style="margin-left: 20rpx;">
										<text class="textIcon icon-ditu" style="font-size: 22rpx;color: #009FE8;"></text>
										<view style="margin-left: 5rpx; color: #444; font-size: 24rpx">1.25km</view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
					

				</scroll-view>
			</view>
		</view>
	</s-layout>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	uni.hideTabBar();
	const swiperList = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']);
	const jumpAllFeat=async(item)=>{
		if(item.text=='签到中心'){
			jumpSign()
		}else if(item.text=='渠道合作'){
			jumpCooperation()
		}
		else{
			jumpSetting()
		}
	}
	//跳转到招聘合作
	const jumpCooperation=async()=>{
		uni.navigateTo({
			url:'/pages/XDHome/myFeat/Cooperation/Cooperation'
		})
	}
	// 跳转到签到
	const jumpSign=async()=>{
		uni.navigateTo({
			url:'/pages/XDHome/myFeat/signPage/signPage'
		})
	}
	// 去充值
	const jumpManey = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/myFeat/memberRecharge/memberRecharge',
		});
	}
	const jumpTechnicianDetails = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/technician/technicianDetails/technicianDetails',
		});
	}
	//跳转到设置页面
	const jumpCollection=async()=>{
		uni.navigateTo({
			url: '/pages/XDHome/technician/collectionSettings/collectionSettings',
		});
	}
	// 开通嘀咚会员
	const jumpObstacles = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/technician/memberPage/memberPage',
		});
	}

	// 跳转到钱包
	const jumpWallet = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/myFeat/wallet/wallet',
		});
	}
	// 跳转到优惠劵
	const jumpYouh = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/myFeat/discountCoupons/discountCoupons',
		});
	}
	//跳转到设置
	const jumpSetting = async () => {
		uni.navigateTo({
			url: '/pages/public/setting',
		});
	}
	// 跳转到劵码核销
	const jumpGroup = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/myFeat/groupBuyingCoupons/groupBuyingCoupons',
		});
	}
	//我的收藏
	const jumpCollect = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/myFeat/collect/collect',
		});
	}
	// 返回首页
	const backPage = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/homePage/homePage',
		});
	};
	const numerousData = ref([{
			icon: 'icon-qiandaozhongxin-copy-copy',
			text: '签到中心'
		},
		{
			icon: 'icon-icon_fuwu_huiyuanquanyi',
			text: '会员权益'
		},
		{
			icon: 'icon-tuiguangtuandui',
			text: '我的团队'
		},
		{
			icon: 'icon-channel',
			text: '渠道合作'
		},
		{
			icon: 'icon-saomajihuo',
			text: '扫码激活'
		},
		{
			icon: 'icon-bangzhuzhongxin',
			text: '帮助中心'
		},
		{
			icon: 'icon-youhuifuli',
			text: '优惠福利'
		},
		{
			icon: 'icon-fenxiangzhuanqian-copy',
			text: '分享赚钱'
		},
		{
			icon: 'icon-jianyifankui-',
			text: '建议反馈'
		},
		{
			icon: 'icon-yongjinxiangqing-X',
			text: '佣金详情'
		},
		{
			icon: 'icon-guanyuwomen',
			text: '关于我们'
		}
	])

	const jumpOrderInfo = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/orderInfoList/orderInfoList',
		});
	}
	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped lang="scss">
	.list-wrap-two {
		flex-grow: 1;
		position: relative;
	}

	.list-two {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.list-test {
		break-inside: avoid;
		width: 100%;
		border-radius: 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.con-test {
		color: #8b8d8c;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*禁止换行*/
		text-overflow: ellipsis;
		margin-left: 15rpx;
		margin-right: 15rpx;
		font-size: 26rpx;
	}

	.title-test {
		margin-left: 15rpx;
		margin-right: 15rpx;
		font-size: 26rpx;
		color: #8b8d8c;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*禁止换行*/
		text-overflow: ellipsis;
	}

	/* 内容区 */
	.content-test {
		width: 100%;
		padding: 10rpx;
		box-sizing: border-box;
		column-count: 2;
	}
	

	// 滚动========
	.numerous-box {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx;
	}

	.my-order-box {
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: 20rpx;
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
	}

	.obstacles-box {
		padding: 5rpx 30rpx;
		background-color: #fff;
		color: #4BB7CE;
		border-radius: 20rpx;
	}

	.meassage-box {
		font-size: 20rpx;
		color: #EAF8FC;
		margin-left: 15rpx;
		font-weight: 650;
		padding-top: 10rpx;
		box-sizing: border-box;
	}

	.member-box {
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		padding: 25rpx 35rpx;
		background: linear-gradient(to right, #009FE8, #5FC3D1);
		border-radius: 15rpx;
		margin-top: 20rpx;
	}

	.bottom-box {
		position: absolute;
		bottom: 0;
		left: 20rpx;
		right: 10rpx;
		padding: 10rpx 0rpx;
	}

	.user-box {
		position: relative;
		width: 95%;
		min-height: 220rpx;
		margin-left: 2.5%;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
		margin-top: -140rpx;
		padding: 10rpx 20rpx;
	}

	.user-info-box {
		color: #fff;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		padding: 10rpx 10rpx 10rpx 20rpx;
		margin-top: 20rpx;
	}

	.dw-box {
		position: absolute;
		top: 23rpx;
		right: 30rpx;
	}

	.top-title-box {
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		padding: 20rpx;
	}

	.bg-box {
		position: relative;
		height: 350rpx;
		background: url('@/static/top-bg.png') no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #3D444E;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #EEEEF0;
		height: calc(100vh - 50px);
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 10rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		width: 100%;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>