|
@@ -11,16 +11,16 @@
|
|
|
<!-- 按分类显示 -->
|
|
|
<view class="goods-class-box" v-for="(item,cindex) in cartList" :key="item.goodsTypeNo">
|
|
|
<view class="goods-class-head">
|
|
|
- <view>
|
|
|
- <u-checkbox
|
|
|
- shape="circle"
|
|
|
- v-model="item.checked"
|
|
|
- active-color="#01c9b2"
|
|
|
- :name='item.goodsTypeNo'
|
|
|
- size="40rpx"
|
|
|
- @change="goodsClasChange">
|
|
|
+ <view @click="goodsClasChange(cindex)">
|
|
|
+ <view
|
|
|
+ class="check-button"
|
|
|
+ v-if="isSxGoodAll(item).length||isEdit"
|
|
|
+ :class="item.checked?'checked':'uncheck'">
|
|
|
+ </view>
|
|
|
+ <view v-else class="check-button disabled"></view>
|
|
|
+ <view class="goodClsName">
|
|
|
{{item.name}}
|
|
|
- </u-checkbox>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="des">
|
|
|
<view>商品乐豆合计满<text>{{item.goldLimit}}</text></view>
|
|
@@ -31,24 +31,21 @@
|
|
|
<view class="goods-class-list">
|
|
|
<!-- 商品列表 -->
|
|
|
<view class="goods-item" v-for="(good,index) in item.shoppingCartGoodsList" :key="good.id">
|
|
|
- <view class="checkbox">
|
|
|
- <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 class="checkbox"
|
|
|
+ @click="goodsChange(good,index,cindex)">
|
|
|
+ <view
|
|
|
+ class="check-button"
|
|
|
+ v-if="isSxGood(good)||isEdit"
|
|
|
+ :class="good.checked?'checked':'uncheck'">
|
|
|
+ </view>
|
|
|
+ <view v-else class="check-button disabled"></view>
|
|
|
</view>
|
|
|
<view class="goods-info">
|
|
|
<view class="goods-imgs">
|
|
|
- <view v-if="good.goods.inventoryQty==0||good.goods.state == 0" class="goods-staus">
|
|
|
- <text v-if="good.goods.inventoryQty==0">已售罄</text>
|
|
|
- <text v-if="good.goods.state == 0">已下架</text>
|
|
|
+ <view v-if="good.goods.inventoryQty==0||good.goods.state == 0||good.goods.delFlage == 0" class="goods-staus">
|
|
|
+ <text>已失效</text>
|
|
|
</view>
|
|
|
- <u-image border-radius="12" width="158rpx" height="140rpx" :src="good.goods.homeImage"></u-image>
|
|
|
+ <u-image border-radius="12" width="158rpx" height="140rpx" :src="good.goods.homeImage+'?x-oss-process=image/resize,m_pad,h_252,w_325,color_ffffff'"></u-image>
|
|
|
</view>
|
|
|
<view class="goods-text">
|
|
|
<view class="good-name">{{good.goods.name}}</view>
|
|
@@ -57,9 +54,11 @@
|
|
|
<text>{{good.goods.sellGold}}</text>
|
|
|
<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
|
|
|
</view>
|
|
|
- <view v-if="good.goods.inventoryQty>0">
|
|
|
- <!-- <u-number-box @change="goodsNumsChange(good,cindex)" :index="index+'-'+cindex" :min="1" v-model="good.buyQty"></u-number-box> -->
|
|
|
- <uni-number-box @change="goodsNumsChange(good,cindex)" v-model="good.buyQty" :min="1"></uni-number-box>
|
|
|
+ <view v-if="good.goods.inventoryQty>0&&good.goods.state==1">
|
|
|
+ <uni-numbers-box @change="goodsNumsChange()" :index="cindex+'-'+index" :value="good.buyQty" :min="1"></uni-numbers-box>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <view style="width: 100rpx;text-align: center;">×{{good.buyQty}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -76,16 +75,14 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="cart-submit" v-if="cartList.length>0">
|
|
|
- <view>
|
|
|
- <u-checkbox
|
|
|
- shape="circle"
|
|
|
- name='checkAll'
|
|
|
- size="40rpx"
|
|
|
- active-color="#01c9b2"
|
|
|
- @change="checkAllChange"
|
|
|
- v-model="checkAll">
|
|
|
- {{checkAll?'取消':'全选'}}
|
|
|
- </u-checkbox>
|
|
|
+ <view @click="checkAllChange()">
|
|
|
+ <view
|
|
|
+ class="check-button"
|
|
|
+ :class="checkAll?'checked':'uncheck'">
|
|
|
+ </view>
|
|
|
+ <view class="checkAll">
|
|
|
+ {{checkAll?'取消':'全选'}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view v-if="!isEdit">
|
|
|
<view class="heji">
|
|
@@ -102,9 +99,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
|
|
|
export default {
|
|
|
- components: {uniNumberBox},
|
|
|
data() {
|
|
|
return {
|
|
|
toOrderButton: {
|
|
@@ -115,12 +110,13 @@
|
|
|
},
|
|
|
checkAll: false,// 全选
|
|
|
isEdit: false, // 是否编辑模式
|
|
|
+ cartList: [], // 商品列表
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
// 总数
|
|
|
count() {
|
|
|
- let arr = this.$store.state.vuex_cartList
|
|
|
+ let arr = this.cartList
|
|
|
let count = 0
|
|
|
arr.map(item=>{
|
|
|
count = count + item.shoppingCartGoodsList.length
|
|
@@ -148,14 +144,19 @@
|
|
|
})
|
|
|
return total
|
|
|
},
|
|
|
- // 商品列表
|
|
|
- cartList(){
|
|
|
- return this.$store.state.vuex_cartList
|
|
|
- }
|
|
|
},
|
|
|
- onShow() {
|
|
|
+ onLoad() {
|
|
|
uni.$emit('getCartList')
|
|
|
- this.hasCheckAll()
|
|
|
+ // 刷新列表成功
|
|
|
+ uni.$on('getCarListSuccess',item => {
|
|
|
+ this.cartList = JSON.parse(JSON.stringify(this.$store.state.vuex_cartList))
|
|
|
+ // 默认全选
|
|
|
+ if(!this.isEdit){
|
|
|
+ this.checkAllChange()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
},
|
|
|
methods: {
|
|
|
toBuy(){
|
|
@@ -176,17 +177,6 @@
|
|
|
})
|
|
|
return goods
|
|
|
},
|
|
|
- // 全选 或 取消全选
|
|
|
- checkAllChange(e) {
|
|
|
- let arr = this.cartList
|
|
|
- arr.map(item=>{
|
|
|
- item.checked = e.value
|
|
|
- item.shoppingCartGoodsList.map(goods=>{
|
|
|
- goods.checked = e.value
|
|
|
- })
|
|
|
- })
|
|
|
- arr.splice()
|
|
|
- },
|
|
|
// 判断当前分类下的商品总和是否满足规则
|
|
|
hasZgjindu(item){
|
|
|
let ret = 0
|
|
@@ -197,66 +187,70 @@
|
|
|
console.log(ret , goldLimit)
|
|
|
return !this.isEdit ? ret >= goldLimit : true
|
|
|
},
|
|
|
+ // 设置每个分类下的商品选中状态
|
|
|
+ setClsGoodStatus(item,checked){
|
|
|
+ console.log(checked)
|
|
|
+ item.shoppingCartGoodsList.map(good=>{
|
|
|
+ // 已下架,已删除,已销完的不选
|
|
|
+ if((good.goods.inventoryQty==0||good.goods.state == 0||good.goods.delFlage == 0) && !this.isEdit){
|
|
|
+ good.checked = false
|
|
|
+ }else{
|
|
|
+ good.checked = checked
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 全选 或 取消全选
|
|
|
+ checkAllChange() {
|
|
|
+ let arr = this.cartList
|
|
|
+ arr.map(item=>{
|
|
|
+ item.checked = !this.checkAll
|
|
|
+ this.setClsGoodStatus(item,!this.checkAll)
|
|
|
+ })
|
|
|
+ this.checkAll = !this.checkAll
|
|
|
+ arr.splice()
|
|
|
+ },
|
|
|
// 每个分类的全选
|
|
|
- goodsClasChange(e){
|
|
|
- console.log(e);
|
|
|
- let index = this.cartList.findIndex(item => item.goodsTypeNo == e.name)
|
|
|
+ goodsClasChange(index){
|
|
|
let item = this.cartList[index]
|
|
|
- if(this.hasZgjindu(item)){
|
|
|
- item.checked = e.value
|
|
|
- item.shoppingCartGoodsList.map(goods=>{
|
|
|
- goods.checked = e.value
|
|
|
- })
|
|
|
- // 判断是否全选
|
|
|
- this.hasCheckAll()
|
|
|
- }else{
|
|
|
- setTimeout(()=>{
|
|
|
- item.checked = false
|
|
|
- this.cartList.splice()
|
|
|
- },100)
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '此分类的商品乐豆合计需要满'+item.goldLimit+'乐豆才可以购买'
|
|
|
- })
|
|
|
- }
|
|
|
+ item.checked = !item.checked
|
|
|
+ this.setClsGoodStatus(item,item.checked)
|
|
|
+ // 判断是否全选
|
|
|
+ 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])
|
|
|
- if(this.hasZgjindu(row)){
|
|
|
- row.shoppingCartGoodsList[goodsIndex].checked = e.value
|
|
|
- // 判断当前分类是否全选
|
|
|
- this.clasGoodsHasCheckAll(a[1])
|
|
|
- // 判断是否全选
|
|
|
- this.hasCheckAll()
|
|
|
- }else{
|
|
|
- setTimeout(()=>{
|
|
|
- row.checked = false
|
|
|
- row.shoppingCartGoodsList[goodsIndex].checked = false
|
|
|
- this.cartList.splice()
|
|
|
- },100)
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '此分类的商品乐豆合计需要满'+row.goldLimit+'乐豆才可以购买'
|
|
|
- })
|
|
|
- }
|
|
|
+ goodsChange(good,index,cindex){
|
|
|
+ let goods = this.cartList[cindex] // 当前分类
|
|
|
+ good.checked = !good.checked
|
|
|
+ // 判断当前分类是否全选
|
|
|
+ this.clasGoodsHasCheckAll(goods)
|
|
|
+ },
|
|
|
+ // 判断某个商品是否失效
|
|
|
+ isSxGood(item){
|
|
|
+ return !(item.goods.inventoryQty==0||item.goods.state == 0||item.goods.delFlage == 0) || this.isEdit
|
|
|
+ },
|
|
|
+ // 判断分类下商品是否都是已失效
|
|
|
+ isSxGoodAll(row){
|
|
|
+ return row.shoppingCartGoodsList.filter(item => {
|
|
|
+ return this.isSxGood(item)
|
|
|
+ })
|
|
|
},
|
|
|
// 判断某个分类是否全选
|
|
|
- clasGoodsHasCheckAll(index){
|
|
|
- let row = this.cartList[index]
|
|
|
- let len = row.shoppingCartGoodsList.length
|
|
|
+ clasGoodsHasCheckAll(row){
|
|
|
+ let goods = this.isSxGoodAll(row)
|
|
|
+ let len = goods.length
|
|
|
let clen = 0
|
|
|
- row.shoppingCartGoodsList.map(item=>{
|
|
|
- console.log(item.checked)
|
|
|
+ if(len==0){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ goods.map(item=>{
|
|
|
if(item.checked){
|
|
|
clen = clen + 1
|
|
|
}
|
|
|
})
|
|
|
row.checked = clen == len
|
|
|
this.cartList.splice()
|
|
|
+ // 判断是否全选
|
|
|
+ this.hasCheckAll()
|
|
|
},
|
|
|
// 是否全选
|
|
|
hasCheckAll(){
|
|
@@ -274,8 +268,8 @@
|
|
|
// 编辑购物车
|
|
|
editCart(){
|
|
|
this.isEdit = !this.isEdit
|
|
|
- this.checkAllChange({value:false})
|
|
|
- this.checkAll = false
|
|
|
+ this.checkAll = true
|
|
|
+ this.checkAllChange()
|
|
|
},
|
|
|
// 立即下单
|
|
|
toOrder(){
|
|
@@ -306,22 +300,14 @@
|
|
|
}
|
|
|
},
|
|
|
// 更改商品数量
|
|
|
- goodsNumsChange(e,cindex){
|
|
|
- console.log(e,cindex)
|
|
|
+ goodsNumsChange(val,id){
|
|
|
+ console.log(val,id)
|
|
|
+ let cindex = id.split('-')[0]
|
|
|
+ let index = id.split('-')[1]
|
|
|
let item = this.cartList[cindex]
|
|
|
- console.log(item)
|
|
|
- let row = item.shoppingCartGoodsList.find(k=> k.id == e.id)
|
|
|
- if(this.hasZgjindu(item)){
|
|
|
- uni.$emit("updateGoodsBuyQty",{id:e.id,buyQty:e.buyQty})
|
|
|
- }else{
|
|
|
- item.checked = false
|
|
|
- row.checked = false
|
|
|
- this.cartList.splice()
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '此分类的商品乐豆合计需要满'+item.goldLimit+'乐豆才可以购买'
|
|
|
- })
|
|
|
- }
|
|
|
+ let row = item.shoppingCartGoodsList[index]
|
|
|
+ row.buyQty = val
|
|
|
+ uni.$emit("updateGoodsBuyQty",{id:row.id,buyQty:row.buyQty})
|
|
|
}
|
|
|
},
|
|
|
}
|
|
@@ -355,6 +341,23 @@ page{
|
|
|
margin: 0 10rpx;
|
|
|
}
|
|
|
}
|
|
|
+ .check-button{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ .checked{
|
|
|
+ background: url('/static/checked.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .uncheck{
|
|
|
+ background: url('/static/uncheck.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .disabled{
|
|
|
+ border:2rpx solid #EEEEEE;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ background: #F8F8F8;
|
|
|
+ }
|
|
|
.goods-list{
|
|
|
flex-grow: 1;
|
|
|
overflow: auto;
|
|
@@ -368,6 +371,16 @@ page{
|
|
|
padding: 20upx;
|
|
|
border-bottom: 1px solid #F8F8F8;
|
|
|
justify-content: space-between;
|
|
|
+ > view{
|
|
|
+ &:first-child{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .goodClsName{
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
.des{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
@@ -453,9 +466,12 @@ page{
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
>view{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .checkAll{
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
&:last-child{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
font-size: 26upx;
|
|
|
text{
|
|
|
color: red;
|