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

<template>
  <view class="container">
    <view class="history-list">
      <view class="history-item" v-for="(item, index) in historyList" :key="index" @click="handleDonate(item)">
        <image class="history-img" :src="item?.businessAvatar"></image>
        <view class="history-info">
          <text class="history-title">{{ item?.businessName }}</text>
		  <view class="starSale">
			  <view class="star">
			  	<uni-rate :readonly="true" :value="item.level" 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>
    </view>
  </view>
</template>


<script setup>
import { ref, onMounted,computed } from 'vue'
import {apiImageUrl} from '../../API/api'
const historyList = ref([])
const fetchHistoryData = async () => {
	try {
		const res = await uni.request({
			url: apiImageUrl+'/api/business/list/page/vo',
			method: 'POST',
			data:{
				 address: "",
				  businessName: "",
				  businessProfile: "",
				  categoryId: 1,
				  current: 1,
				  id: "",
				  pageSize: 20,
				  sortField: "",
				  sortOrder: "",
				  state: 1,
				  storeStatus: 1,
				  userId: ""
			}
		})
		if (res.data.code === 0) {
			console.log(res.data.data.records);
			historyList.value = res.data.data.records;
		}
	} catch (error) {
		console.error('Error fetching data:', error);
	}
}


onMounted(() => {
	fetchHistoryData();
});
const handleDonate = (item) => {
	console.log(item.id);
	uni.setStorageSync("Mybusiness",item)
	uni.setStorageSync("businessItem",item.id)
  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}`,
  });
};
</script>


<style>

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

.history-list {
  width: 100%;

}

.history-item {
  padding: 10px 0px 10px 5px;
  display: flex;
  margin-bottom: 20rpx;
  border: 1px solid #999;
  background-color: #fff;
  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>