new-cashier/jeepay-ui-uapp-merchant/pagePrinter/add-printer/add-printer.vue

<template>
	<view class="page-gray color-333 u-font-28">
		<view class="block">
			<picker-item title="打印机类型" v-model="brands.selIndex" rangeKey="name" :list="brands.list"></picker-item>
			<view class="u-p-b-24 u-m-b-24 border-bottom">
				<view class="title">设备尺寸</view>
				<view class="u-m-t-16">
					<radio-group class="u-flex u-flex-wrap" @change="sizeChange">
						<label class="radio u-m-r-60" v-for="(item,index) in deciveSize.list" :key="index">
							<radio :value="''+index" :checked="index === deciveSize.selIndex" class="scale7" />
							<text>{{item.label}}</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="u-p-b-14 u-m-b-24 border-bottom">
				<view class="title">名称</view>
				<view class="">
					<uni-easyinput :inputBorder="false" :padding-none="true" v-model="form.form"
						placeholder="设置打印机名称"></uni-easyinput>
				</view>
			</view>
			<view class="u-p-b-14 u-m-b-24 border-bottom">
				<view class="title">设备号</view>
				<view class="">
					<uni-easyinput :inputBorder="false" :padding-none="true" v-model="form.form"
						placeholder="输入设备号"></uni-easyinput>
				</view>
			</view>
			<picker-item title="打印份数" v-model="printerNums.selIndex" rangeKey="label"
				:list="printerNums.list"></picker-item>
			<picker-item title="出品模式" v-model="form.config.model" rangeKey="name" rangeValue="value"
				:list="models"></picker-item>
			<picker-item title="打印类型" v-model="form.subType" rangeKey="name" rangeValue="value"
				:list="subTypes"></picker-item>
			<picker-item title="尾部留空" 
			v-model="form.config.feet" rangeKey="name" rangeValue="value"
				:list="feets"></picker-item>
			
			<view class="u-p-b-24 u-flex u-row-between u-m-b-24 border-bottom">
				<view class="title">自动切刀</view>
				<view class="">
					<my-switch v-model="form.config.autoCut"></my-switch>
				</view>
			</view>
			<view class="u-p-b-24 u-flex u-row-between u-m-b-24 border-bottom">
				<view class="title">状态</view>
				<view class="">
					<my-switch v-model="form.config.autoCut"></my-switch>
				</view>
			</view>
			<view class="u-p-b-24 u-flex u-row-between u-m-b-24 border-bottom">
				<view class="title">排序</view>
				<view class="">
					<uni-number-box v-model="form.sort" ></uni-number-box>
				</view>
			</view>
			<view class="u-p-b-24 u-m-b-24 border-bottom">
				<view class="title font-bold">商品分类</view>
				<view class="u-m-t-16 u-flex u-row-between " @click="categoryShow">
					<view class="color-333" v-if="form.sort">{{form.sort}}</view>
					<view class="color-999" v-else>请选择</view>
					<uni-icons type="right" color="#999" size="16"></uni-icons>
				</view>
			</view>
		</view>

		<view style="height: 60rpx;"></view>
		<view class="">
			<view class="btn">
				<my-button shape="circle" @click="save">保存</my-button>
			</view>
		</view>
		
		
		<!-- 选择分类 -->
		<choose-category v-model="chooseCategoryShow"></choose-category>
	</view>


</template>

<script setup>
	import {
		devices,
		models,
		subTypes
	} from '@/pagePrinter/devices.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		onBeforeUnmount,
		reactive,
		computed,
		watch
	} from 'vue';
	import go from '@/commons/utils/go.js';
	import pickerItem from './components/picker-item.vue';
	import myRadioGroup from './components/my-radio-group.vue';
	import * as Api from '@/http/yskApi/devices.js'
	import chooseCategory from './components/choose-category.vue';
	
	//选择分类
	let chooseCategoryShow=ref(false)
	function categoryShow(){
		chooseCategoryShow.value=true
	}

	//品牌
	const brands = reactive({
		list: devices,
		selIndex: '',
	})

	//设备尺寸
	const deciveSize = reactive({
		list: [{
				label: '58mm',
				value: '0'
			},
			{
				label: '80mm',
				value: '1'
			},
		],
		selIndex: 1
	})

	function sizeChange(e) {
		deciveSize.selIndex = e.detail.value
	}

	//打印份数
	const printerNums = reactive({
		list: new Array(4).fill(1).map((v, index) => {
			return {
				label: index * 1 + 1 + '份',
				value: '' + index
			}
		}),
		selIndex: 0
	})
	//尾部留空
	const feets = ref([0,1,2,3,4,5,8].map(v=>{
		return v+'行'
	}))

	const form = reactive({
		id: '',
		contentType: '',
		config: {
			width: '80mm', // 设备尺寸
			printerNum: 1, //打印份数
			categoryList: '', // 商品分类
			model: 'normal', // 出品模式,
			feet: '0',
			autoCut: 0
		},
		name: '',
		subType: 'kitchen', // 打印类型
		status: 0,
		sort: ''
	})

	function save() {

	}
	watch(() => form.config.model, (newval) => {
		console.log(newval);
	})

	const option = reactive({})

	onLoad((opt) => {
		console.log(opt);
		Object.assign(option, opt)
	})
	onBeforeUnmount(() => {

	})
	onShow(() => {})
</script>

<style lang="scss" scoped>
	.page-gray {
		padding: 32rpx 28rpx;
	}

	.block {
		background-color: #fff;
		padding: 32rpx 24rpx;
		border-radius: 18rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 0 5px #eee;
	}

	.title {
		font-weight: 700;
	}

	.radio {
		display: flex;
		align-items: center;
	}
	.fixed_b{
		left: 30rpx;
		right: 30rpx;
		bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		/* #ifdef H5 */
		bottom: 30rpx;
		/* #endif */
	}
</style>