wx-qhb/pageA/productdetails.vue

<template>
	<view>
		<!-- 自定义导航栏 -->
		<u-navbar :safeAreaInsetTop="true" :placeholder='true'>
			<view class="u-nav-slot u-flex" slot="left" style="display: flex;">
				<view class="u-flex">
					<u-icon name="arrow-left" size="19"></u-icon>
					<u-tabs duration='0' @click="click" :list="list1" lineColor='#fff' :activeStyle=" {color:'#FF1515'}"
						:inactiveStyle="{
						color:' #666666' }"></u-tabs>
				</view>
				<view class="" style="margin-left: 184rpx;" @click="share = true">
					<image src="static/images/share.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
				</view>
			</view>
		</u-navbar>
		<!-- 商品图片 -->
		<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" style="width: 750rpx;height: 750rpx;" mode="">
		</image>
		<view class="back">
			<!-- 折扣 -->
			<view class="discount">
				<view class="top">
					<text class='count'>折扣价</text>
					<text class='money'>¥</text>
					<text class='money' style="font-size: 48rpx;">258</text>
					<text class='money'>.00</text>
					<text class='right'>¥328.5</text>
				</view>
				<view class="bottom">
					<text class="tabs">同款低价</text>
					<view class="title">
						<text class="title" selectable @longpress="onLongPress">
							布兰德低温烘焙猫粮全价通用高端鲜肉成猫幼
						</text>
					</view>
				</view>
			</view>
			<!-- 服务 -->
			<view class="serve" style="margin-top: 20rpx;">
				<view class="top u-flex u-row-between">
					<view class="u-flex">
						<view class="change">选择</view>
						<view class="" style="margin-left: 20rpx;">净含量</view>
					</view>
					<view class="">
						<u-icon name="arrow-right" size='16'></u-icon>
					</view>
				</view>
				<view class="top u-flex u-row-between" style="margin-top: 36rpx;">
					<view class="u-flex" @click="serve=true">
						<view class="change">服务</view>
						<view class="" style="margin-left: 20rpx;">正品保障 · 极速退款 · 7天无理由退</view>
					</view>
					<view class="">
						<u-icon name="arrow-right" size='16'></u-icon>
					</view>
				</view>
			</view>
			<!-- 评论 -->
			<view class="comment">
				<view class="u-flex u-row-between">
					<text class="ping">评论</text>
					<view class="u-flex">
						<text class="strip">5000+条评论</text>
						<u-icon name="arrow-right" size='16'></u-icon>
					</view>
				</view>
				<view class="uesr u-flex u-row-between" style="margin-top: 36rpx;">
					<view class="u-flex">
						<image src="../static/images/logo.png" style="width: 52rpx;height: 52rpx;" mode=""></image>
						<text class="name">有**钱</text>
					</view>
					<text class="strip">2023.11.23</text>
				</view>
				<view class="content">
					回购了不知道第几次了，家里猫还没吃腻呢，
				</view>
			</view>
			<!-- 店铺 -->
			<view class="store u-flex u-row-between">
				<view class="u-flex">
					<image src='../static/images/logo.png' style="width: 112rpx;height: 112rpx;" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						<view class="title">小萌优选🔥（每天0元秒杀）</view>
						<view class="" style='margin-top:20rpx'></view>
						<view class="u-flex" style='margin-top:20rpx'>
							<text class='num'>销售量 2384w+</text>
							<view class="line"></view>
							<text class='num'>销售量 2384w+</text>
						</view>
					</view>
				</view>
				<view class="goshop">逛逛</view>
			</view>
			<!-- 推荐 -->
			<view class="recommend">
				<view class="title">
					推荐商品
				</view>
				<view class="">
					<image src="" mode=""></image>
				</view>
			</view>
			<view class="recommend">
				<view class="title">商品详情</view>
				<view class="" style="margin-top: 32rpx;margin-bottom:28rpx">规格参数</view>
				<view class="specification">
					<view class="item u-flex" style='margin-bottom:28rpx'>
						<view style='width:150rpx;'>主要原料</view>
						<text style='margin-left:58rpx'>保鲜鸡肉，鸡心，鸡肝</text>
					</view>
					<view class="item u-flex" style='margin-bottom:28rpx'>
						<view style='width:150rpx;'>规格</view>
						<text style='margin-left:58rpx'>300g</text>
					</view>
					<view class="item u-flex" style='margin-bottom:28rpx'>
						<view style='width:150rpx;'>保质期</view>
						<text style='margin-left:58rpx'>12个月</text>
					</view>
					<view class="item u-flex">
						<view style='width:150rpx;'>适用对象</view>
						<text style='margin-left:58rpx'>3个月以上的全猫种</text>
					</view>
				</view>
			</view>
			<view class="">
				<image src="../static/images/logo.png" style="width: 710rpx;height: 580rpx;" mode=""></image>
			</view>
			<view class="" style="height: 158rpx;"></view>
			<view class="fix u-flex u-row-between">
				<view class="u-flex" style="column-gap: 35rpx;">
					<view class="u-flex" style="justify-content: center;flex-direction: column;">
						<image src="../static/images/index/service.png" style='width:40rpx;height:40rpx' mode="">
						</image>
						<view class="ke">客服</view>
					</view>
					<view class="u-flex" style="justify-content: center;flex-direction: column;">
						<image src="../static/cart1.png" style='width:40rpx;height:40rpx' mode=""></image>
						<view class="ke">购物车</view>
					</view>
					<view class="u-flex" style="justify-content: center;flex-direction: column;">
						<image src="../static/images/index/attention.png" style='width:40rpx;height:40rpx' mode="">
						</image>
						<view class="ke">关注</view>
					</view>
				</view>
				<!-- 	<view class="join" @click="join">加入购物车</view>
				<view class="pin">立即拼团</view> -->
				<view class="tongzhi" @click="inform">
					到货通知
				</view>
			</view>
		</view>
		<!-- 加入购物车 -->
		<u-popup :show="show">
			<view style="padding:48rpx 28rpx;box-sizing: border-box;">
				<view class="u-flex">
					<image src="../static/images/logo.png" style="width: 192rpx;height: 192rpx;" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						<view class="">¥168.00</view>
						<text class="guige">已选：鸡肉；2kg【单包装】</text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="serve">
			<view style="padding:48rpx 24rpx;box-sizing: border-box;background-color: #FFF3E7;position: relative;">
				<view class="u-flex" style="flex-direction: column;justify-content: center;">
					<image src="../static/images/index/serve.png" style="width: 138rpx;height: 34rpx;" mode=""></image>
					<text class="info">
						售前售后 安心无忧购物
					</text>
				</view>
				<view class="" style="position: absolute;top: 48rpx;right:24rpx;" @click="serve = false">
					<u-icon name="close" style="width: 22rpx;height: 22rpx;"></u-icon>
				</view>
				<view class="contenta">
					<view class="">
						<view class="title">丢包丢件</view>
						<view class="content">快件如果在运输过程中出现损毁，将按照保价</view>
					</view>
					<view class="" style='margin-top:36rpx'>
						<view class="title">丢包丢件</view>
						<view class="content">快件如果在运输过程中出现损毁，将按照保价</view>
					</view>
					<view class="" style='margin-top:36rpx'>
						<view class="title">丢包丢件</view>
						<view class="content">快件如果在运输过程中出现损毁，将按照保价</view>
					</view>
				</view>
				<view class="button" @click="serve = false">
					我知道了
				</view>
			</view>
		</u-popup>
		<u-popup :show="share" bgColor=' rgba(244, 244, 244, 1);'>
			<view style="padding:48rpx 24rpx;box-sizing: border-box;background-color: rgba(244, 244, 244, 1);">
				<view class="u-flex" style="flex-direction: column;justify-content: center;">
					<text class="info" style="font-size: 32rpx;">
						分享
					</text>
				</view>
				<view class="" style="position: absolute;top: 48rpx;right:24rpx;">
					<image src="../static/images/index/bottom2.png" style="width: 40rpx;height: 40rpx;">
				</view>
				<view class="u-flex " style="justify-content: space-around;margin-top: 82rpx;">
					<view class="">
						<image src="../static/images/index/link.png" style="width: 108rpx;height: 108rpx;" mode="">
						</image>
						<view class="link">复制链接</view>
					</view>
					<view class="">
						<image src="../static/images/index/image.png" style="width: 108rpx;height: 108rpx;" mode="">
						</image>
						<view class="link">生成图片</view>
					</view>
				</view>
				<view class="button" @click="share = false" style="background: #fff;color: #555555;margin-top: 58rpx;">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '商品',
				}, {
					name: '评价',
				}, {
					name: '详情'
				}],
				current: 0,
				// 购物车
				show: false,
				//服务
				serve: false,
				//分享
				share: false
			};
		},
		methods: {
			click(item) {
				this.current = item
			},
			join() {

			},
			//通知
			inform() {
				uni.showToast({
					title: '当该商品有库存并上架时我们会通过微信消息提醒您',
					icon: 'none',
					duration: 2000
				});
			},
			//复制
			onLongPress(e) {
				// 获取长按的文本内容
				let text = e.target.innerText;
				console.log(e);
				// 执行复制操作
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '已复制,快去粘贴吧~',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.link {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #555555;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-top: 16rpx;
	}

	.tongzhi {
		width: 422rpx;
		height: 76rpx;
		background: #FFB515;
		border-radius: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 76rpx;
		text-align: center;
		font-style: normal;
	}

	.info {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #222222;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		margin-top: 18rpx;
	}

	.button {
		// width: 662rpx;
		height: 88rpx;
		background: #F83224;
		border-radius: 44rpx;
		margin-top: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
	}

	.contenta {
		width: 702rpx;
		// height: 590rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 26rpx;
		padding: 28rpx 24rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}

		.content {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #222222;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			margin-top: 20rpx;
		}
	}

	.back {
		background-color: #F4F4F4;
		padding: 20rpx;
		box-sizing: border-box;

		.guige {}

		.fix {
			width: 750rpx;
			height: 158rpx;
			background: #FFFFFF;
			padding: 14rpx 28rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;

			.ke {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}

			.join {
				width: 208rpx;
				height: 76rpx;
				border-radius: 40rpx;
				border: 1rpx solid #FF1515;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #F83224;
				line-height: 76rpx;
				text-align: left;
				font-style: normal;
				text-align: center;
			}

			.pin {
				width: 208rpx;
				height: 76rpx;
				background: #F83224;
				border-radius: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 76rpx;
				text-align: center;
				font-style: normal;
			}
		}

		// 规格
		.specification {
			width: 670rpx;
			height: 280rpx;
			background: #F4F4F4;
			padding: 24rpx 22rpx;
			box-sizing: border-box;

			.item {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}
		}

		// 推荐
		.recommend {
			width: 710rpx;
			height: 476rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}

		//店铺
		.store {
			width: 710rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.line {
				background: rgba(151, 151, 151, 1);
				width: 4rpx;
				height: 20rpx;
				margin: 0 18rpx;
			}

			.num {
				font-family: SFPro, SFPro;
				font-weight: 400;
				font-size: 20rpx;
				color: #777777;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
			}

			.goshop {
				width: 108rpx;
				height: 52rpx;
				border-radius: 26rpx;
				border: 1rpx solid #FF1515;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F83224;
				line-height: 52rpx;
				text-align: center;
				font-style: normal;
			}
		}

		// 评论
		.comment {
			width: 710rpx;
			height: 356rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;

			.content {
				margin-top: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #444444;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				height: 112rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: wrap;
				-webkit-line-clamp: 3
			}

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				margin-left: 16rpx;
			}

			.ping {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.strip {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #444444;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}
		}

		//服务
		.serve {
			width: 710rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx 20rpx;
			box-sizing: border-box;

			.top {
				.change {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

		//折扣
		.discount {
			position: relative;
			height: 312rpx;

			.top {
				width: 710rpx;
				height: 124rpx;
				background: linear-gradient(295deg, #FB6662 0%, #FD403B 100%);
				border-radius: 16rpx 16rpx 0 0;
				padding: 20rpx;
				box-sizing: border-box;
				line-height: 98rpx;

				.count {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
				}

				.money {
					font-size: 20rpx;
					font-family: HarmonyOS_Sans_Medium;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
					margin-left: 8rpx
				}

				.right {
					font-family: HarmonyOS_Sans;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
					text-decoration-line: line-through;
					margin-left: 16rpx
				}
			}

			.bottom {
				width: 710rpx;
				height: 208rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				position: absolute;
				top: 104rpx;
				z-index: 2;
				padding: 28rpx 20rpx;
				box-sizing: border-box;

				.title {
					margin-top: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #222222;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.tabs {
				// width: 104rpx;
				height: 40rpx;
				background: rgba(255, 21, 21, 0.1);
				border-radius: 4rpx;
				padding: 4rpx 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FF1515;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}
</style>