123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265 |
- <template>
- <view class="pages flex flex_column" :style="{paddingBottom:showCarKeyborde?'40vh':'6rem'}">
- <uniNavBar title="创建质保单-车辆信息" statusBar :shadow="false" fixed @click-left="toBack"></uniNavBar>
- <u-read-more toggle close-text="展开全部">
- <view class="uuid-list">
- <view class="flex align_center" v-for="item in uuid" :key="item.id">
- <view class="uuid-info">
- <view><text>产品名称:</text>{{item.productName}}</view>
- <view><text>产品编码:</text>{{item.productCode}}</view>
- <view class="uuid" style="margin-top: 0.2rem;"><text>唯一码:</text>{{item.traceCode}}</view>
- </view>
- <view v-if="item.productMsg" class="uuid-img" @click="viewImg(item.productMsg)">
- <image :src="item.productMsg"></image>
- </view>
- </view>
- </view>
- </u-read-more>
- <view class="forms">
- <view class="forms-tits">车辆信息</view>
- <view class="flex align_center">
- <view class="labes"><text>*</text>扫描VIN码:</view>
- <view class="inputs"><image style="width: 100%;height: 35px;background: #eaeaea;" :src="tempImg"></image></view>
- <view class="btns" @click="openCamera"><image src="../../static/tab/tab_scan_normal.png"></image></view>
- </view>
- <view class="flex align_center">
- <view class="labes"><text>*</text>识别VIN码:</view>
- <view class="inputs"><u-input :focus="focusInput" @focus="hideCarinput" @blur="getCarInfo" v-model="form.vin" maxlength="17" border clearable type="text" placeholder="请输入VIN码"></u-input></view>
- </view>
- <view class="flex align_center">
- <view class="labes" style="width: 4.5rem;"><text>*</text>里程数:</view>
- <view class="inputs"><u-input v-model="form.mileage" @focus="hideCarinput" type="number" border maxlength="99999999" clearable placeholder="请输入里程数"></u-input></view>
- <view class="btns">KM</view>
- </view>
- <view class="flex align_center">
- <view class="labes" style="width: 4.5rem;">车牌号:</view>
- <view class="inputs">
- <car-number-input ref="carInput" @numberInputResult="vehicleNumberResult" @show="showCarInput" :defaultStr="form.vehicleNumber"></car-number-input>
- </view>
- </view>
- </view>
-
- <view class="buttons flex align_center">
- <u-button type="default" @click="toBack">上一步</u-button>
- <u-button type="primary" :loading="loading" @click="saveForm">下一步</u-button>
- </view>
- </view>
- </template>
- <script>
- import { getVehicleInfoByVin } from '@/api/car'
- import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
- export default {
- components: {
- uniNavBar
- },
- data() {
- return {
- tempImg: '',
- form:{
- vin: '',
- mileage: '',
- vehicleNumber: '',
- carBrand: '',
- carModel: '',
- // icon:'',
- // year:'',
- // text:''
- },
- uuid: [],
- focusInput: false,
- loading: false,
- showCarKeyborde: false
- }
- },
-
- onUnload() {
- this.$store.state.vuex_uuidTempData.carInfo = this.form
- },
- onLoad() {
- const tempData = this.$store.state.vuex_uuidTempData
- this.uuid = tempData&&tempData.traceCodeList ? tempData.traceCodeList : []
- this.form = Object.assign(this.form,tempData&&tempData.carInfo ? tempData.carInfo : {})
- },
- onShow() {
- const ret = this.$store.state.vuex_tempData
- if(ret&&ret.retCode){
- this.tempImg = ret.filePath
- this.form.vin = ret.retCode
- if(ret.retCode){
- this.getCarInfo()
- }
- }
- this.focusInput = ret&&ret=="inputCode"
- },
- onHide() {
- this.tempImg = ''
- this.$store.state.vuex_tempData = null
- },
- methods: {
- toBack(){
- uni.redirectTo({
- url: "/pagesA/qualityPolicy/creatOrder"
- })
- },
- viewImg(img){
- uni.previewImage({
- urls: [img]
- })
- },
- hideCarinput(){
- this.$refs.carInput.showOrHidePop(-1)
- },
- showCarInput(v){
- this.showCarKeyborde = v
- },
- vehicleNumberResult(e){
- this.form.vehicleNumber = e
- },
- openCamera(){
- uni.navigateTo({
- url: "/pages/scan-frame/scan-frame?pageType=UUID"
- })
- },
- //获取车辆信息
- async getCarInfo(){
- this.loading = true
- const ret = await getVehicleInfoByVin({vin: this.form.vin})
- if(ret.data){
- this.form.carBrand = ret.data.brand_name
- this.form.carModel = ret.data.model_name
- // this.form.icon = ret.data.icon
- // this.form.year = ret.data.year
- // this.form.text = ret.data.text
- }else{
- uni.showToast({
- icon: 'none',
- title: ret.message
- })
- }
- this.loading = false
- },
- saveForm(){
- if(this.form.vin == ''){
- uni.showToast({
- icon: 'none',
- title: '请扫描或手动输入VIN码'
- })
- return
- }
- if(this.form.mileage == ''){
- uni.showToast({
- icon: 'none',
- title: '请输入里程数'
- })
- return
- }
- if(this.form.vehicleNumber.length>0 && this.form.vehicleNumber.length < 7){
- uni.showToast({
- icon: 'none',
- title: '请输入正确的车牌号码'
- })
- return
- }
-
- this.$store.state.vuex_uuidTempData.carInfo = this.form
- uni.redirectTo({
- url: "/pagesA/qualityPolicy/creatCustomInfo"
- })
- }
- }
- }
- </script>
- <style lang="less">
- .pages{
- background: #f8f8f8;
- padding-bottom: 6rem;
- overflow: auto;
- .uuid-list{
- background: #fff;
- text-indent: 0;
- line-height: normal;
- font-size: 28rpx;
- > view{
- justify-content: space-between;
- border-bottom: 1px solid #eee;
- padding: 0.6rem 1rem;
- }
- color: #666;
- .uuid-info{
- flex-grow: 1;
- line-height: 1.5rem;
- width: 50%;
- > view{
- color: #666;
- text{
- color: #000;
- width: 70px;
- float: left;
- }
- }
- }
- .uuid-img{
- width: 6rem;
- height: 6rem;
- border: 1px solid #eee;
- overflow: hidden;
- display: flex;
- align-items: center;
- margin-left: 0.5rem;
- image {
- max-width: 100%;
- max-height: 100%;
- background: #eaeaea;
- }
- }
- margin-bottom: 0.5rem;
- }
- .buttons{
- padding: 1rem 2rem 2rem;
- position: fixed;
- width: 100%;
- bottom: 0;
- left: 0;
- background: #fff;
- z-index: 90;
- border-top: 1px solid #eee;
- justify-content: space-around;
- /deep/ .u-btn{
- width: 7rem;
- }
- }
- }
- .forms{
- background: #fff;
- .forms-tits{
- font-weight: bold;
- color: #333;
- }
- > view{
- border-bottom: 1px solid #eee;
- padding: 0.6rem 1rem;
- }
- .labes{
- width: 6rem;
- text-align: right;
- padding-right: 0.6rem;
- text{
- color: red;
- margin-right: 5px;
- }
- }
- .inputs{
- flex-grow: 1;
- }
- .btns{
- width: 3rem;
- text-align: center;
- image{
- width: 1.6rem;
- height: 1.6rem;
- }
- }
- }
- </style>
|