school_uni/package2/IdleTrad/detail.vue

<template>
	<view class="page1">
		<!-- 固定顶部导航栏（悬浮在背景图之上） -->
		<view class="nav-bar" :style="{'padding-top': menuButtonInfo.top +'px'}">
			<view class="back-btn" @tap="back">
				<uni-icons type="left" size="28"></uni-icons>
			</view>
			<view class="title-search">
				<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
				<input type="text" placeholder="搜索" />
			</view>
		</view>
		<!-- 背景头图（随页面滚动） -->
		<view class="title">
			<view class="hero-spark spark-a"></view>
			<view class="hero-spark spark-b"></view>
			<view class="hero-spark spark-c"></view>
		</view>
		<view class="content">
			<view class="title1">
				<view class="c-1">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
						alt="">
				</view>
				<view class="c-2">
					AAA二手数码
				</view>
				<view class="c-3">
					10分钟前来过
				</view>
				<view class="c-4">
					关注
				</view>
			</view>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in adList" :key="index">
					<img class="hero-bg-img" :src="item" alt="" />
				</swiper-item>
			</swiper>
			<view class="c-5">
				给钱就出，二手电竞桌（电脑桌）快速发货，标价就是实价#桌类 #办公桌 #电竞电脑装备都是全新的，包邮！！！
			</view>
			<view class="p-1">
				<view class="p-2">
					评论 <text>（14）</text>
					<view class="line"></view>
				</view>
				<view class="p-3">
					<view class="left">
						<view class="p-4">
							<view class="p-5">
								<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
									alt="" />
							</view>
							<view class="p-6">
								魔法理发师
							</view>
							<view class="p-7">
								4天前.广东
							</view>
						</view>
						<view class="p-8">
							活动有效时间到2025年5月25日哦，感兴趣的朋友快来参与吧～
						</view>
					</view>
					<view class="right">
						<view class="p-9">
							<uni-icons type="heart" size="15"></uni-icons>
							<!-- <uni-icons type="heart-filled" color="red" size="12"></uni-icons> -->
						</view>
						<view class="p-10">
							20
						</view>
					</view>
				</view>
				<view class="p-3">
					<view class="left">
						<view class="p-4">
							<view class="p-5">
								<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
									alt="" />
							</view>
							<view class="p-6">
								魔法理发师
							</view>
							<view class="p-7">
								4天前.广东
							</view>
						</view>
						<view class="p-8">
							活动有效时间到2025年5月25日哦，感兴趣的朋友快来参与吧～
						</view>
					</view>
					<view class="right">
						<view class="p-9">
							<uni-icons type="heart" size="15"></uni-icons>
							<!-- <uni-icons type="heart-filled" color="red" size="12"></uni-icons> -->
						</view>
						<view class="p-10">
							20
						</view>
					</view>
				</view>
				<view class="p-3">
					<view class="left">
						<view class="p-4">
							<view class="p-5">
								<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
									alt="" />
							</view>
							<view class="p-6">
								魔法理发师
							</view>
							<view class="p-7">
								4天前.广东
							</view>
						</view>
						<view class="p-8">
							活动有效时间到2025年5月25日哦，感兴趣的朋友快来参与吧～
						</view>
					</view>
					<view class="right">
						<view class="p-9">
							<uni-icons type="heart" size="15"></uni-icons>
							<!-- <uni-icons type="heart-filled" color="red" size="12"></uni-icons> -->
						</view>
						<view class="p-10">
							20
						</view>
					</view>
				</view>
				<view class="b-1"></view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="b-2">
				<view class="b-3">
					<uni-icons type="chat" size="25"></uni-icons>
					<!-- <uni-icons type="chat-filled" color="red"></uni-icons> -->
				</view>
				<view>
					留言
				</view>
			</view>
			<view class="b-2">
				<view class="b-3">
					<uni-icons type="star" size="25"></uni-icons>
					<!-- <uni-icons type="star-filled" color="red"></uni-icons> -->
				</view>
				<view>
					20
				</view>
			</view>
			<view class="b-3">
				<view class="b-4" @tap="$refs.buyPopup.open('bottom')" style="color: rgba(166, 255, 234, 1);">
					立即购买
				</view>
				<view class="b-4" @tap="goChat" style="background: linear-gradient(90deg, #e3ff96, #a6ffea);">
					<uni-icons type="chatboxes"></uni-icons>聊一聊
				</view>
			</view>
		</view>
		<uni-popup ref="buyPopup" background-color="#fff">
			<view class="buy-content">
				<view class="buy1">
					<view class="buy2">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/62c9aa038b2541ad9c400a76ddae7ef8.png"
							alt="" />
					</view>
					<view class="buy3">
						<view class="buy4">
							给钱就出，二手电竞桌（电脑桌）快速发货…
						</view>
						<view class="buy5">
							￥33.6
						</view>
					</view>
				</view>
				<view class="buy6">
					<view class="buy7">
						颜色
					</view>
					<view class="buy8">
						<view class="buy9">
							白色
						</view>
						<view class="buy9">
							白色
						</view>
						<view class="buy9">
							白色
						</view>
						<view class="buy9">
							白色
						</view>
						<view class="buy9">
							白色
						</view>
					</view>
				</view>
				<view class="buy6">
					<view class="buy7">
						大小
					</view>
					<view class="buy8">
						<view class="buy9">
							XL码
						</view>
						<view class="buy9">
							XL码
						</view>
						<view class="buy9">
							XL码
						</view>
						<view class="buy9">
							XL码
						</view>
						<view class="buy9">
							XL码
						</view>
					</view>
				</view>
				<view class="box1" style="display: flex;padding: 40rpx;">
					<view style="flex: 1;">
						<view style="height: 42rpx;line-height: 42rpx;display: flex;">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/ea48a4ac01ae420082138b8c5f5b9560.png"
								alt="" style="width: 42rpx;height: 42rpx;margin-right: 20rpx;" />
							<text style="font-size: 30rpx;font-weight: 700;">西校区1号宿舍楼610</text>
						</view>
						<view style="margin-left: 60rpx;color: #777;">
							刘六六    18827382918
						</view>
					</view>
					<view style="width: 36rpx;padding-top: 20rpx;">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="box1" style="display: flex;padding: 40rpx;">
					<view style="flex: 1;">
						<view style="height: 42rpx;line-height: 42rpx;display: flex;">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4c8e0cc311db4d38ab43e019673c4b8c.png"
								alt="" style="width: 42rpx;height: 42rpx;margin-right: 20rpx;" />
							<text style="font-size: 30rpx;font-weight: 700;">微信支付</text>
						</view>
						<view style="text-align: right;margin-left: 60rpx;color: #777;width: 146rpx;">
							使用微信支付
						</view>
					</view>
					<view style="width: 36rpx;padding-top: 20rpx;">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/02bff7edc4e04caaa1868955ff684f1f.png"
							alt="" style="width: 36rpx;height: 36rpx;" />
					</view>
				</view>
				<view class="popup-bottom-box">
					<view class="buy10">
						确认购买 ￥35.33
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adList: ['https://jewel-shop.oss-cn-beijing.aliyuncs.com/62c9aa038b2541ad9c400a76ddae7ef8.png',
					'https://jewel-shop.oss-cn-beijing.aliyuncs.com/62c9aa038b2541ad9c400a76ddae7ef8.png'
				],
				interval: 4000,
				duration: 1000,
				indicatorDots: true,
				menuButtonInfo: {},
			}
		},
		onLoad(option) {

		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		},
		onPullDownRefresh() {
			this.menuList = [{
				categoryName: '推荐',
				id: 'tuijian',
				checked: true
			}]
			this.productItem = []
			this.getCategory(this.shopItem.id);
			this.getProduct('');
		},
		// onPageScroll(e) {
		// 	this.lastScrollTop = e.scrollTop;
		// 	// 节流：80ms 内不重复检测，避免频繁的 selectorQuery
		// 	const now = Date.now();
		// 	if (now - this._lastDetectTs < 80) return;
		// 	this._lastDetectTs = now;
		// 	this.detectCurrentCategory();
		// },
		methods: {
			goChat(){
				uni.navigateTo({
					url:'/package2/IdleTrad/chat'
				})
			},
			back() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat;
		width: 100%;
		height: 340rpx;
		background-size: 100%;
		position: relative;
		overflow: hidden;
	}

	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		z-index: 100;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
	}

	.radio-check {
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
		width: 42rpx;
		height: 42rpx;
		border-radius: 42rpx;
		text-align: center;
		line-height: 42rpx;
		margin: 0 18rpx 0 0;
		box-shadow: 0 6rpx 16rpx rgba(49, 224, 183, 0.22);
	}

	.radio-no-check {
		width: 42rpx;
		height: 42rpx;
		border-radius: 42rpx;
		border: 2rpx solid #e8eeee;
		margin: 0 18rpx 0 0;
		background: #fff;
	}

	.pack-options {
		display: flex;
		align-items: center;
		margin-top: 22rpx;
	}

	.pack-option {
		display: flex;
		align-items: center;
		color: #00231C;
		font-size: 28rpx;
		font-weight: 800;
		margin-right: 40rpx;
	}

	.title-search {
		display: flex;
		flex: 1;
		background: rgba(255, 255, 255, 0.9);
		height: 54rpx;
		margin-left: 20rpx;
		border-radius: 54rpx;

		input {
			height: 54rpx;
			line-height: 54rpx;
		}
	}

	.content {
		margin-top: -140rpx;
	}

	.back-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.swiper {
		width: 100%;
		height: 750rpx;
		margin-top: 20rpx;
	}

	.swiper img {
		width: 100%;
		height: 100%;
	}

	.title1 {
		display: flex;
		width: 100%;
		padding: 0 24rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.c-1 {
		width: 68rpx;
		height: 68rpx;
		margin-top: 5rpx;
	}

	.c-1 img {
		width: 100%;
		height: 100%;
		background-size: 100%;
		border-radius: 68rpx;
	}

	.c-2 {
		margin: 0 16rpx;
		font-size: 30rpx;
		font-weight: 700;
	}

	.c-3 {
		flex: 1;
		color: rgba(0, 35, 28, 0.7);
	}

	.c-4 {
		width: 100rpx;
		height: 60rpx;
		background: rgba(0, 35, 28, 1);
		color: rgba(166, 255, 234, 1);
		text-align: center;
		line-height: 60rpx;
		border-radius: 20rpx;
		margin-top: 5rpx;
	}

	.c-5 {
		height: auto;
		font-size: 30rpx;
		font-weight: 700;
		border-bottom: 14rpx solid #eee;
		padding: 20rpx;
		background: #fff;
	}

	.p-1 {
		background: #fff;
	}

	.p-2 {
		font-size: 40rpx;
		font-weight: 700;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
	}

	.line {
		width: 140rpx;
		height: 20rpx;
		background: linear-gradient(135deg, rgba(2, 251, 221, 1) 0%, rgba(166, 255, 234, 0) 100%);
		margin-top: -32rpx;
	}

	.p-3 {
		display: flex;
		padding: 20rpx 0;
	}

	.p-4 {
		display: flex;
		height: 50rpx;
		color: rgba(0, 35, 28, 0.6);
		padding: 0 20rpx;
	}

	.p-5 {
		width: 48rpx;
		height: 48rpx;
	}

	.p-5 img {
		width: 100%;
		height: 100%;
		background-size: 100%;
		border-radius: 48rpx;
	}

	.p-6 {
		margin-left: 20rpx;
		font-weight: 700;
	}

	.p-7 {
		margin-left: 20rpx;
	}

	.p-8 {
		width: 75%;
		margin-left: 86rpx;
		font-size: 28rpx;
	}

	.p-9 {}

	.p-10 {
		color: rgba(191, 200, 198, 1);
	}

	.left {
		flex: 1;
	}

	.right {
		width: 70rpx;
		text-align: center;
	}

	.b-1 {
		width: 100%;
		height: 200rpx;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		background: #fff;
		width: 100%;
		height: 160rpx;
		display: flex;
		padding: 20rpx;
		border-top: 1px solid #eee;
	}

	.b-2 {
		width: 50rpx;
		height: 80rpx;
		margin-right: 60rpx;
		text-align: center;
	}

	.b-3 {
		flex: 1;
		display: flex;
	}

	.b-4 {
		flex: 1;
		text-align: center;
		width: 180rpx;
		height: 70rpx;
		background: rgba(0, 35, 28, 1);
		line-height: 70rpx;
		border-radius: 70rpx;
		margin: 0 10rpx;
	}

	.buy-content {
		height: 1000rpx;
		width: 100%;
		padding: 20rpx;

	}

	.vue-ref {
		border-top-left-radius: 20rpx !important;
		border-top-right-radius: 20rpx !important;
	}

	.buy1 {
		display: flex;
	}

	.buy2 {
		width: 168rpx;
		height: 168rpx;

		img {
			width: 100%;
			height: 100%;
			background-size: 100%;
			border-radius: 20rpx;
		}
	}

	.buy3 {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.buy4 {
		flex: 1;
		font-size: 30rpx;
		font-weight: 700;
		padding: 10rpx 20rpx;
	}

	.buy5 {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 40rpx;
		padding: 0 20rpx;
		color: red;
		font-weight: 700;
	}
	.box1 {
		width: 99%;
		margin: 0 auto 22rpx;
		background: #f5f5f5;
		border: 1px solid rgba(255, 255, 255, 0.86);
		border-radius: 32rpx;
		padding: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	.buy6{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}
	.buy7{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
	.buy8{
		display: flex;
		flex-wrap: wrap;
	}
	.buy9{
		background: #eee;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		opacity: 0.6;
		margin-right: 20rpx;
	}
	.popup-bottom-box{
		    background: #fff;
		    position: fixed;
		    height: 160rpx;
		    width: 94%;
	}
	.buy10{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin: 20rpx auto 0;
		background: linear-gradient(45deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		border-radius: 100rpx;
		font-size: 32rpx;
		font-weight: 700;
	}
</style>