@@ -72,7 +72,12 @@ var config = { | |||
// 升级公告更新阅读 | |||
updateRead: `${host}/zkMessage/updateFlag`, | |||
// 隐私协议 | |||
privacyAgr: `${host}/zkPrivate/findById` | |||
privacyAgr: `${host}/zkPrivate/findById`, | |||
//首页更新弹框 | |||
updatePopup: `${host}/zkMessage/showMessage`, | |||
//首页首次更新弹框 | |||
firstShowPopup: `${host}/zkMessage/firstShow`, | |||
} | |||
}; | |||
module.exports = config; |
@@ -551,28 +551,28 @@ | |||
"selectedColor": "#1296db", | |||
"borderStyle": "white", | |||
"list": [{ | |||
"pagePath": "pages/index/index", | |||
"iconPath": "/static/images/tabBar/home.png", | |||
"selectedIconPath": "/static/images/tabBar/homeActive.png", | |||
"text": "首页" | |||
"pagePath": "pages/index/index" | |||
// "iconPath": "/static/images/tabBar/home.png", | |||
// "selectedIconPath": "/static/images/tabBar/homeActive.png", | |||
// "text": "首页" | |||
}, | |||
{ | |||
"pagePath": "pages/index/customer", | |||
"iconPath": "/static/images/tabBar/customer.png", | |||
"selectedIconPath": "/static/images/tabBar/customerActive.png", | |||
"text": "接待" | |||
"pagePath": "pages/index/customer" | |||
// "iconPath": "/static/images/tabBar/customer.png", | |||
// "selectedIconPath": "/static/images/tabBar/customerActive.png", | |||
// "text": "接待" | |||
}, | |||
{ | |||
"pagePath": "pages/index/learning", | |||
"iconPath": "/static/images/tabBar/voice.png", | |||
"selectedIconPath": "/static/images/tabBar/voiceActive.png", | |||
"text": "学习" | |||
"pagePath": "pages/index/learning" | |||
// "iconPath": "/static/images/tabBar/voice.png", | |||
// "selectedIconPath": "/static/images/tabBar/voiceActive.png", | |||
// "text": "学习" | |||
}, | |||
{ | |||
"pagePath": "pages/index/personal", | |||
"iconPath": "/static/images/tabBar/user.png", | |||
"selectedIconPath": "/static/images/tabBar/userActive.png", | |||
"text": "个人" | |||
"pagePath": "pages/index/personal" | |||
// "iconPath": "/static/images/tabBar/user.png", | |||
// "selectedIconPath": "/static/images/tabBar/userActive.png", | |||
// "text": "个人" | |||
} | |||
] | |||
}, | |||
@@ -63,13 +63,19 @@ | |||
src="/static/images/add.png" mode=""></image> | |||
<image class="add2" @click="reshCustom()" src="https://static.quhouse.com/zhikong_xcx_img/refresh.png" mode=""> | |||
</image> | |||
<u-tabbar activeColor="#1296db" inactiveColor="#999999" v-model="current" :list="tabbarList"></u-tabbar> | |||
</view> | |||
</template> | |||
<script> | |||
var util = require("../../utils/util.js"); | |||
var config = require("../../config"); | |||
import tabbarList from '@/utils/tabbar.js' | |||
export default { | |||
data() { | |||
return { | |||
tabbarList:tabbarList, | |||
current: 0, | |||
buildingID: '', | |||
waitCustomList: [], | |||
isAdd: '', | |||
@@ -93,8 +99,26 @@ | |||
console.log(this.menulist) | |||
this.init() | |||
this.queryHaveDept() | |||
this.updateInit() | |||
}, | |||
methods: { | |||
updateInit() { | |||
uni.request({ | |||
url: config.service.updateList, | |||
method: "GET", | |||
data: { | |||
id: uni.getStorageSync('weapp_session_userInfo_data').accountId | |||
}, | |||
header: { | |||
'content-type': 'application/json', | |||
'Access-Token': uni.getStorageSync('weapp_session_login_data').token | |||
}, | |||
success: (res) => { | |||
this.count = res.data.data.count | |||
this.tabbarList[3].count = res.data.data.count | |||
} | |||
}) | |||
}, | |||
reshCustom() { | |||
this.init() | |||
}, | |||
@@ -402,7 +426,7 @@ | |||
width: 90upx; | |||
height: 90upx; | |||
position: fixed; | |||
bottom: 180upx; | |||
bottom:275upx; | |||
right: 44upx; | |||
} | |||
@@ -410,7 +434,7 @@ | |||
width: 90upx; | |||
height: 90upx; | |||
position: fixed; | |||
bottom: 60upx; | |||
bottom: 160upx; | |||
right: 44upx; | |||
} | |||
</style> |
@@ -207,14 +207,40 @@ | |||
@cancel="cancel" @confirm="confirm"></u-select> | |||
</view> | |||
<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar> | |||
<u-tabbar activeColor="#1296db" inactiveColor="#999999" v-model="current" :list="tabbarList"></u-tabbar> | |||
<view class="update" v-if="isShowUpdate"> | |||
<view class="updateBox"> | |||
<view class="top"> | |||
<image src="../../static/images/updateIcon.png"></image> | |||
</view> | |||
<view class="content"> | |||
<view class="tit">{{tit}}</view> | |||
<u-parse class="ql-editor" :content="content" @preview="preview" @navigate="navigate"/> | |||
<!-- <rich-text :nodes="content"></rich-text> --> | |||
</view> | |||
<view class="btn" @click="lookDetail">查看详情</view> | |||
<view class="close" @click="close"> | |||
<u-icon name="close-circle" size="80" color="#FFFFFF"></u-icon> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
var config = require("../../config"); | |||
var util = require("../../utils/util.js"); | |||
import tabbarList from '@/utils/tabbar.js' | |||
import uParse from '../../components/gaoyia-parse/parse.vue' | |||
export default { | |||
data() { | |||
return { | |||
id:"", | |||
isShowUpdate:false, | |||
tit:"", | |||
content:"", | |||
tabbarList:tabbarList, | |||
current: 0, | |||
userInfo: {}, | |||
Showhiddenunits: false, | |||
lpanlist: [], //项目列表 | |||
@@ -271,7 +297,9 @@ | |||
} | |||
} | |||
}, | |||
components: {}, | |||
components: { | |||
uParse | |||
}, | |||
onShow() { | |||
this.getMenu() | |||
@@ -307,6 +335,7 @@ | |||
} | |||
this.initworkThisWeek() | |||
this.initrealTimeStatistics() | |||
this.updateInit() | |||
}, | |||
onPullDownRefresh() { | |||
this.getMenu() | |||
@@ -347,7 +376,85 @@ | |||
uni.stopPullDownRefresh() | |||
}, 3000) | |||
}, | |||
onLoad() { | |||
this.initPopup() | |||
}, | |||
methods: { | |||
close(){ | |||
this.isShowUpdate = false; | |||
}, | |||
lookDetail(){ | |||
let link = encodeURIComponent(JSON.stringify(this.content)) | |||
uni.navigateTo({ | |||
url: "../mine/messageDetail?content=" + link + "&id=" + this.id+"&tit="+this.tit | |||
}) | |||
let data = { | |||
id:this.id, | |||
accountId:uni.getStorageSync('weapp_session_userInfo_data').accountId | |||
} | |||
uni.request({ | |||
url: config.service.updateRead, | |||
method: "GET", | |||
header: { | |||
'content-type': 'application/json', | |||
'Access-Token': uni.getStorageSync('weapp_session_login_data').token | |||
}, | |||
data, | |||
success: (res) => { | |||
this.initPopup() | |||
} | |||
}) | |||
this.isShowUpdate = false; | |||
}, | |||
initPopup(){ | |||
uni.request({ | |||
url: config.service.updatePopup, | |||
method: "GET", | |||
header: { | |||
'content-type': 'application/json', | |||
'Access-Token': uni.getStorageSync('weapp_session_login_data').token | |||
}, | |||
success: (res) => { | |||
this.first(res.data.data.id) | |||
this.content = res.data.data.content | |||
this.tit = res.data.data.title | |||
this.aid = res.data.data.accountId | |||
this.id = res.data.data.id | |||
this.isShowUpdate = res.data.data.readFlag==0?true:false; | |||
} | |||
}) | |||
}, | |||
first(id){ | |||
uni.request({ | |||
url: config.service.firstShowPopup, | |||
method: "GET", | |||
header: { | |||
'content-type': 'application/json', | |||
'Access-Token': uni.getStorageSync('weapp_session_login_data').token | |||
}, | |||
data:{id}, | |||
success: (res) => { | |||
} | |||
}) | |||
}, | |||
updateInit() { | |||
uni.request({ | |||
url: config.service.updateList, | |||
method: "GET", | |||
data: { | |||
id: uni.getStorageSync('weapp_session_userInfo_data').accountId | |||
}, | |||
header: { | |||
'content-type': 'application/json', | |||
'Access-Token': uni.getStorageSync('weapp_session_login_data').token | |||
}, | |||
success: (res) => { | |||
this.count = res.data.data.count | |||
this.tabbarList[3].count = res.data.data.count | |||
} | |||
}) | |||
}, | |||
//获取权限 | |||
getMenu(){ | |||
this.$u.get("/user/getMenu").then(data => { | |||
@@ -641,8 +748,6 @@ | |||
url: '/pages/center/consumer/index?refresh='+'refresh' | |||
}); | |||
} | |||
}, | |||
}, | |||
@@ -650,6 +755,64 @@ | |||
</script> | |||
<style lang="scss" scoped> | |||
.update{ | |||
width: 100%; | |||
height: 100%; | |||
background: rgba(0, 0, 0, 0.5); | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
bottom: 0; | |||
right: 0; | |||
z-index: 9999; | |||
.updateBox{ | |||
width: 80%; | |||
background: #FFFFFF; | |||
position: relative; | |||
left: 50%; | |||
margin-left: -40%; | |||
padding: 20rpx; | |||
border-radius: 10rpx; | |||
top: 140rpx; | |||
.top{ | |||
width: 350rpx; | |||
height: 220rpx; | |||
margin: 0 auto; | |||
image{ | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.btn{ | |||
width: 510rpx; | |||
height: 88rpx; | |||
background: #2671E2; | |||
margin: 0 auto; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 36rpx; | |||
border-radius: 8rpx; | |||
color: #FFFFFF; | |||
} | |||
.content{ | |||
height: 268rpx; | |||
overflow-y: auto; | |||
margin: 46rpx 0; | |||
} | |||
.tit{ | |||
font-size: 40rpx; | |||
text-align: center; | |||
font-weight: bold; | |||
} | |||
.close{ | |||
position: absolute; | |||
bottom: -100rpx; | |||
left: 50%; | |||
margin-left: -50rpx; | |||
} | |||
} | |||
} | |||
.activecllasscet{ | |||
font-size: 28rpx; | |||
font-weight: 400; | |||
@@ -51,15 +51,19 @@ | |||
</view> | |||
</view> | |||
</view> | |||
<u-tabbar activeColor="#1296db" inactiveColor="#999999" v-model="current" :list="tabbarList"></u-tabbar> | |||
</view> | |||
</template> | |||
<script> | |||
var config = require("../../config"); | |||
var util = require("@/utils/util.js"); | |||
import tabbarList from '@/utils/tabbar.js' | |||
export default { | |||
data() { | |||
return { | |||
tabbarList:tabbarList, | |||
current: 0, | |||
tablist:[ | |||
{name:"全文"}, | |||
{name:"分点"} | |||
@@ -75,6 +79,8 @@ | |||
var i=uni.getStorageSync('fendianindex') | |||
this.buildingID=uni.getStorageSync('buildingID').id; | |||
this.clocktab(i) | |||
this.updateInit() | |||
}, | |||
onPullDownRefresh() { | |||
var i=uni.getStorageSync('fendianindex') | |||
@@ -84,6 +90,24 @@ | |||
}, 1000); | |||
}, | |||
methods: { | |||
updateInit() { | |||
uni.request({ | |||
url: config.service.updateList, | |||
method: "GET", | |||
data: { | |||
id: uni.getStorageSync('weapp_session_userInfo_data').accountId | |||
}, | |||
header: { | |||
'content-type': 'application/json', | |||
'Access-Token': uni.getStorageSync('weapp_session_login_data').token | |||
}, | |||
success: (res) => { | |||
this.count = res.data.data.count | |||
this.tabbarList[3].count = res.data.data.count | |||
} | |||
}) | |||
}, | |||
//全部学习跳转 | |||
quclick(item){ | |||
uni.showLoading({ | |||
@@ -19,13 +19,14 @@ | |||
<image src="/static/images/studyhot.png" style="width: 36rpx;height: 36rpx;" mode=""></image> | |||
消息 | |||
</view> | |||
<view class="right"> | |||
<view class="right" style="display: flex;align-items: center;"> | |||
<view class="count" v-if="count!=0">{{count}}</view> | |||
<image src="/static/images/arrow.png" style="width: 18rpx;height: 32rpx;" mode=""></image> | |||
</view> | |||
</navigator> | |||
<navigator class="line" url="/pages/mine/subscribe"> | |||
<view class="title"> | |||
<image src="/static/images/studyhot.png" style="width: 36rpx;height: 36rpx;" mode=""></image> | |||
<image src="/static/images/studyhot.png" style="width: 36rpx;height: 36rpx;" mode=""></image> | |||
订阅消息 | |||
</view> | |||
<view class="right"> | |||
@@ -79,6 +80,7 @@ | |||
</view> | |||
</view> | |||
<u-tabbar activeColor="#1296db" inactiveColor="#999999" v-model="current" :list="tabbarList"></u-tabbar> | |||
</view> | |||
</template> | |||
@@ -86,10 +88,13 @@ | |||
var app = getApp(); | |||
var util = require("../../utils/util.js"); | |||
var config = require("../../config"); | |||
import tabbarList from '@/utils/tabbar.js' | |||
export default { | |||
data() { | |||
return { | |||
tabbarList:tabbarList, | |||
current: 0, | |||
tabList: [ | |||
{ | |||
name: '系统消息' | |||
@@ -101,6 +106,7 @@ | |||
name: "", | |||
photo: "", | |||
mobile: "", | |||
count:0, | |||
}; | |||
}, | |||
onShow: function() { | |||
@@ -108,8 +114,27 @@ | |||
this.name = userInfos.name, | |||
this.photo = userInfos.picUrl, | |||
this.mobile = userInfos.loginName | |||
this.updateInit() | |||
}, | |||
methods: { | |||
updateInit() { | |||
uni.request({ | |||
url: config.service.updateList, | |||
method: "GET", | |||
data: { | |||
id: uni.getStorageSync('weapp_session_userInfo_data').accountId | |||
}, | |||
header: { | |||
'content-type': 'application/json', | |||
'Access-Token': uni.getStorageSync('weapp_session_login_data').token | |||
}, | |||
success: (res) => { | |||
this.count = res.data.data.count | |||
this.tabbarList[3].count = res.data.data.count | |||
} | |||
}) | |||
}, | |||
scan(){ | |||
uni.navigateTo({ | |||
url:"../mine/registerCode" | |||
@@ -184,6 +209,18 @@ | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.count{ | |||
background: red; | |||
width: 50rpx; | |||
height: 50rpx; | |||
border-radius: 40rpx; | |||
color: #FFFFFF; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 24rpx; | |||
margin-right: 20rpx; | |||
} | |||
.main { | |||
padding: 0 30rpx; | |||
background: #F8F8F8; | |||
@@ -1,11 +1,10 @@ | |||
<template> | |||
<view class="main"> | |||
<!-- <u-parse class="ql-editor" :content="content" @preview="preview" @navigate="navigate"/> --> | |||
<view class="tit">{{tit}}</view> | |||
<u-parse class="ql-editor" :content="content" @preview="preview" @navigate="navigate"/> | |||
<web-view v-if="webviewShow" :webview-styles="webviewStyles" :src="webviewUrl"></web-view> | |||
<!-- <view v-html="content"></view> --> | |||
<rich-text :nodes="content"></rich-text> | |||
<!-- <rich-text :nodes="content"></rich-text> --> | |||
</view> | |||
</template> | |||
@@ -17,6 +16,7 @@ | |||
export default { | |||
data() { | |||
return { | |||
tit:"", | |||
content:"", | |||
id:"", | |||
webviewShow:false, | |||
@@ -35,6 +35,7 @@ | |||
this.id = e.id; | |||
let link=JSON.parse(decodeURIComponent(e.content)) | |||
this.content = link | |||
this.tit = e.tit | |||
this.read() | |||
}, | |||
methods:{ | |||
@@ -74,6 +75,12 @@ | |||
.main{ | |||
padding: 20rpx; | |||
word-wrap: break-word; | |||
.tit{ | |||
font-size: 46rpx; | |||
font-weight: 800; | |||
text-align: center; | |||
margin-bottom: 16rpx; | |||
} | |||
} | |||
.ql-container { | |||
box-sizing: border-box; | |||
@@ -5,7 +5,7 @@ | |||
<view class="upgradeList"> | |||
<block v-if="updateAnnList.length!=0"> | |||
<block v-for="(item,index) in updateAnnList" :key="index"> | |||
<view class="upgradeItem" @click="goDetail(item.content,item.id)"> | |||
<view class="upgradeItem" @click="goDetail(item.content,item.id,item.title)"> | |||
<view class="notRead"> | |||
<view v-if="item.readFlag==0" class="red"></view> | |||
</view> | |||
@@ -112,10 +112,10 @@ | |||
} | |||
}) | |||
}, | |||
goDetail(text, id) { | |||
goDetail(text, id,title) { | |||
let link = encodeURIComponent(JSON.stringify(text)) | |||
uni.navigateTo({ | |||
url: "./messageDetail?content=" + link + "&id=" + id | |||
url: "./messageDetail?content=" + link + "&id=" + id+"&tit="+title | |||
}) | |||
}, | |||
change(index) { | |||
@@ -0,0 +1,27 @@ | |||
export default [ | |||
{ | |||
pagePath: "/pages/index/index", | |||
iconPath: "/static/images/tabBar/home.png", | |||
selectedIconPath: "/static/images/tabBar/homeActive.png", | |||
text: "首页" | |||
}, | |||
{ | |||
pagePath: "/pages/index/customer", | |||
iconPath: "/static/images/tabBar/customer.png", | |||
selectedIconPath: "/static/images/tabBar/customerActive.png", | |||
text: "接待" | |||
}, | |||
{ | |||
pagePath: "/pages/index/learning", | |||
iconPath: "/static/images/tabBar/voice.png", | |||
selectedIconPath: "/static/images/tabBar/voiceActive.png", | |||
text: "学习" | |||
}, | |||
{ | |||
pagePath: "/pages/index/personal", | |||
iconPath: "/static/images/tabBar/user.png", | |||
selectedIconPath: "/static/images/tabBar/userActive.png", | |||
text: "个人", | |||
count: 0 | |||
} | |||
]; |
@@ -1,5 +1,5 @@ | |||
<template> | |||
<view v-if="show" class="u-tabbar" @touchmove.stop.prevent> | |||
<view v-if="show" class="u-tabbar" @touchmove.stop.prevent="() => {}"> | |||
<view class="u-tabbar__content safe-area-inset-bottom" :style="{ | |||
height: $u.addUnit(height), | |||
backgroundColor: bgColor, | |||
@@ -14,19 +14,20 @@ | |||
<view :class="[ | |||
midButton && item.midButton ? 'u-tabbar__content__circle__button' : 'u-tabbar__content__item__button' | |||
]"> | |||
<u-icon | |||
:size="midButton && item.midButton ? midButtonSize : iconSize" | |||
:name="index == value ? item.selectedIconPath : item.iconPath" | |||
:color="index == value ? activeColor : inactiveColor" | |||
<u-icon | |||
:size="midButton && item.midButton ? midButtonSize : iconSize" | |||
:name="elIconPath(index)" | |||
img-mode="scaleToFill" | |||
:color="elColor(index)" | |||
:custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'" | |||
></u-icon> | |||
<u-badge :count="item.count" :is-dot="item.isDot" | |||
v-if="item.count > 0" | |||
<u-badge :count="item.count" :is-dot="item.isDot" | |||
v-if="item.count || item.isDot" | |||
:offset="[-2, getOffsetRight(item.count, item.isDot)]" | |||
></u-badge> | |||
</view> | |||
<view class="u-tabbar__content__item__text" :style="{ | |||
color: index == value ? activeColor : inactiveColor | |||
color: elColor(index) | |||
}"> | |||
<text class="u-line-1">{{item.text}}</text> | |||
</view> | |||
@@ -34,13 +35,14 @@ | |||
<view v-if="midButton" class="u-tabbar__content__circle__border" :class="{ | |||
'u-border': borderTop, | |||
}" :style="{ | |||
backgroundColor: bgColor | |||
backgroundColor: bgColor, | |||
left: midButtonLeft | |||
}"> | |||
</view> | |||
</view> | |||
<!-- 这里加上一个48rpx的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) --> | |||
<view class="u-fixed-placeholder safe-area-inset-bottom" :style="{ | |||
height: `calc(${$u.addUnit(height)} + ${midButton ? 48 : 0}rpx)`, | |||
<view class="u-fixed-placeholder safe-area-inset-bottom" :style="{ | |||
height: `calc(${$u.addUnit(height)} + ${midButton && isBtnTop ? 48 : 0}rpx)`, | |||
}"></view> | |||
</view> | |||
</template> | |||
@@ -110,24 +112,83 @@ | |||
type: Boolean, | |||
default: true | |||
}, | |||
// 是否隐藏原生tabbar | |||
hideTabBar: { | |||
type: Boolean, | |||
default: true | |||
}, | |||
// 是否计算凸起位置的高度 | |||
isBtnTop: { | |||
type: Boolean, | |||
default: true | |||
} | |||
}, | |||
data() { | |||
return { | |||
// 由于安卓太菜了,通过css居中凸起按钮的外层元素有误差,故通过js计算将其居中 | |||
midButtonLeft: '50%', | |||
pageUrl: '', // 当前页面URL | |||
} | |||
}, | |||
created() { | |||
// 是否隐藏原生tabbar | |||
if(this.hideTabBar) uni.hideTabBar(); | |||
// 获取引入了u-tabbar页面的路由地址,该地址没有路径前面的"/" | |||
let pages = getCurrentPages(); | |||
// 页面栈中的最后一个即为项为当前页面,route属性为页面路径 | |||
this.pageUrl = pages[pages.length - 1].route; | |||
}, | |||
computed: { | |||
elIconPath() { | |||
return (index) => { | |||
// 历遍u-tabbar的每一项item时,判断是否传入了pagePath参数,如果传入了 | |||
// 和data中的pageUrl参数对比,如果相等,即可判断当前的item对应当前的tabbar页面,设置高亮图标 | |||
// 采用这个方法,可以无需使用v-model绑定的value值 | |||
let pagePath = this.list[index].pagePath; | |||
// 如果定义了pagePath属性,意味着使用系统自带tabbar方案,否则使用一个页面用几个组件模拟tabbar页面的方案 | |||
// 这两个方案对处理tabbar item的激活与否方式不一样 | |||
if(pagePath) { | |||
if(pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) { | |||
return this.list[index].selectedIconPath; | |||
} else { | |||
return this.list[index].iconPath; | |||
} | |||
} else { | |||
// 普通方案中,索引等于v-model值时,即为激活项 | |||
return index == this.value ? this.list[index].selectedIconPath : this.list[index].iconPath | |||
} | |||
} | |||
}, | |||
elColor() { | |||
return (index) => { | |||
// 判断方法同理于elIconPath | |||
let pagePath = this.list[index].pagePath; | |||
if(pagePath) { | |||
if(pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) return this.activeColor; | |||
else return this.inactiveColor; | |||
} else { | |||
return index == this.value ? this.activeColor : this.inactiveColor; | |||
} | |||
} | |||
} | |||
}, | |||
mounted() { | |||
this.midButton && this.getMidButtonLeft(); | |||
}, | |||
methods: { | |||
async clickHandler(index) { | |||
if(this.beforeSwitch && typeof(this.beforeSwitch) === 'function') { | |||
// 执行回调,同时传入索引当作参数 | |||
let beforeSwitch = this.beforeSwitch(index); | |||
// 在微信,支付宝等环境(H5正常),会导致父组件定义的customBack()函数体中的this变成子组件的this | |||
// 通过bind()方法,绑定父组件的this,让this.customBack()的this为父组件的上下文 | |||
let beforeSwitch = this.beforeSwitch.bind(this.$u.$parent.call(this))(index); | |||
// 判断是否返回了promise | |||
if (!!beforeSwitch && typeof beforeSwitch.then === 'function') { | |||
await beforeSwitch.then(res => { | |||
// promise返回成功, | |||
this.switchTab(index); | |||
}).catch(err => { | |||
}) | |||
} else if(beforeSwitch === true) { | |||
// 如果返回true | |||
@@ -141,7 +202,16 @@ | |||
switchTab(index) { | |||
// 发出事件和修改v-model绑定的值 | |||
this.$emit('change', index); | |||
this.$emit('input', index); | |||
// 如果有配置pagePath属性,使用uni.switchTab进行跳转 | |||
if(this.list[index].pagePath) { | |||
uni.switchTab({ | |||
url: this.list[index].pagePath | |||
}) | |||
} else { | |||
// 如果配置了papgePath属性,将不会双向绑定v-model传入的value值 | |||
// 因为这个模式下,不再需要v-model绑定的value值了,而是通过getCurrentPages()适配 | |||
this.$emit('input', index); | |||
} | |||
}, | |||
// 计算角标的right值 | |||
getOffsetRight(count, isDot) { | |||
@@ -153,20 +223,29 @@ | |||
} else { | |||
return -30; | |||
} | |||
}, | |||
// 获取凸起按钮外层元素的left值,让其水平居中 | |||
getMidButtonLeft() { | |||
let windowWidth = this.$u.sys().windowWidth; | |||
// 由于安卓中css计算left: 50%的结果不准确,故用js计算 | |||
this.midButtonLeft = (windowWidth / 2) + 'px'; | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
@import "../../libs/css/style.components.scss"; | |||
.u-fixed-placeholder { | |||
/* #ifndef APP-NVUE */ | |||
box-sizing: content-box; | |||
/* #endif */ | |||
} | |||
.u-tabbar { | |||
&__content { | |||
display: flex; | |||
@include vue-flex; | |||
align-items: center; | |||
position: relative; | |||
position: fixed; | |||
@@ -174,18 +253,22 @@ | |||
left: 0; | |||
width: 100%; | |||
z-index: 998; | |||
/* #ifndef APP-NVUE */ | |||
box-sizing: content-box; | |||
/* #endif */ | |||
&__circle__border { | |||
border-radius: 100%; | |||
width: 110rpx; | |||
height: 110rpx; | |||
top: -48rpx; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
position: absolute; | |||
z-index: 4; | |||
background-color: #ffffff; | |||
// 由于安卓的无能,导致只有3个tabbar item时,此css计算方式有误差 | |||
// 故使用js计算的形式来定位,此处不注释,是因为js计算有延后,避免出现位置闪动 | |||
left: 50%; | |||
transform: translateX(-50%); | |||
&:after { | |||
border-radius: 100px; | |||
@@ -197,14 +280,16 @@ | |||
justify-content: center; | |||
height: 100%; | |||
padding: 12rpx 0; | |||
display: flex; | |||
@include vue-flex; | |||
flex-direction: column; | |||
align-items: center; | |||
position: relative; | |||
&__button { | |||
position: absolute; | |||
top: 10rpx; | |||
top: 14rpx; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
} | |||
&__text { | |||
@@ -212,25 +297,29 @@ | |||
font-size: 26rpx; | |||
line-height: 28rpx; | |||
position: absolute; | |||
bottom: 12rpx; | |||
bottom: 14rpx; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
width: 100%; | |||
text-align: center; | |||
} | |||
} | |||
&__circle { | |||
position: relative; | |||
display: flex; | |||
@include vue-flex; | |||
flex-direction: column; | |||
justify-content: space-between; | |||
z-index: 10; | |||
/* #ifndef APP-NVUE */ | |||
height: calc(100% - 1px); | |||
/* #endif */ | |||
&__button { | |||
width: 90rpx; | |||
height: 90rpx; | |||
border-radius: 100%; | |||
display: flex; | |||
@include vue-flex; | |||
justify-content: center; | |||
align-items: center; | |||
position: absolute; | |||
@@ -1,3 +1,6 @@ | |||
.demo { | |||
@mixin vue-flex($direction: row) { | |||
/* #ifndef APP-NVUE */ | |||
display: flex; | |||
flex-direction: $direction; | |||
/* #endif */ | |||
} |