<template>
<view class="appCotent">
<div class="shop__detail">
    <div class="top__swiper">
        <u-swiper radius='0' :list="list6" @change="e => currentNum = e.current" :autoplay="false" height='358' indicatorStyle="right: 20px">
            <view slot="indicator" class="indicator-num">
                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
            </view>
        </u-swiper>
        <div class="shop__title">
            <div>{{mallInfo.title}} {{mallInfo.description}}</div>
            <div>
                <span>￥{{mallInfo.currentPrice/100}}</span>
                <span>销量{{mallInfo.sales}}笔</span>
            </div>
        </div>
        <div class="shop__title__2">规格 <span>{{mallInfo.spec}}</span></div>
        <div class="shop__content">
            <div class="content__title">
                商品详情
            </div>
            {{mallInfo.detailContent}}
        </div>
    </div>
    <div class="shop__btn view__no__bind" @click="pay()">立即购买</div>
    <u-gap bgColor="transparent" height="80"></u-gap>
</div>
</view>
</template>

<script>
export default {
    data() {
        return {
            currentNum: 0,
            list6: [require('@/static/shop/item.jpg'),
                require('@/static/shop/item.jpg'),
                require('@/static/shop/item.jpg'),
            ],
			//商品id
			id: '',
			//商品详情
			mallInfo: {},
        }
    },
    methods: {
        pay(){
            uni.navigateTo({
                url: '/pagesC/pages/shop/pay?id=' + this.id
            })
        },
		getMallInfo(){
			let opts = { url: '/app/mall/' + this.id, method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					this.mallInfo = res.data.data
				}
			})
		},
    },
	onLoad(option) {
		this.id = option.id
	},
	onShow() {
		this.getMallInfo()
	},
}
</script>

<style lang="scss" scoped>
.shop__detail {

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        margin-bottom: 40rpx;
        @include flex;
        justify-content: center;

        &__text {
            color: #FFFFFF;
            font-size: 12px;
        }
    }

    .shop__title {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 0rpx 0rpx 20rpx 20rpx;
        padding: 10rpx 40rpx 30rpx 40rpx;
        border-radius: 20rpx;

        >div:nth-of-type(1) {
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-bottom: 20rpx;
        }

        >div:nth-of-type(2) {
            display: flex;
            justify-content: space-between;

            >span:nth-of-type(1) {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #F1251B;
            }

            >span:nth-of-type(2) {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
            }
        }
    }

    .shop__title__2 {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 20rpx;
        padding: 30rpx 40rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin: 30rpx 0;

        span {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            padding-left: 30rpx;
        }
    }

    .shop__content {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28prx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 20rpx;
        padding: 40rpx 30rpx;

        .content__title {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            text-align: center;
            margin-bottom: 30rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 42rpx;
        }
    }

    .shop__btn {
        width: 670rpx;
        height: 76rpx;
        text-align: center;
        line-height: 76rpx;
        margin: 0 auto;
        font-size: 32rpx;
    }

    .view__no__bind {
        background: url('@/static/move-car/move-car-view2.png') no-repeat;
        margin-bottom: 30rpx;
        background-size: contain;
        color: rgba(255, 255, 255, 1);
        position: fixed;
        bottom: 60rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}
</style>
