<template> <view style="width: 100%;"> <view class="confirm-text" v-if="vinImg"> <view>请核对VIN识别是否正确?</view> <view>如果有误,请修改</view> </view> <view class="confirm-text" v-else> <view>请正确输入17位VIN码</view> </view> <view class="vin-img" v-if="vinImg"> <u-image :src="vinImg" width="100%" height="165"></u-image> </view> <!-- <xt-verify-code v-model="verifyCode" inputType='text' size="17" @confirm="confirm"></xt-verify-code> --> <view style="padding: 30rpx 60rpx;margin-top: 20rpx;"> <u-input v-model="verifyCode" :custom-style="{fontSize:'40rpx'}" type="text" height="90" :maxlength='17' input-align="center" placeholder="请输入VIN" :border="true" /> </view> <view class="confirm-button"> <u-button @click="submitForm" :loading="loading" :custom-style="{background:'#1283d4'}" type="primary" shape="circle">确认</u-button> </view> <view class="share-list flex align_center"> <view @click="toScan"> <view><u-icon name="scan" size="60" color="##d5d5d5"></u-icon></view> <view>重新扫描</view> </view> <view v-if="verifyCode.length>=17"> <view> <button open-type="share"><u-icon name="chat" size="60" color="##d5d5d5"></u-icon></button> </view> <view>分享给好友</view> </view> <view @click="toCopy"> <view><u-icon name="file-text" size="60" color="##d5d5d5"></u-icon></view> <view>复制VIN</view> </view> </view> </view> </template> <script> import { getVehicleInfoByVin, scanVinLog } from '@/api/car.js' export default { data() { return { loading: false, verifyCode: '', vinImg: '' } }, computed: { userInfo(){ return this.$store.state.vuex_userInfo }, hasShelf(){ return this.$store.state.vuex_storeShelf } }, onLoad(opts) { this.verifyCode = opts.verifyCode || '' this.vinImg = opts.filePath || '' }, // 分享 onShareAppMessage(e){ return { title: '修配易码通车架号(VIN)分享', path: '/pages/vinInput/share?userName='+this.userInfo.userNameCN+'&vinNo='+this.verifyCode, imageUrl:'/static/share.png', type: '1', } }, methods: { // 重新扫描 toScan(){ uni.redirectTo({ url: "/pages/scan-frame/scan-frame" }) }, // 复制 toCopy(){ if(this.verifyCode.length>=17){ uni.setClipboardData({ data: this.verifyCode, }) }else{ uni.showToast({ icon: 'none', title: '请输入正确的VIN码' }) } }, // 创建扫描记录 creatRecord(data){ scanVinLog({ vinCode: this.verifyCode.toUpperCase(), brandName: data.brand_name, brandId: data.brand_id, modelName: data.model_name, modelId:data.model_id, modelInfo: data.text, seriesId:data.series_id, seriesName:data.series_name, subId:data.sub_id, subName:data.sub_name, icon: data.icon, year: data.year }).then(res => { console.log(res) uni.$emit("refashHome") }) }, // 提交并匹配车型 submitForm(){ if(!this.hasShelf){ uni.showToast({ icon:'none', title: '门店没有关联数字货架,无法使用此功能!' }) return } const _this = this const vinNo = this.verifyCode.toUpperCase() if(vinNo.length>=17){ this.loading = true getVehicleInfoByVin({ vin:vinNo }).then(res => { if (res.status == 200&&res.data) { // 生成vin记录 _this.creatRecord(res.data) // 打开选择配件页面 uni.redirectTo({ url: "/pages/digitalShelf/choosePart?vinNumber="+vinNo+"&carList="+encodeURIComponent(JSON.stringify(res.data)) }) } else { uni.showModal({ title: '匹配错误', content: '此VIN码没有匹配的车型,请检查VIN码是否正确', showCancel: false, confirmText: '知道了' }) } this.loading = false }) }else{ uni.showToast({ icon: 'none', title: '请输入正确的VIN码' }) } } } } </script> <style lang="less"> .confirm-button{ padding: 50rpx; } .confirm-text{ text-align: center; padding: 60rpx 30rpx 0; line-height: 45rpx; color: #999; } .vin-img{ padding: 30rpx 20rpx; } .share-list{ padding: 30rpx; justify-content: space-around; > view{ text-align: center; >view{ &:first-child{ margin: 10rpx auto; border:2rpx solid #aaa; border-radius: 200rpx; width: 100rpx; height: 100rpx; display: flex; align-items: center; justify-content: center; color: #aaa; button{ background: none; border: 0; color: #aaa; line-height: normal; margin: 0; padding: 0; &:after{ border: 0; } } } } } } </style>