v1.0

pages/shoppingCart/shoppingCart.vue

@@ -0,0 +1,240 @@
+<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>