pointsMall/src/views/HomeView/MyCenter.vue

<template>
    <div class="right-wrap">
        <div class="myTabs" style="background: #fff;">
            <el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="我的积分" name="first">
                    <el-radio-group v-model="firstTabPosition" style="margin-bottom: 30px;">
                        <el-radio-button v-for="(item, index) in firstTabsList" :key="index" :label="item.value"
                            @click="handleClickFirstTabs(item.value)">
                            {{ item.name }}
                        </el-radio-button>
                    </el-radio-group>
                    <div v-if="firstTabPosition == 'integralList'" class="integralList">
                        <el-select clearable style="width: 220px; margin-right: 30px;" size="small" v-model="listQuery.type"
                            placeholder="请选择积分类型">
                            <el-option v-for="item in options" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                            </el-option>
                        </el-select>
                        <el-button size="small" style="margin-right: 30px;" type="primary" @click="handleFilter">查询</el-button>
                        <el-table size="small" :data="firstList" border style="margin-top: 30px;width: 100%">
                            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
                            <el-table-column align="center" prop="integralTypeName" label="积分类型"></el-table-column>
                            <el-table-column align="center" prop="integral" label="积分"></el-table-column>
                            <el-table-column align="center" prop="createTime" label="获取时间"></el-table-column>
                        </el-table>
                        <div class="myPage">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
                                layout="total, sizes, prev, pager, next, jumper" :total="total">
                            </el-pagination>
                        </div>

                    </div>
                    <div v-else class="integralRules" v-html="integralRules"></div>
                </el-tab-pane>
                <el-tab-pane label="我的兑换" name="second">
                    <el-radio-group v-model="secondTabPosition" @change="handleClickSecondTabs">
                        <el-radio-button v-for="(item, index) in secondTabsList" :key="index" :label="item.value">
                            {{ item.name }}
                        </el-radio-button>
                    </el-radio-group>
                    <div class="gainList_container content">
                        <div class="gains_wrapper">
                            <el-empty v-if="secondList.length==0" :image-size="200"></el-empty>
                            <div v-else class="list_wrapper">
                                <div class="list">
                                    <div v-for="(item,index) in secondList" :key="index" class="item">
                                        <div class="img-wapper">
                                            <el-image
                                                :src="item.imgUrl"
                                                class="item-icon"></el-image>
                                        </div>
                                        <div class="main">
                                            <p class="goods_name" :title="item.name">{{ item.name }}</p>
                                            <div style="display: flex;justify-content: space-between;">
                                                <p class="date">
                                                    兑换时间
                                                    {{ item.createTime }}
                                                </p>
                                                <p class="date">
                                                    订单号
                                                    {{ item.orderSeq }}
                                                </p>
                                            </div>
                                            
                                            <div class="buttons" style="display: flex;justify-content: space-between;">
                                                <button class="button-item actived" @click="handleClickGoods(item.orderId)">
                                                    查看信息
                                                    <svg width="16" height="16" viewBox="0 0 16 16"
                                                        fill="none" xmlns="http://www.w3.org/2000/svg" class="arrow">
                                                        <path d="M12.5855 5.33203C13.0117 5.33203 13.2425 5.83111 12.9664 6.15586L8.38099 11.5505C8.18132 11.7854 7.81872 11.7854 7.61905 11.5505L3.0336 6.15586C2.75757 5.83111 2.98837 5.33203 3.41457 5.33203L12.5855 5.33203Z" fill="#916BE1"></path>
                                                    </svg>
                                                </button>
                                                <div class="status">
                                                    <span v-if="item.orderType==0">已兑换</span>
                                                    <span v-if="item.orderType==1">待确认</span>
                                                    <span v-if="item.orderType==2">作废</span>
                                                    <span v-if="item.orderType==3">已确认</span>
                                                    <span v-if="item.orderType==4">反馈确认中</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="我的礼品劵" name="third">
                    <div class="gainList_container content">
                        <div class="gains_wrapper">
                            <el-empty v-if="thirdList.length==0" :image-size="200"></el-empty>
                            <div v-else class="list_wrapper">
                                <div class="list">
                                    <div v-for="(item,index) in thirdList" :key="index" class="item isVirtual">
                                        <div class="img-wapper">
                                            <el-image
                                                :src="item.imgUrl"
                                                class="item-icon"></el-image>
                                        </div>
                                        <div class="main">
                                            <p class="goods_name">{{ item.title }}</p>
                                            <p class="date">
                                                兑换截止时间：
                                                {{ item.endTime }}
                                            </p>
                                            
                                        </div>
                                        <div v-if="item.status == 1" class="status">
                                            <router-link to="/home/pointsMall"  class="use-btn">
                                                <span @click="setTab">去使用</span>
                                                <i class="el-icon-arrow-right"></i>
                                            </router-link> 
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>

            </el-tabs>
        </div>

    </div>
