TakeOutShop/userserve/SearchList/SearchList.vue

<template>
  <view class="main">
	<view class="head" :style="{'padding-top':headerHeight+4+'px'}">
		<view class="head_top">
			<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
				<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
			</view>
			<view class="head_search" :style="{'width':searchWidth+'px','height':statusHeight+5+'px'}">
				<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
				<input class="head_search_input"  type="text" v-model="searchtext" disabled="true" @click="handleBack()"/>
			</view>
		</view>
		<view class="head_list">
			<view class="head_item">价格</view>
			<view class="head_item">销量</view>
			<view class="head_item">折扣</view>
		</view>
	</view>
	<view class="cont" :style="{'padding-top':statusHeight+headerHeight+50+'px'}">
		<!-- 商品区域 -->
		<view class="cont_item" v-for="(item,index) in searchList" :key="index" @click="JumpType(item.id,1)">
			<image class="item_imgUrl" :src="item.image" lazy-load="true" mode="widthFix"></image>
			<view class="item_r">
				<view class="item_title"><text>{{item.storeName}}</text></view>
				<view class="item_desc"><text>{{item.storeInfo}}</text></view>
				<view class="item_bottom">
					<view class="item_price">{{item.price}}<text class="item_otPrice">{{item.otPrice}}</text></view>
					<image class="item_addCart" src="../../static/addGroup.png" @click.stop="addCart(item,1)"></image>
				</view>
			</view>
		</view>
		<view class="empty" v-if="img_err && decs">
			<view class="empty_cont">
				<image class="empty_cont_img" :src="img_err" lazy-load="true" mode="widthFix"></image>
				<view class="empty_cont_title">{{decs}}</view>
			</view>
		</view>
	</view>
	<recomGoods  :apiType="5"  @add-message="addCart"></recomGoods>
	<multi
	ref="shopData"
	@add-success="handleAddSuccess"
	@add-error="handleAddError"
	></multi>
  </view>
</template>

<script setup>
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { frontproducts } from '@/server/api.js'
import multi from '@/components/multi/multi.vue'
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
// 定义响应式数据，存储页面宽度
const pageWidth = ref(0);
const searchtext = ref('');
const searchList= ref([]);
const decs = ref('');
const pages = ref(0);
const limits = ref(10);
const type = ref("");
const img_err = ref("");
const shopData = ref({});
//加购物车
const addCart=(i,type)=>{
	shopData.value.addCart(i,type);
}
// 加入购物车成功回调
const handleAddSuccess = (data) => {}
// 加入购物车失败回调
const handleAddError = (error) => {}
// 获取页面宽度
const updatePageWidth = () => {
  const systemInfo = uni.getSystemInfoSync();
  pageWidth.value = systemInfo.windowWidth;
};

const searchWidth = computed(() => {
	return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
});
// 判断是否有上一页
const getPages = () => {
  const pages = getCurrentPages();
  return pages.length > 1;
};
const handleBack = () => {
  if (getPages()) {
    // 如果有上一页，返回上一页
    uni.navigateBack();
  } else {
    // 如果没有上一页，返回首页
    uni.switchTab({
      url: '/pages/index/index',
    });
  }
};
const api_frontproducts=()=>{
	pages.value = pages.value + 1;
	img_err.value = "";
	decs.value = "—— 加载中... ——";
	const params = {
		page:pages.value,
		limit:limits.value
	}
	if(searchtext.value){
		params.keyword = searchtext.value
	}
	return frontproducts(params).then(({data}) => {
		decs.value = '—— 上拉加载更多 ——';
		searchList.value = searchList.value.concat(data.list);
		if(!searchList.value.length){
			img_err.value = "../../static/Empty/search.png"
			decs.value = "抱歉，没有搜到相关商品"
		}else if(data.list.length < 10){
			decs.value = '—— 嗷呜，已经到底啦 ——';
		}
	}).catch(({message}) => {
		img_err.value = "../../static/Empty/err.png"
		decs.value = `—— ${message||'网络异常'} ——`;
	})
}
//跳转统一处理
const JumpType=(item,type)=>{
	if(type == 1){
		uni.navigateTo({
			url:`/shopProDetail/detail/detail?id=${item}`//商品详情
		})
	}else{
		const { jumpUrl,jumpIds,jumpType } = item;
		if(jumpType == 0 || jumpType == 2 || jumpType == 4) return false;
		let url = "";
		if(jumpType == 1){
			uni.navigateTo({
				url:`/shopProDetail/detail/detail?id=${jumpIds}`//商品详情
			})
		}else if(jumpType == 3){
			uni.switchTab({
				url:`/pages/classify/classify`//商品列表
			})
		}
	}	
}
onLoad((options) => {
	const { text } = options;
	if(searchtext){
		searchtext.value = text;
	}
	updatePageWidth();
	api_frontproducts();
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{
	searchList.value = [];
	decs.value = '';
	pages.value = 0;
	api_frontproducts();
	uni.stopPullDownRefresh();
})
onReachBottom(()=>{
	api_frontproducts();
})
</script>

<style lang="scss">
	@import './style.scss';
</style>