print-config.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <view class="printconfig">
  3. <view v-if="hasPrinter!='1'" class="initPrint">
  4. <view class="title" style="font-size: 20rpx;margin-bottom: 30rpx;">使用须知</view>
  5. <view class="tips" style="font-size: 16rpx;margin-bottom: 20rpx;color: chocolate;">使用前先连接wifi打印机ip地址,输入后点完成确认</view>
  6. <uni-easyinput style="margin-bottom: 20rpx;" class="input" type="text" confirmType="done" v-model="printInfo.ip" placeholder="请输入打印机ip地址" @confirm="connectPrint"></uni-easyinput>
  7. </view>
  8. <view v-else class="initPrint">
  9. <view class="title" style="font-size: 20rpx;margin-bottom: 30rpx;">已经连接打印机</view>
  10. <view style="font-size: 16rpx;margin-bottom: 10rpx;color: chocolate;">当前连接打印机IP</view>
  11. <uni-easyinput style="margin-bottom: 20rpx;" disabled v-model="printInfo.ip" placeholder="请输入打印机ip地址"></uni-easyinput>
  12. <button @click.native="resetPrint" type="primary">断开连接</button>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. name: 'printConfig'
  19. }
  20. </script>
  21. <script setup>
  22. import { onMounted, ref } from 'vue'
  23. import { setIp } from '@/static/js/api.js'
  24. const plug= uni.requireNativePlugin('Html5app-Gprinter');
  25. const hasPrinter = ref('')
  26. const printInfo = ref({
  27. ip:'',
  28. port:'9100'
  29. })
  30. onMounted(() => {
  31. hasPrinter.value = uni.getStorageSync('hasPrinter')
  32. printInfo.value.ip = uni.getStorageSync('printerIp')
  33. console.log('-----------------------------------------------printInfo.value.ip', printInfo.value.ip)
  34. })
  35. const emit = defineEmits(['emitClose'])
  36. const connectPrint = ()=>{
  37. console.log('connectPrint>>printInfo.value.ip', printInfo.value.ip)
  38. const ipReg = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/
  39. if(ipReg.test(printInfo.value.ip)){
  40. if(RegExp.$1<256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256){
  41. plug.connectIP({"ip":printInfo.value.ip,"port":printInfo.value.port},(ret)=>{
  42. console.log('connectPrint>>ret',ret)
  43. const res = JSON.parse(JSON.stringify(ret))
  44. console.log('connectPrint>>res',res.code)
  45. if(res.code==3){
  46. // initPrint.value = true
  47. uni.setStorageSync('hasPrinter', '1')
  48. uni.setStorageSync('printerIp', printInfo.value.ip)
  49. // _this.tip=JSON.stringify(ret);
  50. // console.log(_this.tip);
  51. // 关闭配置页操作
  52. // 保持ip和端口
  53. console.log('hasPrinter', uni.getStorageSync('hasPrinter'))
  54. console.log('printerIp', uni.getStorageSync('printerIp'))
  55. emit('emitClose')
  56. } else{
  57. // uni.$showMsg('打印机连接失败,请重试!', 500)
  58. console.log('plug.connectIP打印机连接失败,请重试??>>', res)
  59. }
  60. });
  61. } else{
  62. uni.$showMsg('ip地址有误,请重试!', 2000)
  63. }
  64. const param = {userId:uni.getStorageSync('userId')+'',ip:printInfo.value.ip,port:printInfo.value.port}
  65. console.log('before setIp param',param)
  66. const res2 = setIp({
  67. token: uni.getStorageSync('token'),
  68. data: JSON.stringify(param)
  69. })
  70. if (res2.code !== 200){
  71. // uni.$showMsg(res2.data.msg, 2000)
  72. console.log('conectPrinter error>>>', res2.data)
  73. }
  74. }
  75. }
  76. const resetPrint = async()=>{
  77. plug.disconnect({},ret=>{
  78. uni.$showMsg(ret.msg, 3000)
  79. hasPrinter.value = ''
  80. printInfo.value.ip = ''
  81. uni.setStorageSync('hasPrinter', '')
  82. uni.setStorageSync('printerIp', '')
  83. // console.log(_this.tip);
  84. })
  85. const param = {userId:uni.getStorageSync('userId')+'',ip:'',port:printInfo.value.port}
  86. const res2 = await setIp({
  87. token: uni.getStorageSync('token'),
  88. data: JSON.stringify(param)
  89. })
  90. console.log('setIp》》》', res2)
  91. if (res2.code !== 200){
  92. // uni.$showMsg(res2.data.msg, 2000)
  93. console.log('setIP callback', res2.data)
  94. }
  95. }
  96. </script>
  97. <style lang="scss">
  98. .printconfig{
  99. background-color: #fff;
  100. width: 500rpx;
  101. // height: 300rpx;
  102. padding: 20rpx;
  103. .initPrint{
  104. .title{
  105. font-size: 20rpx;
  106. }
  107. .tips{
  108. font-size: 16rpx;
  109. }
  110. .input{
  111. width: 300rpx;
  112. }
  113. }
  114. }
  115. </style>