zhongshen_project/addon/cashier---/source/os/pages/buycard/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="$refs.selectMember.open()">更换会员</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" @click="$refs.selectMember.open()">查询会员</button>
					</view>
				</view>

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

					<view class="contnet-list common-scrollbar">
						<block v-if="orderData.goods_list.length && Object.keys(goodsData).length">
							<view class="contnet-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" @click="deleteGoods(item)">删除</view>
									<view class="item-spe" arrow-down>{{ item.spec_name }}</view>
									<view class="item-price">￥{{ item.price | moneyFormat }}</view>
								</view>
								<view class="item-num">
									<view class="num-dec" @click="dec(item)">-</view>
									<view class="num">{{ goodsData['sku_' + item.sku_id].num }}</view>
									<view class="num-inc" @click="inc(item)">+</view>
								</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>
					<view class="bottom-btn">
						<button class="default-btn btn-left" :disabled="orderData.goods_num == 0" @click="pay('cash')">现金收款</button>
						<button class="primary-btn btn-right" :disabled="orderData.goods_num == 0" @click="pay('')">收款￥{{ orderData.pay_money | moneyFormat }}</button>
					</view>
				</view>
				<view class="pay-shade" v-show="type == 'pay'"></view>
			</view>
			<view class="uni-flex uni-row common-wrap" style="flex: 2;">
				<view class="comp-wrap" v-show="type != 'pay'">
					<button class=" comp-btn" :class="type == 'goods' ? 'primary-btn' : 'default-btn'" @click="toGoods">卡项</button>
					<button class=" comp-btn" :class="type == 'member' ? 'primary-btn' : 'default-btn'" @click="showMember">会员</button>
				</view>

				<view class="list-wrap" style="flex: 1;">
					<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 class="content" v-show="type == 'goods'"><nc-card v-if="hackReset" @select="selectGoods" :type="orderData.card_type"></nc-card></view>

					<view class="content" v-show="type == 'pay'">
						<nc-payment
							v-if="hackReset"
							ref="payment"
							:payMoney="orderData.pay_money"
							@cancel="cancelPayment"
							@success="paySuccess"
							:out-trade-no="outTradeNo"
						></nc-payment>
					</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 ncMemberBuycard from '@/components/nc-member-buycard/nc-member-buycard.vue';
