2***@qq.com
2***@qq.com
  • 发布:2024-08-05 10:43
  • 更新:2024-08-18 14:00
  • 阅读:186

uniapp+vue2 使用cli打包出来dist文件,在components文件夹下不带.css,是为什么

分类:uni-app

如题

2024-08-05 10:43 负责人:无 分享
已邀请:
2***@qq.com

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

并且使用refs调用子组件的方法会报错,单独打印refs又是有值的

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

Vue2 在小红书下 compoents 的产物,看下 css 是吧?你测试新项目可以复现吗,我接下来使用新项目试一下,如果可以,最好提供可以复现的工程,或者单页面源码。提供更多信息,有助于定位和解答你的问题。

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

    项目中所有引入的子组件都没有样式,而且使用$refs调用子组件方法会this.$refs.termToast.startCount is not a function

    2024-08-05 16:11

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

    下面我附上了父组件和子组件代码,帮忙看看,感谢!

    2024-08-05 16:11

2***@qq.com

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

父组件

<template>  
    <view>  
        <view class="auth-panel">  
            <!-- <view class="icon-box"> </view> -->  
            <view class="auth-box">  
                <view class="logo-box"> </view>  
                <view class=" license flex align-center" @click="accept">  
                    <view class="radio mar-r-15" :class="{accept : isAccept}"></view>  
                    <p class="flex1">我已阅读并同意<text>《隐私权政策》《免责声明》</text>和<text>《用户协议》</text></p>  
                </view>  
                <!-- <view class="content ">购买船票需要获取您的<span style="color: black;">身份信息(姓名、身份证号)</span>,请输入实名信息进行验证授权,如果身份信息已注册将自动绑定已有账号,未注册将自动生成对应账号  
            </view> -->  
                <!-- <view class="input-box">  
                <view class="input-line">  
                    <text class="label">姓名</text>  
                    <input placeholder="请输入姓名" @input="nameInput" placeholder-class="colorc4">  
                </view>  
                <view class="input-line">  
                    <text class="label">身份证号</text>  
                    <input placeholder="请输入身份证号" @input="idInput" placeholder-class="colorc4">  
                </view>  
            </view> -->  
                <!-- #ifdef MP-WEIXIN || MP-XHS -->  
                <view v-if="!isAccept" class="user_btn newUser_btn font-w-500 font30 colorff" @click="getIsAccept">  
                    手机号快速授权<span style="color: #FFEC1D;">(新用户推荐)</span>  
                </view>  
                <view v-else class="user_btn newUser_btn font-w-500 font30 colorff">  
                    <button class="user_btn newUser_btn font-w-500 font30 colorff" open-type="getPhoneNumber"  
                        @getphonenumber="getPhoneNumber">  
                        手机号快速授权<span style="color: #FFEC1D;">(新用户推荐)</span>  
                    </button>  
                </view>  
                <!-- #endif -->  
                <!-- #ifdef MP-ALIPAY -->  
                <button v-if="!isAccept" class="user_btn newUser_btn font-w-500 font30 colorff" @click="goAuth">  
                    手机号快速授权<span style="color: #FFEC1D;">(新用户推荐)</span>  
                </button>  
                <button class="user_btn newUser_btn font-w-500 font30 colorff" v-else open-type="getAuthorize"  
                    scope="phoneNumber" @getAuthorize="getAlpayPhone">手机号快速授权<span  
                        style="color: #FFEC1D;">(新用户推荐)</span>  
                </button>  
                <!-- #endif -->  

                <!-- #ifdef H5 -->  
                <button v-if="!isAccept" class="user_btn newUser_btn font-w-500 font30 colorff" @click="goAuth">  
                    手机号快速授权<span style="color: #FFEC1D;">(新用户推荐)</span>  
                </button>  
                <UPButton v-else class="user_btn newUser_btn font-w-500 font30 colorff" @click="getAuthYunMobile"  
                    scope="scope.mobile">  
                    手机号快速授权<span style="color: #FFEC1D;">(新用户推荐)</span>  
                </UPButton>  

                <UPButton class="user_btn oldUserAuth_btn font-w-500 font30 color66" @click="getAuthYunAll"  
                    scope="scope.mobile,scope.auth">实名认证登录 (旧用户推荐)</UPButton>  
                <!-- #endif -->  
                <!-- #ifndef H5 -->  
                <view class="user_btn oldUserAuth_btn font-w-500 font30 color66" @click="oldUserAuthAuth(2)">实名认证登录  
                    (旧用户推荐)  
                </view>  
                <!-- #endif -->  
                <view class="font26 color99 font-w-500 mar-t-30">查看历史订单的旅客建议使用实名认证方式登录账号</view>  

                <!-- #ifndef MP-WEIXIN -->  
                <!-- <view class="btn-back" @click="back">返回</view> -->  
                <!-- #endif -->  
            </view>  
            <view :class="{'hidden':!showTerms}">  
                <terms ref="termToast" @close="termsClose"></terms>  
            </view>  
            <phone-toast v-if="showPhone" @close="phoneClose" @close2='phoneClose'></phone-toast>  

            <ship-loading></ship-loading>  
        </view>  
        <view class="fixed auth_bg">  
            <image src="https://img.bhhfwl.cn/ferry/static/index/auth_bg.png"></image>  
        </view>  
        <authPopup v-if="changeShow" :authType="authType" :authMsg="authMsg" @closeChange='closeChange'  
            @authRmind="authRmind" @yunAuthorize="yunAuthorize" />  
    </view>  
