flyless/Miniprogram
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
fzw
2025-12-17 14:21:57 +08:00
commit 39a9d4b9c4
10 changed files with 461 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
pages/index/index.js Normal file
View File

@@ -0,0 +1,146 @@
// index.js
const app = getApp()
Page({
data: {
imagePath: '',
speedMode: false
},
onLoad: function() {
// 页面加载时执行
},
// 加速模式开关切换事件
toggleSpeedMode: function(e) {
this.setData({
speedMode: e.detail.value
})
},
// 扫码按钮点击事件
scanCode: function() {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePath = res.tempFilePaths[0]
this.setData({
imagePath: tempFilePath
})
// 上传图片到后台
this.uploadImage(tempFilePath)
},
fail: (err) => {
console.error('选择图片失败:', err)
wx.showToast({
title: '选择图片失败',
icon: 'none'
})
}
})
},
// 上传图片到后台
uploadImage: function(filePath) {
wx.showLoading({
title: '上传中...',
})
wx.uploadFile({
url: 'https://227649ip14.51mypc.cn/api/upload', // 替换为你的后台接口地址
filePath: filePath,
name: 'image',
formData: {
type: this.data.speedMode ? 1 : 0
},
header: {
'content-type': 'multipart/form-data'
},
success: (res) => {
wx.hideLoading()
wx.showToast({
title: '上传成功',
icon: 'success'
})
console.log('上传结果:', res)
},
fail: (err) => {
wx.hideLoading()
wx.showToast({
title: '上传失败',
icon: 'none'
})
console.error('上传失败:', err)
}
})
},
// 用户认证按钮点击事件
userAuth: function() {
wx.login({
success: (res) => {
if (res.code) {
// 使用code换取openid
this.getOpenid(res.code)
} else {
console.error('登录失败:', res.errMsg)
wx.showToast({
title: '登录失败',
icon: 'none'
})
}
},
fail: (err) => {
console.error('调用登录接口失败:', err)
wx.showToast({
title: '登录接口调用失败',
icon: 'none'
})
}
})
},
// 使用code换取openid
getOpenid: function(code) {
wx.showLoading({
title: '获取openid中...',
})
wx.request({
url: 'https://227649ip14.51mypc.cn/app/wechat-mini-app/getOpenid', // 替换为你的后台接口地址
method: 'POST',
data: {
code: code
},
success: (res) => {
wx.hideLoading()
if (res.data.openid) {
app.globalData.openid = res.data.openid
wx.showToast({
title: '认证成功',
icon: 'success'
})
console.log('获取到的openid:', res.data.openid)
} else {
wx.showToast({
title: '认证失败',
icon: 'none'
})
console.error('认证失败:', res.data)
}
},
fail: (err) => {
wx.hideLoading()
wx.showToast({
title: '网络请求失败',
icon: 'none'
})
console.error('网络请求失败:', err)
}
})
}
})

3
pages/index/index.json Normal file
View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

33
pages/index/index.wxml Normal file
View File

@@ -0,0 +1,33 @@
<!-- index.wxml -->
<view class="container">
<!-- 页面标题 -->
<view class="title">OCR识别系统</view>
<!-- 中间区域 -->
<view class="middle-section">
<!-- 中间上半部分：扫码按钮 -->
<view class="scan-button-container">
<view class="speed-mode-switch">
<text class="switch-label">加速模式</text>
<switch checked="{{speedMode}}" bindchange="toggleSpeedMode" />
</view>
<view class="scan-button" bindtap="scanCode">
<text class="scan-button-text">扫码</text>
</view>
</view>
<!-- 中间下半部分：图片预览 -->
<view class="image-preview-container">
<view class="image-preview" wx:if="{{imagePath}}">
<image src="{{imagePath}}" mode="aspectFit"></image>
</view>
</view>
</view>
<!-- 长形用户认证按钮 -->
<view class="auth-button-container">
<button class="auth-button" bindtap="userAuth">
<text class="auth-button-text">用户认证</text>
</button>
</view>
</view>

161
pages/index/index.wxss Normal file
View File

@@ -0,0 +1,161 @@
/* index.wxss */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
min-height: 90vh;
padding: 80rpx 40rpx 80rpx 40rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* 页面标题 */
.title {
font-size: 48rpx;
font-weight: 600;
color: white;
text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
/* 中间区域 */
.middle-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
flex: 0.8;
gap: 40rpx;
}
/* 扫码按钮容器 */
.scan-button-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
flex: 0.5;
gap: 30rpx;
}
/* 加速模式开关容器 */
.speed-mode-switch {
display: flex;
align-items: center;
gap: 20rpx;
padding: 20rpx;
background: rgba(255, 255, 255, 0.9);
border-radius: 50rpx;
box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.1);
}
/* 开关标签 */
.switch-label {
font-size: 28rpx;
font-weight: 500;
color: #667eea;
}
/* 开关样式 */
.speed-mode-switch switch {
transform: scale(1.2);
}
/* 图片预览容器 */
.image-preview-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex: 1.5;
}
/* 圆形扫码按钮 */
.scan-button {
width: 240rpx;
height: 240rpx;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
border: none;
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
padding: 0;
margin: 0;
box-sizing: border-box;
cursor: pointer;
user-select: none;
}
.scan-button:hover {
transform: translateY(-5rpx);
box-shadow: 0 15rpx 50rpx rgba(0, 0, 0, 0.25);
}
.scan-button:active {
transform: translateY(0) scale(0.95);
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
}
.scan-button-text {
font-size: 36rpx;
font-weight: 600;
color: #667eea;
}
/* 认证按钮容器 */
.auth-button-container {
width: 100%;
max-width: 700rpx;
}
/* 长形用户认证按钮 */
.auth-button {
width: 100%;
height: 100rpx;
border-radius: 50rpx;
background: rgba(255, 255, 255, 0.9);
border: 2rpx solid rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.auth-button:hover {
background: white;
transform: translateY(-3rpx);
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
}
.auth-button:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 3rpx 15rpx rgba(0, 0, 0, 0.15);
}
.auth-button-text {
font-size: 32rpx;
font-weight: 500;
color: #667eea;
}
/* 图片预览 */
.image-preview {
width: 100%;
max-width: 600rpx;
background: rgba(255, 255, 255, 0.95);
border-radius: 20rpx;
padding: 30rpx;
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
}
.image-preview image {
width: 100%;
height: 300rpx;
border-radius: 10rpx;
object-fit: contain;
}