jewelry-front/pages_order/components/product/submit.vue

<template>
	<view class="submit">
		<!-- 联系客服 -->
		<!-- <view @click="$emit('service')" class="service-icon">
			<image src="@/pages_order/static/productDetail/service.png" mode="widthFix" class="service-icon-img">
			</image>
			<view class="title">
				客服
			</view>
		</view> -->
		
		<button
		open-type="contact"
		class="service-icon">
			<uv-icon
			name="kefu-ermai"
			size="45rpx"
			></uv-icon>
			<view class="title">
				客服
			</view>
		</button>

        <button
		class="service-icon give"
		@click="$emit('toSend')">
			<uv-icon
			name="gift-fill"
			size="45rpx"
			color="#eb3300"
			></uv-icon>
			<view class="title">
				送礼
			</view>
		</button>

		<view class="submit-btn">
			<view class="l"
			@click="!disabled && $emit('addCart')"
			:class="{'disabled': disabled}">
				{{ disabled ? '库存不足' : '加入购物车' }}
			</view>
			<view class="r" 
            v-if="detail.num > 0"
			@click="!disabled && $emit('submit')"
			:class="{'disabled': disabled}">
				{{ disabled ? '库存不足' : submiitTitle }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "submit",
		props: {
			submiitTitle: {
				default: '立即购买',
				type: String,
			},
			detail: {
				default: {}
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #fff;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		padding: 0rpx 20rpx;
		box-sizing: border-box;

		// 联系客服
		.service-icon {
			padding: 0;
			margin: 0;
			background-color: transparent;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin: 0 20rpx;
			flex-shrink: 0;
			align-items: center;
			&::after{
				border: 0;
			}

			.service-icon-img {
				width: 45rpx;
				height: 45rpx;
			}

			.title {
				font-size: 26rpx;
				color: #666666;
				line-height: 40rpx;
			}
		}
		
		.give{
			background: rgba($uni-color, 0.1);
			padding: 6rpx 20rpx;
			border-radius: 15rpx;
			.title{
				color: $uni-color;
			}
		}

		.submit-btn {
			width: calc(100% - 140rpx);
			height: 80rpx;
			color: #fff;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-left: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			border: 1rpx solid $uni-color;
			.l {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				color: $uni-color;
			}

			.r {
				background: $uni-color;
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
				&.disabled {
					background: #cccccc;
					cursor: not-allowed;
				}
			}
			
			.l.disabled {
				color: #999999;
				cursor: not-allowed;
			}
		}
	}
</style>