caimei-applets-caimei/pages/user/collection/collection.vue

<template>
	<view class="container product clearfix">
		<view class="superv-header" v-if="!isEmpty">
			<view class="superv-header-click">
				<view class="oltext">共<text class="red">3</text>件商品</view>
				<view class="ortext" @click="supervClickFn" v-if="!isSuperv">编辑</view>
				<view class="ortext" @click="closeSupervFn" v-else>完成</view>
			</view>
		</view>
		<view class="product-content">
			<view  :class="{'tui-order-list':scrollTop >= 0}" class="clearfix">
				<!-- 空白页 -->
				<view class="empty-container" v-if="isEmpty">
					<image class="empty-container-image" :src="StaticUrl+'/icon/icon-collection-empty@2x.png'"></image>
					<text class="error-text">暂无收藏商品~</text>
				</view>
				<!-- 列表 -->
				<view class="tui-cart-cell  tui-mtop" v-for="(item,index) in dataList" :key="index">
					<view class="tui-goods-item">
						<view class="tui-goods-checkBox" v-if="isSuperv">
							<view class="checkbox iconfont" 
								  :class="[item.isChecked ?'icon-yixuanze':'icon-weixuanze']" 
								  @click="checkedSoperv(item)">
							</view>
						</view>
						<view class="tui-goods-image">
							<image :src="item.image" class="tui-goods-img"/>
						</view>
						<view class="tui-goods-info" :style="{width:isSuperv ? '360rpx' : '420rpx'}"> 
							<view class="tui-goods-title">{{ item.name }}</view>
							<view class="tui-price-box">
								<view class="tui-goods-price">￥{{item.price | NumFormat}}</view>
							</view>
							<view class="tui-goods-pip">市场价:￥{{item.normalPrice | NumFormat}}</view>
							<view class="tui-goods-pip">分类:{{ item.typeName ? item.typeName : '无' }}</view>
						</view>
						<view class="tui-goods-status">
							<view class="status-text" :style="{ color: verifyColorFilter(item.validFlag)}">
								{{ item.validFlag | verifyStatusFilter }}
							</view>
						</view>
					</view>
				</view>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
				<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text='nomoreText'></tui-nomore>
				<!--加载loadding-->
			</view>
		</view>
		<!-- 批量操作 -->
		<tui-bottom-popup :radius="false" :mask="false" :show="isSuperv">
			<view class="tui-popup-box clearfix">
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
					<view class="tui-flex-1">
						<view class="superv-header-checked">
							<view class="oltext" @click="isCheckedAll">
								<view class="checkbox iconfont" :class="[isAllChecked ? 'icon-yixuanze':'icon-weixuanze']"></view>
								<view class="text">全选</view>
							</view>
						</view>
						<view class="tui-button" :class="isProductChecked ? 'active' : ''" @click="handleAllUnder()">取消收藏</view>
					</view>
				</view>
			</view>	
		</tui-bottom-popup>	
		<!-- 弹窗提示 -->
		<tui-modal  :show="modal"
					@click="handleClick" 
					@cancel="hideMobel" 
					:content="contentModalText" 
					color="#333" 
					:size="32" 
					shape="circle" 
					:maskClosable="false">
		</tui-modal>
		<!-- 可拖动悬浮按钮 -->
		<cm-drag :cartNum="cartQuantity" 
				 :isDock="true"
				 :existTabBar="true" 
				 @btnClick="btnClick" 
				 @btnTouchstart="btnTouchstart" 
				 @btnTouchend="btnTouchend">
		</cm-drag>		
	</view>
