deming/pageE/mine/storeConcerns.vue

181 lines
4.0 KiB
Vue
Raw Normal View History

2020-08-15 17:16:11 +08:00
<template>
<view class="collection-item">
<u-swipe-action
v-for="(item, index) in list" :key="index"
:index='index'
:show="item.show"
:options="options"
@click="removeFavorite"
@open="open"
>
<view class="item u-border-bottom" @click="viewStoreDetails(item)">
<image :src="item.friend_tomavatar"></image>
<!-- 此层wrap在此为必写的否则可能会出现标题定位错误 -->
<view class="title-wrap">
<view class="item-top u-line-1">{{ item.friend_tomname }}</view>
<view class="item-bottom">
<view class="item-date">
<image src="@/pageE/static/mine/26.png"></image>
<view>{{ item.friend_tomavatar | date }}</view>
</view>
</view>
</view>
</view>
</u-swipe-action>
<u-empty mode="list" v-if="!list.length" color="#000" img-width="200" font-size="30" margin-top="200"></u-empty>
<u-loadmore :status="loadStatus" bg-color="#FFFFFF" v-if="list.length > pageSize" @loadmore="loadmore" />
</view>
</template>
<script>
export default {
data() {
return {
pageSize: 12,
list: [],
options: [
{
text: '删除',
style: {
backgroundColor: '#FF3131'
}
}
],
page: 1,
timer: true,
loadStatus: 'loadmore',
}
},
mounted() {
this.getStoreList();
},
methods: {
viewStoreDetails(item) {
if(this.closeAction()) return false;
// console.log(this.list);
const list = this.list.filter(item => {
return item.show;
})
if(list.length) return false;
this.$u.route({
url: 'pageC/merchant/index',
params: {
id: item.friend_store_id,
}
})
},
async getStoreList({ load = 'reload' } = {}) {
const res = await this.$u.api.attentionMemberList({
role: 2,
page: this.page
})
this.timer = true;
if(res.errCode == 0) {
if(load == 'reload') this.list = res.data.data;
else if(load == 'loadmore') this.list.push(...res.data.data);
}
this.list.forEach(item => {
Object.assign(item, { show: false });
})
// console.log(this.list);
return res.data.data.length;
},
loadmore() {
if(!this.timer) return false;
this.timer = false;
this.loadStatus = "loading";
this.page++;
let promise;
promise = this.getStoreList({ load: 'loadmore' });
promise.then(length => {
this.loadStatus = "nomore";
if(length == 0) this.page--;
}).catch(() => {
this.loadStatus = "nomore";
this.page--;
})
},
removeFavorite(index) {
const id = this.list[index].friend_tomid;
this.$u.api.attentionMemberRemove({
id: id,
type: 'store'
}).then(res => {
if(res.errCode == 0) {
this.getStoreList();
} else {
this.$u.toast(res.message);
}
})
},
closeAction() {
let status = false;
this.list.map((val, idx) => {
if(val.show) {
status = true;
this.$set(this.list[idx], 'show', false);
};
})
this.$forceUpdate();
return status;
},
open(index) {
console.log(index);
// 先将正在被操作的swipeAction标记为打开状态否则由于props的特性限制
// 原本为'false',再次设置为'false'会无效
this.list[index].show = true;
this.list.map((val, idx) => {
if(index != idx) this.list[idx].show = false;
})
this.$forceUpdate();
}
},
};
</script>
<style lang="scss" scoped>
.collection-item {
2020-08-18 11:01:48 +08:00
width: 100%;
2020-08-15 17:16:11 +08:00
background-color: #ffffff;
.item {
2020-08-18 11:01:48 +08:00
width: 750rpx;
2020-08-15 17:16:11 +08:00
padding: 30rpx;
display: flex;
> image {
width: 180rpx;
height: 160rpx;
border-radius: 10rpx;
margin-right: 30rpx;
flex-shrink: 0;
}
.title-wrap {
2020-08-18 11:01:48 +08:00
overflow: hidden;
2020-08-15 17:16:11 +08:00
flex: 1;
.item-top {
2020-08-18 11:01:48 +08:00
width: 100%;
2020-08-15 17:16:11 +08:00
font-size: 30rpx;
color: rgba(51,51,51,1);
line-height: 44rpx;
margin-bottom: 54rpx;
}
.item-bottom {
2020-08-18 11:01:48 +08:00
width: 100%;
2020-08-15 17:16:11 +08:00
display: flex;
align-items: center;
justify-content: space-between;
.item-price {
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>