i

src/pages/cart/index.vue

@@ -1,30 +1,111 @@
 <template>
   <view>
-    <nut-empty description="购物车暂无数据">
-<!--      <nut-button icon="refresh" type="primary" @click="toPage()">去兑换商品</nut-button>-->
+    <view v-if="list.length > 0">
+      <nut-swipe v-for="(item,index) in list" :key="index">
+        <view class="item">
+          <nut-checkbox v-model="item.checkbox" @click="select">{{ item.ID }}</nut-checkbox>
+          <image src="https://s2.loli.net/2023/08/16/6KgdSQa4WRoT3sz.jpg"
+                 style="width: 100px;height: 100px"/>
+          <view class="text">
+            <view>{{ item.name }}</view>
+            <view class="bom">
+              <nut-price :price="item.number" size="normal" :need-symbol="false"/>
+              <nut-input-number readonly @add="select()" @reduce="select()"
+                                v-model="item.count"/>
+            </view>
+          </view>
+        </view>
+        <template #right>
+          <nut-button shape="square" style="height:100%" type="danger">删除</nut-button>
+        </template>
+      </nut-swipe>
+    </view>
+    <nut-empty v-else description="购物车暂无数据">
+      <!--      <nut-button icon="refresh" type="primary" @click="toPage()">去兑换商品</nut-button>-->
     </nut-empty>
     <view>
       <view style="height: 100px"></view>
     </view>
     <view class="bottom-box">
       <view class="left">
-        <nut-checkbox v-model="checkbox">全选</nut-checkbox>
+        <nut-checkbox v-model="selectAllVal" @change="selectAll">全选</nut-checkbox>
         <view class="text-box">
           总计积分：
-          <nut-price :price="0" size="normal" :need-symbol="false"/>
+          <nut-price v-model:price="localCount" size="normal" :need-symbol="false"/>
         </view>
       </view>
-
-      <nut-button type="primary">去结算</nut-button>
+      <nut-button type="primary" @click="sub">去结算</nut-button>
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-import {ref} from 'vue';
+import {ref} from 'vue'
 import Taro from '@tarojs/taro'
+import {getCartList} from '@/api/goods'
 
-const checkbox = ref(false)
+const selectAllVal = ref(false)
+
+const list = ref([])
+
+const localCount = ref(0)
+
+Taro.useDidShow(() => {
+  getList()
+})
+
+const select = () => {
+  localCount.value = 0
+  list.value.forEach((item: any) => {
+    if (item.checkbox) {
+      setTimeout(() => {
+        item.countNum = Number(item.number) * Number(item.count)
+        localCount.value += item.countNum
+        console.log(localCount.value)
+      }, 1)
+      selectAllVal.value = true
+    } else {
+      selectAllVal.value = false
+    }
+  })
+}
+
+const selectAll = () => {
+  localCount.value = 0
+  list.value.forEach((item: any) => {
+    item.checkbox = selectAllVal.value
+  })
+  select()
+  console.log(list.value)
+}
+
+const sub = () => {
+  const arr = list.value.filter((item: any) => item.checkbox)
+  if (arr.length === 0) {
+    Taro.showToast({
+      title: '请选择商品',
+      icon: 'none'
+    })
+    return
+  }
+
+  Taro.navigateTo({
+    url: '/pages/goods/order_create/index'
+  })
+}
+
+
+const getList = async () => {
+  const res = await getCartList()
+  list.value = res.data.data.Goods.map((item: any) => {
+    return {
+      ...item,
+      count: 1,
+      countNum: item.number,
+      checkbox: false
+    }
+  })
+}
 
 const toPage = () => {
   Taro.switchTab({
@@ -41,6 +122,37 @@ const toPage = () => {
   text-align: center;
 }
 
+.item {
+  margin-top: 10px;
+  padding: 20px;
+  background-color: white;
+  display: flex;
+  justify-items: center;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+
+  image {
+    width: 200px;
+    height: 150px;
+  }
+
+  .text {
+    width: 60%;
+    margin-left: 20px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    justify-content: space-between;
+
+    .bom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
+
 .bottom-box {
   box-sizing: border-box;
   background-color: #fff;