同步代码

pageLineUp/callRecord.vue

@@ -0,0 +1,199 @@
+<template>
+	<view class="callRecord">
+		<view v-for="item in datas.list" :key="item.id">
+			<view>
+				<view>
+					{{item.callNum}}
+				</view>
+				<view>
+					（{{item.note}}）
+				</view>
+			</view>
+			<view :class="[item.state==3?'rightTopstyle':'rightTop']">
+				{{filterEvent(item.state)}}
+			</view>
+			<view>
+				<view>
+					<view>
+						时间
+					</view>
+					<view>
+						{{item.callTime}}
+					</view>
+				</view>
+				<view>
+					<view>
+						手机号
+					</view>
+					<view>
+						{{item.phone}}
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onMounted,
+		reactive
+	} from 'vue';
+	import {
+		callTablecallRecord,
+	} from '@/http/yskApi/requestAll.js';
+	let datas = reactive({
+		list: ""
+	})
+	onMounted(() => {
+		getList()
+	})
+
+	function filterEvent(i) {
+		// -1已取消 0排队中 1叫号中 2已入座 3 已过号 
+		if (i == -1) {
+			return '已取消'
+		} else if (i == 0) {
+			return '排队中'
+		} else if (i == 1) {
+			return '叫号中'
+		} else if (i == 2) {
+			return '已入座'
+		} else if (i == 3) {
+			return '已过号 '
+		}
+	}
+
+	function getList() {
+		callTablecallRecord({
+			shopId: uni.getStorageSync('shopId'),
+			page: 1,
+			size: 9999
+		}).then((res) => {
+			datas.list = res.records
+		})
+	}
+</script>
+<style>
+	page {
+		background: #f9f9f9;
+	}
+</style>
+<style scoped lang="less">
+	// * {
+	// 	padding: 0;
+	// 	margin: 0;
+	// 	text-decoration: none;
+	// 	outline: none;
+	// }
+
+
+	ul,
+	li {
+		list-style: none;
+		padding: 12rpx;
+	}
+
+
+
+	.callRecord {
+
+		>view {
+			width: 694rpx;
+			height: 166rpx;
+			margin: 32rpx 0;
+			background: #FFFFFF;
+			border-radius: 18rpx 18rpx 18rpx 18rpx;
+			display: flex;
+			align-items: center;
+			position: relative;
+
+			>view:first-child {
+				padding: 0 58rpx;
+				box-sizing: border-box;
+
+				>view:first-child {
+					font-family: Source Han Sans CN, Source Han Sans CN;
+					font-weight: 500;
+					font-size: 56rpx;
+					color: #333333;
+					text-align: center;
+				}
+
+				>view:last-child {
+					font-family: Source Han Sans CN, Source Han Sans CN;
+					font-weight: 500;
+					font-size: 24rpx;
+					color: #999999;
+					text-align: center;
+				}
+			}
+
+			>view:last-child {
+				height: 120rpx;
+				border-left: 2rpx solid #E5E5E5;
+				padding-left: 32rpx;
+
+				>view {
+					display: flex;
+					align-items: center;
+					margin-top: 24rpx;
+
+					>view:first-child {
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 500;
+						font-size: 28rpx;
+						color: #333333;
+						width: 90rpx;
+					}
+
+					>view:last-child {
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #666666;
+					}
+				}
+			}
+
+			.rightTop {
+				position: absolute;
+				right: 0rpx;
+				top: 0;
+
+				width: 94rpx;
+				height: 36rpx;
+				line-height: 36rpx;
+				text-align: center;
+				background: #4394FD;
+				border-radius: 0rpx 8rpx 0rpx 8rpx;
+
+				font-family: Source Han Sans CN, Source Han Sans CN;
+				font-weight: 400;
+				font-size: 22rpx;
+				color: #FFFFFF;
+			}
+
+			.rightTopstyle {
+				position: absolute;
+				right: 0rpx;
+				top: 0;
+
+				width: 94rpx;
+				height: 36rpx;
+				line-height: 36rpx;
+				text-align: center;
+				background: #9a9a9a;
+				border-radius: 0rpx 8rpx 0rpx 8rpx;
+
+				font-family: Source Han Sans CN, Source Han Sans CN;
+				font-weight: 400;
+				font-size: 22rpx;
+				color: #FFFFFF;
+			}
+
+		}
+
+
+	}
+</style>