carDet.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <view class="wrap">
  3. <ujp-navbar title="添加车牌">
  4. </ujp-navbar>
  5. <view class="key-input">
  6. <u-message-input :focus="true" :value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></u-message-input>
  7. </view>
  8. <ucarkeyboard ref="uKeyboard" mode="car" :showTips="true" :confirmBtn="false" :mask-close-able="false" :tooltip="false" v-model="keyShow" @change="valChange" @backspace="backspace"></ucarkeyboard>
  9. <view class="default">
  10. <u-checkbox-group>
  11. <u-checkbox class="tips" v-model="form.defaultFlag" shape="circle" @change="checkboxChange()">设为默认车辆</u-checkbox>
  12. </u-checkbox-group>
  13. </view>
  14. <u-button class="login-btn" type="success" shape="circle" @click="keepCar">保存</u-button>
  15. </view>
  16. </template>
  17. <script>
  18. import * as userApi from '@/apis/user.js'
  19. import ucarkeyboard from '@/components/Ucarkeyboard.vue'
  20. export default {
  21. components: {
  22. ucarkeyboard
  23. },
  24. data() {
  25. return {
  26. isLogin:false,
  27. maxlength:8,
  28. keyShow: true,
  29. code:"",
  30. codeId:"",
  31. form: {
  32. carNum: '鄂',
  33. defaultFlag: true,
  34. },
  35. }
  36. },
  37. onLoad(op) {
  38. if (op.jpcode) {
  39. var str1 = op.jpcode.slice(0, 19);
  40. var str2 = op.jpcode.slice(20, 21);
  41. var str3 = op.jpcode.slice(22);
  42. if (str1 == 'jp_team51_charge_id') {
  43. if (str2 == 'A') {
  44. this.code = str2;
  45. this.codeId = str3;
  46. }
  47. }
  48. }
  49. if(op.login){
  50. this.isLogin=true;
  51. }
  52. },
  53. onReady() {
  54. this.$refs.uKeyboard.changeCarInputMode();
  55. },
  56. methods: {
  57. gotoLink(){
  58. if (this.code == 'A') {
  59. uni.redirectTo({
  60. url: '/pages/searchPile/stationAndPile/chargingPileDetails?id=' + this.codeId
  61. })
  62. } else if (this.isLogin){
  63. uni.redirectTo({
  64. url: '/pages/index/index'
  65. })
  66. }else {
  67. uni.navigateBack({
  68. url: '/pages/user/car/index'
  69. })
  70. }
  71. },
  72. checkboxChange() {
  73. this.form.defaultFlag = !this.form.defaultFlag;
  74. },
  75. // 按键被点击(点击退格键不会触发此事件)
  76. valChange(val) {
  77. if(this.form.carNum.length>=this.maxlength){
  78. return
  79. }
  80. // 将每次按键的值拼接到form.carNum变量中,注意+=写法
  81. this.form.carNum += val;
  82. //(this.form.carNum);
  83. if(this.form.carNum.length == 1) {
  84. this.$refs.uKeyboard.changeCarInputMode();
  85. }
  86. },
  87. // 退格键被点击
  88. backspace() {
  89. // 删除form.carNum的最后一个字符
  90. if (this.form.carNum.length) this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);
  91. //(this.form.carNum);
  92. var aaa = this.$refs.uKeyboard.changeCarInputValue();
  93. if(this.form.carNum.length == 0 && aaa) {
  94. this.$refs.uKeyboard.changeCarInputMode();
  95. }
  96. },
  97. keepCar() {
  98. //(this.form)
  99. uni.showLoading({
  100. title: "加载中",
  101. mask: true,
  102. })
  103. userApi.addRegUserCar(this.form).then((res) => {
  104. uni.hideLoading();
  105. this.gotoLink()
  106. }).catch(error => {
  107. uni.showToast({
  108. title: error,
  109. icon: "none"
  110. })
  111. })
  112. }
  113. }
  114. }
  115. </script>
  116. <style>
  117. page {
  118. background-color: #fff;
  119. }
  120. </style>
  121. <style lang="scss" scoped>
  122. .u-char-item{
  123. width: 29px !important;
  124. }
  125. .u-drawer{
  126. z-index: -1 !important;
  127. }
  128. /deep/.u-char-item {
  129. width: 30px !important;
  130. height: 40px !important;
  131. font-size: 18px !important;
  132. }
  133. .key-input {
  134. padding-top: 24px;
  135. }
  136. .default {
  137. margin: 16px 28px;
  138. }
  139. .login-btn {
  140. margin: 28px;
  141. background-color: #00B962 !important;
  142. border-color: #00B962 !important;
  143. color: #fff !important;
  144. }
  145. </style>