解释以下代码<template>
  <qtContent :title="title">
    <Card slot="main-content">
      <div class="header">
        <el-button
          type="danger" round
          @click="setAllShopping"
        >添加全部购物车</el-button>
      </div>
      <el-table :data="dataArr" stripe style="width: 100%">
        <el-table-column label="名称" prop="goodsVo.name" width="150">
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <img
              class="img"
              :src="`${api}/${scope.row.goodsVo.url}`"
              width="150"
            />
          </template>
        </el-table-column>
        <el-table-column prop="category" label="添加时间">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column prop="visit" label="单价">
          <template slot-scope="scope">
            {{ scope.row.goodsVo.price }}
          </template>
        </el-table-column>
        <el-table-column prop="visit" label="数量">
          <template slot-scope="scope">
            {{ scope.row.number }}
          </template>
        </el-table-column>
        <el-table-column prop="visit" label="总价">
          <template slot-scope="scope">
            {{ scope.row.goodsVo.price * scope.row.number }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" round  plain @click="payShopping(scope.row.id)" size="mini">
              提交购物车订单</el-button
            >
            <el-button  type="danger" round  plain @click="showModal(scope.row.id)" size="mini">
              删除</el-button
            >
      
          </template>
        </el-table-column>
      </el-table>
      <qtEditshop
        v-if="showedit"
        @cancle="showedit = false"
        @getData="getSelfshop"
        ref="qtEditshopRef"
      />
      <Modal v-model="modalDel" width="300">
        <p slot="header" style="color: #f60">
          <Icon type="ios-information-circle"></Icon>
          <span>&nbsp;&nbsp;系统提示</span>
        </p>
        <p>确定要删除当前购物车商品？</p>
        <div slot="footer">
          <Button type="error" size="large" long @click="handleDelshop()"
            >确认</Button
          >
        </div>
      </Modal>
    </Card>
  </qtContent>
</template>

<script>
import qtContent from "@/components/qtContent";
import qtAddshop from "./qtAddshop.vue";
import qtEditshop from "./qtEditshop.vue";

export default {
  data() {
    return {
      title: "购物车",
      author: "",
      dataArr: [],
      modalDel: false,
      delId: "",
      api: this.api,
      showDialogVis: false,
      showedit: false,
    };
  },
  created() {
    let user = JSON.parse(sessionStorage.getItem("user"));
    this.author = user["userId"];
    this.getSelfshop();
  },
  components: {
    qtContent,
    qtAddshop,
    qtEditshop,
  },
  inject: ["reload"],
  methods: {
    setAllShopping() {
      const arr = this.dataArr.map(element => {
        return {
          id: element.id,
          userId: this.author,
        }
      });
      this.$http.orderPay(arr).then((resp) => {
        if (resp.code == "200") {
          this.$message.success("购买成功");
          this.getSelfshop();
        }
      });
    },
    getCookie(name) {
      var value = "; " + document.cookie;
      var parts = value.split("; " + name + "=");
      if (parts.length === 2) return parts.pop().split(";").shift();
    },
    getSelfshop() {
      this.$http.cartshop(this.author).then((resp) => {
        if (resp.code == "200") {
          this.dataArr = resp.rows;
          console.log(" this.dataArr", this.dataArr);
        }
      });
    },
    goshopDetailPage(id) {
      this.$router.push({
        name: "Details",
        query: { shopId: id },
      });
    },
    showModal(id) {
      this.modalDel = true;
      this.delId = id;
    },
    handleDelshop() {
      this.$http.delshop(this.delId, this.author).then((resp) => {
        if (resp.code == "200") {
          this.modalDel = false;
          this.$message.success("删除成功");
          this.delId = "";
          this.getSelfshop();
        }
      });
    },
    payShopping(id) {
      this.$http.orderPay([{
        id,
        userId: this.author
      }
      ]).then((resp) => {
        if (resp.code == "200") {
          this.$message.success("购买成功");
          this.getSelfshop();
        }
      });
    },
    goEditPage(id) {
      this.showedit = true;
      setTimeout(() => {
        this.$refs.qtEditshopRef.init(id);
      });
    },
  },
  filters: {
    capitalize(value) {
      if (!value) return "";
      if (value.length > 200) {
        return value.slice(0, 200) + "...";
      }
      return value;
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  padding: 20px;
  // border: 1px solid;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.title {
  font-weight: 600;
  cursor: pointer;
}
.title:hover {
  color: #b50d0d;
}
.info {
  color: #888383;
  cursor: pointer;
}
.tag {
  color: #f97311;
}
.person-info {
  font-size: 12px;
  text-decoration: none;
}
.avatar-img {
  cursor: pointer;
}
h3 {
  font-size: 22px;
}
.operation {
  display: none;
  float: right;
}
.operation a {
  text-decoration: none;
}
.operation a:hover {
  opacity: 0.6;
}
.del a {
  color: red;
}
.info:hover {
  .operation {
    display: inline-block;
  }
}
.dight {
  color: #4b82e4;
}
</style>