mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
commit message
This commit is contained in:
Chopper
32
buyer/src/pages/home/userCenter/Coupons.vue
Normal file
32
buyer/src/pages/home/userCenter/Coupons.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="优惠券列表" />
|
||||
<Coupon/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Coupon from '@/components/coupon/Coupon.vue'
|
||||
export default {
|
||||
name: 'Coupons',
|
||||
data () {
|
||||
return {
|
||||
couponsList: [ // 优惠券状态
|
||||
'未使用',
|
||||
'已使用',
|
||||
'已过期',
|
||||
'即将到期'
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {Coupon},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
451
buyer/src/pages/home/userCenter/MoneyManagement.vue
Normal file
451
buyer/src/pages/home/userCenter/MoneyManagement.vue
Normal file
@@ -0,0 +1,451 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="资金管理" />
|
||||
|
||||
<div class="box">
|
||||
<div class="mb_20 account-price">
|
||||
<span class="subTips">账户余额：</span>
|
||||
<span class="global_color mr_10" style="font-size:26px">￥{{ memberDeposit | unitPrice }}</span>
|
||||
<span class="subTips">冻结金额：</span>
|
||||
<span class="">￥{{ frozenDeposit | unitPrice}}</span>
|
||||
</div>
|
||||
<div class="account-btns">
|
||||
<Button type="primary" @click="recharge">在线充值</Button>
|
||||
<Button @click="withdrawalApply">申请提现</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Modal v-model="modal" width="530">
|
||||
<p slot="header">
|
||||
<Icon type="edit"></Icon>
|
||||
<span>充值金额</span>
|
||||
</p>
|
||||
<div>
|
||||
<Form
|
||||
ref="formData"
|
||||
:model="formData"
|
||||
label-position="left"
|
||||
:label-width="100"
|
||||
:rules="formValidate"
|
||||
>
|
||||
<FormItem label="充值金额" prop="price">
|
||||
<Input v-model="formData.price" size="large" number maxlength="9"
|
||||
><span slot="append">元</span></Input>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div slot="footer" style="text-align: center">
|
||||
<Button type="success" size="large" @click="rechargePrice">充值</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 提现申请 -->
|
||||
<Modal v-model="withdrawApplyModal" width="530">
|
||||
<p slot="header">
|
||||
<Icon type="edit"></Icon>
|
||||
<span>提现金额</span>
|
||||
</p>
|
||||
<div>
|
||||
<Form
|
||||
ref="withdrawApplyFormData"
|
||||
:model="withdrawApplyFormData"
|
||||
label-position="left"
|
||||
:label-width="100"
|
||||
:rules="withdrawApplyFormValidate"
|
||||
>
|
||||
<FormItem label="提现金额" prop="price">
|
||||
<Input
|
||||
v-model="withdrawApplyFormData.price"
|
||||
size="large"
|
||||
number
|
||||
maxlength="9"
|
||||
><span slot="append">元</span></Input>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div slot="footer" style="text-align: center">
|
||||
<Button type="success" size="large" @click="withdrawal">提现</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 余额日志 -->
|
||||
<Tabs value="log" @on-click="tabPaneChange">
|
||||
<TabPane label="余额日志" name="log">
|
||||
<Table :columns="logColumns" :data="logColumnsData.records"></Table>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="logColumnsData.total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
<!-- 充值记录 -->
|
||||
<TabPane label="充值记录" name="recharge">
|
||||
<Table
|
||||
:columns="rechargeListColumns"
|
||||
:data="rechargeListData.records"
|
||||
></Table>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="rechargeSearchForm.pageNumber"
|
||||
:total="rechargeListData.total"
|
||||
:page-size="rechargeSearchForm.pageSize"
|
||||
@on-change="rechargeChangePage"
|
||||
@on-page-size-change="rechargeChangePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
|
||||
<TabPane label="提现记录" name="withdrawApply">
|
||||
<Table
|
||||
:columns="withdrawApplyColumns"
|
||||
:data="withdrawApplyColumnsListData.records"
|
||||
></Table>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="withdrawApplySearchForm.pageNumber"
|
||||
:total="withdrawApplyColumnsListData.total"
|
||||
:page-size="withdrawApplySearchForm.pageSize"
|
||||
@on-change="withdrawChangePage"
|
||||
@on-page-size-change="withdrawChangePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import card from '@/components/card';
|
||||
import {
|
||||
getMembersWallet,
|
||||
getDepositLog,
|
||||
getRecharge,
|
||||
getWithdrawApply,
|
||||
recharge,
|
||||
withdrawalApply
|
||||
} from '@/api/member';
|
||||
export default {
|
||||
name: 'MoneyManagement',
|
||||
data () {
|
||||
return {
|
||||
frozenDeposit: 0, // 冻结余额
|
||||
memberDeposit: 0, // 余额
|
||||
|
||||
modal: false, // 余额充值
|
||||
withdrawApplyModal: false, // 提现申请
|
||||
formData: {
|
||||
// 充值金额
|
||||
price: 1
|
||||
},
|
||||
// 提现金额
|
||||
withdrawApplyFormData: {
|
||||
price: 1
|
||||
},
|
||||
// 余额日志
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
// 充值记录
|
||||
rechargeSearchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10 // 页面大小
|
||||
},
|
||||
// 提现记录
|
||||
withdrawApplySearchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10 // 页面大小
|
||||
},
|
||||
// 提现申请校验
|
||||
withdrawApplyFormValidate: {
|
||||
price: [
|
||||
{ required: true, message: '请输入大于0小于9999的合法提现金额' },
|
||||
{
|
||||
pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
|
||||
message: '请输入大于0小于9999的合法提现金额',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
formValidate: {
|
||||
price: [
|
||||
{ required: true, message: '请输入大于0小于9999的合法充值金额' },
|
||||
{
|
||||
pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
|
||||
message: '请输入大于0小于9999的合法充值金额',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 余额日志
|
||||
logColumns: [
|
||||
{
|
||||
title: '时间',
|
||||
key: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
key: 'money',
|
||||
render: (h, params) => {
|
||||
if (params.row.money > 0) {
|
||||
return h('div', [
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
color: 'green'
|
||||
}
|
||||
},
|
||||
params.row.money
|
||||
)
|
||||
]);
|
||||
} else if (params.row.money < 0) {
|
||||
return h('div', [
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
color: 'red'
|
||||
}
|
||||
},
|
||||
params.row.money
|
||||
)
|
||||
]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '变动日志',
|
||||
key: 'detail'
|
||||
}
|
||||
],
|
||||
logColumnsData: {}, // 余额日志
|
||||
// 充值记录
|
||||
rechargeListColumns: [
|
||||
{
|
||||
title: '支付单号',
|
||||
key: 'rechargeSn',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '支付方式',
|
||||
key: 'rechargeWay'
|
||||
},
|
||||
{
|
||||
title: '充值金额',
|
||||
key: 'rechargeMoney'
|
||||
},
|
||||
{
|
||||
title: '支付状态',
|
||||
key: 'payStatus',
|
||||
render: (h, params) => {
|
||||
if (params.row.payStatus === 'PAID') {
|
||||
return h('div', [h('span', {}, '已付款')]);
|
||||
} else if (params.row.payStatus === 'UNPAID') {
|
||||
return h('div', [h('span', {}, '未付款')]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '支付时间',
|
||||
key: 'payTime'
|
||||
}
|
||||
],
|
||||
rechargeListData: {}, // 充值记录数据
|
||||
// 提现记录
|
||||
withdrawApplyColumns: [
|
||||
{
|
||||
title: '提现单号',
|
||||
key: 'sn',
|
||||
width: 215
|
||||
},
|
||||
{
|
||||
title: '提现金额',
|
||||
key: 'applyMoney',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '提现状态',
|
||||
key: 'applyStatus',
|
||||
render: (h, params) => {
|
||||
if (params.row.applyStatus === 'APPLY') {
|
||||
return h('div', [h('span', {}, '申请中')]);
|
||||
} else if (params.row.applyStatus === 'VIA_AUDITING') {
|
||||
return h('div', [h('span', {}, '提现成功')]);
|
||||
} else {
|
||||
return h('div', [h('span', {}, '审核未通过')]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提现时间',
|
||||
key: 'inspectTime'
|
||||
},
|
||||
{
|
||||
title: '审核备注',
|
||||
key: 'inspectRemark'
|
||||
}
|
||||
],
|
||||
withdrawApplyColumnsListData: {} // 提现记录
|
||||
};
|
||||
},
|
||||
components: { card },
|
||||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
getMembersWallet().then((res) => {
|
||||
this.frozenDeposit = res.result.memberFrozenWallet;
|
||||
this.memberDeposit = res.result.memberWallet;
|
||||
});
|
||||
getDepositLog(this.searchForm).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
this.logColumnsData = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
tabPaneChange (v) {
|
||||
// 如果查询充值记录
|
||||
if (v === 'recharge') {
|
||||
this.getRechargeData();
|
||||
}
|
||||
// 如果是余额日志
|
||||
if (v === 'log') {
|
||||
this.init();
|
||||
}
|
||||
// 如果是提现记录
|
||||
if (v === 'withdrawApply') {
|
||||
this.getWithdrawApplyData();
|
||||
}
|
||||
},
|
||||
// 充值记录
|
||||
getRechargeData () {
|
||||
getRecharge(this.rechargeSearchForm).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
this.rechargeListData = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 提现记录
|
||||
getWithdrawApplyData () {
|
||||
getWithdrawApply(this.withdrawApplySearchForm).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
this.withdrawApplyColumnsListData = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 余额日志
|
||||
changePage (v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.init();
|
||||
},
|
||||
changePageSize (v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.init();
|
||||
},
|
||||
// 充值记录
|
||||
rechargeChangePage (v) {
|
||||
this.rechargeSearchForm.pageNumber = v;
|
||||
this.getRechargeData();
|
||||
},
|
||||
rechargeChangePageSize (v) {
|
||||
this.rechargeSearchForm.pageSize = v;
|
||||
this.getRechargeData();
|
||||
},
|
||||
// 提现记录
|
||||
withdrawChangePage (v) {
|
||||
this.withdrawApplySearchForm.pageNumber = v;
|
||||
this.getWithdrawApplyData();
|
||||
},
|
||||
withdrawChangePageSize (v) {
|
||||
this.withdrawApplySearchForm.pageSize = v;
|
||||
this.getWithdrawApplyData();
|
||||
},
|
||||
// 弹出在线充值框
|
||||
recharge () {
|
||||
this.formData.price = 1;
|
||||
this.modal = true;
|
||||
},
|
||||
// 在线充值
|
||||
rechargePrice () {
|
||||
this.$refs['formData'].validate((valid) => {
|
||||
if (valid) {
|
||||
recharge(this.formData).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
// TODO 根据返回的值跳转到收银台进行支付,一下是输出sn
|
||||
console.warn(res.result.rechargeSn);
|
||||
this.modal = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 申请提现弹出框
|
||||
withdrawalApply () {
|
||||
this.withdrawApplyFormData.price = 1;
|
||||
this.withdrawApplyModal = true;
|
||||
},
|
||||
withdrawal () {
|
||||
this.$refs['withdrawApplyFormData'].validate((valid) => {
|
||||
if (valid) {
|
||||
withdrawalApply(this.withdrawApplyFormData).then((res) => {
|
||||
if (res && res.success) {
|
||||
this.$Message.success('提现申请成功，关注提现状态');
|
||||
this.withdrawApplyModal = false;
|
||||
this.init(); // 余额查询
|
||||
this.getWithdrawApplyData(); // 提现记录
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.page-size {
|
||||
margin: 15px 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.account-price {
|
||||
font-weight: bold;
|
||||
}
|
||||
.subTips {
|
||||
@include sub_color($light_sub_color);
|
||||
}
|
||||
.account-btns {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.ivu-btn {
|
||||
margin: 0 4px;
|
||||
}
|
||||
.fontsize_48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
</style>
|
||||
142
buyer/src/pages/home/userCenter/MyTracks.vue
Normal file
142
buyer/src/pages/home/userCenter/MyTracks.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- 卡片组件 -->
|
||||
<card _Title="我的足迹" :_Size="16" ></card>
|
||||
<Button class="del-btn" @click="clearAll" type="primary">删除全部</Button>
|
||||
<!-- 订单列表 -->
|
||||
<empty v-if="list.length === 0" />
|
||||
<ul class="track-list" v-else>
|
||||
<li v-for="(item, index) in list" :key="index" @click="goodsDetail(item.id, item.goodsId)">
|
||||
<img :src="item.thumbnail" :alt="item.thumbnail" width="200" height="200">
|
||||
<p class="ellipsis">{{item.goodsName}}</p>
|
||||
<p>{{item.price | unitPrice('￥')}}</p>
|
||||
<span class="del-icon" @click.stop="clearById(item.goodsId)">
|
||||
<Icon type="md-trash" />
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tracksList, clearTracks, clearTracksById } from '@/api/member';
|
||||
export default {
|
||||
name: 'MyTrack',
|
||||
data () {
|
||||
return {
|
||||
list: [], // 我的足迹，商品列表
|
||||
spinShow: false // 控制loading是否加载
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
goodsDetail (skuId, goodsId) {
|
||||
// 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
// 跳转店铺首页
|
||||
shopPage (id) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/Merchant',
|
||||
query: { id: id }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
clearAll () { // 清除全部足迹
|
||||
this.$Modal.confirm({
|
||||
title: '删除',
|
||||
content: '<p>确定要删除全部足迹吗？</p>',
|
||||
onOk: () => {
|
||||
clearTracks().then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('删除成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel: () => { }
|
||||
});
|
||||
},
|
||||
clearById (id) { // 清除全部足迹
|
||||
clearTracksById(id).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('删除成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
getList () {
|
||||
this.spinShow = true;
|
||||
tracksList(this.params).then(res => {
|
||||
this.spinShow = false
|
||||
if (res.success && res.result) {
|
||||
this.list = res.result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.del-btn {
|
||||
margin: 0 0 10px 15px;
|
||||
}
|
||||
|
||||
.track-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
position: relative;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
box-shadow:1px 1px 3px #999;
|
||||
.del-icon{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
p{
|
||||
padding: 0 5px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
p:nth-child(2) {
|
||||
color: #999;
|
||||
}
|
||||
p:nth-child(3){
|
||||
color: $theme_color;
|
||||
}
|
||||
.del-icon {
|
||||
display: none;
|
||||
font-size: 30px;
|
||||
background-color:rgba(0,0,0,.3);
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-size {
|
||||
margin: 15px 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user