366 lines
11 KiB
Vue
366 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<view>
|
||
<view class="store-list y-p-30">
|
||
<view class="bg-white store-single y-p-30 y-m-b-30 y-radius-30" v-for="(storeItem, storeIndex) in shoppingCart" :key="storeIndex">
|
||
<view @click="storeSelBtn(storeIndex)" class="store-header y-flex y-align-center">
|
||
<view class="sel-btn y-p-t-5">
|
||
<u-icon v-if="(storeItem.isBuySelect && !isEdit) || (storeItem.isDelSelect && isEdit)" name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
|
||
<view v-else class="no-select"></view>
|
||
</view>
|
||
<span class="y-font-size-30 y-m-l-13 y-m-r-10">{{storeItem.shopName}}</span>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
<view class="goods-list y-p-l-20">
|
||
<view class="goods-item y-flex y-p-t-20" v-for="(goodsItem, goodsIndex) in storeItem.orderGoodsList" :key="goodsIndex">
|
||
<view @click="goodsSelBtn(storeIndex, goodsIndex)" class="y-flex y-align-center">
|
||
<view class="sel-btn">
|
||
<u-icon v-if="(goodsItem.isBuySelect && !isEdit) || (goodsItem.isDelSelect && isEdit)" name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
|
||
<view v-else class="no-select"></view>
|
||
</view>
|
||
</view>
|
||
<view class="y-m-l-15">
|
||
<u-image :src="goodsItem.goodsPicture[0]" radius="10rpx" width="162rpx" height="162rpx"></u-image>
|
||
</view>
|
||
<view class="y-m-l-28 y-flex y-flex-1 y-flex-column">
|
||
<view class="y-flex-1">
|
||
<view class="goods-name y-font-size-28"> {{goodsItem.goodsName}} </view>
|
||
<view class="goods-attr y-flex y-m-t-15">
|
||
{{goodsItem.skuMessage}}
|
||
<!-- <u-tag v-if="goodsItem.skuMessage.length > 0" :text="goodsItem.skuMessage.join(';')" plain size="mini" type="warning"></u-tag> -->
|
||
<!-- <u-tag v-else text="默认规格" plain size="mini" type="warning"></u-tag> -->
|
||
</view>
|
||
</view>
|
||
<view class="goods-price y-flex y-align-end y-flex-1">
|
||
<view class="y-flex-1 y-font-size-30 y-weight-bold color-price"> ￥ {{goodsItem.goodsPrice}} </view>
|
||
<view class="flex align-center">
|
||
<image @click="updataNum(storeItem,goodsItem,2)" src="../static/shoppingCar/jian.png" style="width: 54rpx;height: 54rpx;" mode=""></image>
|
||
<view class="padding-lr-sm">{{goodsItem.goodsNum}}</view>
|
||
<image @click="updataNum(storeItem,goodsItem,1)" src="../static/shoppingCar/add.png" style="width: 49rpx;height: 49rpx;" mode=""></image>
|
||
<!-- <u-number-box size="18" v-model="goodsItem.goodsNum" @change="countChange(storeIndex, goodsIndex)"></u-number-box> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 120rpx;"></view>
|
||
</view>
|
||
<view class="y-position-fixed y-bottom-0 y-left-0 y-right-0 y-p-y-20 y-p-x-30 bg-white y-flex">
|
||
<view class="y-flex y-flex-1 y-align-center">
|
||
<view @click="allSelBtn()" class="store-header y-flex y-align-center">
|
||
<view class="sel-btn y-p-t-5">
|
||
<u-icon v-if="allSelState" name="checkmark-circle-fill" color="#04BE02" size="40rpx"></u-icon>
|
||
<view v-else class="no-select"></view>
|
||
</view>
|
||
<span class="y-font-size-28 y-m-l-10">全选</span>
|
||
</view>
|
||
</view>
|
||
<view class="y-flex y-align-center y-font-size-28">
|
||
<view v-if="!isEdit" class="y-font-size-33"> 总计: <span class="color-price y-weight-bold y-m-l-8">￥ {{totalPrice}} </span> </view>
|
||
<view class="y-flex y-m-l-25">
|
||
<u-button v-if="!isEdit" shape="circle" :hairline="false" :customStyle="submitBtnStyle"> 结算( {{totalSelCount}} ) </u-button>
|
||
<u-button v-else shape="circle" :hairline="false" :customStyle="submitBtnStyle"> 删除( {{totalSelCount}} ) </u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
isEdit: false, //是否编辑（购物/编辑）
|
||
shoppingCart: [],//购物车数据
|
||
submitBtnStyle: {
|
||
background: '#FD7026',
|
||
color: '#ffffff',
|
||
border: 'none'
|
||
},//结算、删除按钮的样式
|
||
page: 1,
|
||
limit: 10,
|
||
|
||
}
|
||
},
|
||
computed:{
|
||
//是否已经全部选中
|
||
allSelState(){
|
||
let buyAllSelect = true // 购物全选
|
||
let delAllSelect = true // 编辑全选
|
||
this.shoppingCart.forEach(sitem=>{
|
||
sitem.orderGoodsList.forEach(gitem=>{
|
||
if(!gitem.isBuySelect) buyAllSelect = false;
|
||
if(!gitem.isDelSelect) delAllSelect = false;
|
||
})
|
||
})
|
||
if(!this.isEdit) return buyAllSelect;
|
||
else return delAllSelect;
|
||
},
|
||
//总价格
|
||
totalPrice(){
|
||
let totalPrice = 0
|
||
this.shoppingCart.forEach(sitem=>{
|
||
sitem.orderGoodsList.forEach(gitem=>{
|
||
if(gitem.isBuySelect){
|
||
totalPrice = totalPrice*1 + gitem.goodsPrice*gitem.goodsNum
|
||
}
|
||
})
|
||
})
|
||
return totalPrice
|
||
},
|
||
//当前操作下选中的数量
|
||
totalSelCount(){
|
||
let buyCount = 0 // 购物全选
|
||
let delCount = 0 // 编辑全选
|
||
this.shoppingCart.forEach(sitem=>{
|
||
sitem.orderGoodsList.forEach(gitem=>{
|
||
if(gitem.isBuySelect){
|
||
buyCount = buyCount*1 + gitem.goodsNum
|
||
}
|
||
if(gitem.isDelSelect){
|
||
delCount = delCount*1 + 1
|
||
}
|
||
})
|
||
})
|
||
if(!this.isEdit){
|
||
return buyCount
|
||
} else{
|
||
return delCount
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
// 结算
|
||
goConfirm() {
|
||
if (this.shoppingCart && this.goodsList.orderGoodsList[0].length > 0) {
|
||
uni.navigateTo({
|
||
url: '/pages/diancan/confirmOrder?shopId=' + this.shop.shopId + '&orderType=' + this
|
||
.orderType
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '请先添加商品',
|
||
icon: "none"
|
||
})
|
||
}
|
||
|
||
},
|
||
//获取购物车列表
|
||
getData(){
|
||
let data = {
|
||
// page: 1,
|
||
// limit: 10
|
||
}
|
||
this.$Request.get("/app/order/selectShoppingTrolley", data).then(res => {
|
||
if (res.code == 0&&res.data) {
|
||
res.data.forEach(res=>{
|
||
res.isDelSelect = false
|
||
res.isBuySelect = false
|
||
res.orderGoodsList.forEach(ret=>{
|
||
ret.goodsPicture = ret.goodsPicture.split(',')
|
||
ret.isDelSelect = false
|
||
ret.isBuySelect = false
|
||
})
|
||
})
|
||
|
||
if(this.page == 1) {
|
||
this.shoppingCart = res.data
|
||
} else {
|
||
this.shoppingCart = [...this.shoppingCart, ...res.data]
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//商家的选中与否
|
||
storeSelBtn(storeIndex){
|
||
if(!this.isEdit){ //购物
|
||
this.shoppingCart[storeIndex].isBuySelect = !this.shoppingCart[storeIndex].isBuySelect
|
||
this.shoppingCart[storeIndex].orderGoodsList.forEach(item=>{
|
||
item.isBuySelect = this.shoppingCart[storeIndex].isBuySelect
|
||
})
|
||
}else{//编辑
|
||
this.shoppingCart[storeIndex].isDelSelect = !this.shoppingCart[storeIndex].isDelSelect
|
||
this.shoppingCart[storeIndex].orderGoodsList.forEach(item=>{
|
||
item.isDelSelect = this.shoppingCart[storeIndex].isDelSelect
|
||
})
|
||
}
|
||
},
|
||
//商品的选中与否
|
||
goodsSelBtn(storeIndex, goodsIndex){
|
||
if(!this.isEdit){ //购物
|
||
this.shoppingCart[storeIndex].orderGoodsList[goodsIndex].isBuySelect = !this.shoppingCart[storeIndex].orderGoodsList[goodsIndex].isBuySelect
|
||
let allIsSel = true //是否已经全部选中
|
||
this.shoppingCart[storeIndex].orderGoodsList.forEach(item=>{
|
||
if(!item.isBuySelect){
|
||
allIsSel = false
|
||
}
|
||
})
|
||
this.shoppingCart[storeIndex].isBuySelect = allIsSel
|
||
}else{//编辑
|
||
this.shoppingCart[storeIndex].orderGoodsList[goodsIndex].isDelSelect = !this.shoppingCart[storeIndex].orderGoodsList[goodsIndex].isDelSelect
|
||
let allIsSel = true //是否已经全部选中
|
||
this.shoppingCart[storeIndex].orderGoodsList.forEach(item=>{
|
||
if(!item.isDelSelect){
|
||
allIsSel = false
|
||
}
|
||
})
|
||
this.shoppingCart[storeIndex].isDelSelect = allIsSel
|
||
}
|
||
},
|
||
//全选
|
||
allSelBtn(){
|
||
let toState = !this.allSelState
|
||
if(!this.isEdit){//购物
|
||
this.shoppingCart.forEach(sitem=>{
|
||
sitem.isBuySelect = toState
|
||
sitem.orderGoodsList.forEach(gitem=>{
|
||
gitem.isBuySelect = toState
|
||
})
|
||
})
|
||
}else{//编辑
|
||
this.shoppingCart.forEach(sitem=>{
|
||
sitem.isDelSelect = toState
|
||
sitem.orderGoodsList.forEach(gitem=>{
|
||
gitem.isDelSelect = toState
|
||
})
|
||
})
|
||
}
|
||
},
|
||
//商品的数量增减
|
||
countChange(storeIndex, goodsIndex){
|
||
//请求后台改变购物车商品的数量。。。storeIndex, goodsIndex
|
||
},
|
||
updataNum(storeItem,goodsItem,type) {
|
||
let data = {
|
||
orderGoodsId: goodsItem.id,
|
||
type: type,
|
||
num: 1,
|
||
shopId: storeItem.shopId
|
||
}
|
||
this.$Request.get("/app/order/updateGoodsNum", data).then(res => {
|
||
if (res.code == 0) {
|
||
|
||
this.getData()
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.w-90{
|
||
width: 90rpx;
|
||
}
|
||
.sel-btn{
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.no-select{
|
||
width: 39rpx;
|
||
height: 39rpx;
|
||
border-radius: 50%;
|
||
border: 1px solid rgb(235, 236, 238);
|
||
}
|
||
|
||
.y-position-fixed{
|
||
position: fixed;
|
||
}
|
||
.y-top-0{
|
||
top: 0;
|
||
}
|
||
.y-bottom-0{
|
||
bottom: 0;
|
||
}
|
||
.y-left-0{
|
||
left: 0;
|
||
}
|
||
.y-right-0{
|
||
right: 0;
|
||
}
|
||
.y-flex-column{
|
||
flex-direction: column !important;
|
||
}
|
||
.y-w-100{
|
||
width: 100%;
|
||
}
|
||
/*系统状态栏高度*/
|
||
.y-system-height{
|
||
height: var(--status-bar-height);
|
||
}
|
||
/* 圆角大小例：radius-1 ,radius-10... */
|
||
@for $i from 1 through 50 {
|
||
.y-radius-#{$i} { border-radius: $i*1rpx;}
|
||
/* margin */
|
||
.y-m-t-#{$i} { margin-top: $i*1rpx; }
|
||
.y-m-b-#{$i} { margin-bottom: $i*1rpx; }
|
||
.y-m-l-#{$i} { margin-left: $i*1rpx; }
|
||
.y-m-r-#{$i} { margin-right: $i*1rpx; }
|
||
.y-m-x-#{$i} { margin-left: $i*1rpx; margin-right: $i*1rpx; }
|
||
.y-m-y-#{$i} { margin-top: $i*1rpx; margin-bottom: $i*1rpx; }
|
||
.y-m-#{$i} { margin: $i*1rpx; }
|
||
/* padding */
|
||
.y-p-t-#{$i} { padding-top: $i*1rpx; }
|
||
.y-p-b-#{$i} { padding-bottom: $i*1rpx; }
|
||
.y-p-l-#{$i} { padding-left: $i*1rpx; }
|
||
.y-p-r-#{$i} { padding-right: $i*1rpx; }
|
||
.y-p-x-#{$i} { padding-left: $i*1rpx; padding-right: $i*1rpx; }
|
||
.y-p-y-#{$i} { padding-top: $i*1rpx; padding-bottom: $i*1rpx; }
|
||
.y-p-#{$i} { padding: $i*1rpx; }
|
||
/* font-size */
|
||
.y-font-size-#{$i} { font-size: $i*1rpx; }
|
||
}
|
||
/* 自体加粗例：weight-100 ,weight-150 ,weight-600... */
|
||
@for $i from 1 through 9 {
|
||
.y-weight-#{$i*100} { font-weight: $i*100;}
|
||
.y-weight-#{$i*100 + 50} { font-weight: 50 + $i*100;}
|
||
}
|
||
.y-justify-end{
|
||
justify-content: flex-end;
|
||
}
|
||
.y-align-center{
|
||
align-items: center;
|
||
}
|
||
.y-align-start{
|
||
align-items: flex-start;
|
||
}
|
||
.y-align-end{
|
||
align-items: flex-end;
|
||
}
|
||
.y-flex{
|
||
display: flex;
|
||
}
|
||
.y-flex-column{
|
||
flex-direction: column;
|
||
}
|
||
.y-flex-1{
|
||
flex: 1;
|
||
}
|
||
.y-justify-start{
|
||
justify-content: flex-start;
|
||
}
|
||
.y-justify-end{
|
||
justify-content: flex-end;
|
||
}
|
||
.y-justify-around{
|
||
justify-content: space-around;
|
||
}
|
||
.y-justify-between{
|
||
justify-content: space-between;
|
||
}
|
||
.y-weight-bold{
|
||
font-weight: bold;
|
||
}
|
||
.y-border-bottom {
|
||
border-bottom: 1rpx solid rgba($color: #707070, $alpha: 0.12);
|
||
}
|
||
.color-price{
|
||
color: #C8222A;
|
||
}
|
||
</style>
|