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.
269 lines
7.3 KiB
269 lines
7.3 KiB
<template> |
|
<!-- <view ref="container"> |
|
<view class="collectionGoods" v-if="collectProductList.length > 0"> |
|
<view class="item acea-row row-between-wrapper" v-for="(item, collectProductListIndex) in collectProductList" :key="collectProductListIndex" @click="goGoodsCon(item)"> |
|
<view class="pictrue"> |
|
<image :src="item.image" /> |
|
</view> |
|
<view class="text acea-row row-column-between"> |
|
<view class="infor line1">{{ item.storeName }}</view> |
|
<view class="acea-row row-between-wrapper"> |
|
<view class="money font-color-red" v-if="isIntegral == 1">{{ item.costPrice }}积分</view> |
|
<view class="money font-color-red" v-else>￥{{ item.price }}</view> |
|
<view class="delete" @tap.stop="delCollection(collectProductListIndex)">删除</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<Loading :loaded="loadend" :loading="loading"></Loading> |
|
<view class="noCommodity" style="background-color:#fff;" v-if="collectProductList.length < 1 && page > 1"> |
|
<view class="noPictrue"> |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/noCollection.png`" class="image" /> |
|
</view> |
|
<Recommend></Recommend> |
|
</view> |
|
</view> --> |
|
<view> |
|
<view class="header"> |
|
<cu-custom :isBack="true" :isCenter="true"> |
|
<block slot="backText"> |
|
<view class="backImg"> |
|
<image src="@/static/images/back-btn.png" mode=""></image> |
|
</view> |
|
</block> |
|
<block slot="content"> |
|
<view class="tab-title">我的足迹</view> |
|
</block> |
|
</cu-custom> |
|
</view> |
|
<view class="content-box"> |
|
<view class="item-box" v-for="(item, collectProductListIndex) in collectProductList" |
|
:key="collectProductListIndex" :data-index="collectProductListIndex" @touchstart="drawStart" |
|
@touchmove="drawMove" @touchend="drawEnd" :style="'right:' + item.right + 'rpx'"> |
|
<view class="acea-row" @click="goGoodsCon(item)"> |
|
<image class="img" :src="item.image" mode=""></image> |
|
<view class="right-box acea-row row-column-between row-top"> |
|
<view class="title-top line2">{{ item.storeName }}</view> |
|
<view class="pic" v-if="item.isIntegral == 1">{{ item.integral }}积分</view> |
|
<view class="pic" v-else>￥{{ item.price }}</view> |
|
</view> |
|
</view> |
|
<view class="delete" :style="item.right?'right: -122rpx;':''" @click="delCollection(collectProductListIndex)">删除</view> |
|
</view> |
|
|
|
<Loading :loaded="loadend" :loading="loading"></Loading> |
|
<view class="noCommodity" style="background-color:#fff;" v-if="collectProductList.length < 1 && page > 1"> |
|
<view class="noPictrue"> |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/noCollection.png`" class="image" /> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <Recommend></Recommend> --> |
|
</view> |
|
</template> |
|
<script> |
|
import Loading from '@/components/Loading' |
|
// import Recommend from '@/components/Recommend' |
|
import { |
|
getCollectUser, |
|
getCollectDel |
|
} from '@/api/user' |
|
export default { |
|
name: 'GoodsFoot', |
|
components: { |
|
// Recommend, |
|
Loading, |
|
}, |
|
props: {}, |
|
data: function() { |
|
return { |
|
page: 1, |
|
limit: 20, |
|
type: 'foot', |
|
collectProductList: [], |
|
loadTitle: '', |
|
loading: false, |
|
loadend: false, |
|
|
|
startX: 0, |
|
delBtnWidth: 154 |
|
} |
|
}, |
|
mounted: function() { |
|
this.get_user_collect_product() |
|
}, |
|
onReachBottom() { |
|
!this.loading && this.get_user_collect_product() |
|
}, |
|
methods: { |
|
|
|
goGoodsCon(item) { |
|
if (item.isIntegral == 1) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/IntegralGoodsCon/index', |
|
query: { |
|
id: item.pid |
|
}, |
|
}) |
|
} else { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/GoodsCon/index', |
|
query: { |
|
id: item.pid |
|
}, |
|
}) |
|
} |
|
}, |
|
get_user_collect_product: function() { |
|
let that = this |
|
if (that.loading) return //阻止下次请求（false可以进行请求）； |
|
if (that.loadend) return //阻止结束当前请求（false可以进行请求）； |
|
that.loading = true |
|
getCollectUser(that.page, that.limit, that.type).then(res => { |
|
that.loading = false |
|
//apply();js将一个数组插入另一个数组; |
|
res.data.forEach(val => { |
|
val.right = 0; |
|
}) |
|
that.collectProductList.push.apply(that.collectProductList, res.data) |
|
that.loadend = res.data.length < that.limit //判断所有数据是否加载完成； |
|
that.page = that.page + 1 |
|
}) |
|
}, |
|
//删除收藏； |
|
delCollection: function(index) { |
|
let that = this, |
|
id = that.collectProductList[index].pid, |
|
category = that.collectProductList[index].category |
|
getCollectDel(id, category).then(function() { |
|
uni.showToast({ |
|
title: '删除成功', |
|
icon: 'success', |
|
duration: 2000, |
|
complete: () => { |
|
that.collectProductList.splice(index, 1) |
|
that.$set(that, 'collectProductList', that.collectProductList) |
|
}, |
|
}) |
|
}) |
|
}, |
|
|
|
drawStart(e) { |
|
var touch = e.touches[0]; |
|
// let index = e.currentTarget.dataset.index; |
|
for (var index in this.collectProductList) { |
|
this.collectProductList[index].right = 0; |
|
} |
|
this.startX = touch.clientX; |
|
// console.log(this.startX, "drawStart", index) |
|
}, |
|
drawMove(e) { |
|
let touch = e.touches[0]; |
|
// console.log(touch, "drawMove") |
|
let index = e.currentTarget.dataset.index; |
|
let item = this.collectProductList[index]; |
|
let disX = this.startX - touch.clientX; |
|
// console.log(index, "drawMove") |
|
if (disX >= 20) { |
|
if (disX > this.delBtnWidth) { |
|
disX = this.delBtnWidth; |
|
} |
|
this.collectProductList[index].right = disX; |
|
} else { |
|
this.collectProductList[index].right = 0; |
|
} |
|
}, |
|
drawEnd(e) { |
|
let index = e.currentTarget.dataset.index; |
|
let item = this.collectProductList[index]; |
|
if (item.right >= 80) { |
|
this.collectProductList[index].right = this.delBtnWidth; |
|
} else { |
|
this.collectProductList[index].right = 0; |
|
} |
|
}, |
|
}, |
|
} |
|
</script> |
|
<style lang="less" scoped> |
|
.header { |
|
.tab-title { |
|
font-size: 32rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #2DB5AE; |
|
line-height: 42rpx; |
|
} |
|
|
|
.backImg { |
|
width: 88rpx; |
|
height: 62rpx; |
|
padding-left: 26rpx; |
|
|
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
|
|
.content-box { |
|
position: relative; |
|
width: 100%; |
|
padding: 50rpx 30rpx 30rpx; |
|
overflow: hidden; |
|
background-color: #fff; |
|
height: 100%; |
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
.item-box { |
|
position: relative; |
|
width: 686rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
border-radius: 16rpx; |
|
padding: 20rpx; |
|
margin-bottom: 20rpx; |
|
|
|
.img { |
|
width: 170rpx; |
|
height: 170rpx; |
|
margin-right: 20rpx; |
|
border-radius: 16rpx; |
|
} |
|
|
|
.right-box { |
|
width: 450rpx; |
|
.title-top { |
|
color: #3A3A3C; |
|
font-size: 28rpx; |
|
} |
|
|
|
.pic { |
|
color: #2DB5AE; |
|
font-size: 32rpx; |
|
font-weight: 700; |
|
} |
|
} |
|
|
|
// 删除 |
|
.delete { |
|
position: absolute; |
|
top: 0; |
|
right: -250rpx; |
|
width: 154rpx; |
|
height: 210rpx; |
|
background: #EC3A5B; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
border-radius: 16rpx; |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #FFFFFF; |
|
line-height: 202rpx; |
|
text-align: center; |
|
text-shadow: 0rpx 10rpx 16rpx rgba(0, 0, 0, 0.06); |
|
} |
|
|
|
} |
|
} |
|
</style>
|
|
|