confirmVin.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  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:'#066cff'}" 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 {
  40. mapState,
  41. mapMutations,
  42. } from 'vuex'
  43. import { getVehicleInfoByVin, scanVinLog } from '@/api/car.js'
  44. export default {
  45. data() {
  46. return {
  47. loading: false,
  48. verifyCode: '',
  49. vinImg: ''
  50. }
  51. },
  52. computed: {
  53. ...mapState(['hasLogin','vuex_vinScanNums']),
  54. userInfo(){
  55. return this.$store.state.vuex_userInfo
  56. },
  57. hasShelf(){
  58. return this.$store.state.vuex_storeShelf
  59. }
  60. },
  61. onLoad(opts) {
  62. this.verifyCode = opts.verifyCode || ''
  63. this.vinImg = opts.filePath || ''
  64. // 不是手动输入
  65. if(opts.type == 'carmen'){
  66. // 游客需要记录扫描记录
  67. if(this.userInfo.identifyType=='VISITOR' && this.verifyCode){
  68. this.creatRecord(null)
  69. }
  70. // 如果识别返回空
  71. if(!this.verifyCode){
  72. uni.showToast({
  73. icon: 'none',
  74. title: 'VIN识别失败,请重新扫描或手动输入VIN'
  75. })
  76. }
  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.identifyType=='VISITOR'){
  92. if(this.vuex_vinScanNums < 10){
  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. success(res) {
  102. if(res.confirm) {
  103. uni.redirectTo({
  104. url: '/pages/storeManage/storeAuth'
  105. })
  106. }
  107. }
  108. })
  109. }
  110. }else{
  111. uni.redirectTo({
  112. url: "/pages/scan-frame/scan-frame"
  113. })
  114. }
  115. },
  116. // 复制
  117. toCopy(){
  118. if(this.verifyCode.length>=17){
  119. uni.setClipboardData({
  120. data: this.verifyCode,
  121. })
  122. }else{
  123. uni.showToast({
  124. icon: 'none',
  125. title: '请输入正确的VIN码'
  126. })
  127. }
  128. },
  129. // 创建扫描记录
  130. creatRecord(data){
  131. scanVinLog({
  132. vinCode: this.verifyCode.toUpperCase(),
  133. brandName: data?data.brand_name:'',
  134. brandId: data?data.brand_id:'',
  135. modelName: data?data.model_name:'',
  136. modelId:data?data.model_id:'',
  137. modelInfo: data?data.text:'',
  138. seriesId:data?data.series_id:'',
  139. seriesName:data?data.series_name:'',
  140. subId:data?data.sub_id:'',
  141. subName:data?data.sub_name:'',
  142. icon: data?data.icon:'',
  143. year: data?data.year:'',
  144. identifyType: this.userInfo.identifyType
  145. }).then(res => {
  146. console.log(res)
  147. uni.$emit("refashHome")
  148. })
  149. },
  150. // 提交并匹配车型
  151. submitForm(){
  152. if(!this.hasShelf){
  153. uni.showToast({
  154. icon:'none',
  155. title: '门店没有关联数字货架,无法使用此功能!'
  156. })
  157. return
  158. }
  159. const _this = this
  160. const vinNo = this.verifyCode.toUpperCase()
  161. if(vinNo.length>=17){
  162. this.loading = true
  163. getVehicleInfoByVin({
  164. vin:vinNo
  165. }).then(res => {
  166. if (res.status == 200&&res.data) {
  167. // 非游客,生成vin记录
  168. if(_this.userInfo.identifyType=='EMPLOYEE'){
  169. _this.creatRecord(res.data)
  170. }
  171. // 打开选择配件页面
  172. uni.redirectTo({
  173. url: "/pages/digitalShelf/choosePart?vinNumber="+vinNo+"&carList="+encodeURIComponent(JSON.stringify(res.data))
  174. })
  175. } else {
  176. uni.showModal({
  177. title: '匹配错误',
  178. content: '此VIN码没有匹配的车型,请检查VIN码是否正确',
  179. showCancel: false,
  180. confirmText: '知道了'
  181. })
  182. }
  183. this.loading = false
  184. })
  185. }else{
  186. uni.showToast({
  187. icon: 'none',
  188. title: '请输入正确的VIN码'
  189. })
  190. }
  191. }
  192. }
  193. }
  194. </script>
  195. <style lang="less">
  196. .confirm-button{
  197. padding: 50rpx;
  198. }
  199. .confirm-text{
  200. text-align: center;
  201. padding: 60rpx 30rpx 0;
  202. line-height: 45rpx;
  203. color: #999;
  204. }
  205. .vin-img{
  206. padding: 30rpx 20rpx;
  207. }
  208. .share-list{
  209. padding: 30rpx;
  210. justify-content: space-around;
  211. > view{
  212. text-align: center;
  213. >view{
  214. &:first-child{
  215. margin: 10rpx auto;
  216. border:2rpx solid #aaa;
  217. border-radius: 200rpx;
  218. width: 100rpx;
  219. height: 100rpx;
  220. display: flex;
  221. align-items: center;
  222. justify-content: center;
  223. color: #aaa;
  224. button{
  225. background: none;
  226. border: 0;
  227. color: #aaa;
  228. line-height: normal;
  229. margin: 0;
  230. padding: 0;
  231. &:after{
  232. border: 0;
  233. }
  234. }
  235. }
  236. }
  237. }
  238. }
  239. </style>