ruoyi-ui/src/views/shopCart/detail/index.vue

<template>
  <div>
    <el-skeleton v-if="!loading" :rows="12" animated />
    <el-table v-if="loading" ref="cartProjectTable" :data="cartProjectList" tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="商品信息">
        <template slot-scope="scope">
          <div style="height: 150px; width: 100%">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-card class="box-card">
                  <image-preview :src="scope.row.image" height="150px"/>
                </el-card>
              </el-col>
              <el-col :span="16">
                <el-row>
                  <span style="font-weight: bolder; font-size: 20px">{{ scope.row.name }}</span>
                </el-row>
                <el-divider style="margin: 10px 0;"/>
                <el-row>
                  <el-col :span="24" v-for="skuRule in scope.row.skuRuleList">
                    {{ skuRule.ruleName }}：{{ skuRule.ruleValue }}
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单价" width="120">
        <template slot-scope="scope">{{ scope.row.price }}</template>
      </el-table-column>
      <el-table-column label="数量" width="120">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.num" controls-position="right" style="width: 110px"
                           :min="1"
                           :max="scope.row.stock"
                           size="mini"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="小计" width="120">
        <template slot-scope="scope">{{ scope.row.subtotal }}</template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
    </el-table>
    <div v-if="failureCartProjectList.length > 0" style="height: 50px; align-items: center; ">
      <span style="margin: 20px 0px; float: left; color: #787be8">已失效</span>
    </div>
    <el-table v-if="failureCartProjectList.length > 0" :show-header="false" ref="multipleTable"
              :data="failureCartProjectList"
              tooltip-effect="dark"
              style="width: 100%">
      <el-table-column width="55">
        <template slot-scope="scope">
          <el-checkbox disabled></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        label="日期"
      >
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-card v-if="loading" style="margin-top: 20px;">
      <div class="clearfix">
        <el-row>
          <el-col :span="6">
            <el-checkbox v-model="isAllCheck" @change="changeIsAllCheck">全选</el-checkbox>
            <el-button type="text" style="margin-left: 10px">删除选中商品</el-button>
          </el-col>
          <el-col :span="14">
            <div>
              <span>共 <span style="color: red">{{ statisticsCart.total }}</span> 件商品，已选择 <span
                style="color:red;">{{ statisticsCart.selectTotal }}</span> 件</span>
              <el-divider direction="vertical"></el-divider>
              <span> 商品合计 : ¥{{ statisticsCart.priceTotal }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>应付总额：<span style="color:red; font-size: 24px;">¥{{ statisticsCart.actualTotal }}</span></span>
            </div>
          </el-col>
          <el-col :span="4">
            <el-button style="float: right;" type="success">下单</el-button>
          </el-col>
        </el-row>


      </div>
    </el-card>
  </div>
</template>

<script>
import {cartInfoIsSelected, getDetailInfo} from "@/api/shopCart/Info";
import {getTime} from "@/utils";

export default {
  name: "shopCartDetail",
  data() {
    return {
      // 生效商品
      cartProjectList: [],
      // 失效商品
      failureCartProjectList: [],
      cartProjectSelected: [],
      // 购物车统计
      statisticsCart: {
        // 商品总数
        total: 0,
        // 选择总数
        selectTotal: 0,
        // 商品总价
        priceTotal: 0.00,
        // 实际总价
        actualTotal: 0.00
      },
      // 时候全部选择
      isAllCheck: false,
      loading: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getDetailInfo().then(response => {
        console.log(response)
        this.statisticsCart = response.data.statisticsCart;
        this.cartProjectList = response.data.cartSkuList;
        this.loading = true;
        setTimeout(this.initCartSelected, 200);
      })
    },
    initCartSelected() {
      this.cartProjectList.forEach(cartProject => {
        if ("Y" === cartProject.isSelected) {
          this.$refs.cartProjectTable.toggleRowSelection(cartProject, true);
        }
      })
    },
    changeIsAllCheck() {
      if (this.isAllCheck) {
        this.$refs.cartProjectTable.toggleAllSelection();
      } else {
        this.$refs.cartProjectTable.clearSelection();
      }
    },
    handleSelectionChange(selectedRow) {
      let editCartProjectList = [];
      this.cartProjectSelected
        .filter(cartProject => selectedRow.indexOf(cartProject) === -1)
        .forEach(cartProject => editCartProjectList.push({
          "projectId": cartProject.projectId,
          "projectSku": cartProject.projectSku,
          "isSelected": "N"
        }))
      selectedRow
        .filter(cartProject => this.cartProjectSelected.indexOf(cartProject) === -1)
        .forEach(cartProject => editCartProjectList.push({
          "projectId": cartProject.projectId,
          "projectSku": cartProject.projectSku,
          "isSelected": "Y"
        }))
      console.log(editCartProjectList)
      let cartProjectMap = {};
      this.cartProjectList.map(cartProject => cartProjectMap[`${cartProject.projectId} + ${cartProject.projectSku}`] = cartProject.isSelected)
      console.log(cartProjectMap)
      let editCartProjectFilterList
        = editCartProjectList.filter(editCartProject => editCartProject.isSelected !== cartProjectMap[`${editCartProject.projectId} + ${editCartProject.projectSku}`])
      console.log(editCartProjectFilterList)
      if (editCartProjectFilterList.length > 0){
        cartInfoIsSelected(editCartProjectList).then(response => {
          this.loading = false;
          this.cartProjectList = [];
          this.cartProjectSelected = []
          this.init();
        })
      }
      this.isAllCheck = selectedRow.length === this.cartProjectList.length
      this.cartProjectSelected = selectedRow;
    }
  }
}
</script>

<style scoped>

</style>