zhongshen_project/addon/cashier---/source/os/components/nc-pend-order/nc-pend-order.vue

<template>
	<view class="container">
		<view class="header">取单</view>
		<scroll-view scroll-y="true" @scrolltolower="getOrder" class="scroll-view-wrap">
			<view class="table-list" v-if="orderData.list.length">
				<block v-for="(item, index) in orderData.list" :key="index">
					<view class="table-item" v-show="item.order_id != orderId">
						<view class="table-header">
							<view class="table-header-info">
								<text>订单总价：</text>
								<text class="color">￥{{ item.order_money | moneyFormat }}</text>
							</view>
							<view class="table-header-time">
								<text>挂单时间：{{ item.create_time | timeFormat }}</text>
								<block v-if="item.member_id">
									<text class="line">|</text>
									<text>会员：{{ item.nickname }}</text>
								</block>
							</view>
						</view>

						<view class="table-content">
							<view class="table-content-item" v-for="(goods, gindex) in item.order_goods" :key="gindex">
								<view class="content-item-left">
									<view class="content-item-img">
										<image :src="$util.img('public/uniapp/default_img/goods.png')" v-if="goods.goods_class == 'money'"></image>
										<image
											:src="$util.img(goods.goods_image, { size: 'small' })"
											@error="goods.goods_image = $util.img('public/uniapp/default_img/goods.png')"
											v-else
										></image>
									</view>
									<view class="content-item-info">
										<view class="content-item-name" v-if="goods.goods_class == 'money'">无码商品</view>
										<view class="content-item-name" v-else>{{ goods.goods_name }} {{ goods.spec_name }}</view>
										<view>￥{{ goods.price | moneyFormat }}</view>
									</view>
								</view>
								<view class="content-item-number">x {{ goods.num }}</view>

								<view class="content-item-price">￥{{ (goods.num * goods.price) | moneyFormat }}</view>
							</view>
						</view>

						<view class="remark-info" v-if="item.remark">备注：{{ item.remark }}</view>

						<view class="table-bottom">
							<button class="default-btn btn-left" @click="deleteOrder(item)">删除</button>
							<button class="default-btn btn-left" @click="remarkSeting(item, index)">备注</button>
							<button class="primary-btn btn-right" @click="takeorder(item, index)">取单</button>
						</view>
					</view>
				</block>
			</view>
			<view class="empty" v-if="!orderData.list.length || (orderData.list.length == 1 && orderId)">
				<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
				<view class="tips">暂无挂单记录</view>
			</view>
		</scroll-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>
	</view>
</template>

<script>
export default {
	name: 'ncPendOrder',
	props: {},
	data() {
		return {
			orderData: {
				page: 0,
				total: 1,
				list: []
			},
			remark: '',
			index: -1,
			orderId: 0,
			isRepeat: false
		};
	},
	created() {
		this.getOrder();
	},
	methods: {
		getOrder() {
			if (this.orderData.page + 1 > this.orderData.total) return;
			this.orderData.page += 1;
			this.orderId = 0;
			this.$api.sendRequest({
				url: '/cashier/storeapi/pendorder/page',
				data: {
					page: this.orderData.page
				},
				success: res => {
					if (res.code == 0) {
						if (this.orderData.page == 1) this.orderData.list = [];
						this.$store.commit('setPendOrderNum', res.data.count);
						if (res.data.list.length) {
							this.orderData.total = res.data.page_count;
							this.orderData.list = this.orderData.list.concat(res.data.list);
						} else {
							this.orderData.total = 1;
						}
					}
				}
			});
		},
		deleteOrder(data) {
			this.$api.sendRequest({
				url: '/cashier/storeapi/pendorder/delete',
				data: {
					order_id: data.order_id
				},
				success: res => {
					if (res.code == 0) {
						this.orderData.page = 0;
						this.getOrder();
					}
				}
			});
		},
		remarkConfirm() {
			let data = this.orderData.list[this.index];
			this.$api.sendRequest({
				url: '/cashier/storeapi/pendorder/updateremark',
				data: {
					order_id: data.order_id,
					remark: this.remark
				},
				success: res => {
					if (res.code == 0) {
						this.orderData.list[this.index].remark = this.remark;
						this.$refs.remarkPopup.close();
					} else {
						this.$util.showToast({ title: '操作失败' });
					}
				}
			});
		},
		remarkSeting(data, index) {
			this.index = index;
			this.remark = data.remark;
			this.$refs.remarkPopup.open();
		},
		takeorder(data, index) {
			this.orderId = data.order_id;
			this.$emit('takeorder', data);
		},
		switchStoreAfter() {
			this.orderData = {
				page: 0,
				total: 1,
				list: []
			};
			this.getOrder();
		}
	}
};
</script>

