uniapp-Clothscan/pages/workshop/list.vue

<template>
	<view>
		<view class="sticky-box">
			<uni-easyinput ref="myInput" prefixIcon="search" :focus="isFocus" v-model="searchValue"
				@blur="isFocus = false" @clear="clear" @confirm="search" placeholder="请扫描拼件单号">
			</uni-easyinput>
		</view>
		<xw-scan></xw-scan>

		<u-swipe-action>
			<u-swipe-action-item :options="options" v-for="(item, index) in indexList" v-if="item.BillNO == null"
				:index="index" :id="item.Pjdh" :key="index" @click="remove" :name="index">
				<view class="swipe-action u-border-top" :class="[index === indexList.length - 1 && 'u-border-bottom']">
					<view class="swipe-action__content" :style="item.msg ? 'background-color:red' : ''">
						<text class="swipe-action__content__text">装箱单号:{{ item.Pjdh }}</text>
						<!-- <text class="swipe-action__content__text">拼件日期:{{ item.Pjrq }}</text> -->
						<text class="swipe-action__content__text">数量:{{ item.Sl }}</text>
						<text class="swipe-action__content__text">段数:{{ item.ds
					}}</text>
						<text v-if="item.msg" class="swipe-action__content__text">错误信息:{{ item.msg }}</text>
					</view>
				</view>
			</u-swipe-action-item>
			<u-swipe-action-item :options="options2" v-for="(item, index) in indexList" v-if="item.BillNO != null"
				:index="index" :id="item.Pjdh" :key="index" @click="remove2" :name="index">
				<view class="swipe-action u-border-top" :class="[index === indexList.length - 1 && 'u-border-bottom']">
					<view class="swipe-action__content" :style="item.msg ? 'background-color:red' : ''">
						<text class="swipe-action__content__text">装箱单号:{{ item.Pjdh }}</text>
						<!-- <text class="swipe-action__content__text">拼件日期:{{ item.Pjrq }}</text> -->
						<text class="swipe-action__content__text">数量:{{ item.Sl }}</text>
						<text class="swipe-action__content__text">段数:{{ item.ds
						}}</text>
						<text v-if="item.msg" class="swipe-action__content__text">错误信息:{{ item.msg }}</text>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
		<!-- <uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction"
			@trigger="trigger"></uni-fab> -->
		<view style="height: 200px;touch-action: none;"></view>

		<!-- <uni-card class="card-bottom"> -->
		<view class="card-bottom" style="">

			<view style="display: flex;flex-direction: row;margin: 0 auto;">
				<!-- <view style="font-size: 14px;"> -->
				<view style="margin-top: 7px;font-size: 12px;">
					已扫描：{{ indexListLength }}
				</view>
				<!-- </view> -->
				<label v-show="IsAutoWarehouse && (BillNO == null || BillNO == '')"
					style="margin-top: 6px;font-size: 12px;">
					<checkbox :checked="this.formData.IsProcedures" v-model="this.formData.IsProcedures" @tap="tap1" />
					手续
				</label>
				<label v-show="IsAutoWarehouse && (BillNO == null || BillNO == '')"
					style="margin-top: 6px;margin-right: 3px;font-size: 12px;">
					<checkbox :checked="VirtualboardChecked" v-model="VirtualboardChecked" disabled="true" />虚拟板号
				</label>
				<uni-forms-item style="padding: 0;margin: 0;">
					<div class="label-picker-container">
						<label>去向：</label>
						<uni-data-picker v-model="formData.Pbqx" :localdata="PbqxRange" @change="change">
						</uni-data-picker>
					</div>
				</uni-forms-item>


			</view>
			<view>
				<uni-forms-item label="板号" v-show="!VirtualboardChecked && IsAutoWarehouse"
					style="padding: 0;margin: 0;">
					<uni-easyinput v-model="formData.BoardNO" placeholder="请输入板号" />
				</uni-forms-item>
			</view>
			<!-- 	<view>
				<uni-forms-item label="去向">
					<uni-data-picker v-model="formData.Pbqx" :localdata="PbqxRange" @change="change">
					</uni-data-picker>
				</uni-forms-item>

			</view> -->
			<!-- <view class="uni-padding-wrap uni-common-mt"> -->
			<view style="display: flex;">
				<button style="width:100%;" type="primary" @click="storage"
					v-if="BillNO == null || BillNO == ''">入库</button>
				<button style="width:100%;" type="default" @click="updatestorage" v-if="BillNO != null">修改</button>
				<button style="width:100%;" type="warn" @click="cancelstorage" v-if="BillNO != null">作废</button>
			</view>
			<!-- </view> -->



		</view>
		<!-- </uni-card> -->
	</view>
