WenWuGuanJia/components/quick-cart/quick-cart.vue

<template>
	<view class="component" v-if="show">
		<view class="sub-block">
			<view class="b-main" @click="onClose()">
				<view class="b-info">
					<view class="b-count" @click.stop="onJumpCart()">
						<view class="iconfont icon-user-cart"></view>
						<view class="s-num">{{ cartCount }}</view>
					</view>
					<view class="b-price">¥{{ totalPrice }}</view>
				</view>
				<view class="b-action" @click.stop="onPreview()">
					<view class="s-submit">去结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'quick-cart',
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	computed: {
		cartCount() {
			return this.$store.getters.cartCount;
		},
		totalPrice() {
			const cartList = this.$store.getters.cartList;
			let totalPrice = 0;
			for (var i = 0; i < cartList.length; i++) {
				totalPrice += parseFloat(cartList[i].goods_price);
			}
			return totalPrice;
		}
	},
	methods: {
		onJumpCart(e) {
			console.log('onJumpCart');
			uni.navigateTo({
				url: '/pages/order/cart'
			});
		},
		onClose(e) {
			console.log('onClose');
			this.$emit('close');
		},
		onPreview() {
			console.log('onPreview');
			const cartList = this.$store.getters.cartList;
			let goodsData = [];
			for (var i = 0; i < cartList.length; i++) {
				let cartItem = cartList[i];
				goodsData.push({
					cart_id: cartItem.id,
					goods_type: cartItem.goods_type,
					goods_id: cartItem.goods_id
				});
			}
			uni.navigateTo({
				url: '/pages/order/preview?goods_data=' + JSON.stringify(goodsData)
			});
		}
	}
};
</script>

<style>
.sub-block {
	position: fixed;
	left: 30upx;
	bottom: 150upx;
	z-index: 100;
	width: 690upx;
}

.sub-block image {
	width: 100%;
}

.b-main {
	width: 690upx;
	height: 100upx;
	background: #fff;
	border: 2upx solid #eee;
	border-radius: 50upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.b-info {
	padding: 0 20upx;
	display: flex;
	align-items: center;
}

.b-info .b-count {
	position: relative;
}

.b-info .b-count .iconfont {
	font-size: 50upx;
	width: 60upx;
	height: 60upx;
	color: #666;
}

.b-info .b-count .s-num {
	position: absolute;
	right: -10upx;
	top: -30upx;
	font-size: 24upx;
	background: #da5650;
	color: #fff;
	width: 40upx;
	height: 40upx;
	line-height: 40upx;
	text-align: center;
	border-radius: 20upx;
}

.b-info .b-price {
	margin-left: 20upx;
	font-size: 28upx;
	font-weight: bold;
	color: #da5650;
}

.b-action {
	padding: 0 20upx;
	display: flex;
	align-items: center;
}

.b-action .s-submit {
	padding: 0 50upx;
	height: 70upx;
	line-height: 70upx;
	font-size: 26upx;
	color: #fff;
	background: #da5650;
	border-radius: 35upx;
}
</style>