样式调整

QYF-GitLab1

13 小时以前 07b53eedf9771d98485c9d7e310f6126a53af80e

 src/views/personalCenter/myCart.vue

@@ -3,16 +3,9 @@
    <div class="personalPage-title">我的购物车</div>
    <div class="personalPage-content">
      <div class="deleteBox">
        <el-dialog
          v-model="dialogVisible"
          width="30%"
          draggable
          align-center
          :modal="false"
        >
        <el-dialog v-model="dialogVisible" width="30%" draggable align-center :modal="false">
          <span>
            <el-icon style="color: orange"> <Warning /> </el-icon
            >确认要删除选中的商品吗？</span
            <el-icon style="color: orange"> <Warning /> </el-icon>确认要删除选中的商品吗？</span
          >
          <template #footer>
            <span class="dialog-footer">
@@ -24,8 +17,7 @@

        <el-dialog v-model="showHide" width="30%" draggable align-center :modal="false">
          <span
            ><el-icon style="color: orange"> <Warning /> </el-icon
            >确认要删除选中的商品吗？</span
            ><el-icon style="color: orange"> <Warning /> </el-icon>确认要删除选中的商品吗？</span
          >
          <template #footer>
            <span class="dialog-footer">
@@ -53,10 +45,7 @@
          <el-table-column label="全选" width="200">
            <template #default="scope">
              <div style="position: relative; width: 110px">
                <el-image
                  :src="scope.row.imgUrl ? scope.row.imgUrl : defaultImg"
                  class="bookImg"
                >
                <el-image :src="scope.row.imgUrl ? scope.row.imgUrl : defaultImg" class="bookImg">
                </el-image>
                <div
                  class="labelBox"
@@ -70,11 +59,7 @@
            </template>
          </el-table-column>

          <el-table-column
            property="name"
            label="商品信息"
            width="200"
          />
          <el-table-column property="name" label="商品信息" width="200" />
          <el-table-column property="productType" label="商品类型" width="200" />
          <el-table-column label="价格">
            <template #default="scope">¥{{ scope.row.unitprice.toFixed(2) }}</template>
@@ -119,9 +104,7 @@
              总价：<span v-if="sumUnitprice">¥{{ sumUnitprice.toFixed(2) }}</span>
              <span v-else>¥0.00</span>
            </p>
            <el-button class="button" type="warning" @click="goPaymentPage"
              >结算</el-button
            >
            <el-button class="button" type="warning" @click="goPaymentPage">结算</el-button>
          </div>
        </div>
      </div>
@@ -130,127 +113,127 @@
</template>

<script setup lang="ts">
import { onMounted, ref, inject, watch } from "vue";
import { ElTable, ElMessage } from "element-plus";
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { InfoFilled } from "@element-plus/icons-vue";
import { useUserStore } from "@/store";
import { getPublicImage } from "@/assets/js/middleGround/tool.js";
import defaultImg from "@/assets/images/default-book-img.png";
const dialogVisible = ref(false);
const router = useRouter();
const userStore = useUserStore();
const MG = inject("MG");
const total = ref();
const multipleTableRef = ref();
const loading = ref(true);
const selectAll = ref(false);
const multipleSelection = ref([]);
const orderNumber = ref();
const select = ref(false);
const showHide = ref(false);
const selectedItemCount = ref(0); // 新增一个变量用于存储已选商品数量
const sumUnitprice = ref();
import { onMounted, ref, inject, watch } from 'vue'
import { ElTable, ElMessage } from 'element-plus'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue'
import { useUserStore } from '@/store'
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
import defaultImg from '@/assets/images/default-book-img.png'
const dialogVisible = ref(false)
const router = useRouter()
const userStore = useUserStore()
const MG = inject('MG')
const total = ref()
const multipleTableRef = ref()
const loading = ref(true)
const selectAll = ref(false)
const multipleSelection = ref([])
const orderNumber = ref()
const select = ref(false)
const showHide = ref(false)
const selectedItemCount = ref(0) // 新增一个变量用于存储已选商品数量
const sumUnitprice = ref()

watch(multipleSelection, (newSelection) => {
  // 当 multipleSelection.value 发生变化时触发的回调函数
  let sum = 0;
  let sum = 0
  newSelection.forEach((item) => {
    sum += item.unitprice;
  });
    sum += item.unitprice
  })

  sumUnitprice.value = sum;
  sumUnitprice.value = sum

  selectedItemCount.value = newSelection.length;
});
  selectedItemCount.value = newSelection.length
})

