moxuan_takeaway_user/my/qinglv/index.vue

<template>
	<view class="content">
		<view class="backg3 flex" style="padding-top: 23rpx" v-if="isWoman" @click="clickMan">
			<view style="margin-left: 40rpx">
				<view style="color: #000000; font-size: 32rpx; font-weight: 500">女生专区</view>
				<image style="width: 48rpx; height: 9rpx; margin-left: 20rpx" src="https://mxys.chuanghai-tech.com/wmfile/20250811/5f75606616aa4c7f8c304368f8663a39.png"></image>
			</view>
			<view style="margin-left: 73rpx">男生专区</view>
		</view>
		<view class="backg3 flex" style="padding-top: 23rpx" v-else @click="clickMan">
			<view style="margin-left: 40rpx">女生专区</view>
			<view style="margin-left: 73rpx">
				<view style="color: #000000; font-size: 32rpx; font-weight: 500">男生专区</view>
				<image style="width: 48rpx; height: 9rpx; margin-left: 20rpx" src="https://mxys.chuanghai-tech.com/wmfile/20250811/5f75606616aa4c7f8c304368f8663a39.png"></image>
			</view>
		</view>
		<view @click="toXiang(item.id)" v-for="(item, index) in dataList" :key="item.id" :class="index == 0 ? 'backg1' : 'backg2'">
			<image :src="item.imgs" style="width: 289rpx; height: 319rpx; margin: 31rpx 0 0 20rpx; background-color: #000" mode="aspectFill"></image>
			<view style="margin: 31rpx 0 0 26rpx; width: 400rpx">
				<view style="font-size: 32rpx; color: #000000; font-weight: 500; margin-top: 7rpx">{{ item.name }}</view>
				<view style="margin-top: 7rpx">{{ item.subName }}</view>
				<view style="display: flex; flex-wrap: wrap">
					<view class="lijia" v-for="(ele, ind) in item.serviceTag.split(',')" :key="ind">{{ ele }}</view>
				</view>
				<view class="q_time">
					<view style="line-height: 30px">时间</view>
					<view class="q_line"></view>
					<view style="width: 300rpx; margin-left: 13rpx">{{ item.startTime }}—{{ item.endTime }}</view>
				</view>
				<view class="jiage">¥{{ item.price }}</view>
			</view>
		</view>

		<empty v-if="!dataList.length"></empty>
	</view>
</template>

<script>
import empty from '@/components/empty.vue'
export default {
	components: {
		empty
	},
	data() {
		return {
			isWoman: true, //true是。false不是
			currentPage: 1,
			totalCount: 0,
			dataList: []
		}
	},
	onLoad() {
		this.getData()
	},
	methods: {
		getData() {
			let data = {
				page: this.currentPage,
				limit: 6,
				suitSex: this.isWoman ? 2 : 1
			}
			this.$Request.getT('/app/lover-set/page', data).then((res) => {
				console.log(res, 966)
				this.dataList = [...this.dataList, ...res.data.list]
				this.totalCount = res.data.totalCount
			})
		},
		//切换男女专区
		clickMan() {
			this.isWoman = !this.isWoman
			this.currentPage = 1
			this.dataList = []
			this.getData()
		},
		//跳转到详情页
		toXiang(id) {
			uni.navigateTo({
				url: `/my/qinglv/xiang?id=${id}`
			})
		}
	}
}
</script>

<style>
.content {
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
}
.backg3 {
	display: flex;
	width: 750rpx;
	height: 100%;
	background-color: #ffe9ca;
}
.backg1 {
	display: flex;
	width: 750rpx;
	height: 100%;
	margin-bottom: 20rpx;
	/* background-color: #FFE9CA; */
	background: linear-gradient(180deg, #ffe9ca 0%, #ffffff 28.17%, #ffffff 32.53%, #f2f3f5 100%);
}
.backg2 {
	display: flex;
	margin-top: 20rpx;
	width: 750rpx;
	height: 100%;
	background-color: #ffffff;
}
.lijia {
	margin-top: 7rpx;
	margin-right: 8rpx;
	width: 125rpx;
	height: 51rpx;
	opacity: 1;
	border-radius: 73rpx;
	border: 1rpx solid #ff8d1a;
	font-size: 24rpx;
	line-height: 51rpx;
	color: rgba(255, 141, 26, 1);
	text-align: center;
}
.q_time {
	display: flex;
	margin-top: 15rpx;
}
.q_line {
	margin: 12rpx 0 0 13rpx;
	width: 1rpx;
	height: 47rpx;
	background-color: #808080;
}
.jiage {
	margin-top: 27rpx;
	font-size: 40rpx;
	font-weight: 500;
	color: rgba(255, 91, 26, 1);
}
</style>