zhongshen_project/addon/cashier---/source/os/pages/recharge/index.vue

<template>
	<base-page>
		<view class="uni-flex uni-row page-height">
			<view class="common-wrap left-wrap" style="flex: 1;">
				<view class="header-box">
					<view class="order-time">
						<view class="title">消费时间</view>
						<uni-datetime-picker v-model="orderData.create_time" type="datetime" :clearIcon="false" />
					</view>

					<view class="header" v-if="memberInfo" :style="'background-image:url(' + $util.img('public/uniapp/cashier/member-bg.png') + ');background-repeat: no-repeat;'">
						<view class="headimg" @click="showMember">
							<image
								class="header-image"
								:src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.img(defaultImg.head)"
								@error="memberInfo.headimg = defaultImg.head"
							></image>
						</view>

						<view class="head-info" @click="showMember">
							<view class="head-info-top">
								<view class="name">
									<view class="text">{{ memberInfo.nickname }}</view>
									<view class="level" v-if="memberInfo.member_level">{{ memberInfo.member_level_name }}</view>
								</view>
								<view class="mobile">{{ memberInfo.mobile }}</view>
							</view>
							<view class="head-info-bottom">
								<view>积分：{{ memberInfo.point }}</view>
								<view>余额：{{ (parseFloat(memberInfo.balance_money) + parseFloat(memberInfo.balance)) | moneyFormat }}</view>
							</view>
						</view>

						<button class="switch primary-btn" @click="openSelectMember()">更换会员</button>
						<button class="switch primary-btn" @click="replaceMember()">散客</button>
					</view>
					<view class="header" v-else :style="'background-image:url(' + $util.img('public/uniapp/cashier/member-bg.png') + ');background-repeat: no-repeat;'">
						<view class="headimg"><image class="header-image" :src="$util.img(defaultImg.head)"></image></view>
						<view class="head-info"><view class="name">散客</view></view>
						<button class="switch primary-btn">查询会员</button>
					</view>
				</view>

				<view class="content">
					<view class="title">
						<view>
							结算清单（
							<text>{{ orderData.goods_num }}</text>
							）
						</view>
						<view class="clear">
							<text class="iconfont iconqingchushujuku"></text>
							<text>清空</text>
						</view>
					</view>

					<view class="content-list common-scrollbar">
						<block v-if="orderData.goods_list.length">
							<view class="content-item" v-for="(item, index) in orderData.goods_list" :key="index">
								<view class="item-img"><image :src="$util.img(item.goods_image.split(',')[0], { size: 'small' })" mode="widthFix"></image></view>
								<view class="item-info">
									<view class="item-name">{{ item.sku_name }}</view>
									<view class="item-del">删除</view>
									<view class="item-spe">{{ item.spec_name }}</view>
									<view class="item-price">￥{{ item.price | moneyFormat }}</view>
								</view>
								<view class="item-num">
									<view class="num-dec">-</view>
									<view class="num">{{ item.num }}</view>
									<view class="num-inc">+</view>
								</view>
								<!-- <view class="item-total-price">￥{{ item.goods_money | moneyFormat }}</view> -->
								<!-- <view class="item-del iconfont iconguanbi"></view> -->
							</view>
						</block>
						<block v-else>
							<view class="empty">
								<image :src="$util.img('public/uniapp/cashier/cart_empty.png')" mode="widthFix"></image>
								<view class="tips">点击右侧商品，选择商品进行结账</view>
							</view>
						</block>
					</view>
				</view>

				<view class="bottom">
					<view class="bottom-info">
						<view class="bottom-left">
							共
							<text>{{ orderData.goods_num }}</text>
							件
						</view>
						<view class="bottom-right">
							优惠明细
							<i class="iconfont iconqianhou2"></i>
						</view>
					</view>
					<view class="bottom-btn">
						<button class="default-btn btn-left">现金收款</button>
						<button class="primary-btn btn-right">收款￥{{ orderData.pay_money | moneyFormat }}</button>
					</view>
				</view>
				<view class="pay-shade"></view>
			</view>
			<view class="uni-flex uni-row common-wrap" style="flex: 2;">
				<view class="comp-wrap" v-show="actionBtnShwo">
					<button :class="['comp-btn', { 'primary-btn': type == 'topUp' }, { 'default-btn': type != 'topUp' }]" @click="type = 'topUp'">充值</button>
					<button :class="['comp-btn', { 'primary-btn': type == 'member' }, { 'default-btn': type != 'member' }]" @click="showMember">会员</button>
				</view>
				<view class="list-wrap" style="flex: 1;">
					<view class="content" v-show="type == 'topUp'">
						<nc-member-recharge @actionBtnShwoFn="actionBtnShwoFn" @switchMember="openSelectMember" ref="member"></nc-member-recharge>
					</view>
					<view class="content" v-show="type == 'member'">
						<nc-member-detail v-if="memberInfo" ref="memberDetail" :member-id="memberInfo.member_id"></nc-member-detail>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="remarkPopup" type="center">
			<view class="remark-wrap">
				<view class="header">
					<text class="title">备注</text>
					<text class="iconfont iconguanbi1" @click="$refs.remarkPopup.close()"></text>
				</view>
				<view class="body"><textarea v-model="remark" placeholder="填写备注信息" placeholder-class="placeholder-class" /></view>
				<view class="footer"><button type="default" class="primary-btn" @click="remarkConfirm">确认</button></view>
			</view>
		</uni-popup>
		<nc-select-member ref="selectMember"></nc-select-member>
	</base-page>
