<template>
	<view class="page" >
		<view  >
		   <!-- <view class='u-header main-between'>
				<view>开箱展示</view>
				 <view @click="close"><image class="bd-icon" src="../../../static/image/icon/clear.png"></image></view>
			</view> -->
		    <view class="u-body dir-top-nowrap cross-center" style="margin-top: 200upx;">
		      <!--  <image class="u-img" :src="img"></image>
		        <text class="u-text">申请获取您绑定的手机号</text> -->
		       <swiper
		            class="swiper"
		            
		            v-bind:indicator-dots="picList.length>1"
		            circular
		            indicator-color="rgba(255,255,255,.3)"
		            indicator-active-color="#30353c"
		        >
		         
		        
		            <swiper-item v-for="(item, index) in picList" v-bind:key="index">
		                <view class="swiper-img"
		                      @click="clickImage(index)" v-bind:style="{backgroundImage: 'url(' + item.pic_url + ')'}">
		        			
		        
		                </view>
		            </swiper-item>
		        </swiper>
				<view class="bd-subtitle">左右滑动查看开箱展示</view>
		    </view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import uCharts from "../../components/u-charts/u-charts.min.js"
	export default {
		components: {
		
		},
		data() {
			return {
				picList:[],
				height:0
				
			};
		},
		onLoad(options) {
			//this.$refs.priceLine.init();
		
			let that=this;
			wx.getSystemInfo({
			    success: function(res) {
			        that.height =  res.windowHeight;
			    }
			})
			this.loadData(options.id);
		},
		methods: {
			loadData(id) {
			    this.$showLoading();
			    this.$request({
			        url: this.$api.goods.detail,
			        data: {
			            id: id
			        }
			    }).then(response => {
			        this.$hideLoading();
			        if (response.code === 0) {
			            let { open_pic } = response.data.goods;
						this.picList=open_pic
						
			        } else {
			            uni.showToast({
			                title: response.msg,
			                icon: 'none'
			            });
			        }
			    }).catch(() => {
			        this.$hideLoading();
			    });
			},
		}
	}
</script>

<style lang="scss">
.u-content {
	    background-color: #ffffff;
	}
	
	.u-header {
	   padding: 5upx;
	    border-bottom: 1upx solid #eeeeee;
	    color: #353535;
	    font-size: 28upx;
	}
	.u-img {
	    width: 88upx;
	    height: 88upx;
	    text-align: center;
	    margin: 32upx 0 40upx;
	}
	.u-body {
	    padding: 0 24upx;
	
	}
	.u-text {
	    margin-bottom: 40upx;
	    font-size: 26upx;
	    color: #666666;
	}
	.bd-icon {
	    width: 40upx;
	    height: 40upx;
	}
	.bd-subtitle{
		padding: 5upx;
		font-size: 24upx;
		line-height: 44upx;
		color: #999999;
	}
	.swiper {
	    height: #{650rpx};
		
		width: 100%;
	    .swiper-img {
	        width: 100%;
	        height: #{650rpx};
	        background-size: cover;
	        background-repeat: no-repeat;
	        background-position: center;
	        position: relative;
	    }
	}
</style>
