yshop-pro-uniapp/pages/shoppingCart/shoppingCart.vue

<template>
  <layout>
    <uv-navbar
      :fixed="false"
      title="购物车"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <view class="shopping-manage">
      <div
        class="shopping-manage-item"
        @tap="changeMange"
      >
        {{ isManage ? '取消' : '管理' }}
      </div>
    </view>
    <uv-checkbox-group
      v-model="shoppingSelect"
      @change="handleShoppingSelect"
    >
      <space
        direction="vertical"
        fill
      >
        <card class="shopping-checkbox">
          <view
            v-for="(item, index) in shoppingData"
            class="shopping-checkbox-cell"
          >
            <uv-checkbox
              :name="item.id"
              activeColor="#ee0a24"
            />
            <goods
              link
              list
              interval
              showAction
              model
              :price="item.productInfo.price"
              :data="item.productInfo"
            >
              <template #action>
                <uv-number-box
                  v-model="item.cartNum"
                  step="1"
                  @change="handleChangeNum($event, item)"
                />
              </template>
            </goods>
          </view>
        </card>
      </space>
    </uv-checkbox-group>
    <view class="action-bar screen">
      <view class="action-info">
        <view class="action-checkbox">
          <uv-checkbox-group>
            <uv-checkbox
              name="all"
              :checked="shoppingSelectAll"
              activeColor="#ee0a24"
              @change="handleShoppingSelectAll"
            >
              全选
            </uv-checkbox>
          </uv-checkbox-group>
        </view>
        <view class="action-total">

          总计：￥{{ totalPrice }}
        </view>
      </view>
      <view class="action-btns">
        <uv-button
          v-if="!isManage"
          type="primary"
          text="结算"
          @click="handleSubmitOrder(1)"
        ></uv-button>
        <uv-button
          v-if="isManage"
          type="primary"
          text="删除"
          @click="handleDelete(1)"
        ></uv-button>
      </view>
    </view>
  </layout>
</template>

<script setup>

import { ref, watch } from 'vue'
import { getCartList, getCartNum, getCartDel } from '@/api/cart'
import { navigateTo } from '@/utils/router'
import { onLoad } from '@dcloudio/uni-app'

const shoppingData = ref([])
const shoppingSelect = ref([])
const shoppingSelectAll = ref(false)
const shoppingCheck = ref(null);
const totalPrice = ref(0);
const isManage = ref(false);


onLoad(() => {
  handleGetCartList()
})

watch(shoppingSelect, (shoppingSelect) => {
  let price = 0
  for (let id in shoppingSelect) {
    let store = shoppingData.value.filter(item => item.id == shoppingSelect[id])[0]
    price += store.truePrice * store.cartNum
  }
  totalPrice.value = price
})

watch(shoppingData, (shoppingData) => {
  let price = 0
  for (let id in shoppingSelect.value) {
    let store = shoppingData.filter(item => item.id == shoppingSelect.value[id])[0]
    price += store.truePrice * store.cartNum
  }
  totalPrice.value = price
})

const handleGetCartList = async () => {
  const shopping = await getCartList()
  if (shopping) {
    shoppingData.value = shopping.valid
  }
}

const handleShoppingSelectAll = (e) => {
  shoppingSelectAll.value = e
  if (!shoppingSelectAll.value) {
    shoppingSelect.value = []
    return
  }

  shoppingSelect.value = shoppingData.value.map(item => item.id)
}

const handleShoppingSelect = (value) => {
  shoppingSelectAll.value = value.length == shoppingData.value.length
}

const handleChangeNum = async (event, cart) => {
  await getCartNum({
    number: event.value,
    id: cart.id,
  })
  handleGetCartList()
}

const handleSubmitOrder = () => {
  if (shoppingSelect.value.length <= 0) {
    uni.showToast({
      icon: 'none',
      title: '请选择',
      duration: 2000
    });
    return

  }

  navigateTo({
    url: '/pages/submitOrder/submitOrder',
    query: {
      cartId: shoppingSelect.value.toString()
    }
  })
}

const changeMange = () => {
  isManage.value = !isManage.value
}

const handleDelete = async () => {
  if (shoppingSelect.value.length <= 0) return
  uni.showModal({
    title: '提示',
    content: '确认从购物车删除',
    success: async (res) => {
      if (res.confirm) {
        await getCartDel({
          ids: shoppingSelect.value
        })
        handleGetCartList()
        uni.showToast({
          title: '已删除',
          duration: 2000
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });

}

</script>

<style lang="less">
.shopping-checkbox {}

.shopping-action {
  padding-left: 34rpx;
  flex: 1;
  display: flex;
  justify-content: space-between;

  &-checkbox {
    flex: 1
  }

  &-total {
    line-height: 48rpx;
    font-size: 34rpx;
    color: #333333;
    margin-right: 10rpx;
  }

  &-btn {
    width: 224rpx;
  }
}

.shopping-manage {
  padding: 20rpx 34rpx;
  font-size: 28rpx;
  color: #333333;
  background-color: #fff;
  display: flex;
  justify-content: flex-end;
  border-bottom: 1rpx solid #f9f9f9;
}
</style>