fangliaoxiaochengxv/pages/shoppingCart/shoppingCart.vue

<template>
	<view class="shopping-wrapper">
		<view class="goods-box">
			<view class="goods-list" v-if="num>0" >
        <view class=" display-flex-center mb20" v-for="(item, index) in list" :key="index">
          <u-checkbox-group @change="checkedDataChange" v-model="item.checkedData" size="20"
          >
            <u-checkbox :name="item.id" shape="circle" label=" " activeColor="#C29556"></u-checkbox>
          </u-checkbox-group>
          <image class="ml10 mr20" style="width: 176rpx; height: 176rpx; border-radius: 12rpx;flex-shrink: 0;"
                 :src="item.goods_cover" mode="aspectFill">
          </image>
          <view class="list-info">
            <view class="fs14 fw400 color-333">{{item.goods_name}}</view>
            <view class="fw400 color-888 fs12 mt8 mb8">{{item.sku.goods_spec}}</view>
            <view class="display-flex-between">
              <text class="fw400 color-888  fs12 mb8">￥<text class="fw700 color-333  fs16 mb8">{{item.sku.price_selling}}</text></text>
              <u-number-box min="1" :name="item.id"
                            :max=" item.goods_type == 'goods' ? (item.sku.stock_total - item.sku.stock_sales): 1" v-model="item.num"
                            @change="numChange" button-size="24" >
                <view
                    slot="minus"
                    class="minus"
                >
                  <u-icon
                      name="minus"
                      size="12"
                  ></u-icon>
                </view>
                <text
                    slot="input"
                    style="width: 48rpx;text-align: center;line-height: 48rpx;font-size: 24rpx"
                    class="input"
                >{{item.num}}</text>
                <view
                    slot="plus"
                    class="plus"
                >
                  <u-icon
                      name="plus"
                      size="12"
                  ></u-icon>
                </view>
              </u-number-box>
            </view>
          </view>
        </view>
        <u-divider ></u-divider>
        <view style="width: 100%" class="display-flex-end">
          <view class="color-333 fs12 fw400">共{{ num }}件商品&nbsp;&nbsp;总计：<text class=" fs12 fw400">￥</text><text class="fw700 fs20">{{totalPrice2}}</text></view>
        </view>

			</view>
		</view>
		<view class="bottom-box display-flex-between">
			<view class="display-flex-center ">
				<u-checkbox-group @change="allCheckedChange" v-model="allChecked" size="20" >
					<u-checkbox activeColor="#C29556" name="all" shape="circle" label=" "></u-checkbox>
				</u-checkbox-group>
        <view class="color-333 mr5" @click="allCheckedClick">全选</view>
				<view class="color-333" @click="showDel=true">删除</view>
			</view>
			<view class="display-flex-content-center mb5 ">
				<view class="color-333 fs14 fw400 ">总计:<text class="color-556 fs12 fw400">￥</text><text class="fw700 fs20 color-556">{{totalPrice}}</text></view>
				<view class="common-btn" :class="[settleDisabled ? 'common-btn-disabled' : '']" @click="toSettle">结算
				</view>
			</view>
		</view>
		<tabbarCom :zIndex="100" current="3"></tabbarCom>
    <!-- 删除确认 -->
    <u-modal :show="showDel" showCancelButton @cancel="showDel= false" @close="showDel=false" @confirm="delData"
             :asyncClose="true" title="确认删除吗!" ></u-modal>
	</view>

</template>

