7 changed files with 119 additions and 1 deletions
@ -0,0 +1,22 @@ |
|||||
|
// pages/qrcode/index.js
|
||||
|
Page({ |
||||
|
data: { |
||||
|
qrCodeUrl: '' // 二维码图片URL
|
||||
|
}, |
||||
|
|
||||
|
onLoad: function (options) { |
||||
|
// 页面加载时的初始化逻辑
|
||||
|
console.log('二维码页面加载'); |
||||
|
// 这里可以添加生成或获取二维码的逻辑
|
||||
|
}, |
||||
|
|
||||
|
onShow: function () { |
||||
|
// 页面显示时的逻辑
|
||||
|
}, |
||||
|
|
||||
|
// 示例:生成二维码的函数
|
||||
|
generateQRCode: function () { |
||||
|
// 这里可以添加生成二维码的逻辑
|
||||
|
// 例如,调用API生成二维码并获取URL
|
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "二维码", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
<view class="container"> |
||||
|
<view class="qrcode-container"> |
||||
|
<text class="qrcode-title">二维码</text> |
||||
|
<view class="qrcode-content"> |
||||
|
<!-- 这里可以添加二维码图片 --> |
||||
|
<view wx:if="{{qrCodeUrl}}" class="qrcode-image"> |
||||
|
<image src="{{qrCodeUrl}}" mode="aspectFit"></image> |
||||
|
</view> |
||||
|
<view wx:else class="qrcode-placeholder"> |
||||
|
<text class="placeholder-text">二维码将显示在这里</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,63 @@ |
|||||
|
.container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-height: 100vh; |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
|
||||
|
.qrcode-container { |
||||
|
width: 90%; |
||||
|
max-width: 400rpx; |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 16rpx; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
||||
|
padding: 40rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.qrcode-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.qrcode-content { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.qrcode-image { |
||||
|
width: 300rpx; |
||||
|
height: 300rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.qrcode-image image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.qrcode-placeholder { |
||||
|
width: 300rpx; |
||||
|
height: 300rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background-color: #f0f0f0; |
||||
|
border-radius: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.placeholder-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #999999; |
||||
|
text-align: center; |
||||
|
} |
||||
Loading…
Reference in new issue