zx_flk_app/pages/carFunctionSet/unbind.vue

<template>
	<view>
		<navBar name="解除绑定" bgColor="#fff"></navBar>
		<view class="zx-container unbind-page">
		  <view class="zx-wrap car-info-wrap">
		    <image :src="carInfo.model_images" class="car-img" />
		    <view class="car-name">
		      {{ carInfo.car_name }}
		    </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
		    style="margin-top: 40rpx;"
		    :class="[
		      'zx-form-btn',
		      passwd && 'is-submit'
		    ]"
		    @tap="unbindTap"
		  >
		    {{ $t('完成并解绑') }}
		  </view>
		  <Confirm
		    v-model="showConfirm"
		    :dialog-info="{
		      text: $t('是否确定解除绑定'),
		      showCancelButton: true
		    }"
		    @confirm="unbindSubmit"
		  />
		</view>
		  
	</view>
  
  </template>
  
  <script>
  const common = require('@/common/common.js');
  	import {
		msg
	} from '../../utils/util.js';
  import Confirm from '@/component/comPopup/Confirm'
  import ZxInput from '../loginRegister/components/ZxInput.vue'
  import { QINIU_URL } from '@/common/constant'
  var request = require('../../common/request');
  const http = require('@/common/http.js');
  const config = require('@/common/config.js');
  const ICONS = {
    carImg: `${QINIU_URL}Fr7v719WrP6TmCfGtvJd-nAHhiCj`
  }
  
  export default {
    components: {
      Confirm,
      ZxInput
    },
    data() {
      return {
		  carInfo:{},
        car_sn: '',
        icons: ICONS,
        showConfirm: false,
        passwd: ''
      }
    },
    onLoad() {
			this.carInfo = uni.getStorageSync('car_info')
			this.carInfo.model_images = this.carInfo.model_images.split(',')[0]
		},
    methods: {
      unbindTap() {
        if (!this.passwd) {
          return
        }
        this.showConfirm = true
      },
      async unbindSubmit() {
        console.log('解除绑定', this.passwd)
        let { data } = await request.postApi(config.API_FLK_CAR_UNBIND_CAR, {
          car_sn: this.carInfo.car_sn,
          passwd: this.passwd
        })
        if (data.code == 200) {
          //返回首页
          common.simpleToast('解绑成功！')
          setTimeout(()=> {
            uni.switchTab({
              url: `/pages/index/index`,
            });
          }, 900)
        }else{
          common.simpleToast(data.msg)
        }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import "@/libs/css/layout.scss";
  .unbind-page {
    .car-info-wrap {
        padding: 0 32rpx 40rpx;
		padding-top: 20rpx;
        .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>