HM21St_Page_User/src/views/personalCenter/components/OrderList.vue

<template>
  <div class="my-share personal-info">
    <h2>订单管理</h2>
    <el-table
        :data="orderList"
        @sort-change="handleSort"
        :default-sort = dataSort
        v-loading="tableLoading"
        :max-height="tableHeight"
    >
        <el-table-column
            type="index"
            label="#"
            width="48"
            :index="(pageNumber-1)*pageSize+1">
        </el-table-column>
        <el-table-column
            prop="sn"
            label="交易单号"
            width="200">
        </el-table-column>
        <el-table-column
            prop="pay_time"
            label="交易时间"
            width="180"
            sortable="custom">
            <template slot-scope="scope">
                {{scope.row.pay_time?scope.row.pay_time.substring(0,16):'-'}}
            </template>
        </el-table-column>
        <el-table-column
            prop="goods_name"
            label="购买商品"
            min-width="220">
        </el-table-column>
        <el-table-column
            label="类型"
            width="72">
            <template slot-scope="scope" v-if="scope.row.goods_type>=0">
                <span class="items-type" :style="{background:typeList[scope.row.goods_type]?typeList[scope.row.goods_type].bg:'', color:typeList[scope.row.goods_type]?typeList[scope.row.goods_type].color:''}">{{typeList[scope.row.goods_type]?typeList[scope.row.goods_type].text:'-'}}</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="goods_study_phase_name"
            label="学段"
            width="64">
        </el-table-column>
        <el-table-column
            prop="study"
            label="价格"
            width="154">
            <template slot-scope="scope">
                <span class="currectPrice">￥{{scope.row.goods_price_discount?scope.row.goods_price_discount:scope.row.goods_price | cutMoneyFiter}}</span>
                <span class="oldPrice" v-if="scope.row.goods_price_discount&&scope.row.goods_price_discount!==scope.row.goods_price">(￥{{scope.row.goods_price | cutMoneyFiter}})</span>
            </template>
        </el-table-column>
        <el-table-column
            label="兑换码"
            width="160">
            <template slot-scope="scope">
                <template v-if="scope.row.is_use_discount_code=='false'">
                    未使用
                </template>
                <template v-else>
                    <span class="code" :id="'copy-'+scope.row.discount_code">{{scope.row.discount_code}}</span>
                    <svg-icon icon-class="copy" class="copy" @click="CopyToClipboard('copy-'+scope.row.discount_code)"></svg-icon>
                </template>
            </template>
        </el-table-column>
        <el-table-column
            label="支付金额"
            width="96">
            <template slot-scope="scope">
                <span v-if="scope.row.pay_amount">￥{{scope.row.pay_amount | cutMoneyFiter}}</span>
                <span v-else>-</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="pay_type_name"
            label="支付渠道"
            width="104">
        </el-table-column>
        <el-table-column
            prop="status"
            label="交易状态"
            width="112">
            <template slot-scope="scope">
                <div class="status-box">
                    <span :style="{background:statusList[scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='true'?'success2':scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='false'?'success':'refundFail'].bg}"></span>
                    <b :style="{color:statusList[scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='true'?'success2':scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='false'?'success':'refundFail'].textColor}">{{statusList[scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='true'?'success2':scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='false'?'success':'refundFail'].text}}</b>
                </div>
            </template>
        </el-table-column>
        <!-- <el-table-column
            prop="status"
            label="操作"
            width="150"
            fixed='right'>
            <template slot-scope="scope">
                <template v-if="scope.row.operate==='1'">
                    <a class="apply">申请退款</a>
                </template>
                <template v-if="scope.row.operate==='3'">
                    <a class="order-detail"><svg-icon icon-class="question-line"></svg-icon>详情</a>
                </template>
                <template v-if="scope.row.operate==='4'">
                    <a class="order-detail"><svg-icon icon-class="question-line"></svg-icon>详情</a>
                    <a class="apply">申请退款</a>
                </template>
            </template>
        </el-table-column> -->
    </el-table>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total_count">
    </el-pagination>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import { cutMoneyFiter } from '@/utils/defined';
