339 lines
15 KiB
Vue
339 lines
15 KiB
Vue
<template>
|
||
<view class="main">
|
||
<!-- 头部区域 -->
|
||
<view class="head" :style="{'padding-top':headerHeight+'px'}">
|
||
<view class="head_location">
|
||
<image class="location_img" src="../../static/index/location.png" mode="widthFix"></image>
|
||
<view class="location_title">未获取到定位</view>
|
||
<view class="location_arrow_down"></view>
|
||
</view>
|
||
<view class="head_search">
|
||
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
||
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
|
||
<view class="head_search_border"></view>
|
||
<view class="head_search_btn">搜索</view>
|
||
</view>
|
||
</view>
|
||
<!-- 推荐区域 -->
|
||
<view class="grid_wrap" :style="{'padding-top':95+headerHeight+'px'}">
|
||
<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">
|
||
<view class="grid_wrap_li_l">
|
||
<view class="grid_wrap_li_title">AI学做菜<image class="grid_wrap_li_arrow" src="../../static/index/arrow.png" mode="widthFix"></image></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">
|
||
<view class="grid_wrap_li_l">
|
||
<view class="grid_wrap_li_title">极速退款<image class="grid_wrap_li_arrow" src="../../static/index/arrow.png" mode="widthFix"></image></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 class="scroll_view">
|
||
<scroll-view class="typescoll" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||
<view class="scroll_view_li">
|
||
<view class="scroll_view_banner">
|
||
<image class="scroll_view_bannerimg" src="../../static/Intersect@2x.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="scroll_view_shop">
|
||
<view class="scroll_view_shop_l">
|
||
<image class="scroll_view_shop_no" src="../../static/index/no1.png"></image>
|
||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="scroll_view_shop_r">
|
||
<view class="scroll_view_shop_title">双人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||
<view class="scroll_view_shop_tag">
|
||
<view class="scroll_view_shop_li">半小时送达</view>
|
||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||
</view>
|
||
<view class="scroll_view_shop_bottom">
|
||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="scroll_view_shop_cart">
|
||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="scroll_view_shop">
|
||
<view class="scroll_view_shop_l">
|
||
<image class="scroll_view_shop_no" src="../../static/index/no2.png"></image>
|
||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="scroll_view_shop_r">
|
||
<view class="scroll_view_shop_title">双人餐2<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||
<view class="scroll_view_shop_tag">
|
||
<view class="scroll_view_shop_li">半小时送达</view>
|
||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||
</view>
|
||
<view class="scroll_view_shop_bottom">
|
||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="scroll_view_shop_cart">
|
||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="scroll_view_shop">
|
||
<view class="scroll_view_shop_l">
|
||
<image class="scroll_view_shop_no" src="../../static/index/no3.png"></image>
|
||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="scroll_view_shop_r">
|
||
<view class="scroll_view_shop_title">双人餐3<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||
<view class="scroll_view_shop_tag">
|
||
<view class="scroll_view_shop_li">半小时送达</view>
|
||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||
</view>
|
||
<view class="scroll_view_shop_bottom">
|
||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="scroll_view_shop_cart">
|
||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="scroll_view_li">
|
||
<view class="scroll_view_banner">
|
||
<image class="scroll_view_bannerimg" src="../../static/image@2x.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="scroll_view_shop">
|
||
<view class="scroll_view_shop_l">
|
||
<image class="scroll_view_shop_no" src="../../static/index/no1.png"></image>
|
||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="scroll_view_shop_r">
|
||
<view class="scroll_view_shop_title">单人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||
<view class="scroll_view_shop_tag">
|
||
<view class="scroll_view_shop_li">半小时送达</view>
|
||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||
</view>
|
||
<view class="scroll_view_shop_bottom">
|
||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="scroll_view_shop_cart">
|
||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="scroll_view_shop">
|
||
<view class="scroll_view_shop_l">
|
||
<image class="scroll_view_shop_no" src="../../static/index/no2.png"></image>
|
||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="scroll_view_shop_r">
|
||
<view class="scroll_view_shop_title">单人餐2<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||
<view class="scroll_view_shop_tag">
|
||
<view class="scroll_view_shop_li">半小时送达</view>
|
||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||
</view>
|
||
<view class="scroll_view_shop_bottom">
|
||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="scroll_view_shop_cart">
|
||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="scroll_view_shop">
|
||
<view class="scroll_view_shop_l">
|
||
<image class="scroll_view_shop_no" src="../../static/index/no3.png"></image>
|
||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="scroll_view_shop_r">
|
||
<view class="scroll_view_shop_title">单人餐3<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
||
<view class="scroll_view_shop_tag">
|
||
<view class="scroll_view_shop_li">半小时送达</view>
|
||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
||
</view>
|
||
<view class="scroll_view_shop_bottom">
|
||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="scroll_view_shop_cart">
|
||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 商品区域 -->
|
||
<view class="shop_view">
|
||
<view class="shop_view_ul">
|
||
<view class="shop_view_li shop_view_bcg">
|
||
<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" >
|
||
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad"></image>
|
||
</swiper-item>
|
||
<swiper-item class="shop_view_li_swiper_item" >
|
||
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad"></image>
|
||
</swiper-item>
|
||
<swiper-item class="shop_view_li_swiper_item" >
|
||
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="shop_view_li">
|
||
<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="../../static/Mask.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title">糖醋排骨</view>
|
||
<view class="shop_view_cont_desc">乡下土猪</view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="shop_view_cont_cart">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_li">
|
||
<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="../../static/Mask.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="shop_view_cont_cart">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_ul">
|
||
<view class="shop_view_li">
|
||
<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="../../static/Mask.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="shop_view_cont_cart">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_li">
|
||
<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="../../static/Mask.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="shop_view_cont_cart">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="footer">
|
||
<view class="footer_cont">
|
||
<view class="footer_cont_l">
|
||
<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_btn">去下单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
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 { count,doubleCount } = storeToRefs(counterStore);
|
||
//使用pinia：方法还是从原来的counterStore中解构赋值
|
||
const { clickSType } = counterStore;
|
||
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
|
||
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
|
||
|
||
const classify = ()=>{
|
||
let params ={
|
||
productImgUrl: "http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20240611-c7e219dab5864847bee8c3f0cffbb658.jpg"
|
||
}
|
||
//链式调用
|
||
return clickSType(params).then(({message}) => {
|
||
console.log('message',message);
|
||
|
||
}).catch((err) => {
|
||
const {code,message } = err;
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
|
||
|
||
}
|
||
onLoad((options) => {
|
||
|
||
});
|
||
onShow(() => {
|
||
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
onReachBottom(()=>{
|
||
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |