hxj-adrioid/pages/goods-details/goods-details.vue

<template>
	<view class="">
		<uni-nav-bar left-icon="left"  :title="goodsdetais.name" color="" :statusBar="true" :border="false" :size="60" @clickLeft="back"/>
		<view class="goods-details">
			<view class="goods-image">
				<image :src="goodsdetais.cover_pic" mode="widthFix"></image>
			</view>
			<view class="infogoods">
				<text class="goods-name">{{goodsdetais.name}}</text>
				<view class="goods-price">
					<view class="all-price">
						<text class="tag">￥</text>
						<text class="pricenum">{{goodsdetais.original_price}}</text>
					</view>
					<view class="coup-price">
						<text class="couptag">券后价 ￥</text>
						<text class="couprice">{{goodsdetais.price}}</text>
					</view>
				
				</view>
				<view class="totalnum">
					<text>销量{{goodsdetais.sales}}{{goodsdetais.unit}}</text>
				</view>
			</view>
		
			
		</view>
		<view class="goods-specific">
			<view class="specific-detail" >
				<view class="one">
					<text class="specific-title">商品规格</text>
					<view class="kindof" v-for="(item,inedx) in goodsdetais.attr_groups" >
					
							<text class="kindoftitle">{{item.attr_group_name}}</text>		
							<view v-for="i in item.attr_list"  class="kindofspec" >
							<text>{{i.attr_name}}<text v-if="item.attr_list.length>1">/</text></text>
							</view>
		
					</view>
				</view>
				
		
				
			</view>
			
		</view>
		<view class="goods-webview">
			<view class="goodsmsg">
				<text class="tah" style="padding-right: 24rpx;" id="gang">— </text>
				<text>商品详情</text>
				<text class="tah" style="padding-left: 24rpx;" id="ang">—</text>
			</view>
			
		</view>
		<view class="addshop" @click="open">
			<uni-icons type="cart-filled" size="40" color="#fff"></uni-icons>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="icode">
				<text style="font-size: 28rpx;">扫描二维码，去微信商城购买</text>
				<view class="codeimg">
					<image src="/static/image/hxj.jpg" mode="aspectFill"></image>
				</view>
			</view>
		</uni-popup>
		<!-- <view class="webview">
			<view v-html="goodsdetais.detail"></view>
		</view> -->
		<view >
			<bd-detail :detail="goodsdetais.detail" ></bd-detail>
		</view>
	</view>
</template>

<script>
	let _this
	import bdDetail from "@/components/goods/bd-detail.vue"
	
	export default {
		components: {
			bdDetail
		},
		data() {
			
			return {
				id:'',
				goodsdetais:[],
				webview:'/static/image/zu.png',
				speclist:[
					{
						"name":"颜色",
						"kind":"黄色/绿色/蓝色/紫色"
					},
					{
						"name":"尺码",
						"kind":"xs/s/m/xl"
					},
				],
				webview:''
			}
		},
		onLoad(option) {
			_this=this
			"id" in option?this.id=JSON.parse(option.id):''
			this.getGoods()
		},
		methods: {
			open() {
			           this.$refs.popup.open()
			       },
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getGoods(){
				uni.showLoading({
					title:"加载中",
					marsk:true
				})
				_this.$post('api/goods/detail',{
					data:{
						id:_this.id,
						plugin:"mall",
					},
					success(res){
						uni.hideLoading()
						if(res.code==1){
							_this.$toast(res.msg)
						}else{
							_this.goodsdetais=res.data.goods
							console.log(_this.goodsdetais,55)
						}
					},
					error(err) {
						_this.$toast(err)
					}
				},'GET')
			}
		}
	}
</script>

