生成二维码

最新推荐文章于 2024-08-15 18:19:19 发布

小白花花子

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量106

点赞数

文章标签：前端 html servlet

本文链接：https://blog.csdn.net/weixin_56149392/article/details/129861214

版权

<template>
<view class="page">
<view class="qrcode-box">
<view class="qrcode">
<u-qrcode ref="code" canvas-id="code" :value="text" :size="size" :options="{
foreground: {
image: {
src: '/static/logo.png',
width: 0.25,
height: 0.25,
align: ['center', 'center'],
anchor: [0, 0]
}
}
}" @click="remake" @complete="complete($event)"></u-qrcode>
</view>
<text class="msg">这是一个带logo的二维码，logo处于二维码中间</text>
<button class="save" type="primary" size="mini" @click="save('code')">保存</button>
</view>
</view>
</template>

}
}
};
</script>

.qrcode-box {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
padding: 0 30px;
}

.qrcode {
padding: 16px;
background-color: #ffffff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
border-radius: 2px;
overflow: hidden;
}

.msg {
margin-top: 15px;
font-size: 14px;
color: #9a9b9c;
}

.save {
margin-top: 10px;
}
</style>

<template>
  <view class="page">
    <view class="qrcode-box">
      <view class="qrcode">
        <u-qrcode ref="code" canvas-id="code" :value="text" :size="size" :options="{
          foreground: {
            image: {
              src: '/static/logo.png',
              width: 0.25,
              height: 0.25,
              align: ['center', 'center'],
              anchor: [0, 0]
            }
          }
        }" @click="remake" @complete="complete($event)"></u-qrcode>
      </view>
      <text class="msg">这是一个带logo的二维码，logo处于二维码中间</text>
      <button class="save" type="primary" size="mini" @click="save('code')">保存</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text: 'uQRCode',
        size: 200
      };
    },
    methods: {
      complete(e) {
        if (e.success) {
          console.log('生成成功');
        } else {
          console.log('生成失败');
        }
      },
      remake() {
        const ref = this.$refs['code'];
        ref.remake();
      },
      save() {
        uni.showLoading({
          title: '保存中',
          mask: true
        });
        const ref = this.$refs['code'];
        ref.save({
          success: res => {
            uni.hideLoading();
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            });
          },
          fail: err => {
            uni.showToast({
              icon: 'none',
              title: JSON.stringify(err)
            });
          }
        });

      }
    }
  };
</script>

<style>
  .page {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .qrcode-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 30px;
  }

  .qrcode {
    padding: 16px;
    background-color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
  }

  .msg {
    margin-top: 15px;
    font-size: 14px;
    color: #9a9b9c;
  }

  .save {
    margin-top: 10px;
  }
</style>