aiot-app/pages/molds/detail/detail.vue

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" leftText="起重机02563663" @clickLeft="back">
		</uni-nav-bar>
		<view id="collapseBox">
			<!-- <scroll-view :scroll-into-view="pickId" scroll-y="true"> -->
			<!-- 基本信息 -->
			<uni-collapse ref="collapse-jbxx" id="jbxx">
				<uni-collapse-item :open="true" :typeOpen="1" title="基本信息">
					<view class="bg">
						<DetailMain :detailsInfo="moldsIndfoDetailFn(worksheetInfo)"></DetailMain>
						<view class="list-none" @click="showMore" v-if="detailShow">
							查看更多
						</view>
						<DetailMain v-else :detailsInfo="moldsIndfoDetailFn(worksheetInfo, true)"></DetailMain>
					</view>
				</uni-collapse-item>
			</uni-collapse>
			<!-- 模具特有信息 -->
			<uni-collapse ref="collapse-tyxx" id="tyxx">
				<uni-collapse-item :open="true" :typeOpen="1" title="模具特有信息">
					<uni-collapse ref="collapse-tyxx1">
						<uni-collapse-item :open="false" :typeOpen="false" titleStyle="background-color: #ffffff">
							<OrderDetail slot="typeOpenShow" value1="模具1" value2="TO15546545646" value3="PAU08"
								value4="89636">
							</OrderDetail>
							<view class="mainShow-bg" @click.stop>
								<CellInfo v-for="(item,index) in tyxxList" :key="index" :label="item.label"
									:value="item.content"></CellInfo>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</uni-collapse-item>
			</uni-collapse>
			<!-- 牌号型号绑定 -->
			<uni-collapse ref="collapse-xhbd" id="xhbd">
				<uni-collapse-item :open="true" :typeOpen="1" title="牌号型号绑定">
					<uni-collapse ref="collapse">
						<uni-collapse-item :open="false" :typeOpen="false" titleStyle="background-color: #ffffff">
							<OrderDetail slot="typeOpenShow" value1="常规巡检" value2="TO15546545646" value3="巡检"
								value4="20分钟">
							</OrderDetail>
							<view class="mainShow-bg" @click.stop>
								<CellInfo v-for="(item,index) in xhbdList" :key="index" :label="item.label"
									:value="item.content"></CellInfo>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</uni-collapse-item>
			</uni-collapse>
			<!-- 盘点记录 -->
			<uni-collapse ref="collapse-pdjl" id="pdjl">
				<uni-collapse-item :open="true" :typeOpen="1" title="盘点记录">
					<uni-collapse ref="collapse">
						<uni-collapse-item :open="false" :typeOpen="false" titleStyle="background-color: #ffffff">
							<OrderDetail slot="typeOpenShow" value1="张武山" value2="TO15546545646"
								value3="2022-01-22 10:00:00" value4="20分钟"></OrderDetail>
							<view class="mainShow-bg" @click.stop>
								<CellInfo v-for="(item,index) in pdjlList" :key="index" :label="item.label"
									:value="item.content"></CellInfo>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</uni-collapse-item>
			</uni-collapse>
			<!-- </scroll-view> -->
		</view>
		<view class="page-bottom"></view>
		<view class="page-quickly" @click="setOptionShow">
			导航

		</view>

		<!-- 进度组件 根据状态显示不同列表  -->
		<popupOper :optionShow="optionShow" point="bottom" :operationList="operationList" @operate="operate">
		</popupOper>

	</view>
</template>

<script>
	import {
		get
	} from "@/utils/api.js"
	import {
		moldsIndfoDetailFn
	} from '@/utils/common.js'
	import DetailMain from '@/components/DetailMain.vue'
	import CellInfo from '@/components/CellInfo.vue'
	import OrderDetail from '../components/OrderDetail.vue'
	import PopupOper from '@/components/PopupOper.vue'
	export default {
		components: {
			DetailMain,
			OrderDetail,
			CellInfo,
			PopupOper
		},
		data() {
			return {
				pageId: "",
				worksheetInfo: null,
				moldsIndfoDetailFn,
				detailShow: false,
				pickId: 'jbxx',
				tyxxList: [{
						label: '长（mm）',
						content: '10'
					},
					{
						label: '宽（mm）',
						content: '10'
					},
					{
						label: '高（mm）',
						content: '10'
					},
					{
						label: '外径（mm）',
						content: '10'
					},
					{
						label: '内径（mm）',
						content: '10'
					},
					{
						label: '孔径（mm）',
						content: '10'
					}
				],
				xhpdList: [{
						label: '计划单号',
						content: '266356'
					},
					{
						label: '巡点检人员',
						content: '张三'
					},
					{
						label: '计划创建时间',
						content: '2022-01-22 10:00'
					},
					{
						label: '计划下发时间',
						content: '2022-01-22 10:00'
					},
					{
						label: '执行开始时间',
						content: '2022-01-22 10:00'
					},
					{
						label: '执行结束时间',
						content: '2022-01-22 10:00'
					},
				],
				pdjlList: [{
						label: '计划创建时间',
						content: '2022-01-22 10:00'
					},
					{
						label: '计划下发时间',
						content: '2022-01-22 10:00'
					},
					{
						label: '执行开始时间',
						content: '2022-01-22 10:00'
					},
					{
						label: '执行结束时间',
						content: '2022-01-22 10:00'
					},
				],
				optionShow: false,
				operationList: [{
						title: '基本信息',
						type: 'jbxx'
					},
					{
						title: '模具特有信息',
						type: 'tyxx'
					},
					{
						title: '牌号型号绑定',
						type: 'xhpd'
					},
					{
						title: '盘点记录',
						type: 'pdjl'
					}
				],

			}
		},
		onLoad(options) {
			this.pageId = options.id || 746;
			this.getInfo();
		},

		methods: {
			getInfo() {
				get(this.apiUrl + "/feature/worksheet/info", {
					id: this.pageId
				}).then(res => {
					console.log(res)
					this.worksheetInfo = res.data;
				})
			},
			showMore() {
				this.detailShow = !this.detailShow
			},
			//滑动到指定的节点
			operate(type) {
				uni.createSelectorQuery().select("#" + type).boundingClientRect(data => { //目标节点、也可以是最外层的父级节点
					uni.createSelectorQuery().select("#collapseBox").boundingClientRect((res) => { //最外层盒子节点
						let tops = data.top - res.top
						uni.pageScrollTo({
							duration: 300,
							scrollTop: tops, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
						})
					}).exec()
				}).exec();
			},
			//点击显示弹窗
			setOptionShow() {
				this.optionShow = !this.optionShow;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mainShow-bg {
		background-color: $page-bg;
	}

	.page-bottom {
		height: 160rpx;
	}

	.page-quickly {
		position: fixed;
		bottom: 0;
		right: 0;
		margin: 40rpx;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 50%;
		background-color: $j-primary-green;
		color: #FFFFFF;
		font-size: $uni-font-size-base;
	}
</style>