uniapp 写一个支付密码页面

好的，以下是一个简单的支付密码页面的实现：

1. 首先，在 `pages` 目录下新建一个名为 `payPassword` 的页面，可以使用 uniapp 的模板工具创建。

2. 在 `payPassword.vue` 文件中编写页面结构和样式，例如：

<template>
  <view class="pay-password">
    <!-- 支付密码标题 -->
    <view class="pay-password-title">请输入支付密码</view>
    
    <!-- 密码输入框 -->
    <view class="pay-password-input">
      <view v-for="(item, index) in password" :key="index" class="pay-password-item" :class="{ 'active': index === currentIndex }">{{ item }}</view>
    </view>
    
    <!-- 数字键盘 -->
    <view class="pay-password-keyboard">
      <view class="pay-password-row">
        <view class="pay-password-key" @click="handleInput(1)">1</view>
        <view class="pay-password-key" @click="handleInput(2)">2</view>
        <view class="pay-password-key" @click="handleInput(3)">3</view>
      </view>
      <view class="pay-password-row">
        <view class="pay-password-key" @click="handleInput(4)">4</view>
        <view class="pay-password-key" @click="handleInput(5)">5</view>
        <view class="pay-password-key" @click="handleInput(6)">6</view>
      </view>
      <view class="pay-password-row">
        <view class="pay-password-key" @click="handleInput(7)">7</view>
        <view class="pay-password-key" @click="handleInput(8)">8</view>
        <view class="pay-password-key" @click="handleInput(9)">9</view>
      </view>
      <view class="pay-password-row">
        <view class="pay-password-key"></view>
        <view class="pay-password-key" @click="handleInput(0)">0</view>
        <view class="pay-password-key pay-password-delete" @click="handleDelete()"></view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.pay-password {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #fff;
}

.pay-password-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.pay-password-input {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.pay-password-item {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  margin-right: 10px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pay-password-item.active {
  border-color: #007aff;
}

.pay-password-keyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pay-password-row {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.pay-password-key {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  margin-right: 10px;
  font-size: 16px;
}

.pay-password-delete:before {
  content: ' ';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-left: 1px solid #333;
  border-bottom: 1px solid #333;
  transform: rotate(-45deg);
}
</style>

3. 在 `payPassword.vue` 文件中定义相关数据和方法，例如：

<script>
export default {
  data() {
    return {
      password: ['', '', '', '', '', ''], // 支付密码
      currentIndex: 0 // 当前输入的位置
    }
  },
  methods: {
    // 处理数字键盘输入
    handleInput(num) {
      if (this.currentIndex >= this.password.length) return
      this.password.splice(this.currentIndex, 1, num.toString())
      this.currentIndex++
      if (this.currentIndex >= this.password.length) {
        // 输入完成
        this.$emit('pay', this.password.join(''))
      }
    },
    // 处理数字键盘删除
    handleDelete() {
      if (this.currentIndex <= 0) return
      this.currentIndex--
      this.password.splice(this.currentIndex, 1, '')
    }
  }
}
</script>

4. 在需要使用支付密码的页面中引入 `payPassword` 组件，并监听 `pay` 事件获取支付密码，例如：

<template>
  <view>
    <!-- 显示支付密码输入框 -->
    <pay-password @pay="handlePay"></pay-password>
  </view>
</template>

<script>
import PayPassword from '@/pages/payPassword.vue'

export default {
  components: {
    PayPassword
  },
  methods: {
    // 处理支付密码输入完成
    handlePay(value) {
      console.log('支付密码：', value)
      // TODO: 在这里调用支付接口进行支付
    }
  }
}
</script>

以上就是一个简单的支付密码页面的实现方法。当用户输入完成支付密码后，会触发 `pay` 事件并将支付密码传递给父组件，父组件可以在事件回调函数中进行支付操作。当然，这只是一个简单的示例，实际的支付密码页面需要考虑更多的安全性和用户体验问题。