xiongmao/pages/index/product-details/product-details.vue

<!-- 商品详情 -->
<template>
	<view class="wrap">

		<HeaderViewBar ref='HeaderViewBar' title='商品详情' :titleOpacity="scrollTop / 100" :opacity="scrollTop / 100"
			:hideBack="true" backgroundColor='linear-gradient(180deg, #E63D23, #F58711)'
			style="position: fixed; top: 0; z-index: 999999999;">
			<view class="header-btn-box" :style="{width: headerContainerWidth + 'px', paddingRight: 36}">
				<button type="default" class="back" @tap="back()">
					<image src="../../../static/return-2.png" mode="widthFix"></image>
				</button>
				<view class="header-right-box">
					<button type="default">
						<image src="../../../static/circle-1.png" mode="widthFix"></image>
					</button>
					<button type="default">
						<image src="../../../static/circle-2.png" mode="widthFix"></image>
					</button>
				</view>
			</view>
		</HeaderViewBar>

		<view class="swiper-box">
			<swiper class="swiper" @change="swiperChange" :circular="true" autoplay="true" interval="3000"
				duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<image :src="item" class="banner-img" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
			<view class="diandian">
				<view class="diandiandian" :class="(swiperCurrent == index ? 'diandiandian_active' : '')"
					v-for="(item, index) in swiperList">
				</view>
			</view>
		</view>

		<view class="padding-box">
			<view class="module">
				<view class="price-row">
					￥394.00 <text class="del-price">￥34.00</text>
				</view>
				<view class="product-name">
					藕粉桂花坚果藕粉羹营养早代餐 坚果羹营养早餐懒人冲饮食品
				</view>
				<view class="row-between">
					<view class="tag">
						1罐50g
					</view>
					<view class="box">
						<image src="../../../static/bg-8.png" class="bg" mode="aspectFill" />
						<view class="fan">
							返
						</view>
						<view class="fan-prirce">
							￥<text>8.00</text>
						</view>
					</view>
				</view>
			</view>

			<view class="module">
				<view class="module-row">
					<view class="module-label">
						产品功效
					</view>
					<view class="module-right-row">
						<text class="child">强身益智</text>
						<text class="child">健胃润肠</text>
						<button type="default" class="module-btn">健胃润肠</button>
					</view>
				</view>
				<view class="module-row">
					<view class="module-label">
						适合人群
					</view>
					<view class="module-right-row">
						<text class="child">亚健康</text>
						<text class="child">心血管患者</text>
						<text class="child">糖尿病患者</text>
						<text class="child">体弱多病</text>
						<text class="child">消化不良</text>
						<text class="child">心血管患者</text>
						<text class="child">糖尿病患者</text>
						<text class="child">体弱多病</text>
					</view>
				</view>
				<view class="module-row">
					<view class="module-label">
						有效搭配
					</view>
					<view class="module-right-row-between">
						<view class="module-right-row-tab">
							<view class="tab-child">
								乌鸡
							</view>
							<view class="tab-child">
								木耳
							</view>
							<view class="tab-child">
								枸杞
							</view>
						</view>
						<image src="../../../static/back-icon2.png" mode="widthFix" class="back-icon"></image>
					</view>
				</view>
			</view>

			<view class="module">
				<view class="module-row">
					<view class="module-label">
						配送
					</view>
					<view class="module-right-row">
						<view class="msg">
							嘉兴南湖区旭辉广场2号楼
						</view>
					</view>
				</view>
				<view class="module-row">
					<view class="module-label">
						发货
					</view>
					<view class="module-right-row">
						<view class="msg">
							北京携手熊猫总部
						</view>
						<text class="express-shipping">快递:免运费</text>
					</view>
				</view>
				<view class="module-row">
					<view class="module-label">
						源头
					</view>
					<view class="module-right-row">
						<view class="msg">
							宁夏中宁县
						</view>
						<button class="border-orange">产品可溯源</button>
					</view>
				</view>
				<view class="module-row">
					<view class="module-label">
						时令
					</view>
					<view class="module-right-row">
						<view class="msg">
							6月/7月/8月
						</view>
					</view>
				</view>
				<view class="module-row">
					<view class="module-label">
						时令
					</view>
					<view class="module-right-row-between">
						<view class="module-right-row-tab">
							<text class="assure">产品可溯源</text>
							<text class="assure">七天无理由退换</text>
						</view>
						<image src="../../../static/back-icon2.png" mode="widthFix" class="back-icon"></image>
					</view>
				</view>
				<view class="module-row">
					<view class="module-label">
						参数
					</view>
					<view class="module-right-row-between">
						<view class="module-right-row-tab">
							<text class="assure">生产日期</text>
							<text class="assure">产地</text>
							<text class="assure">净含量…</text>
						</view>
					</view>
				</view>
			</view>

			<view class="comment-module">
				<view class="comment-module-label">
					商品评价(600)
				</view>
				<view class="comment-box">
					<view class="comment-tab-list">
						<view class="comment-tab-item">
							口味鲜美多汁
						</view>
						<view class="comment-tab-item">
							很好吃
						</view>
						<view class="comment-tab-item">
							还会再买
						</view>
					</view>
					<view class="comment-list">
						<view class="comment-item" v-for="(item, index) in 3">
							<view class="comment-item-top">
								<image src="../../../static/avatar.png" class="avatar" mode="aspectFill"></image>
								<view class="comment-item-top-sidebar">
									<view class="comment-item-top-column">
										<view class="user-name">
											乔治的晚餐
										</view>
										<view class="stars-wrapper">
											<block v-for="(val, index) in 5">
												<image class="star-img"
													:src="star > index ? '../../../static/star-active.png' : '../../../static/star.png'"
													mode="aspectFill"></image>
											</block>
										</view>
									</view>
									<text class="time">2020-9-15</text>
								</view>
							</view>
							<view class="comment-item-content">
								香肠精选不同部位的猪肉，按照一定的肥瘦比列进行搭。香肠精选不同部位的猪肉，按照一定的肥瘦比列进行搭。
							</view>
						</view>
					</view>
					<view class="buyers-show-module">
						<view class="buyers-show-label">
							买家秀(14)
						</view>
						<scroll-view scroll-x="true" class="buyers-show-list">
							<image src="../../../static/img-4.png" class="buyers-show-img" v-for="(item, index) in 7"
								mode="aspectFill"></image>
						</scroll-view>
					</view>
				</view>
			</view>

			<view class="details-module">
				<view class="details-module-label">
					商品详情
				</view>
				<image src="../../../static/img-4.png" mode="widthFix" class="img"></image>
			</view>

		</view>

		<view class="footer">
			<view class="footer-leftsidebar">
				<button type="default">
					<image src="../../../static/foot-tab2.png" mode="heightFix"></image>
					购物车
					<view class="num">
						99
					</view>
				</button>
				<button type="default">
					<image src="../../../static/foot-tab1.png" mode="heightFix"></image>
					客服
				</button>
				<button type="default" @tap="collect">
					<image :src="select ? '../../../static/foot-tab3active.png' : '../../../static/foot-tab3.png'" mode="heightFix"></image>
					收藏
				</button> 
			</view>
			<view class="footer-rightsidebar">
				<button type="default" class="footer-rightsidebar-btn" @tap="showToast">
					<image src="../../../static/btn-bg1.png" mode=""></image>
					<view class="footer-rightsidebar-btn-container">
						加入购物车
					</view>
				</button>
				<button type="default" class="footer-rightsidebar-btn2">
					<image src="../../../static/btn-bg2.png" mode=""></image>
					<view class="footer-rightsidebar-btn-container2">
						立即购买
					</view>
				</button>
			</view>
		</view>

		<!-- 加入购物车成功-弹窗 -->
		<view class="window" v-show="isShowAddSuccess">
			<image src="../../../static/circle-active.png" mode="widthFix"></image>
			添加成功，在购物车等您呦~
		</view>
		<!-- 加入购物车成功-弹窗  -->
	 
	</view>
