tlfb/pages/product/common/productBottom.vue

<template>
	<view class="page-bottom" v-if="is_gold == 0 && is_integral == 0">
		<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>
	<view class="page-bottom" v-else>
		<view class="action-btn-group">
			<button type="primary" style="width: 750rpx;" 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: ''
		},
		is_gold: {
			default: 0
		},
		is_integral: {
			default: 0
		}
	},
	data() {
		return {};
	},
	mounted() {
		console.log(this.is_gold)
	},
	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;
	left: 0rpx;
	bottom: 0rpx;
	z-index: 95;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	height: 98rpx;
	background: rgba(255, 255, 255, 0.9);
	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: 100rpx;
		height: 98rpx;
		.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;
		}
	}
	.action-btn-group {
		display: flex;
		height: 98rpx;
		overflow: hidden;
		position: relative;
		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 375rpx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 0;
			// background: transparent;
			background: #ffb238;
			&.buy-now-btn {
				background-color: #FF4C4C;
			}
			&.add-cart-btn {
				background: #ffb238;
			}
		}
	}
}

</style>