<!--
  @description:我的购物车
  @Modifier: haofengxian
  @routerPath: /shop/myshoppingCart
  @date: 2021-12-04 12:45
-->
<template>
  <div>
    <div class="nav_w">
      <headerSearch />
    </div>
    <shoppingCartComp :list="list" :loading="loading" @getCartList="initData" />
  </div>
</template>

<script>
// api
import { getMyCartList } from '@/api/shoppingmall/order'
// 组件
import headerSearch from './headerSearch' // 头部组件
import shoppingCartComp from './shoppingCartComp'

export default {
  name: 'MyshoppingCart',
  components: {
    headerSearch, // 头部组件
    shoppingCartComp // 购物车组件
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化数据
    initData() {
      this.loading = true
      getMyCartList().then(res => {
        this.list = res.data ?? []
        this.list.forEach((item) => {
          item.checked = false
          item.productsList.forEach((chidren) => {
            chidren.checked = false
          })
        })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
@import "./index";
.cart_null {
  text-align: center;
  padding-top: 150px;
  dl {
    width: 40%;
    margin: 0 auto 100px;
    display: flex;
    img {
      width: 82px;
      height: 82px;
      vertical-align: middle;
    }
    dd {
      text-align: left;
      margin-left: 20px;
    }
    p {
      line-height: 26px;
      font-size: 20px;
      margin-top: 10px;
      &:nth-last-of-type(1) {
        color: #FF6600;
        cursor: pointer;
        margin-top: 20px;
        &:hover {
          color: #fc7d29;
        }
      }
    }
  }
}
.cursor{
  cursor: pointer;
}
.gift{
  span{
    cursor: pointer;
    display: inline-block;
    color: #FF6600;
    padding-left:2px;
  }
}
.dialog-content{
  width: 100%;
  padding: 5px;
  margin:10px 0;
  .product-content{
    display: flex;
    justify-content: space-between;
    line-height: 30px;
  }
  .product-name{
    width: 400px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.ulStyle_content .goods_name_box {
  width: calc((100% - 275px) / 4) !important;
  .goods_name {
    width: 100% !important;
    cursor: pointer;
    text-align:left !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .goods_name:hover {
    color:#00aaca;
  }
}
.all_product {
  font-family: 'PingFangSC-Regular', 'PingFang SC';
  font-weight: 400;
  font-size: 14px;
  color: #FE6B2A;
  margin-top:10px;
}
.goods_img {
  width: 76px !important;
  height: 76px !important;
  margin: 2px 0 0 2px;
}

.cart_title {
  color:#333 !important;
  display: flex;
  .el-checkbox {
    color:#333 !important;
  }
}
.flex_1 {
  flex:1 !important;
}
.textac {
  text-align: center !important;
}

</style>
