xusfood_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="red">
				<view class="" v-if="vuex_member_info.priceType>1">
					<text class="price">¥ <text class="price-num">{{details.vipPrice}}</text></text>
					<text class="vip-icon">VIP</text>
					<text class="exchangeCredit" v-if="details.isCredit==1">+{{details.exchangeCredit}}积分</text>
				</view>
				<view class="" v-else>
					<text v-if="details.isCredit==1&&details.exchangeType==0" class="price">¥ <text class="price-num">0</text></text>
					<text v-else class="price">¥ <text class="price-num">{{details.salePrice}}</text></text>
					<text class="exchangeCredit" v-if="details.isCredit==1">+{{details.exchangeCredit}}积分</text>
				</view>
			</view>
			<view class="u-flex u-row-between gray">
				<text v-if="vuex_member_info.priceType>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="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">
			<view class="addr-line u-flex">
				<view class="info-til">快递</view>
				<view class="info-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">
				<!-- <view class="" v-html="details.detail"></view> -->
				<u-parse :content="details.detail"></u-parse>
				<!-- {{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">
						<button class="share-btn" data-name="shareBtn" open-type="share">
							<u-icon name="share" color="#676767" size="30"></u-icon>
							分享
						</button>
					</view>
					<view class="icon-wrap" v-if="details.isCredit!=1"  @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="cartTotal" :absolute="true" :offset="[0,0]"></u-badge>
					</view>
				</view>
				<view class="right" v-if="details.stock>0">
					<view class="u-flex" v-if="details.isCredit==1">
						<view class="btn add-btn" @click="addCreditOrder(details.id)">立即兑换</view>
					</view>
					<view class=" u-flex" v-else>
						<view class="btn add-btn" @click="addCart(details.id)">加入购物车</view>
						<view class="btn buy-btn" @click="buyNow(details.id)">立即购买</view>
					</view>
				</view>
				<view class="right" v-else>
					<view class="btn gray">暂无库存</view>
				</view>
				
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				cartTotal:0,
				currentNum:0,
				swiperList: [],
				details:{
					slideImgList:[]
				},
				hasAddr:false,
			}
		},
		onLoad(page) {
			this.id = page.id;
			// console.log('this.id',this.id);
			this.getDetails(this.id);
		},
		onShow(){
			this.getCartList();
			this.getAddrList();
		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			getCartList(isAdd){
				this.$u.api.cartList().then(res=>{
					if(isAdd){
						if(res.data.total==this.cartTotal){
							this.$refs.uToast.show({
								type:"success",
								message:'已在购物车'
							});
						}						
					}
					this.cartTotal = res.data.total;
					console.log('getCartList',res);
					}).catch(err=>{
					console.log('getCartList',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);
				})
			},
			addCart(id,buyNow){
				this.$u.api.addCart({goodsId:id}).then(res=>{
					this.$refs.uToast.show({
						type:"success",
						message:res.msg
					});
					if(buyNow){
						uni.$u.route('/shopping/cart', {
							buyNowId: id,
							buyNowName:this.details.goodsName
						});
					}
					this.getCartList('isAdd');
					console.log('res',res.data);
					}).catch(err=>{
					console.log('addCart',err);
				})
			},
			buyNow(id){
				// this.addCart(id,'buyNow')//跳购物车
				let that = this;
				if(!this.hasAddr){
					uni.showModal({
						title: '温馨提示',
						content: '请先设置地址！',
						success: res => {
							if (res.confirm) {
								let url = encodeURIComponent(`/shopping/productdetails?id=${that.id}`) ;
								uni.$u.route('/center/addrlist', {
									from: 'productdetails',
									backUrl:url
								});
							}
						}
					})
					return
				}
				this.$u.vuex('buyNowGoods',[{goodsId:this.id,quantity:1}]);
				uni.$u.route('/shopping/submitorder', {fromPage: 'productdetails'});
			},
			addCreditOrder(id){
				let that = this;
				let creditGoods = [];
				creditGoods.push({id:that.details.id,quantity:1})
				// console.log('creditGoods',creditGoods);
				that.$u.vuex('cartGoods',creditGoods);
				uni.$u.route('/shopping/submitorder', {fromPage:'creditOrder'});
			},
			onShareAppMessage: function( options ){
			  var that = this;
			  // 设置菜单中的转发按钮触发转发事件时的转发内容
			  var shareObj = {
			    title: this.details.goodsName,    // 默认是小程序的名称(可以写slogan等)
			    path: '/shopping/productdetails',    // 默认是当前页面，必须是以‘/'开头的完整路径
			    imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			    success: function(res){
			      // 转发成功之后的回调
			      if(res.errMsg == 'shareAppMessage:ok'){
			      }
			    },
			    fail: function(){
			      // 转发失败之后的回调
			      if(res.errMsg == 'shareAppMessage:fail cancel'){
			        // 用户取消转发
			      }else if(res.errMsg == 'shareAppMessage:fail'){
			        // 转发失败，其中 detail message 为详细失败信息
			      }
			    },
				complete:function(){
					 // 转发结束之后的回调（转发成不成功都会执行）
				}
			  };
			  // 来自页面内的按钮的转发
			  if( options.from == 'button' ){
			    var eData = options.target.dataset;
				console.log('options.target.dataset',options.target.dataset);
			    console.log('id' ,this.details.id);   // shareBtn
			    // 此处可以修改 shareObj 中的内容
			    shareObj.path = '/shopping/productdetails?id='+this.details.id;
			  }
			  // 返回shareObj
			  return shareObj;
			},
			getAddrList(){
				this.$u.api.addrList().then(res=>{
					// this.dataList = res.data.rows;
					console.log('getAddrList',res);
					if( res.data.total>0){
						this.hasAddr = true;
					}else{
						this.hasAddr = false;
					}
				}).catch(err=>{
					console.log('getAddrList',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;
	}
	.exchangeCredit{
		font-size: 60rpx;
	}
	.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: 19rpx 40rpx;
			border-radius: 40rpx;
			color: #fff;
			margin-right: 20rpx;
		}
		.add-btn{
			background-color: #FFB100;
		}
		.buy-btn{
			background-color: #FF3C3F;
		}
		.gray{
			background-color: #ddd;
			color: #999;
		}
	}
	.share-btn{
		padding: 0;
		margin: 0;
		border: 0;
		font-size: 24rpx;
		color: #666;
		line-height: 1;
		background-color: transparent;
		outline: none;
		&::after{
		  border: none;
		}
	}
}
</style>