</template>


<script>
	import {
		getBomItems,
		addToStorage,
		modifyDestination,
		cancelInWarehouse
	} from '@/api/workshop.js'
	export default {
		components: {},
		data() {
			return {
				audioContext: {},
				isFocus: true,
				procedureChecked: true, //手续默认选中
				VirtualboardChecked: true, // 默认选中状态
				IsAutoWarehouse: '',
				BillNO: '',
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}, {
					text: '详情'
				}],
				options2: [{
					text: '详情'
				}],
				indexList: [],
				formData: {
					BillTypeCode: "STK_ProInWarehouse_GreyFab",
					Pbqx: "",
					BoardNO: "",
					EquipmentNO: "",
					IsProcedures: true,
					RKList: []
				},
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				PbqxRange: [{
						value: '仓库',
						text: "仓库"
					},
					{
						value: '车间',
						text: "车间"
					}
				],
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,

				// searchValue: 'B20230522002',
				// searchValue: '',
				searchValue: '',
				// searchValue: 'F20150216132',
				show: false,
				isOpened: 'none',
				swipeList: [{
						options: [{
							text: '添加',
							style: {
								backgroundColor: '#F56C6C'
							}
						}],
						id: 0,
						content: '左滑点击添加新增一条数据'
					},
					{
						id: 1,
						options: [{
								text: '置顶'
							},
							{
								text: '删除',
								style: {
									backgroundColor: 'rgb(255,58,49)'
								}
							}
						],
						content: 'item2'
					},
					{
						id: 2,
						options: [{
								text: '置顶'
							},
							{
								text: '标记为已读',
								style: {
									backgroundColor: 'rgb(254,156,1)'
								}
							},
							{
								text: '删除',
								style: {
									backgroundColor: 'rgb(255,58,49)'
								}
							}
						],
						content: 'item3'
					}
				]
			};
		},
		computed: {
			//已扫描数量
			indexListLength() {
				return this.indexList.length

			},
		},
		//监听虚拟板号是否选中
		watch: {
			VirtualboardChecked: function(newVal, oldVal) {
				if (newVal) {
					//用坯布GreyFab加时分秒生成虚拟板号
					this.formData.BoardNO = "GreyFab" + this.$moment().format('YYYYMMDDHHmmss')
					console.log(this.formData.BoardNO);
				}
			},
			//搜索框失去焦点时重新聚焦
			// searchValue: function (newVal, oldVal) {
			// 	if (newVal == '') {
			// 		this.isFocus = true
			// 	}
			// }

		},
		//获取上一页传过来的IsAutoWarehouse参数
		onLoad(option) {
			this.IsAutoWarehouse = JSON.parse(decodeURIComponent(option.IsAutoWarehouse))
			this.IsXnbh = JSON.parse(decodeURIComponent(option.IsXnbh)) //获取上一页传过来的是否虚拟板号参数
			console.log('isxnbh', this.IsXnbh)
			if (this.IsAutoWarehouse) {
				this.formData.IsProcedures = false
				// this.VirtualboardChecked = true
				// this.formData.BoardNO = "GreyFab" + this.$moment().format('YYYYMMDDHHmmss')
				if (this.IsXnbh) {
					this.VirtualboardChecked = true
					this.formData.BoardNO = "GreyFab" + this.$moment().format('YYYYMMDDHHmmss')
				}
			}
			// if (this.IsXnbh) {
			// 	this.VirtualboardChecked = true
			// 	this.formData.BoardNO = "GreyFab" + this.$moment().format('YYYYMMDDHHmmss')
			// }
			this.formData.EquipmentNO = uni.getDeviceInfo().deviceId;
			console.log(this.IsAutoWarehouse);
			console.log(this.formData.IsProcedures);
			console.log(this.VirtualboardChecked);




		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		onUnload() {
			uni.$off('xwscan');
		},
		mounted() {
			uni.$on('scrollIntoView', (target) => {
				// console.log('targe', target)
				this.$nextTick(() => {
					// 使用id属性定位
					uni.createSelectorQuery().select('#' + target).boundingClientRect().exec((rect) => {
						console.log(rect)
						uni.pageScrollTo({
							scrollTop: rect[0].top,
							duration: 100
						});
					});
				});

			})
		},


		methods: {
			scrollToItem(id) {
				console.log(id)
				// 使用id属性定位
				this.$nextTick(() => {
					uni.$emit('scrollIntoView', id);
				})
			},
			tap1() {
				this.formData.IsProcedures = !this.formData.IsProcedures
			},
			remove(index) {
				console.log(index);
				// console.log(index.index);
				if (index.index == 0) {
					this.indexList.splice(index.name, 1);
					// this.$u.toast(`删除了第${index.name}个cell`);
				} else {
					let item = this.indexList[index.name]
					uni.navigateTo({
						url: '/pages/workshop/show?Info=' + encodeURIComponent(JSON.stringify(item))
					});

				}
			},
			remove2(index) {
				console.log(index);
				// console.log(index.index);
				if (index.index == 0) {
					let item = this.indexList[index.name]
					uni.navigateTo({
						url: '/pages/workshop/show?Info=' + encodeURIComponent(JSON.stringify(item))
					});
				} else {


				}
			},
			showDetail(item) {
				console.log('showDetail', item);
				uni.navigateTo({
					url: '/pages/workshop/show?Info=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			change(e) {
				console.log(e.detail.value[0].value)
				this.formData.Pbqx = e.detail.value[0].value
			},
			storage() {
				if (this.indexList.length == 0) {
					uni.showToast({
						title: '请扫描条码',
						icon: 'none',
						duration: 3000
					})
					this.focusPoint()
					this.playvoice()
					return
				}
				if (this.IsAutoWarehouse == true && this.formData.BoardNO == '') {
					uni.showToast({
						title: '板号不能为空',
						icon: 'none',
						duration: 3000
					})
					this.playvoice()
					return
				}
				console.log(this.formData)
				// return
				//坯布去向不为空
				if (this.formData.Pbqx == null) {
					uni.showToast({
						title: '坯布去向不能为空',
						icon: 'none',
						duration: 3000
					})
					this.playvoice()
					return
				}
				let RKList = this.indexList.map(({
					Pjrq,
					Pbqx,
					Pmgg,
					Djlb,
					Wssbm,
					Xswlh,
					InWarehouseState,
					Rkdjbh,
					Dj,
					Ph,
					...rest
				}) => rest)
				console.log(RKList)
				this.formData.RKList = RKList
				console.log(this.formData)
				addToStorage(this.formData).then(res => {
					console.log(res)
					if (res.Code == "0000") {
						this.playSuccessvoice()
						console.log(res)
						uni.showToast({
							title: '入库成功',
							icon: 'none',
							duration: 3000
						})
						uni.redirectTo({
							url: `/pages/workshop/list?IsAutoWarehouse=${this.IsAutoWarehouse}&IsXnbh=${this.IsXnbh}` //这是你的当前页面地址
						});
						// uni.navigateTo({
						// 	//传IsAutoWarehouse值到下一页
						// 	url: `/pages/workshop/list?IsAutoWarehouse=${this.IsAutoWarehouse}`,
						// 	success: res => { },
						// 	fail: () => { },
						// 	complete: () => { }
						// });
						// this.$nextTick(() => {
						window.location.reload();
						// })
					} else {
						uni.showToast({
							title: res.Msg,
							icon: 'none',
							duration: 3000
						})
						this.playvoice()

					}

				})

			},
			updatestorage() {
				console.log('点击了修改')
				//坯布去向不为空
				if (this.formData.Pbqx == "") {
					uni.showToast({
						title: '坯布去向不能为空',
						icon: 'none',
						duration: 3000
					})
					this.playvoice()
					return
				}
				console.log(this.indexList)
				let ConditionList = this.indexList.map(({
					Sl,
					ProStreamNO,
					Cwh,
					Pbqx,
					MaterialGuid,
					BatchNO,
					LocationNO,
					FabricLevelGuid,
					BillNO,
					...rest
				}) => rest)
				console.log(ConditionList)
				const data = {
					"Pbqx": this.formData.Pbqx,
					"Billno": this.indexList[0].BillNO,
					"ConditionList": ConditionList
				}
				console.log(data)

				modifyDestination(data).then(res => {
					console.log(res)
					if (res.Code == "0000") {
						console.log(res)
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 3000
						})
						// uni.navigateTo({
						// 	//传IsAutoWarehouse值到下一页
						// 	url: `/pages/workshop/list?IsAutoWarehouse=${this.IsAutoWarehouse}`,
						// 	success: res => { },
						// 	fail: () => { },
						// 	complete: () => { }
						// });
						uni.redirectTo({
							url: `/pages/workshop/list?IsAutoWarehouse=${this.IsAutoWarehouse}&IsXnbh=${this.IsXnbh}` //这是你的当前页面地址
						});

					} else {
						uni.showToast({
							title: res.Msg,
							icon: 'none',
							duration: 3000
						})
						this.playvoice()

					}
				})
			},
			//作废入库单
			cancelstorage() {
				let ConditionList1 = this.indexList.map(({
					Cwh,
					Pbqx,
					BillNO,
					...rest
				}) => rest)
				let ConditionList = ConditionList1.map(item => {
					return {
						...item,
						PackNo: item.Pjdh
					}
				})
				console.log(ConditionList)
				const data = {
					"BillNo": this.indexList[0].BillNO,
					"Conditions": ConditionList
				}
				console.log(data)

				cancelInWarehouse(data).then(res => {
					console.log(res)
					if (res.Code == "0000") {
						console.log(res)
						uni.showToast({
							title: '作废成功',
							icon: 'none',
							duration: 3000
						})
						// uni.navigateTo({
						// 	//传IsAutoWarehouse值到下一页
						// 	url: `/pages/workshop/list?IsAutoWarehouse=${this.IsAutoWarehouse}`,
						// 	success: res => { },
						// 	fail: () => { },
						// 	complete: () => { }
						// });
						uni.redirectTo({
							url: `/pages/workshop/list?IsAutoWarehouse=${this.IsAutoWarehouse}&IsXnbh=${this.IsXnbh}` //这是你的当前页面地址
						});
					} else {
						uni.showToast({
							title: res.Msg,
							icon: 'none',
							duration: 3000
						})
						this.playvoice()

					}
				})
			},

			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				this.playvoice()
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			playvoice() {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '../../static/y1809.mp3';
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
			},
			playSuccessvoice() {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '../../static/success.mp3';
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
			},
			focusPoint() {
				this.isFocus = false;
				this.$nextTick(() => {
					this.isFocus = true;
				});
			},


			// blur(res) {
			// 	this.isFocus = false;
			// 	// console.log(this.isFocus);
			// 	// // this.$nextTick(() => {
			// 	// this.isFocus = true;
			// 	// // });
			// 	// this.$forceUpdate();
			// 	// // his.$set(this.isFocus,'status',"1");
			// 	// console.log('----blur:', this.isFocus)
			// },
			// input(res) {
			// 	console.log('----input:', res)
			// },
			clear() {
				this.focusPoint()
			},
			// selectInputValue() {
			// 	// 获取 uni-easyinput 组件对应的节点
			// 	this.$nextTick(() => {
			// 		uni.createSelectorQuery().select('.uni-easyinput').fields({
			// 			node: true,
			// 			size: true,
			// 		}).exec((res) => {
			// 			const inputNode = res[0].node;
			// 			console.log('inputNode', inputNode)

			// 			if (inputNode) {
			// 				// 选中输入框中的所有内容
			// 				inputNode.selectAll();


			// 			}
			// 		})
			// 	});
			// },
			//获取拼件单号信息
			search(value) {

				let res = {
					value: this.searchValue
				}
				if (res.value == "") {
					uni.showToast({
						title: '请扫描条码',
						icon: 'none',
						duration: 3000
					})
					this.focusPoint()
					this.playvoice()
					return
				}
				let data = {
					bomItemNum: res.value
				}

				//如果indexList没有数据
				if (this.indexList.length == 0) {

					getBomItems(data).then(res => {
						console.log(res)
						if (res.Code == "0000") {
							this.playSuccessvoice()
							console.log(res)
							this.indexList = res.Result.T01
							this.formData.Pbqx = res.Result.T01[0].Pbqx
							this.BillNO = res.Result.T01[0].BillNO
							console.log(this.indexList)
							// this.$refs.myInput.select();	
							// this.selectInputValue()
							this.searchValue = '';
							// this.isFocus = false;
							// this.$nextTick(() => {
							// 	this.isFocus = true;
							// });
						} else {
							uni.showToast({
								title: res.Msg,
								icon: 'none',
								duration: 3000
							})
							this.playvoice()

						}
					})

					this.focusPoint()
				} else {
					//如果indexList有数据
					//判断是否已扫描已入库单据
					let vm = this
					if (this.indexList.findIndex(item => item.Pjdh === res.value) >= 0) {
						uni.showToast({
							title: '该条码已扫描',
							icon: 'none',
							duration: 3000
						})
						this.playvoice()
						this.focusPoint()
						return
					}
					if (this.indexList[this.indexList.length - 1].BillNO !== null) {
						//提示框是否继续
						this.playvoice()
						uni.showModal({
							title: '提示',
							content: '已扫描入库单据，是否继续',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定')
									//清空indexlist数据
									vm.indexList.splice(0, vm.indexList.length)
									getBomItems(data).then(res => {
										if (res.Code == "0000") {
											//更新视图中indexlist的值
											vm.indexList = res.Result.T01
											vm.BillNO = res.Result.T01[0].BillNO
											console.log(vm.indexList)
											vm.searchValue = '';
											vm.playSuccessvoice()
										} else {
											uni.showToast({
												title: res.Msg,
												icon: 'none',
												duration: 3000
											})
											vm.playvoice()

										}
									})
									vm.focusPoint()
									//结束进程
									return

								} else if (res.cancel) {
									console.log('用户点击取消')
									vm.focusPoint()
									return
								}
							}
						})


					} else {
						let vm = this
						if (this.indexList.findIndex(item => item.Pjdh === res.value) < 0) {
							let data = {
								bomItemNum: res.value
							}
							getBomItems(data).then(res => {
								if (res.Code == "0000") {
									//如果扫描到已入库的单据
									if (res.Result.T01[0].BillNO !== null) {
										//提示框是否继续
										this.playvoice()
										uni.showModal({
											title: '提示',
											content: '拼件单号已入库，是否继续？',
											success: function(res1) {
												if (res1.confirm) {
													vm.playSuccessvoice()
													//清空indexlist数据
													vm.indexList = [];
													//将扫描到的数据数组添加到indexlist
													vm.indexList = res.Result.T01;
													vm.BillNO = res.Result.T01[0].BillNO
													console.log(vm.indexList);
													vm.focusPoint()

												} else if (res1.cancel) {
													console.log('用户点击取消')
													vm.focusPoint()
													return
												}
											}
										})
									} else {
										vm.indexList.push(res.Result.T01[0]);
										this.playSuccessvoice()
										console.log(vm.indexList);
										vm.$forceUpdate()
										vm.$nextTick(() => {
											console.log(data.bomItemNum)
											vm.scrollToItem(data.bomItemNum)
										})
									}
									this.searchValue = '';
									// this.playSuccessvoice()
								} else {
									uni.showToast({
										title: res.Msg,
										icon: 'none',
										duration: 3000
									})
									this.playvoice()

								}
							})

						} else {
							uni.showToast({
								title: '该条码已扫描',
								icon: 'none',
								duration: 3000
							})
						}
						this.focusPoint()

					}



				}
				// this.isFocus = false

				// this.$nextTick(() => {
				// 	this.isFocus = true
				// })

				// console.log('isFocus', this.isFocus)
				// setTimeout(() => {
				// this.isFocus = true
				// }, 800);
				// console.log('isFocus', this.isFocus)


			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none',
					duration: 3000
				})
			},
			contentClick() {
				console.log('点击内容');
				uni.showToast({
					title: '点击内容',
					icon: 'none',
					duration: 3000
				})
			},
			bindClick(e) {
				console.log(e);
				uni.showToast({
					title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
					icon: 'none',
					duration: 3000
				});
			},
			setOpened() {
				if (this.isOpened === 'none') {
					this.isOpened = 'left';
					return;
				}
				if (this.isOpened === 'left') {
					this.isOpened = 'right';
					return;
				}
				if (this.isOpened === 'right') {
					this.isOpened = 'none';
					return;
				}
			},
			// change(e) {
			// 	this.isOpened = e;
			// 	console.log('返回：', e);
			// },
			// swipeChange(e, index) {
			// 	console.log('返回：', e);
			// 	console.log('当前索引：', index);
			// },
			// swipeClick(e, index) {
			// 	let {
			// 		content
			// 	} = e;
			// 	if (content.text === '删除') {
			// 		this.playvoice()
			// 		uni.showModal({
			// 			title: '提示',
			// 			content: '是否删除',
			// 			success: res => {
			// 				if (res.confirm) {
			// 					this.swipeList.splice(index, 1);
			// 				} else if (res.cancel) {
			// 					console.log('用户点击取消');
			// 				}
			// 			}
			// 		});
			// 	} else if (content.text === '添加') {
			// 		// if (this.swipeList.length < 10) {
			// 		this.swipeList.push({
			// 			id: new Date().getTime(),
			// 			options: [{
			// 				text: '置顶'
			// 			},
			// 			{
			// 				text: '标记为已读',
			// 				style: {
			// 					backgroundColor: 'rgb(254,156,1)'
			// 				}
			// 			},
			// 			{
			// 				text: '删除',
			// 				style: {
			// 					backgroundColor: 'rgb(255,58,49)'
			// 				}
			// 			}
			// 			],
			// 			content: '新增' + new Date().getTime()
			// 		});
			// 		uni.showToast({
			// 			title: `添加了一条数据`,
			// 			icon: 'none',
			// 			duration: 3000
			// 		});
			// 	} else {
			// 		uni.showToast({
			// 			title: `点击了${e.content.text}按钮`,
			// 			icon: 'none',
			// 			duration: 3000
			// 		});
			// 	}
			// }
		}
	};
