GCLS_Page_Personal/src/components/Personalcenter/Mycollect.vue

<template>
  <!-- 购买记录 -->
  <div class="OrderManage personal-center">
    <EditTitle
      title="我的收藏"
      :isDel="1"
      :isShowCheckBox="isShowCheckBox"
      :changeIsDel="changeIsDel"
      :changeIsCancle="changeIsCancle"
      :deleteMyCollection="deleteMyCollection"
      :listCount="listCount"
      :delCount="delCount"
    />
    <div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <!-- <el-menu-item index="all">全部</el-menu-item> -->
        <el-menu-item index="book">教材</el-menu-item>
        <el-menu-item index="teaching">教学课程</el-menu-item>
        <el-menu-item index="video">视频</el-menu-item>
        <el-menu-item index="live">直播</el-menu-item>
        <el-menu-item index="jiaoyan">教研资料</el-menu-item>
        <el-menu-item index="hanzi">字词</el-menu-item>
        <el-menu-item index="sentence">句子</el-menu-item>
      </el-menu>
    </div>
    <div class="list" v-loading="loading">
      <template v-if="!isEmpty">
        <div class="main" v-for="(item, index) in list" :key="'order' + index">
          <div class="main-content" v-if="item.goods_type == 501">
            <div
              v-if="isShowCheckBox"
              class="checkBox"
              @click.stop="selecedGoods(item, index)"
            >
              <img
                :src="item.checked ? checked_img : check_img"
                class="check-img"
              />
            </div>
            <Hanzi
              :item="item"
              :index="index"
              @getMyCollectionList="getMyCollectionList"
            />
          </div>
          <div class="main-content" v-else-if="item.goods_type == 502">
            <div
              v-if="isShowCheckBox"
              class="checkBox"
              @click.stop="selecedGoods(item, index)"
            >
              <img
                :src="item.checked ? checked_img : check_img"
                class="check-img"
              />
            </div>
            <Sentence
              :key="item.id"
              :sItem="item"
              :index="index"
              @getMyCollectionList="getMyCollectionList"
            />
          </div>
          <div class="main-content" v-else>
            <div class="main-content-left" @click.stop="jump(item)">
              <div
                v-if="isShowCheckBox"
                class="checkBox"
                @click.stop="selecedGoods(item, index)"
              >
                <img
                  :src="item.checked ? checked_img : check_img"
                  class="check-img"
                />
              </div>
              <div class="coverUrl">
                <img :src="item.goods_picture_url" />
              </div>
              <div class="order-infor">
                <p class="name">{{ item.goods_name }}</p>
                <Goodstype :item="item" />
                <p class="author">{{ item.creator_name }}</p>
              </div>
            </div>
            <div class="main-content-right">
              <p class="collectTime">{{ item.create_time }}</p>

              <div class="order-btn">
                <div class="price">
                  ¥<span class="price_num" v-html="item.goods_price_str"></span>
                </div>
                <button
                  class="goPay"
                  v-if="item.goods_is_buy == 'false'"
                  @click="reOrder(item)"
                >
                  购买
                </button>
                <button class="goPay hasPay" v-if="item.goods_is_buy == 'true'">
                  已购买
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="paging">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="pageNum"
            :total="total"
            :page-size="pageSize"
            @current-change="changecurrentPage"
          />
        </div>
      </template>
      <template v-else>
        <Empty :navType="navType" />
      </template>
    </div>
    <el-dialog
      class="orderDialog"
      title="商品详情"
      :visible.sync="isConfirmorder"
      width="720px"
      :before-close="closeConfirmorder"
    >
      <Confirmorder
        ref="Confirmorder"
        :data="goods_Data"
        :changeOrderNumber="changeOrderNumber"
      />
    </el-dialog>
    <el-dialog
      class="orderDialog"
      top="50px"
      :title="'订单号：' + orderNumber"
      :visible.sync="isPayment"
      width="720px"
      :before-close="closePayment"
    >
      <Payment
        :data="goods_Data"
        :orderNumber="orderNumber"
        :judgePayResult="judgePayResult"
      />
    </el-dialog>
  </div>
</template>

<script>
import EditTitle from "../common/EditTitle.vue";
import Empty from "../common/Empty.vue";
import Goodstype from "../common/Goodstype.vue";
import Cookies from "js-cookie";
import { getLearnWebContent } from "@/api/ajax";

