cashier_app/pageDevice/scanPos/edit.vue

<template>
  <view class="page-wrapper jeepay-edit-form">
    <JeepayCustomNavbar bgDefaultColor="#fff" :title=" vdata.isAdd ? '绑定扫码POS' : '修改扫码POS信息'" backCtrl="back" />
    <uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="120">
      <uni-forms-item v-if="vdata.isAdd" required label="设备号" name="deviceNo">
      	<uni-easyinput v-model="vdata.formData.deviceNo" placeholder="请输入设备号" :inputBorder="false"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item required label="设备名称" name="deviceName">
      	<uni-easyinput v-model="vdata.formData.deviceName" placeholder="请输入设备名称" :inputBorder="false"></uni-easyinput>
      </uni-forms-item>
      <view class="line"></view>
			<uni-forms-item required label="选择应用" name="appId">
				<template #label>
					<view class="f-label">选择应用</view>
				</template>
			   <JeepayBizsPopupView :hasTitle="false"  bizType="mchApp" v-model:value="vdata.formData.appId" :showName="vdata.bindAppName" />
			</uni-forms-item>
			<view class="line"></view>
			<uni-forms-item required label="选择门店" name="storeId">
				<template #label>
					<view class="f-label">选择门店</view>
				</template>
				<JeepayBizsPopupView :hasTitle="false" bizType="store" v-model:value="vdata.formData.storeId" :showName="vdata.bindStoreName" />
			</uni-forms-item>
			<view class="line"></view>
			<JeepayTableListItem title="状态" subtitle="状态禁用后, 设备将无法使用">
				<template #titleRight>
					<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false'  />
				</template>
			</JeepayTableListItem>
    </uni-forms>
	
		<view class="confirm-wrapper">
		  <Button @tap="confirmFunc">{{ vdata.deviceId ? '确认修改' : '确认创建' }}</Button>
		</view>
		
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { reqLoad, API_URL_SYS_DEVICE_LIST } from '@/http/apiManager.js'
import infoBox from '@/commons/utils/infoBox.js';
import go from '@/commons/utils/go.js'
import formUtil from '@/commons/utils/formUtil.js'
import emit from '@/commons/utils/emit.js'

const rules = {
	appId: {
		rules:[ formUtil.rules.requiredSelect('应用') ],
	},
	storeId: {
		rules:[ formUtil.rules.requiredSelect('门店') ],
	},
	deviceNo: {
		rules:[ formUtil.rules.requiredInput('') ],
	},
	deviceName: {
		rules:[ formUtil.rules.requiredInput('') ],
	},
}

const formRef = ref()

const vdata = reactive({
	
	
	deviceId: null, // 新建 or 修改 
	
	isAdd: true, // 是否新增页面
	
	bindAppName: '',
	bindStoreName: '',
	
	 // 表单数据 
	formData: {
		state: 1 // 默认启用
	}
	
})

onLoad((options) => {

	// 修改页面 
	if(options.deviceId){
		vdata.isAdd = false
		vdata.deviceId = options.deviceId
		reqLoad.getById(API_URL_SYS_DEVICE_LIST, vdata.deviceId).then(({bizData}) => {
			vdata.formData = bizData
			vdata.bindAppName = bizData.appName
			vdata.bindStoreName = bizData.storeName
		})
	}
	
	// 参数赋值。 
	if(options.deviceNo){
		vdata.formData.deviceNo = options.deviceNo
	}
	
	
})

function confirmFunc(){
	
	formUtil.validate(formRef.value).then(() => {
		
		let reqData = Object.assign({}, vdata.formData)
		reqData.deviceType = 3 // 1-云喇叭, 2-云打印, 3-扫码pos, 4-智能pos, 5-收银插件
		
		return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, reqData)
	})
	.then(( {bizData} ) => {
		emit.pageEmit(emit.ENAME_REF_SCANPOS_LIST) // 更新列表
		go.back(1, emit.ENAME_REF_SCANPOS_DETAIL) // 返回详情 && 更新详情 && search
	})
	
}

// 选择门店
function showSelectStoreFunc (){
	
  jeepayStoreSelect.value.open().then((selected) => {
	  
	  // 当前选择的门店
	  vdata.selectedStoreInfo = selected || { }
	  vdata.formData.storeId = vdata.selectedStoreInfo.storeId
  })
}

// 选择应用
function showSelectMchAppFunc (){
	
  jeepayMchAppSelect.value.open().then((selected) => {
	  
	  // 当前选择的门店
	  vdata.selectedMchAppInfo = selected || { }
	  vdata.formData.appId = vdata.selectedMchAppInfo.appId
  })
}

</script>

<style lang="scss">
input {
  font-size: 32rpx;
}
.selected-sex {
  display: flex;
  justify-content: space-between;
  font-size: 32rpx;
  color: #b3b3b3;
  image {
    width: 120rpx;
    height: 40rpx;
  }
}
.confirm-wrapper {
  padding: 50rpx 30rpx;
  .confirm-button {
    height: 110rpx;
    color: #fff;
    border-radius: 20rpx;
    background: $jeepay-bg-primary;
  }
}
.pay-type {
  display: flex;
  align-items: center;
  color: #000;
  image {
    width: 108rpx;
    height: 42rpx;
  }
}
.scan-wrapper {
  display: flex;
  align-items: center;
  input {
    flex: 1;
  }
  image {
    width: 120rpx;
    height: 120rpx;
  }
}
.store-name {
  flex-direction: column;
  .name {
    width: 392rpx;
    color: #000;
  }
  .store-id {
    color: #a1a1a1;
    font-size: 30rpx;
  }
}
.name-wrapper {
  display: flex;
  image {
    align-self: center;
    height: 80rpx;
  }
}
</style>