完工配置页-0.0.0

src/components/createCom/XhInput.vue

 <template>
-	<u-input v-model="value" :type="type" :border="border" />
+	<view>
+		input-shuru
+	</view>
+	<!-- <u-form-item label="姓名"><u-input v-model="value" /></u-form-item> -->
 </template>
 
 <script>
 	export default {
+		name:'xhInput',
 		data() {
 			return {
 				value: '',

src/components/createCom/index.js

-// export { default as XhInput } from './XhInput'
-// export { default as XhTextarea } from './XhTextarea'
-// export { default as XhSelect } from './XhSelect'
-// export { default as XhMultipleSelect } from './XhMultipleSelect'
-// export { default as XhFiles } from './XhFiles'
-// export { default as XhSwitch } from './XhSwitch'
-// export { default as XhServiceMore } from './XhServiceMore'
-// export { default as XhDate } from './XhDate'
-

src/pages.json

@@ -151,9 +151,6 @@
 			}
 		
 		}
-    ],
-	"navigateToMiniProgramAppIdList":[
-		"wxd1d6eede324b0465"
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
@@ -217,8 +214,8 @@
 			"path": "pages/settle/pay-ensure", //启动页面，必选
 			"query": "" //启动参数，在页面的onLoad函数里面得到
 		},{
-			"name": "签约页面", //模式名称
-			"path": "pages/settle/sign-contract", //启动页面，必选
+			"name": "订单 - 完工配置", //模式名称
+			"path": "pages/order/complete", //启动页面，必选
 			"query": "" //启动参数，在页面的onLoad函数里面得到
 		}]
 	}

src/pages/order/complete.vue

@@ -3,20 +3,22 @@
 		<view class="u-search-box">
 			<view class="u-search-inner">
 				<u-icon name="search" color="#909399" :size="28"></u-icon>
-				<text class="u-search-text">搜索uView</text>
+				<text class="u-search-text">搜索</text>
 			</view>
 		</view>
 		<view class="u-menu-wrap">
-			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
-				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
-				 :data-current="index" @tap.stop="swichMenu(index)">
+			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
+			 :scroll-into-view="itemId">
+				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
+				 @tap.stop="swichMenu(index)">
 					<text class="u-line-1">{{item.name}}</text>
 				</view>
 			</scroll-view>
-			<block v-for="(item,index) in tabbar" :key="index">
-				<scroll-view scroll-y class="right-box" v-if="current==index">
+			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
+				<form-com></form-com>
+				<!-- <xh-input></xh-input> -->
 				<view class="page-view">
-						<view class="class-item">
+					<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
 						<view class="item-title">
 							<text>{{item.name}}</text>
 						</view>
@@ -29,57 +31,148 @@
 					</view>
 				</view>
 			</scroll-view>
-			</block>
 		</view>
 	</view>
 </template>
-
 <script>
