681 lines
16 KiB
Vue
681 lines
16 KiB
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" @click="goIndex">
|
|
<text style="color: #fff;">去逛逛</text>
|
|
</view>
|
|
</view>
|
|
<view class="shop-car" v-else>
|
|
<view class="shop-car-header">
|
|
<text @tap="cut">{{isCut?'管理':'完成'}}</text>
|
|
</view>
|
|
<view class="store-box" v-for="(itemq,indexq) in datas" :key="indexq">
|
|
<view class="store-header">
|
|
<image src="../../static/selects.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 class="shop_title">{{itemq.name}}</text>
|
|
<image src="../../static/youjiantou1.png" class="label" mode=""></image>
|
|
</view>
|
|
<view class="goodsInfo" v-for="(itemw,indexw) in itemq.goods" :key="indexw">
|
|
|
|
<image src="../../static/selects.png" v-if="itemw.checked == 2" class="checked-image" mode=""
|
|
@tap="goodsCheck(indexq,indexw,itemw.checked)"></image>
|
|
<image src="../../static/not_select.png" v-else class="checked-image" mode=""
|
|
@tap="goodsCheck(indexq,indexw,itemw.checked)"></image>
|
|
<view class="goodsInfo-right">
|
|
<image :src="itemw.img" class="goods-image"></image>
|
|
<view class="goodsInfo-box">
|
|
<view class="goods-mid">
|
|
<view class="goods-name">{{itemw.title}}</view>
|
|
<view class="goods-price">
|
|
<text>¥{{itemw.price/100}}</text>
|
|
<text class="goods-original">{{itemw.originalPrice/100}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- <text class="spe">规格：{{itemw.remark}}</text> -->
|
|
<view class="goods-box">
|
|
<view class="goods-num-box">
|
|
<view class="goods-image" @tap="sub(indexq,indexw,itemw.number,itemw.goods_id)">
|
|
<text :class="itemw.number == 1? 'goods-ban':''">-</text>
|
|
</view>
|
|
<view class="goods-num">
|
|
<text>{{itemw.number}}</text>
|
|
</view>
|
|
<view class="goods-image" @tap="add(indexq,indexw,itemw.number,itemw.goods_id)">
|
|
<text>+</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="icon" v-if="itemw.is_kill == -1000">
|
|
<u-icon width="60rpx" height="60rpx" name="https://img.agrimedia.cn/chwl/v2/seckill-icon.png"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <u-gap height="100rpx"></u-gap> -->
|
|
</view>
|
|
<view class="statistics-box">
|
|
<view class="statistics">
|
|
<view class="statistics-left" v-if="statisticsIndex" @tap="allCheck">
|
|
<image src="../../static/selects.png" class="checked-image" mode="">
|
|
</image>
|
|
<text class="all-check">全选</text>
|
|
</view>
|
|
<view class="statistics-left" v-else @tap="allCheck">
|
|
<image src="../../static/not_select.png" class="checked-image" mode="">
|
|
</image>
|
|
<text class="all-check">全选</text>
|
|
</view>
|
|
<view class="statistics-right" v-if="isCut" @tap="accounts">
|
|
<view class="">
|
|
<text class="all">总计：</text>
|
|
<text class="text-icon">¥</text>
|
|
<text class="text-color">{{total/100}}</text>
|
|
</view>
|
|
<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,
|
|
statisticsIndex: false,
|
|
total: 0,
|
|
isCut: true,
|
|
// datas:[]
|
|
}
|
|
},
|
|
props: {
|
|
list: {
|
|
type: [Object, Array],
|
|
default: {}
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
isEmpty() {
|
|
return this.list.length == 0
|
|
},
|
|
datas: {
|
|
get() {
|
|
return this.list
|
|
},
|
|
set(e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
// console.log(this.list,'this list')
|
|
// if (this.list.length == 0) {
|
|
// this.isEmpty = true
|
|
// } else {
|
|
// this.datas = this.list
|
|
// this.isEmpty = false
|
|
// }
|
|
// console.log(this.list,'this list')
|
|
// console.log(this.datas,'this datas')
|
|
},
|
|
methods: {
|
|
goIndex(){
|
|
this.$store.commit('tabbar/setCurrent',0)
|
|
uni.reLaunch({
|
|
url:"/pages/index/index"
|
|
})
|
|
},
|
|
//商品选择
|
|
goodsCheck(storeIndex, goodsIndex, goodsChecked) {
|
|
if (goodsChecked == 1) {
|
|
this.datas[storeIndex].goods[goodsIndex].checked = 2
|
|
} else {
|
|
this.datas[storeIndex].goods[goodsIndex].checked = 1
|
|
}
|
|
//判断是否该店铺全选
|
|
let storeChecked = true
|
|
this.datas[storeIndex].goods.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,goods_id) {
|
|
if (goodsnum == 1) {
|
|
return
|
|
} else {
|
|
this.$store.dispatch('api/goodsAddCart',{
|
|
goods_id:goods_id,
|
|
num:(goodsnum-1)
|
|
}).then(res => {
|
|
|
|
this.datas[storeIndex].goods[goodsIndex].number--
|
|
})
|
|
}
|
|
|
|
this.statistics()
|
|
},
|
|
//增加
|
|
add(storeIndex, goodsIndex, goodsnum,goods_id) {
|
|
this.$store.dispatch('api/goodsAddCart',{
|
|
goods_id:goods_id,
|
|
num:(goodsnum+1)
|
|
}).then(res => {
|
|
this.datas[storeIndex].goods[goodsIndex].number++
|
|
})
|
|
this.statistics()
|
|
},
|
|
//全选
|
|
allCheck() {
|
|
if (this.statisticsIndex) {
|
|
this.datas.find((item, index) => {
|
|
item.checked = 1
|
|
item.goods.find((itemq, indexq) => {
|
|
itemq.checked = 1
|
|
})
|
|
})
|
|
this.statisticsIndex = false
|
|
} else {
|
|
this.datas.find((item, index) => {
|
|
item.checked = 2
|
|
item.goods.find((itemq, indexq) => {
|
|
itemq.checked = 2
|
|
})
|
|
})
|
|
this.statisticsIndex = true
|
|
}
|
|
this.statistics()
|
|
},
|
|
//统计
|
|
statistics() {
|
|
let total = 0
|
|
console.log(this.datas, 'this data')
|
|
this.datas.find((item, index) => {
|
|
item.goods.find((itemq, indexq) => {
|
|
if (itemq.checked == 2) {
|
|
total = total + itemq.price * itemq.number
|
|
}
|
|
})
|
|
})
|
|
this.total = total.toFixed(2)
|
|
},
|
|
cut() {
|
|
this.isCut = !this.isCut
|
|
this.statisticsIndex = true
|
|
this.allCheck()
|
|
},
|
|
accounts() {
|
|
let judge = this.judgeSelect()
|
|
if (judge) {
|
|
this.$emit('accounts', this.datas)
|
|
} else {
|
|
uni.showToast({
|
|
title: '您当前未选择任何商品,结算失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
delect() {
|
|
let judge = this.judgeSelect()
|
|
if (judge) {
|
|
|
|
let ids = this.checkedIds()
|
|
this.$store.dispatch('api/delCartGoods',{
|
|
cart_ids:ids
|
|
}).then(res => {
|
|
this.$emit('delect', this.datas)
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '您当前未选择任何商品,删除失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
},
|
|
checkedIds(){
|
|
let arr = []
|
|
this.datas.find((item, index) => {
|
|
item.goods.find((itemq, indexq) => {
|
|
if (itemq.checked == 2) {
|
|
arr.push(itemq.cart_id)
|
|
}
|
|
})
|
|
})
|
|
return arr
|
|
},
|
|
judgeSelect() {
|
|
let judge = false
|
|
this.datas.find((item, index) => {
|
|
item.goods.find((itemq, indexq) => {
|
|
if (itemq.checked == 2) {
|
|
judge = true
|
|
}
|
|
})
|
|
})
|
|
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: #FF4D02;
|
|
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-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #666666;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.store-box {
|
|
width: 690rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
.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;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #313133;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.label {
|
|
width: 14rpx;
|
|
height: 24rpx;
|
|
margin-left: 10rpx;
|
|
margin-top: 5rpx;
|
|
}
|
|
.shop_title {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
line-height: 44rpx;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
}
|
|
|
|
.goodsInfo {
|
|
width: 100%;
|
|
height: 246rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0rpx 20rpx;
|
|
&:nth-last-child(1) {
|
|
border: none;
|
|
}
|
|
|
|
.checked-image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 10rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.goodsInfo-right {
|
|
width: 634rpx;
|
|
height: 246rpx;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.icon{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0rpx;
|
|
top: 40rpx;
|
|
}
|
|
.goods-image {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 20rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.goodsInfo-box {
|
|
width: 428rpx;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.goods-name {
|
|
// width: 428rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #313133;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
letter-spacing: 2rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.goods-price {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FF2A30;
|
|
line-height: 40rpx;
|
|
letter-spacing: 2rpx;
|
|
.goods-original {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 34rpx;
|
|
padding-left: 12rpx;
|
|
text-decoration:line-through;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
margin-left: 10rpx;
|
|
.goods-num-box {
|
|
width: 168rpx;
|
|
height: 46rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
|
|
.goods-image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
background: #F6F6F6;
|
|
border-radius: 10rpx;
|
|
line-height: 38rpx;
|
|
text-align: center;
|
|
text {
|
|
color: #666666;
|
|
}
|
|
.goods-ban {
|
|
color: #C7C7C7;
|
|
}
|
|
}
|
|
|
|
.goods-num {
|
|
width: 76rpx;
|
|
height: 44rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
line-height: 40rpx;
|
|
letter-spacing: 2rpx;
|
|
text-align: center;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.statistics-box {
|
|
width: 750rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #FFFFFF;
|
|
position: fixed;
|
|
bottom: 82rpx;
|
|
|
|
.statistics {
|
|
width: 720rpx;
|
|
padding: 0 0 0 30rpx;
|
|
height: 132rpx;
|
|
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;
|
|
}
|
|
|
|
.all-check {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #666666;
|
|
line-height: 40rpx;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
}
|
|
|
|
.statistics-right {
|
|
width: 600rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.all {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #666666;
|
|
line-height: 40rpx;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
.btn {
|
|
width: 176rpx;
|
|
height: 88rpx;
|
|
background: #FF7700;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
line-height: 88rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
}
|
|
.text-icon {
|
|
font-size: 22rpx;
|
|
color: rgba(242, 18, 18, 1);
|
|
}
|
|
.text-color {
|
|
color: rgba(242, 18, 18, 1);
|
|
font-size: 44rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gap {
|
|
width: 750rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|