</template>

<script>
	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
	import popupMessage from '../../../components/addSuccess.vue';
	export default {
		components: {
			HeaderViewBar,
			popupMessage
		},
		data() {
			return {
				headerHeight: 0,
				headerContainerWidth: 0,
				scrollTop: 0,

				//轮播
				swiperList: [
					'../../../static/img-4.png',
					'../../../static/img-4.png',
					'../../../static/img-4.png'
				],
				swiperCurrent: 0,

				star: 3, //评价，默认3星

				isShowAddSuccess: false,//加入购物车成功弹窗
				
				select:false,//收藏
			}
		},
		onShow() {
			setTimeout(() => {
				this.headerHeight = this.$refs['HeaderViewBar'].getHeaderStyle().headerHeight;
				this.headerContainerWidth = this.$refs['HeaderViewBar'].getHeaderStyle().headerContainerWidth;
			}, 20);
		},
		methods: {
			// 返回顶部
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			//轮播
			swiperChange(e) {
				const {
					current
				} = e.detail;
				this.swiperCurrent = current;
			},
			//加入购物车成功-弹窗
			showToast() {
				this.isShowAddSuccess = true;
			},
			closeAddSuccess() {
				this.isShowAddSuccess = false;
			},
			//收藏 
			collect: function() {
				this.select = !this.select;
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="scss">
	@import "./product-details.css";
</style>