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 style="width: 220px; margin-right: 30px;" size="small" v-model="value"
                            placeholder="请选择积分类型">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                        <el-date-picker style="width: 220px; margin-right: 30px;" size="small" v-model="time" type="date"
                            placeholder="选择日期"></el-date-picker>
                        <el-button size="small" style="margin-right: 30px;" type="primary">查询</el-button>
                        <el-button size="small" type="default">重置</el-button>
                        <el-table size="small" :data="tableData" 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="date" label="积分类型"></el-table-column>
                            <el-table-column align="center" prop="name" label="积分"></el-table-column>
                            <el-table-column align="center" prop="address" 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="40">
                            </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">{{ item.name }}</p>
                                            <p class="date">
                                                兑换时间
                                                {{ item.createTime }}
                                            </p>
                                            <div class="buttons">
                                                <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>
                                        </div>
                                        <div class="status bottom">
                                            <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>
                                        </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 class="status">
                                            <router-link v-if="item.status == 1" to="/home/pointsMall" class="use-btn">
                                                去使用
                                                <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, } from "@/api/allApi";
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',
                    name: '待确认',
                },
                {
                    value: '3',
                    name: '已确认',
                },
                {
                    value: '2',
                    name: '作废',
                },
            ],
            thirdList:[],
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            time: '',
            tableData: [],
            currentPage: 4,
            integralRules: '<p>1. 掘金小铺【公益进展】最新公益活动进展在这里，感谢掘友们的大力支持</p> <p>2. 小铺商品春夏限定4月上新啦</p>',
            activeName: 'second',
        };
    },
    created() {
        
        this.getSecondList('1,2,3');
        this.getThirdList();
    },
    methods: {
        getFirstList(val){

        },
        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,
                }
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleClickFirstTabs(val) {
            console.log(val);
        },
        handleClickSecondTabs(val) {
            if(val=='all'){
                val = '0,1,2,3'
            }
            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');
            }
            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 {
    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>