zhongshen_project/addon/cashier/source/os/pages/index/change_shifts.vue

<template>
	<page-meta :root-font-size="getRootFontSize"></page-meta>
	<view class="uni-flex uni-row height-all">
		<view class="container common-wrap" style="-webkit-flex: 1;flex: 1;" v-if="shiftsData">
			<view class="title">{{ userInfo.username }}</view>
			<view class="time-title">
				班次:
				<text>{{ shiftsData.start_time > 0 ? $util.timeFormat(shiftsData.start_time) : '初始化' }}</text>
				<text class="separate">-</text>
				<text class="curr-time">{{ shiftsData.end_time | timeFormat }}</text>
			</view>
			<view class="title-box">
				<view class="box">
					<view class="name-box">
						<text class="title-name">销</text>
						<text class="name">总销售</text>
					</view>
					<view class="money-box">
						<text class="money">（{{ shiftsData.total_sale | moneyFormat }}元 {{ shiftsData.total_sale_count }}笔）</text>
					</view>
				</view>
				<view class="box">
					<view class="name-box">
						<text class="title-name">会</text>
						<text class="name">会员充值</text>
					</view>
					<view class="money-box">
						<text class="money">（{{ shiftsData.recharge_money | moneyFormat }}元 {{ shiftsData.recharge_count }}笔）</text>
					</view>
				</view>
				<view class="box">
					<view class="name-box">
						<text class="title-name">应</text>
						<text class="name">应收金额</text>
					</view>
					<view class="money-box">
						<text class="money">（{{ shiftsData.total_money | moneyFormat }}元 {{ shiftsData.total_count }}笔）</text>
					</view>
				</view>
				<view class="box">
					<view class="name-box">
						<text class="title-name">支</text>
						<text class="name">支付统计</text>
					</view>
					<view class="money-box">
						<text class="money">（{{ shiftsData.total_pay_money | moneyFormat }}元 {{ shiftsData.total_pay_count }}笔）</text>
					</view>
				</view>
			</view>

			<view class="basic">
				<text @click="detail()">
					查看详情
					<i class="iconqianhou2 iconfont"></i>
				</text>
			</view>

			<view class="common-btn-wrap">
				<button type="default" class="default-btn cancel-btn" @click="cancel">取消</button>
				<button type="default" class="primary-btn shiftss-btn" @click="changeshifts">交班并登出</button>
			</view>

			<uni-popup ref="shiftslistPop">
				<view class="pop-box shiftsslistPop">
					<view class="pop-header">
						<view class="pop-header-text">交班详情</view>
						<view class="pop-header-close" @click="$refs.shiftslistPop.close()"><text class="iconguanbi1 iconfont"></text></view>
					</view>
					<view class="pop-content common-scrollbar">
						<view class="pop-content-item">
							<view class="pop-content-text">总销售（{{ shiftsData.total_sale | moneyFormat }}元 {{ shiftsData.total_sale_count }}笔）</view>
							<view class="pop-contents-text">开单销售（{{ shiftsData.billing_money | moneyFormat }}元 {{ shiftsData.billing_count }}笔）</view>
							<view class="pop-contents-text">售卡销售（{{ shiftsData.buycard_money | moneyFormat }}元 {{ shiftsData.buycard_count }}笔）</view>
						</view>
						<view class="pop-content-item">
							<view class="pop-content-text">会员充值（{{ shiftsData.recharge_money | moneyFormat }}元 {{ shiftsData.recharge_count }}笔）</view>
						</view>
						<view class="pop-content-item">
							<view class="pop-content-text">应收金额（{{ shiftsData.total_money | moneyFormat }}元 {{ shiftsData.total_count }}笔）</view>
							<view class="pop-contents-text">开单销售（{{ shiftsData.billing_money | moneyFormat }}元 {{ shiftsData.billing_count }}笔）</view>
							<view class="pop-contents-text">售卡销售（{{ shiftsData.buycard_money | moneyFormat }}元 {{ shiftsData.buycard_count }}笔）</view>
							<view class="pop-contents-text">会员充值（{{ shiftsData.recharge_money | moneyFormat }}元 {{ shiftsData.recharge_count }}笔）</view>
							<view class="pop-contents-text">订单退款（{{ shiftsData.refund_money | moneyFormat }}元 {{ shiftsData.refund_count }}笔）</view>
						</view>
						<view class="pop-content-item">
							<view class="pop-content-text">支付统计（{{ shiftsData.total_pay_money | moneyFormat }}元 {{ shiftsData.total_pay_count }}笔）</view>
							<view class="pop-contents-text" v-if="shiftsData.cash > 0">现金收款（{{ shiftsData.cash | moneyFormat }}元 {{ shiftsData.cash_count }}笔）</view>
							<view class="pop-contents-text" v-if="shiftsData.wechatpay > 0">
								微信收款（{{ shiftsData.wechatpay | moneyFormat }}元 {{ shiftsData.wechatpay_count }}笔）
							</view>
							<view class="pop-contents-text" v-if="shiftsData.alipay > 0">
								支付宝收款（{{ shiftsData.alipay | moneyFormat }}元 {{ shiftsData.alipay_count }}笔）
							</view>
							<view class="pop-contents-text" v-if="shiftsData.own_wechatpay > 0">
								个人微信收款（{{ shiftsData.own_wechatpay | moneyFormat }}元 {{ shiftsData.own_wechatpay_count }}笔）
							</view>
							<view class="pop-contents-text" v-if="shiftsData.own_alipay > 0">
								个人支付宝收款（{{ shiftsData.own_alipay | moneyFormat }}元 {{ shiftsData.own_alipay_count }}笔）
							</view>
							<view class="pop-contents-text" v-if="shiftsData.own_pos > 0">
								个人POS收款（{{ shiftsData.own_pos | moneyFormat }}元 {{ shiftsData.own_pos_count }}笔）
							</view>
						</view>
					</view>
					<view class="pop-content-footer">
						<button class="primary-btn" @click="printTicket">打印小票</button>
					</view>
				</view>
			</uni-popup>
		</view>
		<nc-loading ref="loading"></nc-loading>
	</view>
