moxuan_takeaway_user/my/qinglv/xiang.vue

<template>
	<view class="content">
		<view style="height: 100%">
			<swiper class="swiper" :autoplay="true" interval="2000" duration="500" :circular="true" style="width: 100%; z-index: 1; height: 319rpx">
				<swiper-item v-for="(item, index) in 2" :key="index">
					<image src="https://mxys.chuanghai-tech.com/wmfile/20240904/05af7c5442bb4a8baa1f5f3071ca2302.jpg" mode="scaleToFill" style="width: 100%"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="title">{{ info.name }}</view>
		<view class="beizhu">先囤后用·随时退·过期自动退·可部分退</view>
		<!-- 套餐内容 -->
		<view class="neirong">
			<view class="title title1">套餐内容</view>
			<view class="title title2" style="margin-top: 10rpx">
				<view class="cicle"></view>
				<view style="margin-left: 16rpx">例假周期关怀</view>
			</view>
			<view class="title title2" style="margin-top: 23rpx">
				<view class="cicle"></view>
				<view style="margin-left: 16rpx">创海便利店（二食堂1楼) 13267827921</view>
			</view>
			<view class="xiangnei" v-for="(item, index) in 2" :key="index">
				<view>例假期每天一杯红糖姜茶 x1</view>
				<view style="color: #000000">¥25</view>
			</view>
			<!-- 菜品图片 -->
			<view class="shop_zheng">
				<view class="image-container">
					<image
						v-for="(item, index) in 5"
						:key="index"
						class="image"
						src="https://mxys.chuanghai-tech.com/wmfile/20240904/05af7c5442bb4a8baa1f5f3071ca2302.jpg"
						style="margin-left: 20px"
						@click="clickImg(item)"
					></image>
				</view>
			</view>
		</view>
		<!-- 购买须知 -->
		<view class="xuzhi">
			<view class="title title1">购买须知</view>
			<view class="title title2" style="margin-top: 10rpx; padding-bottom: 20rpx">
				<view class="cicle"></view>
				<view style="margin-left: 16rpx">此套餐仅限用于女生，如男生请选其他合适的套餐</view>
			</view>
		</view>
		<!-- 购买 -->
		<view class="goorder">
			<view class="goods_price">¥{{ info.price }}</view>
			<view class="goorder_but" @click="toGou">立即购买</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			info: {}
		}
	},
	onLoad(options) {
		this.id = options.id
		this.getDetail()
	},
	methods: {
		getDetail() {
			this.$Request.getT(`/app/lover-set/${this.id}`).then((res) => {
				console.log(res, 966)
				this.info = res.data
			})
		},
		//立即购买
		toGou() {
			uni.navigateTo({
				url: '/my/qinglv/orderX'
			})
		},
		//图片点击放大
		clickImg(img) {
			console.log(img)
			uni.previewImage({
				urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function (res) {},
				fail: function (res) {},
				complete: function (res) {}
			})
		}
	}
}
</script>

<style>
.content {
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
}
.title {
	margin: 13rpx 0 0 23rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
}
.beizhu {
	margin: 23rpx 0 0 22rpx;
	width: 518rpx;
	height: 77rpx;
	background-size: 100%;
	background-image: url('https://mxys.chuanghai-tech.com/wmfile/20250812/7b77b0772b6e4c2cb8c0d3a012c7722b.png');
	font-size: 24rpx;
	font-weight: 400;
	line-height: 77rpx;
	text-align: center;
	color: rgba(255, 87, 51, 1);
}
/* //套餐内容 */
.neirong {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
}
.title1 {
	margin: 14rpx 0 0 19rpx;
}
.cicle {
	margin: 12rpx 0 0 0;
	width: 10rpx;
	height: 10rpx;
	background: #cccccc;
	border-radius: 50%;
}
.title2 {
	display: flex;
	font-size: 28rpx;
}
.xiangnei {
	width: 633rpx;
	display: flex;
	/* 让子元素两端对齐，价格居左，按钮居右 */
	justify-content: space-between;
	/* 垂直方向居中（可选，根据需求调整） */
	margin: 0 0 0 45rpx;
	padding-bottom: 10rpx;
	font-size: 24rpx;
	color: rgba(102, 102, 102, 1);
}
/* 菜品图片 */
.shop_zheng {
	background-color: rgba(255, 255, 255, 1);
	width: 100%;
	margin-left: 20rpx;
	margin-top: 8px;
	height: 100%;
	overflow: hidden;
}
.image-container {
	width: 350px;
	overflow-x: auto;
	padding: 10rpx 0 10rpx 0;
	white-space: nowrap;
	/* transition: transform 0.3s; /* 可以添加平滑滑动的效果 */
}

.image {
	display: inline-block;
	width: 166rpx; /* 三张图片平分宽度 */
	height: 133rpx;
}
/* 购买须知 */
.xuzhi {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
}
/* 购买 */
.goorder {
	display: flex;
	/* 让子元素两端对齐，价格居左，按钮居右 */
	justify-content: space-between;
	/* 垂直方向居中（可选，根据需求调整） */
	align-items: center;
	height: 123rpx;
	opacity: 1;
	box-shadow: 0px 0px 17px #000000;
	width: 100%;
	padding: 2% 3%;
	position: fixed;
	bottom: 0;
	background-color: #ffffff;
	z-index: 999;
}
.goods_price {
	font-size: 40rpx;
	font-weight: 500;
	color: rgba(255, 91, 26, 1);
}
.goorder_but {
	width: 224rpx;
	height: 76rpx;
	opacity: 1;
	border-radius: 104rpx;
	background: linear-gradient(90deg, #fcb147 0%, #ff9029 100%);
	line-height: 76rpx;
	text-align: center;
	font-weight: 700;
}
</style>