Web_QiCaiYao/pages/user/refundList.vue

<template>
  <!-- 售后退款 -->
  <div class="user-order-list">
    <div class="user-com-tab">
      <span
        class="item"
        :class="{ on: tabCur === item.key }"
        v-for="(item, index) in tabList"
        :key="index"
        @click="bindTab(item)"
      >{{ item.name }}</span>
    </div>
    <div class="order-list">
      <ul>
        <li v-for="(item, index) in orderList" :key="index">
          <div class="bd" @click="goDetail(item)">
            <div class="order-txt">订单日期: {{ item.add_time }}</div>
            <div class="content">
              <div class="goods-item" v-for="(goods, index) in item.cartInfo" :key="index">
                <div class="img-box" v-if="goods.productInfo.attrInfo">
                  <img :src="goods.productInfo.attrInfo.image" alt />
                </div>
                <div class="img-box" v-else>
                  <img :src="goods.productInfo.image" alt />
                </div>
                <div class="txtCon acea-row row-between-wrapper">
                  <div class="info-txt">
                    <div class="title line2">{{ goods.productInfo.store_name }}</div>
                    <div
                      class="info"
                      v-if="goods.productInfo.attrInfo"
                    >{{ goods.productInfo.attrInfo.suk }}</div>
                  </div>
                  <div class="cartInfo">
                    <div>¥{{goods.productInfo.attrInfo?goods.productInfo.attrInfo.price:goods.productInfo.price}}</div>
                    <div class="num">x{{ goods.cart_num }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="foot">
            <p>
              共{{ item.refund_num || 0 }}件商品，总金额
              <span>￥{{ item.refund_price }}</span>
            </p>
          </div>
          <div
            class="refund-icon iconfont icon-shenqingzhong powder"
            v-if="item.refund_type==1 ||item.refund_type==2"
          ></div>
          <div class="refund-icon iconfont icon-yijujue" v-if="item.refund_type==3"></div>
          <div class="refund-icon iconfont icon-daituihuo1 powder" v-if="item.refund_type==4"></div>
          <div class="refund-icon iconfont icon-tuikuanzhong powder" v-if="item.refund_type==5"></div>
          <div class="refund-icon iconfont icon-yituikuan" v-if="item.refund_type==6"></div>
        </li>
      </ul>
      <div class="pages-box" v-if="total > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="bindPageCur"
          :total="total"
          :current-page="page"
        ></el-pagination>
      </div>
      <div class="empty-box" v-if="orderList.length == 0">
        <img src="~assets/images/noorder.png" alt />
        <p>亲，暂无订单信息哟~</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "refundList",
  auth: "guest",
  scrollToTop: true,
  data() {
    return {
      tabList: [
        {
          key: 0,
          name: "全部"
        },
        {
          key: 1,
          name: "申请中"
        },
        {
          key: 2,
          name: "待退货"
        },
        {
          key: 3,
          name: "退款中"
        },
        {
          key: 4,
          name: "已退款"
        }
      ],
      orderStatus: -3, //订单状态
      tabCur: 0,
      orderList: [],
      total: 0,
      page: 1,
      limit: 10
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "售后/退款-" + this.$store.state.titleCon
    };
  },
  created() {},
  mounted() {
    Promise.all([this.getList()]);
  },
  methods: {
    // 选项卡
    bindTab(item) {
      this.tabCur = item.key;
      this.page = 1;
      this.getList();
    },
    // 获取订单列表
    getList() {
      this.$axios
        .get("/pc/order/refund/list", {
          params: {
            type: this.orderStatus,
            refund_type: this.tabCur,
            page: this.page,
            limit: this.limit
          }
        })
        .then(res => {
          this.orderList = res.data.list;
          this.total = res.data.count;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    // 查看详情
    goDetail(item) {
      this.$router.push({
        path: `/order_detail`,
        query: {
          orderId: item.order_id,
          isReturen: 1
        }
      });
    },
    // 分页点击
    bindPageCur(data) {
      this.page = data;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.user-com-tab {
  .item {
    padding: 0 10px;
  }
}

.user-order-list {
  li {
    position: relative;
    padding: 30px 0 26px;
    border-bottom: 1px solid #ececec;
    .refund-icon {
      position: absolute;
      right: 40px;
      top: 20px;
      font-size: 70px;
      color: rgba(40, 40, 40, 0.2);
      &.powder {
        color: rgba(233, 51, 35, 0.3);
      }
    }
    .bd {
      padding-right: 40px;
      border-bottom: 1px dashed #e1e1e1;
      cursor: pointer;

      .order-txt {
        color: #282828;
        font-size: 14px;

        .status {
          float: right;
          color: #e93323;
        }
      }

      .content {
        margin-top: 20px;

        .goods-item {
          display: flex;
          position: relative;
          margin-bottom: 20px;

          .img-box {
            width: 120px;
            height: 120px;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .txtCon {
            width: 795px;
          }

          .cartInfo {
            font-size: 14px;
            color: #999;
            text-align: right;
            .num {
              font-size: 12px;
              margin-top: 2px;
            }
          }

          .info-txt {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 500px;
            margin-left: 24px;
            font-size: 14px;
            .info {
              font-size: 12px;
              color: #aaa;
              margin-top: 4px;
            }

            .return {
              color: #e93323;
              font-size: 12px;
              margin-top: 3px;
            }

            .price {
              margin-top: 15px;
              color: #e93323;
            }

            .num {
              position: absolute;
              right: 0;
              top: 60%;
              transform: translateY(-50%);
              color: #999999;
            }
          }
        }
      }
    }

    .foot {
      padding-top: 26px;
      padding-right: 32px;

      p {
        text-align: right;
        color: #666;
        font-size: 14px;

        span {
          color: #e93323;
        }
      }

      .btn-wrapper {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;

        div {
          width: 110px;
          height: 36px;
          text-align: center;
          line-height: 34px;
          margin-left: 20px;
          border: 1px solid #999999;
          border-radius: 4px;
          font-size: 14px;
          color: #666666;
          cursor: pointer;

          &.pay {
            border-color: #e93323;
            background: #e93323;
            color: #fff;
          }
        }
      }
    }
  }
}
.pages-box {
  margin-top: 30px;
  text-align: right;
}
</style>