</template>

<script>
import dataTable from '@/components/uni-data-table/uni-data-table.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		dataTable,
		uniPopup
	},
	props: {
		option: {}
	},
	data() {
		return {
			shiftsData: null,
			userInfo: null,
			isSub: false
		};
	},
	onShow() {
		this.getshiftsInfo();
	},
	methods: {
		detail() {
			this.$refs.shiftslistPop.open('center');
		},
		getshiftsInfo() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/cashier/shiftsdata',
				success: res => {
					if (res.code == 0 && res.data) {
						let shiftsData = res.data.shifts_data;
						shiftsData.total_sale = parseFloat(shiftsData.billing_money) + parseFloat(shiftsData.buycard_money);
						shiftsData.total_sale_count = parseInt(shiftsData.billing_count) + parseInt(shiftsData.buycard_count);
						shiftsData.total_count = shiftsData.total_sale_count + parseInt(shiftsData.recharge_count) + parseInt(shiftsData.refund_count);
						shiftsData.total_money = shiftsData.total_sale + parseFloat(shiftsData.recharge_money) - parseFloat(shiftsData.refund_money);
						shiftsData.total_pay_money =
							parseFloat(shiftsData.cash) +
							parseFloat(shiftsData.alipay) +
							parseFloat(shiftsData.wechatpay) +
							parseFloat(shiftsData.own_wechatpay) +
							parseFloat(shiftsData.own_alipay) +
							parseFloat(shiftsData.own_pos);
						shiftsData.total_pay_count =
							parseInt(shiftsData.cash_count) +
							parseInt(shiftsData.alipay_count) +
							parseInt(shiftsData.wechatpay_count) +
							parseInt(shiftsData.own_wechatpay_count) +
							parseInt(shiftsData.own_alipay_count) +
							parseInt(shiftsData.own_pos_count);

						this.shiftsData = shiftsData;
						this.userInfo = res.data.userinfo;

						this.$refs.loading.hide();
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				}
			});
		},
		cancel() {
			uni.navigateBack();
		},
		// 交班
		changeshifts() {
			if (this.isSub) return;
			this.isSub = true;

			uni.showLoading({ title: '' });

			this.$api.sendRequest({
				url: '/cashier/storeapi/cashier/changeshifts',
				success: res => {
					uni.hideLoading();
					if (res.code == 0 && res.data) {
						uni.removeStorage({
							key: 'cashier_token',
							success: () => {
								this.$store.commit('setStoreInfo', null);
								this.$store.commit('setMemberInfo', null);
								this.$util.redirectTo('/pages/login/login', {}, 'reLaunch');
							}
						});
					} else {
						this.isSub = false;
						this.$util.showToast({
							title: res.message
						});
					}
				}
			});
		},
		/**
		 * 打印小票
		 */
		printTicket(){
			this.$api.sendRequest({
				url: '/cashier/storeapi/cashier/printticket',
				success: res => {
					if (res.code != 0) {
						this.$util.showToast({title: res.message ? res.message : '小票打印失败'})
					}
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.height-all {
	height: 100vh;
}

.pop-box {
	background: #ffffff;
	width: 4rem;
	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);
	}
	
	.pop-content-footer {
		display: flex;
		padding: .15rem;
		justify-content: flex-end;
		
		button {
			width: 1rem;
			margin: 0;
		}
	}
}

.container {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0.2rem;
}

.title {
	font-size: 0.16rem;
	color: #303133;
	margin-top: 0.45rem;
	font-weight: 900;
	color: rgb(86, 116, 133);
}

.time-title {
	padding: 0.1rem;
	line-height: 0.2rem;
	border-radius: 5px;
	background-color: rgb(254, 242, 242);
	color: rgb(246, 85, 81);
	font-size: 0.14rem;
	margin-top: 0.2rem;

	text {
		margin: 0 0.05rem;
	}
	.curr-time {
		font-weight: bold;
	}
}

.title-box {
	width: 5rem;
	display: flex;
	flex-direction: column;
	align-content: space-around;
	justify-content: flex-start;
	align-items: center;
	margin-top: 0.3rem;
}

.box {
	width: 5.4rem;
	height: 0.6rem;
	background: #f9fbfb;
	border: 1px solid rgb(225, 225, 225);
	margin-top: 0.1rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-around;
	flex-wrap: wrap;
	padding: 0 0.23rem 0 0.23rem;
	box-sizing: border-box;
}

.title-name {
	display: inline-block;
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 15%;
	text-align: center;
	line-height: 0.3rem;
	background: #8558fa;
	color: #fff;
	font-weight: 900;
	font-size: 0.16rem;
}

.name-box {
	height: 0.3rem;
}

.money-box {
	line-height: 0.3rem;
}

.name {
	font-size: 0.16rem;
	line-height: 0.3rem;
	margin-left: 0.2rem;
	font-weight: 900;
	color: rgb(86, 116, 133);
}

.money {
	margin-left: 0.25rem;
	color: rgb(86, 116, 133);
}

.search-desc {
	color: #909399;
	font-size: 0.14rem;
	margin-top: 0.3rem;
}

.basic {
	text-align: center;
	margin-top: 0.33rem;

	text {
		height: 0.15rem;
		color: $primary-color;
		font-size: 0.14rem;
		cursor: pointer;
	}
}

.iconqianhou2 {
	margin-left: 0.05rem;
	font-size: 1px;
	color: #8558fa;
}

.cancel-btn {
	width: 1.7rem;
	height: 0.5rem;
	line-height: 0.5rem;
}

.shiftss-btn {
	width: 1.7rem;
	height: 0.5rem;
	line-height: 0.5rem;
	background-color: #8558fa;
	color: #fff !important;
	margin-left: 0.21rem;
}

.common-btn-wrap {
	margin-top: 1.14rem;
	z-index: 2;
	height: 0.6rem;
	padding-bottom: 0.05rem;
	display: flex;
	align-items: center;
}

.pop-btn-wrap {
	width: 100%;
	height: 0.2rem;
	border-top: 0.01rem solid #eee;
	margin-top: 0.4rem;
}

.cancels-btn {
	width: 95%;
	margin-top: 0.1rem;
	font-size: 0.14rem;
	transition: 0.1s;
	border-radius: 0.02rem;
	border-width: 0.01rem !important;
	background: #8558fa !important;
	color: #fff !important;
}
</style>