289 lines
9.9 KiB
Vue
289 lines
9.9 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"></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>
|
||
<!-- 多规格组件弹框 -->
|
||
<uni-popup ref="multiPopup" type="bottom" @change="changeMulti">
|
||
<view class="multiPopup">
|
||
<view class="shop_open_close" @click="OpenCoupon()">
|
||
<image src="../../static/order/close.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="multishop">
|
||
<image class="multishop_img" src="http://mnse8q.natappfree.cc/crmebimage/public/content/2025/03/06/8b55b251f89942fbaac25f72143be0e15jg9vmswjy.png" mode="widthFix"></image>
|
||
<view class="multishop_text">
|
||
<view class="multishop_title"><text>蔡长青烟熏鸡肉沙拉（调味沙拉）210g</text></view>
|
||
<view class="multishop_price">14.90<text class="multishop_name">5.00</text></view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="multishop_list">
|
||
<view class="multishop_list_title">颜色</view>
|
||
<view class="multishop_list_item">
|
||
<view class="multishop_list_name multishop_list_arver">沙漠色</view>
|
||
<view class="multishop_list_name">黑色</view>
|
||
<view class="multishop_list_name">原色</view>
|
||
<view class="multishop_list_name">白色</view>
|
||
</view>
|
||
</view>
|
||
<view class="multishop_list">
|
||
<view class="multishop_list_title">容量</view>
|
||
<view class="multishop_list_item">
|
||
<view class="multishop_list_name multishop_list_arver">256GB</view>
|
||
<view class="multishop_list_name">512GB</view>
|
||
<view class="multishop_list_name">1TB</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="footer_multi">
|
||
<view class="multishop_amount">
|
||
<view class="multishop_name_amount">选数量</view>
|
||
<view class="multishop_data_edit">
|
||
<view class="multishop_data_edit_img border_l" @click="editAmount(1,item)">
|
||
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="multishop_data_number">22</view>
|
||
<view class="multishop_data_edit_img border_r" @click="editAmount(2,item)">
|
||
<image class="multishop_data_edit_imgurl" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_multi_btn">确定</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</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 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 multiPopup = ref(null);
|
||
const shopList = ref([]);
|
||
const total = ref(0);
|
||
const pages = ref(0);
|
||
const limits = ref(10);
|
||
const decs = ref('');
|
||
const ishomeListLoaded = ref(false);
|
||
//首页楼层接口
|
||
const api_index=()=>{
|
||
ishomeListLoaded.value = false;
|
||
loads('', true)
|
||
return frontindex().then(({data}) => {
|
||
uni.hideLoading();
|
||
homeList.value = data.homeList;
|
||
ishomeListLoaded.value = true;
|
||
multiPopup.value.open();
|
||
})
|
||
.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)=>{
|
||
const { jumpIds,productInfo,specType } = i;
|
||
let specTypes = false;
|
||
if(type){
|
||
specTypes = specType;
|
||
}else{
|
||
specTypes = productInfo.specType;
|
||
}
|
||
api_skudetail(specTypes,jumpIds);
|
||
}
|
||
//购物车规格详情接口 specTypes 多规格true、单规格false
|
||
const api_skudetail=(specTypes,jumpIds)=>{
|
||
loads('', true)
|
||
return skudetail(jumpIds).then(({data}) => {
|
||
if(specTypes){
|
||
|
||
}else{
|
||
const { id,productId } = data.productValue.默认;
|
||
api_cartsave(productId,id);
|
||
}
|
||
})
|
||
.catch(({message}) => {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const api_cartsave = (productId,productAttrUnique) =>{
|
||
const params = {
|
||
cartNum:1,
|
||
productId,
|
||
productAttrUnique
|
||
}
|
||
return cartsave(params).then(({message})=>{
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title:'添加购物车成功',
|
||
icon:'none'
|
||
})
|
||
})
|
||
.catch(({message}) => {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
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> |