caimei-applets-hehe/components/cm-module/cm-order-submit-nav/cm-order-submit-nav.vue

<template>
    <view class="cm-order-submit-nav" :class="{offset : isIphoneX}">
        <view class="submit">
			<view class="count">共{{ orderInfo.allCount }}件商品</view>
			<view class="total">
			    <view class="price"> <text class="label">总计:</text> <text>￥{{orderInfo.payAllPrice | formatPrice}}</text> </view>
			    <view class="reduce" v-if="orderInfo.discountedPrice"> <text class="label">共减:</text> <text>￥{{orderInfo.discountedPrice | formatPrice}}</text> </view>
			</view>
			<button class="btn" @click="$emit('commit')">提交订单</button>
		</view>
		<view class="reserved"></view>
    </view>
</template>

<script>
export default {
	props:{
		orderInfo:{
			type: Object,
			default:()=>{}
		}
	},
	computed:{
		isIphoneX(){
			return this.$store.getters.isIphoneX
		}
	}
}	
</script>

<style lang="scss" scoped>
	
.cm-order-submit-nav{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	.reserved{
		background: #fff;
	}
	.submit {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    box-sizing: border-box;
	    
	    height: 100rpx;
		
	    padding: 0 24rpx;
	    background: #fff;
	
		&.offset{
			transform: translateY(-50rpx);
		}
	
	    .count {
	        font-size: 28rpx;
	        color: #333333;
	    }
	    .total {
	        display: flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: flex-start;
	
	        margin: 0 24rpx;
	
	        .price {
	            font-size: 26rpx;
	            color: #ff457b;
	
	            .label {
	                color: #333333;
	            }
	        }
	        .reduce {
	            margin-top: 4rpx;
	            font-size: 24rpx;
	            color: #ff457b;
	        }
	    }
	    .btn {
	        width: 210rpx;
	        height: 80rpx;
	        background: linear-gradient(90deg, #fa55bf 0%, #f83c6c 100%);
	        opacity: 1;
	        color: #fff;
	        line-height: 80rpx;
	        text-align: center;
	        border-radius: 40rpx;
	        margin: 0;
	    }
	}
}	
</style>