| | |
| | | <template> |
| | | <view class="tabBar"> |
| | | <view class="tabBar_func" v-if="isShow"> |
| | | <view></view> |
| | | <view class="tabBar_func_box"> |
| | | <view class="func_list"> |
| | | <view class="func_list_item" @click="jump(3)"> |
| | | <view class="func_list_item_info"> |
| | | <text>在线报案</text> |
| | | <text>方便迅速</text> |
| | | </view> |
| | | <image src="/static/background/home_ic_baoan@2x.png" mode="widthFix"></image> |
| | | </view> |
| | | <view class="func_list_item" @click="jump(1)"> |
| | | <view class="func_list_item_info"> |
| | | <text>投保申请</text> |
| | | <text>简单便捷</text> |
| | | </view> |
| | | <image src="/static/background/hom22e_ic_toubao@2x.png" mode="widthFix"></image> |
| | | </view> |
| | | <view class="func_list_item" @click="jump(4)"> |
| | | <view class="func_list_item_info"> |
| | | <text>加减保申请</text> |
| | | <text>增加/减少投保人</text> |
| | | </view> |
| | | <image src="/static/background/home_ic_jiajianbao@2x.png" mode="widthFix"></image> |
| | | </view> |
| | | <view class="func_list_item" @click="jump(6)"> |
| | | <view class="func_list_item_info"> |
| | | <text>更换派遣\n单位</text> |
| | | </view> |
| | | <image src="/static/background/home_ic_huanch1angjilu@2x.png" mode="widthFix"></image> |
| | | </view> |
| | | </view> |
| | | <image class="tabBar_func_close" @click="closes" src="/static/icon/ic_cl1ose@2x.png" mode="widthFix"></image> |
| | | </view> |
| | | </view> |
| | | <view class="tabBar_list"> |
| | | <view v-for="(item,index) in tabBar" :key="item.url" class="tabbar_item" :class="{'active':item.url == currentPage}" @click="navTo(item)"> |
| | | <template v-if="item.url"> |
| | |
| | | <image v-else :src="item.imgNormal" mode="widthFix"></image> |
| | | <view class="text">{{item.text}}</view> |
| | | </template> |
| | | <view class="tabbar_quan" v-else></view> |
| | | <view class="tabbar_quan" v-else> |
| | | <u-icon name="plus" color="#ffffff" size="24"></u-icon> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="tabBar_zw"></view> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | mapState |
| | | } from 'vuex' |
| | | export default { |
| | | computed: { |
| | | ...mapState(['userInfo', 'cookies']) |
| | | }, |
| | | props: { |
| | | currentPage: { |
| | | type: String, |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | isShow: false, |
| | | value: 1, |
| | | tabBar: [ |
| | | { |
| | | url: '/pages/myPolicy/myPolicy', |
| | | url: '/pages/index/index', |
| | | text: '保单', |
| | | imgNormal: '../../static/icon/nav_home@2x.png', |
| | | imgClick: '../../static/icon/nav_home_sel@2x.png' |
| | |
| | | }; |
| | | }, |
| | | methods: { |
| | | closes() { |
| | | this.isShow = false |
| | | }, |
| | | navTo(item) { |
| | | if (!item.url) { |
| | | this.isShow = true |
| | | return |
| | | } |
| | | if (item.url !== this.currentPage) { |
| | | var isUrl = item.url |
| | | const that = this |
| | | uni.switchTab({ |
| | | url: isUrl |
| | | }) |
| | | } |
| | | }, |
| | | jump(type) { |
| | | if (!this.cookies || !this.userInfo) { |
| | | uni.navigateTo({ |
| | | url: '/pages/login/login' |
| | | }) |
| | | } |
| | | switch (type) { |
| | | case 1: |
| | | uni.navigateTo({ |
| | | url: '/pages/insuranceApplication/insuranceApplication' |
| | | }) |
| | | break; |
| | | case 3: |
| | | uni.navigateTo({ |
| | | url: '/pages/new_report/new_report' |
| | | }) |
| | | break; |
| | | case 4: |
| | | uni.navigateTo({ |
| | | url: '/pages/addition_subtraction_application/addition_subtraction_application' |
| | | }) |
| | | break; |
| | | case 6: |
| | | uni.navigateTo({ |
| | | url: '/pages/factoryChange/factoryChange' |
| | | }) |
| | | break; |
| | | } |
| | | } |
| | | } |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .tabBar_func { |
| | | width: 100vw; |
| | | height: 100vh; |
| | | position: fixed; |
| | | padding-bottom: env(safe-area-inset-bottom); |
| | | box-sizing: border-box; |
| | | z-index: 9999; |
| | | top: 0; |
| | | left: 0; |
| | | background: rgba(255,255,255,0); |
| | | backdrop-filter: blur(5px); |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | .tabBar_func_box { |
| | | width: 100%; |
| | | padding: 0 30rpx; |
| | | box-sizing: border-box; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | .tabBar_func_close { |
| | | width: 118rpx; |
| | | height: 118rpx; |
| | | margin-top: 62rpx; |
| | | } |
| | | .func_list { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | flex-wrap: wrap; |
| | | .func_list_item { |
| | | width: 48%; |
| | | height: 160rpx; |
| | | position: relative; |
| | | margin-bottom: 20rpx; |
| | | padding: 24rpx 28rpx; |
| | | box-sizing: border-box; |
| | | .func_list_item_info { |
| | | display: flex; |
| | | flex-direction: column; |
| | | position: relative; |
| | | z-index: 9999; |
| | | text { |
| | | &:nth-child(1) { |
| | | font-weight: 500; |
| | | font-size: 32rpx; |
| | | color: #222222; |
| | | } |
| | | &:nth-child(2) { |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #768188; |
| | | } |
| | | } |
| | | } |
| | | image { |
| | | width: 100%; |
| | | height: 100%; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tabBar_zw { |
| | | width: 100vw; |
| | | height: env(safe-area-inset-bottom); |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | position: relative; |
| | | |
| | | .tabbar_quan { |
| | | width: 40px; |
| | | height: 40px; |
| | | background: #437CB3; |
| | | border-radius: 20px; |
| | | border: 3px solid rgba(67,124,179,0.14); |
| | | } |
| | | |
| | | .tabbar_item_hot { |
| | | position: absolute; |
| | | left: 50%; |
| | | top: 25upx; |
| | | transform: translate(0, -50%); |
| | | width: 30rpx; |
| | | height: 30rpx; |
| | | line-height: 30rpx; |
| | | text-align: center; |
| | | background-color: red; |
| | | border-radius: 50%; |
| | | color: #ffffff; |
| | | font-size: 18rpx; |
| | | z-index: 9; |
| | | } |
| | | } |
| | | |
| | | &.active { |
| | | border-left: $isBorder; |
| | | border-top: $isBorder; |
| | | background: $chooseBgColor; |
| | | color: $chooseTextColor; |
| | | } |
| | | .tabbar_quan { |
| | | width: 90rpx; |
| | | height: 90rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | background: #437CB3; |
| | | border-radius: 50%; |
| | | border: 6rpx solid rgba(67,124,179,0.14); |
| | | } |
| | | |
| | | image { |