wanmeiyizhan/pages/homeFn/bindingCar/index.vue

<template>
  <div>
    <div class="black-bg">
      <navigator class="mycar-btn" url="/pages/homeFn/mycar/main" open-type="navigateBack" delta="1">
        <text>我的车辆</text>
        <van-icon name="arrow" size="16" color="#fff" />
      </navigator>
    </div>

		<div class="from-box">
			<div class="box-title">请输入您的车牌号</div>
			<div class="input-box">
				<div class="input-f" :class="{'active':i==nowIndex}"  v-for="(item,i) in normalLen" :key="i" @tap="focusInput(i)">
					<div calss="show-input" >{{saveCarText[i]}}</div>
					<!-- <input type="text" @input="changeInput" :data-index="i" :focus="nowIndex==i" maxlength="1" @focus="onfocus" :value="carText[i]" @blur="onblur"/> -->
				</div>
				<div class="input-f " :class="{'text-tip-btn':!saveCarText[8],'active':8==nowIndex}" @tap="focusInput(8)">
					<div calss="show-input" >
						<span v-if="!saveCarText[8] && 8!=nowIndex " class="text-sm">新能源</span>{{saveCarText[8]}}
					</div>
					<!-- <input type="text" maxlength="1" :value="newCar" @input="newCarText" @focus="onfocusA" @blur="onblurA" /> -->
				</div>
			</div>
			<button class="button" @tap="comfirm" ><text class="btn-text">确认绑定</text></button>
			<div class="tip-text">1.您授权的车牌信息安全将被严格保证，并限于您授权的用途。</div>
			<div class="tip-text">2.1个车牌号仅允许被1个账号绑定。</div>
		</div>
    <div>
      <keybord :isShow="isShow" @inputchange="inputChange" @delete="delValue" @ok="confirmboard"/>
    </div>
  </div>
</template>
<script>
import keybord from '@/components/keyboard.vue'
export default {
  data () {
    return {
      normalLen: 7,
      saveCarText: ['浙', 'A', '', '', '', '', '', ''],

      nowIndex: -1,
      isShow: false

    }
  },
  components: {
    keybord
  },
  methods: {
    focusInput (value) {
      this.isShow = true
      this.nowIndex = value
    },
    inputChange (value) {
      let index = this.nowIndex
      this.saveCarText[index] = value
      let next = index + 1

      if (next < 7) {
        this.nowIndex = next
      }
      this.$forceUpdate()
    },
    delValue () {
      let index = this.nowIndex
      this.saveCarText[index] = ''
      let next = index - 1

      if (next > -1) {
        this.nowIndex = next
      }
      this.$forceUpdate()
    },
    confirmboard () {
      this.isShow = false
    },

    comfirm () {
      let _this = this
      let carText = this.saveCarText.join('')

      if (carText.length < 7) {
        uni.showModal({
          title: '温馨提示',
          content: '请您完善车牌号再提交',
          cancelColor: '#000000',
          confirmText: '确定',
          confirmColor: '#3CC51F',
          success: (result) => {
            if (result.confirm) {

            }
          }

        })
        return
      } else {
        let reg = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
        const careg = reg.test(carText)
        if (!careg) {
          uni.showModal({
            title: '温馨提示',
            content: '请输入正确车牌号',
            showCancel: false
          })
          return
        }
      }

      _this.$api.getCoop({
        action_type: 'BindVehicle',
        LicensePlate: carText
      }).then(res => {
        if (res.Result_Code === 100) {
          uni.showModal({
            title: '温馨提示',
            content: res.Result_Desc,
            cancelColor: '#000000',
            showCancel: false,
            confirmText: '确定',
            confirmColor: '#3CC51F',
            success: (result) => {
              if (result.confirm) {
                uni.navigateTo({
                  url: '/pages/homeFn/mycar/main'

                })
              }
            }

          })
        } else {
          uni.showModal({
            title: '温馨提示',
            content: res.Result_Desc,
            cancelColor: '#000000',
            confirmText: '确定',
            confirmColor: '#3CC51F',
            success: (result) => {
              if (result.confirm) {

              }
            }

          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
	page
		background #fff
	.black-bg
		height 190rpx
		width 100%
		background linear-gradient(#4e4e4e,#111212)
		padding 46rpx 29rpx
		box-sizing border-box
  .mycar-btn
		color #fff
		font-size 32rpx
		margin-bottom 24rpx
		display flex
		align-items center

	.from-box
		width 694rpx
		height 514rpx
		border-radius 5rpx
		background #fff
		padding 26rpx 18rpx
		margin 0 auto
		position relative
		top -76rpx
		box-sizing border-box
		.box-title
			font-size 30rpx
			line-height 1.8
		.input-box
			display flex
			align-items center
			justify-content space-around
			margin-top 24rpx
			.input-f, input ,.show-input
				text-align center
				width 74rpx
				height 74rpx
				border-radius 5rpx
				line-height 72rpx
			.show-input
				font-size 34rpx
			input 
				position absolute
				top 0
				font-size 0
			.input-f
				position relative
				border 1rpx solid #ededed
			.text-tip-btn
				text-align center
				width 74rpx
				height 74rpx
				border 1rpx dashed #ededed
				border-radius 5rpx
				background #f8f8f8
				line-height 70rpx
			.text-sm
				font-size 20rpx
				color #B0B0B0
			.active
				border 1rpx solid #5999F2
				background-color #fff
		.button
			background #4A4948
			height 80rpx
			line-height 80rpx
			margin-top 108rpx
			margin-bottom 36rpx
		.btn-text
			background linear-gradient(#F3E6DD, #E5BA9F)
			-webkit-background-clip text
			color transparent
			-webkit-text-fill-color transparent
			text-fill-color transparent
			font-size 30rpx
		.tip-text
			font-size 22rpx
			color #9E9E9E
			line-height 2
</style>