</template>
<script>
	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
	import tuiNomore from "@/components/tui-components/nomore/nomore"
	import cmDrag from '@/components/cm-custom/cm-drag.vue'
	
	import { mapState,mapMutations } from 'vuex'
	const defaultListQuery = {
			userId:0,
			pageNum:1,
			pageSize:10
	 };
	export default{
		components: {
			tuiLoadmore,
			tuiNomore,
			cmDrag
		},
		data() {
			return{	
				StaticUrl:this.$Static,
				cartQuantity:0,
				isSuperv:false,
				isProductChecked:false,
				listQuery:Object.assign({}, defaultListQuery),
				dataList: [],
				scrollTop: 0,
				isEmpty: true,
				isAllChecked:false,
				loadding: false,
				pullUpOn: true,
				pullFlag: true,
				hasNextPage: false,
				navbarHeight:'',
				nomoreText: '上拉显示更多',
				contentModalText:'',//操作文字提示语句
				modal:false,
			}
		},
		onLoad(option){
			this.initGetStotage()
			// this.GetProductListInfo()
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2);
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			...mapMutations(['login','logout']),
			async initGetStotage(){
				const userInfo = await this.$api.getStorage()
				this.listQuery.userId =  userInfo.userId ?  userInfo.userId : 0
			},
			GetProductListInfo(){
				this.coupinList = []
				this.listQuery.pageNum = 1
				this.ProductService.QueryCouponCenter(this.listQuery).then(response =>{
					let data = response.data
					if(data.list&&data.list.length > 0){
						this.isEmpty = false
						this.hasNextPage = data.hasNextPage
						this.coupinList = data.list
						this.pullFlag = false;
						setTimeout(()=>{this.pullFlag = true;},500)
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							if(this.coupinList.length < 8){
								this.pullUpOn = true
							}else{
								this.pullUpOn = false
								this.loadding = false
								this.nomoreText = '已至底部'
							}
						}
					}else{
						this.isEmpty = true
					}
					this.isRequest = true;
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			}, 
			GetOnReachBottomData(index){//上拉加载
				this.listQuery.pageNum+=1
				this.ProductService.QueryCouponCenter(this.listQuery).then(response =>{
					let data = response.data
					if(data.list&&data.list.length > 0){
						this.hasNextPage = data.hasNextPage
						this.coupinList = this.coupinList.concat(data.list) 
						this.pullFlag = false;// 防上拉暴滑
						setTimeout(()=>{this.pullFlag = true;},500)
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},	
			handlerButton(e,item){//监听侧滑按钮点击事件
				if(item.validFlag === 0 || item.validFlag === 3 || item.validFlag === 8 || item.validFlag === 9){
					if(e.index == 0){
						return
					}
				}else if(item.validFlag === 1 || item.validFlag === 10){
					if(e.index == 0){
						this.$api.navigateTo(`/pages/goods/product?id=${item.productId}`)
					}
				}else if(item.validFlag === 2){
					switch(e.index){
						case 0:
							this.$api.navigateTo(`/pages/goods/product?id=${item.productId}`)
							break;
						case 1:
							if(item.featuredFlag === 1){
								this.handleDeleteShopRemb(item)
							}else{
								this.handleAddShopRemb(item)
							}
							break;
						case 2:
							this.handleUnder(item)
					}
				}
			},
			handleAddShopRemb(item){//添加主页推荐
				let num = 4- this.featuredNum;
				this.OperationType = 'add'
				this.handlerProduct = item
				this.modal = true;
				this.contentModalText = `总共能添加4个主推商品，您还能添加${num}个确定将该商品添加为主推商品吗？`;
			},
			handleDeleteShopRemb(item){//删除主页推荐
				this.OperationType = 'delete'
				this.handlerProduct = item
				this.modal = true;
				this.contentModalText = '是否把该商品从主推商品中删除？';
			},
			handleUnder(item){//下架操作
				this.OperationType = 'under'
				this.handlerProduct = item
				this.modal = true;
				this.contentModalText = '确定下架该商品吗？';
			},
			handleAllUnder(){//批量下架操作
				let checkedArray = [];
				let isValidFlag = false;
				this.productIds = '';
				if(this.isProductChecked){
					this.dataList.forEach(el => {
						if(el.isChecked) { 
							checkedArray.push(el)						
						}
					})
					checkedArray.forEach(el =>{
						if(el.validFlag == 2){
							this.productIds += el.productId+','
						}
						if(el.validFlag != 2){
							isValidFlag = true; 
						}	
					})
					if(isValidFlag){
						this.$util.modal('','部分选中的商品暂未上架，不能进行下架操作','确定','',false,() =>{})
						return;
					}
					this.OperationType = 'allunder'
					this.modal = true;
					this.contentModalText = '确定下架选中的商品吗？';												
				}
			},
			handleClick(e) {//弹窗提示用户操作
				if(e.index == 1){
					switch(this.OperationType){
						case 'delete'://删除主页推荐
							this.SupplierDeleteSwitchFeatured(this.handlerProduct)
							break;
						case 'add'://添加主页推荐
							this.SupplierAddSwitchFeatured(this.handlerProduct)
							break;
						case 'under'://下架商品
							this.SupplierSoldOutProduct(this.handlerProduct)
							break;
						case 'allunder'://批量下架
							this.SupplierAllSoldOutProduct(this.productIds)
							break;
					}
				}
				this.modal = false;
			},
			SupplierDeleteSwitchFeatured(item){//操作删除主页推荐
				this.ShopService.SupplierSwitchFeaturedyProduct({productId:item.productId,featuredFlag:0}).then(response =>{
					this.$util.msg('删除成功',2000,true,'success');
					setTimeout(() => {
						this.GetProductListInfo()
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			SupplierAddSwitchFeatured(item){//操作添加主页推荐
				this.ShopService.SupplierSwitchFeaturedyProduct({productId:item.productId,featuredFlag:1}).then(response =>{
					this.$util.msg('添加成功',2000,true,'success');
					setTimeout(() => {
						this.GetProductListInfo()
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			SupplierSoldOutProduct(item){//操作下架商品
				this.ShopService.SupplierSoldOutProduct({productIds:item.productId}).then(response =>{
					this.$util.msg('下架成功',2000,true,'success');
					setTimeout(() => {
						this.GetProductListInfo()
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			SupplierAllSoldOutProduct(ids){//操作批量下架商品
				this.ShopService.SupplierSoldOutProduct({productIds:ids}).then(response =>{
					this.$util.msg('下架成功',2000,true,'success');
					this.productIds = '';
					setTimeout(() => {
						this.GetProductListInfo()
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			hideMobel(){
				this.modal = false;
			},
			updateCheckAllBtn() {//勾选单个判断全选
				let goodsCheckedLength = 0
				this.dataList.forEach(item => {
					if(item.isChecked) { goodsCheckedLength++; }
				})
				this.isAllChecked = goodsCheckedLength === this.dataList.length;
				if(goodsCheckedLength>0){
					this.isProductChecked = true
				}else{
					this.isProductChecked = false
				}
			},
			updateBothCheckBtn() {//全选勾选判断
				this.dataList.forEach((item)=>{
					item.isChecked = this.isAllChecked				
				})
			},
			isCheckedAll(){//全选
				this.isAllChecked = !this.isAllChecked
				if(this.isAllChecked){
					this.isProductChecked = true
				}else{
					this.isProductChecked = false
				}
				this.updateBothCheckBtn()
			},
			checkedSoperv(item){//选择
				item.isChecked = !item.isChecked
				console.log(item)
				this.updateCheckAllBtn()
			},
			supervClickFn(){//管理全选
				this.isSuperv = true
			},
			closeSupervFn(){
				this.isSuperv = false
			},
			btnClick() {
				this.$emit('goCartPage')
			},
			btnTouchstart() {
				// console.log('btnTouchstart');
			},
			btnTouchend() {
				// console.log('btnTouchend');
			}
		},
		onPageScroll(e){//实时获取到滚动的值
			
		},
		onReachBottom() {
			if(this.hasNextPage){
				this.loadding = true
				this.pullUpOn = true
				this.GetOnReachBottomData()
			}	
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.listQuery.pageNum = 1
				uni.stopPullDownRefresh()
			}, 200)
		},
		onShow(){
			
		}	
	}
</script>

<style lang="scss">
	@import "@/uni.scss";
	page{
		background:#FFF;
	}
	.empty-container{
		z-index: 9999;
	}
	.superv-header{
		width: 100%;
		height: 80rpx;
		background-color: #F7F7F7;
		line-height: 80rpx;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 0 24rpx;
		z-index: 999;
		.superv-header-click{
			width: 100%;
			height: 80rpx;
			font-size: $font-size-30;
			.oltext{
				float: left;
				color: #666666;
				.red{
					color: $color-system;
				}
			}
			.ortext{
				float: right;
				color: #333333;
				text-align: right;
			}
		}
	}
	.tui-header {
		width: 100%;
		font-size: 16px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 0 40rpx;
	}
	.header-sit{
		width:100%;
		box-sizing: border-box;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		padding:0 40rpx;
		text-align: left;
		font-size: $font-size-40;
		color: #FFFFFF;
		font-weight: 600;
		font-family: '正楷';
		margin-top: 30rpx;
		.iconfont{
			font-size: 42rpx;
			margin-left: 30rpx;
		}
	}
	.mine{
		width: 100%;
		height: 100%;
		position:relative;
	}
	.product-content{
		width: 100%;
		height: auto;
		position: relative;
		padding:0;
		padding-top: 80rpx;
		box-sizing: border-box;
		.empty-container-image {
			width: 260rpx;
			height: 260rpx;
			margin-top: -300rpx;
		}
	}	
	.tui-goods-item {
		display: flex;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #EBEBEB;
		position: relative;
	}
	.tui-goods-checkBox{
		display: flex;
		align-items: center;
		margin: 0 15rpx;
		.checkbox{
			display: flex;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			text-align: center;
			text-decoration: none;
			border-radius: 0;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
			background-color:#FFFFFF;
			font-size: 36rpx;
			color:$color-system;
		}
		.text{
			font-size: $font-size-24;
			margin-left: 10rpx;
		}
	}
	.tui-goods-image{
		width: 180rpx;
		height: 180rpx !important;
		border-radius: 12rpx;
		.tui-goods-img {
			width: 180rpx;
			height: 180rpx !important;
			border-radius: 12rpx;
			flex-shrink: 0;
			display: block;
		}
	}
	.tui-goods-info {
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
	}
	.tui-goods-status{
		width: 160rpx;
		position: absolute;
		right: 0;
		.status-text{
			font-size: $font-size-24;
			line-height: 44rpx;
			text-align: center;
			color: #666666;
		}
	}
	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		color: #333;
		line-height: 44rpx;
	}
	.tui-goods-pip{
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		color: #999;
		line-height: 44rpx;
	}
	.tui-goods-ediet{
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(90deg,rgba(122,165,250,1) 0%,rgba(87,110,250,1) 100%);
		border-radius: 50%;
		line-height: 60rpx;
		text-align: center;
		position: absolute;
		right: 0;
		top: 50%;
		.icon-bianji1 {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 24rpx;
		}	
	}
	.tui-goods-model {
		max-width: 100%;
		color: #FFFFFF;
		background: #4688fa;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
	}
	
	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 40rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	
	.tui-goods-price {
		font-size: $font-size-28;
		font-weight: 500;
		color: #FF201F;
	}
	.tui-popup-box {
		position: relative;
		box-sizing: border-box;
		min-height: 200rpx;
		padding:6rpx 24rpx;
	}
	.tui-popup-btn {
		width: 100%;
		height: auto;
		float: left;
		box-sizing: border-box;
		margin-top: 30rpx;
		.superv-header-checked{
			float: left;
			font-size: $font-size-30;
			.oltext{
				width: 120rpx;
				float: left;
				color: #666666;
				display: flex;
				margin-left: 10rpx;
				.checkbox{
					display: flex;
					margin: 0;
					padding: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					text-align: center;
					text-decoration: none;
					border-radius: 0;
					-webkit-tap-highlight-color: transparent;
					overflow: hidden;
					font-size: 34rpx;
					color:$color-system;
					line-height: 80rpx;
				}
				.text{
					float: left;
					line-height: 80rpx;
					margin-left: 15rpx;
				}
			}
			.ortext{
				width: 120rpx;
				float: right;
				color: $color-system;
				text-align: right;
			}
		}
		.tui-button{
			width: 210rpx;
			height: 88rpx;
			float: right;
			background: #e1e1e1;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: $font-size-28;
			border-radius: 44rpx;
			&.active{
				background: $btn-confirm;
			}
		}
	}
</style>