pinfen/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 flex" >
			<button type="primary" v-if="goodsObjact.is_barrel==0" class=" action-btn add-cart-btn" @click="buy(2)">加入购物车</button>
			<button type="primary" class=" action-btn  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: ''
		},
		systemStore:{
			default: function() {
				return {};
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		// 联系商家
		shopLi() {
			uni.makePhoneCall({
				phoneNumber: this.systemStore.phone //仅为示例
			});
		},
		buy(type) {
			this.$emit('specOPne',type);
		},
	}
};
</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 ;
	}
	.action-btn-group {
		height: 76rpx;
		padding-right:30rpx;
		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 {
			width: 250rpx;
			height: 100%;
			font-size: $font-base;
			border-radius: 100px;
			flex-grow: 1;
			margin-left: 30rpx;
			&.buy-now-btn {
				background: linear-gradient(90deg, #3C82E6, #5395F5);
				color: #FFFFFF;
			}
			&.add-cart-btn {
				background: transparent;
				color: #5395F5;
				border: 1px solid  #5395F5;
			}
		}
	}
}
.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>