<style lang="scss">
.container {
	height: 100%;
	display: flex;
	flex-direction: column;

	.scroll-view-wrap {
		box-sizing: border-box;
		padding: 0.15rem 0;
		height: 7.8rem;
	}
}

.header {
	height: 0.66rem;
	line-height: 0.66rem;
	text-align: left;
	border-bottom: 0.01rem solid #e6e6e6;
	color: #303133;
	font-size: 0.14rem;
}

.table-list {
	.table-item {
		border: 0.01rem solid #e6e6e6;
		padding: 0.15rem;
		position: relative;
		margin-bottom: 0.2rem;
		.table-header-info {
			text {
				font-size: 0.16rem;
			}
			.color {
				font-size: 0.18rem;
				color: #fe2278;
			}
		}
		.table-header-time {
			color: #909399;
			font-size: 0.14rem;
			margin-top: 0.1rem;
			.line {
				margin: 0 0.15rem;
			}
		}
		.table-header-btn {
			position: absolute;
			right: 0.3rem;
			top: 0.3rem;
			color: $primary-color;
			cursor: pointer;
		}
		.table-content {
			margin-top: 0.1rem;
			.table-content-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 0.01rem solid #e6e6e6;
				padding: 0.1rem 0;
				.content-item-left {
					display: flex;
					align-items: center;
					flex: 1;
					width: 0;
					.content-item-info {
						padding-right: 0.15rem;
						flex: 1;
						width: 0;
						view {
							font-size: 0.14rem;
						}
						.content-item-name {
							margin-bottom: 0.05rem;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							white-space: normal;
							word-break: break-all;
						}
					}
				}
				.content-item-img {
					width: 0.5rem;
					height: 0.5rem;
					margin-right: 0.1rem;

					image {
						width: 100%;
						height: 100%;
					}
				}
				.content-item-number {
					font-size: 0.16rem;
				}
				.content-item-price {
					font-size: 0.14rem;
					width: 40%;
					text-align: right;
				}
			}
		}

		.remark-info {
			padding: 0.1rem;
			background-color: rgba($color: $primary-color, $alpha: 0.1);
			color: $primary-color;
			margin-top: 0.1rem;
			font-size: 0.12rem;
		}

		.table-bottom {
			margin-top: 0.2rem;
			display: flex;
			justify-content: end;
			button {
				width: 1rem;
				margin: 0;
				margin-right: 0.1rem;
			}
		}
	}
}

/deep/ .uni-scroll-view {
	&::-webkit-scrollbar {
		width: 0.06rem;
		height: 0.06rem;
		background-color: rgba($color: #000000, $alpha: 0);
	}

	&::-webkit-scrollbar-button {
		display: none;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 0.06rem;
		box-shadow: inset 0 0 0.06rem rgba(45, 43, 43, 0.45);
		background-color: #ddd;
		display: none;
	}

	&:hover::-webkit-scrollbar-thumb {
		display: block;
	}

	&::-webkit-scrollbar-track {
		background-color: transparent;
	}
}

.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,
	.footer {
		height: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 0.01rem solid #e6e6e6;
		position: relative;

		.title {
			font-size: 0.16rem;
			font-weight: bold;
		}

		.iconfont {
			line-height: 1;
			position: absolute;
			right: 0.15rem;
			font-size: 0.2rem;
			cursor: pointer;
		}
	}

	.body {
		padding: 0.15rem;

		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 {
		border-top: 0.01rem solid #e6e6e6;
		border-bottom: unset;

		button {
			width: 1rem;
		}
	}
}

.empty {
	text-align: center;
	padding-top: 1.2rem;

	image {
		width: 2rem;
	}

	.tips {
		color: #999;
		margin-top: 0.15rem;
	}
}
</style>