store-new/pagesA/pages/capital-manage/capital-manage.vue

<template>
	<view class="capital">
		<view class="cap_bg">
			<view class="bg_con">
				<view class="bg_up">
					<view class="bank_info flexS">
						<view class="title">可提现</view>
						<text>{{ store.account_bank===null?'未绑定银行卡':store.account_bank}}</text>
						<text v-if="store.account_number">（{{store.account_number|hideMiddle(4)}})</text>
					</view>
					<view class="flexB" style="margin-top: 20rpx;">
						<view class="money">
							<text>¥</text>
							<text
								v-if="account&&account.available_amount">{{ account.available_amount | blanceFmt }}</text>
							<text v-else>0</text>
						</view>
						<!-- 	<view class="bg_btn" @click="store.account_bank===null?skipBank():withdraw()"
							v-if="account&&account.available_amount">
							{{store.account_bank===null?'添加银行卡':'去提现'}}
						</view> -->
						<view class="bg_btn" @click="store.account_bank===null?skipBank():withdraw()">
							{{store.account_bank===null?'添加银行卡':'去提现'}}
						</view>
					</view>
				</view>
				<view class="bg_center flexS">
					<text class="title flexC">已冻结</text>
					<view class="money">
						<text>¥</text>
						<text v-if="account&&account.pending_amount">{{ account.pending_amount | blanceFmt }}</text>
						<text>0</text>
					</view>
				</view>
			</view>
			<view class="bg_hint"><text>提醒：客户确认收货后，“冻结金额”里的钱会自动解冻到“可 提现金额”里，同时微信支付官方会收取0.6%的手续费。</text></view>
		</view>
		<view class="cap_con" :style="{ margin: current == 0 ? '30rpx 0' : '30rpx 0 0 0' }">
			<view class="flexB out_tab">
				<view class="tab_one">
					<u-tabs :list="tabs" :is-scroll="false" :current="current" active-color="#FB231F"
						@change="changeTab"></u-tabs>
				</view>
				<view class="date_picker flexS" @click="onShowDatePicker('range')">
					<text v-if="range" style="font-size:24rpx;">{{ range[0] }} - {{ range[1] }}</text>
					<text v-else>时间筛选</text>
					<text class="iconfont iconzhcc_xiangxiajiantou"></text>
				</view>
			</view>
			<view class="tab_three flexA" v-if="current == 0">
				<view @click="dateTab('daily')" :class="dataParams.cycle == 'daily' ? 'active_tab' : ''">昨日</view>
				<view @click="dateTab('today')" :class="dataParams.cycle == 'today' ? 'active_tab' : ''">今日</view>
				<view @click="dateTab('week')" :class="dataParams.cycle == 'week' ? 'active_tab' : ''">本周</view>
				<view @click="dateTab('month')" :class="dataParams.cycle == 'month' ? 'active_tab' : ''">本月</view>
				<view @click="dateTab('all')" :class="dataParams.cycle == 'all' ? 'active_tab' : ''">全部</view>
			</view>
			<view class="tab_two flexA" v-if="current == 1">
				<text :class="params.type == 1 ? 'base_color' : ''" @click="getType(1)">收款明细</text>
				<text :class="params.type == 2 ? 'base_color' : ''" @click="getType(2)">解冻明细</text>
				<text :class="params.type == 3 ? 'base_color' : ''" @click="getType(3)">提现明细</text>
				<text :class="params.type == 4 ? 'base_color' : ''" @click="getType(4)">退款明细</text>
			</view>
		</view>
		<view class="data_box" v-if="current == 0">
			<view class="data_tab">
				<u-tabs :list="dataList" :is-scroll="false" :current="dataCur" active-color="#FB231F"
					@change="changeData"></u-tabs>
			</view>
			<view class="all_data">
				<text>合计：</text>
				<text class="price">
					<text v-if="dataCur != 1">¥</text>
					<text>{{ allData }}</text>
				</text>
			</view>
			<view class="cap_chart" :style="{display:showPicker?'none':''}">
				<cap-column :chartData="columnData" />
			</view>
			<view class="cap_chart" :style="{display:showPicker?'none':''}">
				<cap-line :chartData="chartData" />
			</view>

		</view>
		<view class="tab_con" v-if="current == 1">
			<view class="withdraw_hint" v-if="params.type==3">
				<view>温馨提示：</view>
				<text>提现金额一般在第二天到账（遇节假日可能顺延）</text>
			</view>
			<view class="tab_top flexB" v-if="recordList.length > 0">
				<view>
					<view class="gray">{{ params.type|amountState }}记录</view>
					<view>
						共
						<text style="color:#FB231F">{{ total }}</text>
						次
					</view>
				</view>
				<view>
					<view class="gray">{{ params.type|amountState }}{{ params.type==3 ? '成功' : '' }}金额（元）</view>
					<view style="color:#FB231F">{{ num }}</view>
				</view>
			</view>
			<view class="tab_list" v-for="item in recordList" :key="item.id">
				<view class="flexB">
					<view>
						<text>{{ params.type|amountState }}</text>
						<text style="color:#FB231F" v-if="item.is_refund==1">（已退款）</text>
					</view>
					<text style="color:#FB231F">{{ item.money }}</text>
				</view>
				<!-- 1收款  2解冻   3提现  4退款 -->
				<view class="record_info">
					<view v-if="params.type==1">订单号：{{ item.order_no }}</view>
					<view v-if="params.type==4 && item.refund_money">订单号：{{ item.refund_money.order_no }}</view>
					<view v-if="params.type==4 && item.refund_money">退单号：{{ item.refund_money.refund_no }}</view>
					<view>{{ params.type|amountState }}时间：{{ item.created_at }}</view>
					<view v-if="params.type==3 && item.status_code">
						<text class="gray">提现状态：</text>
						<text v-if="item.status_code == 'CREATE_SUCCESS'"
							style="color:#FB231F">受理中（预计到账时间{{ item.created_at | addDate }}）</text>
						<text v-if="item.status_code != 'CREATE_SUCCESS'">{{ item.status_code | getStatus }}</text>
					</view>
					<view v-if="params.type==3 &&(item.status_code == 'FAIL' ||item.status_code == 'REFUND' ) "
						class="fail_reason">
						<text class="gray" style="width:156rpx;">原因：</text>
						<text>{{ item.reason }}</text>
					</view>
				</view>
			</view>
			<view class="noData" v-if="recordList.length == 0">
				<image src="../../../static/imgs/default/no_record-min.png"></image>
				<view>--暂无记录--</view>
			</view>
		</view>
		<view class="date_picker">
			<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :show-seconds="true"
				@confirm="onSelected" @cancel="onSelected" />
		</view>


	</view>