</template>

<script>
import ncSelectMember from '@/components/nc-select-member/nc-select-member.vue';
import ncMemberDetail from '@/components/nc-member-detail/nc-member-detail.vue';
import ncMemberRecharge from '@/components/nc-member-recharge/nc-member-recharge.vue';
export default {
	components: { ncMemberRecharge, ncSelectMember, ncMemberDetail },
	data() {
		return {
			title: '充值',
			type: 'topUp',
			goodsData: {},
			orderData: {
				pay_money: 0,
				goods_list: [],
				remark: '',
				goods_num: 0,
				card_type: 'membercard',
				create_time: 0
			},
			remark: '',
			isRepeat: false,
			actionBtnShwo: true
		};
	},
	onLoad(option) {
		uni.hideTabBar();
		uni.setStorageSync('orderData', {
			pay_money: 0,
			goods_list: [],
			remark: '',
			goods_num: 0,
			card_type: 'membercard'
		});
	},
	onShow() {
		this.type = 'topUp';
		var pages = getCurrentPages(); // 获取栈实例
		let currentPage = pages[pages.length - 1]['$page']['fullPath'];
		this.orderData = uni.getStorageSync('orderData');
		this.orderData.create_time = this.$util.timeFormat(parseInt(new Date().getTime() / 1000));
	},
	methods: {
		remarkConfirm() {
			this.$refs.member.remark = this.remark;
			this.$refs.remarkPopup.close();
		},
		remarkSeting() {
			this.remark = this.$refs.member.remark;
			this.$refs.remarkPopup.open();
		},
		openSelectMember() {
			if (this.$refs.selectMember) this.$refs.selectMember.open();
		},
		showMember() {
			if (!this.memberInfo || !this.memberInfo.member_id) {
				this.openSelectMember();
			} else {
				this.type = 'member';
			}
		},
		clearGoods(data) {
			this.goodsData = [];
		},
		// 控制操作按钮是否显示
		actionBtnShwoFn(data) {
			this.actionBtnShwo = data;
		}
	},
	watch: {
		type: function(nVal) {
			if (nVal != 'member') {
				this.$refs.member.search = false;
			}
		}
	}
};
</script>
<style>
.header-box >>> .uni-select-lay-select {
	padding-right: 0.1rem !important;
}
.header-box >>> .uni-select-lay-icon {
	display: none !important;
}
.header-box >>> .uni-select-lay-input-close {
	display: none !important;
}
</style>
<style lang="scss" scoped>
.left-wrap {
	position: relative;
	max-width: 3.9rem;
	display: flex;
	flex-direction: column;
	.pay-shade {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba($color: #fff, $alpha: 0.6);
		z-index: 10;
		cursor: no-drop;
	}
	.header-box {
		padding: 0.15rem;
		border-bottom: 0.01rem solid #e6e6e6;
		.order-time {
			display: flex;
			align-items: center;

			.title {
				user-select: none;
				position: relative;
				z-index: 3;
				height: 0.3rem;
				padding: 0 0.1rem 0 0.1rem;
				box-sizing: border-box;
				border-radius: 0.02rem;
				border: 0.01rem solid #e5e5e5;
				display: flex;
				align-items: center;
				font-size: 0.14rem;
				color: #333;
				box-sizing: border-box;
			}

			.uni-date {
				flex: 1;
				margin-left: 0.1rem;
			}

			/deep/ .uni-date-x {
				height: 0.28rem;
			}
		}
	}

	.header {
		margin-top: 0.15rem;
		height: 0.8rem;
		font-size: 0.2rem;
		display: flex;
		align-items: center;
		padding: 0 0.15rem;
		background-size: 100% 100%;
		border-radius: 0.03rem;

		.header-image {
			width: 0.5rem;
			height: 0.5rem;
			border-radius: 50%;
		}

		.head-info {
			flex: 1;
			margin-left: 0.1rem;

			.name {
				font-size: 0.16rem;
				color: #fff;
				display: flex;

				.level {
					background: #ffffff;
					border: 0.01rem solid $primary-color;
					border-radius: 0.02rem;
					font-size: 0.12rem;
					color: $primary-color;
					margin-left: 0.05rem;
					padding: 0.01rem 0.04rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.text {
					max-width: 0.8rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.mobile {
				font-size: 0.14rem;
				color: #fff;
				margin-top: 0.04rem;
			}
			.head-info-bottom {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 0.05rem;
				view {
					color: #fff;
					font-size: $uni-font-size-sm;
				}
			}
		}

		.switch {
			text-align: center;
			line-height: 0.3rem;
			margin-left: 0.08rem;
			padding: 0 0.05rem;
			overflow: hidden;
			font-size: $uni-font-size-sm;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.content {
		padding: 0.15rem;
		color: #303133;
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;

		.title {
			font-size: 0.14rem;
			display: flex;
			justify-content: space-between;
		}
		.clear {
			display: flex;
			align-items: center;
			text {
				&:nth-child(1) {
					font-size: 0.18rem;
				}
				&:nth-child(2) {
					margin-left: 0.03rem;
					font-size: 0.14rem;
				}
			}
		}
		.content-list {
			margin-top: 0.1rem;
			flex: 1;
			height: 0;
			overflow-y: scroll;
			.content-item {
				.flex {
					display: flex;
					align-items: center;
				}
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 0.01rem solid #e6e6e6;
				padding: 0.1rem 0;
				.item-img {
					width: 0.5rem;
					height: 0.5rem;
					display: flex;
					align-items: center;
					image {
						width: 100%;
					}
				}
				.item-info {
					flex: 1;
					margin-left: 0.1rem;
					width: 0;
					min-width: 0;
					.item-name {
						font-size: 0.14rem;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 2rem;
					}
					.del {
						margin-right: -0.8rem;
						margin-top: -0.2rem;
						color: #8558fa;
						font-size: 0.14rem;
						float: right;
					}
					.item-spe {
						font-size: 0.1rem;
						color: #999;
						margin-top: 0.05rem;
					}
					.item-price {
						font-size: 0.14rem;
						margin-top: 0.05rem;
						margin-left: -0.03rem;
					}
				}
				.item-num {
					display: flex;
					align-items: center;
					margin-left: 0.1rem;
					margin-top: 0.3rem;
					.num-dec {
						width: 0.25rem;
						height: 0.25rem;
						background: #e6e6e6;
						border: 0.01rem solid #e6e6e6;
						border-radius: 30%;
						text-align: center;
						line-height: 0.23rem;
						font-size: 0.25rem;
						margin-right: 0.1rem;
						cursor: pointer;
						transition: 0.3s;
					}
					.num-inc {
						width: 0.25rem;
						height: 0.25rem;
						background: $primary-color;
						border: 0.01rem solid #e6e6e6;
						border-radius: 30%;
						text-align: center;
						line-height: 0.23rem;
						font-size: 0.25rem;
						margin-left: 0.1rem;
						cursor: pointer;
						transition: 0.3s;
						color: #fff;
					}
				}
				.item-total-price {
					font-size: 0.14rem;
					margin-left: 0.1rem;
					color: #fe2278;
				}
				.item-del {
					// font-size: 0.3rem;
					color: $primary-color;
					margin-left: 0.1rem;
					cursor: pointer;
					margin-right: -0.8rem;
					margin-top: -0.2rem;
					// color: #8558fa;
					font-size: 0.14rem;
					float: right;
				}
			}
		}

		.empty {
			text-align: center;

			image {
				width: 60%;
				margin-top: 0.4rem;
			}

			.tips {
				color: #999;
				margin-top: 0.15rem;
			}
		}
	}
	.bottom {
		width: 100%;
		padding: 0.15rem;
		box-sizing: border-box;
		background-color: #ffffff;
		border-top: 0.01rem solid #e6e6e6;
		.bottom-info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bottom-left {
				font-size: 0.14rem;
				color: #303133;
				opacity: 0.8;
				.money {
					color: #fe2278;
				}
			}
			.bottom-right {
				font-size: 0.14rem;
				color: #303133;
				opacity: 0.8;
				i {
					font-size: 0.14rem;
				}
			}
		}
		.bottom-btn {
			display: flex;
			align-items: center;
			margin-top: 0.1rem;
			.btn-left {
				width: 39%;
				height: 0.4rem;
				line-height: 0.4rem;
			}
			.btn-right {
				width: 60%;
				margin-left: 0.15rem;
				height: 0.4rem;
				line-height: 0.4rem;
			}
		}
	}
}
.comp-wrap {
	min-width: 1rem;
	border: 0.01rem solid #e6e6e6;
	border-radius: 0.02rem;
	padding: 0.2rem 0.17rem;

	.tag-parent {
		position: relative;

		.num-tag {
			position: absolute;
			background-color: #f00;
			color: #fff;
			height: 0.18rem;
			line-height: 0.18rem;
			padding: 0 0.06rem;
			border-radius: 0.1rem;
			font-size: 0.12rem;
			text-align: center;
			z-index: 1;
			top: 0;
			right: 0.12rem;
			transform: translateY(-50%) translateX(100%);
		}
	}

	.comp-btn {
		overflow: inherit;
		margin-bottom: 0.2rem;
	}
}
.list-wrap {
	border: 0.01rem solid #e6e6e6;
	border-radius: 0.02rem;
	height: 100%;
	border-left: 0;
	padding: 0 0.2rem;
	box-sizing: border-box;
	width: 0;

	.content {
		height: 100%;
	}

	.comp-btn {
		width: 80%;
		box-align: center;
		margin-top: 0.2rem;
	}
	.header {
		height: 0.66rem;
		line-height: 0.66rem;
		text-align: left;
		color: #303133;
		font-size: 0.14rem;
	}

	.body {
		padding: 0.3rem;
	}
}
.page-height {
	height: 100%;
}

.common-wrap {
	height: 100%;
}

.remark-wrap {
	width: 6rem;
	background-color: #fff;
	border-radius: 0.04rem;
	box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.15rem;
		height: 0.45rem;
		line-height: 0.45rem;
		border-bottom: 0.01rem solid #e8eaec;
		.iconfont {
			font-size: $uni-font-size-lg;
		}
	}

	.body {
		padding: 0.15rem 0.15rem 0.1rem;

		textarea {
			border: 0.01rem solid #e6e6e6;
			width: 100%;
			padding: 0.1rem;
			box-sizing: border-box;
			font-size: 0.14rem;
		}

		.placeholder-class {
			font-size: 0.14rem;
		}
	}

	.footer {
		height: 0.5rem;
		padding-bottom: 0.05rem;
		display: flex;
		align-items: center;
		justify-content: center;
		button {
			width: 95%;
		}
	}
}
</style>