<template>
|
<view style="touch-action: none;">
|
<view class="home" style="position:fixed;" :style="{ top: top + 'px' }" id="right-nav"
|
@touchmove.stop.prevent="setTouchMove">
|
|
<view class="pictureBox">
|
<view class="picture" :class="{ breath: hasCoupon }" v-if="!hideCoupon" hover-class='none'
|
@click="addClickTrack('优惠券')">
|
<image class="image" src="https://ossacmall.bluedeer.com.cn/app/static/images/coupon_icon2.png">
|
</image>
|
</view>
|
<!-- <view class="picture" @click="open" :class="homeActive === true?'active':''">
|
<image class="image" src="https://ossacmall.bluedeer.com.cn/app/static/images/home_arrow.png"></image>
|
</view> -->
|
</view>
|
<view class="homeCon bg-color-white on" :class="homeActive === true ? 'on' : ''">
|
<view hover-class='none' class='iconfont icon-shouye-xianxing' @click="addClickTrack('首页')"><text
|
style="display:block;font-size: 20rpx;line-height:1.5em;text-align: center;">首页</text></view>
|
<view v-if="!hideCart" hover-class='none' class='iconfont icon-caigou-xianxing'
|
@click="addClickTrack('购物车')"><text
|
style="display:block;font-size: 20rpx;line-height:1.5em;text-align: center;">购物车</text></view>
|
<button open-type="contact" hover-class='none' class='iconfont icon-kefu'
|
@click="addClickTrack('客服')"><text
|
style="display:block;font-size: 20rpx;line-height:1.5em;text-align: center;">客服</text></button>
|
<view hover-class='none' class='iconfont icon-yonghu1' @click="addClickTrack('我的')"><text
|
style="display:block;font-size: 20rpx;line-height:1.5em;text-align: center;">我的</text></view>
|
</view>
|
<!-- <view class="pictureBox">
|
<view class="picture2" v-if="showLottery" hover-class='none' @click="addClickTrack('去抽奖')">
|
<image class="image" src="https://ossacmall.bluedeer.com.cn/app/static/images/home_iconLottery.png"></image>
|
</view>
|
</view> -->
|
</view>
|
</view>
|
</template>
|
<script>
|
import {
|
getUserCoupons
|
} from '../../api/api.js'
|
import {
|
mapGetters
|
} from "vuex";
|
import {
|
toLogin
|
} from "../../libs/login";
|
export default {
|
name: "Home",
|
props: {
|
showLottery: {
|
type: Boolean,
|
default: false
|
},
|
hideCoupon: {
|
type: Boolean,
|
default: false
|
},
|
hideCart: {
|
type: Boolean,
|
default: false
|
},
|
productInfo: {
|
type: Object,
|
default: {}
|
},
|
cusTop: {
|
type: String,
|
default: ''
|
}
|
},
|
data: function () {
|
return {
|
top: this.cusTop || '200',
|
hasCoupon: false
|
};
|
},
|
computed: mapGetters(["homeActive"]),
|
watch: {
|
cusTop(val, oldVal) {
|
console.log("this.cusTop::", val)
|
this.top = val
|
}
|
},
|
methods: {
|
addClickTrack(type) {
|
let that = this;
|
if (that.productInfo.id) {
|
that.addTrack('yy_productDetailPageClick', {
|
productName_var: that.productInfo.storeName,
|
productID_var: that.productInfo.id,
|
moduleName_var: '悬浮窗',
|
buttonName_var: type
|
});
|
}
|
|
if (type == '优惠券') {
|
if (!that.$store.getters.isLogin) {
|
toLogin(that.$parent);
|
that.$parent.loginBackFn = function () {
|
uni.navigateTo({
|
url: "/pages/users/user_coupon/index"
|
})
|
};
|
} else {
|
uni.navigateTo({
|
url: "/pages/users/user_coupon/index"
|
})
|
}
|
|
} else if (type == '购物车') {
|
if (!that.$store.getters.isLogin) {
|
toLogin(that.$parent);
|
that.$parent.loginBackFn = function () {
|
uni.redirectTo({
|
url: "/pages/order_addcart/order_addcart"
|
})
|
};
|
} else {
|
uni.redirectTo({
|
url: "/pages/order_addcart/order_addcart"
|
})
|
}
|
} else if (type == '首页') {
|
uni.switchTab({
|
url: "/pages/index/index"
|
})
|
} else if (type == '客服') {
|
|
} else if (type == '我的') {
|
if (!that.$store.getters.isLogin) {
|
toLogin(that.$parent);
|
that.$parent.loginBackFn = function () {
|
uni.switchTab({
|
url: "/pages/user/index"
|
})
|
};
|
} else {
|
uni.switchTab({
|
url: "/pages/user/index"
|
})
|
}
|
} else if (type == '去抽奖') {
|
if (!that.$store.getters.isLogin) {
|
toLogin(that.$parent);
|
that.$parent.loginBackFn = function () {
|
this.$emit('goLottery', false);
|
};
|
} else {
|
this.$emit('goLottery', false);
|
}
|
|
}
|
},
|
setTouchMove(e) {
|
var that = this;
|
if (e.touches[0].clientY < 545 && e.touches[0].clientY > 66) {
|
that.top = e.touches[0].clientY
|
// that.setData({
|
// top: e.touches[0].clientY
|
// })
|
}
|
},
|
open: function () {
|
this.homeActive ?
|
this.$store.commit("CLOSE_HOME") :
|
this.$store.commit("OPEN_HOME");
|
},
|
getUserCoupons() {
|
let that = this;
|
getUserCoupons({
|
limit: 1,
|
page: 1,
|
type: 'usable'
|
}).then(res => {
|
console.log('33333', res.data)
|
const coupons = res.data ? res.data.list : [];
|
that.hasCoupon = coupons.length > 0
|
})
|
}
|
},
|
created() {
|
let that = this;
|
if (that.$store.getters.unionId) {
|
that.getUserCoupons();
|
} else {
|
uni.$once('UPDATE_LOGINSTATUS', that.getUserCoupons)
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.pictureBox {
|
width: 120rpx;
|
}
|
|
/*返回主页按钮*/
|
.home {
|
position: fixed;
|
color: white;
|
text-align: center;
|
z-index: 1111;
|
right: 10rpx;
|
/* display: flex; */
|
}
|
|
.home .homeCon {
|
border-radius: 50rpx;
|
opacity: 0;
|
height: 0;
|
width: 0;
|
}
|
|
@keyframes homeConIn {
|
0% {
|
opacity: 0;
|
transform: translateY(-120rpx);
|
}
|
|
100% {
|
opacity: 1;
|
transform: none;
|
}
|
}
|
|
@keyframes breath {
|
0% {
|
transform: scale(1);
|
}
|
|
50% {
|
transform: scale(1.1);
|
}
|
|
100% {
|
transform: scale(1);
|
}
|
}
|
|
@keyframes swing {
|
0% {
|
transform: rotate(-8deg);
|
}
|
|
50% {
|
transform: rotate(8deg);
|
}
|
|
100% {
|
transform: rotate(-8deg);
|
}
|
}
|
|
.home .homeCon.on {
|
opacity: 1;
|
animation: homeConIn 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
|
width: 72rpx;
|
height: auto;
|
margin: 0 auto;
|
/* display: flex;
|
justify-content: center;
|
align-items: center; */
|
background: #ffffff !important;
|
box-shadow: 0 0 15rpx 0 rgba(0, 0, 0, .1);
|
}
|
|
.home .homeCon .iconfont {
|
font-size: 48rpx;
|
color: #000000;
|
display: inline-block;
|
margin: 0 auto;
|
margin-top: 30rpx;
|
|
}
|
|
.home .homeCon .iconfont:last-child {
|
margin-bottom: 30rpx;
|
}
|
|
.home .picture {
|
width: 120rpx;
|
height: 120rpx;
|
margin: 0 auto;
|
/* border-radius: 50%;
|
background-color: #ffffff;
|
box-shadow: 0 0 15rpx 0 rgba(0,0,0,.1); */
|
}
|
|
@keyframes swingInterval {
|
|
/* 前 2s：左右摇摆 */
|
0% {
|
transform: rotate(-8deg);
|
}
|
|
20% {
|
transform: rotate(8deg);
|
}
|
|
40% {
|
transform: rotate(-8deg);
|
}
|
|
/* 后面 60% 的时间静止不动 */
|
60%,
|
100% {
|
transform: rotate(0deg);
|
}
|
}
|
|
.home .picture.breath {
|
/* animation: breath 1.5s infinite ease-in-out; */
|
transform-origin: center;
|
/* 旋转支点在顶部 */
|
animation: swingInterval 2s infinite ease-in-out;
|
}
|
|
.pictureBox2 {
|
width: 100rpx;
|
}
|
|
.home .picture2 {
|
width: 100rpx;
|
height: 100rpx;
|
margin: 0 auto;
|
/* border-radius: 50%;
|
background-color: #ffffff;
|
box-shadow: 0 0 15rpx 0 rgba(0,0,0,.1); */
|
}
|
|
.home .picture2 .image {
|
width: 100%;
|
height: 100%;
|
}
|
|
@keyframes upDownAni {
|
|
0%,
|
100% {
|
transform: translateY(10rpx);
|
}
|
|
50% {
|
transform: translateY(-10rpx);
|
}
|
}
|
|
.home .picture .image {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
/* transform: rotate(90deg);
|
ms-transform: rotate(90deg);
|
moz-transform: rotate(90deg);
|
webkit-transform: rotate(90deg);
|
o-transform: rotate(90deg); */
|
}
|
|
.home .picture.active {
|
transform: rotate(180deg);
|
}
|
</style>
|
