dengrui/pagesB/myCollection/myCollection.vue

<template>
    <view v-if="pageShow">
        <!-- 使用标题栏 -->
        <status-nav :statusBackw="true" :statusTitle="true" :whereCome="1" :title-val="'我的收藏'" :tabcolor="'#ffffff'"></status-nav>
        <view :style="{marginTop:(statusHNH+10)+'px'}">
            <view v-if="dataArr.length!=0" :class="current==index?'fadeOut':''" class="padding-sx20 fon28 bacb margin-sx20 padding-zy30 animated " style="border-radius: 5rpx;" v-for="(item,index) in dataArr" :key="index">
                <view @tap="goDetail(item.sku.spu_id)" class="margin-sx20 disac posir borbot">
                    <image class="radius10 flexs" style="width: 215rpx;height: 215rpx;" :src="item.sku.main_image" mode="aspectFill"></image>
                    <view class="margin-z20 width100">
                        <view class="fon28 clips2">{{item.spu.name}}</view>
                        <view class="colorf78 margin-sx10">￥<text class="fon36 bold ">{{item.sku.price/100}}</text>.0</view>
                        <view class="dis" style="justify-content:flex-end">
                            <view @tap.stop="canleCollection(item.id,index)" class="fon26 margin-s20 flexs" style="padding: 12rpx;border-radius: 60rpx;border: 1rpx solid #bababa;width: 28%;text-align: center;">取消收藏</view>
                        </view>
                    </view>
                </view>
            </view>
			<view v-if="dataArr.length==0" class="zanwu" @tap="goList">暂无更多收藏，赶快去收藏吧</view>
        </view>
        <backTop :showTop="showTop" @backTop="backTop"></backTop>
    </view>
</template>

<script>
    import backTop from '@/components/backTop.vue';
    export default {
        components:{
            backTop
        },
        data() {
            return {
                dataArr:[],
                showTop:false,
                current:'-1',
				page:1,
				size:10,
				total:'',
				isZanw:true,
				statusHNH:uni.getStorageSync('statusHNH'),
				pageShow:false
            }
        },
        onPageScroll(e) {
            e.scrollTop > 360 ? this.showTop = true : this.showTop = false
        },
        onLoad() {
            
        },
		onShow() {
			this.$toolAll.tools.guoq()
			this.checkCon()
		},
		onReachBottom() {
			if(this.total!=this.dataArr.length){
				this.page++
				this.checkCon()//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多商品列表','none',1000)
				this.isZanw = false
			}
		},
        methods: {
			goDetail(id){
				uni.navigateTo({
					url:'/pagesA/productDetail/productDetail?id='+id
				})
			},
			checkCon(){//查询收藏列表
				this.dataArr = []
				this.$requst.post('user/collection').then(res=>{
					// console.log('收藏列表',res);
					if(res.code==0){
						this.pageShow = true
						this.total = res.data.total
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let obj = {
									id:item.id,
									sku:{
										coding:item.sku.coding,
										id:item.sku.id,
										main_image:this.$http + item.sku.main_image,
										price:item.sku.price,
										spu_id:item.sku.spu_id
									},
									spu:{
										id:item.spu.id,
										name:item.spu.name
									},
									spu_id:item.spu_id
								}
								this.dataArr.push(obj)
							})
						}
					}
				},error=>{})
			},
            backTop(){
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                });
            },
            canleCollection(id,index){//取消收藏事件
				let ya = this
                this.current = index
				// console.log('取消收藏ID',id);
				// console.log(id);
				this.$requst.post('user/collection-del',{id:id,spu_id:0}).then(res=>{
					// console.log(res);
					if(res.code==0){
						uni.showToast({title:'取消成功',icon:'none'})
						setTimeout(function(){
							ya.dataArr.splice(index,1)
							ya.current = '-1'
						},500)
					}
				},error=>{})
            },
			goList(){//去产品列表
				uni.switchTab({
					url:'/pages/tabbar/product/product'
				})
			}
        }
    }
</script>

<style>
    
</style>