parent
e68f2b675e
commit
63a3c7020c
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin:80px 80px;text-align: left">
|
||||
<h3 style="font-size: 25px">会员充值</h3>
|
||||
<span style="color: #848484">会员充值立享多重优惠</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio-group v-model="member">
|
||||
<el-radio-button label="1">
|
||||
￥ <span style="font-size: 50px">360</span> /年
|
||||
</el-radio-button>
|
||||
<el-radio-button label="2">
|
||||
￥ <span style="font-size: 50px">180</span> /季
|
||||
</el-radio-button>
|
||||
<el-radio-button label="3">
|
||||
￥ <span style="font-size: 50px">60</span> /月
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 120px">
|
||||
<el-button class="member-btn" @click="charge" type="danger">立即充值</el-button>
|
||||
<div>
|
||||
<el-button class="member-btn-text" @click="searchHistory" type="text">查看充值历史</el-button>
|
||||
</div>
|
||||
<el-dialog title="会员充值历史" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="historyData">
|
||||
<el-table-column property="member_id" label="会员充值号" width="120"></el-table-column>
|
||||
<el-table-column property="member_start_time" label="会员开始日期" width="150"></el-table-column>
|
||||
<el-table-column property="member_end_time" label="会员结束日期" width="150"></el-table-column>
|
||||
<el-table-column property="member_money" label="充值金额（元）"></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-count="page_number"
|
||||
style="margin-top: 30px"
|
||||
@current-change="handleCurrentChange">
|
||||
</el-pagination>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookie from "js-cookie";
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
member:"0",
|
||||
dialogTableVisible:false,
|
||||
historyData:[{
|
||||
member_id:1,
|
||||
user_id:1,
|
||||
member_start_time:'',
|
||||
member_end_time:'',
|
||||
member_money:1.00,
|
||||
}],
|
||||
//分页相关
|
||||
currentPage:1,
|
||||
pageSize:8,
|
||||
page_number:1,//总页数
|
||||
total:10,//总条数
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
charge(){
|
||||
const _this=this
|
||||
let member_money1=0
|
||||
let member_period1=1.00
|
||||
if(_this.member==="0")
|
||||
_this.$message.warning('请选择充值套餐类型!')
|
||||
else{
|
||||
if (_this.member==="1"){
|
||||
member_money1=360
|
||||
member_period1=365
|
||||
}
|
||||
else if (_this.member==="2"){
|
||||
member_money1=180
|
||||
member_period1=92
|
||||
}
|
||||
else if (_this.member==="3"){
|
||||
member_money1=60
|
||||
member_period1=30
|
||||
}
|
||||
try {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: 'http://localhost:8181/member/charge',
|
||||
headers: {
|
||||
Authorization: Cookie.get('token'),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data:{
|
||||
member_money:member_money1,
|
||||
member_period:member_period1
|
||||
}
|
||||
}).then(function (response){
|
||||
if (response.data.code===200){
|
||||
_this.$message.success('充值成功！')
|
||||
}
|
||||
if (response.data.code===401){
|
||||
_this.$message.warning('身份验证失败,请重新登录!')
|
||||
}
|
||||
if (response.data.code===403){
|
||||
const message = response.data.msg;
|
||||
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
}
|
||||
});
|
||||
}catch (error){
|
||||
this.$message.warning('页面加载出错,请重试!')
|
||||
}
|
||||
}
|
||||
},
|
||||
searchHistory(){
|
||||
const _this=this
|
||||
try {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: 'http://localhost:8181/member/history',
|
||||
headers: {
|
||||
Authorization: Cookie.get('token'),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data:{
|
||||
page:_this.currentPage,
|
||||
page_size:_this.pageSize
|
||||
}
|
||||
}).then(function (response){
|
||||
if (response.data.code===200){
|
||||
_this.dialogTableVisible = true
|
||||
_this.historyData=response.data.data.history;
|
||||
_this.page_number=response.data.data.page_number;
|
||||
_this.total=response.data.data.total;
|
||||
}
|
||||
if (response.data.code===401){
|
||||
_this.$message.warning('身份验证失败,请重新登录!')
|
||||
}
|
||||
if (response.data.code===403){
|
||||
const message = response.data.msg;
|
||||
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
}
|
||||
});
|
||||
}catch (error){
|
||||
this.$message.warning('页面加载出错,请重试!')
|
||||
}
|
||||
},
|
||||
//分页
|
||||
handleCurrentChange(page) {
|
||||
this.currentPage = page;
|
||||
this.fetchData();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-radio-button__inner{
|
||||
width: 240px !important;
|
||||
height: 100px!important;
|
||||
margin-right: 80px!important;
|
||||
border: 1px solid #d4d4d4!important;
|
||||
line-height:80px!important;
|
||||
font-size: 25px!important;
|
||||
}
|
||||
.el-radio-button__inner:hover{
|
||||
color: red!important;
|
||||
}
|
||||
.el-radio-button__orig-radio:checked+.el-radio-button__inner{
|
||||
background-color: #f66d6e!important;
|
||||
border-color: #f66d6e!important;
|
||||
box-shadow: -1px 0 0 0 #f66d6e!important;
|
||||
}
|
||||
.member-btn{
|
||||
width: 180px!important;
|
||||
height: 60px!important;
|
||||
font-size: 20px!important;
|
||||
font-weight: bold!important;
|
||||
}
|
||||
.member-btn-text{
|
||||
color: #606060!important;
|
||||
}
|
||||
.member-btn-text:hover{
|
||||
color: #8c8c8c!important;
|
||||
}
|
||||
.member-btn-text:focus{
|
||||
color:#7f7f7f!important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue