cashier_app/pageConsumables/addConsumables.vue

<template>
	<view class="topTitle">
		耗材信息
	</view>
	<view class="addConsumables">
		<view>
			<view>
				<view> 单位 </view>
				<view> <input type="text" placeholder="请输入单位" v-model="datas.form.conUnit" name="" id=""> </view>
			</view>
			<view>
				<view> 耗材名称 </view>
				<view> <input type="text" placeholder="请输入耗材名称" v-model="datas.form.conName" name="" id=""> </view>
			</view>
			<view>
				<view> 耗材价格 </view>
				<view> <input class="uni-input" placeholder="请输入耗材价格" type="digit" v-model="datas.form.price" > </view>
			</view>
			<view>
				<view> 预警值 </view>
				<view> <input type="number" placeholder="请输入预警值" v-model="datas.form.conWarning" name="" id=""> </view>
			</view>
			<view style="justify-content: space-between;">
				<view> 耗材类型 </view>
				<view style="width: 54%;" @tap="datas.showStatus = !datas.showStatus">
					{{datas.typelist[datas.nowStatusIndex]}}
				</view>
				<uni-icons type="bottom" size="16"></uni-icons>
			</view>
		</view>
	</view>
	<view :style="{height:datas.showStatus?statusHeight:0}" class="tranistion status  overflow-hide">
		<view @tap="changeNowStatusIndex(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
			v-for="(item,index) in datas.typelist" :key="index">
			<view :class="{'color-main':datas.nowStatusIndex===index}">{{item}}</view>
			<uni-icons v-if="datas.nowStatusIndex===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
		</view>
		<view :style="{height: '14px'}"></view>
	</view>
	<view class="bottombutton">
		<up-button type="primary" style="background-color:  #318AFE;color: #fff;" @tap="sumbit" :plain="true"
			text="保存"></up-button>
	</view>
	<!-- 消息提示 -->
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
	import {
		reactive,
		computed,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		tbConsTypeList,
		tbConsInfoAddlist
	} from '@/http/yskApi/requestAll.js';
	import color from '@/commons/color.js';
	import go from '@/commons/utils/go.js';
	import { getConsGrpupList,addCons } from '@/http/api/cons.js';
	
	let datas = reactive({
		form: {
			conWarning: 999
		},
		showStatus: false,
		list: [],
		typelist: [],
		nowStatusIndex: 0
	})
	// const props = defineProps({
	// 	item: {
	// 		type: String
	// 	}
	// })
	onMounted(() => {
		gettbConsTypeList()
	})
	
	/**
	 * 获取耗材类别
	 */
	let gettbConsTypeList = () => {
		datas.typelist = []
		getConsGrpupList({
			page: 0,
			size: 30,
			shopId: uni.getStorageSync("shopId"),
		}).then(res => {
			datas.list = res
			res.forEach(ele => {
				datas.typelist.push(ele.name)
			})
		})
	}
	const refs = getCurrentInstance()
	let sumbit = () => {
		let conUnitdata = datas.form.conUnit.replace(/(^\s*)|(\s*$)/g, "")
		if (!conUnitdata) {
			refs.ctx.$refs.uToastRef.show({
				type: 'default',
				message: "单位不能为空"
			})
			return
		}
		if (!datas.form.price) {
			refs.ctx.$refs.uToastRef.show({
				type: 'default',
				message: "价格不能为空"
			})
			return
		}
		console.log(datas.list, 'tiaoshi1')
		console.log(datas.list[datas.nowStatusIndex], 'tiaoshi1')
		addCons({
			...datas.form,
			shopId: uni.getStorageSync("shopId"),
			consGroupId: datas.list[datas.nowStatusIndex].id
		}).then(res => {
			// go.to('PAGES_SALES_CONSUMABLES')
			go.back()
		})
	}
	const statusHeight = computed(() => {
		return 30 * datas.typelist.length + 14 + 'px'
	})

	function changeNowStatusIndex(i) {
		datas.nowStatusIndex = i
		datas.showStatus = false
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style scoped lang="less">
	.topTitle {
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		margin: 32rpx 28rpx;
	}

	.addConsumables {
		width: 694rpx;
		height: 640rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin: 32rpx;
		padding: 1rpx 24rpx;
		box-sizing: border-box;

		>view {
			>view {
				width: 646rpx;
				height: 84rpx;
				background: #fcfcfc;
				border: 2rpx solid #F9F9F9;
				margin-top: 32rpx;
				.df;

				>view:first-child {
					width: 190rpx;
					height: 84rpx;
					line-height: 84rpx;
					// text-align: left;
					padding-left: 24rpx;
					background: #F9F9F9;
					border-radius: 8rpx 0rpx 0rpx 8rpx;
					border: 2rpx solid #F9F9F9;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}

	.bottombutton {
		margin-top: 84rpx;
		padding: 0 24rpx;

		>button {
			width: 530rpx;
			height: 80rpx;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
		}
	}

	.status {
		margin: 0 32rpx;
		position: absolute;
		// top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	.df() {
		display: flex;
		align-items: center;
	}
</style>