book-hi/pages-mall/components/goods/submitBar.vue

<template>
	<view class="">	
		<view class="submitBar">
			<view class="left">
				<button class="item serviceBtn" open-type="contact" >
					<u-icon :size="40" name="server-fill"></u-icon>
					<view class="text shu-elip-1">客服</view>
				</button>
			<!-- 	<view class="item">
					<u-icon name="server-fill" :size="46" :color="$u.color['contentColor']"></u-icon>
					<view class="text shu-elip-1">客服</view>
				</view> -->
				<view class="item collection" @click="collectionFun">
					<u-icon :name="isCollection==1?'star-fill':'star'" :color="isCollection==1?'#ed3f14':'#333'" :size="40" ></u-icon>
					<view class="text shu-elip-1">{{isCollection==1?'已收藏':'收藏'}}</view>
				</view>
				<view class="item car" @click="goShoppingCart">
					<u-badge class="car-num" :count="cartNums" type="error" :absolute="true" :offset="[-5, 2]" v-if="cartNums>0"></u-badge>
					<u-icon name="shopping-cart" :size="40"></u-icon>
					<view class="text shu-elip-1">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="soldOutBtn" v-if="data.stock_total<=0||Number(data.price_selling)<=0">
					已售罄
				</view>
				<template v-else>
					<view class="joinCartBtn" @click="addShoppingCart">加入购物车</view>
					<view class="buyBtn" @click="buyNow">立即购买</view>
				</template>
			</view>
		</view>
		
		<view class="siteBar"></view>
	</view>
</template>
<script>
export default {
	name: 'goods-operate',
	props: {
		// 数据源
		data: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	watch:{
		data(val){
			this.isCollection = val.is_collection;
		}
	},
	data() {
		return {
			isCollection:false,
			cartNums:0,
		};
	},
	mounted(){
		this.isCollection = this.data.is_collection;
		this.getCartNums();
	},
	methods: {
		// 获取购物车数量
		getCartNums(){
			this.$u.api.getCartNumsAjax().then(({code,data})=>{
				console.log('购物车数量>>>>>>',data)
				this.cartNums = data;
			})
		},
		// 加入购物车
		addShoppingCart() {
			this.$emit('addShoppingCart');
		},
		collectionFun(){
			const token = uni.getStorageSync('token');
			if(!token){
				uni.navigateTo({
					url:'/pages/login/index'
				})
				return false;
			}
			// this.isCollection = this.isCollection==1?2:1
			this.$u.api.collectonAjax(this.data.id).then(({code,msg,data})=>{
				if(code==1){
					this.$u.toast(msg);
					this.isCollection = data.is_collection;
				}
			})
		},
		// 立即购买
		buyNow() {
			this.$emit('buyNow');
		},

		// 去购物车
		goShoppingCart() {
			uni.switchTab({
				url: '/pages/mall/shopping-cart'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.siteBar{
		height: 120rpx;
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
		// box-sizing: content-box;		
		@extend .safeAreaPad;
	}
.submitBar {
	border-top: solid 2rpx #f2f2f2;
	// padding: 16rpx 0;
	
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: $app-theme-bg-color;
	z-index: $app-zIndex-fixed;
	// padding-bottom: constant(safe-area-inset-bottom);
	// padding-bottom: env(safe-area-inset-bottom);
	// box-sizing: content-box;
	@extend .safeAreaPad;
	
	.left {
		display: flex;
		font-size: 24rpx;
		.item {
			width: 90rpx;
			// margin: 0 15rpx;
			text-align: center;
			&.car {
				position: relative;
				.car-num {
					// position: absolute;
					// top: -10rpx;
					// right: -10rpx;
				}
			}
			// &.collection{
			// 	width: ;
			// }
		}
		.text{
			font-size: 24rpx;
			line-height: 1.5;
			margin-top: 5rpx;
		}
	}
	.right {
		flex: 1;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		justify-content: space-evenly;
		margin-left: 20rpx;
		// width: 480rpx;
		.btn {
			// flex: 1;
			min-width: 200rpx;
			line-height: 66rpx;
			// padding: 0 20rpx;
			border-radius: 36rpx;
			color: #ffffff;
			// margin-right: 20rpx;
			text-align: center;
		}
		.cart {
			background-color: #ff7900;
		}
		.buy {
			background-color: #ed3f14;
		}
	}
}

.serviceBtn{
	background-color: transparent;
	padding: 0;
	border: none;
	line-height: 1;
	&::after{
		content: '';
		border: none;
		display: none;
	}
}
</style>