<!--
 * @Author: euzhi
 * @Description: 获取挪车码
-->
<template>
<view class="appCotent">
    <div class="getCarCode">
        <div class="get__content">
            <div class="address" v-if="addressShow">
                <div class="address__left">
                    <div class="right__title" @click="geMap">
                        北京市朝阳区李家董镇太阳宫社区大唐公寓 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 v-else class="add__address" @click="addAddress">
                <image src="@/static/index/get-car-code5.png"> 添加收货地址
            </div>
            <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>静电贴材质 7.1cm*8.9cm</text>
                    </div>
                    <div class="money__num">
                        <text class="num__one">￥0.00</text>
                    </div>
                </div>
            </div>
            <u-gap bgColor="transparent" height="20"></u-gap>
            <div class="content__list">
                <div class="list__title">
                    超低价养车好物
                </div>
                <u-gap bgColor="transparent" height="20"></u-gap>
                <div class="list">
                    <div class="list__item" v-for="(vo,inx) in items" :key="inx">
                        <div class="list__img">
                            <!-- <image :src="vo.img" /> -->
                        </div>
                        <div class="list__money">
                            <div class="money__title">
                                <text>{{vo.title}}</text>
                            </div>
                            <div class="code__tips">
                                <text>{{vo.tip}}</text>
                            </div>
                            <div class="money__num">
                                <text class="num__one">¥{{vo.price2}}</text>
                                <text class="num__two">¥{{vo.price2}}</text>
                            </div>
                        </div>
                        <div class="list__add" @click="add">
                            <image src="@/static/index/get-car-code2.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <u-modal :show="show" :content='content' @confirm='show = false'></u-modal>
        <u-gap bgColor="transparent" height="65"></u-gap>
        <div class="price__bottom">
            <div class="price">
                <div class="price__num">
                    共<span>{{nums}}</span>件
                </div>
                <div class="price__all">
                    合计<span class="num__two">￥00.00</span>
                </div>
            </div>
            <div class="price__next" @click="pay">
                立即支付
            </div>
        </div>
    </div>
</view>
</template>

<script>
export default {
    data() {
        return {
            nums:0,
            show: false,
            addressShow: false,
            content: "地址不能为空",
            items: [{
                    title: '临时停车牌-经典样式',
                    tip: '静电贴材质 7.1cm*8.9cm',
                    price: '0.00',
                    price2: '19.99',
                    img: require('@/static/index/get-car-code1.png')
                },
                {
                    title: '临时停车牌-经典样式',
                    tip: '静电贴材质 7.1cm*8.9cm',
                    price: '0.00',
                    price2: '19.99',
                    img: require('@/static/index/get-car-code1.png')
                },
                {
                    title: '临时停车牌-经典样式',
                    tip: '静电贴材质 7.1cm*8.9cm',
                    price: '0.00',
                    price2: '19.99',
                    img: require('@/static/index/get-car-code1.png')
                }
            ]
        }
    },
    methods: {
        getMap() {
            uni.getLocation({
                type: 'wgs84',
                success: function (res) {
                    console.log('当前位置的经度：' + res.longitude);
                    console.log('当前位置的纬度：' + res.latitude);
                }
            });
        },
        pay() {
            this.show = true
        },
        add(){
            this.nums++
        },
        addAddress() {
            this.addressShow = !this.addressShow
        }
    },
};
</script>

<style lang="scss" scoped>
.getCarCode {
    /deep/ .u-modal__content__text {
        text-align: center !important;
    }

    .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;
        }
    }

    .get__content {
        padding: 40rpx 0rpx;

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

            .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;
                }
            }
        }

        .add__address {
            width: 670rpx;
            height: 90rpx;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
            border-radius: 10rpx;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #F88D28;
            display: flex;
            margin: 0 auto;
            align-items: center;
            justify-content: center;

            image {
                width: 34rpx;
                height: 36rpx;
                margin-right: 20rpx;
            }
        }

        .content__code {
            padding: 28rpx;
            box-sizing: border-box;
            width: 670rpx;
            height: 220rpx;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            margin: 0 auto;
            position: relative;

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

            .code__money {
                margin: 0 20rpx;

                .money__title {
                    font-size: 32rpx;
                    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;
                    }
                }
            }
        }

        .content__list {
            .list__title {
                padding-left: 40rpx;
                font-size: 38rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
            }

            .list__title::before {
                content: "";
                width: 76rpx;
                height: 14rpx;
                background-size: contain;
            }

            .list {
                position: relative;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
                padding-right: 40rpx;

                .list__item {
                    padding: 28rpx;
                    box-sizing: border-box;
                    width: 620rpx;
                    height: 220rpx;
                    background: #ffffff;
                    box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
                    border-radius: 20rpx;
                    display: flex;
                    align-items: center;
                    position: relative;
                    margin-bottom: 20rpx;

                    .list__img {
                        width: 160rpx;
                        height: 160rpx;
                        background: #3699ff;
                        border-radius: 10rpx;
                        position: absolute;
                        left: -50rpx;
                        border-radius: 20rpx;
                    }

                    .list__money {
                        margin: 0 20rpx;
                        margin-left: 100rpx;

                        .money__title {
                            font-size: 32rpx;
                            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;
                                margin-right: 20rpx;
                            }

                            .num__two {
                                font-size: 22rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #999999;
                                line-height: 42rpx;
                            }
                        }
                    }

                    .list__add {
                        position: absolute;
                        right: 30rpx;
                        bottom: 30rpx;
                        width: 44rpx;
                        height: 44rpx;

                        image {
                            width: 44rpx;
                            height: 44rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>
