xiaokuaisong-xiaochengxu/uniapp04/pages/collect/collect.vue

<template>
  <button @click="clear">一键清空</button>
  <view class="container">
    <view class="history-list">
      <uni-swipe-action>
        <uni-swipe-action-item v-for="(item, index) in historyList" :key="index">
          <view class="history-item" @click="handleDonate(item)">
            <image class="history-img" :src="item.business?.businessAvatar"></image>
            <view class="history-info">
              <text class="history-title">{{ item.business?.businessName }}</text>
              <view class="starSale">
                <view class="star">
                  <uni-rate :readonly="true" :value="4" size="12px"/>
                </view>
                <text class="history-sale">月售:234</text>
              </view>
              <view class="startPoints">
                <text class="history-start">起送:￥10</text>
                <text class="points">用积分更优惠</text>
                <text class="distance">2.3km</text>
                <text class="time">30min</text>
              </view>
              <view class="exchange">
                <uni-icons type="paperplane-filled" color="#e99e44"></uni-icons>
                支持自取
              </view>
            </view>
          </view>
          <template v-slot:right>
            <button class="delete-button" @click.stop="onDelete(item)">取消收藏</button>
          </template>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
  </view>
</template>


<script setup>
import { ref, onMounted } from 'vue'
import {apiImageUrl} from '../../API/api'
const historyList = ref([])


const fetchHistoryData = async () => {
	try {
		const res = await uni.request({
			url: apiImageUrl+'/api/collect/list',
			method: 'POST',
			header: {
			  'Content-Type': 'application/json', 
			  'cookie': uni.getStorageSync("cookie") || ''
			},
		})
		if (res.data.code === 0) {
			console.log(res.data.data);
			historyList.value = res.data.data; 
		}
	} catch (error) {
		console.error('Error fetching data:', error);
	}
}


onMounted(() => {
	fetchHistoryData();
});
const handleDonate = (item) => {
	console.log(item);
	uni.setStorageSync("Mybusiness",item)
  if (!item || !item.hasOwnProperty('id')) {
    console.error("The 'item' variable is undefined or missing the 'id' property.");
    return;
  }

  const merchantId = item.id;

  uni.navigateTo({
     url: `/pages/merchant/merchant?merchantId=${merchantId}`,
  });
};

const clear=()=>{
	uni.request({
		url:apiImageUrl+'/api/collect/delete/all',
		method:'POST',
		header: {
		  'Content-Type': 'application/json', 
		  'cookie': uni.getStorageSync("cookie") || ''
		},
		success(res) {
			console.log(res);
			console.log('成功啦');
			 fetchHistoryData();
		},
		fail(){
			console.log("失败啦");
		}
	})
}

const onDelete = (item) => {
	console.log(item);
	console.log(item.business.id);
	const businessId=item.business.id
  uni.request({
    url: apiImageUrl + '/api/collect/delete', 
    method: 'POST',
    data: { id:businessId }, 
	header: {
	  'Content-Type': 'application/json', 
	  'cookie': uni.getStorageSync("cookie") || ''
	},
    success(res) {
      if (res.data.code === 0) {
        console.log('删除成功');
       
        fetchHistoryData();
      } else {
        console.error('删除失败:', res.data.message);
      }
    },
    fail() {
      console.log("请求失败");
    }
  });

};
</script>


<style>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.history-list {
  width: 100%;

}

.history-item {
	width: 100%;
  padding: 10px 0px 10px 5px;
  display: flex;
  margin-bottom: 20rpx;
  border: 1px solid #999;
  background-color: #fff;
  border-radius: 15px;
}
.delete-button {
  background-color: #03c4ff;
  color: white;
  border: none;
  padding: 25px 20px;
  height: 90%;
  border-radius: 15px;
}

.history-img {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  border-radius: 10px;
}

.history-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.history-title {
  font-size: 32rpx;
  font-weight: bold;
}

.history-description {
  font-size: 28rpx;
  color: #666;
}
.starSale {
	width: 120px;
	height: 15px;
}
.star {
	display: inline-block;
	line-height: 15px;
}
.history-sale {
	font-size: 20rpx;
	color: #999;
	float: right;
	display: inline-block;
	line-height: 15px;
}
.startPoints {
	width: 100%;
	height: 20px;
}
.points {
	padding-left: 15px;
    font-size: 20rpx;
	line-height: 20px;
	color: #d41414;
}
.distance,
.time {
	font-size: 20rpx;
	color: #999;
	padding-left: 25px;
	font-size: 20rpx;
}
.history-start,
.history-distance {
  font-size: 20rpx;
  color: #999;
}
.exchange {
	font-size: 24rpx;
	color: #e99e44;
	background-color: #f7dbb3;
	width: 75px;
	height: 20px;
	border-radius: 5px;
	border: 1px solid #e99e44;
}
</style>