confirmVin.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <template>
  2. <view style="width: 100%;">
  3. <view class="confirm-text" v-if="vinImg">
  4. <view>请核对VIN识别是否正确?</view>
  5. <view>如果有误,请修改</view>
  6. </view>
  7. <view class="confirm-text" v-else>
  8. <view>请正确输入17位VIN码</view>
  9. </view>
  10. <view class="vin-img" v-if="vinImg">
  11. <u-image :src="vinImg" width="100%" height="165"></u-image>
  12. </view>
  13. <!-- <xt-verify-code v-model="verifyCode" inputType='text' size="17" @confirm="confirm"></xt-verify-code> -->
  14. <view style="padding: 30rpx 60rpx;margin-top: 20rpx;">
  15. <u-input v-model="verifyCode" :custom-style="{fontSize:'40rpx'}" type="text" height="90" :maxlength='17' input-align="center" placeholder="请输入VIN" :border="true" />
  16. </view>
  17. <view class="confirm-button">
  18. <u-button @click="submitForm" :loading="loading" :custom-style="{background:'#1283d4'}" type="primary" shape="circle">确认</u-button>
  19. </view>
  20. <view class="share-list flex align_center">
  21. <view @click="toScan">
  22. <view><u-icon name="scan" size="60" color="##d5d5d5"></u-icon></view>
  23. <view>重新扫描</view>
  24. </view>
  25. <view v-if="verifyCode.length>=17">
  26. <view>
  27. <button open-type="share"><u-icon name="chat" size="60" color="##d5d5d5"></u-icon></button>
  28. </view>
  29. <view>分享给好友</view>
  30. </view>
  31. <view @click="toCopy">
  32. <view><u-icon name="file-text" size="60" color="##d5d5d5"></u-icon></view>
  33. <view>复制VIN</view>
  34. </view>
  35. </view>
  36. </view>
  37. </template>
  38. <script>
  39. import { getVehicleInfoByVin, scanVinLog } from '@/api/car.js'
  40. export default {
  41. data() {
  42. return {
  43. loading: false,
  44. verifyCode: '',
  45. vinImg: ''
  46. }
  47. },
  48. computed: {
  49. userInfo(){
  50. return this.$store.state.vuex_userInfo
  51. },
  52. hasShelf(){
  53. return this.$store.state.vuex_storeShelf
  54. }
  55. },
  56. onLoad(opts) {
  57. this.verifyCode = opts.verifyCode || ''
  58. this.vinImg = opts.filePath || ''
  59. },
  60. // 分享
  61. onShareAppMessage(e){
  62. return {
  63. title: '修配易码通车架号(VIN)分享',
  64. path: '/pages/vinInput/share?userName='+this.userInfo.userNameCN+'&vinNo='+this.verifyCode,
  65. imageUrl:'/static/share.png',
  66. type: '1',
  67. }
  68. },
  69. methods: {
  70. // 重新扫描
  71. toScan(){
  72. uni.redirectTo({
  73. url: "/pages/scan-frame/scan-frame"
  74. })
  75. },
  76. // 复制
  77. toCopy(){
  78. if(this.verifyCode.length>=17){
  79. uni.setClipboardData({
  80. data: this.verifyCode,
  81. })
  82. }else{
  83. uni.showToast({
  84. icon: 'none',
  85. title: '请输入正确的VIN码'
  86. })
  87. }
  88. },
  89. // 创建扫描记录
  90. creatRecord(data){
  91. scanVinLog({
  92. vinCode: this.verifyCode.toUpperCase(),
  93. brandName: data.brand_name,
  94. brandId: data.brand_id,
  95. modelName: data.model_name,
  96. modelId:data.model_id,
  97. modelInfo: data.text,
  98. seriesId:data.series_id,
  99. seriesName:data.series_name,
  100. subId:data.sub_id,
  101. subName:data.sub_name,
  102. icon: data.icon,
  103. year: data.year
  104. }).then(res => {
  105. console.log(res)
  106. uni.$emit("refashHome")
  107. })
  108. },
  109. // 提交并匹配车型
  110. submitForm(){
  111. if(!this.hasShelf){
  112. uni.showToast({
  113. icon:'none',
  114. title: '门店没有关联数字货架,无法使用此功能!'
  115. })
  116. return
  117. }
  118. const _this = this
  119. const vinNo = this.verifyCode.toUpperCase()
  120. if(vinNo.length>=17){
  121. this.loading = true
  122. getVehicleInfoByVin({
  123. vin:vinNo
  124. }).then(res => {
  125. if (res.status == 200&&res.data) {
  126. // 生成vin记录
  127. _this.creatRecord(res.data)
  128. // 打开选择配件页面
  129. uni.redirectTo({
  130. url: "/pages/digitalShelf/choosePart?vinNumber="+vinNo+"&carList="+encodeURIComponent(JSON.stringify(res.data))
  131. })
  132. } else {
  133. uni.showModal({
  134. title: '匹配错误',
  135. content: '此VIN码没有匹配的车型,请检查VIN码是否正确',
  136. showCancel: false,
  137. confirmText: '知道了'
  138. })
  139. }
  140. this.loading = false
  141. })
  142. }else{
  143. uni.showToast({
  144. icon: 'none',
  145. title: '请输入正确的VIN码'
  146. })
  147. }
  148. }
  149. }
  150. }
  151. </script>
  152. <style lang="less">
  153. .confirm-button{
  154. padding: 50rpx;
  155. }
  156. .confirm-text{
  157. text-align: center;
  158. padding: 60rpx 30rpx 0;
  159. line-height: 45rpx;
  160. color: #999;
  161. }
  162. .vin-img{
  163. padding: 30rpx 20rpx;
  164. }
  165. .share-list{
  166. padding: 30rpx;
  167. justify-content: space-around;
  168. > view{
  169. text-align: center;
  170. >view{
  171. &:first-child{
  172. margin: 10rpx auto;
  173. border:2rpx solid #aaa;
  174. border-radius: 200rpx;
  175. width: 100rpx;
  176. height: 100rpx;
  177. display: flex;
  178. align-items: center;
  179. justify-content: center;
  180. color: #aaa;
  181. button{
  182. background: none;
  183. border: 0;
  184. color: #aaa;
  185. line-height: normal;
  186. margin: 0;
  187. padding: 0;
  188. &:after{
  189. border: 0;
  190. }
  191. }
  192. }
  193. }
  194. }
  195. }
  196. </style>