<template>
    <ui-page-layout title="确认订单">
        <div class="p-24rem">

            <div class="bg-white pb-84rem rounded-10rem">

                <van-field label-width="300rem" label-class="text-size-36rem text-[#282828]" label="购买人信息">

                    <template v-slot:input>
                        <div></div>
                    </template>
                </van-field>
                <van-field :label="$t('收货人')" :value="name"></van-field>
                <van-field :label="$t('收货电话')" :value="phone"></van-field>
                <van-field type="textarea" :value="addr" :label="$t('收货地址')"></van-field>

                <van-field label-width="300rem" label-class="text-size-36rem text-[#282828]" :label="$t('商品信息')">

                    <template v-slot:input>
                        <div></div>
                    </template>
                </van-field>
                <div class="h-150rem flex mb-68rem px-4.26667vw">
                    <img src="/imgs/article_cover_small1.png" class="w-150rem h-150rem object-cover" />
                    <div class="ml-20rem flex flex-col justify-between">
                        <div class="text-size-30rem">
                            这里是产品名称这里是产品名称这里是产品名称
                        </div>
                        <div class="flex justify-between items-center">
                            <div class="text-size-30rem text-primary font-light">¥79</div>
                            <div class="text-size-30rem text-[#686868] font-light">
                                <div class="flex h-40rem input-number ">
                                    <div class="w-40rem bg-[#F7F7F7] flex justify-center items-center">-</div>
                                    <div class="w-80rem">
                                        <van-field center class="!p-0  !h-40rem"></van-field>
                                    </div>
                                    <div class="w-40rem bg-[#F7F7F7] flex justify-center items-center">+</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div
            class="absolute w-full bottom-0 h-98rem border-t-1rem border-solid border-[#D8D8D8] flex justify-around items-center">
            <div>
                <span class="text-size-30rem text-[#686868] ">共1件 </span>
                <span class="text-size-30rem text-[#282828] ">合计：</span>
                <span class="text-size-48rem text-primary">¥79.00</span>

            </div>
            <div @click="show = true"
                class="rounded-full flex items-center justify-center w-237rem h-70rem bg-primary text-white text-size-30rem">
                提交订单
            </div>
        </div>

        <van-action-sheet v-model="show">
            <div class="h-859rem w-full bg-[#F7F7F7] flex flex-col items-center relative">
                <img @click="show = false" src="/imgs/h5-action-close.png"
                    class="w-31rem absolute right-23rem top-33rem" />
                <div class="text-size-30rem text-primary absolute top-91rem ">
                    月会员 30天
                </div>
                <div class="text-size-100rem text-primary absolute top-158rem ">
                    <span class="text-size-60rem">￥</span>
                    79.00
                </div>
                <div class="h-326rem"></div>
                <div
                    class="text-[#FF0000] w-654rem h-100rem bg-white rounded-30rem text-size-30rem font-300 flex justify-center items-center mb-24rem">
                    支付方式1
                </div>
                <div
                    class="w-654rem h-100rem bg-white rounded-30rem text-size-30rem font-300 flex justify-center items-center mb-24rem">
                    支付方式2
                </div>
                <div
                    class=" font-300 w-600rem h-88rem bg-primary rounded-full text-white text-size-30 flex justify-center items-center absolute bottom-88rem">
                    确认交易
                </div>

            </div>
        </van-action-sheet>

    </ui-page-layout>
</template>

<script>
export default {
    data() {
        return {
            show: false,


            name: '陈小婷',
            phone: '18926145786',
            addr: '广州市黄埔区联和街道黄埔科学大道112号绿地广场1710室'
        }
    }
}
</script>

<style >
.input-number .van-field__body input {
    text-align: center;
    font-size: 20rem;
}
</style>