newXLSC/pages/product/common/productBottom.vue

<template>
	<view class="page-bottom">
		<!-- <view class="p-b-btn" v-if="!product_id" :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" v-if="!product_id">
			<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(1)">立即购买</button>
		</view> -->
		<view class="action-btn-group">

			<button type="primary" class="botton" @click="buy(1)">立即购买</button>
		</view>
	</view>
</template>

<script>
	import {
		collectAdd,
		collectDel
	} from '@/api/product.js';
	export default {
		props: {
			isVip: {

			},
			many: {
				default: 9
			},
			goodsObjact: {
				default: function() {
					return {};
				}
			},
			goodsid: {
				default: ''
			},
			product_id: {

			}
		},
		data() {
			return {

			};
		},
		onLoad() {
			// seckillGoods({}, this.goodsid).then(function({ data }) {
			// 	obj.list = data;
			// 	console.log(obj.list,'list');
			// 	obj.product_id = data.productValue["默认"].product_id
			// 	console.log(obj.product_id,'徐浩岚');
			// });
		},
		methods: {
			buy(type) {
				this.$emit('specOPne', type);
			},
			//收藏
			toFavorite(item) {
				let obj = this;
				console.log(obj.goodsObjact, '信息');
				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: space-between;
		// padding-left: 20rpx;
		align-items: center;
		width: 750rpx;
		height: 96rpx;
		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: #FF4C4C;
			}

			.iconlikefill {
				font-size: 46rpx;
			}

			image {
				width: 56rpx;
				height: 58rpx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 85rpx;
			overflow: hidden;
			// margin-left: 20rpx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28rpx;
				width: 0;
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 300rpx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;

				&.buy-now-btn {
					width: 600rpx;
					background-color: #FF4C4C;
				}

				&.add-cart-btn {
					width: 600rpx;
					background-color: #FFB238;
				}
			}
		}

		.botton {
			width: 750rpx;
			height: 85rpx;
			background: linear-gradient(90deg, #FE6F61 0%, #FF4343 100%);
			// border-radius: 43rpx;

			line-height: 85rpx;
			margin: 0 auto;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.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>