3***@qq.com
3***@qq.com
  • 发布:2021-12-24 11:12
  • 更新:2021-12-24 15:46
  • 阅读:586

【报Bug】弹窗在APP端不能正常弹出

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows11

HBuilderX类型: 正式

HBuilderX版本号: 3.2.16

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: 华为mate30

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <scroll-view>  
        <view>  
            <uni-segmented-control :current="current" :values="items" @clickItem="switch_tab" styleType="button"  
                activeColor="#3589b8" class="bx-switch"></uni-segmented-control>  
            <view class="content">  
                <view v-if="current === 0">  
                    <nx-search :selectList="search_list" button="inside" placeholder="请输入关键字" @search="search_sample"  
                        @confirm="search_sample" v-model="searchQuery.keyword" />  
                    <uni-list>  
                        <uni-list-item :showArrow="false">  
                            <view class="flex text-bold align-center text-center">  
                                <view class="flex-sub">样品ID</view>  
                                <view class="flex-sub">样品名称</view>  
                                <view class="flex-sub">样品状态</view>  
                                <view class="flex-sub">样品时间</view>  
                            </view>  
                        </uni-list-item>  
                    </uni-list>  
                    <uni-list v-for="(item,index) in sample_list" :key="item.sample_number">  
                        <uni-list-item :showArrow="false" style="border-top:1px solid #8799A3;"  
                            @tap="show_modal(item.sample_number)">  
                            <view class="flex align-center text-center">  
                                <view class="flex-sub bx-outline">{{item.c_sample_id_sm}}</view>  
                                <view class="flex-sub">{{item.sample_name}}</view>  
                                <view class="flex-sub">{{item.status}}</view>  
                                <view class="flex-sub">{{item.login_date}}</view>  
                            </view>  
                        </uni-list-item>  
                    </uni-list>  

                </view>  
                <view v-if="current === 1">  
                    <nx-search :selectList="search_list" button="inside" placeholder="请输入关键字" @search="search_sample"  
                        @confirm="search_sample" v-model="searchQuery.keyword" />  
                    <uni-list>  
                        <uni-list-item :showArrow="false">  
                            <view class="flex text-bold align-center text-center">  
                                <view class="flex-sub">ID</view>  
                                <view class="flex-sub">名称</view>  
                                <view class="flex-sub">状态</view>  
                                <view class="flex-sub">时间</view>  
                            </view>  
                        </uni-list-item>  
                    </uni-list>  
                    <uni-list v-for="(item,index) in sample_list" :key="item.sample_number">  
                        <uni-list-item :showArrow="false" style="border-top:1px solid #8799A3;"  
                            @tap="show_pic(item.sample_number)">  
                            <view class="flex align-center text-center">  
                                <view class="flex-sub bx-outline">{{item.c_sample_id_sm}}</view>  
                                <view class="flex-sub">{{item.sample_name}}</view>  
                                <view class="flex-sub">{{item.status}}</view>  
                                <view class="flex-sub">{{item.login_date}}</view>  
                            </view>  
                        </uni-list-item>  
                    </uni-list>  
                </view>  
                <uni-pagination :show-icon="true" :total="pagination.total" :current="pagination.current"  
                    :pageSize="pagination.pageSize" @change="pagination_search"></uni-pagination>  
            </view>  
        </view>  
        <!-- 样品接收弹窗 -->  
        <view class="cu-modal" :class="modalName == 'Receive' ? 'show' : ''">  
            <view class="cu-dialog bg-white">  
                <view class="cu-bar justify-end">  
                    <view class="model-title">接收提醒</view>  
                    <view class="action" @tap="hide_modal"><text class="cuIcon-close text-red"></text></view>  
                </view>  
                <view class=" align-center">  
                    <view class="flex text-center">  
                        <view class="flex-twice">  
                            <swiper style="height: 600rpx;" :indicator-dots="true" :circular="true" :autoplay="true"  
                                :interval="3000" :duration="1000">  
                                <swiper-item v-for="(item,index) in swiper.info" :key="index">  
                                    <img class="swiper-img" :src="item.url"></img>  
                                </swiper-item>  

                            </swiper>  
                        </view>  
                    </view>  
                    <view class="flex padding-sm text-center">  
                        <view class="flex-twice">  
                            <button class="cu-btn bg-blue" @tap="upload_pic()">拍照</button>  
                        </view>  
                    </view>  

                </view>  
                <view class="cu-bar bg-white align-center justify-center">  
                    <view class="action">  
                        <button class="cu-btn bg-red " @tap="hide_modal">取消</button>  
                        <button class="cu-btn bg-green margin-left" @tap="recive_sample()">接收样品</button>  
                    </view>  
                </view>  
            </view>  
        </view>  
        <!-- 样品照片照片 -->  
        <view class="cu-modal" :class="pic_modal == 'pic' ? 'show' : ''">  
            <view class="cu-dialog bg-white">  
                <view class="cu-bar justify-end">  
                    <view class="model-title">照片详情</view>  
                    <view class="action" @tap="hide_pic()"><text class="cuIcon-close text-red"></text></view>  
                </view>  
                <view class="flex">  
                    <view class="flex-twice">  
                        <swiper style="height: 600rpx;" :indicator-dots="true" :circular="true" :autoplay="true"  
                            :interval="3000" :duration="1000">  
                            <swiper-item v-for="(item,index) in swiper.info" :key="index">  
                                <img class="swiper-img" :src="item.url" :alt="item.url" ></img>  
                            </swiper-item>  

                        </swiper>  
                    </view>  
                </view>  
                <view class="cu-bar bg-white align-center justify-center">  
                    <view class="action">  
                        <button class="cu-btn bg-green margin-left" @tap="hide_pic()">确定</button>  
                    </view>  
                </view>  
            </view>  
        </view>  
        <!-- 扫码接收弹窗 -->  
        <view class="cu-tips" :class="TipModal == 'tips' ? 'show' : ''">  
            <view class="cu-dialog tips-text">  
                <view class="align-center bg-black">  
                    <view class="cu-tips-list" @tap="scan_sample()">  
                        <view class="flex align-center">  
                            <view class="flex-sub">  
                                <uni-icons type="scan" color="white" size="20"></uni-icons>  
                            </view>  
                            <view class="flex-treble">扫码接收</view>  
                        </view>  
                    </view>  
                </view>  
            </view>  
        </view>  

    </scroll-view>  
</template>  

<script>  
    import {  
        uniqueId  
    } from '../../js_sdk/mineking-tool/tool.js'  
    export default {  
        data() {  
            return {  
                //图片轮播组件  
                swiper: {  
                    info: [{  
                            url: ''  
                        },  

                    ],  
                    current: 0,  
                    mode: 'round'  
                },  
                //搜索组件  
                search_value: '',  
                searchQuery: {  
                    keyword: '',  
                    selectIndex: 0  
                },  
                search_list: [{  
                        key: 'sample_number',  
                        value: '样品编号'  
                    },  
                    {  
                        key: 'sample_name',  
                        value: '样品名称'  
                    }  

                ],  
                //  
                current: 0,  
                //下拉选择框的index  
                selectIndex: 0,  
                items: ['未接收', '已接收'],  
                //接收样品弹窗  
                modalName: '',  
                pic_modal: '',  
                TipModal: '',  
                sample_list: [{  
                        sample_number: '001',  
                        c_sample_id_sm: '',  
                        sample_name: '02233',  
                        status: '未接收',  
                        login_date: '2021-05-06'  
                    }  

                ],  
                //选中的数据  
                selected: '',  
                //分页组件  
                pagination: {  
                    current: 1,  
                    total: 1,  
                    pageSize: 10  
                },  
                //查询参数  
                queryParams: {  
                    type: '0sample_number',  
                    keyword: '',  
                    current: 1,  
                    total: 1,  
                    pageSize: 10  
                },  
            }  
        },  
        onNavigationBarButtonTap() {  
            if (this.TipModal == 'tips') {  
                this.TipModal = '';  
            } else {  
                this.TipModal = 'tips';  
            }  
        },  
        onLoad() {  
            this.load_sample_list()  
            //console.log(uniqueId())  
        },  
        methods: {  
            default_img(){  
                uni.showToast({  
                    title:'xxxx'  
                })  
            },  

            /* 切换tab页 */  
            switch_tab(e) {  
                console.log(e)  
                this.current = e.currentIndex  
                this.reload_pages()  
                this.queryParams.type = this.current + this.search_list[this.selectIndex].key  
                this.queryParams.keyword = e.keyword  
                this.load_sample_list()  
            },  
            /* 切换tab页时重置分页组件数据 */  
            reload_pages() {  
                var pagination = {  
                    current: 1,  
                    total: 1,  
                    pageSize: 10  
                }  
            },  
            /* 搜索 */  
            search_sample(e) {  
                //debugger  
                //组合查询类型,“tab页编码+类型名称”  
                this.selectIndex = e.selectIndex  
                this.queryParams.type = this.current + this.search_list[this.selectIndex].key  
                this.queryParams.keyword = e.keyword  
                this.load_sample_list()  
            },  
            /* 未接收样品照片弹窗 */  
            show_modal(e) {  
                this.queryParams.type = 'sample'  
                this.queryParams.keyword = e  
                this.download_pic()  
                this.modalName = 'Receive'  
                this.selected = e  
            },  
            /* 隐藏操作弹窗 */  
            hide_modal(e) {  
                this.modalName = ''  
            },  
            /* 已接收样品照片 弹窗*/  
            show_pic(e) {  
                this.queryParams.type = 'sample'  
                this.queryParams.keyword = e  
                this.download_pic()  
                this.pic_modal = 'pic'  
            },  
            /* 隐藏照片弹窗 */  
            hide_pic() {  
                this.pic_modal = ''  
            },  
            /* 接收样品 */  
            recive_sample() {  
                this.modalName = ''  
                var samples = {  
                    'sample_number': this.selected,  
                    'status': 'I',  
                    'old_status': 'U',  
                    'received_by': 'admin',  
                    'assigned_operator': 'default'  
                }  
                uni.request({  
                    url: getApp().globalData._api_get_sample_recived,  
                    method: 'GET',  
                    data: samples,  
                    success: res => {  
                        if (res.data.Data > 0) {  
                            this.queryParams.keyword = ''  
                            this.queryParams.type = '0sample_number'  
                            this.load_sample_list()  
                        }  
                    },  
                    fail: () => {},  
                    complete: (res) => {  
                        console.log(res.data)  
                    }  
                });  
            },  
            /* 扫码*/  
            scan_sample() {  
                this.TipModal = ''  
                var _this = this  
                // #ifdef APP-PLUS  
                uni.scanCode({  
                    success(res) {  
                        _this.selected = res.result  
                        var scanresult = res.result  
                        console.log(res)  
                        //查询样品是否存在,是否被接收  
                        uni.request({  
                            url: getApp().globalData._api_get_sample_detail,  
                            method: 'GET',  
                            data: {  
                                type: "0",  
                                keyword: res.result  
                            },  
                            success: res => {  
                                console.log(res.data.Data)  
                                if (res.data.Data == "") {  
                                    uni.showToast({  
                                        image: '../../static/labicon/vwemergency.png',  
                                        title: '不存在'  
                                    })  
                                } else if (res.data.Data[0].STATUS != 'U') {  

                                    uni.showToast({  
                                        image: '../../static/labicon/vwemergency.png',  
                                        title: res.data.Data[0].STATUS  
                                    })  

                                } else {  
                                    _this.selected = scanresult  
                                    _this.show_modal(scanresult)  
                                }  
                            },  
                            fail: () => {},  
                            complete: () => {}  
                        });  

                        //_this.recive_sample()  
                    }  
                });  
                // #endif  

            },  
            /* 分页查询函数 */  
            pagination_search(e) {  
                this.queryParams.current = e.current  
                this.load_sample_list()  
                //console.log(e)  
            },  
            /* 加载列表 */  
            load_sample_list() {  
                uni.request({  
                    url: getApp().globalData._api_get_sample,  
                    method: 'GET',  
                    data: this.queryParams,  
                    success: res => {  
                        this.pagination.total = res.data.Data.TotalItems  
                        this.sample_list = res.data.Data.Items  
                        console.log(this.pagination)  
                    },  
                    fail: () => {},  
                    complete: () => {}  
                });  
            },  
            /* 上传图片 */  
            upload_pic() {  
                var filepaths = []  
                uni.chooseImage({  
                    success: (res) => {  
                        const tempFilePaths = res.tempFilePaths;  
                        //console.log(res.tempFilePaths)  
                        var files = [];  
                        var fileParams = [];  
                        var upload_url = getApp().globalData.basic_url + getApp().globalData  
                            ._api_post_pic  

                        console.log(res.tempFilePaths.length)  

                        for (var i = 0; i < res.tempFilePaths.length; i++) {  
                            files.push({  
                                'uri': res.tempFilePaths[i],  
                                'name': uniqueId(),  
                            })  

                        }  
                        if (process.env.NODE_ENV === 'development') {  
                            //args.url = getApp().globalData.basic_url + args.url  
                            upload_url = getApp().globalData.basic_url + getApp().globalData  
                                ._api_post_pic  

                        } else {  
                            upload_url = getApp().globalData.dev_url + getApp().globalData  
                                ._api_post_pic  

                        }  
                        uni.uploadFile({  
                            url: upload_url, //仅为示例,非真实的接口地址  
                            // filePath: tempFilePaths[0],  
                            // name: 'file',  
                            files: files,  
                            formData: {  
                                user_id: '',  
                                object_number: this.selected,  
                                object_type: 'sample',  
                                guid: uniqueId()  
                            },  
                            success: (uploadFileRes) => {  
                                console.log(uploadFileRes.data);  
                                //拍照后重新加载  
                                this.download_pic()  
                            },  
                            complete: (res) => {  
                                console.log(res)  
                            }  
                        });  
                    }  
                });  

            },  
            /* 加载图片路径 */  
            download_pic() {  
                console.log(this.queryParams)  
                console.log(this.BascUrl())  
                uni.request({  
                    url: getApp().globalData._api_get_pic,  
                    method: 'GET',  
                    data: this.queryParams,  
                    success: res => {  
                        var len = res.data.Data.length  
                        this.swiper.info = []  
                        for (var i = 0; i < res.data.Data.length; i++) {  
                            this.swiper.info.push({  
                                'url': this.BascUrl() + '/pic/' + res.data.Data[i]  
                            })  
                        }  

                        if(len == 0){  
                            this.swiper.info.push({'url':'../../static/image/default.png'})  
                        }  

                        console.log(this.swiper.info)  
                    },  
                    fail: () => {},  
                    complete: () => {}  
                });  
            }  
        }  
    }  
