TakeOutShop/pages/sidedish/sidedish.vue

<template>
  <view class="mian">
	<image class="banner" :src="wishesImage" lazy-load mode="widthFix"></image>
	<view class="class_content">
		<view class="class_scroll" v-if="navList.length">
			<scroll-view
			:enhanced="true"
			:show-scrollbar="false" 
			scroll-x="true" 
			:scroll-with-animation="true"
			:scroll-left="scrollLefter"
			class="class_scroll_ul">
				<view class="class_item"
				v-for="(item,index) in navList"
				:key="index"
				:class="currentTab == index ? 'class_item_active' : '' "
				@click="swichNav(item,index)"
				>{{item.name}}</view>
			</scroll-view>
		</view>
		<view class="content" v-if="navList.length">
			<view class="content_item" v-for="(list,i) in productList" :key="i">
				<view class="content_head">
					<view class="content_head_l">
						<image class="content_head_img" src="../../static/sidedish/flame.png"></image>
						<view class="content_head_title">{{list.title}}</view>
					</view>
					<view class="content_head_btn">
						<image class="content_head_btnimg" src="../../static/sidedish/addCart.png"></image>
					</view>
				</view>
				<view class="content_shop">
					<scroll-view class="content_shop_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
						
						
						<view class="content_shop_item" v-for="(item,index) in list.items" :key="index"  @click="JumpType(item)">
							<view class="content_shop_item_img">
								<!-- <view class="content_shop_item_tag"></view> -->
								<image v-if="index <= 2" class="content_shop_item_tag" :src="`../../static/sidedish/no${index+1}.png`"></image>
								<view v-else class="content_shop_item_tagImg">{{index + 1}}</view>
								<image class="content_shop_item_imgUrl" :src="item.productInfo.image" lazy-load mode="widthFix"></image>
							</view>
							<view class="content_shop_item_title">{{item.productInfo.storeName}}</view>
							<view class="content_shop_item_bottom">
								<view class="content_shop_item_l">
									<view class="content_shop_item_price price">{{item.productInfo.price}}</view>
									<view class="content_shop_market prices">{{item.productInfo.otPrice}}</view>
								</view>
								<view class="content_shop_item_cart" @click.stop="addCart(item)">
									<image class="content_shop_item_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="load_desc">{{decs}}</view>
		</view>
	</view>
	
  </view>
</template>

<script setup>
import { loads } from '@/utils/index.js'
import { computed,ref } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
import { frontindex,frontType,frontHome } from '@/server/api';
const counterStore = useCounterStore(); // 使用 Store
const pageWidth = ref(0);
const navList = ref([]);
const currentItem = ref({});
const currentTab = ref(0);
const productList = ref([]);
const pages = ref(0);
const decs = ref("");
const load = ref(true);
const scrollLefter = ref(0);
const windowWidth = ref(0);
const wishesImage = ref('')
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const { storeId } = storeToRefs(counterStore);
const api_index=()=>{
	loads('', true)
	return frontindex().then(({data}) => {
		wishesImage.value = data.wishesImage
	})
	.then(()=>api_frontType())
	.catch(({message}) => {
		uni.hideLoading();
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
const swichNav = (item,index) => {
	const cur = index;
	const scrollLefters = pageWidth.value / 5;
	currentItem.value = item;
	if (currentTab.value == cur) return false
	currentTab.value = cur;
	scrollLefter.value = (cur - 1) * scrollLefters;
	api_frontHome(true);
}
const api_frontType = () => {
	const storeIds = storeId.value;
	const params = {
		storeId:storeIds,
		limit:20,
		page:1
	}
	return frontType(params).then(({data})=>{
		navList.value = data.list;
		currentItem.value = data.list[0];
		if(data.list.length){
			api_frontHome(false,1)
		}
	})
}
const api_frontHome = (e,i) => {
	if(e){
		productList.value = [];
		decs.value = '';
		pages.value = 0;
	}
	decs.value = "—— 加载中... ——";
	pages.value = pages.value + 1;
	const params = {
		channel:'2',
		cid:currentItem.value.cid,
		page:pages.value,
		limit:10
	}
	if(i == 1){loads('', true)}
	return frontHome(params).then(({data})=>{
		if(i == 1){uni.hideLoading()}
		decs.value = '—— 上拉加载更多 ——'
		if(data.list.length < 10){
			decs.value = '—— 嗷呜，已经到底啦 ——';
		}
		productList.value = productList.value.concat(data.list);
	})
	.catch(({message}) => {
		if(i == 1){uni.hideLoading()}
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
//跳转统一处理
const JumpType=(item,type)=>{
	const { jumpUrl,jumpIds,jumpType } = item;
	if(jumpType == 0 || jumpType == 2 || jumpType == 4) return false;
	console.log('jumpType',jumpType)
	console.log('jumpIds',jumpIds)
	if(jumpType == 1){
		uni.navigateTo({
			url:`/shopProDetail/detail/detail?id=${jumpIds}`//商品详情
		})
	}else if(jumpType == 3){
		uni.switchTab({
			url:`/pages/classify/classify`//商品列表
		})
	}
}
//加购物车
const addCart=(i)=>{
	const { jumpIds,productInfo,specType } = i;
	const specTypes = productInfo.specType;
	if(specTypes){
		console.log('多规格弹窗选类加购');
	}else{
		console.log('单规格直接加购')
	}
}
// 获取页面宽度
const updatePageWidth = () => {
  const systemInfo = uni.getSystemInfoSync();
  pageWidth.value = systemInfo.windowWidth;
};
onLoad((options) => {
	updatePageWidth();
	api_index();
});
onShow(() => {
  
});
onPullDownRefresh(()=>{
	api_frontHome(true);
	uni.stopPullDownRefresh();
})
onReachBottom(()=>{
	api_frontHome(false);
})
</script>

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