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

<template>
  <div class="my-share personal-info">
    <h2>订单管理</h2>
    <el-table
        :data="orderList"
    >
        <el-table-column
            type="index"
            label="#"
            width="48">
        </el-table-column>
        <el-table-column
            prop="orderNumber"
            label="交易单号"
            width="128">
        </el-table-column>
        <el-table-column
            prop="time"
            label="交易时间"
            width="144"
            sortable>
        </el-table-column>
        <el-table-column
            prop="title"
            label="购买商品"
            min-width="220">
        </el-table-column>
        <el-table-column
            label="商品类型"
            width="128">
            <template slot-scope="scope">
                <span class="items-type" :style="{background:typeList[scope.row.type].bg, color:typeList[scope.row.type].color}">{{typeList[scope.row.type].text}}</span>
                
            </template>
        </el-table-column>
        <el-table-column
            prop="study"
            label="学段"
            width="64">
        </el-table-column>
        <el-table-column
            prop="study"
            label="价格"
            width="154">
            <template slot-scope="scope">
                <span class="currectPrice">￥{{scope.row.currectPrice | cutMoneyFiter}}</span>
                <span class="oldPrice">(￥{{scope.row.oldPrice | cutMoneyFiter}})</span>
            </template>
        </el-table-column>
        <el-table-column
            label="兑换码"
            width="144">
            <template slot-scope="scope">
                <template v-if="scope.row.code=='未使用'">
                    {{scope.row.code}}
                </template>
                <template v-else>
                    <span class="code" :id="'copy-'+scope.row.orderNumber">{{scope.row.code}}</span>
                    <svg-icon icon-class="copy" class="copy" @click="CopyToClipboard('copy-'+scope.row.orderNumber)"></svg-icon>
                </template>
            </template>
        </el-table-column>
        <el-table-column
            label="支付金额"
            width="96">
            <template slot-scope="scope">
                <span>￥{{scope.row.payPrice | cutMoneyFiter}}</span>
            </template>
        </el-table-column>
        <el-table-column
            label="支付渠道"
            width="104">
            <template slot-scope="scope">
                {{scope.row.paymentChannel?scope.row.paymentChannel:'-'}}
            </template>
        </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.status].bg}"></span>
                    <b :style="{color:statusList[scope.row.status].textColor}">{{statusList[scope.row.status].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';
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:{
            '1':{
                text:'报纸',
                color:'#165DFF',
                bg:'#E8F7FF'
            },
            '2':{
                text:'画刊',
                color:'#F53F3F',
                bg:'#FFECE8'
            },
            '3':{
                text:'练习',
                color:'#0FC6C2',
                bg:'#E8FFFB'
            },
            '4':{
                text:'课程',
                color:'#722ED1',
                bg:'#F5E8FF'
            },
            '5':{
                text:'报纸专辑',
                color:'#165DFF',
                bg:'#E8F7FF'
            },
            '6':{
                text:'画刊专辑',
                color:'#F53F3F',
                bg:'#FFECE8'
            }
        },
        orderList:[
            {
                orderNumber:'1234123124124',
                title:'第 856 期 TEENS SENIOR 2',
                time:'2021-12-12 15:32',
                type:'1',
                study:'高二',
                currectPrice:'12.00',
                oldPrice:'16.00',
                payPrice:'12.00',
                code:'未使用',
                paymentChannel:'支付宝',
                status:'success',
                operate:'1',// 支付成功且没有使用优惠码 申请退款
            },
            {
                orderNumber:'1234123124124',
                title:'第 856 期 TEENS SENIOR 2',
                time:'2021-12-12 15:32',
                type:'2',
                study:'高二',
                currectPrice:'12',
                oldPrice:'16',
                payPrice:'12',
                code:'398629081',
                paymentChannel:'-',
                status:'success2',
                operate:'2',// 使用兑换码 无操作
            },
            {
                orderNumber:'1234123124124',
                title:'第 856 期 TEENS SENIOR 2',
                time:'2021-12-12 15:32',
                type:'1',
                study:'高二',
                currectPrice:'12',
                oldPrice:'16',
                payPrice:'12',
                code:'未使用',
                paymentChannel:'微信支付',
                status:'success', // 已退款
                operate:'1',//已退款 详情
            },
            {
                orderNumber:'1234123124124',
                title:'第 856 期 TEENS SENIOR 2',
                time:'2021-12-12 15:32',
                type:'1',
                study:'高二',
                currectPrice:'12',
                oldPrice:'16',
                payPrice:'12',
                code:'未使用',
                paymentChannel:'支付宝',
                status:'success',
                operate:'2',//退款失败  详情+申请退款
            },
            {
                orderNumber:'1234123124124',
                title:'第 856 期 TEENS SENIOR 2',
                time:'2021-12-12 15:32',
                type:'2',
                study:'高二',
                currectPrice:'12',
                oldPrice:'16',
                payPrice:'12',
                code:'未使用',
                paymentChannel:'支付宝',
                status:'success2',
                operate:'1',//退款中 
            }
        ],
        total_count: 0
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {

  },
  //方法集合
  methods: {
    handleSizeChange(val) {
        this.pageSize = val
    },
    handleCurrentChange(val) {
        this.pageNumber = val
    },
    // 跳转文章
    handleLink(row){

    },
    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();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问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>