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

<template>
	<view class="navbar">
	    <view class="search">
	      <text class="icon-search">
			  <input type="text" v-model="searchTerm" placeholder="搜索店铺" class="transparent-input"/>
		  </text>
	    </view>
		 <button @click="searchBusiness" class="search-button">搜索</button> 
	</view>

	<view class="container">
		 <view v-if="businessRecords.length === 0" class="no-results">
		      没有这个店铺，搜一搜其他的试试呢
		    </view>

	    <view class="history-list" v-if="businessRecords.length > 0">
	      <view class="history-item" v-for="(item, index) in businessRecords" :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="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>
		  
		  
	    </view>
	  </view>
	
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { apiImageUrl } from '../../API/api';

const searchTerm = ref('');
const businessRecords = ref([]);

const searchBusiness = () => {
	const businessName = searchTerm.value; 

	uni.request({
		url: apiImageUrl + '/api/business/list/page/vo',
		method: 'POST',
		data: {
			address: "",
			businessName: businessName,
			businessProfile: "",
			categoryId: "",
			current: 1,
			id: "",
			pageSize: 10,
			sortField: "",
			sortOrder: "",
			state: 1,
			storeStatus: "",
			userId: ""
		},
		success(res) {
			// 假设响应数据结构为res.data.data.records
			businessRecords.value = res.data.data.records || []; // 更新业务记录
			console.log(businessRecords.value);
			console.log("成功");
		},
		fail() {
			console.log("出错了");
		}
	})
};

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 scoped lang="scss">
.no-results {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #aaa;
}
.businessItem {
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.businessItem p {
	margin: 0;
}

.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;
}

/* 搜索栏 */
.navbar {
	  background-color: #4095e5;
	  display: flex;
	  flex-direction: row;
	  padding: 10px;
	  .search {
	    display: flex;
	    align-items: center;
	    padding: 0 10rpx 0 26rpx;
	    height: 0.64rem;
	    color: #fff;
	    font-size: 28rpx;
	    border-radius: 32rpx;
	    background-color: rgba(255, 255, 255, 0.5);
	    width: 70%;
	    margin: 0 auto;
	  }
	  .icon-search {
	    margin-right: 10rpx;
	  }
	  .search-button {
	    margin-left: auto; /* 将按钮放置在右侧 */
	    height: 0.64rem; /* 与搜索框高度一致 */
	    background-color: #fff; /* 按钮背景颜色 */
	    color: #4095e5; /* 按钮文字颜色 */
	    border: none; /* 去掉边框 */
	    border-radius: 32rpx; /* 与搜索框圆角一致 */
	    padding: 0 20rpx; /* 按钮内边距 */
		line-height: 0.64rem;
		font-size: 15px;
		
	  }
	  
	  
	  /* 添加透明输入框的样式 */
	  .transparent-input {
	    background-color: transparent; /* 使输入框背景透明 */
	    border: none; /* 移除边框 */
	    color: #fff; /* 输入文字颜色为白色 */
	    outline: none; /* 点击时没有默认的outline */
	    width: 100%; /* 让输入框占据剩余空间 */
	    padding: 0 10rpx; /* 内边距以保证文本不紧贴边缘 */
	    font-size: 28rpx; /* 继承自 .search 的字体大小 */
	  }
	}

</style>