123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233 |
- <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>
- <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:'#066cff'}" 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 {
- mapState,
- mapMutations,
- } from 'vuex'
- import { getVehicleInfoByVin, scanVinLog } from '@/api/car.js'
- export default {
- data() {
- return {
- loading: false,
- verifyCode: '',
- vinImg: ''
- }
- },
- computed: {
- ...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums']),
- userInfo(){
- return this.$store.state.vuex_userInfo
- },
- hasShelf(){
- return this.$store.state.vuex_storeShelf
- }
- },
- onLoad(opts) {
- this.verifyCode = opts.verifyCode || ''
- this.vinImg = opts.filePath || ''
-
- // 不是手动输入
- if(opts.type == 'carmen'){
- // 游客需要记录扫描记录
- if(this.userInfo.sysUserFlag == '0' && this.verifyCode){
- this.creatRecord(null)
- }
- // 如果识别返回空
- if(!this.verifyCode){
- uni.showToast({
- icon: 'none',
- title: 'VIN识别失败,请重新扫描或手动输入VIN'
- })
- }
- }
- },
- // 分享
- onShareAppMessage(e){
- return {
- title: '修配易码通车架号(VIN)分享',
- path: '/pages/vinInput/share?userName='+this.userInfo.userNameCN+'&vinNo='+this.verifyCode,
- imageUrl:'/static/share.png',
- type: '1',
- }
- },
- methods: {
- // 重新扫描
- toScan(){
- if(this.userInfo.sysUserFlag == '0'){
- if(this.vuex_vinScanNums < this.vuex_scanMaxNums){
- uni.redirectTo({
- url: "/pages/scan-frame/scan-frame"
- })
- }else{
- uni.showModal({
- title: '提示',
- content: '个人用户扫描VIN仅限10次,您的次数已用完!',
- confirmText: '好的',
- showCancel: false,
- success(res) {}
- })
- }
- }else{
- 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?data.brand_name:'',
- brandId: data?data.brand_id:'',
- modelName: data?data.model_name:'',
- modelId:data?data.model_id:'',
- modelInfo: data?data.text:'',
- seriesId:data?data.series_id:'',
- seriesName:data?data.series_name:'',
- subId:data?data.sub_id:'',
- subName:data?data.sub_name:'',
- icon: data?data.icon:'',
- year: data?data.year:'',
- identifyType: this.userInfo.identifyType
- }).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) {
- _this.creatRecord(_this.userInfo.sysUserFlag == '1' ? res.data : null)
- // 打开选择配件页面
- uni.redirectTo({
- url: "/pagesA/digitalShelf/choosePart?vinNumber="+vinNo+"&carList="+encodeURIComponent(JSON.stringify(res.data))+'&type=news'
- })
- } 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>
|