feat: 实现微信小程序码生成功能
- 新增 pages/scan/result/ 扫码结果页,展示预约详情 - 实现微信小程序码生成(wxacode.getUnlimited) - 添加环境版本自动检测(release/trial/develop) - 优化 qrcode-modal 组件,使用 Base64 图片替代本地生成 - 统一 API 接口抽离到 api.js 和 config.js - 优化代码结构,提升可读性和维护性 主要变更: 1. utils/api.js: 新增 getWxacode() 接口,支持生成小程序码 2. components/qrcode-modal: 改用 API 生成小程序码,移除本地 QRCode 依赖 3. pages/scan/result: 新增扫码结果展示页,解析 scene 参数 4. utils/config.js: 新增 WXACODE 配置项
This commit is contained in:
@@ -1,33 +1,28 @@
|
||||
const drawQrcode = require('../../utils/weapp.qrcode.esm.js').default
|
||||
const { getWxacode } = require('../../utils/api')
|
||||
|
||||
Component({
|
||||
data: {
|
||||
visible: false,
|
||||
qrcodeId: '',
|
||||
loading: true
|
||||
loading: true,
|
||||
qrcodePath: ''
|
||||
},
|
||||
|
||||
methods: {
|
||||
show(id) {
|
||||
this.setData({ visible: true, qrcodeId: id, loading: true })
|
||||
wx.nextTick(() => {
|
||||
drawQrcode({
|
||||
width: 200,
|
||||
height: 200,
|
||||
canvasId: 'qrcodeCanvas',
|
||||
_this: this,
|
||||
text: id,
|
||||
callback: () => {
|
||||
this.setData({ loading: false })
|
||||
}
|
||||
})
|
||||
})
|
||||
async show(id) {
|
||||
this.setData({ visible: true, qrcodeId: id, loading: true, qrcodePath: '' })
|
||||
try {
|
||||
const base64Image = await getWxacode(id, 'pages/scan/result/index')
|
||||
this.setData({ qrcodePath: base64Image, loading: false })
|
||||
} catch (err) {
|
||||
console.error('获取小程序码失败', err)
|
||||
wx.showToast({ title: '二维码生成失败', icon: 'none' })
|
||||
this.setData({ loading: false })
|
||||
}
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({ visible: false, qrcodeId: '' })
|
||||
},
|
||||
|
||||
noop() {}
|
||||
this.setData({ visible: false, qrcodeId: '', qrcodePath: '' })
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<view class="qrcode-modal" wx:if="{{visible}}" bindtap="onClose" catchtouchmove="noop">
|
||||
<view class="qrcode-container" catchtap catchtouchmove="noop">
|
||||
<view class="qrcode-title">预约凭证</view>
|
||||
<view class="qrcode-canvas-wrap">
|
||||
<canvas canvas-id="qrcodeCanvas" class="qrcode-canvas"></canvas>
|
||||
<view class="qrcode-image-wrap">
|
||||
<image wx:if="{{qrcodePath && !loading}}" class="qrcode-image" src="{{qrcodePath}}" mode="aspectFit" />
|
||||
<view class="qrcode-loading" wx:if="{{loading}}">
|
||||
<view class="qrcode-spinner"></view>
|
||||
</view>
|
||||
|
||||
@@ -29,16 +29,20 @@
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.qrcode-canvas-wrap {
|
||||
.qrcode-image-wrap {
|
||||
position: relative;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border: 1rpx solid #e8eef5;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrcode-canvas {
|
||||
.qrcode-image {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user