massage-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>
			</image>
			<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="$emit('addCart')">
				加入购物车
			</view>
			<view class="r" @click="$emit('submit')">
				{{ submiitTitle }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "submit",
		props: {
			submiitTitle: {
				default: '立即购买',
				type: String,
			},
			detail: {
				default: {}
			},
		},
		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;
			}
		}
	}
</style>