503 lines
18 KiB
Vue
503 lines
18 KiB
Vue
<template>
|
||
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
|
||
<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" @click="OpenCoupon()">优惠券(3）</view>
|
||
<view class="head_li" :class="showEdit?'head_edit':''" @click="edit">{{showEdit?'退出管理':'管理'}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cart" :style="{'padding-top':85+headerHeight+'px'}">
|
||
<view style="height: 10rpx;"></view>
|
||
<uni-swipe-action>
|
||
<uni-swipe-action-item v-for="(item,index) in cartList" :key="index" :right-options="options" @click="removeCart(1,item)">
|
||
<view class="cart_item" v-if="item.type == 1">
|
||
<view class="cart_selected" @click="checkedShop(item)">
|
||
<view :class="item.isSelected === '1'?'cart_selected_true':'cart_selected_false'">
|
||
<image v-if="item.isSelected" src="../../static/selected.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="cart_shop">
|
||
<image class="cart_shop_img" :src="item.imgUrl" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_shop_cont">
|
||
<view class="cart_title">{{item.title}}</view>
|
||
<view class="cart_desc">{{item.desc}}</view>
|
||
<view class="cart_bottom">
|
||
<view class="cart_price price">{{item.price}}<text class="market_name prices">59.9</text></view>
|
||
<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
|
||
<view class="cart_remove">删除</view>
|
||
</view>
|
||
<view class="cart_counter" v-else>
|
||
<view class="cart_counter_btn border_l" @click="editAmount(1,item)">
|
||
<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">{{item.amount}}</view>
|
||
<view class="cart_counter_btn border_r" @click="editAmount(2,item)">
|
||
<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" v-if="item.type == 2">
|
||
<view class="cart_t">
|
||
<view class="cart_selected">
|
||
<view :class="item.isSelected?'cart_selected_true':'cart_selected_false'">
|
||
<image v-if="item.isSelected" src="../../static/selected.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="cart_view_scroll">
|
||
<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" v-for="(i,index) in item.list">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" :src="i.imgUrl" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_scroll_title">{{i.title}}</view>
|
||
<view class="cart_scroll_price price">{{i.price}}<text class="market_name prices">59.9</text></view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
<view class="cart_bottom">
|
||
<view class=""></view>
|
||
<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
|
||
<view class="cart_remove">删除</view>
|
||
</view>
|
||
<view class="cart_counter" v-else>
|
||
<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>
|
||
</uni-swipe-action-item>
|
||
</uni-swipe-action>
|
||
<!-- 失效商品 -->
|
||
<!-- <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" v-if="!showEdit">
|
||
<text class="user_name">为您推荐</text>
|
||
</view>
|
||
<!-- 商品区域 -->
|
||
<view class="shop_view" v-if="!showEdit">
|
||
<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" @click="allChecked">
|
||
<view :class="allCheckedShow?'footer_selected_true':'footer_selected_false'">
|
||
<image v-if="allCheckedShow" src="../../static/selected.png"></image>
|
||
</view>
|
||
<view class="footer_text">全选</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_r">
|
||
<view class="footer_edit" v-if="showEdit">
|
||
<view class="footer_edit_li footer_edit_li_border" @click="removeCart(2)">一键清空</view>
|
||
<view class="footer_edit_li" @click="removeCart(3)">删除</view>
|
||
</view>
|
||
<block v-else>
|
||
<view class="footer_v">
|
||
<view class="footer_text">合计:</view>
|
||
<view class="footer_price">{{totalPrice}}</view>
|
||
</view>
|
||
<view class="footer_btn" :class="!totalPrice?'opy':''" @click="orderConfirm">去下单</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="couponPopup" type="bottom" @change="changeCoupon">
|
||
<view class="shop_open shop_open_bcg">
|
||
<view class="shop_open_title">优惠券<view class="shop_open_close" @click="OpenCoupon()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
|
||
<view class="shop_open_desc">可使用券(2)</view>
|
||
<view class="coupon_cont">
|
||
<view class="coupon_item">
|
||
<view class="coupon_item_l">
|
||
<view class="coupon_item_absolute"></view>
|
||
<view class="coupon_item_v">
|
||
<view class="coupon_item_price">5</view>
|
||
<view class="coupon_item_desc">满39可用</view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon_item_border"></view>
|
||
<view class="coupon_item_r">
|
||
<view class="coupon_item_r_l">
|
||
<view class="coupon_item_name">新人限时券</view>
|
||
<view class="coupon_item_time">今日23:59到期</view>
|
||
</view>
|
||
<view class="coupon_item_r_r">领取</view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon_item">
|
||
<view class="coupon_item_l">
|
||
<view class="coupon_item_absolute"></view>
|
||
<view class="coupon_item_v">
|
||
<view class="coupon_item_price">10</view>
|
||
<view class="coupon_item_desc">满59可用</view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon_item_border"></view>
|
||
<view class="coupon_item_r">
|
||
<view class="coupon_item_r_l">
|
||
<view class="coupon_item_name">新人限时券</view>
|
||
<view class="coupon_item_time">今日23:59到期</view>
|
||
</view>
|
||
<view class="coupon_item_r_r">领取</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref,computed } 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 couponPopup = ref(null);
|
||
const couponShow = ref(false);
|
||
const show = ref(false);
|
||
const showEdit = ref(false);
|
||
const cartList = ref([]);
|
||
const allCheckedShow = ref(false)
|
||
const options = ref([
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#FD4955'
|
||
}
|
||
}
|
||
]);
|
||
const OpenCoupon =() =>{
|
||
couponShow.value ? couponPopup.value.close():couponPopup.value.open()
|
||
};
|
||
const changeCoupon = (e)=>{
|
||
couponShow.value = e.show;
|
||
show.value = e.show;
|
||
};
|
||
const edit = (e)=>{
|
||
showEdit.value ? showEdit.value = false:showEdit.value = true;
|
||
};
|
||
const onClick = (e) => {
|
||
console.log('点击删除', e);
|
||
};
|
||
const goDetail= ()=>{
|
||
uni.navigateTo({
|
||
url:`/shopProDetail/detail/detail`
|
||
})
|
||
}
|
||
const orderConfirm = ()=>{
|
||
uni.navigateTo({
|
||
url:`/order/orderConfirm/orderConfirm`
|
||
})
|
||
}
|
||
const cartData =()=>{
|
||
let data = [{
|
||
id:'001',
|
||
imgUrl:'../../static/Mask.png',
|
||
title:'新疆大盘鸡',
|
||
desc:'比加入时下降1.1元',
|
||
amount:1,
|
||
price:'1',
|
||
type:'1',
|
||
isSelected:'1'
|
||
},{
|
||
id:'002',
|
||
imgUrl:'../../static/Mask.png',
|
||
title:'萝卜片炒腊肉',
|
||
desc:'比加入时下降4.5元',
|
||
amount:1,
|
||
price:'1',
|
||
type:'1',
|
||
isSelected:'1'
|
||
},{
|
||
id:'003',
|
||
imgUrl:'../../static/Mask.png',
|
||
title:'盘龙鳝',
|
||
desc:'比加入时下降1.5元',
|
||
amount:5,
|
||
price:'68',
|
||
type:'1',
|
||
isSelected:'0'
|
||
}]
|
||
|
||
cartList.value = data;
|
||
//更改全选状态
|
||
const allSelected = cartList.value.every(item => item.isSelected !== undefined && item.isSelected === '1');
|
||
if(allSelected){
|
||
allCheckedShow.value = true;
|
||
}else{
|
||
allCheckedShow.value = false;
|
||
}
|
||
};
|
||
//编辑购物车商品数量
|
||
const editAmount=(type,data)=>{
|
||
//减数量
|
||
if(data.amount == 1 && type == 1) return false;
|
||
cartList.value.forEach(item=>{
|
||
if(data.id == item.id){
|
||
item.amount = type == 1 ? item.amount - 1 : item.amount + 1;
|
||
}
|
||
})
|
||
};
|
||
//全选
|
||
const allChecked=()=>{
|
||
if(allCheckedShow.value){
|
||
allCheckedShow.value = false;
|
||
cartList.value.forEach((item,index)=>{
|
||
item.isSelected = '0'
|
||
})
|
||
}else{
|
||
allCheckedShow.value = true;
|
||
cartList.value.forEach((item,index)=>{
|
||
item.isSelected = '1'
|
||
})
|
||
}
|
||
};
|
||
//商品选中未选中
|
||
const checkedShop=(e)=>{
|
||
//更改单商品选中状态
|
||
cartList.value.forEach((item,index)=>{
|
||
if(e.id == item.id){
|
||
item.isSelected = item.isSelected === '1' ? '0' : '1'
|
||
}
|
||
})
|
||
//更改全选状态
|
||
const allSelected = cartList.value.every(item => item.isSelected !== undefined && item.isSelected === '1');
|
||
if(allSelected){
|
||
allCheckedShow.value = true;
|
||
}else{
|
||
allCheckedShow.value = false;
|
||
}
|
||
};
|
||
//计算总价
|
||
const totalPrice = computed(() => {
|
||
//过滤出选中的对象
|
||
const selectedItems = cartList.value.filter(item => item.isSelected === '1');
|
||
//计算总价（考虑数量）
|
||
return selectedItems.reduce((sum, item) => sum + item.price * item.amount, 0);
|
||
});
|
||
//选中多少数件
|
||
const selectedAmount = computed(() => {
|
||
//过滤出选中的对象
|
||
const selectedItems = cartList.value.filter(item => item.isSelected === '1');
|
||
return selectedItems.length
|
||
});
|
||
const removeCart=(type,item)=>{
|
||
let content = '';
|
||
if(type == 1){
|
||
content = "确定要删除此商品吗?"
|
||
}else if(type == 2){
|
||
content = "确定要清空购物车所有商品吗?"
|
||
}else{
|
||
content = `确定要删除购物车选中的${selectedAmount.value}种商品吗?`
|
||
}
|
||
uni.showModal({
|
||
content:content,
|
||
confirmText:type == 2?'清空':'删除',
|
||
confirmColor:'#F14D48',
|
||
success: ({confirm}) => {
|
||
if (confirm) {
|
||
if(type == 1){
|
||
console.log('单商品删除!');
|
||
}else if(type == 2){
|
||
console.log('清空购物车!');
|
||
cartList.value = []
|
||
}else{
|
||
console.log('选中商品删除!');
|
||
}
|
||
}
|
||
}
|
||
})
|
||
};
|
||
//使用 uni.onLoad 监听页面加载
|
||
onLoad((options) => {
|
||
cartData();
|
||
});
|
||
onShow(() => {
|
||
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
onReachBottom(()=>{
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
.uni-swipe{
|
||
margin: 0rpx 20rpx 0rpx 20rpx !important;
|
||
margin-bottom: 20rpx !important;
|
||
border-radius: 25rpx !important;
|
||
background-color: #fff !important;
|
||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05) !important;
|
||
}
|
||
</style> |