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" v-if="withdrawDetail.status == -1">
							拒绝理由：{{ withdrawDetail.refuse_reason }}</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>