<script>
	import tabbarCom from "@/components/tabbar/tabbar.vue"
	export default {
		components: {
			tabbarCom
		},
		data() {
			return {
				list: [],
        checkedFlag:false,
				allChecked: [],
				checkValue: [],
				radiovalue1: [],
				isGift: '0',
        num:0,
        showDel:false,
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		computed: {
			totalPrice() {
				const checkedData = this.list.filter(item => item.checkedData.length != 0)
				let result = 0
				checkedData.forEach(item => {
          const num = item.num
					const price = item.sku.price_selling
					result = result + (num * price)
				})
				return result.toFixed(2)
			},
      totalPrice2() {
        let result = 0
        this.num =0;
        this.list.forEach(item => {
          let num = item.num
          const price = item.sku.price_selling
          result = result + (num * price)
          this.num = this.num+num
        })
        return result.toFixed(2)
      },
			settleDisabled() {
				const checkedData = this.list.filter(item => item.checkedData.length != 0)
				const giftData = this.list.find(item => item.checkedData.length != 0 && item.goods_type == 'gift')
				let result = checkedData.length == 0
				if (giftData) {
					this.isGift = '1'
					const {
						limit_money = 0, price_selling = 0
					} = giftData.sku
					result = this.totalPrice < (Number(limit_money) + Number(price_selling))
				} else {
					this.isGift = '0'
				}
				return result
			}
		},
		onLoad() {

		},
		onShow() {
			this.allChecked = []
			this.getData()
		},
		methods: {
			getData() {
				this.$api.getShoppingCartData().then(res => {
					this.list = res.data
					if (!this.list.length) {
						this.allChecked = []
					}
					this.list.forEach(item => {
						item.sourceNum = item.num
						if (!item.checkedData) {
							this.$set(item, 'checkedData', [])
						}
					})
				})
			},
			toSettle() {
				// 去结算
				if (this.settleDisabled) return
				let checkedData = this.list.filter(item => item.checkedData.length)
				let checkedIds = checkedData.map(item => item.id)
				uni.navigateTo({
					url: `/subPages/settleCenter/settleCenter?type=cart&ids=${checkedIds.join('_')}&isGift=${this.isGift}`
				})
				// this.$api.createPrevOrderByCart({ id: checkedIds }).then(res => {
				// 	// uni.setStorageSync('currentCartOrder', checkedData)
				// 	uni.navigateTo({
				// 		url: `/subPages/settleCenter/settleCenter?type=cart&ids=${checkedIds.join('_')}`
				// 	})
				// })
			},
			checkedDataChange() {
				this.$nextTick(() => {
					const notChecked = this.list.filter(item => item.checkedData.length === 0)
					if (notChecked.length === 0) {
						// 全选
						this.allChecked = ['all']
					} else {
						this.allChecked = []
					}
				})
			},
			allCheckedChange(value) {
				if (value.length) {
					this.list.forEach(item => {
						item.checkedData = [item.id]
					})
          this.checkedFlag=true
				} else {
					this.list.forEach(item => {
						item.checkedData = []
					})
          this.checkedFlag=false
				}
			},
      allCheckedClick() {
        if (!this.checkedFlag) {
          this.list.forEach(item => {
            item.checkedData = [item.id]
          })
          this.checkedFlag=true
          this.allChecked=['all']
        } else {
          this.list.forEach(item => {
            item.checkedData = []
          })
          this.allChecked=[]
          this.checkedFlag=false
        }
      },
			delData() {
				// 删除
				let checkedIds = this.list.filter(item => item.checkedData.length)
				checkedIds = checkedIds.map(item => item.id)
				if (checkedIds.length) {
					this.$api.deleteShoppingCart({
						id: checkedIds
					}).then(res => {
            this.showDel = false
						this.getData()
            uni.showToast({
              title: '删除成功'
            })
					})
				}else{
          this.showDel = false
          uni.showToast({
            icon: 'none',
            title: '请选择删除的商品！'
          })
        }
			},
			numChange(item) {
				const {
					name,
					value
				} = item
				const currentItem = this.list.find(cart => cart.id == name)
				const currentIndex = this.list.findIndex(cart => cart.id == name)
				const sourceNum = currentItem.sourceNum
				const params = {
					id: name,
					num: Math.abs(value - sourceNum)
				}
				let currentApi = null
				if (value > sourceNum) {
					// 购物车增加
					currentApi = this.$api.plusShoppingCart
				} else if (value < sourceNum) {
					// 购物车数量减少
					currentApi = this.$api.subShoppingCart
				}
				if (currentApi) {
					currentApi(params).then(res => {
						this.list[currentIndex].num = res.data.num
						this.list[currentIndex].sourceNum = res.data.num
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shopping-wrapper {
		padding-bottom: 178rpx;
		.goods-box {
			margin-top: 20rpx;
      padding: 0 20rpx;
			.goods-list {
				padding: 45rpx 34rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				border-radius: 24rpx;
        .list-info {
          width: 100%;
        }
			}
		}

		.bottom-box {
			background-color: #fff;
			height: calc(169rpx - env(safe-area-inset-bottom));
			position: fixed;
			bottom: calc(env(safe-area-inset-bottom) + 120rpx);
			left: 0;
			right: 0;
			z-index: 9999;
			padding: 10rpx 35rpx;
			.common-btn {
				flex-shrink: 0;
				height: 60rpx;
				line-height: 60rpx;
				width: 150rpx;
				margin-left: 30rpx;
        background-color:#C29556;
        border-color: #C29556;
			}
      .common-btn-disabled {
        background: #EEEFF1;
        color: #1D161F;
        border-color: #EEEFF1;
      }
		}
	}
  .minus {
    width: 48rpx;
    height: 48rpx;
    background: #FFFFFF;
    margin-top: 16rpx;
    border-radius: 8rpx 0rpx 0rpx 8rpx;
    border: 1rpx solid #CCCCCC;
    @include flex;
    justify-content: center;
    align-items: center;
  }

  .input {
    height: 48rpx;
    width: 48rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    border: 1rpx solid #CCCCCC;
    margin-top: 16rpx;
  }

  .plus {
    width: 48rpx;
    height: 48rpx;
    background-color: #FFFFFF;
    border-radius:  0rpx 8rpx 8rpx 0rpx;
    border: 1rpx solid #CCCCCC;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16rpx;
  }


</style>