</template>

<script>
	import {
		getAccount,
		withdraw,
		getRecord,
		getSaleInfo,
		getSaleAccount,
	} from '@/apis/shop.js';
	import blanceFmt from '@/filters/index.js';
	import MxDatePicker from '../../components/mx-datepicker/mx-datepicker.vue';
	import capLine from '../../components/charts/cap-line.vue';
	import capColumn from '../../components/charts/cap-column.vue';
	export default {
		data() {
			return {
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: '', //显示的时间区间
				rangetime: ['2019/01/08', '2019/01/16'],
				type: 'rangetime',
				value: '',
				columnData: {},
				lineData: {},
				dataList: [{
						name: '销售额'
					},
					{
						name: '销量'
					},
					{
						name: '利润'
					}
				],
				dataCur: 0,
				tabList: [{
						name: '收款明细'
					},
					{
						name: '解冻明细'
					},
					{
						name: '提现明细'
					},
					{
						name: '退款明细'
					}
				],
				tabs: [{
						name: '销售数据'
					},
					{
						name: '交易明细'
					}
				],
				dataParams: {
					cycle: 'today',
					startime: '',
					endtime: ''
				},
				current: 0, //tab切换
				account: {
					available_amount: 0,
					pending_amount: 0
				}, //金额统计
				params: {
					type: 1, //1收款  2解冻   3提现  4退款
					startime: '',
					endtime: '',
					page_index: 1,
					page_size: 5
				},
				recordList: '', //记录列表
				total: '', //总条数
				num: 0, //总金额
				totalPage: '', //总页数
				option: '', //柱状图
				showColumn: false,
				showLine: false,
				allData: 0, //柱状图显示总数量
				chartData: {},
				store: '' //店铺信息  为了显示银行卡信息
			};
		},
		components: {
			MxDatePicker,
			capColumn,
			capLine
		},
		onLoad(ops) {
			this.params.type = ops.type == undefined || ops.type == 'undefined' ? 1 : ops.type;
			this.current = ops.current == undefined || ops.current == 'undefined' ? 0 : ops.current;
		},
		onShow() {
			this.store = uni.getStorageSync('store')
			this.getAccount();
			if (this.current == 1) {
				this.params.page_index = 1;
				this.getDetail();
			} else {
				this.getData();
			}
		},
		onReachBottom() {
			if (this.current == 1) {
				this.getMore();
			}
		},
		filters: {
			getStatus(val) {
				switch (val) {
					case 'CREATE_SUCCESS':
						return '受理成功';
						break;
					case 'SUCCESS':
						return '提现成功';
						break;
					case 'FAIL':
						return '提现失败';
						break;
					case 'REFUND':
						return '提现退票';
						break;
					case 'CLOSE':
						return '关单';
						break;
					case 'INIT':
						return '业务单已创建';
						break;
				}
			},
			amountState(data) {
				switch (data) {
					case 1:
						return '收款';
						break;
					case 2:
						return '解冻';
						break;
					case 3:
						return '提现';
						break;
					case 4:
						return '退款';
						break;
					default:
						return ''
				}
			},
			addDate(time = +new Date()) {
				var date = time.replace(/-/g, '/'); //兼容ios
				var dateTime = new Date(date);
				dateTime = dateTime.setDate(dateTime.getDate() + 1);
				dateTime = new Date(dateTime);
				var end = dateTime.getFullYear() + '-' + (dateTime.getMonth() + 1) + '-' + dateTime.getDate();
				return end
			}
		},
		methods: {
			//跳转到添加银行卡
			skipBank() {
				uni.showModal({
					content: '该功能暂未开通',
					showCancel: false
				})
				return
				uni.navigateTo({
					url: '../edit-card/edit-card?type=' + 0
				})
			},
			changeData(e) {
				this.dataCur = e;
				this.getData();
			},
			//获取柱状图和折线图数据
			getData() {
				let params = this.dataParams;
				let dataCur = this.dataCur;
				uni.showLoading({
					title: '加载中...'
				})
				getSaleInfo(params).then(res => {
					if (res.code == 200) {
						let list = res.data;
						let xAxis = [];
						let arr = [];
						let all = 0;
						list.map(i => {
							if (dataCur == 0) {
								arr.push(i.account);
								all += Number(i.account);
							}
							if (dataCur == 1) {
								arr.push(i.num);
								all += Number(i.num);
							}
							if (dataCur == 2) {
								arr.push(Number(i.account) - Number(i.cost_account));
								all += Number(i.account) - Number(i.cost_account);
							}
							xAxis.push(i.goods.main_attr);
						});
						this.allData = all;
						this.columnData = {
							categories: xAxis,
							series: [{
								name: '统计',
								data: arr,
							}]
						};
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})

				getSaleAccount(params).then(res => {
					if (res.code == 200) {
						let line = res.data.store;
						let goods = res.data.goods;
						let datas = [];
						let serData = [];
						goods.map(i => {
							let data = [];
							for (let k in line) {
								//日期
								let arr = line[k];
								if (arr.length > 0) {
									var a = 0;
									arr.map(j => {
										if (j.goods_id == i.id) {
											if (dataCur == 0) {
												data.push(j.account);
											}
											if (dataCur == 1) {
												data.push(j.num);
											}
											if (dataCur == 2) {
												data.push(Number(j.account) - Number(j
													.cost_account));
											}
											a = 1;
										}
									});
									if (a === 0) {
										data.push(0);
									}
								} else {
									data.push(0);
								}
							}
							datas[i.id] = data;
							let color = '';
							if (i.id == 1) {
								color = '#F04864';
							}
							if (i.id == 2) {
								color = '#8543E0';
							}
							if (i.id == 3) {
								color = '#90ED7D';
							}
							if (i.id == 4) {
								color = '#FACC14';
							}
							serData.push({
								name: i.main_attr,
								data: datas[i.id],
								color: color
							});
						});
						let lengedMap = [];
						Object.keys(line).map(v => {
							let index = v.indexOf('\-');
							v = v.substring(index + 1, v.length);
							lengedMap.push(v);
						});
						this.chartData = {
							categories: lengedMap,
							series: serData
						};
						this.showLine = true;
					}
				});
			},
			/*将对象数组转为二维数组*/
			zh(data) {
				var arr = [];
				for (var i in data) {
					arr[i] = [];
					for (var j in data[i]) {
						arr[i].push(data[i][j]);
					}
				}
				return arr;
			},
			onShowDatePicker(type) {
				//显示
				this.type = type;
				this.showPicker = true;
				this.dataParams.cycle = '';
				this.value = this[type];
			},
			onSelected(e) {
				//选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					if (this.current == 0) {
						this.dataParams.startime = e.value[0];
						this.dataParams.endtime = e.value[1];
						this.getData();
					} else {
						this.params.startime = e.value[0];
						this.params.endtime = e.value[1];
						this.getDetail();
					}
				}
			},
			/*获取账户信息*/
			getAccount() {
				getAccount().then(res => {
					if (res.code == 200) {
						this.account = res.data;
					} else {
						uni.showModal({
							content: res.data || '获取信息失败',
							showCancel: false
						});
					}
				});
			},
			/*获取提现记录*/
			getDetail(isMore) {
				let _this = this;
				let params = this.params;
				getRecord(params).then(res => {
					if (res.code == 200) {
						_this.num = res.data.list.account;
						_this.recordList = isMore ? _this.recordList.concat(res.data.list.list) : res.data.list
							.list;
						_this.total = res.data.total;
						_this.totalPage = Math.ceil(res.data.total / _this.params.page_size);
					} else {
						uni.showModal({
							content: res.data || '获取记录失败',
							showCancel: false
						});
					}
				});
			},
			/*获取更多的记录*/
			getMore() {
				this.params.page_index++;
				if (this.params.page_index > this.totalPage) {
					uni.showToast({
						title: '没有更多啦~',
						icon: 'none'
					});
					return false;
				}

				this.getDetail(true);
			},

			//切换销售数据和交易明细
			changeTab(tabType) {
				this.current = tabType;
				this.range = '';
				this.params.page_index = 1;
				tabType == 0 ? this.getData() : this.getDetail();
			},
			//切换销售数据中的
			dateTab(cycle) {
				this.range = '';
				this.dataParams.cycle = cycle;
				this.getData();
			},
			// tabType 1收款  2解冻   3提现  4退款   tab切换
			getType(tabType) {
				this.recordList = [];
				this.params.type = tabType;
				this.params.page_index = 1;
				this.getDetail();
			},
			/*提现*/
			withdraw() {
				uni.showModal({
					content: '该功能暂未开通',
					showCancel: false
				})
				return
				let money = this.account.available_amount;
				if (money == 0) {
					uni.showModal({
						content: '暂无可提现金额',
						showCancel: false
					});
					return false;
				}
				uni.navigateTo({
					url: '../../../pages/capital-withdrawal/capital-withdrawal?limit=' + money
				})
			},

		}
	};
