<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="cart-btn-bg" :style="{right:right+'rpx',bottom:bottom+'rpx',left:x,top:y}"  direction="all">
				<view class="cart-btn flex" @tap="toCart">
					<image src="/static/public/icon-cart.png" mode="widthFix" lazy-load></image>
					<view class="cart-total flex" v-if="cartNum*1 !== 0 && cartNum*1 < 99">{{cartNum}}</view>
					<view class="cart-total flex" v-if="cartNum*1 >= 99">99</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import {getCartNum} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		name:"enter-cart",
		props:{
			right:{//距离右边多宽
				type:Number,
				default:28
			},
			bottom:{//距离底部多高
				type:Number,
				default:185
			},
			total:{//购物车数量
				type:Number,
				default:1250
			},
		},
		data() {
			return {
				x: 'auto',
				y: 'auto'
			};
		},
		computed:{
			...mapState({
				cartNum: state=> state.moduleA.cartNum
			}),
		},
		methods:{
			toCart(){
				if(this.$toolAll.tools.judgeAuth()) {
					// 已授权
					uni.redirectTo({
						url:`/pagesA/cart/cart`
					})
				}
			},
		}
	}
</script>

<style scoped>
.movable-area{
	width: 0;
	height: 0;
}
.cart-btn-bg{
	width: 120rpx;
	height: 120rpx;
	border-radius: 30rpx;
	background-color: #0073bc;
	position: fixed;
}
.cart-btn{
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative;
}
.cart-btn image{
	width: 62rpx;
	height: 62rpx;
}
.cart-total{
	justify-content: center;
	align-items: center;
	width: 36rpx;
	height: 36rpx;
	border-radius: 100%;
	background-color: #FFFFFF;
	font-size: 24rpx;
	color: #068add;
	position: absolute;
	top: 20rpx;
	right: 12rpx;
}
@keyframes scale_name{
	from{transform: scale(.9);}
	to{transform: scale(1);}
}
</style>
