uniapp 多规格选择

效果图

html

		
		<!-- 规格选择弹窗 start -->
		<view class="Specifications" >
			<view class="Specifications-mask"></view>
			<view class="Specifications-popup">
				<view class="Specifications-popup-colse cuIcon-roundclose"></view>
				<view class="Specifications-popup-head">
					<view class="Specifications-popup-head-img"><image mode="widthFix" src="/static/admin-nan.png"></image></view>
					<view class="Specifications-popup-head-text">
						<view class="Specifications-popup-head-text-name">鸡丝拌面</view>
						<view class="Specifications-popup-head-text-price"><label for="">¥</label><text>23.00</text></view>
						<view class="Specifications-popup-head-text-parameter">
							<text>剩余20份</text>
							<text>每人限购2份</text>
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="Specifications-huadong">
					
					<view class="Specifications-popup-sele" v-for="(item,index) in specifications" :key="index">
						<view class="Specifications-popup-sele-name">{{item.name}}</view>
						<view class="Specifications-popup-sele-list">
							<text :class=" item.start === index2 ?'rmoiu':'' " @click="morloe(index,index2)" v-for="(item2,index2) in item.children" :key="index2">{{item2.title}}</text>
						</view>
					</view>		
				
				</scroll-view>
					<view class="Specifications-popup-munbar">
						<view class="Specifications-popup-munbar-name">购买数量</view>
						<view class="redmunber"><wm-numberBox model="2"></wm-numberBox></view>
					</view>
					<view class="Specifications-popup-but">
						<label @click="Jumpgwc">加入购物车</label>
					</view>				
			</view>
		</view>
		<!-- 规格选择弹窗 end -->

js

<script>
 export default {
   data(){
     return {
						specifications:[
					{
						id:0,
						name:'规格',
						start:0,
						children:[
							{id:101,title:'大份'},
							{id:102,title:'中份'},
							{id:103,title:'小份'}
						]
					},
					{
						id:1,
						name:'口味',
						start:0,
						children:[
							{id:101,title:'酸辣'},
							{id:102,title:'甜味'},
							{id:103,title:'孜然味'},
							{id:104,title:'烧烤味'}
						]
					}
				],	
	
	}
	   },
    onLoad(){
     },
    methods: {
					morloe(index,index2){
				
				this.specifications[index]['start'] = index2	
				
			},		

     }
 }
</script>

css

/* 规格选择弹窗 start */

.Specifications{ width: 100%; height: 100%; position: fixed; bottom: 0px; left: 0px; z-index: 999;}
.Specifications-mask{ width: 100%; height: auto; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: 0px auto; background: rgba(0,0,0,0.4); z-index: 1000;}
.Specifications-popup{ width:100%; height: auto; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 1001; background: #fff;  border-radius: 5px 5px 0px 0px; } 
.Specifications-popup-colse{ position: absolute; top: 0px; right: 0px; font-size: 30px; color: #999; z-index: 1002; }
.Specifications-popup-head{ width: 94%; height: auto; margin: 0px auto; border-bottom: 1px #eee solid; display: flex; flex-direction: row; padding: 20rpx 0px; }
.Specifications-popup-head-img{ width: 25%;}
.Specifications-popup-head-img image{ width: 100%; height: 200rpx; border: 1px #eee solid; display: block; }
.Specifications-popup-head-text{ width: 75%; display: flex; flex-direction:column; box-sizing: border-box; padding-left: 3%; justify-content: space-around; }
.Specifications-popup-head-text-name{ font-size: 16px; font-weight: bold; width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #444;  }
.Specifications-popup-head-text-price{ display: flex; flex-direction: row; color:#eaa02c ;display:table-cell;   vertical-align:bottom;  }
.Specifications-popup-head-text-price label{ font-size: 12px; font-weight: bold; margin-right: 2%; }
.Specifications-popup-head-text-price text{ font-size: 18px;}
.Specifications-popup-head-text-parameter{ font-size: 13px; color: #888; }
.Specifications-popup-head-text-parameter text{ margin-right: 3%;}
.Specifications-huadong{ width: 100%; max-height: 600rpx; padding-top: 10px; }
.Specifications-popup-sele{ width: 100%; height: auto; box-sizing: border-box; padding: 0px 3%; } 
.Specifications-popup-sele-name{ width: 100%; height: auto; font-size: 15px; color: #333; margin-bottom: 15px; }
.Specifications-popup-sele-list{ width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap;}

.Specifications-popup-sele-list text{  color: #fe7b2e; margin:0px 0%; border-radius: 4px; text-align: center; box-sizing: border-box; min-width: 30%; border: 1px #fe7b2e solid; margin-bottom: 15px; font-size: 14px;line-height: 33px; padding: 0px 2%; margin-right: 3%; }

.Specifications-popup-munbar{ width: 100%; height: auto; box-sizing: border-box; padding: 40rpx 5%; display: flex; justify-content: space-between;  }
.Specifications-popup-but{ width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; padding: 10px 3%; box-sizing: border-box; border-top: 1px #eee solid;}
.Specifications-popup-but label{ text-align: center;  color: #fff; height: 100rpx; line-height: 100rpx;
/* background-image:linear-gradient(#ff4f19,#E33E33); */
 background:#E31D1A;
	border-radius: 40px; letter-spacing: 3px;
  }
.none{ bottom: -100%;}  
.none .Specifications-popup{ bottom: -100%; transition: all 0.5s;}
.none .Specifications-mask{ display: none; transition: all 0.5s;}


.show{ bottom: 0px;}
.show .Specifications-popup{ bottom: 0%; transition: all 0.5s;}
.show .Specifications-mask{ display: block; transition: all 0.5s;}

.rmoiu{ background: #ff8d00; color: #fff!important; }

	
/* 规格选择弹窗 end */