discounts-minapp/pages/my/index.vue

<template>
	<view class="my">

		<view class="top-box">

			<view class="user-info">
				<image class="image" :src="userInfo.imgPath || defaultImg" lazy-load mode=""></image>
				<view class="info">
					<view class="user-name">{{userInfo.nickname ||'用户'}}</view>
					<view class="tel">{{userInfo.phoneNum ||'-'}}</view>
				</view>
				<u-icon name="setting" class="stting" color="#FFF" size="38"
					@click="setting"></u-icon>
			</view>

			<view class="btn-group">
				<view class="item" @click="jump('../../my/order/index')">

					<image class="icon" src="../../static/icon1.png" mode=""></image>
					<view class="label">
						我的订单
					</view>
				</view>
				<view class="item" @click="jump('../../my/card/index')">
					<image class="icon" src="../../static/icon2.png" mode=""></image>
					<view class="label">
						我的权益
					</view>
				</view>
				<view class="item" @click="jump('../../my/favorite/index')">
					<image class="icon" src="../../static/icon3.png" mode=""></image>
					<view class="label">
						我的收藏
					</view>
				</view>
				<view class="item" @click="jump('../../integral/store')">
					<image class="icon" src="../../static/icon4.png" mode=""></image>
					<view class="label">
						我的积分
					</view>
				</view>
			</view>
		</view>



		<view class="box-title">
			商家推荐
		</view>
		<zs-list class="store-box" mt="0" @load="loadMore" :status="status">
			<view class="left">
				<view class="store-item" v-for="(item,index) in list" :key="index" @click="goShopDetail(item)">
					<!-- <image class="icon" mode="" :src="item.src"> -->
						<zs-img  :src="item.src" width="335rpx"  mode="widthFix" ></zs-img>
						<view class="info">
							<view class="title">
								{{item.title}}
							</view>
							<view class="address">
								<image class="position" src="../../static/position.png" mode=""></image>
								{{item.distance}}km
							</view>
						</view>
				</view>
			</view>
			<view class="right">
				<view class="store-item" v-for="(item,index) in list1" :key="index" @click="goShopDetail(item)">
					<!-- <image class="icon" mode="" :src="item.src"> -->
						<zs-img  :src="item.src" width="335rpx"  mode="widthFix" ></zs-img>
						<view class="info">
							<view class="title">
								{{item.title}}
							</view>
							<view class="address">
								<image class="position" src="../../static/position.png" mode=""></image>
								{{item.distance}}km
							</view>
						</view>
				</view>
			</view>
		
		</zs-list>

	</view>
</template>