onMounted(() => {
  shoppingCartGet();
  shoppingCartGet()
  // totalPrice()
});
})
const batchDelete = (evt) => {
  let target = evt.target;
  if (target.nodeName == "SPAN") {
    target = evt.target.parentNode;
  let target = evt.target
  if (target.nodeName == 'SPAN') {
    target = evt.target.parentNode
  }
  target.blur();
  target.blur()
  if (multipleSelection.value.length === 0) {
    // 如果没有选择任何商品，可以在此处给出提示或者直接返回
    ElMessage({
      message: "未选择商品",
      type: "warning",
    });
      message: '未选择商品',
      type: 'warning',
    })
  } else {
    showHide.value = true;
    showHide.value = true
    // showHide.value = false
  }
};
}

const handleSelectionChange = (val) => {
  // console.log(val);

  multipleSelection.value = val;
  multipleSelection.value = val
  // 判断是否全部选择
  if (!delShoppingSelec.value) {
    if (val.length === shoppingCartData.length) {
      selectAll.value = true;
      selectAll.value = true
    } else {
      selectAll.value = false;
      selectAll.value = false
    }
  }
};
}

// 切换所有行选中状态的方法
const toggleAllSelection = () => {
  if (shoppingCartData.length === 0) {
    selectAll.value = false;
    selectAll.value = false

    ElMessage({
      message: "没有可选择的商品",
      type: "warning",
    });
      message: '没有可选择的商品',
      type: 'warning',
    })
  } else {
    multipleTableRef.value.toggleAllSelection();
    multipleTableRef.value.toggleAllSelection()
  }
};
const selectedRow = ref();
}
const selectedRow = ref()
const dialog = (index, row) => {
  dialogVisible.value = true;
  dialogVisible.value = true

  // 将当前行数据存储起来，以备删除时使用
  selectedRow.value = row;
};
  selectedRow.value = row
}

const handleDelete = () => {
  const row = selectedRow.value;
  dialogVisible.value = false;
  const row = selectedRow.value
  dialogVisible.value = false
  MG.store
    .delShoppingCart({
      ids: [row.id],
    })
    .then((res) => {
      shoppingCartGet();
      shoppingCartGet()
      ElMessage({
        message: "删除成功",
        type: "success",
      });
        message: '删除成功',
        type: 'success',
      })
      //更新购物车数量
      userStore.updateRightPop();
      userStore.updateRightPop()
    })
    .catch((error) => {
      ElMessage.error("删除失败");
    });
};
      ElMessage.error('删除失败')
    })
}

//表单的样式
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 4) {
    return { color: "#019e58" };
    return { color: '#019e58' }
  }
};
}

const shoppingCartData = reactive([]);
const shoppingCartData = reactive([])

const shoppingCartGet = () => {
  let query = {
@@ -258,124 +241,122 @@
    size: 999,
    filterList: [],
    searchList: [],
  };
  }
  MG.store.getShoppingCartProductList(query).then((res) => {
    const newData = res.datas.map((item) => {
      console.log(item.saleMethod.type, "item.saleMethod.type");
      if (item.productMonWithLinkDto.links[0].storeRefCode == "digitalTextbooks") {
        item.typeTxt = "数字教材";
        item.productType = "数字教材";
      } else if (
        item.productMonWithLinkDto.links[0].storeRefCode == "jsek_digitalCourses"
      ) {
        item.typeTxt = "数字课程";
        item.productType = "数字课程";
      console.log(item.saleMethod.type, 'item.saleMethod.type')
      if (item.productMonWithLinkDto.links[0].storeRefCode == 'digitalTextbooks') {
        item.typeTxt = '数字教材'
        item.productType = '数字教材'
      } else if (item.productMonWithLinkDto.links[0].storeRefCode == 'digitalCourses') {
        item.typeTxt = '数字课程'
        item.productType = '数字课程'
      } else {
        item.typeTxt = "电子书";
        item.productType = "图书服务-电子书";
        item.typeTxt = '电子书'
        item.productType = '图书服务-电子书'
      }

      // console.log(item.saleMethod.id);
      console.log(item.saleMethod.type, "item.saleMethod.type");
      console.log(item.saleMethod.type, 'item.saleMethod.type')
      return {
        saleMethodId: item.saleMethod.id,
        id: item.id,
        name:
          item.linkCmsItems.length && item.linkCmsItems[0].name
            ? item.productMonWithLinkDto.product.name + "：" + item.linkCmsItems[0].name
            ? item.productMonWithLinkDto.product.name + '：' + item.linkCmsItems[0].name
            : item.productMonWithLinkDto.product.name,
        type: item.saleMethod.type == "createProductItemSaleMethod" ? "item" : "product",
        type: item.saleMethod.type == 'createProductItemSaleMethod' ? 'item' : 'product',
        typeTxt: item.typeTxt,
        productType: item.productType,
        imgUrl: getPublicImage(item.productMonWithLinkDto.product.icon, "", "160"),
        imgUrl: getPublicImage(item.productMonWithLinkDto.product.icon, '', '160'),
        unitprice: item.saleMethod.price,
        expire:
          new Date(item.saleMethod.endDate).getTime() < new Date().getTime() ||
          new Date().getTime() < new Date(item.saleMethod.beginDate).getTime()
            ? true
            : false,
      };
    });
      }
    })

    // 重新赋值 shoppingCartData.value
    shoppingCartData.splice(0, shoppingCartData.length, ...newData);
    loading.value = false;
  });
};
    shoppingCartData.splice(0, shoppingCartData.length, ...newData)
    loading.value = false
  })
}

