mtsd/sqxp-wx/pages/supplier/settings/password.vue

<script setup>
import { onMounted, ref } from 'vue';
import { useUserStore } from '@/stores/user';
import { request, parseResponseJson } from '@/utils/request';
const userStore = useUserStore();
const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const submitting = ref(false);
const showOldPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);
import { staticAssetUrl } from '@/utils/staticAsset';
const ICON_HIDE_PASSWORD = staticAssetUrl('hide-passwd.svg');
const ICON_SHOW_PASSWORD = staticAssetUrl('show-passwd.svg');
async function handleSubmit() {
    if (!oldPassword.value.trim()) {
        uni.showToast({ title: '请输入原密码', icon: 'none' });
        return;
    }
    if (!newPassword.value.trim()) {
        uni.showToast({ title: '请输入新密码', icon: 'none' });
        return;
    }
    if (newPassword.value.length < 6) {
        uni.showToast({ title: '新密码至少6位', icon: 'none' });
        return;
    }
    if (newPassword.value !== confirmPassword.value) {
        uni.showToast({ title: '两次输入的新密码不一致', icon: 'none' });
        return;
    }
    if (submitting.value)
        return;
    submitting.value = true;
    try {
        const res = await request({
            url: '/mini/user/change-password',
            method: 'POST',
            data: {
                oldPassword: oldPassword.value,
                newPassword: newPassword.value
            }
        });
        const body = parseResponseJson(res);
        if (body.code === 200) {
            uni.showToast({ title: '密码已修改，请重新登录', icon: 'none' });
            setTimeout(() => {
                userStore.logout();
            }, 1500);
        }
        else {
            uni.showToast({ title: body.message || '修改失败', icon: 'none' });
        }
    }
    catch (e) {
        const msg = e instanceof Error ? e.message : '网络异常';
        uni.showToast({ title: msg, icon: 'none' });
    }
    finally {
        submitting.value = false;
    }
}
onMounted(() => {
    if (!userStore.isLoggedIn) {
        uni.reLaunch({ url: '/pages/login/login' });
        return;
    }
    if (!userStore.isSupplier && !userStore.isDeliverer && !userStore.isClient) {
        uni.showToast({ title: '当前账号无权限访问', icon: 'none' });
        setTimeout(() => userStore.navigateToHome(), 1500);
    }
});
</script>

<template>
  <view class="page">
    <view class="card">
      <view class="field">
        <text class="field-label">原密码</text>
        <view class="field-input-wrap">
          <input
            v-model="oldPassword"
            class="field-input"
            type="text"
            :password="!showOldPassword"
            placeholder="请输入原密码"
          />
          <view class="eye-icon" @click="showOldPassword = !showOldPassword">
            <image
              class="eye-icon-img"
              :src="showOldPassword ? ICON_HIDE_PASSWORD : ICON_SHOW_PASSWORD"
              mode="aspectFit"
            />
          </view>
        </view>
      </view>
      <view class="field">
        <text class="field-label">新密码</text>
        <view class="field-input-wrap">
          <input
            v-model="newPassword"
            class="field-input"
            type="text"
            :password="!showNewPassword"
            placeholder="至少6位"
          />
          <view class="eye-icon" @click="showNewPassword = !showNewPassword">
            <image
              class="eye-icon-img"
              :src="showNewPassword ? ICON_HIDE_PASSWORD : ICON_SHOW_PASSWORD"
              mode="aspectFit"
            />
          </view>
        </view>
      </view>
      <view class="field">
        <text class="field-label">确认新密码</text>
        <view class="field-input-wrap">
          <input
            v-model="confirmPassword"
            class="field-input"
            type="text"
            :password="!showConfirmPassword"
            placeholder="再次输入新密码"
          />
          <view class="eye-icon" @click="showConfirmPassword = !showConfirmPassword">
            <image
              class="eye-icon-img"
              :src="showConfirmPassword ? ICON_HIDE_PASSWORD : ICON_SHOW_PASSWORD"
              mode="aspectFit"
            />
          </view>
        </view>
      </view>
      <button class="btn" type="default" :disabled="submitting" @click="handleSubmit">
        确认修改
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f3f7f5;
  padding: 16rpx;
}

.card {
  background: #ffffff;
  border-radius: 18rpx;
  padding: 22rpx 16rpx 26rpx;
  border: 1rpx solid #d9e9e1;
  box-shadow: 0 4rpx 12rpx rgba(10, 159, 109, 0.06);
}

.field {
  margin-bottom: 18rpx;
}

.field-label {
  display: block;
  font-size: 22rpx;
  color: #6f7e77;
  margin-bottom: 10rpx;
}

.field-input {
  flex: 1;
  min-width: 0;
  height: 76rpx;
  padding: 0;
  box-sizing: border-box;
  font-size: 26rpx;
  background: transparent;
  border: none;
}

.field-input-wrap {
  display: flex;
  align-items: center;
  height: 76rpx;
  padding: 0 10rpx 0 18rpx;
  box-sizing: border-box;
  background: #f8fcfa;
  border: 1rpx solid #d9e9e1;
  border-radius: 14rpx;
}

.eye-icon {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eye-icon-img {
  width: 34rpx;
  height: 34rpx;
}

.btn {
  margin: 16rpx 0 0;
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 14rpx;
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
  &[disabled] {
    opacity: 0.68;
    background: #10b981;
    color: #ffffff;
  }
}
</style>