From fe97f78b9a343ee9fa45a3531d03d73dcd1df31b Mon Sep 17 00:00:00 2001
From: qx <1084500556@qq.com>
Date: 星期三, 06 八月 2025 10:15:12 +0800
Subject: [PATCH] :测试提交“
---
pages/mine/erweima.vue | 356 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 356 insertions(+), 0 deletions(-)
diff --git a/pages/mine/erweima.vue b/pages/mine/erweima.vue
new file mode 100644
index 0000000..9f63565
--- /dev/null
+++ b/pages/mine/erweima.vue
@@ -0,0 +1,356 @@
+<template>
+ <view class="container">
+
+ <!-- 杈撳叆鍖哄煙 -->
+ <view class="input-group">
+ <text class="label">
+ <uni-icons type="compose" size="16" color="#2c3e50" />
+ 杈撳叆鏂囨湰鎴朥RL锛�
+ </text>
+ <textarea v-model="inputText" placeholder="鍦ㄦ杈撳叆鏂囨湰銆佺綉鍧�鎴栧叾浠栦俊鎭�..." />
+ </view>
+
+ <!-- 绀轰緥鎸夐挳 -->
+ <view class="examples">
+ <view v-for="(example, index) in examples" :key="index" class="example-btn" @tap="setExample(example.text)">
+ {{ example.label }}
+ </view>
+ </view>
+
+ <!-- 鐢熸垚鎸夐挳 -->
+ <button class="generate-btn" @tap="generateQRCode">
+ <uni-icons type="bolt" size="20" color="#fff" />
+ <text>{{generating ? "鐢熸垚涓�...." :"鐢熸垚浜岀淮鐮�" }}</text>
+ </button>
+
+ <!-- 浜岀淮鐮佹樉绀哄尯鍩� -->
+ <view class="qrcode-container">
+
+ <canvas v-if="qrCodeGenerated" ref="qrcodeCanvas" canvas-id="qrcodeCanvas" class="qrcode-canvas"
+ @longpress="handleLongPress" width="200" height="200" />
+ <view v-else class="placeholder">
+ <uni-icons type="qrcode" size="48" color="#95a5a6" />
+ <text>浜岀淮鐮佸皢鍦ㄦ澶勬樉绀�</text>
+ </view>
+ </view>
+ </view>
+</template>
+
+
+
+<script>
+ import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js
+ export default {
+ data() {
+ return {
+ inputText: 'https://www.example.com',
+ qrCodeGenerated: false,
+ isMiniprogram: false,
+ qrCodeDataUrl: null,
+ platformName: 'H5',
+ platformIcon: 'circle',
+ error: null,
+ generating: false,
+ saveButtonText: '淇濆瓨浜岀淮鐮�',
+ examples: [{
+ label: '绀轰緥缃戝潃',
+ text: 'https://www.example.com'
+ },
+ {
+ label: '绀轰緥鏂囨湰',
+ text: 'Hello, World!'
+ },
+ {
+ label: '鑱旂郴鏂瑰紡',
+ text: '寰俊锛歟xample_user'
+ },
+ {
+ label: 'WiFi杩炴帴',
+ text: 'WIFI:T:WPA;S:MyNetwork;P:password123;;'
+ }
+ ]
+ };
+ },
+ mounted() {
+ // this.detectPlatform();
+ },
+ methods: {
+ // detectPlatform() {
+ // // 鍒ゆ柇鏄惁鍦ㄥ皬绋嬪簭鐜涓�
+ // // #ifdef MP-WEIXIN
+ // this.isMiniprogram = true;
+ // this.platformName = '寰俊灏忕▼搴�';
+ // this.platformIcon = 'weixin';
+ // this.saveButtonText = '淇濆瓨鍒扮浉鍐�';
+ // // #endif
+
+ // // #ifdef APP-PLUS
+ // this.isMiniprogram = true;
+ // this.platformName = 'App';
+ // this.platformIcon = 'mobile';
+ // this.saveButtonText = '淇濆瓨鍒扮浉鍐�';
+ // // #endif
+ // },
+
+ setExample(text) {
+ this.inputText = text;
+ this.generateQRCode();
+ },
+
+ // 鐢熸垚浜岀淮鐮� - 浣跨敤 canvas-id 鏇夸唬 ref
+ async generateQRCode() {
+ const text = this.inputText.trim();
+
+ if (!text) {
+ this.error = '璇疯緭鍏ヨ鐢熸垚浜岀淮鐮佺殑鍐呭锛�';
+ return;
+ }
+
+ this.generating = true;
+ this.error = null;
+ this.qrCodeGenerated = true;
+ try {
+ const qr = new UQRCode();
+ qr.data = text;
+ qr.size = 200;
+ qr.make();
+ const ctx = uni.createCanvasContext('qrcodeCanvas',
+ this); // 缁勪欢鍐呰皟鐢ㄩ渶浼爐his锛寁ue3 涓� this 涓� getCurrentInstance()?.proxy
+ qr.canvasContext = ctx;
+ qr.drawCanvas();
+ this.generating = false;
+ } catch (e) {
+ console.error('浜岀淮鐮佺敓鎴愬紓甯�:', e);
+ alert('鐢熸垚浜岀淮鐮佹椂鍑洪敊锛�');
+ this.qrCodeGenerated = false;
+
+ }
+ },
+
+ // 淇濆瓨浜岀淮鐮�
+ saveQRCode() {
+ if (!this.qrCodeGenerated) {
+ alert('璇峰厛鐢熸垚浜岀淮鐮�');
+ return;
+ }
+
+ const canvas = this.$refs.qrcodeCanvas;
+ if (!canvas) return;
+
+ // 鍦ㄤ笉鍚屽钩鍙颁娇鐢ㄤ笉鍚岀殑淇濆瓨鏂瑰紡
+ if (this.isMiniprogram) {
+ // 灏忕▼搴忕幆澧冧繚瀛�
+ this.saveInMiniprogram(canvas);
+ } else {
+ // H5鐜淇濆瓨
+ this.saveInH5(canvas);
+ }
+ },
+ // 鍦℉5鐜涓繚瀛樹簩缁寸爜
+ saveInH5(canvas) {
+ const dataURL = canvas.toDataURL('image/png');
+ const link = document.createElement('a');
+ link.href = dataURL;
+ link.download = `qrcode-${new Date().getTime()}.png`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+
+ alert('浜岀淮鐮佸凡淇濆瓨');
+ },
+
+ // 鍦ㄥ皬绋嬪簭鐜涓繚瀛樹簩缁寸爜
+ saveInMiniprogram(canvas) {
+ // 妯℃嫙Uniapp淇濆瓨鍥剧墖鍒扮浉鍐�
+ if (typeof uni !== 'undefined') {
+ uni.canvasToTempFilePath({
+ canvas: canvas,
+ success: (res) => {
+ uni.saveImageToPhotosAlbum({
+ filePath: res.tempFilePath,
+ success: () => {
+ uni.showToast({
+ title: '淇濆瓨鎴愬姛',
+ icon: 'success'
+ });
+ },
+ fail: () => {
+ uni.showToast({
+ title: '淇濆瓨澶辫触',
+ icon: 'none'
+ });
+ }
+ });
+ },
+ fail: (err) => {
+ console.error('淇濆瓨澶辫触:', err);
+ uni.showToast({
+ title: '淇濆瓨澶辫触',
+ icon: 'none'
+ });
+ }
+ });
+ }
+ // 寰俊鍘熺敓灏忕▼搴忎繚瀛�
+ else if (typeof wx !== 'undefined') {
+ wx.canvasToTempFilePath({
+ canvas: canvas,
+ success: (res) => {
+ wx.saveImageToPhotosAlbum({
+ filePath: res.tempFilePath,
+ success: () => {
+ wx.showToast({
+ title: '淇濆瓨鎴愬姛',
+ icon: 'success'
+ });
+ },
+ fail: () => {
+ wx.showToast({
+ title: '淇濆瓨澶辫触',
+ icon: 'none'
+ });
+ }
+ });
+ },
+ fail: (err) => {
+ console.error('淇濆瓨澶辫触:', err);
+ wx.showToast({
+ title: '淇濆瓨澶辫触',
+ icon: 'none'
+ });
+ }
+ });
+ }
+ },
+
+
+ // 灏忕▼搴忛暱鎸変簨浠�
+ handleLongPress() {
+ if (this.isMiniprogram) {
+ this.saveQRCode();
+ }
+ }
+ }
+ };
+</script>
+
+<style lang="scss">
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+ }
+
+ textarea {
+ width: 100%;
+ height: 120px;
+ padding: 15px;
+ border: 2px solid #ddd;
+ border-radius: 12px;
+ font-size: 1rem;
+ resize: none;
+ transition: all 0.3s ease;
+ }
+
+ textarea:focus {
+ border-color: #3498db;
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+ }
+
+ .generate-btn {
+ width: 100%;
+ padding: 15px;
+ background: linear-gradient(to right, #3498db, #2c3e50);
+ color: white;
+ border: none;
+ border-radius: 12px;
+ font-size: 1.2rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ margin-bottom: 25px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .generate-btn:hover {
+ background: linear-gradient(to right, #2980b9, #1a252f);
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ }
+
+ .qrcode-container {
+ text-align: center;
+ margin-bottom: 25px;
+ padding: 20px;
+ border-radius: 15px;
+ background: #f8f9fa;
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
+ min-height: 260px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .qrcode-canvas {
+ width: 200px;
+ height: 200px;
+ margin: 0 auto;
+ padding: 10px;
+ background: white;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ }
+
+ .placeholder {
+ color: #95a5a6;
+ font-size: 1.1rem;
+ }
+ .examples {
+ display: flex;
+ gap: 15px;
+ flex-wrap: wrap;
+ margin-top: 15px;
+ justify-content: center;
+ }
+
+ .example-btn {
+ padding: 8px 15px;
+ background: #e0e7ff;
+ color: #4f46e5;
+ border-radius: 20px;
+ font-size: 0.9rem;
+ cursor: pointer;
+ transition: all 0.2s;
+ }
+
+ .example-btn:hover {
+ background: #c7d2fe;
+ }
+
+
+
+ @media (max-width: 500px) {
+ #app {
+ padding: 20px;
+ }
+
+ .header h1 {
+ font-size: 1.8rem;
+ }
+
+ .header p {
+ font-size: 1rem;
+ }
+
+ .qrcode-canvas {
+ width: 180px;
+ height: 180px;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.8.0