xusfood_client/shopping/productdetails.vue

<template>
	<view class="pages">
		<u-navbar
			title="产品详情"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		 <u-swiper
				:list="details.slideImgList"
				@change="e => currentNum = e.current"
				:autoplay="false"
				indicatorStyle="right: 20px"
		>
			<view
				slot="indicator"
				class="indicator-num"
			>
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ details.slideImgList.length }}</text>
			</view>
		</u-swiper>
		<view class="product-info view-wrap">
			<view class="red">
				<view class="" v-if="vuex_member_info.levelType>1">
					<text class="price">¥ <text class="price-num">{{details.vipPrice}}</text></text>
					<text class="vip-icon">VIP</text>
				</view>
				<view class="" v-else>
					<text class="price">¥ <text class="price-num">{{details.salePrice}}</text></text>
				</view>
			</view>
			<view class="u-flex u-row-between gray">
				<text v-if="vuex_member_info.levelType>1" class="line-through">¥ <text class="">{{details.salePrice}}</text></text>
				<text class="">库存 {{details.stock}}</text>
			</view>
			<view class="name">{{details.goodsName}}</view>
		</view>
		<view class="addr view-wrap">
			<view class="addr-line u-flex">
				<view class="addr-til">快递</view>
				<view class="addr-con u-flex">
					包邮
				</view>
			</view>
			<view class="addr-line u-flex">
				<text class="addr-til">送至</text>
				<view class="addr-con u-flex u-flex-1">
					<view class="u-flex u-row-between u-flex-1">
						<text>贵阳市 南明区</text>
						<u-icon name="arrow-right" color="#676767" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="comment view-wrap u-flex u-row-between">
			<view class="left">
				<text class="til">评价</text>
				<text class="num">({{details.commentNum}})</text>
			</view>
			<view class="right u-flex" @click="$u.route('/shopping/comment',{id:details.id})">
				<text>查看全部</text>
				<u-icon name="arrow-right" color="#676767" size="20"></u-icon>
			</view>
		</view>
		<view class="detail view-wrap">
			<view class="til">详情</view>
			<view class="con">
				{{details.detail}}
			</view>
		</view>
		<view class="details-tool-wrap">
			<view class="details-tool u-flex u-row-between">
				<view class="left u-flex">
					<view class="icon-wrap">
						<u-icon name="share" color="#676767" size="30"></u-icon>
						分享
					</view>
					<view class="icon-wrap"  @click="$u.route('/shopping/cart')">
						<u-icon name="shopping-cart" color="#676767" size="30"></u-icon>
						购物车
						<u-badge class="badge" numberType="overflow" type="error " max="99" value="9" :absolute="true" :offset="[0,0]"></u-badge>
					</view>
				</view>
				<view class="right u-flex">
					<view class="btn add-btn">加入购物车</view>
					<view class="btn buy-btn">立即购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				currentNum:0,
				swiperList: [],
				details:{
					slideImgList:[]
				}
			}
		},
		onShow() {
			
		},
		onLoad(page) {
			this.id = page.id;
			// console.log('this.id',this.id);
			this.getDetails(this.id);
		},
		methods: {
			getDetails(id){
				this.$u.api.memberGoodDetails({id:id}).then(res=>{
					console.log('res',res.data);
					this.details = res.data
					}).catch(err=>{
					console.log('getDetails',err.data);
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		 color: #FFFFFF;
		 font-size: 12px;
	 }
}
.product-info{
	.price-num{
		font-size: 60rpx;
	}
	.name{
		margin-top: 30rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		line-height: 50rpx;
	}
}
.addr{
	font-size: 30rpx;
	.addr-line{
		margin-bottom: 20rpx;
	}
	.addr-til{
		color: #999;
		margin-right: 40rpx;
	}
	.addr-con{
		color: #666;
	}
}
.comment{
	color: #999;
	.til{
		font-size: 30rpx;
		font-weight: 600;
		margin-right: 20rpx;
		color: #333;
	}
}
.detail{
	.til{
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 20rpx;
	}
	.con{
		// background-color: #F5F5F5;
	}
}
.details-tool-wrap{
	height: 98rpx;
	.details-tool{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 98rpx;
		background-color: #fff;
	}
	.left{
		text-align: center;
		color: #666;
		font-size: 24rpx;
		.icon-wrap{
			position: relative;
			margin-left: 20rpx;
		}
	}
	.right{
		.btn{
			padding: 19rpx 40rpx;
			border-radius: 40rpx;
			color: #fff;
			margin-right: 20rpx;
		}
		.add-btn{
			background-color: #FFB100;
		}
		.buy-btn{
			background-color: #FF3C3F;
		}
	}
}
</style>