-	import classifyData from "@/common/classify.data.js";
+	import classifyData from '@/common/classify.data.js';
+	// import allComponents from '@/components/createCom/index.js'
+	// import XhInput from '@/components/createCom/XhInput.vue'
+	import formCom from './components/formCom.vue'
 	export default {
 		data() {
 			return {
-				tabbar: classifyData,
 				scrollTop: 0, //tab标题的滚动条位置
+				oldScrollTop: 0,
 				current: 0, // 预设当前项的值
 				menuHeight: 0, // 左边菜单的高度
 				menuItemHeight: 0, // 左边菜单item的高度
+				itemId: '', // 栏目右边scroll-view用于滚动的id
+				tabbar: classifyData,
+				menuItemPos: [],
+				arr: [],
+				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
+				timer: null, // 定时器
+				
 			}
 		},
-		computed: {
+		components:{
+			// 'xh-input': allComponentsXhInput,
+			formCom,
+		},
+		created(){
+			// console.log(allComponents,'allComponents')
+		},
+		onLoad() {
 			
 		},
-		methods: {
-			getImg() {
-				return Math.floor(Math.random() * 35);
+		onReady() {
+			this.getMenuItemTop()
 		},
+		methods: {
 			// 点击左边的栏目切换
 			async swichMenu(index) {
-				if(index == this.current) return ;
-				this.current = index;
-				// 如果为0，意味着尚未初始化
-				if(this.menuHeight == 0 || this.menuItemHeight == 0) {
-					await this.getElRect('menu-scroll-view', 'menuHeight');
-					await this.getElRect('u-tab-item', 'menuItemHeight');
+				if(this.arr.length == 0) {
+					await this.getMenuItemTop();
 				}
-				// 将菜单菜单活动item垂直居中
-				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+				if (index == this.current) return;
+				this.scrollRightTop = this.oldScrollTop;
+				this.$nextTick(function(){
+					this.scrollRightTop = this.arr[index];
+					this.current = index;
+					this.leftMenuStatus(index);
+				})
 			},
 			// 获取一个目标元素的高度
 			getElRect(elClass, dataVal) {
 				new Promise((resolve, reject) => {
 					const query = uni.createSelectorQuery().in(this);
-					query.select('.' + elClass).fields({size: true},res => {
+					query.select('.' + elClass).fields({
+						size: true
+					}, res => {
 						// 如果节点尚未生成，res值为null，循环调用执行
-						if(!res) {
+						if (!res) {
 							setTimeout(() => {
 								this.getElRect(elClass);
 							}, 10);
-							return ;
+							return;
 						}
 						this[dataVal] = res.height;
+						resolve();
 					}).exec();
 				})
+			},
+			// 观测元素相交状态
+			async observer() {
+				this.tabbar.map((val, index) => {
+					let observer = uni.createIntersectionObserver(this);
+					// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
+					// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
+					observer.relativeTo('.right-box', {
+						top: 0
+					}).observe('#item' + index, res => {
+						if (res.intersectionRatio > 0) {
+							let id = res.id.substring(4);
+							this.leftMenuStatus(id);
+						}
+					})
+				})
+			},
+			// 设置左边菜单的滚动状态
+			async leftMenuStatus(index) {
+				this.current = index;
+				// 如果为0，意味着尚未初始化
+				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+					await this.getElRect('menu-scroll-view', 'menuHeight');
+					await this.getElRect('u-tab-item', 'menuItemHeight');
+				}
+				// 将菜单活动item垂直居中
+				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+			},
+			// 获取右边菜单每个item到顶部的距离
+			getMenuItemTop() {
+				new Promise(resolve => {
+					let selectorQuery = uni.createSelectorQuery();
+					selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
+						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
+						if(!rects.length) {
+							setTimeout(() => {
+								this.getMenuItemTop();
+							}, 10);
+							return ;
+						}
+						rects.forEach((rect) => {
+							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
+							this.arr.push(rect.top - rects[0].top);
+							resolve();
+						})
+					}).exec()
+				})
+			},
+			// 右边菜单滚动
+			async rightScroll(e) {
+				this.oldScrollTop = e.detail.scrollTop;
+				if(this.arr.length == 0) {
+					await this.getMenuItemTop();
+				}
+				if(this.timer) return ;
+				if(!this.menuHeight) {
+					await this.getElRect('menu-scroll-view', 'menuHeight');
+				}
+				setTimeout(() => { // 节流
+					this.timer = null;
+					// scrollHeight为右边菜单垂直中点位置
+					let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
+					for (let i = 0; i < this.arr.length; i++) {
+						let height1 = this.arr[i];
+						let height2 = this.arr[i + 1];
+						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
+						if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
+							this.leftMenuStatus(i);
+							return ;
+						}
+					}
+				}, 10)
 			}
 		}
 	}
@@ -173,6 +266,10 @@
 		border-radius: 8rpx;
 	}
 
+	.class-item:last-child {
+		min-height: 100vh;
+	}
+
 	.item-title {
 		font-size: 26rpx;
 		color: $u-main-color;

src/pages/order/components/formCom.vue

+<!-- 实现动态组件的绑定 -->
+<template>
+	<view>
+		书籍及
+		<template v-for="(item,index) in list">
+			<view :key="index">
+
+				<!-- <xh-input></xh-input> -->
+				<!-- <xh-input v-if="item.fieldsType==='input'"></xh-input> -->
+			</view>
+
+			<!-- <component :key="contentIndex" :item="contentItem" :orderId="orderId"
+			:is="contentItem.inputType | typeToComponentName" /> -->
+		</template>
+	</view>
+</template>
+
+<script>
+	// import {
+	// 	// XhInput,
+	// 	// XhSelect,
+	// 	// XhMultipleSelect,
+	// 	// XhFiles,
+	// 	// XhSwitch,
+	// 	// XhTextarea,
+	// 	// XhServiceMore,
+	// 	// XhDate
+	// } from '@/components/createCom/index.js'
+	import XhInput from '@/components/createCom/XhInput.vue'
+	export default {
+		components: {
+			// 'xh-input': XhInput,
+		},
+		data() {
+			return {
+				list: [{
+					fieldsId: '产品规格',
+					fieldsType: 'input',
+					fieldsName: '产品规格',
+					fieldsValue: '',
+					required: true,
+					fields_options: [{
+						key: '',
+						label: ''
+					}]
+				}],
+				configList: [{
+					panelName: '',
+					panelType: '',
+					group: [{
+						groupName: '',
+						item: [{
+							fieldsId: '基础信息',
+							fieldsType: 'input',
+							fieldsName: '',
+							fieldsValue: '',
+							required: true,
+							fields_options: [{
+								key: '',
+								label: ''
+							}]
+						}]
+					}]
+				}],
+			}
+		},
+		created() {
+			console.log(XhInput, 'XhInput')
+		}
+	}
+</script>
+
+<style>
+</style>

vue.config.js

@@ -17,8 +17,8 @@ module.exports = {
 		name: name,
 		resolve: {
 			alias: {
-				"@src": resolve("src"),
-				"@i": resolve("src/api"),
+				"@": resolve("src"),
+				"@api": resolve("src/api"),
 				"@c": resolve("src/components"),
 				"@a": resolve("src/assets"),
 				"@s": resolve("src/styles"),