Feat：删除用户商品浏览足迹

api/user.js

@@ -578,6 +578,10 @@ export function getHistory(params) {
     return request.get('/history/list', params)
 }
 
+export function deleteHistory(id) {
+    return request.delete(`/history/${id}`)
+}
+
 /**
  * 购物车猜你喜欢
  * @param {*} params 
@@ -598,4 +602,4 @@ export function queryUserGuide(params) {
 
 export function setUserGuide(params) {
     return request.post('/user/guide/status', params)
-}
+}

pages/user/History/index.vue

@@ -27,6 +27,13 @@
               class="v12-white v12-radius-20 history-card"
               @click="goodsDetail(historyItem)"
             >
+              <view class="delete-icon" @click.stop="deleteHistoryItem(historyItem)">
+                <u-icon
+                  name="close"
+                  color="#fff"
+                  size="16"
+                />
+              </view>
               <image
                 class="goods-img"
                 :src="historyItem.image"
@@ -83,7 +90,7 @@
 </template>
 
 <script>
-import { getHistory } from '@/api/user'
+import { getHistory, deleteHistory as deleteHistoryApi } from '@/api/user'
 export default {
   data() {
     return {
@@ -179,6 +186,21 @@ export default {
         }
       })
     },
+    deleteHistoryItem(historyItem) {
+      const id = historyItem.id
+      if (!id) return
+      uni.showModal({
+        title: '提示',
+        content: '确认删除该浏览足迹吗？',
+        success: (res) => {
+          if (res.confirm) {
+            deleteHistoryApi(id).then(() => {
+              this.queryHistory()
+            })
+          }
+        }
+      })
+    },
     queryHistory() {
       this.items = []
       this.isLoad = false
@@ -245,6 +267,7 @@ export default {
   margin-right: 16rpx;
   border-radius: 20rpx;
   overflow: hidden;
+  position: relative;
   &:nth-child(3n) {
     margin-right: 0;
   }
@@ -271,6 +294,19 @@ export default {
     }
   }
 }
+.delete-icon{
+  position: absolute;
+  top: 8rpx;
+  right: 8rpx;
+  z-index: 2;
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 16rpx;
+  // background-color: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .active{
   background: #C52733;
   color: #fff !important;
@@ -283,4 +319,4 @@ export default {
   border-radius: 50%;
 }
 
-</style>
+</style>