关于uniapp:uniapp开发app使用subNVue原生子窗体

64次阅读

共计 4351 个字符,预计需要花费 11 分钟才能阅读完成。

首先须要在 pages.json 中配置

{
            "path": "pages/client/initiateElectronContract/index",
            "style": {
                "navigationBarTextStyle": "white",
                "navigationBarTitleText": "编辑电子合同",
                "navigationBarBackgroundColor": "#00bdbd",
                "backgroundColor": "#00bdbd",
                "navigationStyle": "custom",
                "app-plus": {
                    "subNVues": [
                        {
                            "id": "initiateContractShare", // 惟一标识  
                            "type": "popup",
                            "path": "pages/client/initiateElectronContract/subNVue/share",
                            "style": {
                                "position": "absolute",
                                "bottom": "0",
                                "left": "0",
                                "right": "0",
                                "width": "100%",
                                "height": "200px"
                            }
                        },
                        {
                            "id": "tips",
                            "type": "popup",
                            "path": "pages/client/initiateElectronContract/subNVue/popup"
                        }
                    ]
                }
            }
        },

popup.nvue 文件

<template>
    <view class="page">
        <view class="shares">
            <view class="title"> 开始签约 </view>
            <view class="content">
                <text class="tip"> 发动签约后,合同内容不能再次批改,同时会耗费一份合同的使用量,是否开始签约?</text>
            </view>
            <view class="operation">
                <view class="cancel btn" @click="cancel">
                    <text class="txt canceltxt"> 勾销 </text>
                </view>
                <view class="confirm btn" @click="confirm">
                    <text class="txt confirmtxt"> 确定 </text>
                </view>
            </view>
            <view class="close" @click="cancel">
                <image src="../../../../static/close.png" style="width: 20px;height: 20px;" alt="close" />
            </view>
        </view>
    </view>
</template>

<script>
    export default {data() {return {};
        },
        created() {
            const vm = this;
            // 接管信息的页面
            // uni.$on('from-parent', (data) => {
            //     uni.showToast({
            //         title: data.type + ',' +  data.content
            //     })
            //     switch (data.type) {
            //         case '1':
            //             break;
            //         case '2':
            //             break;
            //         case '3':
            //             break;
            //             // .... 
            //     }
            // });
        },
        beforeDestroy() {
            // 页面销毁之前 移除监听器
            // uni.$off('from-parent');
        },
        methods: {cancel() {
                // 获取以后 subNVues 原生子窗体的实例。const subNVue = uni.getCurrentSubNVue();
                // 子窗体暗藏
                subNVue.hide();},
            confirm() {
                // 获取以后 subNVues 原生子窗体的实例。const subNVue = uni.getCurrentSubNVue();
                // 向父窗体传递参数
                uni.$emit('to-parent', {
                    type: '3',
                    content: content
                });
                // 子窗体暗藏
                // 可自定义 暗藏动画成果,工夫
                // subNVue.hide();},
        }
    }
</script>
<style>
    /* 分享弹窗 */
    .shares {
        height: 300px;
        font-size: 20upx!important;
        padding: 10px;
    }
    .title {
        width: 300px;
        display: flex;
        text-align: center;
        justify-content: center;
    }
    .tip {
        font-size: 16px;
        padding: 20px 0 10px;
    }
    .operation {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #606266;
        padding: 10px 30px;
    }
    .txt {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
    }
    .close {
        position: absolute;
        top: 10px;
        right: 10px;
    }
</style>

index.vue 文件

<template>
    <view class="initiateContract">
        <view class="html-box">
            <web-view :src="'../../../hybrid/html/viewContract/index.html?data=' + obj"ref="wv"></web-view>
        </view>
        
        <view class="footer">
            <view class="box">
                <view class="item">
                    <view class="btn">
                        <u-button type="primary" :key="1" :plain="true" text="保留合同"></u-button>
                    </view>
                </view>
                <view class="item" @click="share">
                    <view class="btn">
                        <u-button type="primary" :key="2" text="分享预览"></u-button>
                    </view>
                </view>
                <view class="item">
                    <view class="btn">
                        <u-button type="primary" :key="3" text="开始签约"></u-button>
                    </view>
                </view>
                <view class="item">
                    <view class="btn">
                        <u-button :disabled="true" :key="4" type="success" text="签约中"></u-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "electronContractEdit",
        data() {
            return {obj: null}
        },
        onLoad() {
            const vm = this;
            // 接管信息的页面 (子窗体向父窗体传递参数)
            uni.$on('to-parent', (data) => {switch( data.type){
                    case '1':
                        uni.setClipboardData({
                            data: this.shareImgInfo.result.tips,
                            success: function () {console.log('success');
                                uni.showToast({
                                    icon: 'none',
                                    title: '链接已复制'
                                })
                            }
                        });
                        break;
                    case '2':
                        console.log('分享到微信')
                        break;
                }
            });
        },
        methods: {
            // 形式一:关上 id 为 initiateContractShare 的 nvue 文件
            share() {const subNVue = uni.getSubNVueById('initiateContractShare'); //  对应 page.json 的 id
                // 向子窗体传递参数
                // uni.$emit('from-parent',{
                //     type: '1',
                //     content: '父给子参数 1'
                // })
                // 1: 子窗体从顶部进入(动画成果), 2: 显示原生子窗体的动画持续时间
                subNVue.show('slide-out-top', 300)
            },
            
            // 形式二:关上 id 为 tips 的 nvue 文件
            openSubNVue() {const subNVue = uni.getSubNVueById('tips'); //  对应 page.json 的 id
                // 向子窗体传递参数
                // uni.$emit('from-parent',{
                //     type: '1',
                //     content: '父给子参数 1'
                // })
                
                // 1: 子窗体从顶部进入(动画成果), 2: 显示原生子窗体的动画持续时间
                subNVue.setStyle({    // 在 js 中设置款式
                    "position": "absolute",
                    "width": "300px",
                    "height": "180px",
                    "margin": "auto",    // 居中
                    "color": "#000000",
                    "background-color": "#FFFFFF",
                    "border-top-left-radius": "15px",
                    "border-top-right-radius": "15px"
                })
                subNVue.show('slide-out-top', 300)
            },
        },
        beforeDestroy() {
            // 页面销毁之前 移除监听器
            uni.$off('to-parent')
        },
    }
</script>

<style lang="scss" scoped>
    .initiateContract {
        .footer {
            position: fixed;
            bottom: 0px;
            left: 0px;
            right: 0px;
            z-index: 9999;
            padding: 10px 0 20px;
            background: #fff;
            border-top: 1px solid #f3f3f3;
            .box {
                display: flex;
                justify-content: space-around;
                align-items: center;
                .item {
                    .btn {margin: 0 auto;}
                }
            }
        }
    }

</style>

这里设置 nvue 窗体地位的款式有两种形式,一种是在 page.json 中配置,另一种则是通过办法设置。

正文完
 0