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.
241 lines
5.9 KiB
241 lines
5.9 KiB
<template>
|
|
<view class="mall-my-collect-page">
|
|
<view class="page-content padding-bottom-safe-footer-20">
|
|
<view class="">
|
|
<!-- -->
|
|
<view class="" v-if="isLoadMyCollectFinish && myCollectList.length">
|
|
<view class="jc-header bg-ff">
|
|
<view class="line-height-header padding-lr-30 flex align-center">
|
|
<view class="flex-one">
|
|
<ty-bar-search :value.sync="keyword" @search="search"></ty-bar-search>
|
|
</view>
|
|
<view class="margin-left-25 text-30 text-4d" @click="isEdit = !isEdit">
|
|
{{isEdit ? '完成' : '管理'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="margin-top-title-header-20">
|
|
<view
|
|
class=" margin-tb-20 padding-tb-20 padding-left-30 padding-right-35 radius-20 bg-ff flex align-center"
|
|
v-for="(item,index) in myCollectList" :key="index">
|
|
<view style="width:60rpx;" @click="choose(index)" v-if="isEdit">
|
|
<text
|
|
:class="item.is_select == 0 ? 'tyIcon-quan text-34 text-cc' : 'tyIcon-xuanzhong1 text-40 text-2f9'"></text>
|
|
</view>
|
|
|
|
<view class="flex-one flex" @click="goDetail(item.product_id)">
|
|
<image class="goodsImg" :src="item.cover_img" mode="aspectFill">
|
|
</image>
|
|
|
|
|
|
<view class="margin-left-20 flex-one">
|
|
<view class="height-90 text-cut-two flex align-center">
|
|
<!-- v-if="item.is_effective == 0" -->
|
|
<!-- <view class="margin-right-10 inline-block">
|
|
<ty-text-label text="失效" radius="5" bg-color="#FF8534"></ty-text-label>
|
|
</view> -->
|
|
<text class="text-30 line-45">{{item.name}}</text>
|
|
</view>
|
|
|
|
<view class="margin-top-90 text-cut-one">
|
|
<text
|
|
class="icon-icon-gongsi iconfont text-24 text-ff85 margin-right-5"></text>
|
|
<text class="text-24 text-77">{{item.company_name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view v-if="isLoadMyCollectFinish && !myCollectList.length">
|
|
<view class="margin-top-title-header-30">
|
|
<ty-text-no-data text="您还没有收藏过消防材料" :image="'/static/home/empty3.png'"
|
|
@btnClick="go('/pages/home/index',3)">
|
|
</ty-text-no-data>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 底部条 -->
|
|
<view class="jc-footer-safe " :class="isEdit ? 'bg-ff' : ''">
|
|
<view class="line-height-footer padding-lr-30 flex align-center justify-between" v-if="isEdit">
|
|
<!-- 全选按钮 -->
|
|
<view class="flex align-center">
|
|
<view style="width:60rpx;">
|
|
<text
|
|
:class="isAllChoose ? 'tyIcon-xuanzhong1 text-40 text-2f9' : 'tyIcon-quan text-34 text-cc'"
|
|
@click="chooseAll"></text>
|
|
</view>
|
|
<view class="text-28 text-4d">全选</view>
|
|
|
|
</view>
|
|
<view class="btn margin-left-40 bg-2f9 text-center text-30 text-ff" @click="collectCancel">
|
|
取消收藏</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 是否加载完成
|
|
isLoadMyCollectFinish: false,
|
|
// 是否编辑模式
|
|
isEdit: false,
|
|
// 是否全选
|
|
isAllChoose: false,
|
|
// 距离页面顶部距离
|
|
scrollTop: 0,
|
|
// 关键字
|
|
keyword: '',
|
|
// 我的收藏列表
|
|
myCollectList: [],
|
|
// 下拉刷新状态 true--正在下拉 false--没有在下拉
|
|
isPullDownIng: false,
|
|
// 列表状态
|
|
load_status: '',
|
|
|
|
|
|
}
|
|
},
|
|
onReady() {
|
|
// 加载我的收藏商品
|
|
this.loadMyCollectList()
|
|
},
|
|
onPageScroll(e) {
|
|
this.scrollTop = e.scrollTop
|
|
},
|
|
onPullDownRefresh() {
|
|
// 下拉刷新状态为进行中
|
|
this.isPullDownIng = true
|
|
// 加载我的收藏商品
|
|
this.loadMyCollectList()
|
|
},
|
|
|
|
methods: {
|
|
search(e) {
|
|
this.loadMyCollectList()
|
|
},
|
|
loadMyCollectList() {
|
|
this.rq.getData('fire/api/Fire/getCollectProductList', {
|
|
keyword: this.keyword
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
res.data.list.forEach((item,index)=>{
|
|
item.is_select = 0
|
|
})
|
|
this.myCollectList = res.data.list
|
|
this.isLoadMyCollectFinish = true
|
|
// 正在下拉状态时，停止下拉刷新
|
|
if (this.isPullDownIng) {
|
|
uni.stopPullDownRefresh()
|
|
this.isPullDownIng = false;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
choose(index) {
|
|
this.myCollectList[index].is_select = this.myCollectList[index].is_select == 1 ? 0 : 1
|
|
|
|
this.loadBottom()
|
|
},
|
|
goDetail(id){
|
|
if(!this.isEdit){
|
|
uni.navigateTo({
|
|
url:'/pages/material/detail?id='+id
|
|
})
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 全选商品
|
|
* @date 2022-12-01
|
|
*/
|
|
chooseAll() {
|
|
this.isAllChoose = !this.isAllChoose
|
|
let isAllChoose = this.isAllChoose ? 1 : 0
|
|
this.myCollectList.forEach(value => {
|
|
value.is_select = isAllChoose
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 重新加载底部栏
|
|
* @date 2022-12-01
|
|
*/
|
|
loadBottom() {
|
|
let isAllChoose = true
|
|
this.myCollectList.forEach(value => {
|
|
if (value.is_select == 0) {
|
|
isAllChoose = false
|
|
}
|
|
})
|
|
this.isAllChoose = isAllChoose
|
|
},
|
|
|
|
/**
|
|
* 取消收藏
|
|
* @date 2022-12-01
|
|
*/
|
|
collectCancel() {
|
|
let collectIds = []
|
|
for (let i = 0; i < this.myCollectList.length; i++) {
|
|
if (this.myCollectList[i].is_select == 1) {
|
|
collectIds.push(this.myCollectList[i].id)
|
|
}
|
|
}
|
|
|
|
if (collectIds.length == 0) {
|
|
this.cn.toast('请选择需要取消收藏的商品~')
|
|
return false
|
|
}
|
|
this.rq.getData('fire/api/Fire/cancelProductCollect', {
|
|
collect_id: collectIds.join(',')
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.cn.toast(res.msg)
|
|
this.isEdit = false
|
|
this.loadMyCollectList()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn {
|
|
width: 220rpx;
|
|
height: 73rpx;
|
|
line-height: 73rpx;
|
|
border-radius: 36rpx;
|
|
}
|
|
|
|
.goodsImg {
|
|
width: 240rpx;
|
|
height: 240rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn_block {
|
|
position: fixed;
|
|
right: 30rpx;
|
|
bottom: calc(var(--window-bottom) + 98rpx + 40rpx);
|
|
}
|
|
</style>
|