<style lang="scss">
	.canshu{
		text-align: center;
		
		.canshutitle{
			color: #222222;
			display: flex;
			flex-direction: column;
			margin: 45rpx 0;
		}
		.td-form{
			padding:0 40rpx;
			box-sizing: border-box;
			padding-bottom: 80rpx;
		}
	}
	.addshop{
		position: fixed;
		bottom: 80rpx;
		z-index: 999;
		right: 70rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color:  #AE8445;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.icode{
		width: 600rpx;
		height: 600rpx;
		background-color: #fff;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.codeimg{
			margin-top: 10rpx;
			width: 450rpx;
			height: 450rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.infogoods{
		box-sizing: border-box;
		padding:0 30rpx;
		padding-bottom: 40rpx;
		.goods-name{
			font-size: 35rpx;
			font-weight: 600;
			display: block;
			padding-right: 20rpx;
		}
		.coup-price{
			background-image: url(../../static/image/couimgbg.png);
			background-size:100% 100%;
			// background-position: center;
			// width: 250rpx;
			height: 60rpx;
			line-height: 50rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			text-align: center;
			box-sizing: border-box;
			.couptag{
				font-size: 24rpx;
			}
			.couprice{
				font-size: 30rpx;
				
			}
		}
		.goods-price{
			font-size: 40rpx;
			color: #F95353;
			display: flex;
			margin-top: 24rpx;
			}
			.totalnum{
				margin-top: 24rpx;
				font-size: 22rpx;
				padding-left: 7rpx;
				color: #A2A4AB;
				box-sizing: border-box;
			}
	}
	page{
		background-color: #F8F8F8;
		padding: 0;
		margin: 0;
		font-family: PingFang-SC-Heavy;
	}
	html{
		padding: 0;
		margin: 0;
	}
	body{
		padding: 0;
		margin: 0;
		
	}
	.webview{		
		width: 750rpx;
		// height: 1000rpx;
		image{
			// display: block;			
			width:750rpx;
			height: 100%;
		}
	}
.goods-details{
	background-color: #FFFFFF;
	// display: flex;	
	flex-direction: column;
	// justify-content: center;
	align-items: center;
	.goods-image{
		// margin-top: 30rpx;
		width: 100%;
		// height: 664rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	// .infogoods{
	// 	.goods-name{
	// 		font-size: 35rpx;
	// 		font-weight: 600;
	// 	}
		
	// }
	.goods-title{
		width: 690rpx;
		margin: 40rpx 0;
		
		.goods-name{
			font-size: 32rpx;
			font-weight: 600;
		}
		.goods-price{
			color: #F95353;
			display: flex;
			margin-top: 24rpx;
			
			.all-price{
				font-weight: bold;
				margin-right: 12rpx;
				
				
				.tag{
					font-size: 28rpx;
				}
				.pricenum{
					font-size: 44rpx;
				}
			}
			.coup-price{
				background-image: url(../../static/image/couimgbg.png);
				background-size:100% 100%;
				// background-position: center;
				// width: 250rpx;
				height: 60rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				text-align: center;
				box-sizing: border-box;
				.couptag{
					font-size: 24rpx;
				}
				.couprice{
					font-size: 30rpx;
					
				}
			}
		}
		.totalnum{
			margin-top: 24rpx;
			font-size: 22rpx;
			padding-left: 7rpx;
			color: #A2A4AB;
			box-sizing: border-box;
		}
	}
}
.goods-specific{
	margin-top: 18rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	padding: 36rpx 34rpx 0 34rpx;
	box-sizing: border-box;
	.specific-detail{
		box-sizing: border-box;
		
		width: 690rpx;
		// padding-bottom: 50rpx;
		.specific-title{
			font-size:18rpx;
			font-weight: bold;
			// padding-top: 35rpx;
			display: block;
			padding-bottom: 24rpx;
			box-sizing: border-box;
		}
		
		.kindof{
			padding-bottom: 12rpx;
			display: flex;
			box-sizing: border-box;
			.kindoftitle{	
				width: 150rpx;
				font-size:16rpx;
				font-weight: 500;
				color: #222222;
			}
			.kindofspec{
				width: 480rpx;
				display: block;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
				font-size: 16rpx;
				margin-left: 40rpx;
				color: #666666;
				box-sizing: border-box;
			}
			
		}
		.one{
			margin-bottom: 30rpx;
		}
		.two{
			margin-bottom: 50rpx;
		}
		
	}
	
}
.goods-webview{
		background-color: #FFFFFF;
		// width: 750rpx;
		.goodsmsg{
			font-size: 26rpx;
			color: #666666;
			text-align: center;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			.tah{
				
			}
			@media  screen and (-webkit-min-device-pixel-ratio:0) {
			    #gang {
			    background: -webkit-gradient(linear,left top,right bottom,from(#FFFFFF),to(#666666));
			    -webkit-background-clip: text;
			    -webkit-text-fill-color: transparent;
			    }
			}
			@media  screen and (-webkit-min-device-pixel-ratio:0) {
			    #ang {
			    background: -webkit-gradient(linear,left top,right bottom,from(#666666),to(#FFFFFF));
			    -webkit-background-clip: text;
			    -webkit-text-fill-color: transparent;
			    }
			}
		}
	}
</style>