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.
531 lines
13 KiB
531 lines
13 KiB
<template> |
|
<view ref="container"> |
|
<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" :style="'height:calc(100vh - '+CustomBar+'px);'"> |
|
<view class="content"> |
|
<view class="nav acea-row row-around" :style="'top:calc('+CustomBar+'px+2px)'"> |
|
<view class="item" @click="changeType(0)"> |
|
<view :class="'title ' + (navType == 0? 'active' : '')">甄选商品</view> |
|
</view> |
|
<view class="item" @click="changeType(1)"> |
|
<view :class="'title ' + (navType === 1 ? 'active' : '')">甄选评测</view> |
|
</view> |
|
</view> |
|
|
|
<view class="collectionGoods" v-if="collectProductList.length > 0"> |
|
<view class="item" v-for="(item, collectProductListIndex) in collectProductList" |
|
:key="collectProductListIndex" :data-index="collectProductListIndex" @touchstart="drawStart" |
|
@touchmove="drawMove" @touchend="drawEnd" :style="'right:' + item.right + 'rpx'"> |
|
<view v-if="navType==0" class="info-box acea-row row-between-wrapper" @click="goGoodsCon(item)"> |
|
<view class="pictrue"> |
|
<image :src="item.image" /> |
|
</view> |
|
<view class="text"> |
|
<view class="infor line1">{{ item.storeName }}</view> |
|
<view class="acea-row sku-box"> |
|
<view class="sku" v-if="item.productInfo.attrInfo"> |
|
{{ item.productInfo.attrInfo.sku }}</view> |
|
</view> |
|
<view class="money" v-if="isIntegral == 1">{{ item.costPrice }}积分</view> |
|
<view class="money" v-else>￥{{ item.price }}</view> |
|
</view> |
|
</view> |
|
<!-- 评测 --> |
|
<!-- <view v-else class="review-box acea-row row-between" @click="goEvaluation(item)"> |
|
<view class="left acea-row row-column-between"> |
|
<view class="acea-row row-column-between"> |
|
<view class="title"></view> |
|
<view class="title1"></view> |
|
<view class="title2"></view> |
|
</view> |
|
<view @tap.stop="goMore" class="more"> |
|
MORE |
|
</view> |
|
</view> |
|
<view class="right"> |
|
<image src="../../../static/images/earth-white.png" mode=""></image> |
|
</view> |
|
</view> --> |
|
<view v-else class="review-box acea-row row-between" @click="goEvaluation(item)"> |
|
<image class="img" :src="item.homeImage" mode="aspectFill"></image> |
|
<!-- <view class="more"> |
|
MORE |
|
</view> --> |
|
</view> |
|
<view class="delete" @tap.stop="delCollection(collectProductListIndex)" |
|
:style="item.right?'right: -122rpx;':''" :class="{'del-height':navType==1}">删除</view> |
|
</view> |
|
</view> |
|
|
|
|
|
<Loading :loaded="loadend" :loading="loading"></Loading> |
|
|
|
</view> |
|
</view> |
|
|
|
|
|
<!-- <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> |
|
</template> |
|
<script> |
|
import Recommend from '@/components/Recommend' |
|
import { |
|
getCollectUser, |
|
getCollectDel, |
|
getCollectEvaluation |
|
} from '@/api/user' |
|
import { |
|
delUserCollection |
|
} from '@/api/store.js' |
|
import Loading from '@/components/Loading' |
|
export default { |
|
name: 'GoodsCollection', |
|
components: { |
|
Recommend, |
|
Loading, |
|
}, |
|
props: {}, |
|
data: function() { |
|
return { |
|
CustomBar: this.CustomBar, |
|
navType: 0, |
|
page: 1, |
|
limit: 20, |
|
type: 'collect', |
|
collectProductList: [], |
|
loadTitle: '', |
|
loading: false, |
|
loadend: false, |
|
delBtnWidth: 154, |
|
startX: 0 |
|
} |
|
}, |
|
mounted: function() { |
|
this.get_user_collect_product(this.navType) |
|
}, |
|
onReachBottom() { |
|
!this.loading && this.get_user_collect_product(this.navType) |
|
}, |
|
methods: { |
|
changeType(i) { |
|
if (this.navType == i) return; |
|
this.navType = i; |
|
this.collectProductList = [] |
|
this.page = 1 |
|
this.limit = 20 |
|
this.get_user_collect_product(this.navType) |
|
}, |
|
|
|
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]; |
|
console.log(item.right, "drawEnd", index); |
|
if (item.right >= 80) { |
|
this.collectProductList[index].right = this.delBtnWidth; |
|
} else { |
|
this.collectProductList[index].right = 0; |
|
} |
|
console.log(this.collectProductList, "drawEnd", index); |
|
}, |
|
goGoodsCon(item) { |
|
if (item.isIntegral == 1) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/GoodsCon/index', |
|
query: { |
|
id: item.pid |
|
}, |
|
}) |
|
} else { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/GoodsCon/index', |
|
query: { |
|
id: item.pid |
|
}, |
|
}) |
|
} |
|
}, |
|
|
|
goEvaluation(item) { |
|
this.$yrouter.push({ |
|
// 跳转评测详情 |
|
path: '/pages/shop/Evaluations/EvaluationDetail/index', |
|
query: { |
|
id: item.evaluationId |
|
}, |
|
}) |
|
}, |
|
get_user_collect_product: function(navType) { |
|
|
|
let that = this |
|
|
|
if (that.loading) return //阻止下次请求（false可以进行请求）； |
|
// if (that.loadend) return //阻止结束当前请求（false可以进行请求）； |
|
that.loading = true |
|
if (navType === 1) { |
|
// 获取评测收藏 collectEvaluation/user |
|
getCollectEvaluation(that.page, that.limit, that.type).then(res => { |
|
that.loading = false |
|
//apply();js将一个数组插入另一个数组; |
|
var arr = []; |
|
for (var i in res.data) { |
|
res.data[i].right = 0; |
|
arr.push(res.data[i]) |
|
}; |
|
that.collectProductList.push.apply(that.collectProductList, arr) |
|
// this.collectProductList.forEach(val => { |
|
// val.right = 0; |
|
// }) |
|
that.loadend = res.data.length < that.limit //判断所有数据是否加载完成； |
|
that.page = that.page + 1 |
|
}) |
|
} else { |
|
getCollectUser(that.page, that.limit, that.type).then(res => { |
|
that.loading = false |
|
//apply();js将一个数组插入另一个数组; |
|
var arr = []; |
|
for (var i in res.data) { |
|
res.data[i].right = 0; |
|
arr.push(res.data[i]) |
|
}; |
|
that.collectProductList.push.apply(that.collectProductList, arr) |
|
// this.collectProductList.forEach(val => { |
|
// val.right = 0; |
|
// }) |
|
that.loadend = res.data.length < that.limit //判断所有数据是否加载完成； |
|
that.page = that.page + 1 |
|
}) |
|
|
|
} |
|
|
|
}, |
|
//删除收藏； |
|
delCollection: function(index) { |
|
let that = this |
|
|
|
if (that.navType === 0) { |
|
let 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) |
|
}, |
|
}) |
|
}) |
|
} else { |
|
// 取消评测收藏 |
|
let param={} |
|
param.id=that.collectProductList[index].evaluationId, |
|
param.category= "collect" |
|
delUserCollection(param).then(function() { |
|
uni.showToast({ |
|
title: '删除成功', |
|
icon: 'success', |
|
duration: 2000, |
|
complete: () => { |
|
that.collectProductList.splice(index, 1) |
|
that.$set(that, 'collectProductList', that.collectProductList) |
|
}, |
|
}) |
|
}) |
|
} |
|
|
|
}, |
|
|
|
}, |
|
} |
|
</script> |
|
<style lang="less" scoped> |
|
// .review-box{ |
|
// padding: 30rpx 30rpx 20rpx 30rpx; |
|
// width: 687rpx; |
|
// height: 250rpx; |
|
// border-radius: 16rpx; |
|
// background: #F5F6F8; |
|
// box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
// .left{ |
|
// max-width: 460rpx; |
|
|
|
// .title{ |
|
// font-size: 36rpx; |
|
// font-weight: 500; |
|
// text-transform: uppercase; |
|
// } |
|
// .title1{ |
|
// margin: 10rpx 0 5rpx 0; |
|
// font-size: 24rpx; |
|
// text-transform: uppercase; |
|
// } |
|
// .title2{ |
|
// font-size: 28rpx; |
|
|
|
|
|
// } |
|
// .more{ |
|
// font-size: 24rpx; |
|
// position: relative; |
|
// } |
|
// .more::before{ |
|
// position: absolute; |
|
// border-bottom: 1rpx solid black; |
|
// bottom: -8rpx; |
|
// left: -4rpx; |
|
// content: ''; |
|
// width: 100rpx; |
|
// background-color: black; |
|
// height: 1rpx; |
|
// } |
|
// .more::after{ |
|
// margin-left: 10rpx; |
|
// content: ''; |
|
// display: inline-block; |
|
// width: 0; |
|
// height: 0; |
|
// border-top: 10rpx solid transparent; |
|
// border-left: 10rpx solid black; |
|
// border-bottom: 10rpx solid transparent; |
|
// border-right: 10rpx solid transparent; |
|
// } |
|
// } |
|
// .right{ |
|
// image{ |
|
// width: 200rpx; |
|
// height: 100%; |
|
// } |
|
|
|
// } |
|
// } |
|
|
|
.review-box { |
|
// padding: 30rpx 30rpx 20rpx 30rpx; |
|
// width: 687rpx; |
|
// height: 240rpx; |
|
border-radius: 16rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
position: relative; |
|
.img { |
|
width: 687rpx; |
|
height: 240rpx; |
|
border-radius: 16rpx; |
|
} |
|
|
|
.more { |
|
font-size: 24rpx; |
|
position: absolute; |
|
left: 30rpx; |
|
bottom: 30rpx; |
|
} |
|
|
|
.more::before { |
|
position: absolute; |
|
border-bottom: 1rpx solid black; |
|
bottom: -8rpx; |
|
left: -4rpx; |
|
content: ''; |
|
width: 100rpx; |
|
background-color: black; |
|
height: 1rpx; |
|
} |
|
|
|
.more::after { |
|
margin-left: 10rpx; |
|
content: ''; |
|
display: inline-block; |
|
width: 0; |
|
height: 0; |
|
border-top: 10rpx solid transparent; |
|
border-left: 10rpx solid black; |
|
border-bottom: 10rpx solid transparent; |
|
border-right: 10rpx solid transparent; |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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 { |
|
padding-top: 4rpx; |
|
width: 100vw; |
|
position: relative; |
|
|
|
.content { |
|
width: 100%; |
|
height: 100%; |
|
overflow-y: scroll; |
|
background: #FFFFFF; |
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
|
|
.nav { |
|
width: 100vw; |
|
background: #FFFFFF; |
|
height: 92rpx; |
|
padding: 34rpx 32rpx 16rpx; |
|
position: fixed; |
|
left: 0; |
|
z-index: 5; |
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
|
|
.item { |
|
width: 112rpx; |
|
text-align: center; |
|
position: relative; |
|
|
|
.title { |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 38rpx; |
|
} |
|
|
|
.active { |
|
color: #2DB5AE; |
|
font-weight: 600; |
|
} |
|
|
|
.title::after { |
|
display: block; |
|
content: ''; |
|
width: 100%; |
|
height: 4rpx; |
|
background: #2DB5AE; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
opacity: 0; |
|
transform: scaleX(0); |
|
transition: all .2s cubic-bezier(.18, .89, .17, .88), opacity .15s ease; |
|
} |
|
|
|
.active::after { |
|
opacity: 1; |
|
transform: scaleX(1); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.info-box { |
|
width: 686rpx; |
|
height: 202rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
border-radius: 16rpx; |
|
padding: 20rpx; |
|
|
|
.sku-box { |
|
margin: 18rpx 0rpx; |
|
height: 46rpx; |
|
} |
|
|
|
.sku { |
|
padding: 0rpx 16rpx; |
|
height: 46rpx; |
|
background: #E3E3E3; |
|
border-radius: 8rpx; |
|
font-size: 20rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
line-height: 46rpx; |
|
} |
|
} |
|
|
|
.collectionGoods .item .delete { |
|
position: absolute; |
|
top: 0; |
|
right: -186rpx; |
|
width: 154rpx; |
|
height: 202rpx; |
|
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.15); |
|
} |
|
|
|
.del-height { |
|
height: 240rpx !important; |
|
line-height: 240rpx !important; |
|
} |
|
</style>
|
|
|