336 lines
13 KiB
Vue
336 lines
13 KiB
Vue
<template>
|
||
<view class="main">
|
||
<!-- 头部区域 -->
|
||
<view class="head" :style="{'padding-top':headerHeight+'px'}">
|
||
<view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view>
|
||
<view class="head_ul">
|
||
<view class="head_l">
|
||
<view class="head_q">购物车</view>
|
||
<view class="head_w">我常买</view>
|
||
</view>
|
||
<view class="head_r">
|
||
<view class="head_li">优惠券(3）</view>
|
||
<view class="head_li">管理</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cart" :style="{'padding-top':85+headerHeight+'px'}">
|
||
<view class="cart_item">
|
||
<view class="cart_selected">
|
||
<view class="cart_selected_false"></view>
|
||
</view>
|
||
<view class="cart_shop">
|
||
<image class="cart_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_shop_cont">
|
||
<view class="cart_title">火锅配菜青菜</view>
|
||
<view class="cart_desc">比加入时下降1.1元</view>
|
||
<view class="cart_bottom">
|
||
<view class="cart_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="cart_counter">
|
||
<view class="cart_counter_btn border_l">
|
||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_counter_center">1</view>
|
||
<view class="cart_counter_btn border_r">
|
||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cart_item">
|
||
<view class="cart_selected">
|
||
<view class="cart_selected_false"></view>
|
||
</view>
|
||
<view class="cart_shop">
|
||
<image class="cart_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_shop_cont">
|
||
<view class="cart_title">火锅配菜青菜</view>
|
||
<view class="cart_desc">比加入时下降1.1元</view>
|
||
<view class="cart_bottom">
|
||
<view class="cart_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
<view class="cart_counter">
|
||
<view class="cart_counter_btn border_l">
|
||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_counter_center">1</view>
|
||
<view class="cart_counter_btn border_r">
|
||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="cart_items">
|
||
<view class="cart_t">
|
||
<view class="cart_selected">
|
||
<view class="cart_selected_false"></view>
|
||
</view>
|
||
<view class="cart_scroll">
|
||
<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||
<view class="cart_scroll_li">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
</view>
|
||
<view class="cart_scroll_li">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
</view>
|
||
<view class="cart_scroll_li">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
</view>
|
||
<view class="cart_scroll_li">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_scroll_title">火锅配菜青菜</view>
|
||
<view class="cart_scroll_price price">43.9<text class="market_name prices">59.9</text></view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<view class="cart_bottom">
|
||
<view class=""></view>
|
||
<view class="cart_counter">
|
||
<view class="cart_counter_btn border_l">
|
||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_counter_center">1</view>
|
||
<view class="cart_counter_btn border_r">
|
||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 失效商品 -->
|
||
<view class="cart_lose">
|
||
<view class="cart_lose_top">
|
||
<view class="cart_lose_top_l">共5款失效商品</view>
|
||
<view class="cart_lose_top_r">一键清空</view>
|
||
</view>
|
||
<view class="cart_lose_bottom">
|
||
<view class="cart_lose_img">
|
||
<view class="cart_lose_bcg">
|
||
<view class="cart_lose_text">商品已下架</view>
|
||
</view>
|
||
<image class="cart_lose_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_lose_ly">
|
||
<view class="cart_lose_title">糖醋排骨</view>
|
||
<view class="cart_lose_desc">商品下架了</view>
|
||
</view>
|
||
</view>
|
||
<view class="cart_lose_bottom">
|
||
<view class="cart_lose_img">
|
||
<view class="cart_lose_bcg">
|
||
<view class="cart_lose_text">商品已下架</view>
|
||
</view>
|
||
<image class="cart_lose_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_lose_ly">
|
||
<view class="cart_lose_title">糖醋排骨</view>
|
||
<view class="cart_lose_desc">商品下架了</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
</view>
|
||
<view class="user_title">
|
||
<text class="user_name">为您推荐</text>
|
||
</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 style="height: 200rpx;"></view>
|
||
<view class="footer">
|
||
<view class="footer_l">
|
||
<view class="footer_selected">
|
||
<view class="footer_selected_false"></view>
|
||
<view class="footer_text">全选</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_r">
|
||
<view class="footer_v">
|
||
<view class="footer_text">合计:</view>
|
||
<view class="footer_price">39.9</view>
|
||
</view>
|
||
<view class="footer_btn" @click="orderConfirm">去下单</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 {statusHeight,headerHeight } = storeToRefs(counterStore);
|
||
const goDetail= ()=>{
|
||
uni.navigateTo({
|
||
url:`/shopProDetail/detail/detail`
|
||
})
|
||
}
|
||
const orderConfirm = ()=>{
|
||
uni.navigateTo({
|
||
url:`/order/orderConfirm/orderConfirm`
|
||
})
|
||
}
|
||
// 使用 uni.onLoad 监听页面加载
|
||
onLoad((options) => {
|
||
|
||
});
|
||
onShow(() => {
|
||
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
onReachBottom(()=>{
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |