glhcp/pc/components/layout/float-nav.vue

144 lines
4.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="float-nav bg-white flex-col col-center">
<div class="nav-list">
<nuxt-link to="/shop_cart" class="item flex-col col-center lighter">
<el-badge :value="publicData.cart_num" type="primary">
<span class="iconfont icon-cart-Empty"></span>
</el-badge>
<div class="sm">购物车</div>
</nuxt-link>
<nuxt-link
class="item flex-col col-center lighter"
to="/user/coupons"
>
<el-badge :value="publicData.coupon_num" type="primary">
<span class="iconfont icon-coupons"></span>
</el-badge>
<div class="sm">优惠券</div>
</nuxt-link>
<nuxt-link
class="item flex-col col-center lighter"
to="/user/order"
>
<span class="iconfont icon-icon_order"></span>
<div class="sm">订单</div>
</nuxt-link>
<nuxt-link
class="item flex-col col-center lighter"
to="/user/collection"
>
<span class="iconfont icon-collection"></span>
<div class="sm">收藏</div>
</nuxt-link>
<nuxt-link
class="item flex-col col-center lighter"
to="/help_center"
>
<span class="iconfont icon-survey"></span>
<div class="sm">帮助</div>
</nuxt-link>
<el-popover placement="left" width="165" trigger="hover">
<div
style="text-align: center; margin: 0"
class="flex-col col-center"
>
<img
style="width: 100px; height: 100px"
:src="server.image"
alt=""
/>
<div class="sm m-t-8">{{ server.phone }}</div>
<div class="sm m-t-10">
在线时间{{ server.business_time }}
</div>
</div>
<div class="item flex-col col-center lighter" slot="reference">
<span class="iconfont icon-service"></span>
<div class="sm">客服</div>
</div>
</el-popover>
</div>
<div class="back-top">
<span class="iconfont icon-top" @click="scrollTop"></span>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
server: {},
}
},
created() {
this.getService()
},
methods: {
async getService() {
const { data, code } = await this.$get(
'setting/getPlatformCustomerService'
)
if (code == 1) {
this.server = data
}
},
scrollTop() {
cancelAnimationFrame(this.timer)
const self = this
this.timer = requestAnimationFrame(function fn() {
var oTop =
document.body.scrollTop ||
document.documentElement.scrollTop
if (oTop > 0) {
scrollTo(0, oTop - 250)
self.timer = requestAnimationFrame(fn)
} else {
cancelAnimationFrame(self.timer)
}
})
},
},
computed: {
...mapState(['publicData']),
},
}
</script>
<style lang="scss" scoped>
.float-nav {
height: 100vh;
position: fixed;
right: 0;
top: 0;
width: 60px;
z-index: 999;
box-shadow: -3px 1px 2px rgba(0, 0, 0, 0.04);
.nav-list {
position: absolute;
bottom: 120px;
.item {
padding: 10px 4px;
text-align: center;
cursor: pointer;
&:hover {
color: $--color-primary;
}
.iconfont {
font-size: 24px;
}
::v-deep .el-badge__content {
height: 16px;
line-height: 16px;
padding: 0 5px;
}
}
}
.back-top {
position: absolute;
bottom: 20px;
cursor: pointer;
}
}
</style>