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">
                            {{ 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: 960px">
                            <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="积分">
                                <template slot-scope="scope">
                                    <span style="color: #67C23A;font-weight: 600;font-size: 14px;" v-if="scope.row.pm == 0">
                                        + {{ scope.row.integral }}
                                    </span>
                                    <span style="color: #F56C6C;font-weight: 600;font-size: 14px;" v-else>
                                        - {{ scope.row.integral }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="comment" 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.couponImg"
                                                class="item-icon"></el-image>
                                        </div>
                                        <div class="main">
                                            <p class="goods_name">{{ item.couponName }}</p>
                                            <p class="date">
                                                兑换截止时间：
                                                {{ item.enableEndTime }}
                                            </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-tab-pane label="参与活动记录" name="fourth">
                    <el-radio-group v-model="fourthTabPosition" style="margin-bottom: 30px;" @change="handleClickTabs">
                        <el-radio-button v-for="(item, index) in fourthTabsList" :key="index" :label="item.value">
                            {{ item.name }}
                        </el-radio-button>
                    </el-radio-group>
                    <div v-if="fourthTabPosition == '1'">
                        <el-date-picker
                        style="width: 220px; margin-right: 30px;"
                        size="small"
                        class="filter-item"
                        value-format="yyyy-MM-dd"
                        v-model="listQuery.createTime"
                        type="date"
                        placeholder="答题日期">
                        </el-date-picker>
                        <el-button size="small" style="margin-right: 30px;" type="primary" @click="handleFilterAnswerList">查询</el-button>
                        <el-empty v-if="answerList.length==0" :image-size="200"></el-empty>
                        <div v-else>
                            <el-table size="small" :data="answerList" border style="margin-top: 30px;width: 960px">
                                <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
                                <el-table-column align="center" prop="answerDate" label="答题时间"></el-table-column>
                                <el-table-column align="center" prop="answerTime" label="用时(毫秒)"></el-table-column>
                                <el-table-column align="center" prop="rightQuantities" label="正确数"></el-table-column>
                                <el-table-column align="center" prop="rownum" label="当前排名"></el-table-column>
                            </el-table>
                            <div class="myPage">
                                <el-pagination @size-change="handleSizeChangeAnswerList" @current-change="handleCurrentChangeAnswerList"
                                    :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>
                    <div v-if="fourthTabPosition == '2'">
                        <el-date-picker
                        style="width: 220px; margin-right: 30px;"
                        size="small"
                        class="filter-item"
                        value-format="yyyy-MM-dd"
                        v-model="listQuery.createTime"
                        type="date"
                        placeholder="抽奖日期">
                        </el-date-picker>
                        <el-button size="small" style="margin-right: 30px;" type="primary" @click="handleFilterPrizeList">查询</el-button>
                        <el-empty v-if="prizeList.length==0" :image-size="200"></el-empty>
                        <div v-else>
                            <el-table size="small" :data="prizeList" border style="margin-top: 30px;width: 960px">
                                <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
                                <el-table-column align="center" prop="createTime" label="得奖时间"></el-table-column>
                                <el-table-column align="center" prop="actTitle" label="活动名称"></el-table-column>
                                <el-table-column align="center" prop="prizeName" label="奖品"></el-table-column>
                            </el-table>
                            <div class="myPage">
                                <el-pagination @size-change="handleSizeChangePrizeList" @current-change="handleCurrentChangePrizeList"
                                    :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>
                    <div v-if="fourthTabPosition == '3'">
                        <!-- <el-date-picker
                        style="width: 220px; margin-right: 30px;"
                        size="small"
                        class="filter-item"
                        v-model="listQuery.createTime"
                        type="week"
                        format="yyyy 第 WW 周"
                        value-format="yyyy-MM-dd"
                        placeholder="选择周">
                        </el-date-picker> -->
                        <el-date-picker
                        style="width: 220px; margin-right: 30px;"
                        size="small"
                        class="filter-item"
                        value-format="yyyy-MM-dd"
                        v-model="listQuery.createTime"
                        type="date"
                        placeholder="游戏日期">
                        </el-date-picker>
                        <el-input placeholder="请输入游戏标题" clearable style="width: 220px; margin-right: 30px;" size="small" class="filter-item" v-model="listQuery.title"></el-input>
                        <el-button size="small" style="margin-right: 30px;" type="primary" @click="handleFilterGameLogList">查询</el-button>
                        <el-empty v-if="gameLogList.length==0" :image-size="200"></el-empty>
                        <div v-else>
                            <el-table size="small" :data="gameLogList" border style="margin-top: 30px;width: 960px">
                                <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
                                <el-table-column align="center" prop="title" label="游戏标题"></el-table-column>
                                <el-table-column align="center" prop="createTime" label="游戏时间"></el-table-column>
                                <el-table-column align="center" prop="actuaMoney" label="得分"></el-table-column>
                                <!-- <el-table-column align="center" prop="rownum" label="排名"></el-table-column> -->
                            </el-table>
                            <div class="myPage">
                                <el-pagination @size-change="handleSizeChangeGameLogList" @current-change="handleCurrentChangeGameLogList"
                                    :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>
                    <div v-if="fourthTabPosition == '4'">
                        <el-date-picker
                        style="width: 220px; margin-right: 30px;"
                        size="small"
                        class="filter-item"
                        value-format="yyyy-MM-dd"
                        v-model="listQuery.createTime"
                        type="date"
                        placeholder="互动日期">
                        </el-date-picker>
                        <el-button size="small" style="margin-right: 30px;" type="primary" @click="handleFilterPostList">查询</el-button>
                        <el-empty v-if="postList.length==0" :image-size="200"></el-empty>
                        <div v-else>
                            <el-table size="small" :data="postList" border style="margin-top: 30px;width: 960px">
                                <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
                                <el-table-column align="center" min-width="100px" label="标题" prop="title">
                                </el-table-column>
                                <el-table-column align="center" min-width="80px" label="类型" prop="typeName">
                                </el-table-column>
                                <el-table-column align="center" min-width="80px" label="积分" prop="integral">
                                </el-table-column>
                                <el-table-column align="center" min-width="100px" label="截止日期" prop="deadline">
                                </el-table-column>
                                <el-table-column align="center" min-width="100px" label="创建日期" prop="createTime">
                                </el-table-column>
                                <el-table-column align="center" min-width="80px" label="状态" prop="complateStatusName">
                                </el-table-column>
                            </el-table>
                            <div class="myPage">
                                <el-pagination @size-change="handleSizeChangePostList" @current-change="handleCurrentChangePostList"
                                    :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>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>
<script scoped>
import { orderList, myWelfareList,notice,integralTypes,userlogs,answerList,prizeList,gameLogList,postList } from "@/api/allApi";
import { getTab,setTab } from '@/utils/auth'
export default {
    data() {
        return {
            answerList:[],
            prizeList:[],
            gameLogList:[],
            postList:[],
            firstList:[],
            firstTabPosition: 'integralList',
            firstTabsList: [
                {
                    value: 'integralList',
                    name: '积分列表',
                },
                {
                    value: 'integralRules',
                    name: '积分规则',
                },
            ],
            fourthTabPosition:'1',
            fourthTabsList: [
                {
                    value: '1',
                    name: '答题',
                },
                {
                    value: '2',
                    name: '抽奖',
                },
                {
                    value: '3',
                    name: '游戏',
                },
                {
                    value: '4',
                    name: '互动',
                },
            ],
            
            secondList:[
               
            ],
            secondTabPosition: 'all',
            secondTabsList: [
                {
                    value: 'all',
                    name: '全部',
                },
                {
                    value: '0',
                    name: '待审核',
                },
                {
                    value: '1',
                    name: '待发货',
                },
                {
                    value: '3',
                    name: '待收货',
                },
                {
                    value: '4',
                    name: '已收货',
                },
                {
                    value: '2',
                    name: '作废',
                },
            ],
            thirdList:[],
            options: [],
            value: '',
            time: '',
            tableData: [],
            currentPage: 1,
            integralRules: '',
            activeName: 'first',
            total:0,
            listQuery: {
                page: 1,
                limit: 10,
                type:'',
                title:'',
                createTime:''
            },
        };
    },
    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: {
        getAnswerList(){
            answerList(this.listQuery).then(response=>{
                this.answerList = response.data.data.items; 
                this.total = response.data.data.total;
            })
        },
        getPrizeList(){
            prizeList(this.listQuery).then(response=>{
                this.prizeList = response.data.data.items; 
                this.total = response.data.data.total;
            })
        },
        getGameLogList(){
            gameLogList(this.listQuery).then(response=>{
                this.gameLogList = response.data.data.items; 
                this.total = response.data.data.total;
            })
        },
        getPostList(){
            postList(this.listQuery).then(response=>{
                this.postList = response.data.data.items; 
                this.total = response.data.data.total;
            })
        },
        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(){
            myWelfareList().then(response=>{
                const dataList = response.data.data;
                dataList.forEach(element => {
                    element.couponImg = element.couponVo.couponImg;
                    element.couponName = element.couponVo.couponName;
                    element.enableEndTime = element.couponVo.enableEndTime;
                });
                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();
        },
        //答题
        handleFilterAnswerList() {
            this.listQuery.page = 1
            this.getAnswerList();
        },
        handleSizeChangeAnswerList(val) {
            this.listQuery.limit = val;
            this.getAnswerList();
        },
        handleCurrentChangeAnswerList(val) {
            this.listQuery.page = val;
            this.getAnswerList();
        },
        //抽奖
        handleFilterPrizeList() {
            this.listQuery.page = 1
            this.getPrizeList();
        },
        handleSizeChangePrizeList(val) {
            this.listQuery.limit = val;
            this.getPrizeList();
        },
        handleCurrentChangePrizeList(val) {
            this.listQuery.page = val;
            this.getPrizeList();
        },
        //游戏
        handleFilterGameLogList() {
            this.listQuery.page = 1
            this.getGameLogList();
        },
        handleSizeChangeGameLogList(val) {
            this.listQuery.limit = val;
            this.getGameLogList();
        },
        handleCurrentChangeGameLogList(val) {
            this.listQuery.page = val;
            this.getGameLogList();
        },
        //互动
        handleFilterPostList() {
            this.listQuery.page = 1
            this.getPostList();
        },
        handleSizeChangePostList(val) {
            this.listQuery.limit = val;
            this.getPostList();
        },
        handleCurrentChangePostList(val) {
            this.listQuery.page = val;
            this.getPostList();
        },

        handleClickTabs(val) {
            this.total = 0;
            this.listQuery = {
                page: 1,
                limit: 10,
                type:'',
                createTime:''
            };
            if(val=='1'){
                this.getAnswerList();
            }
            if(val=='2'){
                this.getPrizeList();
            }
            if(val=='3'){
                this.getGameLogList();
            }
            if(val=='4'){
                this.getPostList();
            }
        },

        handleClickSecondTabs(val) {
            if(val=='all'){
                val = '0,1,2,3,4'
            }
            this.getSecondList(val);
        },

        handleClick(tab) {
            this.total = 0;
            this.listQuery = {
                page: 1,
                limit: 10,
                type:'',
                createTime:''
            };
            var name = tab.name;
            if(name=='first'){
                this.getFirstList();
            }
            if(name=='second'){
                this.getSecondList('0,1,2,3,4');
            }
            if(name=='third'){
                this.getThirdList();
            }
            if(name=='fourth'){
                this.getAnswerList();
            }
        },
        
    }
};
</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>