You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
2.9 KiB
137 lines
2.9 KiB
<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> |