Merge branch 'dev-1.4.1' of https://git.banshouhui.com/lijundan/self-support into dev-1.4.1

src/components/createCom/XhSpecifications.vue

+<!-- *******************  单个下拉选择  *******************  -->
+<template>
+	<view class="xh-specifications" :style="{'width': fieldsWidth}">
+		<view class="u-flex u-row-between picker-common" @click="$u.throttle(handleClick, 500)">
+			<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(){ // 根据选中的key显示
+				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({ // 把选中的key传给下个页面
+					url: 'pages/order/specification?selectedId=' + 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/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 == selectedId"></u-icon>
+					</view>
+				</view>
+				<view class="line-view"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				info: {fieldsName: 'specificationId', fieldsOptions: []},
+				selectedId: '' // 选中id
+			};
+		},
+		onLoad(e) {
+			getApp().trackPage('完工-规格选择页面')
+			if (e && e.selectedId) { // 选中id
+				this.selectedId = e.selectedId
+			}
+			var pages = getCurrentPages();
+			if (pages.length >= 2) { // 上个页面传过来的参数
+				var page = pages[pages.length - 2];
+				this.info = page.info
+			}
+		},
+		methods: {
+			handleClick(selectedId) {
+				this.selectedId = 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>