discounts-minapp/detail/goodsDetail/index.vue

<template>
	<view class="goodsDetail">
		<zs-skeleton type="goodsDetail" :loading="pageLoading"></zs-skeleton>
		<image class="good-img" :src="info.goodsPath" mode="aspectFit"></image>
		<view class="info-box">
			<view class="tag" v-if="info.goodsLabel">
				{{info.goodsLabel}}
			</view>
			<view class="price-box">
				<view class="left">
					<view class="num-box">
						<view class="unit">
							￥
						</view>
						<view class="price">
							{{info.realPrice}}
						</view>
					</view>
					<view class="discount-tag" v-if="info.marketPrice">
						<image class="icon" src="@/static/down.png" mode=""></image>
						<view class="discount-num">
							{{((info.realPrice/info.marketPrice)*10).toFixed(1)}}折
						</view>
					</view>
					<view class="old-price">
						市场价 ￥{{info.marketPrice}}
					</view>
				</view>
				
				<view class="right">
					销量{{info.saleNum}}
				</view>
			</view>
			<view class="goods-info">
				<view class="goods-name">
					{{info.goodsName}}
				</view>
				<view class="desc">
					{{info.goodsDescribe}}
				</view>
			</view>
		</view>
		
		<!-- 商品规格 -->
		<!-- <template v-if="info.specs[0].specValues.length">
			<view class="type-box" v-for="item in info.specs" :key="item.specId">
				<view class="type-title">
					{{item.specName}}
				</view>
				<view class="type-list">
					<view class="type-item" :class="[active == d?'active':'' ]" v-for="(i,d) in item.specValues" :key="i.specId">
						{{i.specValue}}
					</view>
				</view>
			</view>
		</template> -->
		
		<view class="shop-limit" @click="jump('/detail/shopList/index')">
			<view class="info">
				<view class="shop-name">
					<!-- 朱光玉火锅（天河店） -->
					{{info.shopInfo.shopName}}
				</view>
				<view class="address">
					<!-- 花溪区天河潭旅游度假区天河潭  22.65km -->
					{{info.shopInfo.address}}  {{distance}} KM
				</view>
			</view>
			<view class="num">
				{{shopList.length}}家店适用
				<image class="icon" src="../../static/shop-desc.png" mode=""></image>
			</view>
		</view>
		
		<view class="combo-content" v-if="info.services.length">
			<view class="sub-title">
				商品详情
			</view>
			<view class="item" v-for="(item,index) in info.services" :key="index">
				<view class="item-title">
					{{item.serviceName}}
				</view>
				<view class="item-content" v-for="i in item.services" :key="i.id">
					<view class="name">
						{{i.serviceName}}
					</view>
					
					<view class="left">
						<view class="unit" v-if="i.num">
							{{`(${i.num}${i.unit})`}}
						</view>
						<view class="price" v-if="i.price">
							￥{{i.price}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tab-group">
			<view class="tab" :class="[tab == 1 ? 'active':'']" @click="handleTab(1)">
				图文详情
			</view>
			<view class="tab" :class="[tab == 2 ? 'active':'']" @click="handleTab(2)">
				购买须知
			</view>
		</view>
		<view class="desc-box" v-show="tab == 1">
			<rich-text class="goods-desc" :nodes="info.goodsDetail"></rich-text>
		</view>
		<view class="list" v-show="tab == 2">
			<view class="item" v-for="(item,index) in info.attrs" :key="index">
				<view class="label">
					{{item.attrName == 'validDay'?'有效期':item.attrName}}
				</view>
				<view class="value" v-html="filterMsg(item.attrValue,item.attrName)">
					
				</view>
			</view>
			<!-- <view class="item">
				<view class="label">
					使用时间
				</view>
				<view class="value">
					营业时间内可用
				</view>
			</view> -->
		</view>
		
		
		<view class="buy-box">
			<image class="head" :src="info.shopInfo.logoPath" @click="goShopDetail(shopInfo)" mode=""></image>
			<view class="btn-box">
				
			<!-- 	<view class="group-btn" @click="handleBuy">
					<view class="label">
						团购
					</view>
					<view class="price">
						￥{{info.realPrice}}
					</view>
				</view> -->
				<view class="buy-btn" :class="[info.realStockNum?'':'none']" @click="handleBuy">
					<view class="label">
					 {{info.realStockNum?'会员专享价':'售罄'}}	
					</view>
					<view class="price">
						￥{{info.realPrice}}
					</view>
				</view>
			</view>
		</view>
		
		<u-modal :show="show"  title="开通会员" showCancelButton cancelText="下次再说" confirmColor="#FF4D3A" confirmText="立即开通" @cancel="cancel" @confirm="jump('/my/memberCenter/index')">
			<view class="slot-content">
				<view class="">
					此商品需要开通
				 <text :style="{color:'#FF4D3A'}">{{noticeContent}}</text>
				 才能购买
				</view>
			</view>
		</u-modal>
		
	</view>
</template>

<script>
	import {detail,valid} from '@/api/goods.js'
	import {search} from '@/api/shop.js'
	export default {
		data() {
			return {
				show:false,
				id:0,
				loading:false,
				pageLoading:false,
				active:0,
				tab:1,
				shopList:[],
				info: {},
				location:{},
				shopInfo:{},
				distance:0,
				noticeContent:''
			}
		},
		computed: {
			
		},
		methods: {
			cancel(){
				this.show = false
			},
			getDistance() {
					var radLat1 = this.location.latitude * Math.PI / 180.0;
					var radLat2 = this.info.shopInfo.mapLat* Math.PI / 180.0;
					var a = radLat1 - radLat2;
					var b = this.location.longitude* Math.PI / 180.0 - this.info.shopInfo.mapLon* Math.PI / 180.0;
					var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
					s = s * 6378137.0;//地球半径 单位米;
					s = Math.round(s * 10000) / 10000 /1000 //输出为千米
					s = s.toFixed(2)
					this.distance = s
			},
			// 获取当前城市
			getCity(){
				let that = this
				return new Promise((resolve,reject)=>{
				uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							// 解析地址
							that.location.latitude = res.latitude
							that.location.longitude = res.longitude
							// 存储经纬度
							uni.setStorageSync('location',JSON.stringify({latitude:res.latitude,longitude:res.longitude}))
							resolve()
						},
						fail: () => {
							console.log("获取经纬度失败");
						},
					})
				})
			},
			filterMsg(val,name){
				let msg = val.replace(/\n/g, "<br>")
				if(name == 'validDay'){
					msg = val + '天'
				}
				return msg
			},
			jump(url){
				uni.navigateTo({
					url
				})
			},
			handleTab(val){
				this.tab = val
			},
			handleBuy() {
				if(!this.info.realStockNum || this.loading) return
					let that = this
				if (uni.getStorageSync('token')) {
					this.loading = true							
					valid({goodsId:that.info.goodsId,userId:JSON.parse(uni.getStorageSync('userInfo')).userId}).then(res=>{
						this.loading = false
						if(res.content){
							this.noticeContent = res.content.join().replace(/,/g,'、')
							this.show = true
						}else{
							uni.navigateTo({
								url:`/pay/pay`,
								  success: function(res) {
									// 通过eventChannel向被打开页面传送数据
									res.eventChannel.emit('pay', that.info)
								  }
							})
						}
					})
				} else {
					uni.showModal({
						title:'请登录',
						confirmText:'去登录',
						success(res){
							console.log(res);
							if(res.confirm){
								uni.navigateTo({
									url:`/login/login/login?redirect=/detail/goodsDetail/index&id=${that.info.goodsId}`
								})
							}
						}
					})
				}
			
			},
			detail(goodsId){
				this.pageLoading = true
				detail({goodsId,resource:2}).then(res=>{
					this.pageLoading = false
					if(res.state == 'Success'){
						this.info = res.content
						this.info.goodsDetail = res.content.goodsDetail.replace(/<img/gi, '<img class="img_class" ')
						uni.setNavigationBarTitle({
							title:this.info.goodsName
						})
					}
				})
			},
			goShopDetail(shopInfo) {
				uni.setStorageSync('shopInfo', JSON.stringify(this.info.shopInfo))
				uni.navigateTo({
					url: `../../detail/shopDetail/shopDetail?id=${this.info.shopId}`
				})
			},
			getShopList(goodsId){
				// let location = JSON.parse(uni.getStorageSync('location'))
				let obj = {
					goodsId,
					pageCurrent:1,
					pageSize:99
				}
				obj['location.lat'] = this.location.latitude
				obj['location.lon'] = this.location.longitude
				search(obj).then(res=>{
					if(res.state == 'Success'){
						this.shopList = res.content.records
						uni.setStorageSync('shopList',JSON.stringify(this.shopList))
						this.getDistance()
					}
				})
			}
			
		},
		onLoad(option) {
			this.id = option.id
			console.log(111111,option);
			// this.shopInfo = uni.getStorageSync('shopInfo')? JSON.parse(uni.getStorageSync('shopInfo')) :{logoPath:'',}
			this.detail(option.id)
			this.getCity().then(()=>{
				this.getShopList(option.id)
			})
			let that = this
			// this.info = JSON.parse(uni.getStorageSync('goodsInfo')) 
			// const eventChannel = this.getOpenerEventChannel();
			// if(JSON.stringify(eventChannel) !=='{}'){
			// 	eventChannel.on('goodsInfo', function(data) {
			// 		that.info = data
			// 	})
			// }
		},
		onShareTimeline() {
		  return {
		    title: "慧研学惠生活-"+this.info.goodsName,
		    query: "id="+this.id,
		  };
		},
		onShareAppMessage() {
		  return {
		    title: "慧研学惠生活-"+this.info.goodsName,
		    path: "/detail/goodsDetail/index?id="+this.id,
		  };
		},
		
	}
