<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view>
    <headerTitle title="设置"></headerTitle>
    <view class="card-item">
      <view class="section" @click="nicknameBtn">
        <view class="section-left">更换手机号码</view>
        <view class="nickname">
          <view @click="phoneBtn" class="phone">1985258225</view>
          <view>
            <image style="width: 48rpx; height: 48rpx" src="/src/static/icon/chevron-right.svg" />
          </view>
        </view>
      </view>
      <view class="clean" @click="cleanBtn">清除本地缓存</view>
    </view>
    <view class="baby-Bottom">
      <wd-button @click="logOutBnt">退出登录</wd-button>
    </view>
    <wd-message-box />
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import headerTitle from './headerTitle.vue'
  import { useMessage } from 'wot-design-uni'
  const phoneValue = ref('')
  const message = useMessage()
  const phoneBtn = () => {
    console.log('更换手机号')
    uni.navigateTo({
      url: '/pages/myUser/component/replacePhone',
    })
  }
  const cleanBtn = () => {
    console.log('清楚缓存')
  }
  function logOutBnt() {
    message
      .confirm({
        msg: '是否退出登录？',
        cancelButtonProps: {
          customClass: 'custom-one',
        },
        confirmButtonProps: {
          customClass: 'custom-two',
        },
      })
      .then(() => {
        console.log('点击了确定按钮')
      })
      .catch(() => {
        console.log('点击了取消按钮')
      })
  }
</script>

<style lang="scss" scoped>
  .card-item {
    height: calc(100vh - 280rpx);
    background: #f2f2f2;
  }
  .section {
    padding: 32rpx;
    background: #fff;
    border-bottom: 2rpx solid #f1f5f9;
  }
  .section-left {
    display: flex;
    align-items: center;
    height: 60rpx;
  }

  .nickname {
    display: flex;
    align-items: center;
    height: 60rpx;
    font-size: 28rpx;
    .phone {
      width: 100%;
    }
  }
  .clean {
    padding: 32rpx;
    margin-top: 10px;
    background: #fff;
  }
  .baby-Bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128rpx;
    padding: 16rpx 32rpx;
  }
  ::v-deep .wd-button {
    gap: 10px;
    flex: 1 0 0;
    color: #fb4848 !important;
    background: #fff !important;
    border: 2rpx solid #fb4848;
  }
  ::v-deep .wd-message-box__actions {
    .custom-one {
      color: #000 !important;
      border: none;
    }
    .custom-two {
      color: #fb4848 !important;
      border: none;
    }
  }
</style>
