zx_flk_app/pages/carFunctionSet/unbind.vue

<template>
    <view class="zx-container unbind-page">
      <view class="zx-wrap car-info-wrap">
        <image :src="icons.carImg" class="car-img" />
        <view class="car-name">
          {{ '智能电动摩托车智驾 M7' }}
        </view>
      </view>
      <view class="zx-wrap input-wrap">
        <view class="title">{{ $t('输入注册账号的密码即可解绑') }}</view>
        <ZxInput
          v-model="passwd"
          :placeholder="$t('请输入密码')"
          background="#F3F8FF"
          is-password
        />
      </view>
      <view class="tips-wrap">
        <view class="title">{{ $t('提示信息') }}</view>
        <view class="text">
          <text>1、</text>
          解绑后，您将失去当前设备的控制权，其他人可以连接绑定您的设备。
        </view>
        <view class="text">
          <text>2、</text>
          解绑后将立即删除家庭账号，感应解锁等数据。
        </view>
      </view>
      <view
        :class="[
          'zx-form-btn', 'fix-bottom-btn',
          passwd && 'is-submit'
        ]"
        @tap="unbindTap"
      >
        {{ $t('完成并解绑') }}
      </view>
      <Confirm
        v-model="showConfirm"
        :dialog-info="{
          text: $t('是否确定解除绑定'),
          showCancelButton: true
        }"
        @confirm="unbindSubmit"
      />
    </view>
  </template>
  
  <script>
  import Confirm from '@/component/comPopup/Confirm'
  import ZxInput from '../loginRegister/components/ZxInput.vue'
  import { QINIU_URL } from '@/common/constant'
  
  const ICONS = {
    carImg: `${QINIU_URL}Fr7v719WrP6TmCfGtvJd-nAHhiCj`
  }
  
  export default {
    components: {
      Confirm,
      ZxInput
    },
    data() {
      return {
        icons: ICONS,
        showConfirm: false,
        passwd: ''
      }
    },
    methods: {
      unbindTap() {
        if (!this.passwd) {
          return
        }
        this.showConfirm = true
      },
      unbindSubmit() {
        console.log('解除绑定', this.passwd)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import "@/libs/css/layout.scss";
  .unbind-page {
    .car-info-wrap {
        .car-img {
            width: 100%;
            height: 492rpx;
        }
        .car-name {
            text-align: center;
            color: #060809;
            font-weight: bold;
            font-size: 34rpx;
        }
    }
    .input-wrap {
        margin: 20rpx 0 40rpx;
        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 36rpx;
            color: #060809;
            margin-bottom: 40rpx;
        }
    }
    .tips-wrap {
        padding: 0 32rpx;
        .title {
            font-size: 32rpx;
            color: #060809;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        .text {
            font-weight: 400;
            font-size: 24rpx;
            color: #828DA2;
            line-height: 36rpx;
            display: flex;
        }
    }
  }
  </style>