<ul>
<li class="list-item" data-type="0" v-for="(item,index) in getBankCardList">
<div class="rssra" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="toDetail">
<div class='flex'>
<div class="logo">
<img class='bankicon' src="/apps/sign/images/bank-card.png"></img>
</div>
<div class="logoLeft">
<div style="font-size: 50rpx;">{{item.bankName}}</div>
<div style="font-size: 35rpx;">储蓄卡</div>
</div>
</div>
<div class='card-number'>{{item.bankAccount}}</div>
</div>
<div class="btn-box flex">
<div class="btn del" @click="del(item.bankCardId)">删除</div>
</div>
</li>
</ul>
.list-item {
position: relative;
margin: .15rem 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.list-item[data-type='0'] {
transform: translate3d(0,0,0);
}
.list-item[data-type="1"]{
transform: translate3d(-1.4rem,0,0);
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.item-left {
position: relative;
}
.item-img {
display: block;
width: 0.9rem;
height: 0.9rem;
}
.img-icon {
position: absolute;
top: 0;
left: 0;
width: .28rem;
height: .13rem;
background: rgba(241, 64, 112, 1);
border-radius: 0 0 .065rem 0;
font-size: .12rem;
text-align: center;
line-height: .13rem;
}
.item-desc {
width: 2.43rem;
height: auto;
margin-left: .12rem;
}
.item-text {
display: -webkit-box ;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}
.item-price {
line-height: .4rem;
}
.now-price {
color: #F14070;
margin-right: .1rem;
}
.origin-price {
text-decoration: line-through;
color: #6C7B8A;
}
.btn-box {
position: absolute;
top: 0;
right: -1.55rem;
}
.btn {
display: inline-block;
width: .7rem;
height: .9rem;
font-size: .17rem;
text-align: center;
line-height: .9rem;
}
.edit {
background: #212138;
}
.del {
background : #E7BB84;
// background-color : #c00;
width : 1.2rem;
display : flex;
flex-direction : column;
align-items : center;
justify-content : center;
color : #fff;
-webkit-transform : translateX(0.45rem);
transform : translateX(0.45rem);
-webkit-transition : all 0.4s;
transition : all 0.4s;
font-size : 0.25rem;
position : absolute;
right : -0.75rem;
height : 1.3rem;
text-align : center;
}
.add {
width: 2.16rem;
height: .9rem;
padding: 1px;
background: url(../../../images/live_goods/add.png) no-repeat;
background-size: 100%;
}
.tips {
width: 1.2rem;
height: .33rem;
margin: 1rem auto;
font-size: .12rem;
color: rgba(119, 128, 135, 1);
line-height: .165rem;
}
export default {
props: {
},
data () {
return {
startX: 0, // 初始位置
endX: 0, // 结束位置
};
},
created () {},
mounted () {},
methods: {
// 点击详情
toDetail () {
if (this.checkSlide()) {
this.restSlide();
} else {
this.$router.push({
path: "/activity/live/goods_info"
});
}
},
// 触摸开始
touchStart (e) {
// 记录初始位置
this.startX = e.touches[0].clientX;
},
// 触摸结束
touchEnd(e) {
// 当前滑动的父级元素
let parentElement = e.currentTarget.parentElement;
// 记录结束位置
this.endX = e.changedTouches[0].clientX;
// console.log('结束' + parentElement.dataset.type + '====' + (this.startX - this.endX));
// 左滑
if ( parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
this.restSlide();
parentElement.dataset.type = 1;
}
// 右滑
if ( parentElement.dataset.type == 1 && this.startX - this.endX < - 30 ) {
this.restSlide();
parentElement.dataset.type = 0;
}
this.startX = 0;
this.endX = 0;
},
// 判断当前是否有滑块处于滑动状态
checkSlide() {
let listItems = document.querySelectorAll('.list-item');
for (let i = 0 ; i < listItems.length ; i++) {
if (listItems[i].dataset.type == 1) {
return true;
}
}
return false;
},
restSlide() {
let listItems = document.querySelectorAll('.list-item');
// 复位
for ( let i = 0 ; i < listItems.length ; i++) {
listItems[i].dataset.type = 0;
}
}
},
components: {}
};