new-zx-front-app/sheep/components/s-pay-password/s-pay-password.vue

<template>
    <view class="paymentCodeBox" v-if="show">
      <view class="password-set-page">
        <view class="setPage">
          <view class="hint mb-30 height110 width100Percent ss-font-32 ss-color-222 ss-font-bold">
            {{ title }}
            <view class="imgClose" @click="onClose">
              <image src="@/static/icon/close.svg" style="width:50rpx;height:50rpx"></image>
            </view>
          </view>
          
          <view class="code">
            <view class="numFont">
              <view v-for="(item, index) in 6" :key="index">{{ password[index] && '●' || '' }}</view>
            </view>
          </view>
          
          <view class="keyboard">
            <button v-for="(item, index) in 9" :key="index" @click="key(index + 1)">
              <text>{{ index + 1 }}</text>
            </button>
            <button class="hide"></button>
            <button @click="key(0)">
              <text>0</text>
            </button>
            <button @click="del">
              <image src="@/static/icon/close.svg" mode="aspectFill"></image>
            </button>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import sheep from '@/sheep'
  import { hidePayPassword } from '@/sheep/hooks/useModal'
  import UserApi from '@/sheep/api/member/user';
  
  const modalStore = sheep.$store('modal')
  const password = ref('')
  
  const show = computed(() => modalStore.payPassword.show)
  const title = computed(() => modalStore.payPassword.title)
  
  // 处理密码输入完成
  async function handleComplete(inputPassword) {
    const { type, step, callback, oldPassword, newPassword } = modalStore.payPassword
    
    if (type === 'input') {
      callback?.(inputPassword)
      hidePayPassword()
    } else if (type === 'change') {
      if (step === 1) {
        modalStore.$patch((state) => {
          state.payPassword.oldPassword = inputPassword
          state.payPassword.step = 2
          state.payPassword.title = '请输入新支付密码'
        })
      } else if (step === 2) {
        modalStore.$patch((state) => {
          state.payPassword.newPassword = inputPassword
          state.payPassword.step = 3
          state.payPassword.title = '请确认新支付密码'
        })
      } else if (step === 3) {
        if (inputPassword === newPassword) {
          try {
            const { code } = await UserApi.updatePayPassword({
              payPassword: inputPassword,
              oldPayPassword: oldPassword
            })
            if (code === 0) {
              uni.showToast({
                title: '修改成功',
                icon: 'success'
              })
              callback?.({ oldPassword, newPassword: inputPassword })
            }
            hidePayPassword()
          } catch (error) {
            uni.showToast({
              title: error.message || '修改失败',
              icon: 'none'
            })
            hidePayPassword()
          }
        } else {
          uni.showToast({
            title: '两次密码不一致',
            icon: 'none'
          })
          modalStore.$patch((state) => {
            state.payPassword.step = 2
            state.payPassword.title = '请输入新支付密码'
          })
        }
      }
    } else if (type === 'set') {
      if (step === 1) {
        modalStore.$patch((state) => {
          state.payPassword.newPassword = inputPassword
          state.payPassword.step = 2
          state.payPassword.title = '请确认支付密码'
        })
      } else if (step === 2) {
        if (inputPassword === newPassword) {
          try {
            const { code } = await UserApi.updatePayPassword({
              payPassword: inputPassword
            })
            if (code === 0) {
              uni.showToast({
                title: '设置成功',
                icon: 'success'
              })
              callback?.(inputPassword)
            }
            hidePayPassword()
          } catch (error) {
            uni.showToast({
              title: error.message || '设置失败',
              icon: 'none'
            })
            hidePayPassword()
          }
        } else {
          uni.showToast({
            title: '两次密码不一致',
            icon: 'none'
          })
          modalStore.$patch((state) => {
            state.payPassword.step = 1
            state.payPassword.title = '设置支付密码'
          })
        }
      }
    }
    // 清空当前输入
    password.value = ''
  }
  
  // 输入数字
  function key(num) {
    if (password.value.length < 6) {
      password.value += num
      if (password.value.length === 6) {
        handleComplete(password.value)
      }
    }
  }
  
  // 删除数字
  function del() {
    if (password.value.length > 0) {
      password.value = password.value.substring(0, password.value.length - 1)
    }
  }
  
  // 关闭弹窗
  function onClose() {
    hidePayPassword()
    modalStore.payPassword.onCancel?.()
  }
  </script>
  
  <style lang="scss" scoped>
  .paymentCodeBox {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    
    .password-set-page {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      z-index: 999999;
      
      .setPage {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #fff;
        border-radius: 20rpx 20rpx 0 0;
        
        .hint {
          line-height: 110rpx;
          position: relative;
          text-align: center;
          border-bottom: 1rpx solid #ECECEC;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20rpx;
          .imgClose {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
      
      .code {
        margin: 30rpx 0;
        .numFont {
          display: flex;
          width: 690rpx;
          margin: 0 auto;
          
          view {
            flex: 1;
            height: 100rpx;
            border: 1rpx solid #D9D9D9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 60rpx;
            
            &:not(:last-child) {
              border-right: none;
            }
          }
        }
      }
      
      .slipBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .goto {
          align-items: center;
          
          .imgBox {
            width: 9rpx;
            height: 16rpx;
            
            .img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      
      .keyboard {
        width: 100%;
        background: #EEEEEE;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: env(safe-area-inset-bottom);
        
        button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: calc(100% / 3);
          height: 120rpx;
          background: #FFFFFF;
          border-radius: 0;
          margin: 1rpx 0 0 0;
          font-size: 50rpx;
          
          &.hide {
            background: #EEEEEE;
          }
          
          &:active:not(.hide) {
            background: #EEEEEE;
          }
          
          image {
            width: 52rpx;
            height: 38rpx;
          }
        }
      }
    }
  }
  </style>