292 lines
10 KiB
Vue
292 lines
10 KiB
Vue
<template>
|
||
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
|
||
<view class="mian">
|
||
<!-- 头部区域 -->
|
||
<view class="head" :style="{'padding-top':headerHeight+4+'px'}">
|
||
<view class="head_search" :style="{'width':searchWidth+'px','height':statusHeight+4+'px'}" @click="onSearch">
|
||
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
||
<input class="head_search_input" disabled="true" type="text" placeholder="请输入搜索内容" />
|
||
</view>
|
||
<view class="head_class" v-if="navList.length">
|
||
<scroll-view
|
||
:enhanced="true"
|
||
:show-scrollbar="false"
|
||
scroll-x="true"
|
||
:scroll-with-animation="true"
|
||
:scroll-left="scrollLefter"
|
||
class="head_class_scroll">
|
||
<view
|
||
v-for="(item,index) in navList"
|
||
:key="index"
|
||
class="head_class_item"
|
||
:class="currentTab == index ? 'head_class_item_active' : '' "
|
||
@click="swichNav(item,index)"
|
||
>
|
||
<view class="head_class_title">{{ item.name }}</view>
|
||
<view class="head_class_active" :class="currentTab == index ? 'head_class_active_img':''"></view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="head_class_btn" @click="openCategory()">
|
||
<view class="head_class_arrow_box">
|
||
<image class="head_class_arrow_box_img" src="../../static/down_arrow.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品区域 -->
|
||
<view class="cont_view">
|
||
<view class="head_fixed" :style="{'height':statusHeight+headerHeight+48+'px'}">
|
||
{{productList.length?'下拉刷新...':''}}
|
||
</view>
|
||
<view class="shop_view">
|
||
<view class="shop_view_ul">
|
||
<block v-for="(item,index) in productList" :key="item.id">
|
||
<block v-if="item.isEven">
|
||
<view class="shop_view_li shop_view_bcg" v-if="item.type == 1">
|
||
<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
|
||
<swiper-item class="shop_view_li_swiper_item" v-for="(swiperitem,swiperkey) in item.homeVos[0].items" :key="swiperkey" >
|
||
<image class="shop_view_li_swiper_img_url" :src="swiperitem.imgUrl" mode="widthFix" @load="imageLoad" lazy-load @click="JumpType(swiperitem)"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="shop_view_li" v-if="item.type == 0" @click="JumpType(item.id,1)">
|
||
<view class="shop_view_img">
|
||
<!-- <view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view> -->
|
||
<view class="shop_view_img_u">
|
||
<image class="shop_view_img_url" :src="item.image" mode="widthFix" lazy-load="true"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title"><text>{{item.storeName}}</text></view>
|
||
<view class="shop_view_cont_desc"><text>{{item.storeInfo}}</text></view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text" v-if="item.stock <= 10">仅剩{{item.stock}}份</view>
|
||
<view class="shop_view_cont_tag_text" v-for="(t,g) in item.tagList" :key="g">{{t}}</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">{{item.price}}<text class="market_name prices">{{item.otPrice}}</text></view>
|
||
<view class="shop_view_cont_cart" @click.stop="addCart(item,1)">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
<view class="shop_view_ul">
|
||
<block v-for="(item,index) in productList" :key="item.id">
|
||
<block v-if="!item.isEven">
|
||
<view class="shop_view_li shop_view_bcg" v-if="item.type == 1">
|
||
<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
|
||
<swiper-item class="shop_view_li_swiper_item" v-for="(swiperitem,swiperkey) in item.homeVos[0].items" :key="swiperkey" >
|
||
<image class="shop_view_li_swiper_img_url" :src="swiperitem.imgUrl" mode="widthFix" lazy-load @load="imageLoad" @click="JumpType(swiperitem)"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="shop_view_li" v-if="item.type == 0" @click="JumpType(item.id,1)">
|
||
<view class="shop_view_img">
|
||
<!-- <view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view> -->
|
||
<view class="shop_view_img_u">
|
||
<image class="shop_view_img_url" :src="item.image" mode="widthFix" lazy-load="true"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title"><text>{{item.storeName}}</text></view>
|
||
<view class="shop_view_cont_desc"><text>{{item.storeInfo}}</text></view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text" v-if="item.stock <= 10">仅剩{{item.stock}}份</view>
|
||
<view class="shop_view_cont_tag_text" v-for="(t,g) in item.tagList" :key="g">{{t}}</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">{{item.price}}<text class="market_name prices">{{item.otPrice}}</text></view>
|
||
<view class="shop_view_cont_cart" @click.stop="addCart(item,1)">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="load_desc">{{decs}}</view>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="nav_popup" v-if="show">
|
||
<view :style="{'height':headerHeight+42+'px'}"></view>
|
||
<view class="nav_head">
|
||
<view class="nav_head_class">
|
||
<view class="nav_head_name">全部分类</view>
|
||
<view class="nav_head_class_arrow_box" @click="openCategory()">
|
||
<image class="nav_head_class_arrow_box_img" src="../../static/up_arrow.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="nav_popup_list">
|
||
<view v-for="(item,index) in navList" :key="index" :class="currentTab == index ? 'nav_popup_selected' : '' " @click="swichNav(item,index)" class="nav_popup_item">{{ item.name }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bcg_popup" v-if="show" @click="openCategory()"></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 { frontcategory,frontproducts,skudetail,cartsave } from '@/server/api';
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,ButtonWidth } = storeToRefs(counterStore);
|
||
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 navPopup = ref(null);
|
||
const navShow = ref(false);
|
||
const show = ref(false);
|
||
const shopData = ref({});
|
||
const openCategory = ()=>{
|
||
show.value = !show.value
|
||
}
|
||
|
||
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;
|
||
if(show.value){
|
||
show.value = false;
|
||
}
|
||
api_frontproducts(true);
|
||
}
|
||
const api_frontcategory = () => {
|
||
return frontcategory().then(({data})=>{
|
||
navList.value = data;
|
||
currentItem.value = data[0];
|
||
if(data.length){
|
||
api_frontproducts(false,1)
|
||
}
|
||
})
|
||
}
|
||
const api_frontproducts = (e,i) => {
|
||
if(e){
|
||
productList.value = [];
|
||
decs.value = '';
|
||
pages.value = 0;
|
||
}
|
||
decs.value = "—— 加载中... ——";
|
||
pages.value = pages.value + 1;
|
||
load.value = false;
|
||
const params = {
|
||
cid:currentItem.value.id,
|
||
page:pages.value,
|
||
limit:10
|
||
}
|
||
if(i == 1){loads('', true)}
|
||
return frontproducts(params).then(({data})=>{
|
||
if(i == 1){uni.hideLoading()}
|
||
decs.value = '—— 上拉加载更多 ——'
|
||
data.list.forEach((item,index)=>{
|
||
item.isEven = index % 2 === 0
|
||
})
|
||
productList.value = productList.value.concat(data.list);
|
||
if(productList.value.length < 10){
|
||
decs.value = '—— 嗷呜，已经到底啦 ——';
|
||
}
|
||
})
|
||
.catch(({message}) => {
|
||
if(i == 1){uni.hideLoading()}
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
//跳转统一处理
|
||
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`//商品列表
|
||
})
|
||
}
|
||
}
|
||
}
|
||
//加购物车
|
||
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;
|
||
};
|
||
|
||
const searchWidth = computed(() => {
|
||
return pageWidth.value - ButtonWidth.value - 25;
|
||
});
|
||
|
||
const onSearch=()=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/SearchProduct/SearchProduct`
|
||
})
|
||
}
|
||
//使用 uni.onLoad 监听页面加载
|
||
onLoad((options) => {
|
||
updatePageWidth();
|
||
api_frontcategory();
|
||
});
|
||
onShow(() => {
|
||
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
api_frontproducts(true);
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
onReachBottom(()=>{
|
||
api_frontproducts(false);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |