zhongshen_project/addon/cashier---/source/os/pages/billing/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.toFixed(2) }}</text>
							）
						</view>
						<view class="clear" @click="clearGoods">
							<text class="iconfont iconqingchushujuku"></text>
							<text>清空</text>
						</view>
					</view>
					<view class="content-list common-scrollbar">
						<block v-if="orderData.goods_list.length && Object.keys(goodsData).length">
							<view class="content-item" v-for="(item, index) in orderData.goods_list" :key="index" @click="callBox(item)">
								<view class="item-img">
									<image
										:src="$util.img(item.goods_image.split(',')[0], { size: 'small' })"
										mode="widthFix"
										@error="item.goods_image = $util.img('public/uniapp/default_img/goods.png')"
									></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">{{ item.spec_name }}</view>
									<view class="card-name" v-if="item.card_item_id && goodsData['sku_name' + item.sku_id + 'item_id' + item.card_item_id]">
										使用卡项：{{ goodsData['sku_name' + item.sku_id + 'item_id' + item.card_item_id].card_name }}
									</view>
									<view class="item-price">
										<text class="member-price" v-if="item.is_member_price">Svip</text>
										<text class="unit">￥</text>
										{{ item.price | moneyFormat }}
									</view>
								</view>
								<view class="item-num" v-if="item.goods_class != 6">
									<view class="num-dec" @click="dec(item)">-</view>
									<view class="num" v-if="item.card_item_id && goodsData['sku_' + item.sku_id + 'item_id' + item.card_item_id]">
										{{ goodsData['sku_' + item.sku_id + 'item_id' + item.card_item_id].num }}
									</view>
									<view class="num" v-else-if="goodsData['sku_' + item.sku_id]">{{ goodsData['sku_' + item.sku_id].num }}</view>
									<view class="num" v-else>{{ item.num }}</view>
									<view class="num-inc" @click="inc(item)">+</view>
								</view>
								<view class="item-num" v-if="item.goods_class == 6">
									<view class="num" v-if="item.card_item_id && goodsData['sku_' + item.sku_id + 'item_id' + item.card_item_id]">
										{{ goodsData['sku_' + item.sku_id + 'item_id' + item.card_item_id].num }}
									</view>
									<view class="num" v-else-if="goodsData['sku_' + item.sku_id]">{{ goodsData['sku_' + item.sku_id].num }}</view>
									<view class="num" v-else>{{ item.num }}</view>
									<view>{{item.unit}}</view>
								</view>
								<view class="card-deduction" v-if="item.card_info && Object.keys(item.card_info).length">
									卡项抵扣：{{ item.card_info.goods_name }}抵扣￥{{ item.num * item.goods_money }}({{ item.num }}次)
								</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.toFixed(2) }}</text>
							件
						</view>
						<view class="bottom-right"></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="type = 'goods'">商品</button>
					<button class=" comp-btn" :class="type == 'member' ? 'primary-btn' : 'default-btn'" @click="showMember">会员</button>
					<button class="comp-btn" :class="type == 'card' ? 'primary-btn' : 'default-btn'" @click="showMemberCard">会员卡项</button>

					<button class="default-btn comp-btn" @click="wholeOrderCancel()">整单取消</button>
					<view class="tag-parent">
						<button class="comp-btn" :class="type == 'order' ? 'primary-btn' : 'default-btn'" @click="hangingOrder">挂/取单</button>
						<text class="num-tag" v-if="orderNum > 0">{{ orderNum < 100 ? orderNum : '99+' }}</text>
					</view>
				</view>

				<view class="list-wrap" style="flex: 1;">
					<!-- 提单 -->
					<view v-show="type == 'order'"><nc-pend-order ref="order" @takeorder="takeorder"></nc-pend-order></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 class="content" v-show="type == 'card'"><nc-member ref="member" @selectGoods="selectMemberGoods"></nc-member></view>

					<!-- 商品 -->
					<view class="content" v-show="type == 'goods'"><nc-goods @select="selectGoods" :goods-ids="goodsIds" ref="goods"></nc-goods></view>

					<view class="content payment-content" v-show="type == 'pay'">
						<nc-payment ref="payment" :pay-money="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>
			<u-icon name="arrow-down"></u-icon>
		</uni-popup>

		<nc-select-member ref="selectMember"></nc-select-member>
	</base-page>
</template>

<script>
import billing from './public/js/billing.js';
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: { ncSelectMember, ncMemberDetail },
	onLoad() {
		uni.hideTabBar({});
	},
	data() {
		return {
			memberList: []
		};
	},
	mixins: [billing]
};
</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;

		.search-box {
			.head-search {
				display: flex;

				.search-switch {
					width: 0.7rem;
				}

				.search-input {
					margin-left: 0.1rem;
					display: flex;
					border-width: 0.01rem;
					border-style: solid;
					border-color: #e6e6e6;
					height: 0.3rem;
					align-items: center;
					padding-left: 0.05rem;
					width: calc(100% - 1.3rem);

					.iconfont {
					}

					input {
						margin-left: 0.05rem;
					}
				}

				.search-btn {
					width: 0.55rem;
					margin-left: 0.1rem;
					padding: 0 0.1rem;
					height: 0.32rem;
					font-size: 0.12rem;
				}
			}
		}
	}

	.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;
		}
	}

	.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;
		}
	}

	.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 {
				position: relative;
				.flex {
					display: flex;
					align-items: center;
				}
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				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;
					}
					.card-name {
						font-size: 0.12rem;
						margin-top: 0.05rem;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #999;
					}
					.member-price {
						border-radius: 0.02rem;
						padding: 0.01rem 0.05rem;
						background-color: rgba($primary-color, $alpha: 0.1);
						color: #8558fa;
						font-size: 0.12rem;
						margin-right: 0.05rem;
					}
					.item-price {
						font-size: 0.14rem;
						margin-top: 0.05rem;
						margin-left: -0.03rem;
						.unit {
							font-size: 0.12rem;
						}
					}
				}
				.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 {
					position: absolute;
					right: 0;
					color: $primary-color;
					cursor: pointer;
					margin-top: -0.2rem;
					font-size: 0.14rem;
				}
				.card-deduction {
					width: 100%;
					font-size: 0.12rem;
					margin-top: 0.05rem;
					color: #999;
				}
			}
		}

		.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: 1.3rem;
				height: 0.4rem;
				line-height: 0.4rem;
			}

			.btn-right {
				flex: 1;
				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: initial;
		margin-bottom: 0.2rem;
	}
}

.payment-content {
	border-left: 0.01rem solid #e6e6e6;
	padding-left: 0.17rem;
}

.list-wrap {
	padding: 0 0.2rem;
	border: 0.01rem solid #e6e6e6;
	border-radius: 0.02rem;
	height: 100%;
	border-left: 0;
	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;
		border-bottom: 0.01rem solid #e6e6e6;
		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>