完工页面-产品规格选择跳到新页面选择

src/components/createCom/XhSpecifications.vue

+<!-- *******************  单个下拉选择  *******************  -->
+<template>
+	<view class="xh-specifications" :style="{'width': fieldsWidth}">
+		<view class="u-flex u-row-between picker-common" @click="handleClick()">
+			<view>{{text || '请选择'}}</view>
+			<u-icon class="input-icon" color="#2272FF" name="arrow-down"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+	import stringMixin from './stringMixin'
+	export default {
+		name: 'XhSpecifications',
+		components: {},
+		mixins: [stringMixin],
+		props: {
+			placeholder: {
+				type: String,
+				default: '请选择'
+			},
+			width: { // 例如：454rpx
+				type: String,
+				default: '100%'
+			},
+			type: {
+				type: String,
+				default: 'text'
+			},
+		},
+		data() {
+			return {
+			}
+		},
+		computed: {
+			fieldsWidth() {
+				return this.item.fieldsWidth ?  (this.item.fieldsWidth + 'rpx') : '100%'
+			},
+			text(){
+				let option = this.item.fieldsOptions.find(a=>{return a.key === this.dataValue}) 
+				return option?option.label:''
+			}
+		},
+		watch: {},
+		mounted() {},
+		methods: {
+			handleClick() {
+				var pages = getCurrentPages();
+				if (pages.length >= 1) {
+					var page = pages[pages.length - 1];
+					page.info = this.item
+				}
+				uni.navigateTo({
+					url: 'pages/order/specification?specificationId=' + this.dataValue
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.xh-specifications {
+		position: relative;
+		.input-icon {
+			position: absolute;
+			right: 20rpx;
+			top: 26rpx;
+			color: #2272FF;
+		}
+	}
+	.picker-common {
+		min-height: 35px;
+		background-color: #F4F5F7;
+		border-radius: 6px;
+		color: #333333;
+		padding-left: 10px;
+		padding-right: 12px;
+		width: 100%;
+		height: 38px;
+		.txt {
+			font-size: 14px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+</style>

src/pages.json

@@ -340,6 +340,15 @@
 						"enablePullDownRefresh": false,
 						"disableScroll": true
 					}
+				},
+				{
+					"path": "specification",
+					"style": {
+						"navigationBarTitleText": "", // 完工-产品规格
+						"navigationStyle": "custom",
+						"enablePullDownRefresh": false,
+						"disableScroll": true
+					}
 				}
 			]
 		},

src/pages/order/complete.vue

@@ -36,6 +36,10 @@
                                                     :groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
                                                     @value-change="fieldValueChange">
                                                 </xh-select>
+												<xh-specifications v-else-if="item.formType==='specifications'"
+												    :groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
+												    @value-change="fieldValueChange">
+												</xh-specifications>
                                                 <view v-else-if="item.formType==='file'">
                                                     <xh-files
                                                         :ref="`fileChild${groupIndex}${itemIndex}`"
@@ -103,6 +107,7 @@
     import XhRadio from '@/components/createCom/XhRadio.vue'
     import XhCheckbox from '@/components/createCom/XhCheckbox.vue'
     import XhSelect from '@/components/createCom/XhSelect.vue'
+	import XhSpecifications from '@/components/createCom/XhSpecifications.vue'
     import XhFiles from '@/components/createCom/XhFiles.vue'
     import XhLocation from '@/components/createCom/XhLocation.vue'
     import XhScan from '@/components/createCom/XhScan.vue'
@@ -127,7 +132,7 @@
         ['jscode', ['input','text']],
         ['multiinput', ['multiinput','text']],
         ['select', ['select','text']],
-        ['specifications', ['select','text']],
+        ['specifications', ['specifications','text']],
         ['radio', ['radio','text']],
         ['checkbox', ['checkbox','text']],
         ['file', ['file','text']],
@@ -267,6 +272,7 @@
             XhRadio,
             XhCheckbox,
             XhSelect,
+			XhSpecifications,
             XhFiles,
             XhLocation,
             XhScan,

src/pages/order/specification.vue

+<template>
+	<view class="specification-view">
+		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="选择产品规格" titleColor="#333333" :border-bottom="false"
+			title-bold></u-navbar>
+		<view class="specification-content">
+			<view v-for="(item, index) in info.fieldsOptions" :key="index">
+				<view @tap="handleClick(item.key)" class="item-view" hover-class='hover-class'>
+					<view class="item-title">
+						<text>{{item.label}}</text>
+					</view>
+					<view class="icon-view">
+						<u-icon name="checkbox-mark" v-if="item.key == specificationId"></u-icon>
+					</view>
+				</view>
+				<view class="line-view"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				info: {fieldsName: 'specificationId', fieldsOptions: []},
+				specificationId: ''
+			};
+		},
+		onLoad(e) {
+			getApp().trackPage('完工-规格选择页面')
+			if (e && e.specificationId) {
+				this.specificationId = e.specificationId
+			}
+			var pages = getCurrentPages();
+			if (pages.length >= 2) {
+				var page = pages[pages.length - 2];
+				this.info = page.info
+			}
+		},
+		methods: {
+			handleClick(selectedId) {
+				this.specificationId = selectedId
+				let pages = getCurrentPages();
+				let prevPage = pages[pages.length - 2]; //上一个页面
+				let data = {}
+				data[this.info.fieldsName] = selectedId
+				prevPage.$vm.setData(data)//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
+				uni.navigateBack();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.specification-view {
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		
+		.specification-content {
+			height: 100%;
+			width: 100%;
+			overflow-y: auto;
+			padding-bottom: 44rpx;
+			.item-view {
+				height: 104rpx;
+				background-color: #FFFFFF;
+				line-height: 104rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.item-title {
+					text-align: center;
+					min-width: 400rpx;
+				}
+				.icon-view {
+					color: #2272FF;
+					text-align: left;
+				}
+			}
+			.hover-class {
+				background-color: #f7f8f9;
+			}
+			.line-view {
+				height: 2rpx;
+				padding: 0 30rpx;
+				background-color: #F4F5F7;
+			}
+		}
+	}
+</style>