You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
337 lines
8.2 KiB
337 lines
8.2 KiB
<template>
|
|
<!-- 我的积分 -->
|
|
<div class="integral">
|
|
<div class="user-com-titl">
|
|
<div class="l">
|
|
我的积分
|
|
<div class="xxtext">
|
|
<img src="~assets/images/xx.png" alt srcset />
|
|
当前积分：{{ IntegralInfo.point }}
|
|
</div>
|
|
</div>
|
|
<div class="r" @click="clickgz">
|
|
<img src="~assets/images/gz.png" alt />
|
|
积分规则
|
|
</div>
|
|
</div>
|
|
<div style="margin: 20px 0">
|
|
<el-date-picker
|
|
v-model="value1"
|
|
type="datetimerange"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:default-time="['12:00:00']"
|
|
></el-date-picker>
|
|
</div>
|
|
|
|
<div>
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%"
|
|
:header-cell-style="{ background: '#FAFAFA' }"
|
|
>
|
|
<el-table-column
|
|
prop="type_name"
|
|
label="收入/支出"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column prop="create_time" label="时间" align="center" width="160">
|
|
<template slot-scope="scope">{{
|
|
$dayjs(scope.row.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
|
|
}}</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="account_data"
|
|
label="积分数量"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<Page
|
|
@currentChange="currentChange"
|
|
:total="total"
|
|
:pageSize="limit"
|
|
:currentPage="page"
|
|
></Page>
|
|
|
|
<el-dialog
|
|
title="提示"
|
|
:visible.sync="dialogRuler"
|
|
width="30%"
|
|
:show-close="false"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
>
|
|
<div slot="title" style="display: flex; margin-top: 20px">
|
|
<img
|
|
style="width: 24px; height: 24px; margin-right: 10px"
|
|
src="~assets/images/Tips.png"
|
|
alt
|
|
/>
|
|
<div class="tipsTexe">签到规则</div>
|
|
</div>
|
|
<div class="gz">
|
|
<div class="gztext">
|
|
<p>
|
|
1.连续签到{{
|
|
awardData.cycle
|
|
}}天为一个周期，连续签到天数签满一个周期或者签到中断，将清空连签天数重新计算签到天数
|
|
</p>
|
|
<div v-for="(item, index) in awardData.reward" :key="index">
|
|
<p v-if="index == 0">
|
|
2.每{{ item.day == 1 ? "日" : item.day }}天签到奖励: {{ item.point }}积分
|
|
{{ item.growth }}成长值
|
|
<span></span>
|
|
</p>
|
|
<p v-if="index == 1">
|
|
3.连续签到{{ item.day }}天额外奖励: {{ item.point }}积分
|
|
{{ item.growth }}成长值
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogRuler = false" size="small">知道了</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<Dialog
|
|
ref="dialog"
|
|
:contentText="contentText"
|
|
:cancleBtnShow="cancleBtnShow"
|
|
></Dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "integral",
|
|
auth: "guest",
|
|
data() {
|
|
return {
|
|
dialogRuler: false,
|
|
awardData: {},
|
|
cancleBtnShow: false,
|
|
value1: "",
|
|
contentText:
|
|
"规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容",
|
|
page: 1,
|
|
limit: 5,
|
|
total: 0,
|
|
IntegralInfo: {},
|
|
tableData: [
|
|
{
|
|
date: "签到",
|
|
name: "1984-08-02 19:23:12",
|
|
address: "+230",
|
|
},
|
|
{
|
|
date: "签到",
|
|
name: "1984-08-02 19:23:12",
|
|
address: "+230",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
fetch({ store }) {
|
|
store.commit("isHeader", true);
|
|
store.commit("isFooter", true);
|
|
},
|
|
head() {
|
|
return {
|
|
title: "我的积分-" + this.$store.state.titleCon,
|
|
};
|
|
},
|
|
created() {
|
|
this.getIntegralList();
|
|
this.getIntegralInfo();
|
|
this.getAward();
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
// 获取规则
|
|
getAward() {
|
|
this.$axios
|
|
.post(`/membersignin/award`)
|
|
.then((res) => {
|
|
this.awardData = res.data;
|
|
console.log(res.data, `award`);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
getIntegralInfo() {
|
|
let obj = {
|
|
account_type: "point",
|
|
};
|
|
this.$axios.post("/memberaccount/info", obj).then((res) => {
|
|
this.IntegralInfo = res.data;
|
|
console.log(this.IntegralInfo, `pointInfo`);
|
|
});
|
|
},
|
|
getIntegralList() {
|
|
let obj = {
|
|
page: this.page,
|
|
page_size: this.limit,
|
|
account_type: "point",
|
|
};
|
|
this.$axios
|
|
.post(`/memberaccount/page`, obj)
|
|
.then((res) => {
|
|
this.tableData = res.data.list;
|
|
this.total = res.data.count;
|
|
console.log(res, `point`);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
clickgz() {
|
|
this.dialogRuler = true;
|
|
// this.$refs.dialog.dialogShow = true;
|
|
},
|
|
// 分页点击
|
|
currentChange(e) {
|
|
this.page = e;
|
|
this.getIntegralList();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.integral {
|
|
padding: 0 30px;
|
|
.user-com-titl {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #ececec;
|
|
|
|
.l {
|
|
display: flex;
|
|
height: 60px;
|
|
font-size: 18px;
|
|
color: #282828;
|
|
display: flex;
|
|
align-items: center;
|
|
.xxtext {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20px;
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ff7d02;
|
|
}
|
|
}
|
|
.r {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
img {
|
|
width: 17px;
|
|
height: 17px;
|
|
margin-right: 8px;
|
|
}
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
ul {
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
li {
|
|
width: 290px;
|
|
height: 142px;
|
|
background: #fbfbfb;
|
|
border-radius: 8px;
|
|
border: 1px solid #e7e7e7;
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
cursor: pointer;
|
|
|
|
.left {
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
.right {
|
|
margin-left: 20px;
|
|
.title {
|
|
width: 160px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
// 必须加不然隐藏不了
|
|
/*! autoprefixer: ignore next */
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
p {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
margin-top: 10px;
|
|
}
|
|
.cad {
|
|
margin-top: 13px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.l {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
span {
|
|
color: #ff1919;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.gz {
|
|
p {
|
|
margin: 20px 0 10px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 20px;
|
|
}
|
|
.gztext {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
padding-bottom: 20px;
|
|
line-height: 22px;
|
|
p {
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|