Web_QiCaiYao/pages/user/collect.vue

<template>
  <!-- 我的收藏 -->
  <div class="collect">
    <div class="user-com-title">我的收藏</div>
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="goGoodsDetail(item.goods_id)"
      >
        <div class="left">
          <img :src="imgUrl + item.sku_image" alt srcset />
        </div>
        <div class="right">
          <div class="title">{{ item.goods_name }}</div>
          <!--接口数据/地址、规格、单位/未返回 -->
          <!-- <p>产地：北京</p> -->
          <!-- <p>规格：10g/袋</p> -->
          <div class="cad" v-if="userInfo.show_price">
            <div class="l">
              <span>¥{{ item.price }}</span>
              <!-- /袋 -->
            </div>
            <div class="r" @click.stop.prevent="goCart(item)">
              <img src="~assets/images/cards.png" alt />
            </div>
          </div>
        </div>
      </li>
    </ul>

    <!-- 分页 -->
    <Page
      :padding="0"
      @currentChange="currentChange"
      :total="total"
      :pageSize="limit"
    ></Page>
  </div>
</template>

<script>
import Setting from "~/setting";

export default {
  name: "collect",
  auth: "guest",
  data() {
    return {
      imgUrl: Setting.uplodBaseURL,
      userInfo: {},
      list: [],
      page: 1,
      limit: 10,
      total: 0,
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "我的收藏-" + this.$store.state.titleCon,
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.getList();
  },
  mounted() {},
  methods: {
    currentChange() {},
    getList() {
      this.$axios
        .post("/goodscollect/page", {
          params: {
            page: this.page,
            page_size: this.limit,
          },
        })
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.count;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    //取消收藏
    // offCollect(item) {
    //   this.$axios
    //     .post("collect/del", {
    //       id: item.product_id
    //     })
    //     .then(res => {
    //       Message.success(res.msg);
    //       this.getList();
    //     })
    //     .catch(error => {
    //       return Message.error(error);
    //     });
    // },
    //去详情
    goGoodsDetail(id) {
      this.$router.push({ path: `/goods_detail/${id}` });
    },
    // 分页点击
    bindPageCur(data) {
      this.page = data;
      this.getList();
    },
    goCart(row) {
      console.log(row);
      let num;
      if (row.min_buy < 1) {
        num = 1;
      } else {
        num = row.min_buy;
      }
      let obj = {
        num,
        sku_id: row.sku_id,
      };
      this.$axios
        .post(`/cart/add`, obj)
        .then((res) => {
          console.log(res);
          this.$message({
            message: "成功添加购物车",
            type: "success",
            offset: 100,
          });
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            message: err,
            type: "error",
            offset: 100,
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.collect {
  padding: 0 30px;

  ul {
    display: flex;
    flex-flow: wrap;
    // justify-content: space-between;

    margin-top: 20px;
    li {
      width: 290px;
      height: 110px;
      background: #fbfbfb;
      border-radius: 8px;
      border: 1px solid #e7e7e7;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      margin: 0px 8px 20px;
      cursor: pointer;

      .left {
        img {
          width: 80px;
          height: 80px;
        }
      }
      .right {
        margin-left: 20px;
        .title {
          width: 160px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #222222;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          // 必须加不然隐藏不了
          /*! autoprefixer: ignore next */
          -webkit-box-orient: vertical;
        }
        p {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #585858;
          margin-top: 10px;
        }
        .cad {
          margin-top: 13px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .l {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #585858;
            span {
              color: #ff1919;
            }
          }
          .r {
            img {
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>