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="spike-module-box">
			<image src="../../../static/bg-17.png" class="spike-bg" mode=""></image>
			<view class="spike-module-content">
				<view class="spike-module-content-left">
					秒杀价:
					<view class="spike-price">
						¥39.00
					</view>
					<text class="del-price-white">¥56.00</text>
				</view>
				<view class="spike-module-content-right">
					<view class="spike-module-content-right-label">距秒杀截止时间</view>
					<view class="bottom-label">
						<text class="bottom-label-text">14天</text>
						<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond
							@change="onChange">
							<view class="time">
								<view class="time__custom">
									<text
										class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds }}</text>
								</view>
							</view>
						</u-count-down>
					</view>
				</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 class="type-list">
					<view class="type-item">
						菊花决明子茶
					</view>
					<view class="type-item pink-border">
						藕粉桂花坚果羹
					</view>
					<view class="type-item">
						黑芝麻羹
					</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>
				<view class="details-box">
					<image src="../../../static/img-4.png" mode="widthFix" class="img"></image>
				</view>
			</view>

		</view>

		<view class="footer">
			<view class="footer-leftsidebar">
				<button type="default" @tap="shoppingCart">
					<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>
					{{select ? '已收藏' : '收藏'}}
				</button>
			</view>
			<view class="footer-rightsidebar">
				<button type="default" class="footer-rightsidebar-btn" @tap="addCartSuccess">
					<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 v-show="isShowAssure">
			<view class="mask" @tap="closeAssure"></view>
			<view class="window-box">
				<view class="window-title">保障</view>
				<view class="window-top">
					<view class="window-row">
						<view class="window-label">产品可溯源</view>
					</view>
					<view class="window-row">
						<view class="window-label">七天无理由退换</view>
						<view class="window-msg">满足相应条件(吊牌缺失、洗涤后不支持)时，消费者可以申请“七天无理由退换货”</view>
					</view>
				</view>
				<view class="window-bottom">
					<button type="default">确定</button>
				</view>
			</view>
		</view>
		<!-- 保障-弹窗  -->

		<!-- 选择规格-弹窗 -->
		<view v-show="isShowSelectSpecification">
			<view class="mask" @tap="closeSelectSpecification"></view>
			<view class="selectSpecification-box">
				<view class="product-module">
					<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
					<view class="product-module-sidebar">
						<view class="price-row">
							￥394.00
							<text class="del-price">￥34.00</text>
						</view>
						<view class="product-module-title">藕粉桂花坚果藕粉羹营养早代餐 坚果羹营养早餐懒人冲饮食品</view>
					</view>
				</view>
				<view class="delivery-address-box">
					<view class="delivery-address-label">配送地址</view>
					<view class="location-row">
						<image src="../../../static/location-1.png" class="location-icon" mode=""></image>
						<view class="row-location-between">
							<text class="location-msg">山东省 临沂市 兰山区 柳青街道 </text>
							<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="taste-row">
					<view class="taste-label">
						口味
					</view>
					<view v-for="(item, index) in list" :key="index">
						<view :class="'type ' + [id == index ? 'active' : '']" @click="choseItem(index)">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="number-box-between">
					<view class="number-label">购买数量<text>(限购10件)库存1899件</text></view>
					<view class="calc_box">
						<view class="calc_btn">
							<image src="../../../static/less.png" mode="widthFix" />
						</view>
						<input type="number" value="1" class="calc_number" />
						<view class="calc_btn">
							<image src="../../../static/add.png" mode="widthFix" />
						</view>
					</view>
				</view>
				<view class="window-bottom">
					<button type="default">确定</button>
				</view>
			</view>
		</view>
		<!-- 选择规格-弹窗  -->


		<!-- 限源预售-参数-弹窗 -->
		<view v-show="isShowParameter">
			<view class="mask" @tap="closeParameter"></view>
			<view class="window-box">
				<view class="window-title">参数</view>
				<view class="window-top">
					<view class="parameter-row">
						<view class="parameter-row-label">品牌</view>
						<view class="parameter-row-msg">程老伯</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">价格</view>
						<view class="parameter-row-msg">0-50元</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">产地</view>
						<view class="parameter-row-msg">中国大陆</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">省份</view>
						<view class="parameter-row-msg">山东省</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">同城服务</view>
						<view class="parameter-row-msg">同城24小时物流送货上门</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">包装方式</view>
						<view class="parameter-row-msg">包装</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">售卖方式</view>
						<view class="parameter-row-msg">单品</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">套餐份量</view>
						<view class="parameter-row-msg">5人份</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">套餐周期</view>
						<view class="parameter-row-msg">1周</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">配送频次</view>
						<view class="parameter-row-msg">1周2次</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">净含量</view>
						<view class="parameter-row-msg">500g 1500g 2500g</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">厂址</view>
						<view class="parameter-row-msg">山东烟台</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">厂家联系方式</view>
						<view class="parameter-row-msg">05358585333</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">厂名</view>
						<view class="parameter-row-msg">程老伯旗舰店</view>
					</view>
					<view class="parameter-row">
						<view class="parameter-row-label">保质期</view>
						<view class="parameter-row-msg">7</view>
					</view>
				</view>
				<view class="window-bottom">
					<button type="default">确定</button>
				</view>
			</view>
		</view>
		<!-- 限源预售-参数-弹窗  -->

		<!-- 限源预售-选择规格-弹窗 -->
		<view v-show="isShowPreSaleSelectSpecification">
			<view class="mask" @tap="closePreSaleSelectSpecification"></view>
			<view class="selectSpecification-box">
				<view class="product-module">
					<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
					<view class="product-module-sidebar">
						<view class="price-row">
							￥394.00
							<text class="del-price">￥34.00</text>
						</view>
						<view class="product-module-title">陶太萌油蟠桃(黄肉蟠桃)</view>
					</view>
				</view>
				<view class="delivery-address-box">
					<view class="delivery-address-label">配送地址</view>
					<view class="location-row">
						<image src="../../../static/location-1.png" class="location-icon" mode=""></image>
						<view class="row-location-between">
							<text class="location-msg">山东省 临沂市 兰山区 柳青街道 </text>
							<image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="taste-row">
					<view class="taste-label">
						净含量
					</view>
					<view class="specification-list">
						<view v-for="(item, index) in list3" :key="index">
							<view :class="'type2 ' + [choose == index ? 'active' : '']" @click="chooseItem(index)">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="taste-row">
					<view class="taste-label">
						规格
					</view>
					<view class="specification-list">
						<view v-for="(item, index) in list2" :key="index">
							<view :class="'type2 ' + [selected == index ? 'active' : '']" @click="selectedItem(index)">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="number-box-between">
					<view class="number-label">购买数量<text>(限购10件)库存1899件</text></view>
					<view class="calc_box">
						<view class="calc_btn">
							<image src="../../../static/less.png" mode="widthFix" />
						</view>
						<input type="number" value="1" class="calc_number" />
						<view class="calc_btn">
							<image src="../../../static/add.png" mode="widthFix" />
						</view>
					</view>
				</view>
				<view class="window-bottom">
					<button type="default">确定</button>
				</view>
			</view>
		</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星

				select: false, //收藏

				isShowAssure: false, //保障弹窗

				isShowSelectSpecification: false, //选择规格-弹窗

				//口味-单选
				list: [{
						name: '桂花坚果藕粉羹【实发1罐500g】'
					},
					{
						name: '坚果水果藕粉羹【实发1罐500g】'
					},
					{
						name: '桂花坚果藕粉羹【拍1份发两罐  拍2份发5罐同款】'
					},
					{
						name: '坚果水果藕粉羹【拍1份发两罐  拍2份发5罐同款】'
					},
					{
						name: '坚果水果+桂花坚果[(拍1份发2罐)(拍2份发5罐,2罐坚果水果+3罐…'
					}
				],
				id: '0', //单选 初始化第一个高亮


				isShowParameter: false, //限源预售-参数-弹窗

				isShowPreSaleSelectSpecification: false, //限源预售-选择规格-弹窗

				list2: [{
						name: '小果55-60mm【个头偏小】'
					},
					{
						name: '中果55-60mm【实惠装】'
					},
					{
						name: '大果60-65mm【性价比】'
					},
					{
						name: '精选大果65mm+【超值人气爆款】'
					}
				],
				selected: '3', //单选 初始化第一个高亮

				list3: [{
						name: '3斤'
					},
					{
						name: '5斤'
					},
					{
						name: '9斤'
					}
				],
				choose: '2', //单选 初始化第一个高亮
				
				//倒计时
				timeData: {},
			}
		},
		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;
			},
			
			//加入购物车成功-弹窗
			addCartSuccess(){
				uni.showToast({
					title: '加入购物车成功',
					duration: 2000
				});
			},
			
			//收藏 
			collect: function() {
				this.select = !this.select;
			},

			//保障-弹窗
			showAssure() {
				this.isShowAssure = true;
			},
			closeAssure() {
				this.isShowAssure = false;
			},

			//选择规格-弹窗
			showSelectSpecification() {
				this.isShowSelectSpecification = true;
			},
			closeSelectSpecification() {
				this.isShowSelectSpecification = false;
			},

			//口味-单选
			choseItem: function(index) {
				// console.log(index)
				this.id = index;
			},

			//限源预售-参数-弹窗
			showParameter() {
				this.isShowParameter = true;
			},
			closeParameter() {
				this.isShowParameter = false;
			},

			//限源预售-选择规格-弹窗
			showPreSaleSelectSpecification() {
				this.isShowPreSaleSelectSpecification = true;
			},
			closePreSaleSelectSpecification() {
				this.isShowPreSaleSelectSpecification = false;
			},

			//限源预售-规格-单选
			selectedItem: function(index) {
				// console.log(index)
				this.selected = index;
			},

			//限源预售-净含量-单选
			chooseItem: function(index) {
				// console.log(index)
				this.choose = index;
			},
			
			//倒计时
			onChange(e) {
				this.timeData = e
			},
			
			//跳转购物车
			shoppingCart(){
				uni.navigateTo({
					url:'../../shopping-cart/shopping-cart'
				})
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="scss">
	@import "./product-details.css";
	.time {
		@include flex;
		align-items: center;
	
		&__custom {
			margin-top: 4px;
			width: 19px;
			height: 20px;
			line-height: 20px;
			background-color: #FC4A04 !important;
			border-radius: 4px;
			/* #ifndef APP-NVUE */		
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
	
			&__item {
				color: #fff !important;
				font-size: 24rpx !important;
				text-align: center;
				font-weight: bold;
				margin: 0 !important;
			}
		}
	
		&__doc {
			color: #F2501A !important;
			padding: 0 6rpx !important;
			font-size: 36rpx !important;
			margin: 0 !important;
		}
	}
</style>