</script>


<style lang="scss">
	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		// display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		top: var(--window-top);
		z-index: 99;
		flex-direction: row;
		margin: 0px;
		// padding: 15px 0 15px 0;
		background-color: #F4F5F6;
		// border-bottom-style: solid;
		// border-bottom-color: #E2E2E2;
	}

	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.content-text {
		font-size: 15px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 10px 0;
		background-color: #fff;
	}

	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.button-text {
		font-size: 15px;
	}

	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #ff5a5f;
	}

	.slot-button-text {
		color: #ffffff;
		font-size: 14px;
	}

	.search-result {
		// padding-top: 10px;
		// padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.card-bottom {
		touch-action: none;

		// height: 60px;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
		background-color: white;
		border-top: 1px;
		display: flex;
		flex-direction: column;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	.warp {
		padding: 10px;
	}

	.button {
		margin-bottom: 10px;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
<style lang="scss">
	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;
			display: flex;
			flex-direction: column; //设置布局方向为竖直

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.u-swipe-action-item {
		touch-action: none;
	}

	.red {
		color: red;
	}

	.label-picker-container {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		font-size: 12px;
		/* 设置标签的字体大小 */
	}

	.label-class {
		margin-right: 10px;
		/* 设置标签与选择框之间的横向间距 */
	}
</style>