</template>
<script scoped>
import { orderList, welfareList,notice,integralTypes,userlogs, } from "@/api/allApi";
import { getTab,setTab } from '@/utils/auth'
export default {
    data() {
        return {
            
            firstList:[],
            firstTabPosition: 'integralList',
            firstTabsList: [
                {
                    value: 'integralList',
                    name: '积分列表',
                },
                {
                    value: 'integralRules',
                    name: '积分规则',
                },
            ],
            secondList:[
               
            ],
            secondTabPosition: 'all',
            secondTabsList: [
                {
                    value: 'all',
                    name: '全部',
                },
                {
                    value: '0',
                    name: '待审核',
                },
                {
                    value: '1,4',
                    name: '待发货',
                },
                {
                    value: '3',
                    name: '已确认收货',
                },
                {
                    value: '2',
                    name: '作废',
                },
            ],
            thirdList:[],
            options: [],
            value: '',
            time: '',
            tableData: [],
            currentPage: 1,
            integralRules: '',
            activeName: 'first',
            total:0,
            listQuery: {
                page: 1,
                limit: 10,
                type:''
            },
        };
    },
    created() {
        const Tab = getTab();
        if(Tab == 'exchange'){
            this.activeName = 'second';
            this.getSecondList('0,1,2,3,4');
        };
        if(Tab == 'welfare'){
            this.activeName = 'third';
            this.getThirdList();
        };
        this.getIntegralTypes();
        this.getFirstList();
        this.getIntegralNotice();
    },
    methods: {
        setTab(){
            setTab('gift');
        },
        getIntegralNotice(){
            notice({noticeType:'integralNotice'}).then(response=>{
                this.integralRules = response.data.data.content;
            })
        },
        getIntegralTypes(){
            integralTypes({dictType:'integral_rule_type'}).then(response=>{
                this.options = response.data.data; 
            })
        },
        getFirstList(){
            userlogs(this.listQuery).then(response=>{
                this.firstList = response.data.data.items; 
                this.total = response.data.data.total;
            })
        },
        getSecondList(val){
            orderList({orderType:val}).then(response=>{
                this.secondList = response.data.data;
            })
        },
        getThirdList(){
            welfareList({status:'1'}).then(response=>{
                const dataList = response.data.data;
                dataList.forEach(element => {
                    element.imgUrl = element.relationWelfareVo.imgUrl;
                    element.title = element.relationWelfareVo.title;
                    element.startTime = element.relationWelfareVo.startTime;
                    element.endTime = element.relationWelfareVo.endTime;
                    element.welfareId = element.relationWelfareVo.welfareId;
                });
                this.thirdList = dataList;
            })
        },
        handleClickGoods(orderId) {
            this.$router.push({
                path: '/home/myCenter/goodsDetail',
                query: {
                    orderId: orderId,
                }
            });
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getFirstList();
        },
        handleSizeChange(val) {
            this.listQuery.limit = val;
            this.getFirstList();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.getFirstList();
        },
        handleClickFirstTabs(val) {
            console.log(val);
        },
        handleClickSecondTabs(val) {
            if(val=='all'){
                val = '0,1,2,3,4'
            }
            this.getSecondList(val);
        },

        handleClick(tab, event) {
            console.log('111');
            console.log(tab.name, event);
            var name = tab.name;
            if(name=='first'){
                this.getFirstList();
            }
            if(name=='second'){
                this.getSecondList('0,1,2,3,4');
            }
            if(name=='third'){
                this.getThirdList();
            }
        },
        
    }
};
</script>
<style scoped>
.right-wrap {
    width: 100%;
}
.myPage {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gainList_container {
    min-height: 560px;
}
.gainList_container .gains_wrapper {
    position: relative;
    box-sizing: border-box;
    padding-top: 20px;
    padding-left: 20px;
}
.gainList_container .gains_wrapper .list {
    display: flex;
    flex-wrap: wrap;
    margin: -20px 0 0 -20px;
}
.item.isVirtual{
    background: #f7f8fa;
    border: 1px solid #e5e6eb;
}
.item {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: calc(50% - 30px);
    min-width: 410px;
    height: 116px;
    padding-right: 6px;
    background: #fff;
    border: 1px solid #e5e6eb;
    box-sizing: border-box;
    border-radius: 4px;
    margin-right: 20px;
    margin-top: 20px;
}
.item .img-wapper {
    width: 114px;
    height: 114px;
    margin-right: 16px;
    background: #f7f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item .img-wapper .item-icon {
    max-width: 72px;
    max-height: 72px;
}
.item .main {
    flex: auto;
}
.item .date, .item .goods_name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.item .goods_name {
    max-width: 300px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 16px;
    line-height: 24px;
    color: #252933;
    padding-bottom: 4px;
}
.item p {
    margin: 0;
}
.item .date {
    white-space: nowrap;
    font-size: 14px;
    line-height: 22px;
    color: #8a919f;
}
.item .buttons {
    margin-top: 8px;
    margin-left: -8px;
    display: flex;
    align-items: center;
}
.item .button-item.actived {
    background: #f2f3f5;
    color: #8a919f;
}
.item .button-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 13px;
    padding: 0 8px;
    height: 26px;
    margin-left: 8px;
    font-weight: 500;
    background: #f2f3f5;
    border-radius: 50px;
    color: #8a919f;
    white-space: nowrap;
    border: none;
}
.item .arrow {
    width: 12px;
    height: 12px;
    margin-left: 2px;
    transform: rotate(-90deg);
}
svg:not(:root) {
    overflow: hidden;
}
.item .button-item svg path {
    fill: currentColor;
}
.status{
    margin-right: 30px;
    font-size: 13px;
}
.status.bottom{
    margin-top: 55px;
}
.status .use-btn {
    color: #1e80ff;
}
</style>