zhongshen_project/addon/cashier/source/os/pages/store/settlement.vue

<template>
	<base-page>
		<view class="page-height uni-flex uni-column">
			<view class="uni-flex uni-row" v-if="storeInfo">
				<view class="account-wrap">
					<view class="head-title">账户概览</view>
					<view class="account-item">
						<view class="account-title">待结算金额（元）</view>
						<view class="money">{{ storeInfo.account | moneyFormat }}</view>
						<view class="operation">
							<button
								type="default"
								class="primary-btn"
								v-if="
									storeInfo.is_settlement == 1 &&
										withdrawConfig.is_settlement == 1 &&
										withdrawConfig.period_type == 4 &&
										storeInfo.account > 0 &&
										parseFloat(storeInfo.account) >= parseFloat(withdrawConfig.withdraw_least)
								"
								@click="applyWithdraw"
							>
								申请结算
							</button>
						</view>
					</view>
					<view class="uni-flex uni-row sub-bottom">
						<view class="account-item" @click="$util.redirectTo('/pages/store/settlement_record')">
							<view class="account-title">打款中金额（元）</view>
							<view class="money">
								{{ storeInfo.account_apply | moneyFormat }}
								<text class="iconfont iconqianhou2"></text>
							</view>
						</view>
						<view class="account-item" @click="$util.redirectTo('/pages/store/settlement_record')">
							<view class="account-title">已打款金额（元）</view>
							<view class="money">
								{{ storeInfo.account_withdraw | moneyFormat }}
								<text class="iconfont iconqianhou2"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="info-wrap">
					<view class="head-title">结算账户</view>
					<view class="info-content">
						<block v-if="storeInfo.is_settlement == 1 && withdrawConfig.is_settlement == 1">
							<view class="info-text">
								结算方式：
								<text>总部收款，</text>
								<text v-if="withdrawConfig.period_type == 1">每日自动结算</text>
								<text v-if="withdrawConfig.period_type == 2">每周自动结算</text>
								<text v-if="withdrawConfig.period_type == 3">每月自动结算</text>
								<text v-if="withdrawConfig.period_type == 4">门店申请结算</text>
							</view>
							<view class="info-text">账户类型：{{ bankType[storeInfo.bank_type] }}</view>
							<block v-if="storeInfo.bank_type == 1">
								<view class="info-text">微信名：{{ storeInfo.bank_user_name }}</view>
							</block>
							<block v-if="storeInfo.bank_type == 2">
								<view class="info-text">真实姓名：{{ storeInfo.bank_user_name }}</view>
								<view class="info-text">支付宝账号：{{ storeInfo.bank_type_account }}</view>
							</block>
							<block v-if="storeInfo.bank_type == 3">
								<view class="info-text">开户行：{{ storeInfo.bank_type_name }}</view>
								<view class="info-text">户头：{{ storeInfo.bank_user_name }}</view>
								<view class="info-text">账户：{{ storeInfo.bank_type_account }}</view>
							</block>
						</block>
						<view class="empty" v-else>无需结算</view>
					</view>
				</view>
			</view>

			<view class="settlement-record uni-flex uni-column">
				<view class="head-title">结算记录</view>
				<view class="record-wrap common-scrollbar">
					<uni-data-table url="/store/storeapi/withdraw/page" :cols="cols" ref="table" :pagesize="8">
						<template v-slot:action="data">
							<view class="common-table-action"><text @click="detail(data)">查看详情</text></view>
						</template>
					</uni-data-table>
				</view>
			</view>
		</view>

		<uni-popup ref="applyWithdraw" type="center">
			<view class="apply-withdraw">
				<view class="title">
					本次可结算金额为
					<text class="money" v-if="storeInfo">{{ storeInfo.account | moneyFormat }}</text>
					元，是否申请结算？
				</view>
				<view class="btn">
					<button type="primary" class="primary-btn btn" @click="apply">确定</button>
					<button type="primary" class="default-btn btn save" @click="$refs.applyWithdraw.close()">取消</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="detailPopup">
			<view class="pop-box">
				<view class="pop-header">
					<view class="pop-header-text">结算详情</view>
					<view class="pop-header-close" @click="$refs.detailPopup.close()"><text class="iconguanbi1 iconfont"></text></view>
				</view>
				<view class="pop-content common-scrollbar" v-if="withdrawDetail">
					<view class="pop-content-item">
						<view class="pop-content-text">结算信息</view>
						<view class="pop-contents-text">结算编号：{{ withdrawDetail.withdraw_no }}</view>
						<view class="pop-contents-text">结算状态：{{ withdrawDetail.status_name }}</view>
						<view class="pop-contents-text">结算金额：{{ withdrawDetail.money | moneyFormat }}</view>
						<view class="pop-contents-text">结算方式：{{ withdrawDetail.transfer_type_name }}</view>
						<view class="pop-contents-text">结算类型：{{ withdrawDetail.settlement_type_name }}</view>
						<view class="pop-contents-text">结算申请时间：{{ withdrawDetail.apply_time | timeFormat }}</view>
						<view class="pop-contents-text" v-if="withdrawDetail.transfer_type == 'bank'">银行名称：{{ withdrawDetail.bank_name }}</view>
						<view class="pop-contents-text">结算收款账号：{{ withdrawDetail.account_number }}</view>
						<view class="pop-contents-text">结算方式：{{ withdrawDetail.transfer_type_name }}</view>
						<view class="pop-contents-text">真实姓名：{{ withdrawDetail.realname }}</view>
					</view>
					<view class="pop-content-item" v-if="withdrawDetail.settlement_type != 'apply'">
						<view class="pop-content-text">周期结算</view>
						<view class="pop-contents-text">周期结算编号：{{ withdrawDetail.settlement_info.settlement_no }}</view>
						<view class="pop-contents-text">周期开始时间：{{ withdrawDetail.settlement_info.start_time }}</view>
						<view class="pop-contents-text">周期结束时间：{{ withdrawDetail.settlement_info.end_time }}</view>
						<view class="pop-contents-text">结算订单总额：{{ withdrawDetail.settlement_info.order_money }}</view>
						<view class="pop-contents-text">结算总分销佣金：{{ withdrawDetail.settlement_info.commission }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</base-page>
</template>

<script>
export default {
	data() {
		return {
			bankType: {
				1: '微信',
				2: '支付宝',
				3: '银行卡'
			},
			withdrawConfig: {
				is_settlement: 0
			},
			cols: [
				{
					width: 12,
					title: '结算方式', // 标题
					field: 'transfer_type_name', // 字段名
					align: 'left'
				},
				{
					width: 12,
					title: '结算类型', // 标题
					field: 'settlement_type_name', // 字段名
					align: 'left'
				},
				{
					width: 12,
					title: '结算金额', // 标题
					align: 'left',
					return: data => {
						return this.$util.moneyFormat(data.money);
					}
				},
				{
					width: 12,
					title: '结算状态', // 标题
					field: 'status_name'
				},
				{
					width: 15,
					title: '申请时间',
					align: 'center',
					return: data => {
						return data.apply_time ? this.$util.timeFormat(data.apply_time) : '';
					}
				},
				{
					width: 15,
					title: '转账时间',
					align: 'center',
					return: data => {
						return data.transfer_time ? this.$util.timeFormat(data.transfer_time) : '';
					}
				},
				{
					width: 15,
					title: '操作',
					action: true, // 表格操作列
					align: 'right'
				}
			],
			isRepeat: false,
			withdrawDetail: null
		};
	},
	onShow() {
		this.$store.dispatch('getStoreInfo');
	},
	onLoad() {
		this.getWithdrawConfig();
	},
	methods: {
		switchStoreAfter() {
			this.$refs.table.load();
		},
		getWithdrawConfig() {
			this.$api.sendRequest({
				url: '/store/storeapi/store/withdrawconfig',
				success: res => {
					if (res.code == 0) {
						this.withdrawConfig = res.data;
					}
				}
			});
		},
		applyWithdraw() {
			this.$refs.applyWithdraw.open();
		},
		apply() {
			if (this.isRepeat) return;
			this.isRepeat = true;

			this.$api.sendRequest({
				url: '/store/storeapi/withdraw/apply',
				data: {
					money: this.storeInfo.account
				},
				success: res => {
					if (res.code == 0) {
						this.$store.dispatch('getStoreInfo');
						this.$refs.applyWithdraw.close();
						this.$refs.table.load();
						setTimeout(() => {
							this.isRepeat = false;
						}, 500);
					} else {
						this.isRepeat = false;
						this.$util.showToast({ title: res.message });
					}
				}
			});
		},
		detail(data) {
			this.$api.sendRequest({
				url: '/store/storeapi/withdraw/detail',
				data: {
					withdraw_id: data.value.withdraw_id
				},
				success: res => {
					if (res.code == 0) {
						this.withdrawDetail = res.data;
						this.$refs.detailPopup.open('center');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.page-height {
	height: 100%;
}

.account-wrap {
	flex: 1;
	width: 0;
	padding: 0.15rem;
	margin-right: 0.15rem;
	background: #fff;

	.head-title {
		font-size: 0.16rem;
	}

	.account-item {
		padding: 0.2rem 0;
		cursor: pointer;

		.account-title {
			font-size: 0.14rem;
			color: #aaa;
		}

		.money {
			font-size: 0.2rem;
			font-weight: bold;
			margin-top: 0.15rem;
			display: flex;
			align-items: center;

			.iconqianhou2 {
				line-height: 1;
				color: #bbb;
				margin-left: 0.05rem;
			}
		}

		.operation {
			margin-top: 0.3rem;

			button {
				display: inline-block;
				margin-right: 0.1rem;
				width: auto;
				min-width: 0.8rem;
			}
		}
	}

	.sub-bottom {
		border-top: 0.01rem solid #f5f5f5;

		.account-item {
			flex: 1;
		}
	}
}

.info-wrap {
	width: 30vw;
	padding: 0.15rem;
	background: #fff;

	.head-title {
		font-size: 0.16rem;
	}

	.info-content {
		margin-top: 0.2rem;

		.info-text {
			margin-bottom: 0.1rem;
		}
	}

	.empty {
		padding: 1rem;
		text-align: center;

		.operation {
			color: $primary-color;
			cursor: pointer;
		}
	}
}

.settlement-record {
	padding: 0.15rem;
	flex: 1;
	height: 0;
	margin: 0.15rem 0;
	background: #fff;

	.head-title {
		font-size: 0.16rem;
	}

	.record-wrap {
		padding-top: 0.15rem;
		flex: 1;
		height: 0;
		overflow-y: scroll;
	}
}

.pop-box {
	background: #ffffff;
	width: 5rem;
	height: 60vh;
	display: flex;
	flex-direction: column;

	.pop-header {
		width: 100%;
		padding: 0 0.15rem 0 0.2rem;
		height: 0.5rem;
		// width: 3.5rem;
		margin: 0 auto;
		line-height: 0.5rem;
		border-bottom: 0.01rem solid #f0f0f0;
		font-size: 0.14rem;
		color: #333;
		overflow: hidden;
		border-radius: 0.02rem 0.2rem 0 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.pop-header-text {
			font-weight: 900;
			color: #567485;
		}

		.pop-header-close {
			cursor: pointer;

			i {
				font-size: 0.18rem;
			}
		}
	}

	.pop-content {
		flex: 1;
		height: 0;
		padding: 0.1rem 0.2rem;
		box-sizing: border-box;
		color: #567485;
		font-weight: 900;
		overflow-y: scroll;
	}

	.pop-contents {
		margin-top: 0.3rem;
		width: 3rem;
		height: 0.8rem;
		padding: 0.1rem 0.2rem;
		box-sizing: border-box;
		color: #567485;
		font-weight: 900;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.pop-content-item {
		margin-left: 0.3rem;
	}

	.pop-content-items {
		margin-left: 0.3rem;
	}

	.pop-content-text {
		padding: 0.1rem;
	}

	.pop-contents-text {
		margin-left: 0.4rem;
		font-weight: normal;
		padding: 0.1rem;
	}

	.pop-contentss-text {
		margin-left: 0.8rem;
		font-weight: normal;
		color: rgb(197, 209, 216);
	}
}

.apply-withdraw {
	width: 3.8rem;
	border-radius: 0.06rem;
	background: #ffffff;
	padding: 0.6rem 0.15rem 0.2rem 0.15rem;
	box-sizing: border-box;
	.title {
		font-size: 0.16rem;
		text-align: center;
	}
	.money {
		font-weight: bold;
		font-size: 0.16rem;
	}
	.btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 0.3rem;
		.btn {
			width: auto;
			height: auto;
			padding: 0 0.3rem;
			margin: 0;
			height: 0.35rem;
		}
		.btn:last-child {
			margin-left: 0.2rem;
		}
	}
}
</style>