238 lines
6.9 KiB
Vue
238 lines
6.9 KiB
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" @click="api_cartbatchSave(list)">
|
||
<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,1)">
|
||
<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>
|
||
<multi
|
||
ref="shopData"
|
||
@add-success="handleAddSuccess"
|
||
@add-error="handleAddError"
|
||
></multi>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { loads } from '@/utils/index.js'
|
||
import multi from '@/components/multi/multi.vue'
|
||
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,cartbatchSave } 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('')
|
||
const shopData = 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 = '—— 上拉加载更多 ——'
|
||
productList.value = productList.value.concat(data.list);
|
||
if(data.list.length < 10){
|
||
decs.value = '—— 嗷呜，已经到底啦 ——';
|
||
}
|
||
})
|
||
.catch(({message}) => {
|
||
if(i == 1){uni.hideLoading()}
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
//一键加购
|
||
const api_cartbatchSave = (list) => {
|
||
//提取 cartNum\productAttrUnique\productId组成新数组
|
||
const request = list.items.map(item => ({
|
||
cartNum:1,
|
||
productAttrUnique:"",
|
||
productId:item.jumpIds
|
||
}));
|
||
const params = {
|
||
business:list.id,//业务编号(cartType=setmeal，传 楼层id)
|
||
cartType: "setmeal",//业务类型(default 默认； setmeal 套餐)
|
||
cartList:request
|
||
}
|
||
loads('', true)
|
||
return cartbatchSave(params).then(({message})=>{
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title:'一键加购成功',
|
||
icon:'none'
|
||
})
|
||
}).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,type)=>{
|
||
shopData.value.addCart(i,type);
|
||
}
|
||
// 加入购物车成功回调
|
||
const handleAddSuccess = (data) => {
|
||
console.log('加入购物车成功回调:', data)
|
||
//可以在这里更新购物车徽章数量等
|
||
}
|
||
// 加入购物车失败回调
|
||
const handleAddError = (error) => {
|
||
console.error('加入购物车失败回调:', error)
|
||
}
|
||
// 获取页面宽度
|
||
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> |