用uniapp写一个收到按钮,单击收到后收到俩字删除,并且换成图片,不可重复点击

好的，您的第一个问题是如何用uniapp写一个收到按钮，在收到按钮被单击后，将“收到”两个字删除，并且替换为一张图片，同时不能重复点击这个按钮。我会尽力回答您的问题。

首先，您可以在您的uniapp应用中，使用uni-ui库里面的button组件来创建一个收到按钮。代码如下：

<template>
  <view>
    <button class="received-btn" @click="handleClick">{{ buttonText }}</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        buttonText: '收到',
        buttonClicked: false
      }
    },
    methods: {
      handleClick() {
        if (!this.buttonClicked) {
          this.buttonClicked = true
          this.buttonText = ''
          // 发送异步请求或者执行其他的操作
          this.$emit('received')
        }
      }
    }
  }
</script>

<style>
  .received-btn {
    width: 100px;
    height: 44px;
    background: url('image/received.png') no-repeat center center;
    background-size: 24px 24px;
    border-radius: 22px;
    font-size: 14px;
    color: #333;
  }
</style>

在上面的代码中，我们首先定义了一个buttonText变量来存储按钮上的文字，默认为“收到”。同时，我们还定义了一个buttonClicked变量来判断是否已经点击了按钮。在按钮被点击时，我们将buttonClicked变量设为true，并将buttonText变量置为空字符串。这样就实现了将“收到”两个字删除的效果。

接下来，我们在按钮的样式中，使用了一张收到的图片来替代文字。这里需要注意的是，我们要给背景图片设置一个合适的大小（上面的代码中我们设置为24x24），否则图片可能会变形或拉伸。

最后，在按钮被点击的时候，我们可以发送异步请求或执行其他操作，比如在父组件中监听received事件，进行相应的数据处理。

至于实现防止重复点击的功能，我们可以在handleClick方法中加上一个判断，只有当buttonClicked为false时才执行相应操作。这样就能避免重复点击了。

希望这个回答能对您有帮助。如果您有任何其他问题或者需要进一步的帮助，请随时向我提问。