|
|
<template> <view class="collection-box"> <global-loading /> <view class="tabsbox"> <u-tabs :list="collectionTypeList" bar-width="60" :bold="false" active-color="#252744" inactive-color="#90919C" :is-scroll="false" :current="collectionTypeFlag" @change="collectionTypeActive"></u-tabs> </view> <view v-if="collectionTypeFlag == 0"> <view v-if="productCollect.length>0"> <view class="wid function-box"><!-- <view class="finishbox" @click="finishClick" v-if="allCheckShow">{{$t('common.finish')}}</view>--> <view v-if="allCheckShow" class="flex-row-plus editicon-box flex-items font-color-252744 fs28" @click="finishClick"> <image class="editicon" src="http://36.138.125.206:8081/ceres-local-file/image/title_finish.png"> </image><!-- <text class="mar-left-10">{{$t('common.finish')}}</text>--> </view> <view v-else class="flex-row-plus editicon-box flex-items font-color-252744 fs28" @click="editClick"> <image class="editicon" src="http://36.138.125.206:8081/ceres-local-file/image/title_edit.png"> </image><!-- <text class="mar-left-10">{{$t('common.edit')}}</text>--> </view> </view> <view class="swipe-box"> <view class="actionBox" v-for="(item, index) in productCollect" :key="item.collectId" :index="index"> <u-swipe-action :disabled="allCheckShow" ref="actionSwipe" :show="item.show" :autoClose="false" @open="productOpen(index)" @click="productActionClick" :options="options"> <!-- :disabled="allCheckShow" --> <view class="flex-item" @click.stop="toGoodsDetails(item.productId,item.shopId,item.skuId)"> <view class="item wid flex-row-plus flex-display"> <view class="flex-items" v-show="allCheckShow"> <image mode="aspectFill" v-if="item.selected == 1" @click.stop="productItemSel(index,0)" src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_select_active.png" class="cart-select-img"></image> <image mode="aspectFill" v-else @click.stop="productItemSel(index,1)" src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_select_normal.png" class="cart-select-img"></image> </view> <view class="infoCent flex-items"> <image onerror="this.src='url(http://36.138.125.206:8081/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null" class="product-img default-img" mode="aspectFill" :src="item.image" />
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 --> <view class="title-wrap mar-left-20 priceBox"> <text class="title u-line-2 fs28 font-color-333">{{ item.productName }}</text> <view class="flex-items"> <!-- <image v-if="item.activityType" class="iconImg mar-right-10" :src="imgs[item.activityType]"></image> --> <image v-if="item.activityType===1" class="iconImg" src="http://36.138.125.206:8081/ceres-local-file/static/images/groupBuyIcon.png" alt="拼团icon"></image> <image v-if="item.activityType === 2" class="iconImg" src="http://36.138.125.206:8081/ceres-local-file/static/images/spikeIcon.png" alt="秒杀活动"></image> <image v-if="item.activityType === 3" class="iconImg discountIcon" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-03-14/38184785db4b4fbca767ada611097ae9_discount.png" alt="限时折扣活动"></image> <image v-if="item.activityType === 4" class="iconImg" src="http://36.138.125.206:8081/ceres-local-file/static/images/spikeIcon.png" alt="平台秒杀"></image> <image v-if="item.activityType===5" class="iconImg" src="http://36.138.125.206:8081/ceres-local-file/static/images/discountListIcon.png" alt="平台折扣"></image> <image v-if="item.activityType===9" class="iconImg" src="http://36.138.125.206:8081/ceres-local-file/static/images/memberCenterIcon.png" alt="会员价"></image> <image v-if="item.activityType === 8" class="iconImg" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png" alt="场景营销"></image> <text class="fs32 font-color-252744">¥</text> <text class="fs32 font-color-252744 mar-right-20">{{item.price}}</text> <text class="font-color-BCBDC6 discountsPriceLine fs22 mar-top-10">¥{{item.originalPrice}}</text> </view> </view> </view> </view> </view> </u-swipe-action> </view> </view> <view v-if="allCheckShow" class="pad-bot-140"></view> <view v-show="allCheckShow" class="allcheck-box flex-row-plus flex-sp-between flex-items"> <view class="left"> <image mode="aspectFill" v-if="isAllProCheck" src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_select_active.png" class="cart-select-img" @click="allProductSel(0)"></image> <image mode="aspectFill" v-else src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_select_normal.png" class="cart-select-img" @click="allProductSel(1)"></image> <text>全选</text> </view> <view class="right"> <view class="btn-delete" @click="showCardModalPaoductDel">删除</view> </view> </view> <view v-if="allCheckShow" class="pad-bot-140"></view> </view> <view v-if="productCollect.length==0&&proCollectShow" class="mar-top-60 empty-box"> <image class="collect-empty" src="http://36.138.125.206:8081/ceres-local-file/static/images/collectEmpty.png"></image> <view class="tohome-box flex-items-plus">暂无收藏</view> </view> </view> <view v-if="collectionTypeFlag == 1"> <view v-if="storeCollect.length>0"><!-- <view class="finishbox" @click="finishClick" v-if="allCheckShow">{{$t('common.finish')}}</view>--> <view v-if="allCheckShow" class="flex-row-plus editicon-box flex-items font-color-252744 fs28" @click="finishClick"> <image class="editicon" src="http://36.138.125.206:8081/ceres-local-file/image/title_finish.png"> </image><!-- <text class="mar-left-10">{{$t('common.finish')}}</text>--> </view> <view v-else class="flex-row-plus editicon-box flex-items font-color-252744 fs28" @click="editClick"> <image class="editicon" src="http://36.138.125.206:8081/ceres-local-file/image/title_edit.png"> </image><!-- <text class="mar-left-10">{{$t('common.edit')}}</text>--> </view> <view class="swipe-box"> <view class="shopBox" v-for="(item, index) in storeCollect" :key="item.collectId" :index="index"> <u-swipe-action ref="shopActionSwipe" :disabled="allCheckShow" :show="item.show" :options="options" @click="storeActionClick(index)" @open="storeOpen(index)"> <view class="item wid flex-row-plus flex-display"> <view v-show="allCheckShow" class="flex-items"> <image mode="aspectFill" v-if="item.selected == 1" @click.stop="storeItemSel(index,0)" src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_select_active.png" class="cart-select-img"></image> <image mode="aspectFill" v-else @click.stop="storeItemSel(index,1)" src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_select_normal.png" class="cart-select-img"></image> </view> <view class="infoCent"> <view class="flex-row-plus flex-sp-between flex-items-plus wid" @click="toStoreClick(item.shopId)"> <view class="flex-items-plus flex-row pad-topbot-10"> <image class="head-img" mode="aspectFill" :src="item.shopLogo" /> <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 --> <view class="title-wrap mar-left-20"> <text class="shop-title u-line-2 shopName">{{ item.shopName }}</text> <view style="display: flex;align-items: center;margin-top: 5rpx"> <image class="shop-follow-img" src="http://36.138.125.206:8081/ceres-local-file/image/shop_follow.png"/> <text class="font-color-25274 fs24 mar-left-6">{{item.person}}</text> </view> </view> </view> <image class="shop-forward-img" src="http://36.138.125.206:8081/ceres-local-file/image/icon_common_big_forward.png"/> </view> <view class="shopImgBox" v-if="item.productList.length>0"> <view class="itemImgBox" v-for="(sItem, sIndex) of item.productList.slice(0, 5)" :key="sIndex" @click.stop="goodsDateils(sItem.shopId,sItem.productId,sItem.skuId)"> <image :src="sItem.image" class="pic-img default-img" onerror="this.src='url(http://36.138.125.206:8081/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null"></image> </view> </view> </view> </view> </u-swipe-action> </view> </view> <view v-show="allCheckShow" class="allcheck-box flex-row-plus flex-sp-between flex-items"> <view class="left"> <image mode="aspectFill" v-if="isAllStoreCheck" src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_select_active.png" class="cart-select-img" @click="allStoreSel(0)"></image> <image mode="aspectFill" v-else src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_select_normal.png" class="cart-select-img" @click="allStoreSel(1)"></image> <text>全选</text> </view> <view class="right"> <view class="btn-delete" @click="showCardModalshopDel">删除</view> </view> </view> <view v-if="allCheckShow" class="pad-bot-140"></view> </view> <view v-if="storeCollect.length==0&&storeCollectShow" class="mar-top-60 empty-box"> <image class="collect-empty" src="http://36.138.125.206:8081/ceres-local-file/static/images/collectEmpty.png"></image> <view class="tohome-box flex-items-plus">暂无收藏</view> </view> </view>
<!-- 删除确认弹窗 --> <tui-modal :show="cardModal" :custom="true" :fadein="true"> <view class="Put-box1"> <view class="text-align fs34 fs-bold"> {{$t('common.notice_dialog_title')}} </view> <view v-if="paoductDelSubmit" class="mar-top-40 text-align"> 是否删除该商品？ </view> <view v-if="shopDelSubmit" class="mar-top-40 text-align"> 是否删除该店铺？ </view> <view class="flex-display flex-sp-between"> <view class="btn submit" v-if="paoductDelSubmit" @click="paoductDel">确定</view> <view class="btn submit" v-if="shopDelSubmit" @click="shopDel">确定</view> </view> </view> <view v-if="cardModal" @click="cardModal = false" class="cancelDel"> <image src="http://36.138.125.206:8081/ceres-local-file/static/images/cancelClose.png" mode=""></image> </view> </tui-modal> </view></template>
<script> import tuiModal from "@/components/modal/modal"; const NET = require('../../utils/request') const API = require('../../config/api') export default { components: { tuiModal }, data() { return { imgs: [ 'http://36.138.125.206:8081/ceres-local-file/static/images/groupBuyIcon.png', 'http://36.138.125.206:8081/ceres-local-file/static/images/spikeIcon.png', 'http://36.138.125.206:8081/ceres-local-file/static/images/discountListIcon.png', 'http://36.138.125.206:8081/ceres-local-file/static/images/spikeIcon.png', 'http://36.138.125.206:8081/ceres-local-file/static/images/discountListIcon.png', ], collectionTypeList: [{ name: '商品' }, { name: '店铺' }], collectionTypeFlag: 0, disabled: false, btnWidth: 180, show: false, options: [{ text: ' ', style: { backgroundColor: '#F15C48' } }], isAllProCheck: false, isAllStoreCheck: false, allCheckShow: false, productCollect: [], storeCollect: [], productPage: 1, productPageSize: 10, proloadingType: 0, storePage: 1, storePageSize: 10, storeloadingType: 0, storeCollectShow: false, proCollectShow: false, cardModal: false, paoductDelSubmit: false, shopDelSubmit: false, ids: null, currentIndex: null, currentType: null }; }, onLoad() { this.getProductCollect() }, onReachBottom() { if (this.collectionTypeFlag == 0) { if (this.proloadingType == 1) { uni.stopPullDownRefresh() } else { this.productPage = this.productPage + 1 this.getProductCollect() } } else if (this.collectionTypeFlag == 1) { if (this.storeloadingType == 1) { uni.stopPullDownRefresh() } else { this.storePage = this.storePage + 1 this.getStoreCollect() } } }, methods: { //批量删除
showCardModalPaoductDel() { let isShowProoductDelSubmit = false // 商品
this.productCollect.forEach((value, index) => { if (value.selected == 1) { isShowProoductDelSubmit = true } }) if (isShowProoductDelSubmit === true) { this.cardModal = true this.paoductDelSubmit = true this.shopDelSubmit = false } else { this.$u.toast(`请先选择要删除的收藏宝贝！`); } }, paoductDel() { if (this.currentType === 1) { this.cancelCollect(this.ids) this.productCollect.splice(this.currentIndex, 1); } else { let ids = [] this.productCollect.forEach((value, index) => { if (value.selected == 1) { ids.push(value.collectId) } }) NET.request(API.deleteCollect, { ids: ids }, 'POST').then(res => { this.productCollect = [] this.cardModal = false this.$u.toast(this.$t('common.deletesuccess')); this.productPage = 1 this.getProductCollect() }).catch(res => { this.cardModal = false this.$u.toast(this.$t('common.deletefail')); }) } }, showCardModalshopDel() { let isShowShopDelSubmit = false // 店铺
this.storeCollect.forEach((value, index) => { if (value.selected == 1) { isShowShopDelSubmit = true } }) if (isShowShopDelSubmit === true) { this.cardModal = true this.shopDelSubmit = true this.paoductDelSubmit = false } else { this.$u.toast(`请先选择要删除的收藏店铺！`); } }, shopDel() { if (this.currentType === 2) { this.cancelCollect(this.ids) this.storeCollect.splice(this.currentIndex, 1); } else { let ids = [] this.storeCollect.forEach((value, index) => { if (value.selected == 1) { ids.push(value.collectId) } }) NET.request(API.deleteCollect, { ids: ids }, 'POST').then(res => { this.storeCollect = [] this.cardModal = false this.$u.toast(this.$t('common.deletesuccess')); this.storePage = 1 this.getStoreCollect() }).catch(res => { this.cardModal = false this.$u.toast(this.$t('common.deletefail')); }) } }, //去店铺
toStoreClick(storeId) { uni.navigateTo({ url: '../../pages_category_page1/store/index?storeId=' + storeId }) }, //去商品详情
toGoodsDetails(productId, shopId, skuId) { uni.navigateTo({ url: '../../pages_category_page1/goodsModule/goodsDetails?productId=' + productId + '&shopId=' + shopId + '&skuId=' + skuId }) }, collectionTypeActive(index) { this.collectionTypeFlag = index if (index == 0) { this.productPage = 1 this.productCollect = [] this.proloadingType = 0 this.getProductCollect() } else if (index == 1) { this.storePage = 1 this.storeCollect = [] this.storeloadingType = 0 this.getStoreCollect() } }, storeClick(index, index1) { if (index1 == 0) { this.cardModal = true this.shopDelSubmit = true this.ids = this.storeCollect[index].collectId this.currentIndex = index this.currentType = 2 } }, // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
productOpen(index) { // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
// 原本为'false'，再次设置为'false'会无效
this.productCollect[index].show = true; // console.log(this.productCollect,index)
this.productCollect.map((val, idx) => { if (index != idx) this.productCollect[idx].show = false; }) // 商品删除参数
this.ids = this.productCollect[index].collectId this.currentIndex = index this.currentType = 1 }, // 打开删除层
productActionClick() { this.cardModal = true this.paoductDelSubmit = true this.shopDelSubmit = false }, storeOpen(index) { // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
// 原本为'false'，再次设置为'false'会无效
this.storeCollect[index].show = true; this.storeCollect.map((val, idx) => { if (index != idx) this.storeCollect[idx].show = false; })
// 店铺删除参数
this.ids = this.storeCollect[index].collectId this.currentIndex = index this.currentType = 2 }, // 打开删除层
storeActionClick() { this.cardModal = true this.paoductDelSubmit = false this.shopDelSubmit = true }, //商品选中
productItemSel(index, number) { this.productCollect[index].selected = number let proSelectNum = 0 this.productCollect.forEach((value, index) => { if (this.productCollect[index].selected == 0) { this.isAllProCheck = false } else { proSelectNum++ } }) if (this.productCollect.length == proSelectNum) { this.isAllProCheck = true } }, //店铺选中
storeItemSel(index, number) { this.storeCollect[index].selected = number let storeSelectNum = 0 this.storeCollect.forEach((value, index) => { if (this.storeCollect[index].selected == 0) { this.isAllStoreCheck = false } else { storeSelectNum++ } }) if (this.storeCollect.length == storeSelectNum) { this.isAllStoreCheck = true } }, //全选
allProductSel(type) { this.isAllProCheck = !this.isAllProCheck this.productCollect.forEach((value, index) => { this.productCollect[index].selected = type }) }, allStoreSel(type) { this.isAllStoreCheck = !this.isAllStoreCheck this.storeCollect.forEach((value, index) => { this.storeCollect[index].selected = type }) }, editClick() { this.allCheckShow = true let actionSwipe = this.$refs.actionSwipe; let shopActionSwipe = this.$refs.shopActionSwipe; if(actionSwipe){ actionSwipe.forEach(item=>item.close()) } if(shopActionSwipe){ shopActionSwipe.forEach(item=>item.close()) } }, finishClick() { this.allCheckShow = false }, //收藏商品查询
getProductCollect() { // uni.showLoading({
// mask: true,
// title: '加载中...'
// })
NET.request(API.getProductCollect, { page: this.productPage, pageSize: this.productPageSize }, 'GET').then(res => { uni.hideLoading() if (res.data.list.length == 0) { this.proCollectShow = true this.proloadingType = 1 this.productPage = this.productPage } else { this.productCollect = this.productCollect.concat(res.data.list)
this.productCollect.forEach((value, index) => { value['show'] = false value['selected'] = 0 }) } }).catch(res => { uni.showToast({ title: '收藏商品查询失败', icon: "none" }) }) }, //收藏店铺查询
getStoreCollect() { // console.log(111)
// uni.showLoading({
// mask: true,
// title: '加载中...'
// })
NET.request(API.getStoreCollect, { page: this.storePage, pageSize: this.storePageSize }, 'GET').then(res => { uni.hideLoading() if (res.data.list.length == 0) { this.storeCollectShow = true this.storeloadingType = 1 this.storePage = this.storePage } this.storeCollect = this.storeCollect.concat(res.data.list)
this.storeCollect.forEach((value, index) => { value['show'] = false value['selected'] = 0 }) }).catch(res => { uni.showToast({ title: '失败', icon: "none" }) }) }, //取消收藏
cancelCollect(ids) { NET.request(API.cancelCollect, { ids: [ids] }, 'POST').then(res => { this.$u.toast(this.$t('common.deletesuccess')); this.cardModal = false this.currentType = null this.currentIndex = null this.ids = null if (res.code == "200") { this.productCollect = [] this.storeCollect = [] this.getStoreCollect() this.getProductCollect() } else { this.$u.toast(res.message); } }).catch(res => { uni.showToast({ title: '失败', icon: "none" }) }) }, //商品详情
goodsDateils(shopId, productId, skuId) { uni.navigateTo({ url: '/pages_category_page1/goodsModule/goodsDetails?shopId=' + shopId + '&productId=' + productId + '&skuId=' + skuId }) } } }</script>
<style lang="scss" scoped> .collection-box { .empty-box { display: flex; justify-content: center; flex-direction: column; align-items: center;
.tohome-box { color: #999999; margin-top: 50rpx; }
.collect-empty { margin-top: 30%; width: 198rpx; height: 183rpx; } }
.function-box { background-color: #FAFAFA; }
.tabsbox { margin-top: 4rpx; background-color: #FFFFFF; }
.editicon-box { display: flex; justify-content: flex-end; position: relative; left: -30rpx; padding: 16rpx 0; }
.finishbox { display: flex; justify-content: flex-end; position: relative; left: -30rpx; padding: 16rpx 0; }
.editicon { width: 32rpx; height: 32rpx; }
.swipe-box { padding: 0 20rpx;
.actionBox { margin-bottom: 20rpx; }
.item { display: flex;
.infoCent { width: 100%; padding: 20rpx; }
.selctBtn { background: #F7F7F7; } }
.shopImgBox { display: flex; justify-content: end; margin-left: 90rpx; padding-bottom: 20rpx; margin-top: 20rpx;
.itemImgBox { margin-right: 20rpx; margin-left: 5rpx;
image { width: 100rpx; height: 100rpx; border-radius: 10rpx; } } }
.product-img { width: 150rpx; flex: 0 0 150rpx; height: 150rpx; border-radius: 30rpx; }
.head-img { width: 80rpx; flex: 0 0 80rpx; height: 80rpx; border-radius: 10rpx; }
.title { text-align: left; font-size: 28rpx; color: #252744; height: 100rpx; padding-right: 20rpx; }
.shop-title { text-align: left; font-size: 32rpx; color: #252744; font-weight: bold; height: 100rpx; padding-right: 20rpx; }
.shopName { height: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 340rpx; }
.cart-select-img { width: 40upx; height: 40upx; margin: 0upx 30upx 0upx; box-sizing: border-box; }
.toStore { //color: #FFFFFF;
//padding: 10rpx 27rpx;
//background: #252744;
//margin-right: 15rpx;
//border-radius: 30rpx;
image { width: 20rpx; height: 34px; margin-left: 10rpx; } }
.shopBox { margin-bottom: 20rpx; } }
.allcheck-box { background-color: #FFFFFF; width: 100%; position: fixed; bottom: 0upx;
.left { display: flex; flex-direction: row; align-items: center; font-size: 28upx; color: #666;
.cart-select-img { width: 40upx; height: 40upx; margin: 30upx; box-sizing: border-box; } }
.right { display: flex; flex-direction: row; align-items: center; box-sizing: border-box; }
.btn-delete { width: 232rpx; height: 80rpx; line-height: 80rpx; text-align: center; font-size: 30rpx; color: #FFFFFF; margin-right: 30rpx; background: #F54639; border-radius: 50rpx; } }
.Put-box1 { .btn { text-align: center; margin-top: 40rpx; border: 1px solid #333333; height: 80upx; line-height: 80upx; width: 100%; color: #333333; }
.submit { background-color: #333333; color: #FFEBC4; } }
.cancelDel { position: absolute; bottom: -50px; left: 45%;
image { width: 60upx; height: 60upx; } } }
.priceBox { .iconImg { width: 58rpx; height: 36rpx; margin-right: 10rpx; } .discountIcon{ width: 100rpx; } }</style><style scoped> .tabsbox /deep/ #u-tab-item-0 { position: relative; }
.tabsbox /deep/ .u-tab-bar { background-color: #252744 !important; }
.tabsbox /deep/ #u-tab-item-0::before { content: ''; width: 1rpx; height: 35rpx; display: block; background: #BCBDC6; position: absolute; right: 0; top: 30rpx; }
.swipe-box /deep/ .u-swipe-del { align-items: center; justify-content: center; width: 160rpx !important; }
.swipe-box /deep/ .u-btn-text { width: 60rpx; height: 60rpx; display: block; background: url("http://36.138.125.206:8081/ceres-local-file/static/images/delIcon.png") no-repeat center center; background-size: contain; }
.shop-follow-img{ width: 27rpx; height: 24rpx; }
.shop-forward-img{ width: 20rpx; height: 34rpx; margin-right: 30rpx; }</style><style> page { background-color: #FAFAFA; }</style>
|