import ncSelectMember from '@/components/nc-select-member/nc-select-member.vue';
import ncMemberDetail from '@/components/nc-member-detail/nc-member-detail.vue';
export default {
	components: {
		ncMemberBuycard,
		ncSelectMember,
		ncMemberDetail
	},
	data() {
		return {
			title: '收银台',
			type: 'goods',
			goodsData: {},
			orderData: {
				pay_money: 0,
				goods_list: [],
				remark: '',
				goods_num: 0,
				card_type: 'oncecard',
				create_time: 0
			},
			remark: '',
			isRepeat: false,
			outTradeNo: '',
			hackReset: true
		};
	},
	onLoad(option) {
		uni.hideTabBar();
		this.orderData.card_type = option.type || 'oncecard';
		if (this.memberInfo) this.type = 'goods';
	},
	onShow() {
		this.orderData.create_time = this.$util.timeFormat(parseInt(new Date().getTime() / 1000));
	},
	methods: {
		init() {
			if (this.siteStore) {
				var pages = getCurrentPages(); // 获取栈实例
				let currentPage = pages[pages.length - 1]['$page']['fullPath']; //当前页面路径(带参数)
				uni.setStorageSync(currentPage, this.siteStore);
			}
			this.hackReset = false;
			this.$nextTick(() => {
				this.hackReset = true;
			});

			if (this.memberInfo) this.type = 'goods';
		},
		showMember() {
			if (!this.memberInfo) {
				if (this.$refs.selectMember) this.$refs.selectMember.open();
			} else {
				this.type = 'member';
			}
		},
		/**
		 * 切换散客
		 */
		replaceMember() {
			if (this.$refs.selectMember) this.$refs.selectMember.memberId = 0;
			this.$store.commit('setMemberInfo', null);
			this.type = 'goods';
		},
		selectGoods(data) {
			if (this.goodsData['sku_' + data.sku_id]) {
				this.goodsData['sku_' + data.sku_id].num += 1;
			} else {
				this.goodsData['sku_' + data.sku_id] = data;
				this.goodsData['sku_' + data.sku_id].num = 1;
			}
			this.calculation();
		},
		calculation() {
			if (!Object.keys(this.goodsData).length) return;
			let sku_array = [];
			Object.keys(this.goodsData).forEach(key => {
				let item = this.goodsData[key];
				sku_array.push({
					sku_id: item.sku_id,
					num: item.num
				});
			});
			let data = {
				sku_array: JSON.stringify(sku_array),
				create_time: this.orderData.create_time
			};
			if (this.memberInfo) data.member_id = this.memberInfo.member_id;

			this.$api.sendRequest({
				url: '/cashier/storeapi/cashierordercreate/cardcalculate',
				data: data,
				success: res => {
					if (res.code == 0) {
						Object.assign(this.orderData, res.data);
						// uni.setStorageSync('orderData', this.orderData);
						this.$forceUpdate();
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				}
			});
		},

		inc(data) {
			if (data.goods_type != '') {
				this.goodsData['sku_' + data.sku_id].num += 1;
			} else {
				if (data.num < data.stock) this.goodsData['sku_' + data.sku_id].num += 1;
			}
			this.calculation();
		},
		dec(data) {
			if (data.num > 1) {
				this.goodsData['sku_' + data.sku_id].num -= 1;
				this.calculation();
			}
		},

		deleteGoods(data) {
			delete this.goodsData['sku_' + data.sku_id];
			this.calculation();

			if (!Object.keys(this.goodsData).length) {
				this.orderData.goods_list = [];
				this.orderData.goods_num = 0;
				this.orderData.pay_money = 0;
			}
			uni.setStorageSync('orderData', this.orderData);
		},
		clearGoods() {
			this.goodsData = [];
			this.orderData.goods_list = [];
			this.orderData.goods_num = 0;
			this.orderData.pay_money = 0;
			this.goodsIds = [];
		},

		pay(type = '') {
			if (!this.memberInfo) {
				if (this.$refs.selectMember) this.$refs.selectMember.open();
				return false;
			}
			if (!Object.keys(this.goodsData).length || this.isRepeat) return;
			this.isRepeat = true;

			if (this.outTradeNo) {
				this.type = 'pay';
				if (type) this.$refs.payment.type = type;
				return;
			}

			let sku_array = [];
			Object.keys(this.goodsData).forEach(key => {
				let item = this.goodsData[key];
				sku_array.push({
					sku_id: item.sku_id,
					num: item.num
				});
			});
			let data = {
				sku_array: JSON.stringify(sku_array),
				remark: this.orderData.remark,
				create_time: this.orderData.create_time
			};
			if (this.memberInfo) data.member_id = this.memberInfo.member_id;

			this.$api.sendRequest({
				url: '/cashier/storeapi/cashierordercreate/cardcreate',
				data: data,
				success: res => {
					this.isRepeat = false;
					if (res.code == 0) {
						this.outTradeNo = res.data.out_trade_no;
						this.orderId = res.data.order_id;
						this.type = 'pay';
						if (type) this.$refs.payment.type = type;
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				}
			});
		},
		cancelPayment() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/cashierorder/deleteorder',
				data: {
					order_id: this.orderId
				},
				success: res => {
					if (res.code == 0) {
						this.outTradeNo = '';
						this.orderId = 0;
						this.type = 'goods';
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				}
			});
		},
		paySuccess() {
			this.type = 'goods';
			this.wholeOrderCancel();
		},

		/**
		 * 整单取消
		 */
		wholeOrderCancel() {
			if (Object.keys(this.goodsData).length) {
				// 清除商品数据
				this.goodsData = {};
				this.calculation();
				if (this.orderData.order_id) {
					this.$refs.order.deleteOrder(this.orderData);
					this.orderData.order_id = 0;
				}
				// 清除订单数据
				this.orderData = {
					goods_num: 0,
					pay_money: 0,
					goods_list: [],
					remark: ''
				};
				this.outTradeNo = '';
				this.orderId = 0;
			} else {
				this.$util.showToast({
					title: '当前没有订单'
				});
			}
		},
		toGoods() {
			this.type = 'goods';
		},
		remarkConfirm() {
			this.orderData.remark = this.remark;
			this.$refs.remarkPopup.close();
		},
		remarkSeting() {
			this.remark = this.orderData.remark;
			this.$refs.remarkPopup.open();
		}
	},
	watch: {
		memberInfo: function(nVal) {
			this.calculation();
		}
	}
};
</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;
	}

	.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;
			justify-content: space-between;
			display: flex;
		}
		.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;
				}
			}
		}
		.contnet-list {
			margin-top: 0.1rem;
			flex: 1;
			height: 0;
			overflow-y: scroll;

			.contnet-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.19rem;
						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 {
					color: $primary-color;
					margin-left: 0.1rem;
					cursor: pointer;
					margin-right: -0.8rem;
					margin-top: -0.2rem;
					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>