jiuyiUniapp/jiuyi/pages/shop/continue-pay/components/jy-shop-data/index.vue

<template>
    <!-- 继续付款商品信息 -->
    <view class="jy-continue-pay-info">
        <!-- 商品信息 -->
        <JyShopInformation class="mt20"></JyShopInformation>
        <!-- 商品信息 -->
        <JyCommodityInformation :orderInfo="orderInfo" :showType="1"></JyCommodityInformation>
        <!-- 联系商家按钮 -->
        <uni-section class="line">
            <template v-slot:right>
                <view class="df jcfe mt20">
                    <button class="jy-btn-primary df aic jcc"><uni-icons class="mr20" color="#0F9D13"
                            type="chat"></uni-icons><text class="f24">联系商家</text></button>
                </view>
            </template>
        </uni-section>
        <!-- 积分抵扣 -->
        <uni-section class="line">
            <template v-slot:right>
                <view class="df aic">
                    <text class="c333 f28">积分抵扣：</text>
                    <text class="price f20">-￥</text>
                    <text class="price f32">5.00</text>
                </view>
            </template>
        </uni-section>
        <!-- 应付 -->
        <uni-section class="line">
            <template v-slot:right>
                <view class="df aic">
                    <text class="c333 f28">应付：</text>
                    <text class="price f20">￥</text>
                    <text class="price f32">5.00</text>
                </view>
            </template>
        </uni-section>
        <!-- 支付方式选择 -->
        <view class="checklist mt20">
            <uni-data-checkbox v-model="radio1" :localdata="paymentM">
                <template v-slot:default="{ data }">
                    <!-- 图片 + 文本 -->
                    <view class="df aic">
                        <image class="wh60 mr20" :src="data.icon" mode="aspectFill"></image>
                        <text class="f24">{{ data.text }}</text>
                    </view>
                </template>
            </uni-data-checkbox>
        </view>
        <!-- 提交订单 -->
        <view class="content-bottom" :style="{ bottom: bottomSafeAreaHeight() }">
            <view class="df aic">
                <text class="c333 f28">应付：</text>
                <text class="price f20">￥</text>
                <text class="price">5.00</text>
            </view>
            <button class="content-bottom-price" @click="goto('/pages/shop/continue-pay/index')">
                <text class="cfff f24">继续付款</text>
                <view class="df cfff aic">
                    <text class="f24">剩余：</text>
                    <uni-countdown color="#fff" :show-day="false" :hour="12" :minute="12" :second="12" />
                </view>
            </button>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
// 店铺信息
import JyShopInformation from '@/components/public/jy-shop-information'
// 商品信息
import JyCommodityInformation from '@/components/public/jy-commodity-information'

import { bottomSafeAreaHeight } from '@/components/public/Mixins.js'


import shopWeixinPay from '@/static/shop-weixin-pay.png'
import shopAlipayPayment from '@/static/shop-alipay-payment.png'
import shopApplypay from '@/static/shop-apply-pay.png'
import shopBankPayment from '@/static/shop-bank-payment.png'

const radio1 = ref('1')
const paymentM = [
    {
        text: '微信支付',
        value: '1',
        icon: shopWeixinPay
    },
    {
        text: '支付宝支付',
        value: '2',
        icon: shopAlipayPayment
    },
    {
        text: '余额支付',
        value: '3',
        icon: shopApplypay
    },
    {
        text: '余额支付',
        value: '4',
        icon: shopBankPayment
    }
]
</script>
<style lang="scss" scoped>
.jy-continue-pay-info {




    .jy-btn-primary {
        border-radius: 8rpx;
        border: 1rpx solid #999999;
        font-size: 24rpx;
        color: #333333;
        height: 48rpx;
    }

    .price {
        font-size: 36rpx;
        color: #FF7F37;
    }

    ::v-deep .checklist-group {
        flex-direction: column;

        .uni-label-pointer {
            flex-direction: row-reverse;
            justify-content: space-between;
            padding: 16rpx 0 16rpx 24rpx;
        }
    }

    ::v-deep .uni-countdown__splitor {
        color: #ffffff !important;
    }

    .checklist {
        background-color: #ffffff;
        margin-bottom: 200rpx;
    }

    .content-bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        position: sticky;
        width: 100%;
        background-color: #ffffff;
        padding: 40rpx 20rpx;

        .content-bottom-price {
            margin: 0px;
            width: 350rpx;
            line-height: normal;
            border-radius: 10rpx;
            /* 自动布局 */
            background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8rpx 0;
        }
    }
}
</style>