deming/pageE/mine/StoreCollection.vue
2020-06-24 16:39:31 +08:00

108 lines
2.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="store">
<u-empty mode="list" v-if="!list.length" color="#000" img-width="200" font-size="30" margin-top="300"></u-empty>
<u-swipe-action
v-for="(item, index) in list" :key="index"
:index='index'
:show="item.show"
:options="options"
@click="click"
@open="open"
>
<view class="item u-border-bottom">
<image src="@/pageE/static/mine/23.png"></image>
<!-- 此层wrap在此为必写的否则可能会出现标题定位错误 -->
<view class="title-wrap">
<view class="item-name u-line-1">胖胖定制此层wrap在此为必写的否则可能会出现标题定位错误</view>
<view class="item-date">
<image src="@/pageE/static/mine/26.png"></image>
<view>2020-05-17</view>
</view>
</view>
</view>
</u-swipe-action>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
show: false,
options: [
{
text: '删除',
style: {
backgroundColor: '#FF3131'
}
}
]
}
},
mounted() {
this.getStoreFavoritesList();
},
methods: {
getStoreFavoritesList() {
this.$u.api.getStoreFavoritesList({
type: 2 // 固定值
}).then(res => {
if(res.errCode == 0) {
}
})
},
click(index) {
this.list.splice(index, 1);
this.$u.toast(`删除了第${index+1}个cell`);
},
open(index) {
// 先将正在被操作的swipeAction标记为打开状态否则由于props的特性限制
// 原本为'false',再次设置为'false'会无效
this.list[index].show = true;
this.list.map((val, idx) => {
if(index != idx) this.list[idx].show = false;
})
}
},
};
</script>
<style lang="scss" scoped>
.store {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
padding-top: 1rpx;
.item {
padding: 30rpx;
display: flex;
align-items: center;
> image {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
flex-shrink: 0;
margin-right: 21rpx;
}
.title-wrap {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.item-name {
width: 260rpx;
font-size: 30rpx;
color: rgba(51,51,51,1);
}
.item-date {
display: flex;
align-items: center;
> image {
margin-right: 25rpx;
width: 24rpx;
height: 24rpx;
}
}
}
}
}
</style>