yanzong_qianduan/pages/news/park/browsingHistory.vue

<template>
	<view class="browsing">
		<view class="browsing-hd">
			<view class="do" @click="openPage(1)">{{isToggle?'操作':'编辑'}}</view>
		</view>
		<view class="browsing-bd">
			<view class="li" v-for="(a, i) in list" :key="i">
				<view class="a">{{a.week == '今天'?a.week: a.name}}</view>
				<u-swipe-action class="b" v-for="(b,k) in a.list" :key="k" @click="clickItem(i,b.goods_id)" :options="options">
					<view class="item u-border-bottom">
						<view class="select" v-if="isToggle" @click.stop="openPage(4,i,k)">
							<image mode="aspectFill" v-if="b.isSelect" :src="$picUrl+'/static/invoice/select-on.png'" />
							<image mode="aspectFill" v-else :src="$picUrl+'/static/invoice/select.png'" />
						</view>
						<view class="pic" @click.stop="openPage(5,b.goods_id)">
							<image mode="aspectFill" v-if="b.imgs" :src="b.imgs" />
						</view>
						<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
						<view class="info title-wrap" @click.stop="openPage(5,b.goods_id)">
							<view class="title">{{b.goods.goods_name}}</view>
							<view class="sku" v-if="b.skustr">
								<view class="box">{{b.skustr}}</view><u-icon style="margin-left: 10rpx;" name="arrow-down"></u-icon>
							</view>
							<view class="sku" v-else></view>
							<view class="fd">
								<view class="price">￥<text>{{b.goods.goods_price_min}}</text></view>
								<image class="icon" :src="$picUrl+'/static/news/icon-recycling-08.png'"></image>
							</view>
						</view>
					</view>
				</u-swipe-action>
			</view>
		<u-empty text="暂无信息" v-if="isShow" mode="list"></u-empty>
		</view>
		<view class="browsing-fd" v-if="isToggle">
			<view class="a" @click="openPage(3)">
				<image mode="aspectFill" v-if="isSelect" :src="$picUrl+'/static/invoice/select-on.png'" />
				<image mode="aspectFill" v-else :src="$picUrl+'/static/invoice/select.png'" />全选
			</view>
			<view class="b">共<text>{{goodsids.length}}</text>件商品</view>
			<view class="c" @click="openPage(2)">删除</view>
		</view>
	</view>
</template>

<script>
	import * as GoodsApi from '@/api/goods'
	export default {
		data() {
			return {
				isToggle: false,
				isSelect: false,
				list: [],
				isShow: false,
				pageNum: 1,
				goodsids: [],
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#FF564A'
						}
					}
				],
			};
		},
		onShow() {
			this.getBrowseHistoryList();
		},
		methods: {
			openPage(index,i,k){
				const that = this;
				if(index == 1){
					this.isToggle = !this.isToggle
				}else if(index == 2){
					uni.showModal({
						title: "温馨提示",
						content: "确定要全部删除吗？",
						confirmColor: "#FF564A",
						complete(res) {
							that.toDel()
						}
					})
				}else if(index == 3){
					if(this.list && this.list.length >0){
						this.list.map(a=>{
							if(a.list && a.list.length > 0){
								a.list.map(b=>{
									if(that.isSelect == false){
										b.isSelect = true
									}else {
										b.isSelect = false
									}
								})
							}
						})
					}
					that.isSelect = !that.isSelect
					this.totallGoods();
				}else if(index == 4){
					this.list[i].list[k].isSelect = !this.list[i].list[k].isSelect
					this.totallGoods();
				}else if(index == 5){
					uni.navigateTo({
						url: "/pages/goods/detail?goodsId="+i
					})
				}
			},
			//统计选中多少商品
			totallGoods() {
				let arr = []
				if(this.list && this.list.length >0){
					this.list.map(a=>{
						if(a.list && a.list.length > 0){
							a.list.map(b=>{
								if(b.isSelect){
									arr.push(b.id)
								}
							})
						}
					})
				}
				this.goodsids = Array.from(new Set(arr));
			},
			//删除
			async toDel() {
				const that = this;
				const {status, data} = await GoodsApi.browseHistoryDel({
					ids: this.goodsids
				})
				if(status == 200){
					uni.showToast({
						title: "删除成功"
					})
					setTimeout(()=>{
						that.getBrowseHistoryList();
					},1000)
				}
			},
			/**
			 * 获取浏览记录列表
			 */
			async getBrowseHistoryList() {
				let {status, data} = await GoodsApi.browseHistoryList({
					page: this.pageNum
				})
				if(status == 200){
					uni.hideLoading();
					if(data && data.length > 0){
						data.map(a=>{
							if(a.list && a.list.length > 0){
								a.list.map(b=>{
									b.isSelect = false;
									b.imgs = ""
									if(b.images && b.images.length > 0){
										b.imgs = b.images[0].file.external_url
									}
									b.skustr = ""
									if(b.sku){
										if(b.sku.goods_props && b.sku.goods_props.length>0){
											b.sku.goods_props.map(c=>{
												b.skustr+= c.value.name
											})
										}
									}
								})
							}
						})
					}
					this.list = data;
					this.isShow = data && data.length > 0?false:true
				}
			},
			clickItem(idx,id){
				const that = this;
				uni.showModal({
					title: "温馨提示",
					content: "确定要删除吗？",
					confirmColor: "#FF564A",
					complete(res) {
						that.goodsids = id;
						that.toDel()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.browsing{
	padding: 0 0 130rpx;
	overflow: hidden;
	&-fd{
		width: 100%;
		padding: 20rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		background-color: #fff;
		.a{
			margin-right: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #313131;
			display: flex;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
		.b{
			text{
				color: #ED2B00;
				padding: 0 10rpx;
			}
			font-size: 28rpx;
			font-weight: 400;
			color: #A2A2A2;
			margin-right: 20rpx;
		}
		.c{
			width: 408rpx;
			line-height: 80rpx;
			background: #FF564A;
			border-radius: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	&-hd{
		padding: 30rpx;
		display: flex;
		justify-content: flex-end;
		overflow: hidden;
	}
	&-bd{
		overflow: hidden;
		.li{
			padding: 0 30rpx;
			overflow: hidden;
			background-color: #fff;
			.a{
				overflow: hidden;
				font-size: 32rpx;
				font-weight: 500;
				color: #303030;
				padding-top: 20rpx;
			}
			.item{
				padding: 25rpx 0;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.select{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.pic{
					width: 190rpx;
					height: 190rpx;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.info{
					flex: 1;
					margin-right: 20rpx;
					.title{
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
						height: 80rpx;
						overflow: hidden;
					}
					.sku{
						width: 320rpx;
						padding: 0 10rpx;
						line-height: 48rpx;
						background: #F7F8FA;
						border-radius: 48rpx;
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						.box{
							width: 260rpx;
							overflow: hidden;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.fd{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 10rpx;
						.price{
							font-size: 20rpx;
							font-weight: 400;
							color: #ED2B00;
							text{
								font-size: 32rpx;
							}
						}
						.icon{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
}
</style>