lipin/pages/product/detail.vue

<template>
	<view class='product-con'>
		<swiper indicator-dots="true" autoplay="false" circular="true" interval="2500" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" class="swiper">
			<block v-for="(item,index) in product.img" :key="index">
				<swiper-item>
					<image :src="item" class="slide-image"></image>
				</swiper-item>
			</block>
		</swiper>
		<view class="info">
			<view class="title">{{product.title}}</view>
			<view class="price">￥<text>{{product.price}}</text><span>{{product.wget}}kg/件</span></view>
		</view>
		<view class="warehouse">
			<view class="line">仓库
				<view class="express">
					<block v-for="(item,index) in product.warehouse" :key="index">
						<text>{{item}}</text>
					</block>
				</view>
			</view>
			<view class="line">库存<view>{{product.count}}件</view></view>
		</view>
		<!-- 热卖推荐 -->
		<view class="recommend">
			<view class="title acea-row row-center-wrapper">
				<image src="../../static/images/ling.png"></image>
				<view class="titleTxt">热卖推荐</view>
				<image src="../../static/images/ling.png"></image>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in recommend" :key="index" @click="goDetail(item)">
					<image :src="item.img"></image>
					<view class="name line1">{{item.title}}</view>
					<view class="price">¥{{item.price}}</view>
				</view>
			</view>
		</view>
		<view class='product-intro'>
			<view class='title'>商品详情</view>
			<rich-text :nodes="product.desc" class="conter"></rich-text>
		</view>
		<navigator class='buy' hover-class='none' url="/pages/users/purchase/index" open-type='switchTab'>立即购买</navigator>
	</view>
</template>

<script>
	import {
		recommend,
		productDetail
	} from '@/api/api.js';
	export default {
		data() {
			return {
				id: 0,
				product: {},
				recommend: []
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getProductDetail();
			this.getRecommend();
		},
		methods: {
			getProductDetail: function() {
				let that = this;
				productDetail({id:that.id}).then(res => {
					that.product = res.data;
				})
			},
			getRecommend: function() {
				let that = this;
				recommend().then(res => {
					that.recommend = res.data;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper{
		height:750rpx;
		.slide-image{
			width:100%;
			height:750rpx;
		}
	}
	.info{
		padding: 25rpx;
		background: #fff;
		.title{
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
		.price{
			color:#f5222d;
			text{
				font-size: 52rpx;
				font-weight: 600;
			}
			span{
				color:#333;
				margin-left: 30rpx;
			}
		}
	}
	.warehouse{
		margin-top: 20rpx;
		background: #fff;
		.line{
			display: flex;
			padding: 0 25rpx;
			line-height: 96rpx;
			view{
				margin-left: 30rpx;
				flex-grow:1;
			}
			.express{
				font-size: 24rpx;
				color:#ff5c00;
				border-bottom: 1px solid #ebedf0;
				text{
					border: 1rpx solid #ff5c00;
					border-radius: 5rpx;
					padding: 10rpx;
					margin-right: 15rpx;
				}
			}
		}
	}
	.recommend{
		background-color: #fff;
		margin-top: 20rpx;
		.title{
			height:98rpx;
			image{
				width:30rpx;
				height:30rpx;
			}
			.titleTxt{
				margin: 0 20rpx;
				font-size: 30rpx;
				background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			padding-left: 25rpx;
			.item{
				width:216rpx;
				margin-right: 25rpx;
				margin-bottom: 25rpx;
				image{
					width:216rpx;
					height:216rpx;
					border-radius: 6rpx;
				}
				.price{
					color: #e32721;
				}
			}
		}
	}
	.product-intro{
		margin-bottom: 120rpx;
	}
	.buy{
		background: #ff5c00;
		color:#fff;
		position: fixed;
		bottom: 0;
		width:100%;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
	}
</style>