bc_wx_applet/pages/goodDetail/goodDetail.vue

<template>
	<view class="d-content">
		<!-- 01. 轮播区 -->
		<view class="swiper-area w-full">
			<swiper class="h-full pos-r" indicator-dots circular="true" duration="400">
				<swiper-item v-for="(item, index) in swiperDatas" :key="index">
					<view class="wh-full"><image :src="item.url" class="wh-full loaded" lazy-load="true" mode="aspectFill"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="d-content">
			<!-- 02. 商品数据区 -->
			<view class="goods-area bg-main padding">
				<view class="price-box dflex-b">
					<view>
						<text class="price fwb fs-big">{{ goods.price / 100 || '100' }}</text>
					</view>
					<view class="dflex fs-sm ft-dark">
						<view class="margin-right-sm dflex" @click="">
							<uni-icons type="headphones" size="24" color="#999"></uni-icons>
						</view>
						<view class="margin-right-sm dflex">
							<uni-icons type="heart" size="24" color="#999"></uni-icons>
						</view>
						<view class="margin-right-sm dflex" @click="">
							<uni-icons type="redo" size="24" color="#999"></uni-icons>
						</view>
					</view>
				</view>
				<!-- <view class="coupon">
					<view class="mj-tag">
						<view class="mj-icon padding-lr-xs">
							<u-icon name="rmb-circle" color="#FFF"></u-icon>
						</view>
						<text class="padding-lr-xs">优惠满减</text>
					</view>
					<text class="coupon-name">满30减20</text>
				</view> -->
				<view class="title fs">商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
				<view class="sale">月销量：236</view>
			</view>
			
			<!-- 06. 详情区 -->
			<view class="gap"></view>
			<view class="spec-cell">
				<u-cell title="已选" isLink clickable @click="clickSpec" :border="false">
					<text slot="value"  class="u-slot-value">{{specValue}}</text>
				</u-cell>
			</view>
			<view class="gap"></view>
			<view class="spec-cell">
				<u-cell title="发货" isLink clickable  :border="false">
					<text slot="value"  class="u-slot-value">预计5天内发货</text>
				</u-cell>
			</view>
			<view class="gap"></view>		
			
			<view class="detail-area bg-main">
				<view class="d-header padding dflex-c"><text>图文详情</text></view>
				<rich-text class="pro-detail" :nodes="html_nodes"></rich-text>
			</view>
		</view>
		<my-gap :height="130" bg="#f5f5f5" />
		<!-- 07. 操作区 -->
		<view class="cart-bottom padding-sm dflex-b">
			<view class="go-cart dflex-c">加入购物车</view>
			<view class="go-buy dflex-c">立即购买</view>
		</view>
		
		<!-- 置顶 -->
		<use-totop ref="usetop" bottom="120"></use-totop>
		<specPopup ref="specPopup"></specPopup>
	</view>
</template>

<script>
	import specPopup from '@/components/specPopup.vue'
	export default {
		components:{specPopup},
		data() {
			return {
				specValue:'1包，番茄味',
				// 商品ID
				id: 0,
				// 商品数据
				goods: {},
				// 轮播图
				swiperDatas: [{
					url:'../../static/banner1.jpg'
				}],
				// SKU
				sku: {},
				// 商品详情
				html_nodes: '',
				// 收藏
				favorite: false,
				
				scrollTop: 0
			}
		},
		methods: {
			clickSpec(){
				this.$refs.specPopup.open();
			}
		}
	}
</script>

<style scoped lang="scss">
.d-content{
	background: $page-color-base;
	width: 100%;
}

.fixed-top {
	bottom: 230rpx;
}

/* 01. 轮播区 */
.swiper-area {
	height: 500rpx;
	z-index: -1;
	width: 100%;
}

/* 02. 商品数据区 */
.goods-area {
	// margin-top: 720rpx;

	.price-box {
		display: flex;
		align-items: baseline;
	}

	.title {
		color: $font-color-dark;
		// height: 46rpx;
		// line-height: 46rpx;
		font-weight: 700;
	}
}

/* 06. 详情区 */
.detail-area {
	.d-header {
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		position: relative;

		text {
			padding: 0 20rpx;
			background: #fff;
			position: relative;
			z-index: 1;
		}

		&:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 300rpx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}

	/* 产品详情 */
	.pro-detail {
		width: 100%;
		overflow: hidden;
		-webkit-touch-callout: none;

		img {
			width: 100%;
			max-width: 100%;
			overflow: hidden;
		}
	}
}


/* 优惠券区 */
.coupon-area {
	max-height: 60vh;
	min-height: 30vh;

	.coupon-item {
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.content {
			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.circle {
			position: absolute;
			bottom: -10rpx;
			z-index: 10;
			width: 20rpx;
			height: 20rpx;
			background: #f5f5f5;
			border-radius: 50%;

			&.r {
				right: -6rpx;
			}

			&.l {
				left: -6rpx;
			}
		}
	}
}

.sale{
	color: #999;
	font-size: 12px;
	padding-top: 10upx;
}
.spec-cell{
	background: #FFF;
}
.u-slot-value{
	font-size: 12px;
}

.cart-bottom{
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	height: 130rpx;
	box-sizing: border-box;
	background-color: #FFF;
	z-index: 10;
	box-shadow: 0px -4px 16px 0px rgba(0,0,0,0.15);
	.go-cart{
		height: 100%;
		box-sizing: border-box;
		border: solid 1px #FF0000;
		font-size: 14px;
		color: #FF0000;
		border-radius: 5px;
		width: 48%;
	}
	.go-buy{
		height: 100%;
		width: 48%;
		background-color: #FF0000;
		color: #FFF;
		border-radius: 5px;
		font-size: 14px;
	}
}
</style>