|
|
@@ -0,0 +1,446 @@
|
|
|
+<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">
|
|
|
+ <el-radio-button v-for="(item, index) in secondTabsList" :key="index" :label="item.value"
|
|
|
+ @click="handleClickSecondTabs(item.value)">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <div class="gainList_container content">
|
|
|
+ <div class="gains_wrapper">
|
|
|
+ <div class="list_wrapper">
|
|
|
+ <div class="list">
|
|
|
+ <div class="item">
|
|
|
+ <div class="img-wapper">
|
|
|
+ <el-image
|
|
|
+ src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8405b2af7c94893bbdb1676a32213e7~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?"
|
|
|
+ class="item-icon"></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <p class="goods_name">小铺专属反馈通道</p>
|
|
|
+ <p class="date">
|
|
|
+ 兑换时间
|
|
|
+ 2023-04-14
|
|
|
+ </p>
|
|
|
+ <div class="buttons">
|
|
|
+ <button class="button-item actived">
|
|
|
+ 查看信息
|
|
|
+ <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>待确认</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">
|
|
|
+ <div class="list_wrapper">
|
|
|
+ <div class="list">
|
|
|
+ <div class="item isVirtual">
|
|
|
+ <div class="img-wapper">
|
|
|
+ <el-image
|
|
|
+ src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8405b2af7c94893bbdb1676a32213e7~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?"
|
|
|
+ class="item-icon"></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <p class="goods_name">小铺专属反馈通道</p>
|
|
|
+ <p class="date">
|
|
|
+ 兑换时间
|
|
|
+ 2023-04-14
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <router-link 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>
|
|
|
+import { integralList, festivalList, notice, welfareType } from "@/api/allApi";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // tab 列表
|
|
|
+ firstTabPosition: 'integralList',
|
|
|
+ firstTabsList: [
|
|
|
+ {
|
|
|
+ value: 'integralList',
|
|
|
+ name: '积分列表',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'integralRules',
|
|
|
+ name: '积分规则',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ secondTabPosition: 'all',
|
|
|
+ secondTabsList: [
|
|
|
+ {
|
|
|
+ value: 'all',
|
|
|
+ name: '全部',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ name: '待确认',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ name: '已确认',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ name: '作废',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ options: [{
|
|
|
+ value: '选项1',
|
|
|
+ label: '黄金糕'
|
|
|
+ }, {
|
|
|
+ value: '选项2',
|
|
|
+ label: '双皮奶'
|
|
|
+ }, {
|
|
|
+ value: '选项3',
|
|
|
+ label: '蚵仔煎'
|
|
|
+ }, {
|
|
|
+ value: '选项4',
|
|
|
+ label: '龙须面'
|
|
|
+ }, {
|
|
|
+ value: '选项5',
|
|
|
+ label: '北京烤鸭'
|
|
|
+ }],
|
|
|
+ value: '',
|
|
|
+ time: '',
|
|
|
+ tableData: [{
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄'
|
|
|
+ }],
|
|
|
+ currentPage: 4,
|
|
|
+ integralRules: '<p>1. 掘金小铺【公益进展】最新公益活动进展在这里，感谢掘友们的大力支持</p> <p>2. 小铺商品春夏限定4月上新啦</p>',
|
|
|
+ curChosed: '1',
|
|
|
+ activeName: 'first',
|
|
|
+ goodsList: [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ imgUrl: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b186b6b25bb44c3b8ee6445432b4ddf5~tplv-k3u1fbpfcp-no-mark:0:0:0:0.image?',
|
|
|
+ name: '苹果耳机AIRPOD',
|
|
|
+ location: '洛阳',
|
|
|
+ price: '700w',
|
|
|
+ lockStock: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ imgUrl: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b186b6b25bb44c3b8ee6445432b4ddf5~tplv-k3u1fbpfcp-no-mark:0:0:0:0.image?',
|
|
|
+ name: '苹果耳机AIRPOD',
|
|
|
+ location: '洛阳',
|
|
|
+ price: '700w',
|
|
|
+ lockStock: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ imgUrl: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b186b6b25bb44c3b8ee6445432b4ddf5~tplv-k3u1fbpfcp-no-mark:0:0:0:0.image?',
|
|
|
+ name: '苹果耳机AIRPOD',
|
|
|
+ location: '洛阳',
|
|
|
+ price: '700w',
|
|
|
+ lockStock: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ imgUrl: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b186b6b25bb44c3b8ee6445432b4ddf5~tplv-k3u1fbpfcp-no-mark:0:0:0:0.image?',
|
|
|
+ name: '苹果耳机AIRPOD',
|
|
|
+ location: '洛阳',
|
|
|
+ price: '700w',
|
|
|
+ lockStock: '0',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ // this.getList(this.activeName);
|
|
|
+ // this.getNotice(this.activeName);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
+ handleClickFirstTabs(val) {
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ handleClickSecondTabs(val) {
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ getNotice(val) {
|
|
|
+ notice({ noticeType: val }).then(response => {
|
|
|
+ console.log(response.data.data);
|
|
|
+ this.noticeContent = response.data.data.content
|
|
|
+ }).catch(() => {
|
|
|
+ this.goodsList = []
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getList(val) {
|
|
|
+ if (val == 'goodsNotice') {
|
|
|
+ integralList({}).then(response => {
|
|
|
+ console.log(response.data.data);
|
|
|
+ this.goodsList = response.data.data
|
|
|
+ }).catch(() => {
|
|
|
+ this.goodsList = []
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ festivalList({ welfareId: this.curChosed }).then(response => {
|
|
|
+ console.log(response.data.data);
|
|
|
+ this.goodsList = response.data.data
|
|
|
+ }).catch(() => {
|
|
|
+ this.goodsList = []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab.name, event);
|
|
|
+ // this.getList(tab.name);
|
|
|
+ // this.getNotice(tab.name);
|
|
|
+ },
|
|
|
+ handleClickExchange(id) {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/home/pointsMall/redeem',
|
|
|
+ query: {
|
|
|
+ id: id,
|
|
|
+ activeName: this.activeName
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</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 span{
|
|
|
+
|
|
|
+}
|
|
|
+.status .use-btn {
|
|
|
+ color: #1e80ff;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.myTabs {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.myTabs .el-tabs__header {
|
|
|
+ position: sticky;
|
|
|
+ z-index: 2;
|
|
|
+ top: 80px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.myTabs .el-tabs__item {
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.myTabs .el-tabs__item.is-active {
|
|
|
+ color: #1e80ff;
|
|
|
+}
|
|
|
+
|
|
|
+.myTabs .el-tabs__active-bar {
|
|
|
+
|
|
|
+ background-color: #1e80ff;
|
|
|
+}</style>
|
