cashier_app/pageDevice/lite/edit.vue

<template>
  <view class="page-wrapper jeepay-edit-form">

    <JeepayCustomNavbar :title="vdata.isAdd ? '绑定如意Lite' : '修改如意Lite信息'" 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">
        <view class="scan-wrapper">
          <uni-easyinput v-model="vdata.formData.deviceNo" placeholder="请输入设备号" :inputBorder="false"></uni-easyinput>
          <image src="/pageDevice/static/devIconImg/icon-scan-code.svg" mode="scaleToFill" @tap="scanCode" />
        </view>
      </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="状态禁用后, 设备将无法使用" v-if="!vdata.formData.deviceId">
        <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 scanCode = () => {
  uni.scanCode({
    success: ({ result }) => {
      vdata.formData.deviceNo = result
    },
    fail: (err) => {
      infoBox.showErrorToast('扫码失败')
    },
  })
}


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 = 7 // 1-云喇叭, 2-云打印, 3-扫码pos, 4-智能pos, 5-收银插件 7-如意lite

    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;
  }
}

.scan-wrapper {
  display: flex;
  align-items: center;

  input {
    flex: 1;
  }

  image {
    width: 120rpx;
    height: 120rpx;
  }
}
</style>