</script>

<style lang="scss" >
.goodsDetail{
	background: #F9F9F9;
	padding-bottom: 200rpx;
	min-height: 100vh;
	.good-img{
		width: 100%;
		height: 750rpx;
		vertical-align: bottom;
	}
	.info-box{
		background: #fff;
		.tag{
			display: inline-block;
			text-align: center;
			font-size: 20rpx;
			color: #FFFFFF;
			background: $uni-color-primary;
			padding: 2rpx 10rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-left: 24rpx;
			margin-top: 24rpx;
		}
		.price-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 116rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #F0F0F0;
			// background-image: url('../../static/price-bg.png');
			// background-repeat: no-repeat;
			// background-size: 100% 116rpx;
			padding: 10rpx 24rpx 24rpx;
			.left{
				display: flex;
				align-items: center;
				.num-box{
					display: flex;
					align-items: center;
					color: $uni-color-primary;
					.unit{
						font-size: 20rpx;
						font-weight: bold;
						align-self: flex-end;
						margin-bottom: 10rpx;
					}
					.price{
						font-weight: 600;
						font-size: 48rpx;
					}
				}
				.discount-tag{
					display: flex;
					align-items: center;
					width: 92rpx;
					height: 28rpx;
					line-height: 28rpx;
					background: #FFF6F5;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid $uni-color-primary;
					margin-left: 10rpx;
					.icon{
						width: 30.5rpx;
						height: 28rpx;
					}
					.discount-num{
						flex: 1;
						text-align: center;
						font-size: 20rpx;
						color: $uni-color-primary;
					}
				}
				.old-price{
					text-decoration: line-through;
					margin-left: 12rpx;
					font-weight: 300;
					font-size: 20rpx;
					color: #AAAAAA;
				}
			}
			.right{
				font-size: 24rpx;
				font-weight: 300;
				font-size: 24rpx;
			}
		}
		.goods-info{
			padding: 24rpx;
			margin-bottom: 20rpx;
			background: #fff;
			
			.goods-name{
				font-size: 32rpx;
				color: #222222;
				font-weight: bold;
			}
			.desc{
				font-size: 24rpx;
				color: #AAAAAA;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 12rpx;
			}
		}
	}
	.type-box{
		padding: 24rpx;
		background: #fff;
		margin-bottom: 20rpx;
		.type-title{
			font-size: 28rpx;
			color: #222222;
		}
		.type-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.type-item{
				width: 316rpx;
				height: 52rpx;
				text-align: center;
				line-height: 52rpx;
				background: #F0F0F0;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				font-weight: 300;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 28rpx;
			}
			.type-item.active{
				background: #EE4320;
				color: #FFFFFF;
			}
		}
	}
	
	.shop-limit{
		padding: 24rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		.info{
			.shop-name{
				font-size: 28rpx;
				color: #222222;
			}
			.address{
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 16rpx;
				width: 450rpx;
			}
		}
		.num{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #AAAAAA;
			.icon{
				width: 48rpx;
				height: 48rpx;
				transform: rotate(-90deg);
			}
		}
	}
	
	.combo-content{
		background: #FFFFFF;
		padding: 24rpx 24rpx 24rpx 46rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.sub-title{
			font-size: 28rpx;
			color: #222222;
			font-weight: bold;
			padding: 20rpx 0;
		}
		.item{
			padding-bottom: 20rpx;
			.item-title{
				font-weight: 600;
				font-size: 24rpx;
				color: #222222;
				position: relative;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					left: -16rpx;
					width: 6rpx;
					height: 6rpx;
					border-radius: 50%;
					background: #CCCCCC;
					transform: translateY(-50%);
				}
			}
			.item-content{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				.name{
					flex: 1;
					font-size: 24rpx;
					color: #222222;
				}
				.left{
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex: 0 0 150rpx;
					.unit{
						font-size: 20rpx;
						color: #AAAAAA;
					}
					.price{
						font-size: 24rpx;
						color: #222222;
						font-weight: 600;
						margin-left: 20rpx;
					}
				}
			}
		}
		.item+.item{
			padding-top: 20rpx;
			border-top: 1rpx solid #F0F0F0;
		}
	}
	
	.tab-group{
		display: flex;
		background: #fff;
		.tab{
			flex:1;
			padding: 24rpx 0;
			text-align: center;
			font-size: 28rpx;
			color: #222222;
		}
		.tab.active{
			font-weight: 600;
		}
	}
	
	.desc-box{
		.goods-desc{
			color: #222222;
			font-size: 24rpx;
			.img_class{
				max-width: 100%!important;
				vertical-align: bottom;
			}
		}
	}
	
	.list{
		background: #fff;
		.item{
			padding: 24rpx;
			border-top:1rpx solid #F0F0F0;
			.label{
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
			.value{
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 16rpx;
				line-height: 40rpx;
			}
		}
	}
	
	.buy-box{
		position: fixed;
		bottom: 0%;
		left: 0%;
		width: 100%;
		background: #fff;
		padding: 10rpx 24rpx 76rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		.head{
			width: 80rpx;
			height: 80rpx;
			background: #aaa;
			border-radius: 50%;
		}
		.btn-box{
			display: flex;
			text-align: center;
			.group-btn{
				width: 280rpx;
				height: 80rpx;
				background: #6499FF;
				border-radius: 40rpx 0rpx 0rpx 40rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.label{
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.price{
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			.buy-btn.none{
				filter: grayscale(1);
			}
			.buy-btn{
				// width: 280rpx;
				width: 560rpx;
				height: 80rpx;
				background: $uni-color-primary;
				border-radius: 40rpx;
				// border-radius: 0rpx 40rpx 40rpx 0rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.label{
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.price{
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	
}
</style>