激活列样式调整

QYF-GitLab1

21 小时以前 51a35a1cea7a381c33c86e9a9697ecef602c773f

 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">
@@ -34,12 +26,6 @@
            </span>
          </template>
        </el-dialog>
      </div>

      <div class="breadcrumbsBox">
        <p>
          位置： <span>购物车({{ total }})</span>
        </p>
      </div>
      <div class="selectproduct">
        <el-table
@@ -58,11 +44,8 @@

          <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"
                >
              <div style="position: relative;width: 120px;">
                <el-image :src="scope.row.imgUrl ? scope.row.imgUrl : defaultImg" class="bookImg">
                </el-image>
                <div
                  class="labelBox"
@@ -76,13 +59,8 @@
            </template>
          </el-table-column>

          <el-table-column
            property="name"
            label="商品信息"
            width="300"
            :cell-style="{ margin: '30px' }"
          />
          <el-table-column property="productType" label="商品类型" width="300" />
          <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>
          </el-table-column>
@@ -126,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="primary" @click="goPaymentPage">结算</el-button>
          </div>
        </div>
      </div>
@@ -137,128 +113,126 @@
</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, useBreadcrumbStore } from "@/store";
import { getPublicImage } from "@/assets/js/middleGround/tool.js";
import defaultImg from "@/assets/images/default-book-img.png";
const dialogVisible = ref(false);
const crumbStore = useBreadcrumbStore();
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 { 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: any = 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: "#FF6C00" };
    return { color: '#019e58' }
  }
};
}

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

const shoppingCartGet = () => {
  let query = {
@@ -266,137 +240,112 @@
    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 == "jsek_digitalTextbooks") {
        item.typeTxt = "数字教材";
        item.productType = "数字教材";
      } else if (
        item.productMonWithLinkDto.links[0].storeRefCode == "jsek_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) {
        let crumbs = {
          name: "订单支付", // 面包屑名称
          pathName: "paymentPage", // 面包屑跳转路由，可传递 pathName 或 path
          isCrumbs: true, // 面包屑点击跳转时是否创建新的面包屑记录
          type: "shoppingCart", // 如果需要创建新的面包屑记录，创建的type
        };
        // 在全局数据中设置面包屑
        crumbStore.setCrumbs({
          type: "shoppingCart",
          data: [crumbs],
          callback: (key) => {
            router.push({
              name: "paymentPage",
              query: {
                crumbsKey: key,
                orderNumber: orderNumber.value,
                // type: route.query.type,
                type: "shoppingCart",
                onNorderSaleMethod: saleMethodId,
              },
            });
        router.push({
          name: 'paymentPage',
          query: {
            orderNumber: orderNumber.value,
            // type: route.query.type,
            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>
@@ -496,10 +445,6 @@
  }
}

.selectproduct {
  margin-top: 30px;
}

::v-deep {
  .el-checkbox__label {
    margin-left: 6px;
@@ -532,8 +477,8 @@
  .el-image__inner {
    box-shadow: 0px 0px 20px 1px #ccc;
    object-fit: contain !important;
    width: 110px;
    height: 140px;
    width: 120px;
    height: 160px;
  }

  .el-icon {
@@ -571,6 +516,7 @@
  right: 0;
  margin: 0 !important;
  border-radius: 0px 0px 0px 5px;
  box-sizing: border-box;

  p {
    display: flex;