|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<view class="cart-pages">
|
|
<view class="cart-pages">
|
|
<view class="cart-bar">
|
|
<view class="cart-bar">
|
|
- <view>共25件商品</view>
|
|
|
|
|
|
+ <view>共{{count}}件商品</view>
|
|
<view @click="editCart">
|
|
<view @click="editCart">
|
|
<text class="edit" v-if="!isEdit">管理</text>
|
|
<text class="edit" v-if="!isEdit">管理</text>
|
|
<text class="save" v-else>完成</text>
|
|
<text class="save" v-else>完成</text>
|
|
@@ -9,38 +9,54 @@
|
|
</view>
|
|
</view>
|
|
<view class="goods-list">
|
|
<view class="goods-list">
|
|
<!-- 按分类显示 -->
|
|
<!-- 按分类显示 -->
|
|
- <view class="goods-class-box" v-for="item in 2">
|
|
|
|
|
|
+ <view class="goods-class-box" v-for="(item,cindex) in cartList" :key="item.goodsTypeNo">
|
|
<view class="goods-class-head">
|
|
<view class="goods-class-head">
|
|
<view>
|
|
<view>
|
|
- <u-checkbox shape="circle" active-color="#01c9b2" name='goodsClas' @change="goodsClasChange">
|
|
|
|
- 人气零食
|
|
|
|
|
|
+ <u-checkbox
|
|
|
|
+ shape="circle"
|
|
|
|
+ v-model="item.checked"
|
|
|
|
+ active-color="#01c9b2"
|
|
|
|
+ :name='item.goodsTypeNo'
|
|
|
|
+ size="40rpx"
|
|
|
|
+ @change="goodsClasChange">
|
|
|
|
+ {{item.name}}
|
|
</u-checkbox>
|
|
</u-checkbox>
|
|
</view>
|
|
</view>
|
|
<view class="des">
|
|
<view class="des">
|
|
- <view>满<text>300</text></view>
|
|
|
|
|
|
+ <view>满<text>{{item.goldLimit}}</text></view>
|
|
<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
|
|
<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
|
|
<view>才可购买</view>
|
|
<view>才可购买</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-class-list">
|
|
<view class="goods-class-list">
|
|
<!-- 商品列表 -->
|
|
<!-- 商品列表 -->
|
|
- <view class="goods-item" v-for="(item,index) in 3" :key="index">
|
|
|
|
|
|
+ <view class="goods-item" v-for="(good,index) in item.shoppingCartGoodsList" :key="good.id">
|
|
<view class="checkbox">
|
|
<view class="checkbox">
|
|
- <u-checkbox v-if="index!=1||isEdit" shape="circle" active-color="#01c9b2" name='goodsItem'></u-checkbox>
|
|
|
|
- </view>
|
|
|
|
- <view class="goods-imgs">
|
|
|
|
- <view v-if="index==1" class="goods-staus">已售罄</view>
|
|
|
|
- <u-image border-radius="12" width="158rpx" height="140rpx" src="/static/goods.png"></u-image>
|
|
|
|
|
|
+ <u-checkbox
|
|
|
|
+ v-model="good.checked"
|
|
|
|
+ v-if="good.goods.inventoryQty>0||isEdit"
|
|
|
|
+ shape="circle"
|
|
|
|
+ active-color="#01c9b2"
|
|
|
|
+ size="40rpx"
|
|
|
|
+ :name='good.id+"-"+cindex'
|
|
|
|
+ @change="goodsChange"
|
|
|
|
+ ></u-checkbox>
|
|
</view>
|
|
</view>
|
|
<view class="goods-info">
|
|
<view class="goods-info">
|
|
- <view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
|
|
|
|
- <view class="goods-price">
|
|
|
|
- <view>
|
|
|
|
- <text>50</text>
|
|
|
|
- <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
|
|
|
|
- </view>
|
|
|
|
- <view v-if="index!=1">
|
|
|
|
- <u-number-box :min="1"></u-number-box>
|
|
|
|
|
|
+ <view class="goods-imgs">
|
|
|
|
+ <view v-if="good.goods.inventoryQty==0" class="goods-staus">已售罄</view>
|
|
|
|
+ <u-image border-radius="12" width="158rpx" height="140rpx" :src="good.goods.homeImage"></u-image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="goods-text">
|
|
|
|
+ <view class="good-name">{{good.goods.name}}</view>
|
|
|
|
+ <view class="goods-price">
|
|
|
|
+ <view>
|
|
|
|
+ <text>{{good.goods.sellGold}}</text>
|
|
|
|
+ <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
|
|
|
|
+ </view>
|
|
|
|
+ <view v-if="good.goods.inventoryQty>0">
|
|
|
|
+ <u-number-box :min="1" v-model="good.buyQty"></u-number-box>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -50,17 +66,23 @@
|
|
</view>
|
|
</view>
|
|
<view class="cart-submit">
|
|
<view class="cart-submit">
|
|
<view>
|
|
<view>
|
|
- <u-checkbox shape="circle" name='checkAll' active-color="#01c9b2" @change="checkAllChange" v-model="checkAll">全选</u-checkbox>
|
|
|
|
|
|
+ <u-checkbox
|
|
|
|
+ shape="circle"
|
|
|
|
+ name='checkAll'
|
|
|
|
+ size="40rpx"
|
|
|
|
+ active-color="#01c9b2"
|
|
|
|
+ @change="checkAllChange"
|
|
|
|
+ v-model="checkAll">{{checkAll?'取消':'全选'}}</u-checkbox>
|
|
</view>
|
|
</view>
|
|
<view v-if="!isEdit">
|
|
<view v-if="!isEdit">
|
|
<view class="heji">
|
|
<view class="heji">
|
|
<view>总计:<text>450</text></view>
|
|
<view>总计:<text>450</text></view>
|
|
<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
|
|
<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
|
|
</view>
|
|
</view>
|
|
- <u-button size="mini" :custom-style="toOrderButton" type="error" @click="toOrder()">立即下单</u-button>
|
|
|
|
|
|
+ <u-button size="mini" :custom-style="toOrderButton" type="error" @click="toOrder">立即下单</u-button>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view v-else>
|
|
- <u-button size="mini" :custom-style="toOrderButton" type="error">删除</u-button>
|
|
|
|
|
|
+ <u-button size="mini" :custom-style="toOrderButton" type="error" @click="delGoods">删除</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -70,24 +92,113 @@
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- checkAll: false,// 全选
|
|
|
|
- isEdit: false, // 是否编辑模式
|
|
|
|
toOrderButton: {
|
|
toOrderButton: {
|
|
borderRadius:'100rpx',
|
|
borderRadius:'100rpx',
|
|
fontSize:'30rpx',
|
|
fontSize:'30rpx',
|
|
width: '180rpx',
|
|
width: '180rpx',
|
|
height: '60rpx'
|
|
height: '60rpx'
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ checkAll: false,// 全选
|
|
|
|
+ isEdit: false, // 是否编辑模式
|
|
|
|
+ cartList: [] // 购物车列表
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
+ computed: {
|
|
|
|
+ count() {
|
|
|
|
+ let arr = this.$store.state.vuex_cartList
|
|
|
|
+ let count = 0
|
|
|
|
+ arr.map(item=>{
|
|
|
|
+ count = count + item.shoppingCartGoodsList.length
|
|
|
|
+ if(!item.hasOwnProperty("checked")){
|
|
|
|
+ item.checked = false
|
|
|
|
+ }
|
|
|
|
+ item.shoppingCartGoodsList.map(goods=>{
|
|
|
|
+ if(!goods.hasOwnProperty("checked")){
|
|
|
|
+ goods.checked = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ return count
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ onLoad() {
|
|
|
|
+ this.cartList = this.$store.state.vuex_cartList
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
- // 全选
|
|
|
|
|
|
+ // 获取当前选择的商品
|
|
|
|
+ getCheckGoods(){
|
|
|
|
+ let arr = this.cartList
|
|
|
|
+ let goods = []
|
|
|
|
+ arr.map(item=>{
|
|
|
|
+ item.checked = e.value
|
|
|
|
+ item.shoppingCartGoodsList.map(a =>{
|
|
|
|
+ if(a.checked){
|
|
|
|
+ goods.push(a.id)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ return goods
|
|
|
|
+ },
|
|
|
|
+ // 全选 或 取消全选
|
|
checkAllChange(e) {
|
|
checkAllChange(e) {
|
|
- console.log(e);
|
|
|
|
|
|
+ let arr = this.cartList
|
|
|
|
+ arr.map(item=>{
|
|
|
|
+ item.checked = e.value
|
|
|
|
+ item.shoppingCartGoodsList.map(goods=>{
|
|
|
|
+ goods.checked = e.value
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ arr.splice()
|
|
},
|
|
},
|
|
// 每个分类的全选
|
|
// 每个分类的全选
|
|
goodsClasChange(e){
|
|
goodsClasChange(e){
|
|
console.log(e);
|
|
console.log(e);
|
|
|
|
+ let index = this.cartList.findIndex(item => item.goodsTypeNo == e.name)
|
|
|
|
+ this.cartList[index].checked = e.value
|
|
|
|
+ this.cartList[index].shoppingCartGoodsList.map(goods=>{
|
|
|
|
+ goods.checked = e.value
|
|
|
|
+ })
|
|
|
|
+ // 判断是否全选
|
|
|
|
+ this.hasCheckAll()
|
|
|
|
+ },
|
|
|
|
+ // 商品选择
|
|
|
|
+ goodsChange(e){
|
|
|
|
+ console.log(e)
|
|
|
|
+ let a = e.name.split('-')
|
|
|
|
+ let row = this.cartList[a[1]]
|
|
|
|
+ let goodsIndex = row.shoppingCartGoodsList.findIndex(item => item.id == a[0])
|
|
|
|
+ row.shoppingCartGoodsList[goodsIndex].checked = e.value
|
|
|
|
+ // 判断当前分类是否全选
|
|
|
|
+ this.clasGoodsHasCheckAll(a[1])
|
|
|
|
+ // 判断是否全选
|
|
|
|
+ this.hasCheckAll()
|
|
|
|
+ },
|
|
|
|
+ // 判断某个分类是否全选
|
|
|
|
+ clasGoodsHasCheckAll(index){
|
|
|
|
+ let row = this.cartList[index]
|
|
|
|
+ let len = row.shoppingCartGoodsList.length
|
|
|
|
+ let clen = 0
|
|
|
|
+ row.shoppingCartGoodsList.map(item=>{
|
|
|
|
+ console.log(item.checked)
|
|
|
|
+ if(item.checked){
|
|
|
|
+ clen = clen + 1
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ row.checked = clen == len
|
|
|
|
+ this.cartList.splice()
|
|
|
|
+ },
|
|
|
|
+ // 是否全选
|
|
|
|
+ hasCheckAll(){
|
|
|
|
+ let list = this.cartList
|
|
|
|
+ let len = list.length
|
|
|
|
+ let clen = 0
|
|
|
|
+ list.map(item => {
|
|
|
|
+ if(item.checked){
|
|
|
|
+ clen = clen + 1
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.checkAll = clen == len
|
|
|
|
+ list.splice()
|
|
},
|
|
},
|
|
// 编辑购物车
|
|
// 编辑购物车
|
|
editCart(){
|
|
editCart(){
|
|
@@ -152,37 +263,43 @@ page{
|
|
padding: 20upx;
|
|
padding: 20upx;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- justify-content: space-between;
|
|
|
|
border-bottom: 1px solid #F8F8F8;
|
|
border-bottom: 1px solid #F8F8F8;
|
|
&:last-child{
|
|
&:last-child{
|
|
border: 0;
|
|
border: 0;
|
|
}
|
|
}
|
|
.checkbox{
|
|
.checkbox{
|
|
- width: 80rpx;
|
|
|
|
|
|
+ width: 60rpx;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
- .goods-imgs{
|
|
|
|
- position: relative;
|
|
|
|
- .goods-staus{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- position: absolute;
|
|
|
|
- z-index: 10000;
|
|
|
|
- border-radius: 15rpx;
|
|
|
|
- background: rgba($color: #000000, $alpha: 0.4);
|
|
|
|
- text-align: center;
|
|
|
|
- line-height: 140rpx;
|
|
|
|
- left: 0;
|
|
|
|
- top: 0;
|
|
|
|
- color: #eee;
|
|
|
|
- font-size: 24upx;
|
|
|
|
- font-weight: bold;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
.goods-info{
|
|
.goods-info{
|
|
- padding-left: 20upx;
|
|
|
|
- .good-name{
|
|
|
|
- font-weight: bold;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ .goods-imgs{
|
|
|
|
+ position: relative;
|
|
|
|
+ .goods-staus{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 10000;
|
|
|
|
+ border-radius: 15rpx;
|
|
|
|
+ background: rgba($color: #000000, $alpha: 0.4);
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 140rpx;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 0;
|
|
|
|
+ color: #eee;
|
|
|
|
+ font-size: 24upx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .goods-text{
|
|
|
|
+ padding-left: 20upx;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ .good-name{
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ word-break: break-all;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.goods-price{
|
|
.goods-price{
|