//跳转面包屑
const goPaymentPage = async () => {
  try {
    // console.log(multipleSelection.value, 346588998)
    let expire = multipleSelection.value.filter((item) => item.expire == true);
    let expire = multipleSelection.value.filter((item) => item.expire == true)
    if (expire.length > 0) {
      ElMessage({
        message: "您选择的商品有不在有效期内的,请重新选择可购买商品!",
        type: "warning",
      });
        message: '您选择的商品有不在有效期内的,请重新选择可购买商品!',
        type: 'warning',
      })
    } else {
      const selectedIds = multipleSelection.value.map((item) => item.id);
      const saleMethodId = multipleSelection.value.map((item) => item.saleMethodId);
      const selectedIds = multipleSelection.value.map((item) => item.id)
      const saleMethodId = multipleSelection.value.map((item) => item.saleMethodId)

      console.log(saleMethodId, 789);
      console.log(saleMethodId, 789)

      let queryCreateOrder = { linkIds: selectedIds };
      const createOrderResult = await MG.store.shoppingCartCreateOrder(queryCreateOrder);
      orderNumber.value = createOrderResult.orderNumber;
      let queryCreateOrder = { linkIds: selectedIds }
      const createOrderResult = await MG.store.shoppingCartCreateOrder(queryCreateOrder)
      orderNumber.value = createOrderResult.orderNumber

      if (selectedIds.length) {
        router.push({
          name: "paymentPage",
          name: 'paymentPage',
          query: {
            crumbsKey: key,
            orderNumber: orderNumber.value,
            // type: route.query.type,
            type: "shoppingCart",
            type: 'shoppingCart',
            onNorderSaleMethod: saleMethodId,
          },
        });
        })
      } else {
        ElMessage({
          message: "请选择商品",
          type: "warning",
        });
          message: '请选择商品',
          type: 'warning',
        })
      }
    }
  } catch (error) {
    console.error(error);
    console.error(error)
    // 错误处理逻辑
  }
};
}

const delShoppingSelec = ref();
const delShoppingSelec = ref()

const confirmEvent = () => {
  showHide.value = false;
  showHide.value = false
  if (multipleSelection.value.length === 0) {
    // 如果没有选择任何商品，可以在此处给出提示或者直接返回
    return;
    return
  } else {
    const selectedIds = multipleSelection.value.map((item) => item.id);
    const selectedIds = multipleSelection.value.map((item) => item.id)
    MG.store
      .delShoppingCart({ ids: selectedIds })
      .then((res) => {
        delShoppingSelec.value = res;
        delShoppingSelec.value = res
        ElMessage({
          message: "批量删除成功",
          type: "success",
        });
        selectAll.value = false;
          message: '批量删除成功',
          type: 'success',
        })
        selectAll.value = false
        // 删除成功后，刷新购物车列表
        shoppingCartGet();
        shoppingCartGet()
        //更新购物车数量
        userStore.updateRightPop();
        userStore.updateRightPop()
      })
      .catch((error) => {
        console.error("批量删除失败", error);
        ElMessage.error("批量删除失败");
      });
        console.error('批量删除失败', error)
        ElMessage.error('批量删除失败')
      })
  }
};
}
</script>

<style lang="less" scoped>
@@ -473,10 +454,6 @@
      margin: 0 auto;
    }
  }
}

.selectproduct {
  margin-top: 30px;
}

::v-deep {