<template>
|
<view class="slicing-off-detail-page-content">
|
<!-- ########### -->
|
<view class="list-items-group">
|
|
<view class="list-item" v-for="(item,index) in list" :key="'list-item-'+index">
|
<uni-swipe-action-item :auto-close="false">
|
<view class="list-item-show">
|
<view class="index-view">
|
<uni-badge :text="list.length-index" type="primary" size="normal" />
|
</view>
|
<view class="content-view auto-wrap">{{item.materialno}}</view>
|
</view>
|
<template v-slot:right>
|
<view class="swipe-action-btn danger" @tap.stop="onDel(index)"><text>删除</text></view>
|
</template>
|
</uni-swipe-action-item>
|
</view>
|
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name:'slicingOffDetailPageContent',
|
emits:['listChange'],
|
data(){
|
return {
|
list:[]
|
}
|
},
|
methods:{
|
init(arr) {
|
this.list = arr
|
},
|
onDel(index) {
|
this.list.splice(index,1)
|
this.$emit('listChange',this.list)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.slicing-off-detail-page-content {
|
height: 100%;
|
overflow: auto;
|
.list-items-group{
|
.list-item {
|
margin-bottom: 12rpx;
|
&:last-child{
|
margin-bottom: 0;
|
}
|
}
|
}
|
.list-item-show{
|
background-color: $uni-bg-color;
|
display: flex;
|
.index-view{
|
flex-shrink: 0;
|
padding: 16rpx 4rpx 0 16rpx;
|
}
|
.content-view{
|
flex-grow: 1;
|
width: 1px;
|
font-size: 32rpx;
|
padding: 16rpx 8rpx;
|
line-height: 1.3em;
|
}
|
}
|
.swipe-action-btn{
|
display: flex;
|
color: $uni-bg-color;
|
background-color: $u-primary;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
width: 100rpx;
|
&.danger{
|
background-color: $u-error;
|
}
|
}
|
}
|
</style>
|
