youxi-app/pages/user/components/set.uvue

<script setup lang='ts'>
import { ref } from 'vue'
import { useUi, type ClFormRule, useForm } from "@/uni_modules/cool-ui";
import { encryptPassword, user, router } from '@/.cool';
import { changeUserPwd, bindWechatOpenId } from "@/services/user";
const ui = useUi();
const formData = ref({
  oldPassword: '',
  password: ''
})
const { formRef, validate, clearValidate } = useForm();
const rules = new Map<string, ClFormRule[]>([
  [
    "oldPassword",
    [
      { required: true, message: '旧密码不能为空' },
    ]
  ],
  [
    "password",
    [
      { required: true, message: '新密码不能为空' },
    ]
  ]
])
const handleEdit = () => {
  validate((valid, errors) => {
    if (valid) {
      ui.showConfirm({
        title: "修改密码",
        message: "确定要修改密码吗？",
        async callback(action) {
          if (action === "confirm") {
            await changeUserPwd({
              oldPassword: encryptPassword(formData.value.oldPassword),
              password: encryptPassword(formData.value.password)
            })
            // 执行删除操作
          } else {
            console.log("用户取消操作");
          }
        },
      });
    } else {
      ui.showToast({
        message: "请填写完整信息",
      });
    }
  });

}
const handleLogout = () => {
  ui.showConfirm({
    title: "退出登录",
    message: "确定要退出登录吗？",
    async callback(action) {
      if (action === "confirm") {
        user.logout()
        ui.showToast({
          message: "退出登录成功",
        });
      } else {
        console.log("用户取消操作");
      }
    },
  });
}
const loading = ref(false)
const handleBind = () => {
  loading.value = true
  uni.login({
    provider: 'weixin',
    success(res) {
      bindWechatOpenId({ code: res.code }).then(res => {
        uni.showToast({
          title: '授权成功，请重新登录'
        })
        user.logout()
      })
    }
  })
}
</script>
<template>
  <view class=" w-full bg-[#fff] shadow rounded-xl mt-[20px] text-[#00A9FF] sidebar flex  items-center">
    <view class="ww">
      <cl-form ref="formRef" :showMessage="false" v-model="formData" labelPosition="left" :rules="rules">
        <cl-form-item labelPosition="left" :pt="{ className: '!mb-4' }" label="旧密码" prop="oldPassword">
          <cl-input password v-model="formData.oldPassword" placeholder="请输入旧密码"></cl-input>
        </cl-form-item>
        <cl-form-item labelPosition="left" :pt="{ className: '!mb-4' }" label="新密码" prop="password">
          <cl-input password v-model="formData.password" placeholder="请输入新密码"></cl-input>
        </cl-form-item>
      </cl-form>
    </view>
    <uni-button
      class="h-[30px] rounded-2xl px-[10px] py-[5px] flex flex-row items-center !text-[#fff] justify-center bg-[#007aff] w-[200px] text-[14px] active:bg-[#045bb9]"
      type="primary" block @tap="handleEdit">修改密码</uni-button>
    <uni-button
      class="flex flex-row w-[200px] items-center justify-center gap-2 h-[30px] bg-[#09BA07] rounded-2xl px-[10px] py-[5px] text-[14px] !text-[#fff] active:bg-[#099508] my-[10px]"
      @tap="handleBind"><cl-image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" mode="heightFix" height="20px"
        width="auto"></cl-image>
      绑定微信</uni-button>
    <uni-button
      class="h-[30px] rounded-2xl px-[10px] py-[5px] flex flex-row items-center !text-[#fff] justify-center text-[14px] bg-[#007aff] w-[200px] active:bg-[#045bb9]"
      :loading="loading" type="primary" block @tap="handleLogout">退出登录</uni-button>
  </view>
</template>
<style lang="scss" scoped>
.sidebar {
  height: calc(80vh - 90px);
  max-height: calc(620px - 90px);
  padding: 20px;
}

.ww {
  width: 70%;
}
</style>