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.
429 lines
10 KiB
429 lines
10 KiB
<template>
|
|
<!-- 账号语=余额 -->
|
|
<div class="balance">
|
|
<div class="user-com-titl">
|
|
<div class="l">
|
|
账户余额
|
|
<div class="xxtext">
|
|
<img src="~assets/images/money.png" alt srcset />
|
|
当前余额：{{ BalanceInfo.balance }}
|
|
</div>
|
|
</div>
|
|
<!-- <div class="r">
|
|
<el-button size="mini" @click="dialogShow">充值</el-button>
|
|
</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="remark" 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>
|
|
<DialogSlot
|
|
:tipsText="tipsText"
|
|
:dialogSlotShow.sync="dialogSlotShow"
|
|
@clickConfirm="clickConfirm"
|
|
@clickCancel="clickCancel"
|
|
:confirmBtnShow="confirmBtnShow"
|
|
:cancelText="cancelText"
|
|
width="432px"
|
|
>
|
|
<template v-slot:contentSlot>
|
|
<div v-if="state == 1">
|
|
<el-form :model="form" ref="form" label-width="120px" hide-required-asterisk>
|
|
<el-form-item
|
|
label="充值金额"
|
|
prop="monery"
|
|
type="number"
|
|
:rules="[{ required: true, message: '金额不能为空' }]"
|
|
>
|
|
<el-input
|
|
v-model.number="form.monery"
|
|
autocomplete="off"
|
|
clearable
|
|
></el-input>
|
|
<div class="czText">充值500送60优惠券：充值1000送180优惠券</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="请选择支付方式" prop="moneryType">
|
|
<div class="zf" style="margin-top: 8px">
|
|
<div class="l">
|
|
<el-radio v-model="payType" :label="1">
|
|
<div class="radio">
|
|
<img src="~assets/images/wxpay.png" alt />
|
|
<p>微信</p>
|
|
</div>
|
|
</el-radio>
|
|
</div>
|
|
<span class="rr">
|
|
<span>使用微信扫描二维码即可付款</span>
|
|
</span>
|
|
</div>
|
|
<div class="zf" style="margin-top: 20px">
|
|
<div class="l">
|
|
<el-radio v-model="payType" :label="2">
|
|
<div class="radio">
|
|
<img src="~assets/images/AlipayTag.png" alt />
|
|
<p>支付宝</p>
|
|
</div>
|
|
</el-radio>
|
|
</div>
|
|
<span class="rr">使用手机支付宝扫描二维码付款</span>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div v-if="state == 2" class="smzf">
|
|
<div class="code">
|
|
<img src="~assets/images/code.png" alt />
|
|
</div>
|
|
<p>请使用微信“扫一扫”扫描二维码支付</p>
|
|
</div>
|
|
<div v-if="state == 3" class="zfcg">
|
|
<div class="code">
|
|
<img src="~assets/images/paySuccess.png" alt />
|
|
</div>
|
|
<p>充值成功</p>
|
|
</div>
|
|
</template>
|
|
</DialogSlot>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "integral",
|
|
auth: "guest",
|
|
data() {
|
|
return {
|
|
BalanceInfo: {},
|
|
cancelText: "取消",
|
|
confirmBtnShow: true,
|
|
tipsText: "充值",
|
|
state: 1,
|
|
payType: undefined,
|
|
form: {
|
|
monery: undefined,
|
|
},
|
|
dialogSlotShow: false,
|
|
value1: "",
|
|
contentText:
|
|
"规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容",
|
|
page: 1,
|
|
limit: 5,
|
|
total: 0,
|
|
tableData: [],
|
|
};
|
|
},
|
|
fetch({ store }) {
|
|
store.commit("isHeader", true);
|
|
store.commit("isFooter", true);
|
|
},
|
|
head() {
|
|
return {
|
|
title: "账户余额-" + this.$store.state.titleCon,
|
|
};
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.getBalanceInfo();
|
|
this.getBalanceList();
|
|
},
|
|
methods: {
|
|
dialogShow() {
|
|
this.dialogSlotShow = true;
|
|
this.form.monery = sessionStorage.getItem("pay_monery");
|
|
},
|
|
clickConfirm() {
|
|
this.tipsText = "微信扫码支付";
|
|
this.state = 2;
|
|
this.confirmBtnShow = false;
|
|
this.cancelText = "返回";
|
|
// this.dialogSlotShow = false;
|
|
sessionStorage.setItem("pay_monery", this.form.monery);
|
|
this.$refs["form"].validate((valid) => {
|
|
if (valid) {
|
|
this.dialogSlotShow = false;
|
|
this.state = 1;
|
|
alert("submit!");
|
|
} else {
|
|
console.log("error submit!!");
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
clickCancel() {
|
|
this.confirmBtnShow = true;
|
|
this.dialogSlotShow = false;
|
|
this.state = 1;
|
|
},
|
|
// 查询账户余额
|
|
getBalanceInfo() {
|
|
this.$axios
|
|
.post("/memberaccount/info")
|
|
.then((res) => {
|
|
this.BalanceInfo = res.data;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 查询账户余额流水
|
|
getBalanceList() {
|
|
let obj = {
|
|
page: this.page,
|
|
page_size: this.limit,
|
|
account_type: "balance",
|
|
};
|
|
this.$axios
|
|
.post(`/memberaccount/page`, obj)
|
|
.then((res) => {
|
|
this.tableData = res.data.list;
|
|
this.total = res.data.count;
|
|
console.log(this.tableData);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 分页点击
|
|
currentChange(e) {
|
|
this.page = e;
|
|
this.getBalanceList();
|
|
},
|
|
clickgz() {
|
|
this.$refs.dialog.dialogShow = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep {
|
|
.el-radio {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.balance {
|
|
padding: 0 30px;
|
|
.user-com-titl {
|
|
display: flex;
|
|
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;
|
|
margin-left: 40px;
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.czText {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
background: #fff5eb;
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ff7d02;
|
|
margin-top: 14px;
|
|
text-align: center;
|
|
letter-spacing: 1px;
|
|
}
|
|
.zf {
|
|
width: 100%;
|
|
.l {
|
|
display: flex;
|
|
align-items: center;
|
|
.radio {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
p {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
}
|
|
}
|
|
.rr {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-left: 54px;
|
|
}
|
|
}
|
|
.smzf {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.code {
|
|
width: 186px;
|
|
height: 186px;
|
|
border: 1px solid #e0e0e0;
|
|
im {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
margin: 20px 0 30px;
|
|
}
|
|
}
|
|
.zfcg {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.code {
|
|
width: 110px;
|
|
height: 110px;
|
|
im {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #585858;
|
|
margin: 30px 0 50px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|