</script>  

<style>  
    .bx-list-item {  
        padding-left: 100rpx;  
        padding-right: 100rpx;  
    }  

    .bx-switch {  
        /* padding-top: 20rpx; */  
        margin-top: 20rpx;  

    }  

    .model-title {  
        position: absolute;  
        text-align: center;  
        width: calc(100% - 170px);  
        left: 0;  
        right: 0;  
        bottom: 0;  
        top: 0;  
        margin: auto;  
        height: 30px;  
        font-size: 16px;  
        line-height: 30px;  
        cursor: none;  
        pointer-events: none;  
        text-overflow: ellipsis;  
        white-space: nowrap;  
        overflow: hidden;  
    }  

    .tip-location {  
        position: fixed;  
        top: 0;  
        right: 10;  
        bottom: 0;  
        left: 0;  
        z-index: 1110;  
        opacity: 0;  
        outline: 0;  
        text-align: center;  
        -ms-transform: scale(1.185);  
        -webkit-transform: scale(1.185);  
        transform: scale(1.185);  
        -webkit-backface-visibility: hidden;  
        backface-visibility: hidden;  
        -webkit-perspective: 1000px;  
        perspective: 1000px;  
        background: rgba(0, 0, 0, 0.6);  
        -webkit-transition: all 0.3s ease-in-out 0s;  
        transition: all 0.3s ease-in-out 0s;  
        pointer-events: none;  
    }  

    .tips-text {  
        width: 33%;  
        margin: 10rpx;  
        position: fixed;  
        /* #ifdef APP-PLUS */  
        top: 0;  
        /* #endif */  
        /* #ifdef H5 */  
        top: 44px;  
        /* #endif */  

        right: 0;  
    }  

    .swiper-img {  
        width: 100%;  
        height: 600rpx;  
        max-width: 100%;  
        display: block;  
        background: url(../../static/image/default.png) repeat;  
        background-size: cover;  
    }  
