cashier_admin_app/pageDevice/speaker/edit.vue

<template>
  <view class="page-wrapper jeepay-edit-form">
    <JeepayCustomNavbar bgDefaultColor="#fff" :title="qrcInfo.deviceId ? '修改云喇叭' : '绑定云喇叭'" backCtrl="back" />
    <uni-forms ref="refForm" :rules="rules" :model="qrcInfo" :label-width="120">
      <uni-forms-item label="设备号" name="deviceNo" v-if="!qrcInfo.deviceId">
        <view class="scan-wrapper">
          <uni-easyinput :inputBorder="false" type="text" v-model="qrcInfo.deviceNo" placeholder="请输入设备号" placeholderStyle="color:#B3B3B3" />
          <image src="/pageDevice/static/devIconImg/icon-scan-code.svg" mode="scaleToFill" @tap="scanCode" />
        </view>
      </uni-forms-item>
      <uni-forms-item label="设备名称" name="deviceName">
        <uni-easyinput :inputBorder="false" type="text" v-model="qrcInfo.deviceName" placeholder="请输入设备名称" />
      </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="qrcInfo.storeId" :showName="qrcInfo.bindAppName" />
      </uni-forms-item>
      <view class="line"></view>
    </uni-forms>
    <JSwitchCard title="状态" tips="状态禁用后，设备将无法使用" borderWidth="100vw">
      <template #right>
        <JeepayStateSwitch v-model:state="qrcInfo.state" :showSwitchType="true" :confirm="false" />
      </template>
    </JSwitchCard>

    <view class="confirm-wrapper">
			<Button @tap="confirmCreate">{{ qrcInfo.deviceId ? '保存' : '确认绑定' }}</Button>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import infoBox from '@/commons/utils/infoBox.js'
import formUtil from '@/commons/utils/formUtil.js'
import emit from '@/commons/utils/emit.js'
import go from '@/commons/utils/go.js'
import { reqLoad, API_URL_SYS_DEVICE_LIST } from '@/http/apiManager.js'
import { onLoad } from '@dcloudio/uni-app'
onLoad((options) => {
	console.log(options)
  if (options.devId) return getDetails(options.devId)
  if (options.deviceNo) return (qrcInfo.deviceNo = options.deviceNo)
})
const qrcInfo = reactive({
  state: 1,
  bindType: 0,
  deviceType: 1,
	bindAppName: ''
})
const refForm = ref(null)
const rules = {
  deviceNo: {
    rules: [formUtil.rules.requiredInput('')],
  },
  deviceName: {
    rules: [formUtil.rules.requiredInput('')],
  },
  storeId: {
    rules: [formUtil.rules.requiredSelect('门店')],
  },
}
// 扫码
const scanCode = () => {
  uni.scanCode({
    success: ({ result }) => {
      console.log('result', result)
      qrcInfo.deviceNo = result
    },
    fail: (err) => {
      infoBox.showErrorToast('扫码失败')
    },
  })
}

const confirmCreate = () => {
  refForm.value.validate().then((res) => {
    reqLoad.addOrUpdate(qrcInfo.deviceId, API_URL_SYS_DEVICE_LIST, qrcInfo).then((res) => {
      emit.pageEmit(emit.ENAME_REF_TERMINAL_LIST)
      go.back(1, emit.ENAME_REF_SPEAKER_DETAIL)
    })
  })
}
const getDetails = (devId) => {
  reqLoad.getById(API_URL_SYS_DEVICE_LIST, devId).then(({ bizData }) => {
		console.log(bizData)
		qrcInfo.bindAppName = bizData.storeName
    Object.assign(qrcInfo, bizData)
  })
}
</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;
  background-color: #fff;
  .name {
    width: 392rpx;
    color: #000;
  }
  .store-id {
    color: #a1a1a1;
    font-size: 30rpx;
  }
}
.name-wrapper {
  display: flex;
  image {
    align-self: center;
    height: 80rpx;
  }
}
</style>