<template>
<view class="appCotent">
    <view class="index-content">
        <custom-tarbar :selected="0"></custom-tarbar>
        <u-swiper :radius="0" :height="210" :list="list5" @change="(e) => (current = e.current)" :autoplay="false">
            <view slot="indicator" class="indicator">
                <view class="indicator__dot" v-for="(item, index) in list5" :key="index" :class="[index === current && 'indicator__dot--active']">
                </view>
            </view>
        </u-swiper>
        <u-gap bgColor="transparent" height="15"></u-gap>
        <div class="content__code">
            <div class="code__img"></div>
            <div class="code__money">
                <div class="money__title">
                    <text>二维码挪车贴</text>
                </div>
                <div class="code__tips">
                    <text>绑定京东账号，仅需支付邮费</text>
                </div>
                <div class="money__num">
                    <text class="num__one">￥0.00</text>
                    <text class="num__two">￥19.99</text>
                </div>
            </div>
            <div class="code__get" @click="getPrice">
                <div>
                    立即
                </div>
                <div>
                    领取
                </div>
            </div>
        </div>
        <u-gap bgColor="transparent" height="15"></u-gap>
        <div class="index__item3">
            <image src="@/static/index/index23.png"></image>
        </div>
        <u-gap bgColor="transparent" height="15"></u-gap>
        <div class="index__item3-1">
            <image src="@/static/index/index14.png"></image>
        </div>
        <u-gap bgColor="transparent" height="15"></u-gap>
        <div class="index__item4">
            <image src="@/static/index/index20.png"></image>
        </div>
        <u-gap bgColor="transparent" height="15"></u-gap>
        <div class="index__item5">
            <image src="@/static/index/index8.png"></image>
        </div>
        <u-gap bgColor="transparent" height="60"></u-gap>
    </view>
</view>
</template>

<script>
import customTarbar from "@/common/wxcomponents/custom-tarbar/custom-tarbar.vue";
export default {
    components: {
        "custom-tarbar": customTarbar,
    },
    data() {
        return {
            current: 0,
            balance: "0.00",
            list5: [
                "https://cdn.uviewui.com/uview/swiper/swiper3.png",
                "https://cdn.uviewui.com/uview/swiper/swiper2.png",
                "https://cdn.uviewui.com/uview/swiper/swiper1.png",
            ],
        };
    },
    methods: {
        getPrice() {
            uni.showToast({
                title: "您的免费领取次数已用完",
                icon: 'none',
                duration: 2000,
            });
            //跳转到领取优惠卷页面
            uni.navigateTo({
                url: '/pagesA/pages/index/getPrice'
            });
        },
    },
};
</script>

<style lang="scss">
.index-content {
    background-color: #f9f9f9;
    height: 100%;

    .index__item3 {
        width: 100%;
        height: 356rpx;

        image {
            width: 100%;
            height: 356rpx;
        }
    }

    .index__item3-1 {
        width: 100%;
        height: 711rpx;

        image {
            width: 100%;
            height: 711rpx;
        }
    }

    .index__item4 {
        width: 100%;
        height: 646rpx;

        image {
            width: 100%;
            height: 646rpx;
        }
    }

    .index__item5 {
        width: 100%;
        height: 1289rpx;

        image {
            width: 100%;
            height: 1289rpx;
        }
    }

    .content__code {
        padding: 28rpx;
        box-sizing: border-box;
        width: 630rpx;
        height: 220rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
        border-radius: 10rpx 40rpx 10rpx 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 30rpx;
        position: relative;

        .code__img {
            width: 160rpx;
            height: 160rpx;
            background: #3699ff;
            border-radius: 10rpx;
        }

        .code__money {
            margin: 0 20rpx;

            .money__title {
                font-size: 36rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 42rpx;

                .code__tips {
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #666666;
                    line-height: 42rpx;
                }
            }

            .money__num {
                .num__one {
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #e1251b;
                    line-height: 42rpx;
                }

                .num__two {
                    font-size: 22rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;
                    line-height: 42rpx;
                    position: relative;
                }
                .num__two::before{
                    content:'';
                    width: 100%;
                    height: 1rpx;
                    background:#999 ;
                    position: absolute;
                    bottom: 16rpx;
                    left: 8rpx;
                }
            }
        }

        .code__get {
            position: absolute;
            right: -60rpx;
            width: 90rpx;
            height: 90rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            padding-top: 4rpx;
            box-sizing: border-box;
            text-align: center;
            background: url("@/static/index/index26.png") no-repeat;
            background-size: contain;
        }
    }

    /deep/ .u-swiper__indicator {
        right: 0 !important;
    }

    /deep/ .u-swiper {
        border-radius: 0 0 0 100rpx !important;
    }

    .indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
            height: 20rpx;
            width: 20rpx;
            border-radius: 100%;
            background-color: rgba(255, 255, 255, 0.35);
            margin: 0 10rpx;
            transition: background-color 0.3s;

            &--active {
                background-color: #e1251b;
            }
        }
    }

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

        &__text {
            color: #ffffff;
            font-size: 24rpx;
        }
    }
}
</style>
