zhuangxiu/pages/product/common/productBottom.vue

<template>
	<view class="page-bottom">
		<view class="p-b-btn" @click="shopLi">
			<image class="icon" src="../../../static/icon/goodsServer.png" mode="widthFix"></image>
			<text>客服</text>
		</view>
		<view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="setCart(goodsObjact)">
			<image class="icon" src="../../../static/icon/goodsAddCart.png" mode="widthFix"></image>
			<text>购物车</text>
		</view>
		<view class="action-btn-group">
			<button type="primary" class=" action-btn add-cart-btn margin-r-30" @click="buy(2)">加入购物车</button>
			<button type="primary" class=" action-btn  buy-now-btn margin-r-30" @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: ''
		},
		systemStore:{
			default: function() {
				return {};
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		// 联系商家
		shopLi() {
			uni.makePhoneCall({
				phoneNumber: this.systemStore.phone //仅为示例
			});
		},
		buy(type) {
			this.$emit('specOPne',type);
		},
		// 加入购物车
		setCart(goodsObjact){
			uni.switchTab({
				url:'/pages/cart/cart'
			})
		}
		//收藏
		// 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; */
	.icon{
		width: 50rpx ;
	}
	.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;
		flex-grow: 1;
		&: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: 250rpx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 100px;
			flex-grow: 1;
			background: transparent;
			&.buy-now-btn {
				background-color: $color-yellow;
				color: #714D01;
			}
			&.add-cart-btn {
				background-color: $color-red;
				color:#6C0100 ;
			}
		}
	}
}
.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>