import { getLogin } from "@/api/ajax";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { },
  props: [],
  filters:{
    cutMoneyFiter
  },
  data() {
    //这里存放数据
    return {
        pageSize: 10, 
        pageNumber: 1,
        statusList:{
            'success':{
                text:'支付成功',
                bg:'#00B42A',
                textColor:'#1D2129'
            },
            'success2':{
                text:'兑换成功',
                bg:'#165DFF',
                textColor:'#1D2129'
            },
            'refunded':{
                text:'已退款',
                bg:'#EF21DA',
                textColor:'#EF21DA'
            },
            'refundFail':{
                text:'支付失败',
                bg:'#F53F3F',
                textColor:'#F53F3F'
            },
            'refunding':{
                text:'申请退款中',
                bg:'#F53F3F',
                textColor:'#F53F3F'
            }
        },
        typeList:{
            2:{
                text:'报纸',
                color:'#165DFF',
                bg:'#E8F7FF'
            },
            // '2':{
            //     text:'画刊',
            //     color:'#F53F3F',
            //     bg:'#FFECE8'
            // },
            '3':{
                text:'精读',
                color:'#0FC6C2',
                bg:'#E8FFFB'
            },
            0:{
                text:'课程',
                color:'#722ED1',
                bg:'#F5E8FF'
            },
            1:{
                text:'课程',
                color:'#722ED1',
                bg:'#F5E8FF'
            },
            // '5':{
            //     text:'报纸专辑',
            //     color:'#165DFF',
            //     bg:'#E8F7FF'
            // },
            // '6':{
            //     text:'画刊专辑',
            //     color:'#F53F3F',
            //     bg:'#FFECE8'
            // }
        },
        orderList:[],
        total_count: 0,
        dataSort: {},
        tableLoading: false,
        tableHeight: "", // 表格高度
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {

  },
  //方法集合
  methods: {
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 260; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    handleSort(value){
        let dataSort = {
            prop: value.prop,
            order: value.order
        }
        this.dataSort = dataSort
        this.getList()
    },
    handleSizeChange(val) {
        this.pageSize = val
        this.pageNumber = 1
        this.getList()
    },
    handleCurrentChange(val) {
        this.pageNumber = val
        this.getList()
    },
    CopyToClipboard(element) {
      var doc = document,
        text = doc.getElementById(element),
        range,
        selection;
      if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) {
        selection = window.getSelection();
        range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
      document.execCommand("copy");
      this.$message({
        message: "复制成功",
        type: "success",
      });
      window.getSelection().removeAllRanges();
    },
    getList(){
        this.tableLoading = true
        let MethodName = "/ShopServer/Client/OrderManager/PageQueryMyOrderList";
        let order_column_list = []
        if(this.dataSort != {}){
            if(this.dataSort.order=='descending'){
                order_column_list = [this.dataSort.prop + ':desc']
            }else if(this.dataSort.order=='ascending'){
                // 升序不传值
                order_column_list = [this.dataSort.prop]
            }
        }
        let data = {
            page_capacity:this.pageSize,
            cur_page:this.pageNumber,
            order_column_list: order_column_list,
            pay_status:1
        }
        getLogin(MethodName, data)
        .then((res) => {
            this.tableLoading = false
            if(res.status===1){
               this.orderList = res.order_list
               this.total_count = res.total_count
            }
        })
        .catch(() => {
            this.tableLoading = false
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableHeight()
    this.getList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.my-share{
    background: #FFFFFF;
    border-radius: 4px;
    padding: 24px;
    h2{
        font-weight: 500;
        font-size: 20px;
        line-height: 28px;
        color: #1D2129;
        margin: 0;
    }
    .el-table{
        margin: 24px 0;
        max-width: 100%;
    }
    .el-pagination{
        text-align: right;
    }
    .status-box{
        display: flex;
        align-items: center;
        span{
            width: 6px;
            height: 6px;
            border-radius: 3px;
            margin-right: 8px;
            margin-top: 2px;
        }
        b{
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: #1D2129;
        }
    }
    .order-detail{
        color: #165DFF;
        margin-right: 8px;
    }
    .apply{
        font-size: 14px;
        line-height: 22px;
        color: #86909C;
    }
    .items-type{
        padding: 1px 8px;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        border-radius: 2px;
    }
    .oldPrice{
        color: #86909C;
        margin-left: 8px;
    }
    .code{
        color: #175DFF;
    }
    .copy{
        color: #C9CDD4;
        margin-left: 8px;
        cursor: pointer;
    }
}
</style>