</template>  

<script>  
    import terms from './components/termsAuth.vue'  
    import phoneToast from '@/components/phoneToast.vue'  
    import authPopup from '../../components/auth/authPopup.vue'  

    export default {  
        components: {  
            terms,  
            phoneToast,  
            authPopup  
        },  
        data() {  
            return {  
                openid: '',  
                isAccept: false,  
                showTerms: false,  
                showPhone: false,  
                real_name: '',  
                cred_id: '',  
                path: '',  
                authType: 0,  
                changeShow: false,  
                authMsg: '',  
                fromPath: '',  
                oldAuthType: ''  
            }  
        },  
        methods: {  
            goAuth() {  
                // #ifdef MP-WEIXIN || MP-XHS  

                if (!this.real_name || !this.cred_id) {  
                    uni.showToast({  
                        title: '请填写身份证号和姓名',  
                        icon: 'none',  
                        duration: 2000  
                    });  
                    return  
                }  

                var nameReg = /^[\u4E00-\u9FA5]/  
                var idcardReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/  
                if (!nameReg.test(this.real_name)) {  
                    this.toastThis('请检查姓名格式是否正确')  
                    return  
                }  
                if (!idcardReg.test(this.cred_id)) {  
                    this.toastThis('请检查证件号码格式是否正确')  
                    return  
                }  
                // #endif  

                if (!this.isAccept) {  
                    uni.showToast({  
                        title: "请阅读并确认条款信息",  
                        icon: 'none'  
                    })  
                    return  
                }  
            },  
            closeChange() {  
                this.authType = this.oldAuthType  
                this.changeShow = false;  
            },  
            getIsAccept() {  
                if (!this.isAccept) {  
                    uni.showToast({  
                        title: "请阅读并确认条款信息",  
                        icon: 'none'  
                    })  
                    return false  
                }  
                return true  
            },  
            /* 云闪付手机号授权 */  
            getAuthYunMobile(result) {  
                console.log('getAuthYunMobile', result);  
                if (!result.code) {  
                    return /*  */  
                }  
                let code = result.code  
                this.yunAuthorize(code, 0)  
            },  
            /* 云闪付手机号,实名组合授权 */  
            getAuthYunAll(result) {  
                if (!this.getIsAccept()) return  
                console.log('getAuthYun', result);  
                if (!result.code) {  
                    return /*  */  
                }  
                let code = result.code  
                this.yunAuthorize(code, 1)  
                /* uni.getSystemInfo({  
                    success: (res) => {  
                        code = res.platform == 'ios' ? decodeURIComponent(result.code):result.code  
                    }  
                }) */  

            },  
            /* 支付宝授权 */  
            onGetAuthorize() {  
                if (!this.getIsAccept()) return  
                my.getAuthCode({  
                    scopes: ['auth_user'],  
                    // 主动授权:auth_user,静默授权:auth_base或者其它scope。如需同时获取用户多项授权,可在 scopes 中传入多个 scope 值。  
                    success: (res) => {  
                        console.log('支付宝getAuthCode', res);  
                        if (res.authCode) {  
                            let userInfo = uni.getStorageSync('userInfo')  
                            if (userInfo) {  
                                uni.setStorageSync('USERID', (userInfo.id).toString())  
                                uni.setStorageSync('TOKEN', (userInfo.sysToken).toString())  
                            }  
                            this.authorize(res)  
                        }  
                    },  
                    fail: (e) => {  

                    },  
                    complete: () => {  

                    }  
                })  
            },  
            getAlpayPhone() {  
                if (!this.getIsAccept()) return  
                my.getPhoneNumber({  
                    success: (res) => {  
                        let encryptedData = {}  
                        encryptedData.response = res.response  
                        encryptedData.userType = 'alipay'  
                        console.log('aliGetPhone', res)  
                        this.authorize(encryptedData)  
                    },  
                    fail: (res) => {  
                        console.log(res)  
                        console.log('getPhoneNumber_fail')  
                    },  
                })  
            },  
            getPhoneNumber(e) {  
                if (!this.getIsAccept()) return  
                let data = {}  
                data.iv = e.detail.iv  
                data.encryptedData = e.detail.encryptedData  
                if (!data.encryptedData) {  
                    return  
                }  
                let _this = this  
                _this.$loading(true)  
                uni.login({  
                    success(res) {  
                        if (res.code) {  
                            data.code = res.code  
                            _this.$loading(false)  
                            _this.authorize(data)  
                        } else {  
                            console.log('登录失败!' + res.errMsg)  
                        }  
                    },  
                })  
            },  
            oldUserAuthAuth() {  
                if (!this.getIsAccept()) return  
                // #ifdef MP-WEIXIN || MP-XHS  
                uni.navigateTo({  
                    url: "/pagesH/auth/oldUserAuth?fromPath=auth"  
                })  
                // #endif  
                // #ifdef MP-ALIPAY  
                this.onGetAuthorize()  
                // #endif  
            },  
            nameInput(e) {  
                setTimeout(() => {  
                    this.real_name = e.target.value  
                }, 0)  
            },  
            idInput(e) {  
                setTimeout(() => {  
                    this.cred_id = e.target.value  
                }, 0)  
            },  
            back() {  
                const pages = getCurrentPages();  
                console.log(pages);  
                //给智慧导览额外增加参数,智慧导览登录跳转必须参数  
                uni.setStorageSync('ISZHDL', true)  
                if (pages.length == 1) {  
                    uni.switchTab({  
                        url: '/pages/index/index'  
                    })  
                } else {  

                    uni.navigateBack({  
                        delta: 1  
                    })  
                }  
            },  
            accept() {  
                this.showTerms = true  
                console.log(this.$refs);  
                this.$refs.termToast.startCount()  
                /* this.showTerms = true  
                console.log(this.$refs);  
                this.$nextTick(() => {  
                    console.log(this.$refs);  
                    this.$refs.termToast.startCount()  
                }) */  
            },  
            termsClose() {  
                this.showTerms = false  
                this.isAccept = !this.isAccept  
            },  
            phoneClose(res) {  
                //  当字段为1,提示该手机号已被其他账号绑定,请联系客服解绑  
                //  当字段为2,提示该手机号已存在绑定账号,请更换登录  
                if (res.isPhoneBind) {  
                    _this.authMsg = res.msg  
                    switch (res.isPhoneBind) {  
                        case 1:  
                            //当字段为1时,提示①联系客服解绑原手机号  ②改用实名登录(自动解绑手机号、OPENID)  
                            _this.authType = 3  
                            _this.changeShow = true  
                            break;  
                        case 2:  
                            // 当字段为2时,提示该手机已绑定身份证,请授权登录  
                            _this.authType = 5  
                            _this.changeShow = true  
                            break;  
                        default:  
                            break;  
                    }  
                } else {  
                    if (res.user.phone) {  
                        let userInfo = uni.getStorageSync('userInfo')  
                        uni.setStorageSync('USERID', (userInfo.id).toString())  
                        uni.setStorageSync('TOKEN', (userInfo.sysToken).toString())  
                        getApp().globalData.phone = res.user.phone  
                        this.showPhone = false  
                        this.back()  
                    }  
                }  
            },  
            toastThis(str) {  
                uni.showToast({  
                    title: str,  
                    icon: "none",  
                    duration: 1000  
                })  
            },  
            authRmind(type) {  
                this.changeShow = false  
                this.authType = type  
                switch (this.authType) {  
                    case 1:  
                        //当字段为1时,提示①联系客服解绑原手机号  ②改用实名登录(自动解绑手机号、OPENID)  
                        // #ifdef MP-ALIPAY || H5  
                        uni.navigateTo({  
                            url: "/pagesH/auth/beforAuth"  
                        })  
                        // #endif  
                        // #ifdef MP-WEIXIN || MP-XHS  
                        uni.navigateTo({  
                            url: "/pagesH/auth/oldUserAuth"  
                        })  
                        // #endif  
                        break;  
                    case 2:  
                        // 当字段为2时,提示该手机已绑定身份证,请授权登录  
                        // #ifdef MP-WEIXIN || MP-XHS  
                        wx.navigateToMiniProgram({  
                            appId: "wx308bd2aeb83d3345",  
                            path: 'subPages/city/wxpay-auth/main',  
                            extraData: {},  
                            envVersion: 'release',  
                            success(res) {  
                                // 打开成功  
                                console.log('打开成功')  
                                console.log(res)  
                                let userInfo = uni.getStorageSync('userInfo')  
                                if (userInfo) {  
                                    uni.setStorageSync('USERID', (userInfo.id).toString())  
                                    uni.setStorageSync('TOKEN', (userInfo.sysToken).toString())  
                                }  
                            },  
                            fail(res) {  
                                console.log('失败')  
                                console.log(res)  
                            }  
                        })  
                        // #endif  
                        // #ifdef MP-ALIPAY  
                        this.onGetAuthorize()  
                        // #endif  
                        break;  
                    case 3:  
                        // 当字段为3时,提示已被其他账号绑定,请联系客服解绑  
                        uni.removeStorageSync('USERID');  
                        uni.removeStorageSync('TOKEN');  
                        getApp().globalData.code = ''  
                        let url = ''  
                        // #ifdef MP-WEIXIN  
                        url = '/subPackages/contactus/qiyu-contactus'  
                        // #endif  
                        // #ifndef MP-WEIXIN || MP-XHS  
                        url = '/pagesMine/contactus/contactus'  
                        // #endif  
                        uni.navigateTo({  
                            url: url  
                        })  
                        break;  
                    case 4:  
                        //  当字段为4时,提示该身份证已被绑定,请使用实名认证登录,重新购买订单  
                        uni.removeStorageSync('USERID');  
                        uni.removeStorageSync('TOKEN');  
                        uni.removeStorageSync('userInfo');  
                        getApp().globalData.code = ''  
                        this.back()  
                        break;  
                    default:  
                        break;  
                }  
            },  
            yunAuthorize(code, flag) {  
                let _this = this  
                this.$loading(true)  
                this.$ajax({  
                    url: _this.$ApiHost + '/loginV2/authorize',  
                    headerState: 1,  
                    data: {  
                        userType: 'unionapp',  
                        type: flag,  
                        code: code,  
                        openId: getApp().globalData.openId,  
                        userId: uni.getStorageSync('USERID')  
                    }  
                }).then(res => {  
                    this.$loading(false)  
                    console.log('ysf-register Succ', res);  
                    if (res.success) {  
                        if(res.user){  
                            uni.setStorageSync('userInfo', res.user)  
                        }  
                        if (res.isVerification) {  
                            _this.authMsg = res.msg  
                            switch (res.isVerification) {  
                                case 1:  
                                    //当字段为1时,提示①联系客服解绑原手机号  ②改用实名登录(自动解绑手机号、OPENID)  
                                    _this.authType = 1  
                                    _this.changeShow = true  
                                    break;  
                                case 2:  
                                    // 当字段为2时,提示该手机已绑定身份证,请授权登录  
                                    _this.authType = 2  
                                    _this.changeShow = true  

                                    break;  
                                case 3:  
                                    // 当字段为3时,提示已被其他账号绑定,请联系客服解绑  
                                    _this.authType = 3  
                                    _this.changeShow = true  

                                    break;  
                                case 4:  
                                    //  当字段为4时,提示该身份证已被绑定,请使用实名认证登录,重新购买订单  
                                    _this.authType = 4  
                                    _this.changeShow = true  

                                    break;  
                                default:  
                                    break;  
                            }  
                        } else {  
                            let authDate = (new Date().valueOf()).toString()  
                            uni.setStorageSync('AUTHDATE', authDate)  
                            uni.setStorageSync('USERID', (user.id).toString())  
                            uni.setStorageSync('TOKEN', (user.sysToken).toString())  
                            if (user.phone) {  
                                getApp().globalData.phone = user.phone  
                            }  
                            if (user.ysfOpenId) {  
                                getApp().globalData.openId = user.ysfOpenId  
                            }  
                            if (getApp().globalData.phone) {  
                                _this.back()  
                            } else {  
                                _this.showPhone = true  
                            }  
                        }  
                    } else {  
                        uni.showToast({  
                            title: res.info || '授权出错',  
                            icon: 'none'  
                        })  
                        uni.removeStorageSync('USERID');  
                        uni.removeStorageSync('TOKEN');  
                        getApp().globalData.code = ''  
                    }  
                }).catch(e => {  
                    this.$loading(false)  
                    console.log('ysf-register Err', e);  
                })  
            },  
            wxAhthorize(reqData) {  
                let _this = this  
                if (!getApp().globalData.openId) {  
                    uni.showToast({  
                        title: '登录过期,请重新登录',  
                        icon: 'none',  
                        duration: 1500  
                    })  
                    setTimeout(() => {  
                        uni.redirectTo({  
                            url: '/pages/index'  
                        })  
                    }, 1500)  
                    _this.$loading(false)  
                    return  
                }  
                reqData.userType = 'weixin'  
                console.log(_this.authType, 'this.authType');  
                reqData.userId = uni.getStorageSync('USERID')  
                reqData.type = _this.authType  
                if (_this.authType > 2) return  
                reqData.openId = getApp().globalData.openId  
                wx.request({  
                    url: _this.$ApiHost + '/loginV2/authorize',  
                    method: 'POST',  
                    header: {  
                        'content-type': 'application/x-www-form-urlencoded',  
                    },  
                    data: reqData,  
                    success(res) {  
                        uni.setStorageSync('successAuth', 1)  
                        console.log(res, '授权成功');  
                        _this.$loading(false)  
                        if (res.data.success) {  
                            if(res.data.user){  
                                uni.setStorageSync('userInfo', res.data.user)  
                            }  
                            if (res.data.isVerification) {  
                                _this.authMsg = res.data.msg  
                                switch (res.data.isVerification) {  
                                    case 1:  
                                        //当字段为1时,提示①联系客服解绑原手机号  ②改用实名登录(自动解绑手机号、OPENID)  
                                        _this.authType = 1  
                                        _this.changeShow = true  
                                        break;  
                                    case 2:  
                                        // 当字段为2时,提示该手机已绑定身份证,请授权登录  
                                        _this.authType = 2  
                                        _this.changeShow = true  

                                        break;  
                                    case 3:  
                                        // 当字段为3时,提示已被其他账号绑定,请联系客服解绑  
                                        _this.authType = 3  
                                        _this.changeShow = true  

                                        break;  
                                    case 4:  
                                        //  当字段为4时,提示该身份证已被绑定,请使用实名认证登录,重新购买订单  
                                        _this.authType = 4  
                                        _this.changeShow = true  

                                        break;  
                                    default:  
                                        break;  
                                }  
                            } else {  
                                var user = res.data.user  
                                _// this.$gio('setUserId', user.id)  
                                uni.setStorageSync('userInfo', user)  
                                uni.setStorageSync('USERID', (user.id).toString())  
                                uni.setStorageSync('TOKEN', (user.sysToken).toString())  
                                if (user.phone) {  
                                    getApp().globalData.phone = user.phone  
                                }  
                                if (user.openId) {  
                                    getApp().globalData.openId = user.openId  
                                }  
                                if (getApp().globalData.phone) {  
                                    _this.back()  
                                } else {  
                                    _this.showPhone = true  
                                }  
                            }  

                        } else {  
                            uni.showToast({  
                                title: res.data.info,  
                                icon: 'none'  
                            })  
                            uni.removeStorageSync('USERID');  
                            uni.removeStorageSync('TOKEN');  
                            getApp().globalData.code = ''  

                        }  
                    },  
                    fail(res) {  
                        _this.$loading(false)  
                        console.log(res.data)  
                    },  
                })  

            },  
            alipayAuthorize(reqData) {  
                let _this = this  
                reqData.userType = 'alipay'  
                console.log(_this.authType, 'this.authType');  

                if (reqData.response) {  
                    this.authType = 0  
                }  
                if (reqData.authCode) {  
                    this.authType = 1  
                    delete reqData.authSuccessScopes  
                }  
                reqData.userId = uni.getStorageSync('USERID')  
                reqData.type = _this.authType  
                if (_this.authType > 2) return  
                reqData.openId = getApp().globalData.openId  
                this.$ajax({  
                    url: '/loginV2/authorize',  
                    headerState: 1,  
                    data: reqData,  
                }).then(res => {  
                    _this.$loading(false)  
                    console.log('ali-login Suc', res);  
                    if (res.success) {  
                        if(res.user){  
                            uni.setStorageSync('userInfo', res.user)  
                        }  
                        if (res.isVerification) {  
                            _this.authMsg = res.msg  
                            switch (res.isVerification) {  
                                case 1:  
                                    //当字段为1时,提示①联系客服解绑原手机号  ②改用实名登录(自动解绑手机号、OPENID)  
                                    _this.authType = 1  
                                    _this.changeShow = true  
                                    break;  
                                case 2:  
                                    // 当字段为2时,提示该手机已绑定身份证,请授权登录  
                                    _this.authType = 2  
                                    _this.changeShow = true  

                                    break;  
                                case 3:  
                                    // 当字段为3时,提示已被其他账号绑定,请联系客服解绑  
                                    _this.authType = 3  
                                    _this.changeShow = true  

                                    break;  
                                case 4:  
                                    //  当字段为4时,提示该身份证已被绑定,请使用实名认证登录,重新购买订单  
                                    _this.authType = 4  
                                    _this.changeShow = true  

                                    break;  
                                default:  
                                    break;  
                            }  
                        } else {  
                            var user = res.user  
                            let authDate = (new Date().valueOf()).toString()  
                            uni.setStorageSync('AUTHDATE', authDate)  
                            _// this.$gio('setUserId', user.id)  
                            uni.setStorageSync('USERID', (user.id).toString())  
                            uni.setStorageSync('TOKEN', (user.sysToken).toString())  

                            if (user.phone) {  
                                getApp().globalData.phone = user.phone  
                            }  
                            if (user.openId) {  
                                getApp().globalData.openId = user.openId  
                            }  
                            console.log(getApp().globalData.phone, '手机号')  
                            if (getApp().globalData.phone) {  
                                if (this.fromPath == 'codeMoney') {  
                                    uni.redirectTo({  
                                        url: '/pagesH/codeMoney/codeMoney'  
                                    })  
                                } else {  
                                    _this.back()  
                                }  
                            } else {  
                                _this.showPhone = true  
                            }  
                        }  
                    } else {  
                        uni.showToast({  
                            title: res.info || '授权出错',  
                            icon: 'none'  
                        })  
                        uni.removeStorageSync('USERID');  
                        uni.removeStorageSync('TOKEN');  
                        getApp().globalData.code = ''  
                    }  

                }).catch(e => {  
                    _this.$loading(false)  
                    console.log('ali-login Err', e);  
                    uni.showToast({  
                        title: '授权出错',  
                        icon: 'none'  
                    })  
                    uni.removeStorageSync('USERID');  
                    uni.removeStorageSync('TOKEN');  
                    getApp().globalData.code = ''  

                })  
            },  
            authorize(reqData) {  
                // type 小程序类型:weixin、alipay、unionapp  
                // authType 实名类型:0:手机号实名 1:身份证号实名 2:身份证是否一致校验  
                console.log(getApp().globalData.openId, 'openId')  
                this.oldAuthType = this.authType  
                var _this = this  
                _this.$loading(true)  
                // #ifdef MP-WEIXIN  
                this.wxAhthorize(reqData)  
                // #endif  
                /* 支付宝授权 */  
                // #ifdef MP-ALIPAY  
                this.alipayAuthorize(reqData)  
                // #endif  

            }  
        },  
        onShow() {  
            let eventValues4 = {  
                pageType_pvar: '其他',  
                pageName_pvar: '用户登录',  
                subpageName_pvar: '实名认证页',  
            }  
            // this.$gio('setPage', eventValues4)  

            console.log(getApp().globalData);  
            let code = getApp().globalData.code  
            let userId = getApp().globalData.userId  
            console.log('code', code);  
            console.log('userId', userId);  
            if (code) {  
                let data = {}  
                data.code = code  
                this.authorize(data)  
                getApp().globalData.code = ''  
            }  
            // #ifdef H5  
            upsdk.setTitleStyle({  
                backBtnVisible: '1', // 可选,左侧返回按钮是否显示。'0'不显示,'1'显示,不传或空则默认显示  
                appletTitleBarVisible: '1', // 可选,标题栏是否显示。'0'不显示,'1'显示,默认显示  
                appletStyle: 'white',  
                appletTitleGradientOrient: 'left', // 可选,渐变色方向,支持top、bottom、left、right  
                appletTitleGradientStartColor: 'FF25CDD3', //渐变起始颜色  
                appletTitleGradientEndColor: 'FF2792F0' //渐变结束颜色  
            });  
            upsdk.setNavigationBarTitle({  
                title: '登录屿见厦门'  
            });  
            // #endif  
        },  
        onLoad(option) {  
            this.fromPath = option.fromPath || ''  
            this.monitor.api({  
                api: "实名授权",  
                success: true,  
                c1: "taSR_MZ",  
                time: 0  
            })  
            // #ifdef H5  

            upsdk.pluginReady(function() {  
                console.log('upsdk.pluginReady');  
                upsdk.setTitleStyle({  
                    backBtnVisible: '1', // 可选,左侧返回按钮是否显示。'0'不显示,'1'显示,不传或空则默认显示  
                    appletTitleBarVisible: '0', // 可选,标题栏是否显示。'0'不显示,'1'显示,默认显示  
                });  
            });  
            // #endif  
            // #ifdef MP-ALIPAY  
            my.hideShareMenu();  
            // #endif  
        },  
    }  
