Browse Source

添加二维码功能:在首页添加二维码按钮并创建二维码页面

Xfy
Default User 2 weeks ago
parent
commit
8ba239a6ef
  1. 3
      app.json
  2. 10
      pages/index/index.js
  3. 4
      pages/index/index.wxml
  4. 22
      pages/qrcode/index.js
  5. 4
      pages/qrcode/index.json
  6. 14
      pages/qrcode/index.wxml
  7. 63
      pages/qrcode/index.wxss

3
app.json

@ -21,7 +21,8 @@
"pages/goods/index",
"pages/order/index",
"pages/order/detail/index",
"pages/company/company"
"pages/company/company",
"pages/qrcode/index"
],
"subpackages": [
{

10
pages/index/index.js

@ -2590,6 +2590,16 @@ Page({
})
},
// 跳转到二维码页面
navigateToQRCode: function () {
this.setData({
sidebarBtnHidden: true
});
wx.navigateTo({
url: '/pages/qrcode/index'
})
},
// 显示添加桌面引导框
showAddToHomeModal: function () {
this.setData({

4
pages/index/index.wxml

@ -214,6 +214,10 @@
<text class="function-btn-icon">📄</text>
<text class="function-btn-text">我们</text>
</view>
<view class="function-btn" bindtap="navigateToQRCode">
<text class="function-btn-icon">📱</text>
<text class="function-btn-text">二维码</text>
</view>
</view>
<!-- 添加桌面引导框 -->

22
pages/qrcode/index.js

@ -0,0 +1,22 @@
// pages/qrcode/index.js
Page({
data: {
qrCodeUrl: '' // 二维码图片URL
},
onLoad: function (options) {
// 页面加载时的初始化逻辑
console.log('二维码页面加载');
// 这里可以添加生成或获取二维码的逻辑
},
onShow: function () {
// 页面显示时的逻辑
},
// 示例:生成二维码的函数
generateQRCode: function () {
// 这里可以添加生成二维码的逻辑
// 例如,调用API生成二维码并获取URL
}
});

4
pages/qrcode/index.json

@ -0,0 +1,4 @@
{
"navigationBarTitleText": "二维码",
"usingComponents": {}
}

14
pages/qrcode/index.wxml

@ -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>

63
pages/qrcode/index.wxss

@ -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…
Cancel
Save