<template>
    <view class="sdetails">
        <u-swiper :list="list" height="500" border-radius="0"></u-swiper>
        <view class="info">
            <view class="title">
                <text>{{ goodsInfo.store_name }}</text>{{ goodsInfo.goods_name }}        
            </view>
            <view class="pic">
                <text>￥{{ goodsInfo.goods_price }}</text>
                <s>￥{{ goodsInfo.goods_marketprice }}</s>
            </view>
        </view>
        <view class="hr"></view>
		<!-- <navs :value="领券"></navs> -->
        <navs :value="'产品规格'"></navs>
		<navs :value="'产品颜色'"></navs>
		<navs :value="'选择尺码'"></navs>
        <view class="xiangqing">
            <view class="heng"></view>
            <view class="title">商品详情</view>
            <view class="heng"></view>
        </view>
		<view class="rich">
			<rich-text :nodes="goodsInfo.mobile_body"></rich-text>
		</view>
        <tloos :id="goodsInfo.goods_commonid"></tloos>
    </view>
</template>
<script>
import navs from "../components/sdetails/navs"
import tloos from "../components/sdetails/tloos"
export default {
    name:"sdetails",
    data() {
        return {
            list: [],
			goodsInfo: {},
        }
	},
    components:{
        navs,
        tloos
    },
	onLoad(option) {
		this.getGoodsDetails(option.id);
	},
	methods: {
		getGoodsDetails(id) {
			this.$u.api.getGoodsDetails({ id: id }).then((res)=>{
				if (res.errCode == 0) {
					this.goodsInfo = res.data;
					this.goodsInfo.goods_image_mobile.forEach(item => {
						let temp = {
							image: item
						}
						this.list.push(temp);
					})
					// console.log(this.goodsInfo.mobile_body);
					
				}
			})
		}
	},
}
</script>
<style lang="scss" scoped>
.sdetails{
	padding-bottom: 98rpx;
    .info{
        padding: 30rpx;
        .title{
            flex-wrap: wrap;
			margin-bottom: 30rpx;
            >text{
                padding: 13rpx;
                font-size: 24rpx;
                color:#fff;
                margin-right: 13rpx;
                background-color: #FF780F;
                display: inline-block;
                border-radius: 25rpx;
            }
        }
        .pic{
            >text{
                font-size: 32rpx;
                color: #FF3131;
            }
            >s{
                font-size: 26rpx;
                color: #999;
                display: inline-block;
                margin-left: 30rpx;
            }
        }
    }
    .hr{
        width: 100%;
        height: 20rpx;
        background-color: #ececec;
    }
    .xiangqing{
        display: flex;
        height: 85rpx;
        background-color: #ececec;
        align-items: center;
        justify-content: center;
        .heng{
            width: 79rpx;
            height: 2rpx;
            background-color: #a9a9a9;

        }
        font-size: 28rpx;
        color: #999;
        .title{
            margin: 0 20rpx;
        }
    }
	.rich {
		width: 100%;
	}
}
</style>