</script>  
<style>  
    page {  
        background: linear-gradient(0deg, #ECF4FB, #F9FCFE);  
    }  
</style>  
<style scoped lang="scss">  
    .auth-panel {  
        // height: 100%;  
        // background-image: url('https://img.bhhfwl.cn/ferry/static/index/auth-bg2.png');  
        // background-position: top center;  
        // background-repeat: no-repeat;  
        // background-size: 103% 19%;  
        // padding-top: 100rpx;  
        // position: fixed;  
        // top: -3%;  

        .icon-box {  
            width: 180rpx;  
            height: 257rpx;  
            position: absolute;  
            z-index: 1;  
            top: 10rpx;  
            right: 27rpx;  
            background-image: url('https://img.bhhfwl.cn/ferry/static/index/auth-icon.png');  
            background-position: center center;  
            background-repeat: no-repeat;  
            background-size: 100% 100%;  
        }  

        .text-box {  
            width: 190rpx;  
            height: 46rpx;  
            position: absolute;  
            z-index: 1;  
            top: 150rpx;  
            left: 27rpx;  
            color: #FFFFFF;  
            font-size: 42rpx;  
            font-family: PingFang SC;  
            font-weight: bold;  
        }  

        .auth-box {  
            height: 100%;  
            border-radius: 30rpx 30rpx 0px 0px;  
            padding-top: 30rpx;  
            box-sizing: border-box;  
            text-align: center;  
            margin-top: 110rpx;  

            .logo-box {  
                height: 188rpx;  
                background-image: url('https://img.bhhfwl.cn/ferry/static/index/auth_logo.png');  
                background-position: center;  
                background-repeat: no-repeat;  
                background-size: 188rpx 168rpx;  
            }  

            .content {  
                padding: 0 100rpx;  
                font-size: 24rpx;  
                font-family: PingFang SC;  
                color: #a8a8a8;  
                line-height: 36rpx;  
                text-align: left;  
            }  

            .license {  
                padding: 0 100rpx;  
                // padding-left: 150rpx;  
                text-align: left;  
                font-size: 24rpx;  
                font-family: PingFang SC;  
                font-weight: 500;  
                color: #b4b4b4;  
                margin: 30rpx 0;  
                position: relative;  

                text {  
                    color: #fa3152;  
                }  

                .radio {  
                    /* position: absolute;  
                    left: 110rpx;  
                    top: 5rpx; */  
                    width: 30rpx;  
                    height: 30rpx;  

                    background-image: url('https://img.bhhfwl.cn/ferry/static/gly/yuan.png');  
                    background-position: center center;  
                    background-repeat: no-repeat;  
                    background-size: 100% auto;  
                }  

                .radio.accept {  
                    background-image: url('https://img.bhhfwl.cn/ferry/static/gly/goux2x2.png');  
                }  
            }  

            /* .btn-back {  
                display: inline-block;  
                width: 600rpx;  
                height: 88rpx;  
                line-height: 86rpx;  
                box-sizing: border-box;  
                background: #ffffff;  
                border: 1rpx solid #eeeeee;  
                border-radius: 20rpx;  
            } */  
        }  
    }  
</style>  

<style scoped lang="scss">  
    .user_btn {  
        line-height: 92rpx;  
        width: 600rpx;  
        height: 92rpx;  
        border-radius: 46rpx;  
    }  

    .newUser_btn {  
        margin: 30rpx auto 0 auto;  
        background: #2968B3;  
        border: none;  
    }  

    .oldUserAuth_btn {  
        margin: 30rpx auto 0 auto;  
        background: #FFFFFF;  
        border: 1px solid #EDEDED;  
    }  

    .auth_bg {  
        bottom: 0;  
        width: 750rpx;  
        height: 297rpx;  

        image {  
            width: 750rpx;  
            height: 297rpx;  
        }  
    }  

    .input-box {  
        // padding: 0 100rpx;  
        margin: 20rpx 100rpx;  
        border-radius: 1rpx solid #ccc;  
        background-color: #fff;  

        .input-line {  
            height: 100rpx;  
            position: relative;  
            padding-left: 180rpx;  
            box-sizing: border-box;  

            text {  
                position: absolute;  
                left: 40rpx;  
                top: 0;  
                width: 140rpx;  
                height: 100rpx;  
                line-height: 100rpx;  
                text-align: justify;  
                text-align-last: justify;  
                color: #282828;  
                // text-align: right;  
            }  

            input {  
                width: 100%;  
                height: 100rpx;  
                line-height: 100rpx;  
                text-align: left;  
                padding: 0 20rpx;  

            }  
        }  

        .input-line:last-child {  
            border-top: 1rpx solid #F2F2F2;  
        }  
    }  

    .hidden {  
        display: none !important;  
    }  
</style>
2***@qq.com

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

子组件

<template>  
    <view>  
        <view class="mask" @touchmove.stop.prevent="moveHandle">  
            <view class="terms_box">  
                <view class="nav_box flex align-center" :class="onlyPrivacy?'justify-center':'justify-between'">  
                    <view class="nav" :class="navIndex==0?'nav_active':''" @click="changeNav(0)" v-if="!onlyPrivacy">  
                        <view>隐私权政策</view>  
                        <view class="bg_bar" v-show="navIndex==0"></view>  
                    </view>  
                    <view class="nav" :class="navIndex==1?'nav_active':''" @click="changeNav(1)" v-if="!onlyPrivacy">  
                        <view>免责声明</view>  
                        <view class="bg_bar" v-show="navIndex==1"></view>  
                    </view>  
                    <view class="nav" :class="navIndex==2?'nav_active':''" @click="changeNav(2)">  
                        <view>{{userTitle}}</view>  
                        <view class="bg_bar" v-show="navIndex==2"></view>  
                    </view>  
                </view>  
                <swiper :current="swiperIndex" @change="swiperChange">  
                    <swiper-item>  
                        <scroll-view class="scroll-item" scroll-y="true">  
                            <u-parse  v-if="privacyPolicy" :html="$general.formatRich(privacyPolicy)"></u-parse>  
                        </scroll-view>  
                    </swiper-item>  
                    <swiper-item v-if="!onlyPrivacy">  
                        <scroll-view class="scroll-item" scroll-y="true">  
                            <u-parse  v-if="disclaimer" :html="$general.formatRich(disclaimer)"></u-parse>  
                        </scroll-view>  
                    </swiper-item>  
                    <swiper-item v-if="!onlyPrivacy">  
                        <scroll-view class="scroll-item" scroll-y="true">  
                            <u-parse  v-if="userAgreement" :html="$general.formatRich(userAgreement)"></u-parse>  
                        </scroll-view>  
                    </swiper-item>  

                </swiper>  
                <view class="btn_box">  
                    <view class="btn" @click="closeClick" :class="countDown?'disabled_btn':''">  
                        我已详细阅读{{countDown?'('+countDown+'s)':''}}</view>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        name: "options",  
        props: {  
            onlyPrivacy: {  
                //仅隐私,登陆授权页用,仅显示隐私权  
                type: Boolean,  
                default () {  
                    return false  
                }  
            },  
            userTitle: {  
                type: String,  
                default () {  
                    return '用户协议'  
                }  
            }  
        },  
        data() {  
            return {  
                navIndex: 0,  
                swiperIndex: 0,  
                countDown: 5,  
                timer: null,  
                privacyPolicy: null, //隐私权政策  
                disclaimer: null, //,免责声明  
                userAgreement: null, //用户协议  
            };  
        },  
        created() {  
            console.log('onlyPrivacy', this.onlyPrivacy);  
            if (this.onlyPrivacy) {  
                this.navIndex = 2  
                this.swiperIndex = 0  
            }  
            this.getRich()  
            /* this.$nextTick(function() {  
                this.startCount()  
            }) */  
        },  
        computed: {},  
        methods: {  
            getRich() {  
                this.$ajax({  
                    url: '/sys-param/get-six-sysParam',  
                    headerState: 1,  
                    data: {},  
                }).then(res => {  
                    this.privacyPolicy = res.data.privacyPolicy  
                    this.disclaimer = res.data.disclaimer  
                    this.userAgreement = res.data.userAgreement  
                }).catch(e => {  
                    console.log('getRich Err', e);  
                })  
            },  
            moveHandle() {  
                console.log('should prevent');  
                return  
            },  
            startCount() {  
                if (this.timer) {  
                    this.clearCount()  
                }  
                this.timer = setInterval(() => {  
                    this.countDown--  
                    if (this.countDown <= 0) {  
                        this.countDown = 0  
                        this.clearCount()  
                    }  
                }, 1000)  
            },  
            clearCount() {  
                clearInterval(this.timer)  
                this.timer = null  
            },  
            closeClick() {  
                if (this.countDown) {  
                    return  
                }  
                this.$emit('close')  
            },  
            changeNav(i) {  
                if (this.navIndex == i) return  
                if (this.onlyPrivacy) return  
                this.navIndex = i  
                this.swiperIndex = i  
            },  
            swiperChange(e) {  
                this.navIndex = e.detail.current  
                this.swiperIndex = e.detail.current  
            },  
            makeCall() {  
                uni.makePhoneCall({  
                    phoneNumber: '0592-3533188'  
                });  
            },  
            toMap() {  
                let _this = this  
                // #ifdef H5  
                upsdk.getLocationGps({  
                    success(res) {  
                        uni.getSystemInfo({  
                            success: (sys) => {  
                                upsdk.navi({  
                                    sLat: sys.platform != 'ios' ? JSON.parse(res).latitude :  
                                        res.latitude, // 起点纬度  
                                    sLon: sys.platform != 'ios' ? JSON.parse(res).longitude :  
                                        res.longitude, // 起点经度  
                                    sName: '我的位置', // 起点名称  
                                    dLat: 24.483781, // 终点维度  
                                    dLon: 118.077066, // 终点经度  
                                    dName: 厦门轮渡有限公司, // 终点名称  
                                    success: function(s) {  
                                        // 成功回调   
                                        console.log('h5 navi succ', s);  
                                    },  
                                    fail: function(msg) {  
                                        // 失败回调  
                                        console.log('h5 navi Err', msg);  
                                    }  
                                });  
                            },  
                        })  
                    },  

                    fail() {}  
                });  

                // #endif  
                // #ifndef H5  
                uni.openLocation({  
                    latitude: 24.483781, //固定偏差,百度地图gps坐标,小程序腾讯地图使用的国测局坐标  
                    longitude: 118.077066,  
                    name: '厦门轮渡有限公司',  
                    address: '厦门市湖里区东港北路29号港航大厦31楼',  
                    success: function() {  
                        console.log("success");  
                    },  
                    fail: (e) => {  
                        console.log(e);  
                    },  
                });  
                // #endif  

            }  
        }  
    }  
