225 lines
8.5 KiB
Vue
225 lines
8.5 KiB
Vue
<template>
|
||
<view class="mian">
|
||
<!-- 头部区域 -->
|
||
<view class="head" :style="{'padding-top':headerHeight+4+'px'}">
|
||
<view class="head_search" :style="{'width':searchWidth+'px','height':statusHeight+4+'px'}">
|
||
<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>
|
||
<view class="head_class">
|
||
<scroll-view
|
||
:enhanced="true"
|
||
:show-scrollbar="false"
|
||
scroll-x="true"
|
||
:scroll-with-animation="true"
|
||
:scroll-left="ScrollLeft"
|
||
class="head_class_scroll">
|
||
<view class="head_class_item head_class_item_active">
|
||
<view class="head_class_title">为您推荐</view>
|
||
<view class="head_class_active head_class_active_img"></view>
|
||
</view>
|
||
<view class="head_class_item">
|
||
<view class="head_class_title">特惠专区</view>
|
||
<view class="head_class_active"></view>
|
||
</view>
|
||
<view class="head_class_item">
|
||
<view class="head_class_title">时令春菜</view>
|
||
<view class="head_class_active"></view>
|
||
</view>
|
||
<view class="head_class_item">
|
||
<view class="head_class_title">鸭货卤味</view>
|
||
<view class="head_class_active"></view>
|
||
</view>
|
||
<view class="head_class_item">
|
||
<view class="head_class_title">鸡/鹅肉类</view>
|
||
<view class="head_class_active"></view>
|
||
</view>
|
||
<view class="head_class_item">
|
||
<view class="head_class_title">轻食萨拉</view>
|
||
<view class="head_class_active"></view>
|
||
</view>
|
||
<view class="head_class_item">
|
||
<view class="head_class_title">猪肉类</view>
|
||
<view class="head_class_active"></view>
|
||
</view>
|
||
<view class="head_class_item">
|
||
<view class="head_class_title">羊肉肉类</view>
|
||
<view class="head_class_active"></view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="head_class_btn">
|
||
<view class="head_class_arrow_box">
|
||
<image class="head_class_arrow_box_img" src="../../static/down_arrow.png"></image>
|
||
<!-- <image class="head_class_arrow_box_img" src="../../static/up_arrow.png"></image> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品区域 -->
|
||
<view class="cont_view">
|
||
<view class="head_fixed" :style="{'height':statusHeight+headerHeight+48+'px'}">下拉刷新...</view>
|
||
<view class="shop_view">
|
||
<view class="shop_view_ul">
|
||
<view class="shop_view_li" @click="goDetail()">
|
||
<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" @click="goDetail()">
|
||
<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" @click="goDetail()">
|
||
<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" @click="goDetail()">
|
||
<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" @click="goDetail()">
|
||
<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>
|
||
<view style="height: 200rpx;"></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 {statusHeight,headerHeight,ButtonWidth } = storeToRefs(counterStore);
|
||
const ScrollLeft = ref(0);
|
||
const pageWidth = ref(0);
|
||
// 获取页面宽度
|
||
const updatePageWidth = () => {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
pageWidth.value = systemInfo.windowWidth;
|
||
};
|
||
|
||
const searchWidth = computed(() => {
|
||
return pageWidth.value - ButtonWidth.value - 25;
|
||
});
|
||
const goDetail= ()=>{
|
||
uni.navigateTo({
|
||
url:`/shopProDetail/detail/detail`
|
||
})
|
||
}
|
||
//使用 uni.onLoad 监听页面加载
|
||
onLoad((options) => {
|
||
updatePageWidth();
|
||
});
|
||
onShow(() => {
|
||
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
onReachBottom(()=>{
|
||
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |