<template>
	<view class="container">
		<view class="top">
			<image class="goodsImageUrl" :src="goodsData.goodsImageUrl"  mode="aspectFill"/>
			<view class="title">{{goodsData.goodsName}}</view>
			<view class="pointsNum">{{goodsData.requiredPoints}}<view class="f"> 积分</view></view>
		</view>
		<view class="h"></view>
		<view class="bom">
			<view class="title">商品详情</view>
			<view class="goodsDescription">{{goodsData.goodsDescription}}</view>
		</view>
		<view class="btn" @click="exchange">立即兑换</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsData: null,
				shopUserInfo: uni.cache.get('shopUserInfo'),
				shopId: null,
			};
		},
		onLoad(options) {
			if ( options.shopId ) {
				this.shopId = options.shopId;
				this.goodsData = JSON.parse(options.goodsData);
			}
		},
		onShow() {
		},
		methods: { 
			/**
			 * 立即兑换
			 */
			exchange () {
				uni.navigateTo({
					url: `/pagesPoints/confirm_order/index?shopId=${this.shopId}&goodsData=${JSON.stringify(this.goodsData)}`,
				})
			},
		}
	};
</script>
<style>
	page {
		background-color: #fff!important;
	}
</style>
<style scoped lang="scss">
	
	.top{
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding-bottom: 32rpx;
		.goodsImageUrl{
			width: 100%;
			height: 530rpx;
		}
		.title{
			font-weight: bold;
			font-size: 32rpx;
			color: #1A1A1A;
			padding: 32rpx 20rpx;
		}
		.pointsNum{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			display: flex;
			align-items: flex-end;
			padding: 0 20rpx;
			.f{
				font-weight: normal;
				font-size: 24rpx;
			}
		}
	}
	.h{
		width: 100%;
		height: 14rpx;
		background-color: #f9f9f9;
	}
	.bom{
		padding: 32rpx 20rpx;
		background-color: #fff;
		.title{
			font-weight: bold;
			font-size: 32rpx;
			color: #1A1A1A;
		}
		.goodsDescription{
			font-weight: 400;
			font-size: 28rpx;
			color: #1A1A1A;
			margin-top: 32rpx;
		}
	}
	.btn{
		width: 556rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		background: #E8AD7B;
		border-radius: 49rpx 49rpx 49rpx 49rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 68rpx;
		left: 0;
		right: 0;
		margin: auto;
	}
	
</style>