207 lines
7.2 KiB
Vue
207 lines
7.2 KiB
Vue
<template>
|
||
<view class="main">
|
||
<!-- 头部区域 -->
|
||
<view class="head" :style="{'padding-top':headerHeight+'px'}" >
|
||
<view class="head_location" :class="storeName?'head_location_active':''" @click="location()"><text class="location_title">{{storeName||locationName}}</text></view>
|
||
<view class="head_search" :style="{'height':statusHeight+8+'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 class="head_search_btn">搜索</view>
|
||
</view>
|
||
</view>
|
||
<!-- 推荐区域 -->
|
||
<view class="grid_top">
|
||
<view class="head_fixed" :style="{'height':statusHeight+headerHeight+47+'px'}">下拉刷新...</view>
|
||
<view class="grid_wrap">
|
||
<view class="grid_wrap_l">
|
||
<image class="grid_wrap_live" src=""></image>
|
||
<view class="grid_wrap_live_title"><image class="grid_wrap_live_img" src="../../static/index/v.png"></image>直播</view>
|
||
</view>
|
||
<view class="grid_wrap_r">
|
||
<view class="grid_wrap_li" @click="goAi()">
|
||
<view class="grid_wrap_li_l">
|
||
<view class="grid_wrap_li_title"><text>学做菜</text></view>
|
||
<view class="grid_wrap_li_desc">简单又快捷</view>
|
||
</view>
|
||
<image class="grid_wrap_li_r" src="../../static/index/AI.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="grid_wrap_li grid_wrap_top" @click="goAssList()">
|
||
<view class="grid_wrap_li_l">
|
||
<view class="grid_wrap_li_title"><text>极速退款</text></view>
|
||
<view class="grid_wrap_li_desc">食材有问题？</view>
|
||
</view>
|
||
<image class="grid_wrap_li_r" src="../../static/index/refund_img.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 滚动区域 -->
|
||
<view class="scroll_view">
|
||
<scroll-view class="typescoll" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||
<view class="scroll_view_li" v-for="(item,index) in homeList" :key="index">
|
||
<view class="scroll_view_banner" @click="JumpType(item)">
|
||
<image class="scroll_view_bannerimg" :src="item.imgUrl" mode="widthFix" lazy-load="true"></image>
|
||
</view>
|
||
<view class="scroll_view_shop" v-for="(i,dex) in item.items" :key="dex" @click="JumpType(i)">
|
||
<view class="scroll_view_shop_l">
|
||
<image class="scroll_view_shop_no" :src="`../../static/index/no${dex+1}.png`"></image>
|
||
<image class="scroll_view_shop_img" :src="i.imgUrl" mode="widthFix" lazy-load="true"></image>
|
||
</view>
|
||
<view class="scroll_view_shop_r">
|
||
<view class="scroll_view_shop_title">{{i.name}}<text class="scroll_view_shop_desc">{{i.title}}</text></view>
|
||
<view class="scroll_view_shop_tag" v-if="i.productInfo.tagList.length">
|
||
<view class="scroll_view_shop_li" v-for="(t,g) in i.productInfo.tagList" :key="g">{{t}}</view>
|
||
</view>
|
||
<view class="scroll_view_shop_bottom">
|
||
<view class="scroll_view_shop_price price">{{i.productInfo.price}}<text class="market_name prices">{{i.productInfo.otPrice}}</text></view>
|
||
<view class="scroll_view_shop_cart" @click.stop="addCart(i)">
|
||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 商品区域 -->
|
||
<recomGoods v-if="ishomeListLoaded" :apiType="1" @add-message="addCart"></recomGoods>
|
||
<view style="height: 200rpx;"></view>
|
||
<!-- <view class="footer">
|
||
<view class="footer_cont">
|
||
<view class="footer_cont_l" @click="goCarts()">
|
||
<view class="footer_cont_cart">
|
||
<view class="footer_cont_num">3</view>
|
||
<image class="footer_cont_img" src="../../static/index/cart_img.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="footer_cont_m">
|
||
<view class="footer_cont_m_price">43.9</view>
|
||
<view class="footer_cont_m_desc">已优惠20元</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_cont_btn" @click="orderConfirm">去下单</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 获取定位失败小组件提示 -->
|
||
<locationOpen></locationOpen>
|
||
<multi
|
||
ref="shopData"
|
||
@add-success="handleAddSuccess"
|
||
@add-error="handleAddError"
|
||
></multi>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { loads } from '@/utils/index.js'
|
||
import { frontindex,frontproduct,frontstorelist,skudetail,cartsave } from '@/server/api';
|
||
import recomGoods from '@/components/recomGoods/recomGoods.vue';
|
||
import multi from '@/components/multi/multi.vue'
|
||
import locationOpen from '@/components/locationOpen/locationOpen.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"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,nikeName,key,token,phone,uid,storeName,storeId,latitude,longitude,locationName,locationShow } = storeToRefs(counterStore);
|
||
const homeList = ref([]);
|
||
const shopList = ref([]);
|
||
const total = ref(0);
|
||
const pages = ref(0);
|
||
const limits = ref(10);
|
||
const decs = ref('');
|
||
const ishomeListLoaded = ref(false);
|
||
const shopData = ref({});
|
||
//首页楼层接口
|
||
const api_index=()=>{
|
||
ishomeListLoaded.value = false;
|
||
loads('', true)
|
||
return frontindex().then(({data}) => {
|
||
uni.hideLoading();
|
||
homeList.value = data.homeList;
|
||
ishomeListLoaded.value = true;
|
||
})
|
||
.catch(({message}) => {
|
||
uni.hideLoading();
|
||
ishomeListLoaded.value = true;
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
//跳转统一处理
|
||
const JumpType=(item)=>{
|
||
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 orderConfirm=()=>{
|
||
uni.navigateTo({
|
||
url:`/order/orderConfirm/orderConfirm`
|
||
})
|
||
}
|
||
const goAi=()=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/aiserve/aiserve`
|
||
})
|
||
};
|
||
const goAssList=()=>{
|
||
uni.navigateTo({
|
||
url:`/order/assList/assList`
|
||
})
|
||
}
|
||
const goCarts=()=>{
|
||
uni.switchTab({
|
||
url:`/pages/cart/cart`
|
||
})
|
||
}
|
||
const location=()=>{
|
||
if(locationShow.value) return false;
|
||
uni.navigateTo({
|
||
url:`/userserve/location/location`
|
||
})
|
||
}
|
||
const onSearch=()=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/SearchProduct/SearchProduct`
|
||
})
|
||
}
|
||
onLoad((options) => {
|
||
api_index();
|
||
});
|
||
onShow(() => {});
|
||
onPullDownRefresh(()=>{
|
||
api_index();
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
onReachBottom(()=>{});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |