shenze-sysMan/src/views/device/toDaySugarList.vue

<template>
	<!-- 今日做糖列表 -->
	<div class="page flex-col">
		<s-header :name="$t('device.todaysSugarList')" :noback="false"></s-header>
		<div class="box1 flex-col">
			<div class="block2 flex-row justify-between">
				<div class="block3 flex-col"></div>
				<span class="info2">{{ $t('device.equipmentName') }}：{{ deviceDetal ? deviceDetal.name : '' }}</span>
			</div>
			<van-list
			  class="o-pt-20"
			  v-model:loading="loading"
			  :finished="finished"
			  :finished-text="$t('public.noMore')"
			  @load="selectSugarListFun"
			>
			  <van-cell v-for="(item, index) in list" :key="index" :title="item" />
			</van-list>
		</div>
	</div>
</template>
<script>
	import {
		onMounted,
		ref
	} from "vue";
	import sHeader from "@/components/SimpleHeader";
	import {
		getDeviceDetal,
		selectSugarList
	} from "@/service/device";
	import {
		Toast
	} from "vant";
	import {
		getLoginUser
	} from "@/common/js/utils";
	import {
		useRoute
	} from 'vue-router';


	export default {
		setup() {
			const route = useRoute();
			const deviceId = route.query.deviceId;
			const deviceDetal = ref(null);
			const loading = ref(false);
			const finished = ref(false);
			const user = getLoginUser();
			const list = ref([]);
			// 初始化页面获取列表
			onMounted(async () => {
				getDeviceDetalFun();
				selectSugarListFun();
				// console.log(deviceDetal);
			});


			// 获取设备数据
			const getDeviceDetalFun = async () => {
				const {
					data
				} = await getDeviceDetal({
					id: deviceId
				});
				if (data.code === '00000') {
					deviceDetal.value = data.data;
				} else {
					Toast.fail(data.message);
				}
			}

			// 获取做糖列表数据
			const selectSugarListFun = async () => {
				// console.log(user);
				const {
					data
				} = await selectSugarList({
					adminId: user.id
				});
				if (data.code) {
					list.value = data.data.map((item) => {
						return item.productName;
					});
					finished.value = true;
				} else {
					Toast.fail(data.message);
				}
			};

			return {
				list,
				deviceDetal,
				loading,
				finished,
				selectSugarListFun,
			};
		},
		components: {
			sHeader
		},
	};
</script>
<style lang="less" scoped>
	@import "../../common/style/common";

	.page {
		position: relative;
		width: 375px;
		height: calc(100vh - 44px);

		.box1 {
			width: 100%;
			height: 237px;

			.block2 {
				width: 162px;
				height: 20px;
				margin: 18px 0 0 15px;

				.block3 {
		 		background-color: rgba(128, 150, 236, 1);
					border-radius: 2px;
					width: 4px;
					height: 12px;
					margin-top: 4px;
				}

				.info2 {
					width: 150px;
					height: 20px;
					overflow-wrap: break-word;
		 		color: rgba(64, 77, 116, 1);
					font-size: 14px;
					font-family: PingFangSC-Medium;
					text-align: left;
					white-space: nowrap;
					line-height: 20px;
					display: block;
				}
			}
		}
	}
</style>