<!--
 * @Author: euzhi
 * @Description: 支付
-->
<template>
<view class="appCotent">
<div class="pay">
    <div class="address">
        <div class="address__left">
            <div class="right__title">
                北京市朝阳区李家董镇太阳宫社区大唐公寓 2号楼3单元303
            </div>
            <div class="right__phone">
                <span>默认</span> <span>我是收货人</span><span>19963353323</span>
            </div>
        </div>
        <div class="address__right">
            <image src="@/static/index/right.png" />
        </div>
        <u-gap bgColor="transparent" height="15"></u-gap>
    </div>
    <div class="pay__item">
        <div class="item">
            <div class="item__top">
                <div class="top__img">
                    <img src="" alt="" srcset="">
                </div>
                <div class="top__right">
                    <div class="right__one one__text">
                        <span>强力清洗剂 大容量 标</span>
                        <span>￥25.5</span>
                    </div>
                    <div class="right__two">
                        <span>强力清洗剂 大容量 标120 ml*3瓶装</span>
                        <span>×4</span>
                    </div>
                </div>
            </div>
            <div class="item__bottom">
                <div class="bottom__item">
                    <div>商品总价:</div>
                    <div>￥48.00</div>
                </div>
                <u-gap bgColor="transparent" height="15"></u-gap>
                <div class="bottom__item">
                    <div>总金额:</div>
                    <div class="bottom__price">￥48.00</div>
                </div>
            </div>
        </div>
    </div>
    <div class="price__bottom">
        <div class="price">
            <div class="price__num">
                共<span>1</span>件
            </div>
            <div class="price__all">
                合计<span>￥48.00</span>
            </div>
        </div>
        <div class="price__next" @click="pay">
            立即支付
        </div>
    </div>
</div>
</view>
</template>

<script>
export default {
    methods: {
        pay() {
            uni.navigateTo({
                url: '/pagesC/pages/shop/payOk'
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.pay {
    padding-top: 40rpx;

    .price__bottom {
        width: 100%;
        height: 156rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 19rpx 2rpx rgba(215, 215, 215, 0.21);
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        position: fixed;
        bottom: 0;
        padding: 32rpx 40rpx;
        box-sizing: border-box;
        clear: both;

        .price {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .price__num {

                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;

                span {
                    font-size: 32rpx;
                    font-family: DIN;
                    font-weight: 500;
                    color: #333333;
                }
            }

            .price__all {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
                padding-right: 250rpx;

                span {
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #E1251B;
                }
            }
        }

        .price__next {
            width: 240rpx;
            height: 98rpx;
            background: url('@/static/index/border-btn.png') no-repeat;
            background-size: contain;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            opacity: 0.96;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: -10rpx;
        }
    }

    .address {
        background: #ffffff;
        display: flex;
        align-items: center;
        padding: 30rpx 40rpx;
        margin-bottom: 30rpx;

        .address__left {
            .right__title {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 48rpx;
                margin-bottom: 20rpx;
            }

            .right__phone {
                display: flex;
                align-items: center;

                span:nth-of-type(1) {
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #F88D28;
                    padding: 2rpx 4rpx;
                    border: 1rpx solid #F88D28;
                }

                span:nth-of-type(2) {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #666666;
                    padding: 0 14rpx;
                }

                span:nth-of-type(3) {
                    font-size: 28rpx;
                    font-family: DIN;
                    font-weight: 500;
                    color: #666666;
                }
            }
        }

        .address__right {
            image {
                width: 14rpx;
                height: 24rpx;
            }
        }
    }

    .pay__item {
        padding: 30rpx 40rpx;

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

            .item__top {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .top__img {
                    width: 120rpx;
                    height: 120rpx;
                    background: #F88D28;
                    border-radius: 8rpx;
                }

                .top__right {
                    .right__one {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        >span:nth-of-type(1) {
                            font-size: 32rpx;
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #333333;
                            width: 320rpx;
                            padding-right: 70rpx;
                        }

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

                    .right__two {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

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

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

            .item__bottom {
                margin-top: 30rpx;

                .bottom__item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

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

                    >div:nth-of-type(2) {
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #666666;
                    }

                    .bottom__price {
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #F1251B !important;
                    }
                }
            }
        }
    }

}
</style>
