LSM_OIL_SITE/packageIntegral/productAddition/productAddStep2.vue

<template>
	<view class="container">
		
		<view class="body">
			<view class="bodyContent">
							<uni-collapse ref="collapse">
								<uni-collapse-item title="属性类型:" style="width: 700rpx;">
									<view class="content">
										<view>商品类型：</view>
										<view>
											<uni-section type="line">
														<view class="uni-px-5">
															<view style="display: inline-block;">尺码：</view>
															<uni-data-checkbox mode="tag" v-model="radio" :localdata="range"></uni-data-checkbox>
														</view>
														<view class="uni-px-5 uni-pb-5">
															<view style="display: inline-block;">颜色：</view>
															<uni-data-checkbox mode="tag" multiple v-model="checkbox" :localdata="hobby"></uni-data-checkbox>
														</view>
													</uni-section>
										</view>
									</view>
								</uni-collapse-item>
							</uni-collapse>
			</view>
			<view>
				<view>批量填充：<text style="color: #999999;">批量填充填入信息后，可以批量将内容填写到SKU 信息里</text></view>
				<view class="tagButton" v-for="item in bottonList">{{item.label}}</view>
				<view class="redButton">确定</view>
			</view>
			<view>
				<view>
					<text style="color: red;">*</text>
					<text>规格</text>
					<text>M+红色</text>
				</view>
				<view class="tagButton" v-for="item in bottonList">{{item.label}}</view>
				<view style="display: inline-block;">删除</view>
			</view>
			<view>
				<text style="color: red;">*</text>
				<text>商品图片</text>
				<text>最多可上传10张图片</text>
				<view></view>
			</view>
			<view>
				<text>详情图片</text>
				<text>最多可上传10张图片</text>
				<view></view>
			</view>
		</view>
		
		</view>
</template>

<script>
	export default{
		data(){
			return{
				radio: 0,
		        range: [
		          {
					text: 'M',
					value: 0
				}, {
					text: 'X',
					value: 1
				}, {
					text: 'XL',
					value: 2
				}, {
					text: '2XL',
					value: 3
				},
		        ],
				checkbox:[0],
				hobby: [{
					text: '黑色',
					value: 0
				}, {
					text: '红色',
					value: 1
				}, {
					text: '白色',
					value: 2
				}, {
					text: '蓝色',
					value: 3
				}],
				bottonList:[
					{label:'市场价格'},
					{label:'销售价格'},
					{label:'商品库存'},
					{label:'兑换积分'}
				]
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.body{
			padding: 30rpx;
			width: 100%;
		}
	}
	.bodyContent{
		width: 100%;
		
	}
	.tagButton{
		display: inline-block;
		width: 133rpx;
		height: 58rpx;
		background: #f5f5f5;
		color: #666666;
		border-radius: 10rpx;
		line-height: 58rpx;
		text-align: center;
		margin: 10rpx;
	}
	.redButton{
		display: inline-block;
		width: 84rpx;
		height: 58rpx;
		background: red;
		color: #fff;
		border-radius: 10rpx;
		line-height: 58rpx;
		text-align: center;
	}
	
</style>