confirmVin.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <view style="width: 100%;">
  3. <view class="confirm-text">
  4. <view>请核对VIN识别是否正确?</view>
  5. <view>如果有误,请修改</view>
  6. </view>
  7. <view class="vin-img" v-if="vinImg">
  8. <u-image :src="vinImg" width="100%" height="165"></u-image>
  9. </view>
  10. <!-- <xt-verify-code v-model="verifyCode" inputType='text' size="17" @confirm="confirm"></xt-verify-code> -->
  11. <view style="padding: 30rpx 60rpx;margin-top: 20rpx;">
  12. <u-input v-model="verifyCode" :custom-style="{fontSize:'40rpx'}" type="text" height="90" :maxlength='17' input-align="center" placeholder="请输入VIN" :border="true" />
  13. </view>
  14. <view class="confirm-button">
  15. <u-button @click="ok" :custom-style="{background:'#1283d4'}" type="primary" shape="circle">确认</u-button>
  16. </view>
  17. <view class="share-list flex align_center">
  18. <view @click="toScan">
  19. <view><u-icon name="scan" size="60" color="##d5d5d5"></u-icon></view>
  20. <view>重新扫描</view>
  21. </view>
  22. <view>
  23. <view>
  24. <button open-type="share"><u-icon name="chat" size="60" color="##d5d5d5"></u-icon></button>
  25. </view>
  26. <view>分享给好友</view>
  27. </view>
  28. <view @click="toCopy">
  29. <view><u-icon name="file-text" size="60" color="##d5d5d5"></u-icon></view>
  30. <view>复制VIN</view>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. import { getVehicleInfoByVin } from '@/api/car.js'
  37. export default {
  38. data() {
  39. return {
  40. verifyCode: '',
  41. vinImg: ''
  42. }
  43. },
  44. onLoad(opts) {
  45. this.verifyCode = opts.verifyCode
  46. this.vinImg = opts.filePath || ''
  47. },
  48. // 分享
  49. onShareAppMessage(e){
  50. console.log(e)
  51. return {
  52. title: '修配一码通车架号(VIN)分享',
  53. path: '/pages/vinIput/share?userId=123&vin='+this.verifyCode,
  54. imageUrl:'/static/share.png',
  55. type: '1',
  56. success(res){
  57. console.log(res)
  58. },
  59. fail(err){
  60. console.log(err)
  61. }
  62. }
  63. },
  64. methods: {
  65. // 重新扫描
  66. toScan(){
  67. uni.redirectTo({
  68. url: "/pages/scan-frame/scan-frame"
  69. })
  70. },
  71. // 复制
  72. toCopy(){
  73. uni.setClipboardData({
  74. data: this.verifyCode,
  75. })
  76. },
  77. confirm(code){
  78. console.log(code)
  79. this.verifyCode = code
  80. },
  81. // 提交并匹配车型
  82. submitForm(){
  83. const _this = this
  84. const vinNo = this.verifyCode.toUpperCase()
  85. console.log(vinNo, 'vinvinvinvinvin')
  86. if(vinNo.length>=17){
  87. getVehicleInfoByVin({
  88. vin:vinNo
  89. }).then(res => {
  90. console.log(res, 'vinvinvinvinvin')
  91. if (res.status == 200&&res.data) {
  92. // 打开选择配件页面
  93. uni.redirectTo({
  94. url: "/pages/digitalShelf/choosePart?vinNumber="+vinNo+"&carList="+encodeURIComponent(JSON.stringify(res.data))
  95. })
  96. } else {
  97. uni.showModal({
  98. title: '匹配错误',
  99. content: '此VIN码没有匹配的车型,请检查VIN码是否正确',
  100. showCancel: false,
  101. confirmText: '知道了'
  102. })
  103. }
  104. })
  105. }else{
  106. uni.showToast({
  107. icon: 'none',
  108. title: '请输入正确的VIN码'
  109. })
  110. }
  111. }
  112. }
  113. }
  114. </script>
  115. <style lang="less">
  116. .confirm-button{
  117. padding: 50rpx;
  118. }
  119. .confirm-text{
  120. text-align: center;
  121. padding: 60rpx 30rpx 0;
  122. line-height: 45rpx;
  123. color: #999;
  124. }
  125. .vin-img{
  126. padding: 30rpx 20rpx;
  127. }
  128. .share-list{
  129. padding: 30rpx;
  130. justify-content: space-around;
  131. > view{
  132. text-align: center;
  133. >view{
  134. &:first-child{
  135. margin: 10rpx auto;
  136. border:2rpx solid #aaa;
  137. border-radius: 200rpx;
  138. width: 100rpx;
  139. height: 100rpx;
  140. display: flex;
  141. align-items: center;
  142. justify-content: center;
  143. color: #aaa;
  144. button{
  145. background: none;
  146. border: 0;
  147. color: #aaa;
  148. line-height: normal;
  149. margin: 0;
  150. padding: 0;
  151. &:after{
  152. border: 0;
  153. }
  154. }
  155. }
  156. }
  157. }
  158. }
  159. </style>