bc_wx_applet/components/specPopup.vue

<template>
	<uni-popup ref="popup" background-color="#fff" @change="change">
		<view class="s-box padding-sm">
			<view class="s-img"></view>
			<view class="g-info">
				<view class="s-name">商品名称01</view>
				<view class="s-price">￥12.36</view>
			</view>
		</view>
		<uni-section title="规格">
			<view class="spec-box padding-lr-sm">
				<view class="spec-item padding-lr-sm" :class="{'on-spec':item % 3 == 0}" v-for="item in 5">规格{{item + 1}}</view>
			</view>
		</uni-section>
		<uni-section title="购买数量">
			<view class="purchase-num padding-lr-sm">
				<view class="num">剩余562件</view>
				<uni-number-box v-model="vModelValue" @change="changeValue" />
			</view>
		</uni-section>
		<view class="btn-box">
			<view class="btn reset">重置</view>
			<view class="btn confirm">确定</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name:"specPopup",
		data(){
			return{
				vModelValue:1
			}
		},
		methods:{
			changeValue(){},
			change(){},
			open(){
				this.$refs.popup.open('bottom');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-box{
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 80upx;
		.btn{
			width: 45%;
			height: 60upx;
			text-align: center;
			line-height: 60upx;
			border-radius: 30upx;
		}
		.reset{
			border:solid 1px #EEE;
			box-sizing: border-box;
		}
		.confirm{
			background-image: $base-bg-gradient-color;
			color: #FFF;
		}
	}
	.spec-box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.spec-item{
			height: 60upx;
			line-height: 60upx;
			border:solid 1px #EEE;
			box-sizing: border-box;
			text-align: center;
			margin-left: 20upx;
			border-radius: 3px;
			margin-bottom: 20upx;
			font-size: 12px;
		}
		.spec-item:first-child{
			margin-left: 0;
		}
		.on-spec{
			background-image: $base-bg-gradient-color;
			color: #FFF;
		}
	}
	.s-box{
		width: 100%;
		display: flex;
		border-bottom: solid 1px #EEE;
		.s-img{
			width: 140upx;
			height: 140upx;
			background-color: #EEE;
			border-radius: 4px;
		}
		.g-info{
			padding-left: 20upx;
			.s-name{
				padding-bottom: 4px;
			}
			.s-price{
				color: #F00;
				font-size: 14px;
			}
		}
	}
	.purchase-num{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1px #EEE;
		padding-bottom: 30upx;
		.num{
			font-size: 12px;
		}
	}
</style>