优化我的足迹部分代码

pages/mine/myTracks.vue

@@ -1,20 +1,20 @@
 <template>
 	<view class="myTracks">
 		<u-navbar title="我的足迹">
-      <div @click="changeRightBtn" slot="right" style="margin-right:32rpx">
+			
-        {{edit}}
-      </div>
 		</u-navbar>
 		<u-empty text="暂无历史记录" style="margin-top:200rpx;" mode="history" v-if="whetherEmpty"></u-empty>
 		<div v-else>
+
+
+
 			<view v-for="(item, index) in trackList" :key="index">
 				<view class="myTracks-title" @click="navgaiteToStore(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">
 						<view class="myTracks-item">
-            <u-checkbox-group>
-              <u-checkbox v-model="item.___isDel" v-if="editFlag" active-color="#ff6b35" style="margin-right: 10rpx"
-                @change="changeChecked(item)"></u-checkbox>
-            </u-checkbox-group>
 							<view class="myTracks-item-img" @click.stop="navgaiteToDetail(item)">
 								<image :src="item.thumbnail"></image>
 							</view>
@@ -28,41 +28,27 @@
 								</view>
 							</view>
 						</view>
+					</u-swipe-action>
+
 				</view>
 				<view class="myTracks-divider"></view>
 
 			</view>
 			<uni-load-more :status="loadStatus"></uni-load-more>
 		</div>
-    <view v-if="editFlag">
-      <view class="myTracks-action">
-        <view class="myTracks-action-check">
-          <u-checkbox-group>
-            <u-checkbox v-model="allChecked" v-if="editFlag" active-color="#ff6b35" style="margin-right: 10rpx"
-              @change="checkedAllitem"></u-checkbox>
-            全选
-          </u-checkbox-group>
-        </view>
 	
-        <view>
-          <u-button type="warning"  @click="delAllTracks" class="myTracks-action-btn">
-            删除
-          </u-button>
-        </view>
-      </view>
-    </view>
 	</view>
 </template>
 
 <script>
-import { myTrackList, deleteHistoryListId } from "@/api/members.js";
+	import {
+		myTrackList,
+		deleteHistoryListId
+	} from "@/api/members.js";
 