</script>

<style lang="scss" scoped>
	.capital {
		width: 100%;
		min-height: 100%;
		background: #f9f9f8;
		display: flex;
		flex-direction: column;

		.cap_bg {
			width: 712rpx;
			height: 380rpx;
			margin: 30rpx auto 0;
			background: url(../../static/cap_bg1.png) no-repeat;
			background-size: 100% 100%;
			position: relative;

			.bg_btn {
				width: 176rpx;
				height: 68rpx;
				background: #ffb300;
				border-radius: 34rpx;
				text-align: center;
				line-height: 68rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 2rpx;
			}

			.bg_con {
				width: 690rpx;
				margin: 0 auto;
				padding: 30rpx 20rpx 0 20rpx;
				box-sizing: border-box;

				.money {
					text {
						color: #fff;
					}
				}

				.title {
					font-size: 34rpx;
					text-align: center;
					border-radius: 6rpx;
					width: 122rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #fff;
					color: $base-color;
					font-weight: bold;
					margin-right: 20rpx;
				}

				.bg_up {
					border-bottom: 2rpx solid #fff;
					padding-bottom: 20rpx;

					.bank_info {
						text {
							color: #fff;
							font-size: 30rpx;
						}
					}

					.money {
						text:first-child {
							font-size: 40rpx;
							margin-right: 10rpx;
						}

						text:last-child {
							font-size: 72rpx;
						}
					}
				}

				.bg_center {
					padding-top: 15rpx;

					.money {
						margin-left: 20rpx;

						text:first-child {
							font-size: 28rpx;
							margin-right: 10rpx;
						}

						text:last-child {
							font-size: 44rpx;
						}
					}
				}
			}

			.bg_hint {
				width: 100%;
				height: 88rpx;
				background: #bc0202;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				border-radius: 0 0 24rpx 24rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				box-sizing: border-box;

				text {
					font-size: 24rpx;
					color: #ffec8e;
				}
			}
		}

		.cap_con {
			position: relative;
			width: 100%;
			min-height: 214rpx;
			background-color: #fff;
			// margin: 30rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.out_tab {
				box-sizing: border-box;
				padding: 0 30rpx;

				.tab_one {
					width: 40%;
				}

				.date_picker {
					height: 64rpx;
					line-height: 64rpx;
					background: #f8f8f8;
					padding: 0 20rpx;
					border-radius: 8rpx;

					.iconfont {
						color: #999;
						margin-left: 6rpx;
					}
				}
			}

			.tab_two {
				width: 100%;
				height: 64rpx;
				background: #fff4f3;
				margin: 30rpx 0;

				text {
					font-size: 28rpx;
				}

				.base_color {
					color: $base-color;
					font-weight: bold;
				}
			}

			.tab_three {
				padding: 0 30rpx;
				margin: 30rpx 0;
				box-sizing: border-box;

				.active_tab {
					background: linear-gradient(95deg, #ff232c 0%, #ff571b 100%);
					color: #fff;
					border: none;
				}

				view {
					width: 120rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 32rpx;
					border: 2rpx solid #999999;
					color: #999;
				}
			}
		}

		.tab_con {
			width: 100%;
			background: #fff;
			padding: 0 30rpx 40rpx;
			box-sizing: border-box;
			flex: 1;

			.withdraw_hint {
				padding-bottom: 30rpx;
				border-bottom: 4rpx solid #eeeeee;

				view,
				text {
					color: #4185f5;
				}

				view {
					font-size: 30rpx;
					font-weight: bold;
				}

				text {
					font-size: 28rpx;
				}
			}

			.tab_top {
				border-bottom: 2px solid #eeeeee;
				padding: 15rpx 0;
				margin-bottom: 30rpx;

				.gray {
					margin-bottom: 15rpx;
				}
			}

			.tab_list {
				margin-bottom: 30rpx;

				.fail_reason {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					margin-top: 15rpx;
				}

				.record_info {
					>view {
						margin-top: 15rpx;
						color: #999;
					}
				}
			}
		}

		.data_box {
			width: 100%;
			flex: 1;
			background: #fff;
			z-index: 99;

			.chart-column {
				background: #ff000022;
				position: relative;

				.chart {
					width: 100%;
					height: 100%;
				}
			}

			.all_data {
				padding: 20rpx 0 0 30rpx;

				.price {
					text {
						color: $base-color;
					}

					font-size: 36rpx;
				}
			}

			.cap_chart {
				height: 300px;
				margin-top: 30rpx;
				width: 100%;
				overflow: hidden;
				z-index: 99
			}
		}

		.date_picker {
			z-index: 99999;
		}
	}
</style>