byg/pages/product/common/productBottom.vue

<template>
	<view class="page-bottom">
		<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
			<text class="iconfont iconhome"></text>
			<text>首页</text>
		</navigator>
		<view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="toFavorite(goodsObjact)">
			<text class="iconfont " :class="{ iconlike: !goodsObjact.userCollect, iconlikefill: goodsObjact.userCollect }"></text>
			<text>收藏</text>
		</view>
		<view class="action-btn-group">
			<button type="primary" class=" action-btn no-border add-cart-btn" @click="buy(2)">加入购物车</button>
			<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(1)">立即购买</button>
		</view>
	</view>
</template>

<script>
import { collectAdd, collectDel } from '@/api/product.js';
export default {
	props: {
		many: {
			default: 9
		},
		goodsObjact: {
			default: function() {
				return {};
			}
		},
		goodsid:{
			default: ''
		}
	},
	data() {
		return {};
	},
	methods: {
		buy(type) {
			this.$emit('specOPne',type);
		},
		//收藏
		toFavorite(item) {
			let obj = this;
			item.userCollect = !item.userCollect;
			if (!item.userCollect) {
				collectDel({ id: obj.goodsid, category: 'product' }).then(function(e) {
					uni.showToast({
						title: '成功取消收藏',
						type: 'top',
						duration: 1500
					});
				});
			} else {
				collectAdd({ id: obj.goodsid, category: 'product' }).then(function(e) {
					uni.showToast({
						title: '成功加入收藏',
						type: 'top',
						duration: 1500
					});
				});
			}
		}
	}
};
</script>

<style lang="scss">
/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	bottom: 0rpx;
	z-index: 95;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	height: 120rpx;
	background-color: #ffffff;
	/* box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
	border-radius: 16rpx; */
	.p-b-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-sm;
		color: $font-color-base;
		width: 96rpx;
		height: 80rpx;
		.iconfont {
			font-size: 40rpx;
			line-height: 48rpx;
			color: $font-color-light;
		}
		&.active,
		&.active .iconfont {
			color: $uni-color-primary;
		}
		.iconlikefill {
			font-size: 46rpx;
		}
		image {
			width: 56rpx;
			height: 58rpx;
		}
	}
	.action-btn-group {
		display: flex;
		height: 76rpx;
		border-radius: 100px;
		overflow: hidden;
		margin-left: 20rpx;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28rpx;
			width: 0;
			border-right: 1px solid rgba(255, 255, 255, 0.5);
		}
		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 270rpx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 0;
			background: transparent;
			&.buy-now-btn {
				background-color: #303e49;
			}
			&.add-cart-btn {
				background-color: $base-color;
			}
		}
	}
}
.p-b-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: $font-sm;
	color: $font-color-base;
	width: 96rpx;
	height: 80rpx;
	.iconfont {
		font-size: 40rpx;
		line-height: 48rpx;
		color: $font-color-light;
	}
	&.active,
	&.active .iconfont {
		color: $uni-color-primary;
	}
	.icon-fenxiang2 {
		font-size: 42rpx;
		transform: translateY(-2rpx);
	}
	.iconlikefill {
		font-size: 46rpx;
	}
}
</style>