feat: ✨ 我的足迹新增批量删除功能

pages/mine/myTracks.vue

@@ -1,22 +1,25 @@
 <template>
 	<view class="myTracks">
 		<u-navbar title="我的足迹">
-
+			<div slot="right">
+        <div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</div>
+      </div>
 		</u-navbar>
+		<u-notice-bar mode="vertical" :list="['右划删除浏览记录']"></u-notice-bar>
 		<u-empty text="暂无历史记录" style="margin-top:200rpx;" mode="history" v-if="whetherEmpty"></u-empty>
 		<div v-else>
-			<view  v-if="item" v-for="(item, index) in trackList" :key="index">
+			<view v-for="(item, index) in trackList" :key="index">
-				<view class="myTracks-title" @click="navigateToStore(item)" v-if="item.storeName">{{item.storeName}}</view>
+				<view class="myTracks-title" @click="navigateToStore(item)">{{item.storeName}}</view>
 				<view class="myTracks-items">
 
 					<u-swipe-action style="width: 100%;" :show="item.show" :index="index" :key="item.id"
 						@click="delTracks" @open="open" :options="options">
-						<!-- 已失效商品 -->
+						
-						<div class="myTracks-item lose-goods" v-if="!item.storeName && !item.goodsName && !item.price">
+						<view class="myTracks-item">
-							已失效商品 
+							<u-checkbox-group v-if="isEdit" class="store-line-check">
-						</div>
+								<u-checkbox shape="circle" :active-color="lightColor" v-model="item.checked"
-						<!-- 正常有效商品 -->
+                @change="checkboxChangeDP(item)"></u-checkbox>
-						<view v-else class="myTracks-item">
+							</u-checkbox-group>
 							<view class="myTracks-item-img" @click.stop="navigateToDetail(item)">
 								<image :src="item.thumbnail"></image>
 							</view>
@@ -36,7 +39,9 @@
 				<view class="myTracks-divider"></view>
 
 			</view>
-
+			<div @click="handleClickDeleteSelected" v-if="isEdit" class="submit">
+				删除所选
+			</div>
 		</div>
 
 	</view>
@@ -51,7 +56,7 @@
 	export default {
 		data() {
 			return {
-
+				isEdit:false,
 				whetherEmpty: false, //是否数据为空
 				params: {
 					pageNumber: 1,
@@ -59,6 +64,7 @@
 					order: "desc",
 					sort: "updateTime",
 				},
+				lightColor:this.$lightColor,
 				options: [{
 					text: '删除',
 					style: {
@@ -86,6 +92,21 @@
 			this.getList();
 		},
 		methods: {
+			checkboxChangeDP(val){
+				console.log(val)
+			},
+			// 删除所选的数据
+			handleClickDeleteSelected(val){
+				const ids = this.trackList.filter(item=>item.checked).map(item=>item.goodsId);
+				if(!ids.length){
+					uni.showToast({
+						title:"请选择删除数据",
+						icon:"none"
+					})
+				}else{
+					this.delTracks(0,ids)
+				}
+			},
 			/**
 			 * 导航到店铺
 			 */
@@ -120,11 +141,12 @@
 				});
 				myTrackList(this.params).then((res) => {
 					uni.stopPullDownRefresh();
-					 if (this.$store.state.isShowToast){ uni.hideLoading() };
+					uni.hideLoading();
 					if (res.statusCode == 200) {
 						res.data.result.records.length &&
 							res.data.result.records.forEach((item) => {
 								item.show = false;
+								item.checked = false
 							});
 
 						let data = res.data.result.records;
@@ -141,10 +163,11 @@
 			/**
 			 * 删除足迹
 			 */
-			delTracks(index) {
+			delTracks(index,ids) {
-				deleteHistoryListId(this.trackList[index].goodsId).then((res) => {
+				deleteHistoryListId(ids || this.trackList[index].goodsId).then((res) => {
 					if (res.data.code == 200) {
 						this.trackList = [];
+						this.params.pageNumber = 1
 						this.getList();
 					} else {
 						uni.showToast({
@@ -160,9 +183,18 @@
 </script>
 
 <style lang="scss" scoped>
-	.lose-goods{
+	.submit{
-		color: $main-color;
+		position: fixed;
-		padding-left: 50rpx !important;
+		bottom: 20rpx;
+		left: 10%;
+		width: 80%;
+		height: 80rpx;
+		color: #fff;
+		border-radius: 100px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: $light-color;
 	}
 	.myTracks {
 		width: 100%;
@@ -234,10 +266,39 @@
 		padding: 10rpx 0 0 0;
 	}
 
+	.myTracks-action {
+		display: flex;
+		justify-content: space-between;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		background: #fff;
+		height: 75rpx;
+		align-items: center;
+		padding: 0 32rpx;
+	}
+
+	.myTracks-action-btn {
+		width: 130rpx;
+		height: 60rpx;
+		line-height: 60rpx;
+	}
 
 	.myTracks-divider {
 		width: 100%;
 		height: 20rpx;
 	}
 
+
+
+	.myTracks-action-check {
+		align-items: center;
+		display: -webkit-box;
+		display: -webkit-flex;
+		display: flex;
+	}
+	.edit{
+  	padding-right: 32rpx;
+	}
 </style>

pages/tabbar/cart/cartList.vue

@@ -77,7 +77,7 @@
                 {{ skuItem.goodsSku.goodsName }}
               </p>
               <!-- 规格 -->
-              <p class="sp-type">{{skuItem.goodsSku.simpleSpecs}}</p>
+              <p class="sp-type" style="width:300rpx">{{skuItem.goodsSku.simpleSpecs}}</p>
               <p class="sp-type" v-if="skuItem.goodsSku.salesModel == 'WHOLESALE'">批发商品</p>
               <p class="sp-number">
                 <view class="sp-price">