<template>
    <JyPopup type="bottom" ref="popup" title="立即支付" showSave @savePost="goto('/pages/shop/continue-pay/index')">
        <!-- 收获地址卡片 -->
        <view class="bj">
            <JyCommodityAddress class="mt40"></JyCommodityAddress>
            <!-- 商品图 价格 明细 数量 -->
            <view class="jy-card-commodity-content df mtb40">
                <!-- 商品图 -->
                <image src="https://cdn.jsdelivr.net/gh/Jiuyi-team/jiuyi-uniapp-demo/static/images/commodity.png"
                    mode="widthFix"></image>
                <!-- 价格 明细 数量 -->
                <view class="content-info">
                    <!-- 价格 -->
                    <view class="content-info-price">￥ 999.00</view>
                    <!-- 明细 -->
                    <view class="content-info-num">查看明细</view>
                    <!-- 数量 - 1 + -->
                    <view class="w200">
                        <uni-number-box :value="1" :step="1" />
                    </view>
                </view>
            </view>
            <!-- 规格 类型 颜色 -->
            <view class="content-spec">
                <view class="mtb20" v-for="(item, index) in 2">
                    <!-- 标题 -->
                    <view class="content-spec-title">颜色</view>
                    <view class="content-spec-list">
                        <uni-tag class="mlr10 mtb20" :inverted="true" text="item123123"
                            :type="0 ? 'warning' : 'default'" v-for="(item, index) in 2">
                        </uni-tag>
                    </view>
                </view>
            </view>
            <!-- 订单备注 -->
            <view class="content-remark mtb40 ">
                <view class="content-remark-title">订单备注</view>
                <view class="content-remark-input">
                    <uni-easyinput :inputBorder="false" type="textarea" placeholder="选填，如填写，我们会在订单备注中提示您" />
                </view>
            </view>
        </view>
    </JyPopup>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
import JyPopup from '@/components/public/jy-popup'
// 地址
import JyCommodityAddress from '@/components/public/jy-commodity-address'
const popup = ref(null)

const goto = (url) => {
    uni.navigateTo({
        url
    })
}
const open = () => {
    // 显示
    popup.value.open();
}
//暴露方法
defineExpose({
    open
})
</script>
<style lang="scss" scoped>
.bj {
    padding: 4rpx 24rpx;

}

.jy-card-commodity-content {

    image {
        background: #333333;
        margin-right: 32rpx;
        width: 164rpx;
        height: 164rpx;
        border-radius: 10rpx;
    }
}

.content-spec {
    margin: 20rpx 0;

    .content-spec-title {
        font-size: 30rpx;
    }

    .content-spec-list {
        margin: 20rpx 0;
    }
}

.content {
    margin: 24rpx 0;

    .content-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.content-bottom {
    .content-bottom-price {
        border-radius: 10rpx;
        opacity: 1;

        /* 自动布局 */
        padding: 20rpx 226rpx;
        background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);

        .t {
            font-size: 32rpx;
            color: #FFFFFF;
        }

        .p {
            font-size: 40rpx;
            color: #FFFFFF;
        }
    }
}
</style>