perry-mall/components/detail-bottom-nav/bottom-nav.vue

<template>
	<view>
		<!-- 底部按钮 -->
		<view class="bottom-nav-box display-between-center">
			<button type="default" @tap="showFrame=true">立即购买</button>
			<button type="default" @tap="showFrame=true">加入购物车</button>
		</view>
		<!-- 底部按钮弹框 -->
		<view v-show="showFrame" class="frame-box" @tap="showFrame=false">
			<view @tap.stop="showFrame=true">
				<view class="frame-top">
					<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" mode="aspectFill" lazy-load></image>
					<view>
						<!-- 商品标题 -->
						<view class="clips2 frame-title">阿什拉夫开机爱上了就干了阿什拉夫开机爱上了就干了阿什拉夫开机爱上了就干了</view>
						<!-- 商品价格 -->
						<view class="frame-price">
							<!-- 折扣价 -->
							<view>￥2,000</view>
							<!-- 原价 -->
							<view style="text-decoration: line-through;">￥3,000</view>
						</view>
					</view>
				</view>
				<!-- 商品尺寸、规格 -->
				<view class="frame-color-box">
					<!-- 颜色 -->
					<drop-down></drop-down>
					<!-- 尺寸 -->
					<drop-down :dropObj="dropObj" @chooseItem="chooseItem"></drop-down>
				</view>
				<!-- 商品库存 -->
				<view class="frame-stock">库存：99</view>
				<!-- 加减按钮 -->
				<view class="frame-add-del">
					<view class="display-between-center add-del-box">
						<!-- 减 -->
						<button @tap="deladdEvent(0)" :disabled="buyNum==1" class="item-btn display-center-center">­­­­­­­­­­­­﹣</button>
						<!-- 输入框 -->
						<view class="input-box display-center-center">
							<input type="text" v-model="buyNum" />
						</view>
						<!-- 加 -->
						<button @tap="deladdEvent(1)" class="item-btn display-center-center">﹢</button>
					</view>
				</view>
				<!-- 立即购买、加入购物车按钮 -->
				<view class="frame-btn-box">
					<button type="default" @tap="immediatelyBuy">立即购买</button>
					<button type="default">加入购物车</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dropDown from '@/components/drop-downs/drop-down.vue';
	export default {
		name:"bottom-nav",
		components:{
			dropDown
		},
		data() {
			return {
				showFrame:false,
				dropObj:{
					title:'尺寸',
					childrenList:[
						{
							id:1,
							childrenTitle:'1.2'
						},
						{
							id:1,
							childrenTitle:'6'
						}
					]
				},
				buyNum:1
			};
		},
		methods:{
			immediatelyBuy(){
				uni.navigateTo({
					url:`/pagesA/getReadyDan/getReadyDan`
				})
			},
			chooseItem(e){
				this.log(e)
			},
			// 数量加减事件
			deladdEvent(index){
				if(index==0){//减少数量
					this.buyNum--
				} else {//增加数量
					this.buyNum++
				}
			}
		}
	}
</script>

<style>
	.display-center-center {display: flex;justify-content: center;align-items: center;}
	.display-between-center{display: flex;justify-content: space-between;align-items: center;}
	.bottom-nav-box{position: fixed;bottom: 0;left: 0;right: 0;padding: 20rpx 40rpx;background-color: #FFFFFF;}
	button{
		width: 310rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 30rpx;
		font-size: 36rpx;
		border: 1rpx solid #FFFFFF;
		color: #FFFFFF!important;
	}
	button:first-child{border: 1rpx solid #f81c1c;background-color: #f81c1c;}
	button:last-child{border: 1rpx solid #000000;background-color: #000000;}
	
	.frame-box{position: fixed;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.5);z-index: 12;}
	.frame-box > view{background-color: #FFFFFF;position: absolute;bottom: 0;left: 0;right: 0;padding: 30rpx;}
	.frame-top {display: flex;justify-content: space-between;}
	.frame-top image {width: 223rpx;height: 223rpx;border-radius: 20rpx;flex-shrink: 0;margin-right: 30rpx;margin-top: -80rpx;}
	.frame-top > view{width: 100%;display: flex;justify-content: space-between;flex-direction: column;}
	
	.frame-title{font-size: 36rpx;color: #000000;line-height: 50rpx;}
	.frame-price{display: flex;align-items: center;}
	.frame-price view:first-child{font-size: 40rpx;margin-right: 10rpx;}
	.frame-price view:last-child{font-size: 28rpx;color: #868695;}
	.frame-color-box{margin-top: 20rpx;}
	.frame-btn-box{display: flex;align-items: center;justify-content: space-around;margin-top: 100rpx;}
	.frame-btn-box button{height: 80rpx;line-height: 80rpx;border-radius: 20rpx;}
	.frame-stock{font-size: 24rpx;color: #000000;text-align: right;}
	/* 加减按钮 */
	.frame-add-del{display: flex;justify-content: flex-end;}
	.add-del-box{width: 180rpx;margin-top: 20rpx;}
	.input-box {width: 78rpx;height: 40rpx;font-size: 24rpx; border-radius: 16rpx;margin: 0 6rpx; border: 1rpx solid #000000;overflow: hidden;}
	input {text-align: center;}
	.item-btn {width: 40rpx;height: 40rpx;border-radius: 12rpx;background-color: #000000!important;border: 1rpx solid #000000!important; color: #FFFFFF;padding: 0rpx;}
</style>