first

pageDevice/autoPos/edit.vue

@@ -0,0 +1,187 @@
+<template>
+  <view class="page-wrapper jeepay-edit-form">
+	  
+	  <JeepayCustomNavbar :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>
+		
+		<uni-forms-item required label="选择应用" name="appId">
+		   <JeepayBizsPopupView :hasTitle="false"  bizType="mchApp" v-model:value="vdata.formData.appId" :showName="vdata.bindAppName" />
+		</uni-forms-item>
+		
+		<uni-forms-item required label="选择门店" name="storeId">
+			<JeepayBizsPopupView :hasTitle="false" bizType="store" v-model:value="vdata.formData.storeId" :showName="vdata.bindStoreName" />
+		</uni-forms-item>
+		
+	 <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 formRef = ref()
+
+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
+	}
+	
+	
+})
+
+	
+const rules = {
+	appId: {
+		rules:[ formUtil.rules.requiredSelect('应用') ],
+	},
+	storeId: {
+		rules:[ formUtil.rules.requiredSelect('门店') ],
+	},
+	deviceNo: {
+		rules:[ formUtil.rules.requiredInput('') ],
+	},
+	deviceName: {
+		rules:[ formUtil.rules.requiredInput('') ],
+	},
+}
+
+
+const vdata = reactive({
+	
+	
+	deviceId: null, // 新建 or 修改 
+	
+	isAdd: true, // 是否新增页面
+	
+	bindAppName: '',
+	bindStoreName: '',
+	
+	 // 表单数据 
+	formData: {
+		state: 1 // 默认启用
+	}
+	
+})
+
+function confirmFunc(){
+	
+	formUtil.validate(formRef.value).then(() => {
+		
+		let reqData = Object.assign({}, vdata.formData)
+		reqData.deviceType = 4 // 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_AUTOPOS_LIST) // 更新列表
+		go.back(1, emit.ENAME_REF_AUTOPOS_DETAIL) // 返回详情 && 更新详情 && search
+	})
+	
+}
+
+
+</script>
+
+<style lang="scss">
+input {
+  font-size: 32rpx;
+}
+.selected-sex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 32rpx;
+  color: #b3b3b3;
+  image {
+    flex-shrink: 0;
+    width: 120rpx;
+    height: 120rpx;
+  }
+}
+.line {
+  margin-bottom: 20rpx;
+}
+.confirm-wrapper {
+  padding: 50rpx 30rpx;
+  .confirm-button {
+    height: 110rpx;
+    color: #fff;
+    border-radius: 20rpx;
+    background: $jeepay-bg-primary;
+  }
+}
+.align-top {
+  align-items: flex-start;
+  padding: 40rpx 0;
+  height: auto;
+  min-height: auto;
+  image {
+    width: 120rpx;
+    height: 40rpx;
+    transform: rotate(90deg);
+  }
+}
+.border-tb {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+    width: 90vw;
+    height: 1rpx;
+    background-color: #ededed;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    width: 90vw;
+    height: 1rpx;
+    background-color: #ededed;
+  }
+}
+</style>