</script>  

<style lang="scss">  
    .mask {  
        position: fixed;  
        top: 0;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        background: rgba(0, 0, 0, .6);  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        z-index: 999999999;  
        letter-spacing: 5rpx;  

        .terms_box {  
            width: 664rpx;  
            height: 80vh;  
            background: #fff;  
            border-radius: 30rpx;  
            padding: 0 46rpx;  
            box-sizing: border-box;  
            position: relative;  

            .nav_box {  
                .nav {  
                    position: relative;  
                    color: #999999;  
                    font-size: 32rpx;  
                    padding-top: 65rpx;  
                    z-index: 999999999;  

                    .bg_bar {  
                        width: 90%;  
                        height: 14rpx;  
                        border-radius: 10rpx 0 0 2rpx;  
                        background: #2968B3;  
                        position: absolute;  
                        bottom: 0;  
                        left: 50%;  
                        margin-left: -45%;  
                        z-index: -1;  
                    }  
                }  

                .nav_active {  
                    color: #333333;  
                    font-size: 32rpx;  
                    font-weight: bold;  
                }  
            }  

            swiper {  
                height: calc(100% - 100rpx);  
                width: 100%;  
                margin-top: 30rpx;  

                swiper-item {  
                    width: 100%;  
                    height: 100%;  

                    .scroll-item {  
                        width: 100%;  
                        height: calc(80vh - 280rpx);  
                        text-align: justify;  
                        color: #666666;  
                        font-size: 28rpx;  
                        // font-weight: 400;  

                        p {  
                            margin-bottom: 20rpx;  
                            text-indent: 2em;  

                            .indent {  
                                text-indent: 2em;  
                            }  
                        }  
                    }  
                }  
            }  

            .btn_box {  
                width: 100%;  
                background: #fff;  
                position: absolute;  
                bottom: 0;  
                left: 0;  
                padding: 0 42rpx 25rpx;  
                box-sizing: border-box;  
                border-radius: 30rpx;  

                .btn {  
                    width: 100%;  
                    height: 86rpx;  
                    text-align: center;  
                    line-height: 86rpx;  
                    background: #2968B3;  
                    border-radius: 43rpx;  
                    font-size: 32rpx;  
                    font-family: PingFang SC;  
                    font-weight: 500;  
                    color: #FFFFFF;  
                }  

                .disabled_btn {  
                    filter: grayscale(100%);  
                }  
            }  
        }  
    }  
</style>  
五脊六兽

五脊六兽 - 我很好

请问你的问题解决了么。我也有这个问题

要回复问题请先登录注册