更新记录

1.0.3（2024-11-23） 下载此版本

组件优化

1.0.2（2023-06-28） 下载此版本

组件优化

1.0.1（2023-06-28） 下载此版本

组件优化

平台兼容性

cc-payDialog

uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板

●组件模板规划：

由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。

合集地址： uni-app模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945) 如查看全部页面模板，请前往上述uniapp插件市场合集地址；

●组件模板效果图：

可下载项目后预览，效果图见右侧图片；

●组件模板费用：

学习：免费下载，进行学习，无费用；

使用/商用：本页面地址赞赏10元后，可终身商用；

●组件模板使用版权/商用：

本组件模板免费下载可供学习，如需使用及商用，请在本组件页面模板进行赞赏10元

（仅需10元获取精品页面模板代码-物有所值，1个组件页面市场价100元 ）

赞赏10元后（当前项目产生赞赏订单可追溯）即可终身商用当前本地址下载的页面模版代码，不同下载地址需进行不同的赞赏。（不赞赏就进行商用使用者，面临侵权！保留追究知识产权法律责任！后果自负！）

我的技术公众号(私信可加前端技术交流群)

群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼

使用方法

复制代码<!--:money：支付金额  show：是否显示 @cancel:取消  @success：确认支付 -->
<cc-payDialog :money="money" :show="payVisible" @cancel="cancelPayHandle" @success="successPayHandle"></cc-payDialog>

HTML代码实现部分

复制代码<template>
    <view class="content">

        <button style="margin-top: 29px;" @click="goPayClick">微信支付</button>

        <!--:money：支付金额  show：是否显示 @cancel:取消  @success：确认支付 -->
        <cc-payDialog :money="money" :show="payVisible" @cancel="cancelPayHandle"
            @success="successPayHandle"></cc-payDialog>
    </view>
</template>

<script>
    export default {
        components: {

        },
        data() {
            return {
                payVisible: false,
                money: '88',
            };
        },
        onLoad: function(e) {

        },
        methods: {
            goPayClick() {
                this.payVisible = true;

            },
            successPayHandle: function() {
                this.payVisible = true;
            },
            cancelPayHandle: function() {
                this.payVisible = false;
            },

        }
    };
</script>

<style lang="scss" scoped>
    .content {

        display: flex;
        flex-direction: column;
    }
</style>

组件实现代码

复制代码
    <template>
        <view :class="'pop-up ' + (show ? 'show' : 'hide')">
            <view @tap="close" class="pop-up-mask ptp_exposure" data-ptpid="1fkl-vm1a-vieo-9fh2" v-if="show"></view>
            <view :class="'pop-box ' + (isPartDetails ? 'pb' : '')">
                <view class="pop-box-title">现金支付</view>
                <view @tap="close" class="iconfont iconclose pop-box-close ptp_exposure" data-ptpid="fk13-fu28-zfo1-82hf">
                </view>
                <view class="pop-box-select">
                    <view>微信</view>
                    <view class="iconfont iconradio_selected pop-box-icon"></view>
                </view>
                <view class="pop-box-tips">
                    <text>需支付：</text>
                    <text class="pop-box-tips-red">{{ money }}元</text>
                </view>
                <view class="pop-box-agreement">
                    <image @tap="selectHandle" class="pop-box-agreement-icon"
                        src="https://qiniu-image.qtshe.com/20210617_selectActive.png" v-if="select"></image>
                    <image @tap="selectHandle" class="pop-box-agreement-icon"
                        src="https://qiniu-image.qtshe.com/20210617_select.png" v-else></image>
                    <view>本人确认</view>
                    <view @tap="jumpToAgreement" class="pop-box-agreement-text" data-ptpid="ufn1-vm1a-vo2m-vu2b">《支付相关协议》
                    </view>
                </view>
                <view @tap="payHandle" class="pop-box-button ptp_exposure" data-ptpid="du1g-f8h1-ch1n-vhm1">确认支付</view>
            </view>
        </view>
    </template>

    <script>
        export default {
            data() {
                return {
                    select: true
                };
            },
            props: {
                show: {
                    type: Boolean,
                    default: false
                },
                money: {
                    type: [String, Number],
                    default: 0.01
                },
                isPartDetails: {
                    type: Boolean,
                    default: false
                }
            },
            methods: {
                close: function() {
                    this.$emit("cancel")
                },
                payHandle: function() {

                    this.$emit("success")
                },
                jumpToAgreement: function() {

                },
                selectHandle: function() {

                    this.select = !this.select;
                }
            }
        };
    </script>
    <style lang="scss">
        @import './index.scss';
    </style>