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.
468 lines
12 KiB
468 lines
12 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"> |
|
BEJjjjjSII |
|
</view> |
|
<view class="title1"> |
|
OISJFSJIJ |
|
</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 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 } 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; |
|
}, |
|
|
|
drawStart(e) { |
|
console.log(155555); |
|
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.pid }, |
|
}) |
|
}, |
|
goMore(){ |
|
this.$yrouter.push({ |
|
// 跳转评测详情 |
|
path: 'pages/shop/Evaluations/index', |
|
}) |
|
}, |
|
get_user_collect_product: function(navType,clear) { |
|
let that = this |
|
// if(clear){ |
|
// that.collectProductList=[] |
|
// that.page=1 |
|
// that.limit=20 |
|
// } |
|
if (that.loading) return //阻止下次请求（false可以进行请求）； |
|
if (that.loadend) return //阻止结束当前请求（false可以进行请求）； |
|
that.loading = true |
|
if(navType===0){ |
|
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 |
|
}) |
|
}else{ |
|
// 获取评测收藏 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 |
|
}) |
|
} |
|
|
|
}, |
|
//删除收藏； |
|
delCollection: function(index) { |
|
let that = this, |
|
id = that.collectProductList[index].pid, |
|
category = that.collectProductList[index].category |
|
|
|
if(that.navType===0){ |
|
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{ |
|
// 取消评测收藏 |
|
delUserCollection(id, category).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.15); |
|
.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%; |
|
} |
|
|
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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.15); |
|
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.15); |
|
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: 250rpx !important; |
|
line-height: 250rpx !important; |
|
} |
|
|
|
</style>
|
|
|