security_study_h5/shopping/productdetails.vue

<template>
	<view class="pages">
	<!-- 	<u-navbar
			title="产品详情"
			:placeholder="true"
			:autoBack="false"
			@leftClick="leftClick"
			 :safeAreaInsetTop="true"
		>
		</u-navbar> -->
		 <u-swiper
			v-if="details.slideImgList.length>0"
			:list="details.slideImgList"
			height="700rpx"
			@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="price u-flex u-row-between">
				<view class="u-flex">
					<img style="margin-right: 10rpx;" src="../static/img/integral-ico-y.png" alt="">
					{{details.exchangeCredit}}积分
				</view>
				<view class="exchange-num">已兑换{{details.saleCount}}</view>
			</view>
			<view class="name">{{details.goodsName}}</view>
		</view>
		<view class="specification info-line u-flex view-wrap" v-if="details.specification">
			<view class="info-til">规格</view>
			<view class="info-con u-flex">{{details.specification}}</view>
		</view>
	<!-- 	<view class="addr view-wrap" v-if="details.period">
			<view class="addr-line u-flex" v-if="details.period">
				<view class="info-til">保质期</view>
				<view class="info-con u-flex">
					{{details.period}}(天)
				</view>
			</view>
		</view> -->
		<view class="detail view-wrap">
			<view class="til">详情</view>
			<view class="con">
				<u-parse :content="details.detail"></u-parse>
			</view>
		</view>
		<view class="details-tool-wrap">
			<view class="details-tool">
				<view class="full-btn" @click="addCreditOrder">立即兑换</view>
			</view>
		</view>
		<u-popup :show="popupShow" mode="bottom"  @close="close">
			<view class="select-num">
				<view class="header u-flex">
					<u-icon name="close" color="#666" size="28" @click="close"></u-icon>
				</view>
				<view class="select-wrap u-flex u-row-between">
					<view class="title">购买数量（件）</view>
					<u-number-box v-model="param.quantity" @change="quantityChange" :max="Math.floor(credit/details.exchangeCredit)"></u-number-box>
				</view>
				<view class="full-btn" @click="exchange">确定兑换</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				cartTotal:0,
				currentNum:0,
				swiperList: [],
				details:{
					slideImgList:[],
					exchangeCredit:1
				},
				credit:0,
				popupShow:false,
				param:{
					goodsId:'',
					quantity:1,
				}
			}
		},
		onLoad(page) {
			this.id = page.id;
			this.param.goodsId = page.id;
			// console.log('this.id',this.id);
			this.getDetails(this.id);
			this.getMemberCredit();
		},
		onShow(){
			// this.getCartList();
			// this.getAddrList();
		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			getMemberCredit(){
				this.$u.api.memberCredit().then(res=>{
					this.credit = res.data.credit
					// console.log('memberCredit',this.credit);
				}).catch(err=>{
					console.log('memberCredit',err.data);
				})
			},
			getDetails(id){
				this.$u.api.memberGoodDetails({id:id}).then(res=>{
					// console.log('res',res.data);
					this.details = res.data;
					if(!res.data.slideImgList&&res.data.mainImg){
						this.details.slideImgList = [];
						this.details.slideImgList.push(res.data.mainImg)
					}
				}).catch(err=>{
					console.log('getDetails',err.data);
				})
			},
			addCreditOrder(id){
				this.popupShow = true
			},
			exchange(){
				// console.log('param',this.param);
				this.$u.api.exchangeGoods(this.param).then(res=>{
					this.close();
					uni.$u.route('/shopping/paysuccess', {
						codeData: res.data.exchangeCode,
						msg:res.msg,
						success:true
					});
					// console.log('exchangeGoods',res.data);
				}).catch(err=>{
					this.close();
					uni.$u.route('/shopping/paysuccess', {
						codeData: null,
						msg:err.msg,
						success:false
					});
					console.log('exchangeGoods',err.data);
				})
			},
			close() {
				this.popupShow = false
			},
			quantityChange(e){
				// console.log('quantityChange',e);
			}

		}
	}
</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{
		font-size: 44rpx;
		font-weight: 600;
		color: #FFB100;
		line-height: 60rpx;
		.exchange-num{
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}
	}
	.name{
		margin-top: 30rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		line-height: 50rpx;
	}
}
.info-line{
	margin-bottom: 20rpx;
}
.info-til{
	color: #999;
	margin-right: 40rpx;
}
.info-con{
	color: #666;
}
.addr{
	font-size: 30rpx;
	.addr-line:not(:last-child){
		
	}
	
}
.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;
		img{max-width: 100%;}
	}
}
.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: 10rpx 40rpx;
			border-radius: 40rpx;
			color: #fff;
			margin-right: 20rpx;
			font-size: 30rpx;
		}
		.add-btn{
			background-color: #FFB100;
		}
		.buy-btn{
			background-color: #FF3C3F;
		}
		.gray{
			background-color: #ddd;
			color: #999;
		}
	}
}
.full-btn{
	margin: 0;
	border-radius: 0;
	background-color: #009AEF;
	padding: 0;
	height: 98rpx;
	line-height: 98rpx;
}
.select-num{
	.header{
		padding: 30rpx 30rpx 0;
		text-align: right;
		justify-content: end;
		margin-bottom: 40rpx;
	}
	.select-wrap{
		padding: 30rpx;
	}
}
</style>