<script>
	import {
		getUserDetail
	} from '@/api/common.js'
	export default {
		data() {
			return {
				keyword: '',
				userId: '',
				loading: false,
				status: 'more',
				defaultImg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fc34b7b74-ba38-0456-982a-43c0f97522fe%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693532127&t=a2e186c12aecaab7723611cb52a6778f',
				userInfo: {
					imgPath: null,
					lastLogin: "",
					level: null,
					nickname: null,
					openId: "",
					phoneNum: "",
					sex: 0,
					userId: "",
					valid: 0
				},
				list: [{
						src: 'https://mstatic.gzstv.com/media/images/2021/06/09/w1nrZC8_x-PQ.jpg',
						title: '万安加油站（中石化）',
						distance: 13.62

					},
					{
						src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F159660028%2Fb327e4a2a3e1473a82e2a53b5a5d2db2.jpeg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTU5NjYwMDI4L2IzMjdlNGEyYTNlMTQ3M2E4MmUyYTUzYjVhNWQyZGIyLmpwZWc%3D%2Fsign%2Fcec9ce1dfb5e0c3e627e30fb099899da.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693560973&t=7b7dfb1cbf6a6759e70f868c894888c9',
						title: '万安加油站（中石化）',
						distance: 13.62

					},
					{
						id: 3,
						src:'https://img-md.veimg.cn/meadinindex/img5/2021/11/69F51D249ADA446EB5507352AA4ABD6E.jpg',
						title: '贵阳万丽酒店',
						distance: 5.23,
						
					},
				],
				list1: [
					{
						id: 3,
						src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc7481b97-86a3-4aba-8d2c-d3c84d7ce831%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695542967&t=fe7462e4fc56e50b98013b198043278d',
						title: '黄果树瀑布',
						distance: 5.23,
						
					},
					{
						id: 3,
						src:'https://alipic.lanhuapp.com/XDSlicePNGMAXdb1c28750d2e8f45e7509c176f186600d2bafe09de15a8107b168c078801e1e7.png',
						title: '微笑牙科诊所',
						distance: 5.23,
						
					},
					{
						id: 2,
						src:'https://img2.baidu.com/it/u=242243300,1128843585&fm=253&fmt=auto&app=138&f=JPEG?w=696&h=500',
						title: '泊斯曼酒店',
						distance: 5.23,
						
					},
				
				]
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getUserDetail()
			}

		},
		onLoad() {

		},
		methods: {
			setting(){
				if(uni.getStorageSync('token')){
					uni.navigateTo({
						url:'../../my/edit/edit'
					})
				}else{
					uni.showToast({
						title:'请先登录',
						icon:'error'
					})
				}
			},
			loadMore() {
				// this.status = 'loading'
				// setTimeout(() => {
				// 	this.status = 'more'
				// 	this.list.push({
				// 		src: 'https://img2.baidu.com/it/u=3177584174,2077949726&fm=253&fmt=auto&app=120&f=JPEG?w=540&h=360',
				// 		title: '万安加油站（中石化）',
				// 		distance: 13.62
				// 	})
				// }, 1000)
			},
			jump(url) {
				uni.navigateTo({
					url
				})
			},
			goShopDetail(item) {
				uni.setStorageSync('shopInfo', JSON.stringify(item))
				uni.navigateTo({
					url: `../../detail/shopDetail/shopDetail`
				})
			},
			// 获取用户详情
			getUserDetail() {
				getUserDetail().then(res => {
					this.userInfo = res.content
					uni.setStorageSync('userInfo', JSON.stringify(this.userInfo))
				})
			}
		}
	}
</script>

<style lang="scss">
	.my {
		height: 100vh;
		padding: 0 30rpx;
		background: #F9F9F9;

		.top-box {
			width: 750rpx;
			margin-left: -30rpx;
			padding: 150rpx 30rpx 0;
			box-sizing: border-box;
			background: url('../../static/top-bg.png') no-repeat;
			background-size: 100% 433rpx;

			.user-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 0;
				color: #fff;

				.image {
					width: 108rpx;
					height: 108rpx;
					background: #f1f1f1;
					border-radius: 50%;
				}

				.info {
					flex: 1;
					margin-left: 30rpx;

					.user-name {
						font-size: 32rpx;
						font-weight: bold;
					}

					.tel {
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

				.setting {}
			}

			.btn-group {
				display: flex;
				align-items: center;
				padding: 40rpx 20rpx;
				margin-top: 20rpx;
				border-radius: 16rpx;
				background: #fff;

				.item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;

					.icon {
						width: 80rpx;
						height: 80rpx;
					}

					.label {
						margin-top: 15rpx;
						font-size: 24rpx;
						color: #121212;
					}
				}
			}
		}

		.box-title {
			font-size: 34rpx;
			padding: 20rpx 0;
			font-weight: bold;
		}

		.zs-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.store-item {
				width: 335rpx;
				margin-bottom: 25rpx;

				box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);

				.icon {
					width: 100%;
					height: 300rpx;
					border-radius: 16rpx 16rpx 0 0;
				}

				.info {
					padding: 20rpx;
					background: #fff;
					border-radius: 0 0 16rpx 16rpx;

					.title {
						font-weight: bold;
					}

					.address {
						display: flex;
						align-items: center;
						margin-top: 15rpx;
						color: #999;
						.position{
							width: 25rpx;
							height: 29rpx;
							margin-right: 8rpx;
						}
					}
				}
			}
		}

	}
</style>