confirmVin.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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. <view style="padding: 30rpx 60rpx;margin-top: 20rpx;">
  14. <u-input v-model="verifyCode" :custom-style="{fontSize:'40rpx'}" type="text" height="90" :maxlength='17' input-align="center" placeholder="请输入VIN" :border="true" />
  15. </view>
  16. <view class="confirm-button">
  17. <u-button @click="okBtns" :loading="loading" :custom-style="{background:'#066cff'}" type="primary" shape="circle">确认</u-button>
  18. </view>
  19. <view class="share-list flex align_center">
  20. <view @click="toScan">
  21. <view><u-icon name="scan" size="60" color="##d5d5d5"></u-icon></view>
  22. <view>重新扫描</view>
  23. </view>
  24. <view v-if="verifyCode.length>=17">
  25. <view>
  26. <button open-type="share"><u-icon name="chat" size="60" color="##d5d5d5"></u-icon></button>
  27. </view>
  28. <view>分享给好友</view>
  29. </view>
  30. <view @click="toCopy">
  31. <view><u-icon name="file-text" size="60" color="##d5d5d5"></u-icon></view>
  32. <view>复制VIN</view>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. import {
  39. mapState,
  40. mapMutations,
  41. } from 'vuex'
  42. import { getVehicleInfoByVin, scanVinLog } from '@/api/car.js'
  43. export default {
  44. data() {
  45. return {
  46. loading: false,
  47. verifyCode: '',
  48. vinImg: '',
  49. carInfo: null,
  50. type: ''
  51. }
  52. },
  53. computed: {
  54. ...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums']),
  55. userInfo(){
  56. return this.$store.state.vuex_userInfo
  57. },
  58. hasShelf(){
  59. return this.$store.state.vuex_storeShelf
  60. }
  61. },
  62. onLoad(opts) {
  63. this.verifyCode = opts.verifyCode || ''
  64. this.vinImg = opts.filePath || ''
  65. this.type = opts.type
  66. // 不是手动输入
  67. if(opts.type == 'carmen'){
  68. // 如果识别返回空
  69. if(!this.verifyCode){
  70. uni.showToast({
  71. icon: 'none',
  72. title: 'VIN识别失败,请重新扫描或手动输入VIN'
  73. })
  74. }
  75. // 获取车型信息
  76. this.getCarInfo()
  77. }
  78. },
  79. // 分享
  80. onShareAppMessage(e){
  81. return {
  82. title: '修配易码通车架号(VIN)分享',
  83. path: '/pages/vinInput/share?userName='+this.userInfo.userNameCN+'&vinNo='+this.verifyCode,
  84. imageUrl:'/static/share.png',
  85. type: '1',
  86. }
  87. },
  88. methods: {
  89. // 重新扫描
  90. toScan(){
  91. if(this.userInfo.sysUserFlag == '0'){
  92. if(this.vuex_vinScanNums < this.vuex_scanMaxNums){
  93. uni.redirectTo({
  94. url: "/pages/scan-frame/scan-frame"
  95. })
  96. }else{
  97. uni.showModal({
  98. title: '提示',
  99. content: '个人用户扫描VIN仅限10次,您的次数已用完!',
  100. confirmText: '好的',
  101. showCancel: false,
  102. success(res) {}
  103. })
  104. }
  105. }else{
  106. uni.redirectTo({
  107. url: "/pages/scan-frame/scan-frame"
  108. })
  109. }
  110. },
  111. // 复制
  112. toCopy(){
  113. if(this.verifyCode.length>=17){
  114. uni.setClipboardData({
  115. data: this.verifyCode,
  116. })
  117. }else{
  118. uni.showToast({
  119. icon: 'none',
  120. title: '请输入正确的VIN码'
  121. })
  122. }
  123. },
  124. // 创建扫描记录
  125. creatRecord(data){
  126. scanVinLog({
  127. vinCode: this.verifyCode.toUpperCase(),
  128. brandName: data?data.brand_name:'',
  129. brandId: data?data.brand_id:'',
  130. modelName: data?data.model_name:'',
  131. modelId:data?data.model_id:'',
  132. modelInfo: data?data.text:'',
  133. seriesId:data?data.series_id:'',
  134. seriesName:data?data.series_name:'',
  135. subId:data?data.sub_id:'',
  136. subName:data?data.sub_name:'',
  137. icon: data?data.icon:'',
  138. year: data?data.year:'',
  139. identifyType: this.userInfo.identifyType
  140. }).then(res => {
  141. uni.$emit("refashHome")
  142. })
  143. },
  144. okBtns(){
  145. if(this.type == 'input'){
  146. this.getCarInfo()
  147. }else{
  148. this.submitForm()
  149. }
  150. },
  151. // 匹配车型
  152. getCarInfo(){
  153. const _this = this
  154. const vinNo = this.verifyCode.toUpperCase()
  155. if(vinNo.length>=17){
  156. this.loading = true
  157. getVehicleInfoByVin({
  158. vin:vinNo
  159. }).then(res => {
  160. if (res.status == 200&&res.data) {
  161. _this.carInfo = res.data
  162. // 记录扫码次数
  163. _this.creatRecord(res.data)
  164. // 手动收入
  165. if(_this.type == 'input'){
  166. _this.submitForm()
  167. }
  168. }else{
  169. uni.showToast({
  170. icon: 'none',
  171. title: res.message
  172. })
  173. }
  174. setTimeout(()=>{
  175. _this.loading = false
  176. },300)
  177. })
  178. }else{
  179. uni.showToast({
  180. icon: 'none',
  181. title: '请输入正确的VIN码'
  182. })
  183. }
  184. },
  185. submitForm(){
  186. if(this.carInfo){
  187. const vinNo = this.verifyCode.toUpperCase()
  188. // 打开选择配件页面
  189. uni.redirectTo({
  190. url: "/pagesA/digitalShelf/choosePart?vinNumber="+vinNo+"&carList="+encodeURIComponent(JSON.stringify(this.carInfo))+'&type=news'
  191. })
  192. } else {
  193. uni.showModal({
  194. title: '匹配错误',
  195. content: '此VIN码没有匹配的车型,请检查VIN码是否正确',
  196. showCancel: false,
  197. confirmText: '知道了'
  198. })
  199. }
  200. }
  201. }
  202. }
  203. </script>
  204. <style lang="less">
  205. .confirm-button{
  206. padding: 50rpx;
  207. }
  208. .confirm-text{
  209. text-align: center;
  210. padding: 60rpx 30rpx 0;
  211. line-height: 45rpx;
  212. color: #999;
  213. }
  214. .vin-img{
  215. padding: 30rpx 20rpx;
  216. }
  217. .share-list{
  218. padding: 30rpx;
  219. justify-content: space-around;
  220. > view{
  221. text-align: center;
  222. >view{
  223. &:first-child{
  224. margin: 10rpx auto;
  225. border:2rpx solid #aaa;
  226. border-radius: 200rpx;
  227. width: 100rpx;
  228. height: 100rpx;
  229. display: flex;
  230. align-items: center;
  231. justify-content: center;
  232. color: #aaa;
  233. button{
  234. background: none;
  235. border: 0;
  236. color: #aaa;
  237. line-height: normal;
  238. margin: 0;
  239. padding: 0;
  240. &:after{
  241. border: 0;
  242. }
  243. }
  244. }
  245. }
  246. }
  247. }
  248. </style>