1在components组件下创建一个叫shopCar的vue文件
2引入import commonCar from '@/components/shopCar/shopCar.vue'
<template>
<view class="common-car">
<view class="empty-shop-car" v-if="isEmpty">
<!-- <image src="../../static/empty_shop_car.png" class="empty-shop-car-image" mode=""></image> -->
<text>当前您的购物车是空的</text>
<view class="empty-shop-car-btn">
<text>去逛逛</text>
</view>
</view>
<view class="shop-car" v-else>
<view class="shop-car-header">
<text @tap="cut">{{isCut?'编辑':'完成'}}</text>
</view>
<view class="store-box">
<!-- <view class="store-header">
<image src="../../static/select.png" v-if="itemq.checked == 2" class="checked-image" mode="" @tap="storeCheck(indexq,itemq.checked)"></image>
<image src="../../static/not_select.png" v-else class="checked-image" mode="" @tap="storeCheck(indexq,itemq.checked)">
</image>
<text>{{itemq.name}}</text>
<image src="../../static/youjiantou1.png" class="label" mode=""></image>
</view> -->
<view class="goodsInfo" v-for="(itemw,indexw) in datas" :key="indexw">
<image src="../../static/select.png" v-if="itemw.checked == 2" class="checked-image" mode=""
@tap="goodsCheck(indexw,itemw.checked)"></image>
<image src="../../static/not_select.png" v-else class="checked-image" mode=""
@tap="goodsCheck(indexw,itemw.checked)"></image>
<view class="goodsInfo-right">
<image :src="itemw.img" class="goods-image" mode=""></image>
<view class="goodsInfo-box">
<text class="goods-name">{{itemw.title}}</text>
<!-- <text class="spe">规格：{{itemw.remark}}</text> -->
<view class="goods-box">
<text class="goods-price">¥{{itemw.price}}</text>
<view class="goods-num-box">
<view class="goods-image" @tap="sub(indexq,indexw,itemw.number)">
<text>-</text>
</view>
<view class="goods-num">
<text>{{itemw.number}}</text>
</view>
<view class="goods-image" @tap="add(indexq,indexw,itemw.number)">
<text>+</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="statistics-box">
<view class="statistics">
<view class="statistics-left" v-if="statisticsIndex" @tap="allCheck">
<image src="../../static/select.png" class="checked-image" mode="">
</image>
<text>全选</text>
</view>
<view class="statistics-left" v-else @tap="allCheck">
<image src="../../static/not_select.png" class="checked-image" mode="">
</image>
<text>全选</text>
</view>
<view class="statistics-right" v-if="isCut" @tap="accounts">
<text>总计：</text><text class="text-color">¥{{total}}</text>
<view class="btn">
<text>结算</text>
</view>
</view>
<view class="statistics-right" v-else @tap="delect">
<view class="btn">
<text>删除</text>
</view>
</view>
</view>
<!-- <view class="gap"></view> -->
</view>
</view>
<slot></slot>
</view>
</template>
<script>
export default {
name: "commonCar",
data() {
return {
isEmpty: true,
iPhoneX: false,
datas: {},
statisticsIndex: false,
total: 0,
isCut: true
}
},
props: {
list: {
type: [Object, Array],
default: {}
}
},
created() {
this.iPhoneX = uni.getStorageSync('iPhoneX')
if (this.list.length == 0) {
this.isEmpty = true
} else {
this.datas = this.list
this.isEmpty = false
}
},
methods: {
//商品选择
goodsCheck(goodsIndex, goodsChecked) {
console.log(goodsIndex, goodsChecked)
if (goodsChecked == 1) {
this.datas[goodsIndex].checked = 2
} else {
this.datas[goodsIndex].checked = 1
}
//判断是否该店铺全选
// let storeChecked = true
// this.datas.map((item,index)=>{
// if(item.checked == 1){
// storeChecked = false
// }
// })
// if(storeChecked == false){
// this.datas[storeIndex].checked = 1
// }else{
// this.datas[storeIndex].checked = 2
// }
//判断是否全选
let statisticsIndex = true
this.datas.find((item, index) => {
if (item.checked == 1) {
statisticsIndex = false
}
})
if (statisticsIndex == false) {
this.statisticsIndex = false
} else {
this.statisticsIndex = true
}
this.statistics()
},
//店铺选择
// storeCheck(storeIndex,storeCheck){
// if(storeCheck == 1){
// this.datas[storeIndex].checked = 2
// this.datas[storeIndex].goods.find((item,index)=>{
// item.checked = 2
// })
// }else{
// this.datas[storeIndex].checked = 1
// this.datas[storeIndex].goods.find((item,index)=>{
// item.checked = 1
// })
// }
// //判断是否全选
// let statisticsIndex = true
// this.datas.find((item,index)=>{
// if(item.checked == 1){
// statisticsIndex = false
// }
// })
// if(statisticsIndex == false){
// this.statisticsIndex = false
// }else{
// this.statisticsIndex = true
// }
// this.statistics()
// },
//减少
sub(storeIndex, goodsIndex, goodsnum) {
if (goodsnum == 1) {
return
} else {
this.datas[goodsIndex].number--
}
this.statistics()
},
//增加
add(storeIndex, goodsIndex, goodsnum) {
this.datas[goodsIndex].number++
this.statistics()
},
//全选
allCheck() {
if (this.statisticsIndex) {
this.datas.find((item, index) => {
item.checked = 1
// item.find((itemq,indexq)=>{
// itemq.checked = 1
// })
})
this.statisticsIndex = false
} else {
this.datas.find((item, index) => {
item.checked = 2
// item.find((itemq,indexq)=>{
// itemq.checked = 2
// })
})
this.statisticsIndex = true
}
this.statistics()
},
//统计
statistics() {
let total = 0
this.datas.find((item, index) => {
if (item.checked == 2) {
total = total + item.price * item.number
}
})
this.total = total.toFixed(2)
console.log(this.total)
this.$emit('total', this.total);
},
cut() {
this.isCut = !this.isCut
this.statisticsIndex = true
this.allCheck()
},
// judgeSelect() {
// let checkedItems = this.datas.filter(item => item.checked === 2);
// return checkedItems;
// },
accounts() {
let checkedItems = this.datas.filter(item => item.checked === 2);
if (checkedItems.length > 0) {
this.statistics()
this.$emit('accounts', checkedItems,this.total);
// console.log(this.total)
// this.$emit('total', this.total);
} else {
uni.showToast({
title: '您当前未选择任何商品，结算失败',
icon: 'none'
});
}
},
delect() {
let checkedItems = this.datas.filter(item => item.checked === 2);
if (checkedItems.length > 0) {
this.$emit('delect', checkedItems);
} else {
uni.showToast({
title: '您当前未选择任何商品，删除失败',
icon: 'none'
});
}
}
// judgeSelect(){
// let judge = false
// let checkedItems = this.datas.filter(item => item.checked === 2);
// if (checkedItems.length > 0) {
// // 执行结算逻辑，例如跳转到结算页面或提交订单等操作
// this.$emit('settle', checkedItems);
// } else {
// uni.showToast({
// title: '请至少选择一件商品进行结算',
// icon: 'none'
// });
// }
// return judge
// }
}
}
</script>
<style lang="scss" scoped>
.common-car {
width: 750rpx;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background: #F5F5F5;
}
.empty-shop-car {
width: 750rpx;
min-height: 680rpx;
display: flex;
flex-direction: column;
align-items: center;
.empty-shop-car-image {
width: 340rpx;
height: 278rpx;
margin-top: 102rpx;
}
text {
margin-top: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: #666666;
}
.empty-shop-car-btn {
width: 240rpx;
height: 90rpx;
background: #FF5E5E;
border-radius: 200rpx;
margin-top: 40rpx;
text-align: center;
line-height: 90rpx;
font-size: 30rpx;
font-weight: 400;
color: #313133;
}
}
.shop-car {
width: 750rpx;
display: flex;
flex-direction: column;
align-items: center;
.shop-car-header {
width: 690rpx;
height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
text {
font-size: 28rpx;
font-weight: 400;
color: #313133;
}
}
.store-box {
width: 750rpx;
// margin-bottom: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #FFFFFF;
border-bottom: 2rpx solid #EDEDED;
.store-header {
width: 690rpx;
height: 78rpx;
padding: 0 30rpx;
display: flex;
flex-direction: row;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #313133;
.checked-image {
width: 36rpx;
height: 36rpx;
}
text {
font-size: 28rpx;
font-weight: 400;
color: #313133;
margin-left: 20rpx;
}
.label {
width: 14rpx;
height: 24rpx;
margin-left: 10rpx;
margin-top: 5rpx;
}
}
.goodsInfo {
width: 690rpx;
height: 246rpx;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 2rpx solid #EDEDED;
&:nth-last-child(1) {
border: none;
}
.checked-image {
width: 36rpx;
height: 36rpx;
}
.goodsInfo-right {
width: 634rpx;
height: 246rpx;
margin-left: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
.goods-image {
width: 180rpx;
height: 180rpx;
}
.goodsInfo-box {
width: 428rpx;
margin-left: 24rpx;
display: flex;
flex-direction: column;
align-items: center;
.goods-name {
width: 428rpx;
font-size: 26rpx;
font-weight: 400;
color: #313133;
}
.spe {
width: 428rpx;
margin-top: 10rpx;
font-size: 24rpx;
font-weight: 400;
color: #919298;
}
.goods-box {
width: 428rpx;
margin-top: 18rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.goods-price {
font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: #FE6363;
}
.goods-num-box {
width: 168rpx;
height: 46rpx;
display: flex;
flex-direction: row;
align-items: center;
.goods-image {
width: 46rpx;
height: 44rpx;
text-align: center;
line-height: 44rpx;
border: 1rpx solid #CFCFCF;
font-size: 38rpx;
}
.goods-num {
width: 76rpx;
height: 44rpx;
text-align: center;
line-height: 44rpx;
font-size: 33rpx;
font-weight: 400;
color: #666666;
border-top: 1px solid #CFCFCF;
border-bottom: 1px solid #CFCFCF;
}
}
}
}
}
}
}
.statistics-box {
width: 750rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #FFFFFF;
position: fixed;
bottom: 0;
.statistics {
width: 720rpx;
padding: 0 0 0 30rpx;
height: 98rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.statistics-left {
width: 120rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
image {
width: 36rpx;
height: 36rpx;
}
text {
font-size: 30rpx;
font-weight: 400;
color: #313133;
}
}
.statistics-right {
width: 600rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
.btn {
width: 218rpx;
height: 98rpx;
background: #FF5E5E;
text-align: center;
line-height: 98rpx;
font-size: 30rpx;
font-weight: 400;
color: #fff;
margin-left: 40rpx;
}
text {
font-size: 30rpx;
font-weight: 400;
color: #fff;
}
.text-color {
color: rgba(242, 18, 18, 1);
}
}
}
.gap {
width: 750rpx;
height: 40rpx;
}
}
}
</style><template>
<view class="box">
<view class="custom-title-box">
<view class="status-bar-height-box" :style="{height: statusBarHeight + 'px'}"></view>
<view class="title-box" :style="{height: titleHeight + 'px'}">
<!-- <uni-icons type="back" class="left" size="30" color="#fff" @click="back()"></uni-icons> -->
购物车
</view>
</view>
<view class="empty-box" :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
<view class="shop-car">
<commonCar :list="goodsProducts" @delect="delect" @accounts="accounts">
<text>123456</text>
</commonCar>
<!-- <image src="" mode=""></image> -->
</view>
</view>
</template>
<script>
import commonCar from '@/components/shopCar/shopCar.vue'
export default {
data() {
return {
statusBarHeight: 0, // 状态栏高度
titleHeight: 0, // 标题栏高度
num: 0,
selAll: true,
sellist: [],
flag: "",
value: '1',
goodsProducts: [
// name: '铲屎官的店',
// checked: 1,
{
img: 'https://cdn.pixabay.com/photo/2017/03/24/08/27/cat-2170495_1280.jpg',
title: '天然无谷天然猫粮1.5kg',
price: '128.80',
number: 1,
checked: 1
}, {
img: 'https://cdn.pixabay.com/photo/2017/03/24/08/27/cat-2170495_1280.jpg',
title: '天然无谷天然猫粮1.5kg',
price: '116.80',
number: 1,
checked: 1
}, {
// name: '铲屎官的店',
// checked: 1,
img: 'https://cdn.pixabay.com/photo/2017/03/24/08/27/cat-2170495_1280.jpg',
title: '天然无谷天然猫粮1.5kg',
price: '129.80',
number: 1,
checked: 1
}, {
img: 'https://cdn.pixabay.com/photo/2017/03/24/08/27/cat-2170495_1280.jpg',
title: '天然无谷天然猫粮1.5kg',
price: '156.80',
number: 1,
checked: 1
}
],
}
},
onLoad() {
},
onReady() {
uni.getSystemInfo({
success: res => {
this.statusBarHeight = res.statusBarHeight
}
})
const btnInfo = uni.getMenuButtonBoundingClientRect();
this.titleHeight = (btnInfo.top - this.statusBarHeight) * 2 + btnInfo.height
},
components: {
commonCar
},
methods: {
back() {
uni.navigateBack()
},
delect(e) {
console.log(e);
},
accounts(e, e1) {
console.log('total:', e1);
console.log('checkedItems:', e);
// console.log('extra:', extra);
}
},
}
</script>
<style lang="scss">
.custom-title-box {
width: 750rpx;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #FF5E5E;
.title-box {
// background-color: red;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
color: #FFFFFF;
>image {
width: 346rpx;
height: 96rpx;
}
.left {
width: 60rpx;
height: 60rpx;
position: absolute;
left: 24rpx;
bottom: 10rpx;
}
}
}
.box {
width: 750rpx;
// height: 1624rpx;
background-color: #F8F8F8;
position: relative;
}
.top {
width: 750rpx;
height: 50rpx;
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
padding-top: 24rpx;
.item {
width: 98rpx;
height: 50rpx;
background: #FFFFFF;
border-radius: 100rpx 100rpx 100rpx 100rpx;
opacity: 1;
border: 1rpx solid rgba(51, 51, 51, 0.5);
font-size: 24rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: rgba(51, 51, 51, 0.5);
text-align: center;
line-height: 50rpx;
}
}
.wrap {
margin-top: 24rpx;
background-color: #FFFFFF;
display: flex;
align-items: center;
.center {
width: 646rpx;
height: 140rpx;
background: #FFFFFF;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
display: flex;
position: relative;
>image {
width: 140rpx;
height: 140rpx;
}
.detail {
width: 506rpx;
.name {
margin-left: 14rpx;
margin-top: 24rpx;
width: 400rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: #3D3D3D;
white-space: nowrap;
/* 防止文本换行 */
overflow: hidden;
/* 隐藏超出容器的部分内容 */
text-overflow: ellipsis;
/* 在溢出的位置显示省略号 */
}
.price {
margin-left: 14rpx;
margin-top: 24rpx;
width: 200rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: #FE6363;
}
.sel {
position: absolute;
bottom: 20rpx;
right: 20rpx;
}
}
}
}
.buttom {
width: 750rpx;
height: 200rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
position: fixed;
bottom: 0;
// position: relative;
.text-one {
position: absolute;
top: 76rpx;
left: 40rpx;
width: 88rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: #333333;
}
.text-two {
position: absolute;
top: 72rpx;
left: 128rpx;
height: 68rpx;
font-size: 34rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 600;
color: #FE6363;
}
.btn {
width: 326rpx;
height: 88rpx;
background: #9263FE;
opacity: 1;
border: 2rpx solid #9263FE;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: 400;
color: #FFFFFF;
text-align: center;
line-height: 88rpx;
position: absolute;
right: 24rpx;
top: 32rpx;
}
}
.shop-car {
width: 750rpx;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background: #F5F5F5;
}
</style>第一个页面为子组件页面 第二个为父组件
844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
