如题
- 发布:2024-08-05 10:43
- 更新:2024-08-18 14:00
- 阅读:186
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 (作者)
父组件
<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 (作者)
子组件
<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>