</style>  

操作步骤:

新建一个uniapp项目,将提供的代码复制到一个页面中,打包成APP测试

预期结果:

弹窗正常打开

实际结果:

弹窗不能正常打开

bug描述:

该页面的弹窗在APP端无法弹出,在H5端没问题,真机调试也没问题。

2021-12-24 11:12 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

用示例代码hello uni-app能出现你的问题吗?
不能的话你需要排查出来具体你哪个页面,甚至哪一行导致的。
找出来具体原因后提供一个能复现你描述的bug的最小化demo,让我们及时定位问题,及时修复。

3***@qq.com

3***@qq.com (作者)

重建uniapp项目没问题,排查这个问题我需要反复打正式包,次数不够该如何解决

  • DCloud_UNI_Anne

    用示例代码hello uni-app没问题的话,你需要排查自己的代码,打自定义基座调试

    2021-12-24 17:35

  • 3***@qq.com (作者)

    回复 DCloud_UNI_Anne: 初步怀疑是list组件的问题

    2021-12-24 18:06

  • 3***@qq.com (作者)

    回复 DCloud_UNI_Anne: 废弃了list组件,改用uni-table组件,问题解决了。

    2021-12-24 20:10

  • 3***@qq.com (作者)

    回复 DCloud_UNI_Anne: 今天重新打包后又不行了,还是这个界面,还是H5没问题,APP打包后就不行。昨天时用的自定义基座调试成功的。

    2021-12-25 15:38

  • DCloud_UNI_Anne

    回复 3***@qq.com: 自定义基座调试有复现过这个问题吗?建议最小化demo,删减法逐步排查

    2021-12-25 17:26

  • 3***@qq.com (作者)

    回复 DCloud_UNI_Anne: 有时出现,有时不出现

    2021-12-26 10:52

该问题目前已经被锁定, 无法添加新回复