discounts-minapp/detail/goodsDetail/index.vue

<template>
	<view class="goodsDetail">
		<image class="good-img" :src="info.studyItem" mode=""></image>
		<view class="goods-box">
			<view class="goods-name">
				{{info.goodsName}}
			</view>
			<view class="tab">
				{{goodsTypeObj[info.goodsCode]}}
			</view>
		</view>
		<view class="price">
			¥ {{info.buyPrice}}
		</view>
		<view class="desc-box">
			<view class="title">
				商品说明
			</view>
<!-- 			<view class="goods-desc">
					{{info.goodsDescribe}}
			</view> -->
			<rich-text class="goods-desc" :nodes="info.goodsDescribe"></rich-text>
		</view>
		
		<button class="buy-btn" type="default" @click="handleBuy">立即购买</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				goodsTypeObj:{}
			}
		},
		methods: {
			handleBuy() {
				if (uni.getStorageSync('token')) {
					let that = this
					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'
								})
							}
						}
					})
				}
				
			
			}
		},
		onLoad() {
			let that = this
			this.goodsTypeObj = JSON.parse(uni.getStorageSync('goodsTypeObj'))
			this.info = JSON.parse(uni.getStorageSync('goodsInfo')) 
			// const eventChannel = this.getOpenerEventChannel();
			// if(JSON.stringify(eventChannel) !=='{}'){
			// 	eventChannel.on('goodsInfo', function(data) {
			// 		that.info = data
			// 	})
			// }
		}
		
	}
</script>

<style lang="scss" scoped>
.goodsDetail{
	.good-img{
		width: 100%;
		height: 420rpx;
	}
	.goods-box{
		display: flex;
		align-items: center;
		margin-left: 32rpx;
		margin-top: 28rpx;
		.goods-name{
			font-weight: bold;
			color: #222222;
			font-size: 32rpx;
		}
		.tab{
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 24rpx;
			background: #FF4C3A;
			border-radius: 0rpx 12rpx 0rpx 12rpx;
			margin-left: 20rpx;
			padding: 0 6rpx;
		}
	}
	.price{
		font-weight: 800;
		color: #FF4C3A;
		font-size: 36rpx;
		margin-left: 32rpx;
		margin-top: 20rpx;
		padding-bottom: 28rpx;
	}
	.desc-box{
		padding: 0 32rpx 150rpx;
		.title{
			font-weight: bold;
			color: #222222;
			font-size: 32rpx;
			padding: 30rpx 0;
			border-top: 1rpx solid #F0F0F0;
		}
		.goods-desc{
			color: #222222;
			font-size: 24rpx;
		}
	}
	
	.buy-btn{
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 688rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: bold;
		color: #FFFFFF;
		font-size: 28rpx;
		background: $uni-color-primary;
		box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.16);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
	}
}
</style>