-export default {
+	export default {
 		data() {
 			return {
-      edit: "编辑",
-      editFlag: false, //是否编辑
-      allChecked: false, //是否全选
 				loadStatus: "more", //底部下拉加载状态
 				whetherEmpty: false, //是否数据为空
 				params: {
@@ -71,7 +57,14 @@ export default {
 					order: "desc",
 					sort: "updateTime",
 				},
-
+				options: [
+					{
+						text: '删除',
+						style: {
+							backgroundColor: '#dd524d'
+						}
+					}
+				],
 				trackList: [], //足迹列表
 			};
 		},
@@ -101,35 +94,14 @@ export default {
 					url: "/pages/product/shopPage?id=" + val.storeId,
 				});
 			},
-
+			open(index) {
-    /**
+				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
-     * 设置右侧导航栏文本
+				// 原本为'false'，再次设置为'false'会无效
-     */
+				this.trackList[index].show = true;
-    setStyle(text) {
+				this.trackList.map((val, idx) => {
-      //导航按钮文本设置
+					if (index != idx) this.trackList[idx].show = false;
-      let pages = getCurrentPages();
+				})
-      let page = pages[pages.length - 1];
-      // #ifdef APP-PLUS
-      let currentWebview = page.$getAppWebview();
-      let titleNView = currentWebview.getStyle().titleNView;
-      titleNView.buttons[0].text = text;
-      if (text == "完成") {
-        this.trackList.forEach((key) => {
-          key.history.forEach((item) => {
-            this.$set(item, "___isDel", false);
-          });
-        });
-      }
-      currentWebview.setStyle({
-        titleNView: titleNView,
-      });
-      // #endif
-      // #ifdef H5
-      // h5 临时方案
-      document.getElementsByClassName("uni-btn-icon")[1].innerText = text;
-      // #endif
 			},
-
 			/**
 			 * 跳转详情
 			 */
@@ -152,7 +124,7 @@ export default {
 					if (res.statusCode == 200) {
 						res.data.result &&
 							res.data.result.forEach((item) => {
-              item.___isDel = false;
+								item.show = false;
 							});
 
 						let data = res.data.result;
@@ -169,61 +141,14 @@ export default {
 				});
 			},
 
-    /**
-     * 点击后判断是不是全选
-     */
-    
-    changeChecked(val) {
-      var opt = null;
-      const isCheckedAll = this.trackList.every((key) => {
-        key.___isDel == val.___isDel;  
-        opt = key.___isDel;
-        return opt;
-      });
-      if(opt){
-        this.allChecked = isCheckedAll;
-      }else{
-        this.allChecked = false;
-      }     
-    },
-
-    /**
-     * 右侧标签栏切换
-     */
-    changeRightBtn(e) {
-      if (!this.editFlag) {
-        this.edit = "完成";
-      } else {
-        this.edit = "编辑";
-      }
-      this.editFlag = !this.editFlag;
-    },
-
-    /**
-     * 点击全选按钮
-     */
-    checkedAllitem() {
-      //全选按钮
-      this.trackList.forEach((key) => {
-        this.$set(key, "___isDel", this.allChecked);
-      });
-    },
 
 			/**
 			 * 删除足迹
 			 */
-    delAllTracks() {
+			delTracks(index) {
-      let way = [];
+				deleteHistoryListId(this.trackList[index].goodsId).then((res) => {
-      this.trackList.forEach((key) => {
-        if (key.___isDel) {
-          way.push(key.goodsId);
-        }
-      });
-      if (way.length == 0) return false;
-      deleteHistoryListId(way).then((res) => {
 					if (res.data.code == 200) {
 						this.trackList = [];
-          this.allChecked = false;
 						this.getList();
 					} else {
 						uni.showToast({
@@ -235,16 +160,16 @@ export default {
 				});
 			},
 		},
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.myTracks {
+	.myTracks {
 		width: 100%;
 		padding-top: 2rpx;
-}
+	}
 
-.myTracks-title {
+	.myTracks-title {
 		width: 100%;
 		height: 110rpx;
 		padding-left: 20rpx;
@@ -256,18 +181,18 @@ export default {
 		display: -webkit-box;
 		display: -webkit-flex;
 		display: flex;
-}
+	}
 
-.myTracks-items {
+	.myTracks-items {
 		padding-top: 2rpx;
 		align-items: center;
 		display: -webkit-box;
 		display: -webkit-flex;
 		display: flex;
 		flex-direction: column;
-}
+	}
 
-.myTracks-item {
+	.myTracks-item {
 		width: 100%;
 		height: 226rpx;
 		padding-left: 20rpx;
@@ -280,34 +205,36 @@ export default {
 		display: -webkit-box;
 		display: -webkit-flex;
 		display: flex;
-}
+	}
 
-.myTracks-item-img {
+	.myTracks-item-img {
 		margin-right: 20rpx;
 		border-radius: 8rpx;
+
 		image {
 			width: 130rpx;
 			height: 130rpx;
 			border-radius: 8rpx;
 		}
-}
+	}
 
-.myTracks-item-title {
+	.myTracks-item-title {
 		font-size: 28rpx;
 		color: #333;
-}
+	}
 
-.myTracks-item-title-desc {
+	.myTracks-item-title-desc {
 		font-size: 28rpx;
 		color: #999;
-}
+	}
 
-.myTracks-item-price {
+	.myTracks-item-price {
 		font-size: 28rpx;
 		color: $light-color;
 		padding: 10rpx 0 0 0;
-}
+	}
-.myTracks-action{
+
+	.myTracks-action {
 		display: flex;
 		justify-content: space-between;
 		position: fixed;
@@ -318,25 +245,25 @@ export default {
 		height: 75rpx;
 		align-items: center;
 		padding: 0 32rpx;
-}
+	}
 
-.myTracks-action-btn {
+	.myTracks-action-btn {
 		width: 130rpx;
 		height: 60rpx;
 		line-height: 60rpx;
-}
+	}
 
-.myTracks-divider {
+	.myTracks-divider {
 		width: 100%;
 		height: 20rpx;
-}
+	}
 
 
 
-.myTracks-action-check {
+	.myTracks-action-check {
 		align-items: center;
 		display: -webkit-box;
 		display: -webkit-flex;
 		display: flex;
-}
+	}
 </style>