677 lines
17 KiB
Vue
677 lines
17 KiB
Vue
<template>
|
|
<view class="collection-count" :style="viewColor">
|
|
<view class="navTabBox">
|
|
<view class="longTab">
|
|
<view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'on':index == tabIndex-1}" @click="bindTab(index)"><text>{{item.title}}</text></view>
|
|
</view>
|
|
<view v-if="collectProductList.length && tabIndex == 1" class="list_header acea-row">
|
|
<view class="total">共<text>{{total}}</text>件商品</view>
|
|
<view class="text" @click.stop="handleEdit">{{isEdit ? '完成' : '编辑'}}</view>
|
|
</view>
|
|
</view>
|
|
<block v-if="tabIndex == 1">
|
|
<view class='collectionGoods' v-if="collectProductList.length">
|
|
<view class='item acea-row row-between-wrapper' v-for="(item,index) in collectProductList" :key="index" v-if="item.spu" @tap.stop="goDetail(item.spu)">
|
|
<view class="left acea-row row-between-wrapper">
|
|
<view v-if="isEdit" class="checkbox" @click.stop="collectCheck(item,index)">
|
|
<text v-if="!item.check" class="iconfont icon-weixuanzhong"></text>
|
|
<text v-else class="iconfont icon-xuanzhong1"></text>
|
|
</view>
|
|
<view class='pictrue' >
|
|
<easy-loadimage mode="widthFix" :image-src="item.spu.image"></easy-loadimage>
|
|
<view v-if="item.spu.product_type==0 && item.spu.status!==1" class="off">已下架</view>
|
|
<view v-else-if="item.spu.product_type>0 && item.spu.status==0" class="off end-off">活动<br/>结束</view>
|
|
</view>
|
|
</view>
|
|
<view class='text acea-row row-column-between' :class="isEdit ? 'edit' : ''">
|
|
<view class='name' :class="{saleOff : item.spu.status!=1}">
|
|
<view class="name_text">
|
|
<text v-if="item.spu.product_type != 0" :class="'font_bg-red type'+item.spu.product_type">{{item.spu.product_type == 1 ? "秒杀" : item.spu.product_type == 2 ? "预售" : item.spu.product_type == 3 ? "助力" : item.spu.product_type == 4 ? "拼团" : ""}}</text>
|
|
{{item.spu.store_name}}
|
|
</view>
|
|
</view>
|
|
<view class='acea-row row-between-wrapper'>
|
|
<view class='money' :class="{saleOff : item.spu.status!=1}"><text>￥</text>{{item.spu.price}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class='loadingicon acea-row row-center-wrapper'>
|
|
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
|
</view>
|
|
</view>
|
|
<view class='footer acea-row row-between-wrapper' v-if="isEdit && collectProductList.length>0">
|
|
<view>
|
|
<view class="allcheckbox" @click.stop="checkboxAllChange">
|
|
<text v-if="!isAllSelect" class="iconfont icon-weixuanzhong"></text>
|
|
<text v-else class="iconfont icon-xuanzhong1"></text>
|
|
全选
|
|
</view>
|
|
</view>
|
|
<view class='acea-row row-between-wrapper'>
|
|
<view class='button acea-row row-middle' style="margin-right: 20rpx;">
|
|
<form @submit="subCollect" report-submit='true'>
|
|
<button class='bnt collect_btn' formType="submit">取消收藏</button>
|
|
</form>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view v-if="storeList.length>0" class="user_store_attention" :style="viewColor">
|
|
<view class="item" v-for="(item,index) in storeList" :key="index" :style="{ 'background-image': `url(${domain}/static/diy/store_bg${keyColor}.png)`}">
|
|
<view class="store_header" @click="goStore(item)">
|
|
<image :src="item.merchant.mer_avatar" mode=""></image>
|
|
<view class="info">
|
|
<view class="line1">
|
|
<text class="name line1">{{item.merchant.mer_name}}</text>
|
|
<text v-if="item.merchant.type_name" class="font-bg-red ml8">{{item.merchant.type_name}}</text>
|
|
<text v-else-if="item.merchant.is_trader" class="font-bg-red ml8">自营</text>
|
|
</view>
|
|
<view class="btn" @click.stop="bindDetele(item,index)">取消关注</view>
|
|
</view>
|
|
</view>
|
|
<view class="store-closed" v-if="item.merchant.is_del == 1 || item.merchant.mer_state == 0 || item.merchant.status == 0">
|
|
<image class="closed" :src="domain+'/static/images/store-closed.png'"></image>
|
|
<view class="closed-text">店铺已关闭，去看看别的店铺吧</view>
|
|
</view>
|
|
<view class="store_recommend" v-else-if="item.merchant && item.merchant.showProduct.length>0">
|
|
<block v-for="(itemn,indexn) in item.merchant.showProduct" :key="indexn" v-if="indexn < 3">
|
|
<navigator :url="'/pages/goods_details/index?id='+itemn.product_id"
|
|
hover-class="none" class="list">
|
|
<view class="picture">
|
|
<easy-loadimage mode="widthFix" :image-src="itemn.image"></easy-loadimage>
|
|
<view v-if="itemn.border_pic" :style="{ backgroundImage: `url(${itemn.border_pic})` }" class="border-picture"></view>
|
|
</view>
|
|
</navigator>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class='noCommodity' v-if="(!collectProductList.length && tabIndex == 1) || (!storeList.length && tabIndex == 2)">
|
|
<view class='pictrue'>
|
|
<image :src="`${domain}/static/images/noCart.png`"></image>
|
|
<view>{{tabIndex == 1 ? '暂无商品' : '暂无店铺'}}，去添加点什么吧</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { getCollectUserList, getProductHot, userCollectDel, collectDel, getMerchantLst } from '@/api/store.js';
|
|
import { goShopDetail } from '@/libs/order.js'
|
|
import {initiateAssistApi} from '@/api/activity.js'
|
|
import { mapGetters } from "vuex";
|
|
import { configMap } from '@/utils';
|
|
import { HTTP_REQUEST_URL } from '@/config/app';
|
|
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
|
import { toLogin } from '@/libs/login.js';
|
|
export default {
|
|
components: {
|
|
easyLoadimage,
|
|
},
|
|
data() {
|
|
return {
|
|
hostProduct: [],
|
|
loadTitle: '加载更多',
|
|
loading: false,
|
|
loadend: false,
|
|
collectProductList: [],
|
|
checkedArr: [],
|
|
limit: 10,
|
|
page: 1,
|
|
hotScroll:false,
|
|
hotPage:1,
|
|
hotLimit:10,
|
|
domain: HTTP_REQUEST_URL,
|
|
storeList:[],
|
|
isScroll:true,
|
|
storePage: 1,
|
|
storeLimit: 10,
|
|
total: 0,
|
|
isEdit: false,
|
|
isAllSelect: false,
|
|
tabIndex:1,
|
|
tabList:[
|
|
{
|
|
title:'商品'
|
|
},
|
|
{
|
|
title:'店铺'
|
|
}
|
|
],
|
|
};
|
|
},
|
|
computed: configMap({recommend_switch:0,hide_mer_status:0},mapGetters(['isLogin','viewColor','keyColor'])),
|
|
onLoad(options) {
|
|
this.tabIndex = options.tab || 1
|
|
if (this.isLogin) {
|
|
this.get_user_collect_product();
|
|
this.getList();
|
|
} else {
|
|
toLogin()
|
|
}
|
|
},
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
methods: {
|
|
handleEdit(){
|
|
this.isEdit = !this.isEdit;
|
|
},
|
|
goStore(item){
|
|
if(this.hide_mer_status != 1){
|
|
uni.navigateTo({
|
|
url:`/pages/store/home/index?id=${item.merchant.mer_id}`
|
|
})
|
|
}
|
|
},
|
|
goDetail(item){
|
|
goShopDetail(item, this.uid).then(res => {
|
|
if (this.isLogin) {
|
|
initiateAssistApi(item.activity_id).then(res => {
|
|
let id = res.data.product_assist_set_id;
|
|
uni.hideLoading();
|
|
uni.navigateTo({
|
|
url: '/pages/activity/assist_detail/index?id=' + id
|
|
});
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: err,
|
|
icon: 'none'
|
|
})
|
|
});
|
|
} else {
|
|
toLogin()
|
|
}
|
|
})
|
|
},
|
|
bindTab(index){
|
|
this.tabIndex = index+1
|
|
},
|
|
// 取消关注
|
|
bindDetele(item,index){
|
|
userCollectDel({
|
|
type:10,
|
|
type_id:[item.type_id]
|
|
}).then(res=>{
|
|
uni.showToast({
|
|
title:'已取消',
|
|
icon:'none'
|
|
})
|
|
this.storeList.splice(index,1)
|
|
})
|
|
},
|
|
getList(){
|
|
if(!this.isScroll) return
|
|
getMerchantLst({
|
|
page:this.storePage,
|
|
limit:this.storeLimit
|
|
}).then(res=>{
|
|
this.isScroll = res.data.list.length>=this.limit
|
|
this.storeList = this.storeList.concat(res.data.list)
|
|
this.storePage+=1
|
|
})
|
|
},
|
|
/**
|
|
* 获取收藏产品
|
|
*/
|
|
get_user_collect_product: function() {
|
|
let that = this;
|
|
if (that.loading) return;
|
|
if (that.loadend) return;
|
|
that.loading = true;
|
|
that.loadTitle = "";
|
|
getCollectUserList({
|
|
page: that.page,
|
|
limit: that.limit
|
|
}).then(res => {
|
|
that.total = res.data.count;
|
|
let collectProductList = res.data.list;
|
|
let loadend = collectProductList.length < that.limit;
|
|
collectProductList.forEach((item,index)=>{
|
|
if(!item.check){
|
|
that.$set(item,'check',false)
|
|
}
|
|
})
|
|
that.collectProductList = that.$util.SplitArray(collectProductList, that.collectProductList);
|
|
that.$set(that, 'collectProductList', that.collectProductList);
|
|
that.loadend = loadend;
|
|
that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
|
|
that.page = that.page + 1;
|
|
that.loading = false;
|
|
}).catch(err => {
|
|
that.loading = false;
|
|
that.loadTitle = "加载更多";
|
|
});
|
|
},
|
|
/**
|
|
* 取消收藏
|
|
*/
|
|
subCollect: function() {
|
|
let that = this;
|
|
userCollectDel({
|
|
type:1,
|
|
type_id: that.getSelectGoods()
|
|
}).then(res => {
|
|
return that.$util.Tips({
|
|
title: '取消收藏成功',
|
|
icon: 'success'
|
|
}, function() {
|
|
that.reloadData()
|
|
});
|
|
}).catch(err => {
|
|
return that.$util.Tips({
|
|
title: err,
|
|
});
|
|
});;
|
|
},
|
|
reloadData() {
|
|
this.checkedArr.forEach((itm, idx) => {
|
|
this.collectProductList = this.collectProductList.filter(item => item!=itm);
|
|
})
|
|
this.total-=this.checkedArr.length;
|
|
},
|
|
collectCheck(item) {
|
|
item.check = !item.check
|
|
this.cartAllCheck('goodsCheck')
|
|
},
|
|
// 全选
|
|
checkboxAllChange() {
|
|
this.isAllSelect = !this.isAllSelect
|
|
this.cartAllCheck('allCheck')
|
|
},
|
|
// 全选判断
|
|
cartAllCheck(type) {
|
|
let allArr = [];
|
|
this.collectProductList.forEach((el, index) => {
|
|
if(type == 'goodsCheck'){
|
|
if(el.check){
|
|
allArr.push(el)
|
|
}
|
|
}else{
|
|
el.check = this.isAllSelect
|
|
if (el.check) allArr.push(el)
|
|
}
|
|
})
|
|
this.checkedArr = allArr;
|
|
// 全选
|
|
this.isAllSelect = allArr.length == this.collectProductList.length ? true : false
|
|
},
|
|
// 获取选中的商品
|
|
getSelectGoods() {
|
|
let arr = []
|
|
this.collectProductList.forEach((el, index) => {
|
|
if(el.check){
|
|
arr.push(el.type_id)
|
|
}
|
|
})
|
|
return arr;
|
|
},
|
|
},
|
|
onReachBottom() {
|
|
this.tabIndex == 1 ? this.get_user_collect_product() : this.getList()
|
|
},
|
|
// 滚动监听
|
|
onPageScroll(e) {
|
|
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
|
uni.$emit('scroll');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.navTabBox{
|
|
height: 166rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
.longTab{
|
|
background: #fff;
|
|
display: flex;
|
|
text-align: center;
|
|
}
|
|
.tab-item{
|
|
width: 50%;
|
|
display: inline-block;
|
|
line-height: 90rpx;
|
|
color: #666666;
|
|
font-size: 30rpx;
|
|
text{
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.tab-item.on{
|
|
color: var(--view-theme);
|
|
font-weight: bold;
|
|
text{
|
|
&:after{
|
|
content: "";
|
|
display: inline-block;
|
|
width: 90%;
|
|
height: 3rpx;
|
|
background-color: var(--view-theme);
|
|
position: absolute;
|
|
left: 5%;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
.list_header{
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
height: 76rpx;
|
|
line-height: 76rpx;
|
|
color: #666666;
|
|
font-size: 26rpx;
|
|
background: #f5f5f5;
|
|
.total{
|
|
text{
|
|
color: var(--view-theme);
|
|
}
|
|
}
|
|
.text{
|
|
color: var(--view-theme);
|
|
}
|
|
}
|
|
.collectionGoods {
|
|
background-color: #fff;
|
|
margin-top: 166rpx;
|
|
}
|
|
.font_bg-red {
|
|
background-color: var(--view-theme);
|
|
border: 1px solid var(--view-theme);
|
|
&.type2{
|
|
background-color: #FD6523;
|
|
border: 1px solid #FD6523;
|
|
}
|
|
}
|
|
.collectionGoods .item {
|
|
margin-left: 30rpx;
|
|
padding: 25rpx 30rpx 30rpx 0;
|
|
border-bottom: 1px solid #eee;
|
|
.checkbox{
|
|
margin-right: 30rpx;
|
|
.iconfont{
|
|
font-size: 38rpx;
|
|
color: #999999;
|
|
&.icon-xuanzhong1{
|
|
color: var(--view-theme);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.collectionGoods .item .pictrue {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
position: relative;
|
|
.off{
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: rgba(0,0,0,.5);
|
|
color: #ffffff;
|
|
font-size: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -40rpx 0 0 -40rpx;
|
|
&.end-off{
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
margin: -45rpx 0 0 -45rpx;
|
|
&::after{
|
|
content: "";
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
border: 2rpx dashed #ffffff;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
top: 6rpx;
|
|
left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/deep/.collectionGoods .item .pictrue image,
|
|
/deep/.collectionGoods .item .easy-loadimage, .collectionGoods .item uni-image{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
.collectionGoods .item .text {
|
|
width: 500rpx;
|
|
height: 160rpx;
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
&.edit{
|
|
width: 430rpx;
|
|
}
|
|
}
|
|
.collectionGoods .item .text .name {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
&.saleOff{
|
|
color: #CCCCCC;
|
|
}
|
|
}
|
|
.collectionGoods .item .name_text{
|
|
display: inline-block;
|
|
max-width: 480rpx;
|
|
overflow:hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 28rpx;
|
|
}
|
|
.collectionGoods .item .text .money {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: var(--view-priceColor);
|
|
text{
|
|
font-size: 20rpx;
|
|
}
|
|
&.saleOff{
|
|
color: #CCCCCC;
|
|
}
|
|
}
|
|
.collectionGoods .item .text .delete {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26rpx;
|
|
color: #282828;
|
|
width: 144rpx;
|
|
height: 46rpx;
|
|
border: 1px solid #bbb;
|
|
border-radius: 24rpx;
|
|
text-align: center;
|
|
}
|
|
.noCommodity {
|
|
padding-top: 1rpx;
|
|
border-top: 0;
|
|
min-height: 90vh;
|
|
margin-top: 90rpx;
|
|
}
|
|
.noCommodity .pictrue{
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 78rpx auto 26rpx auto;
|
|
}
|
|
.collection-count .footer {
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
|
height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
|
background-color: #ffffff;
|
|
position: fixed;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
border-top: 1px solid #eee;
|
|
bottom: var(--window-bottom);
|
|
}
|
|
.area-edit{
|
|
justify-content: center;
|
|
.area-item{
|
|
width: 50%;
|
|
text-align: center;
|
|
position: relative;
|
|
align-items: center;
|
|
color: #333333;
|
|
.text{
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
.iconfont{
|
|
color: #333333;
|
|
}
|
|
&:nth-child(1){
|
|
&::after{
|
|
content: '';
|
|
display: inline-block;
|
|
width: 2rpx;
|
|
height: 42rpx;
|
|
background: #CCCCCC;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.collection-count .footer .checkAll {
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
margin-left: 16rpx;
|
|
}
|
|
.allcheckbox .iconfont{
|
|
margin-right: 11px;
|
|
font-size: 40rpx;
|
|
color: #cccccc;
|
|
}
|
|
.allcheckbox .icon-xuanzhong1{
|
|
color: var(--view-theme);
|
|
}
|
|
.collection-count .footer .button .bnt {
|
|
font-size: 28rpx;
|
|
border-radius: 50rpx;
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
color: var(--view-theme);
|
|
border: 2rpx solid var(--view-theme);
|
|
}
|
|
.user_store_attention{
|
|
padding: 20rpx;
|
|
margin-top: 90rpx;
|
|
.item{
|
|
background-color: #ffffff;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
border-radius: 16rpx;
|
|
padding: 0 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.store_header{
|
|
position: relative;
|
|
display: flex;
|
|
padding: 30rpx 10rpx;
|
|
align-items: center;
|
|
image{
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.info{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 20rpx;
|
|
position: relative;
|
|
.name{
|
|
width: 410rpx;
|
|
font-weight: bold;
|
|
}
|
|
.des{
|
|
color: #666666;
|
|
font-size: 22rpx;
|
|
}
|
|
.btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
width:150rpx;
|
|
height:50rpx;
|
|
transform: translateY(-50%);
|
|
border:1px solid #BBBBBB;
|
|
border-radius:25rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
.store-closed{
|
|
text-align: center;
|
|
padding-bottom: 30rpx;
|
|
.closed{
|
|
width: 300rpx;
|
|
height: 170rpx;
|
|
}
|
|
.closed-text{
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.store_recommend{
|
|
display: flex;
|
|
padding-bottom: 30rpx;
|
|
.list{
|
|
width: 210rpx;
|
|
.picture,/deep/image,/deep/.easy-loadimage,uni-image{
|
|
width: 210rpx;
|
|
height: 210rpx;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
}
|
|
.border-picture {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
background: center/cover no-repeat;
|
|
}
|
|
margin-right: 20rpx;
|
|
&:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.price{
|
|
text-align: center;
|
|
color: var(--view-priceColor);
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|