import Confirmorder from "../common/Confirmorder.vue";
import Payment from "../common/Payment.vue";

import { jumpPath } from "@/utils/jumpPath";
import Hanzi from "../common/Hanzi.vue";
import Sentence from "../common/Sentence.vue";

export default {
  name: "MyCollect",
  //import引入的组件需要注入到对象中才能使用
  components: {
    EditTitle,
    Empty,
    Goodstype,
    Confirmorder,
    Payment,
    Hanzi,
    Sentence,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      navType: "6",
      isEmpty: false,
      activeIndex: "all",
      list: [],
      goods_name: "", // 商品名称，模糊查询，空表示查询所有
      goods_id_list: [], // 商品 ID 列表，空表示查询所有商品
      goods_type_list: [101], // 商品类型列表，具体参看数据字典 6.9，商品类型。空表示查询所有类型
      total: 0,
      pageSize: 20,
      pageNum: 1,
      currPageNum: 0,
      loading: false,
      isShowCheckBox: false,
      selecedGoodsList: [],
      check_img: require("../../assets/Personalcenter/check.png"),
      checked_img: require("../../assets/Personalcenter/checked.png"),
      listCount: 0,
      delCount: 0,
      isPayment: false,
      isConfirmorder: false,
      orderNumber: "",
      goods_Data: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    jump(item) {
      jumpPath(item);
    },
    //完成
    changeIsDel(isShowCheckBox) {
      this.isShowCheckBox = isShowCheckBox;
      this.selecedGoodsList = [];
      this.delCount = 0;
      this.currPageNum = 0;
      this.list.map((item) => {
        item.checked = false;
        return item;
      });
    },
    //取消
    changeIsCancle(isShowCheckBox) {
      this.selecedGoodsList = [];
      this.delCount = 0;
      this.currPageNum = 0;
      this.list.map((item) => {
        item.checked = false;
        return item;
      });
    },
    changecurrentPage(val) {
      this.pageNum = val;
      this.getMyCollectionList();
    },
    getMyCollectionList() {
      let _this = this;
      _this.loading = true;
      _this.delCount = 0;
      if (_this.currPageNum != _this.pageNum) {
        _this.isShowCheckBox = false;
      }

      let MethodName = "page_query-PageQueryMyCollectionList";
      let data = {
        goods_id_list: [],
        goods_type_list: this.goods_type_list,
        goods_name: _this.goods_name,
        page_capacity: _this.pageSize,
        cur_page: _this.pageNum,
      };
      getLearnWebContent(MethodName, data)
        .then((res) => {
          _this.loading = false;
          _this.total = res.total_count;
          let collection_list = res.collection_list;
          if (collection_list.length > 0) {
            this.list = collection_list.map((item) => {
              let obj = this.handleGoodsType(item.goods_type);
              item.className = obj.className;
              item.goods_type_root_name = obj.rootName;
              if (item.goods_price) {
                let goods_price = this.handlePrice(item.goods_price);
                item.goods_price_str = goods_price.price_str;
                //item.goods_price = goods_price.price;
              }
              // if (item.discount_money) {
              //   let dis_price = this.handlePrice(item.goods_price);
              //   item.discount_money = dis_price.price;
              // }
              // if (item.receivables_money) {
              //   let rec_price = this.handlePrice(item.receivables_money);
              //   item.receivables_money = rec_price.rprice;
              // }

              item.checked = false;
              return item;
            });
            this.isEmpty = false;
            this.listCount = this.list.length;
          } else {
            this.isEmpty = true;
            this.list = [];
            this.listCount = 0;
          }
          console.log(this.list);
        })
        .catch((error) => {
          _this.loading = false;
        });
    },
    handlePrice(price) {
      let priceArr = price.toString().split(".");
      if (priceArr.length > 1 && priceArr[1]) {
      } else {
        price = priceArr[0] + ".00";
      }
      let price_str = this.handlePrice2(price);
      return { price: price, price_str: price_str };
    },
    handlePrice2(price) {
      price = price.toString();
      let arr = price.split(".");
      let str = `<span style="font-size:24px;">${arr[0]}</span>.<span style="font-size:16px;">${arr[1]}</span>`;
      return str;
    },
    handleGoodsType(type) {
      let className = "",
        rootName = "";
      if (type) {
        type = type.toString();
        if (type.indexOf("10") > -1) {
          className = "type10";
          rootName = "教材";
        }
        if (type.indexOf("20") > -1) {
          rootName = "教学课程";
          className = "type20";
        }
        if (type.indexOf("30") > -1) {
          className = "type30";
          rootName = "教培课程";
        }
        if (type.indexOf("40") > -1) {
          className = "type40";
          rootName = "教研资料";
        }
      }
      return { className: className, rootName: rootName };
    },
    handleSelect(val) {
      let _this = this;
      _this.activeIndex = val;
      _this.pageNum = 1;
      _this.goods_name = "";
      _this.selecedGoodsList = [];
      if (_this.activeIndex == "all") {
        _this.goods_type_list = [];
      } else if (_this.activeIndex == "book") {
        _this.goods_type_list = [101];
      } else if (_this.activeIndex == "teaching") {
        _this.goods_type_list = [201];
      } else if (_this.activeIndex == "video") {
        _this.goods_type_list = [302];
      } else if (_this.activeIndex == "live") {
        _this.goods_type_list = [301];
      } else if (_this.activeIndex == "jiaoyan") {
        _this.goods_type_list = [401];
      } else if (_this.activeIndex == "hanzi") {
        _this.goods_type_list = [501];
      } else if (_this.activeIndex == "sentence") {
        _this.goods_type_list = [502];
      }
      _this.getMyCollectionList();
    },
    //勾选我的收藏
    selecedGoods(item, index) {
      let _this = this;
      if (item.checked) {
        item.checked = false;
        this.delCount--;
        let selecedGoodsList = JSON.parse(
          JSON.stringify(_this.selecedGoodsList)
        );
        selecedGoodsList = selecedGoodsList.filter((ele) => ele != item.id);
        _this.selecedGoodsList = selecedGoodsList;
      } else {
        item.checked = true;
        this.delCount++;
        _this.selecedGoodsList.push(item.id);
      }
    },
    //删除我的收藏
    deleteMyCollection() {
      let _this = this;
      if (_this.selecedGoodsList.length < 1) {
        this.$message.warning("请先勾选");
        return;
      }
      return new Promise((resolve) => {
        _this.loading = true;
        let MethodName = "order-collection_manager-DeleteMyCollection";
        let data = {
          id_list: _this.selecedGoodsList,
        };
        getLearnWebContent(MethodName, data).then((res) => {
          _this.$message.success("删除成功！");
          _this.loading = false;

          setTimeout(() => {
            _this.currPageNum = _this.pageNum;
            _this.goods_name = "";
            _this.selecedGoodsList = [];
            _this.getMyCollectionList();
          }, 500);
          resolve();
        });
      });
    },
    //获取订单编号
    changeOrderNumber(
      id,
      back_discount_code,
      discount_money,
      receivables_money
    ) {
      this.isConfirmorder = false;
      this.orderNumber = id;
      this.isPayment = true;
      this.goods_Data.discount_code = back_discount_code;
      this.goods_Data.discount_money = discount_money;
      this.goods_Data.receivables_money = receivables_money;
      console.log(this.goods_Data);
    },
    //去购买
    reOrder(item) {
      this.isConfirmorder = true;
      this.goods_Data = item;
      console.log(this.goods_Data);
    },
    closeConfirmorder() {
      this.isConfirmorder = false;
      this.$refs.Confirmorder.clearData();
    },
    closePayment() {
      this.isPayment = false;
      this.$refs.Confirmorder.clearData();
    },
    judgePayResult(bool) {
      this.isPayment = false;
      this.isConfirmorder = false;
      if (bool) {
        this.$message.success("支付成功");
      } else {
        this.$message.warning("支付失败");
      }
      this.getMyCollectionList();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getMyCollectionList();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.OrderManage {
  .list {
    width: 100%;
    min-height: 400px;
    .main {
      width: 100%;
      box-sizing: border-box;
      padding: 16px 16px 16px 16px;
      background: #ffffff;
      box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
      .checkBox {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 88px;
        margin-right: 16px;
        cursor: pointer;
        .check-img {
          width: 16px;
          height: 16px;
        }
      }
      &-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        &-left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          .orderTime {
            font-weight: bold;
            font-size: 14px;
            line-height: 150%;
            text-align: right;
            color: #2c2c2c;
            margin-right: 16px;
          }
          .orderNo {
            font-weight: normal;
            font-size: 14px;
            line-height: 150%;
            color: #2c2c2c;
          }
        }
        .del-order {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
      &-content {
        display: flex;
        justify-content: space-between;
        &-left {
          display: flex;
          justify-content: flex-start;

          .coverUrl {
            width: 88px;
            height: 88px;
            margin-right: 24px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            > img {
              max-height: 100%;
              max-width: 100%;
            }
          }
          .order-infor {
            width: 528px;
            display: flex;
            flex-direction: column;

            align-items: flex-start;
            .name {
              font-weight: normal;
              font-size: 16px;
              line-height: 150%;
              color: #2c2c2c;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .intro {
              font-weight: normal;
              font-size: 16px;
              line-height: 150%;
              color: #2c2c2c;
              opacity: 0.7;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .author {
              font-weight: normal;
              font-size: 14px;
              line-height: 150%;
              color: #2c2c2c;
              opacity: 0.7;
            }
            .pinyin {
              font-weight: normal;
              font-size: 20px;
              line-height: 23px;
              color: #2c2c2c;
            }
            .en {
              font-style: normal;
              font-weight: 600;
              font-size: 20px;
              line-height: 25px;
              color: #2c2c2c;
              margin: 4px 0 12px;
            }
            .hanzi-btn {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              &-img {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 24px;
                height: 24px;
                background: #ff5757;
                border-radius: 4px;
                margin-right: 8px;
                cursor: pointer;
                > img {
                  width: 16px;
                  height: 16px;
                }
              }
              .more-intp {
                font-weight: normal;
                font-size: 14px;
                line-height: 20px;
                color: #2c2c2c;
                opacity: 0.5;
                cursor: pointer;
              }
            }
          }
          .hanzi {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 88px;
            height: 88px;
            background: #ffffff;
            border: 1px solid #e0e0e0;
            box-sizing: border-box;
            border-radius: 4px;
            font-weight: normal;
            font-size: 48px;
            line-height: 100%;
            display: flex;
            align-items: center;
            text-align: center;
            color: #2c2c2c;
            margin-right: 16px;
          }
        }
        &-right {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .collectTime {
            font-weight: normal;
            font-size: 14px;
            line-height: 150%;
            text-align: right;
            color: #2c2c2c;
            opacity: 0.5;
            margin-bottom: 16px;
          }
          .order-btn {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 40px;
            width: 240px;
            .price {
              font-weight: normal;
              font-size: 24px;
              line-height: 40px;
              color: #2c2c2c;
              margin-right: 12px;
            }

            .goPay {
              width: 120px;
              height: 40px;
              background: #ff9900;
              border-radius: 4px;
              font-weight: normal;
              font-size: 16px;
              line-height: 40px;
              text-align: center;
              text-transform: uppercase;
              color: #ffffff;
              cursor: pointer;
              border: 0;
              outline: 0;
              &.hasPay {
                background: #e5e5e5;
                color: #919191;
              }
            }
          }
          &.hanzi-right {
            justify-content: center;
            align-items: flex-start;
            padding-right: 24px;
            .resource {
              font-style: normal;
              font-weight: normal;
              font-size: 14px;
              line-height: 20px;
              color: #2c2c2c;
              opacity: 0.5;
              margin-bottom: 8px;
            }
            .collectTime {
              font-weight: normal;
              font-size: 14px;
              line-height: 20px;
              color: #2c2c2c;
              opacity: 0.5;
              margin: 0;
            }
          }
        }
      }
    }
  }
  .paging {
    margin-left: 16px;
    margin-top: 20px;
  }
}
</style>
<style lang="scss">
.OrderManage {
  .el-menu.el-menu--horizontal {
    border: 0;
    padding: 0 32px;
  }
  .el-menu--horizontal > .el-menu-item {
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    padding: 0;
    margin-right: 24px;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 1px solid #ff9900;
    color: #ff9900;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #ff9900;
    color: #fff;
  }
}
</style>