删除跳转获取的信息弹出提示

App.vue

@@ -19,52 +19,52 @@
 			console.log(options)
 
 			// 2. 注意：scene 返回的是数字类型，不是字符串！原生代码中写 '1038' 会导致判断失败
-			if (options.scene === 1038 &&
+			// if (options.scene === 1038 &&
-				options.referrerInfo?.appId === 'wxef277996acc166c3') {
+			// 	options.referrerInfo?.appId === 'wxef277996acc166c3') {
 
-				// 从收银台小程序返回的逻辑
+			// 	// 从收银台小程序返回的逻辑
-				const extraData = options.referrerInfo.extraData;
+			// 	const extraData = options.referrerInfo.extraData;
-				console.log("extraData",extraData)
+			// 	console.log("extraData",extraData)
 
-				if (!extraData) {
+			// 	if (!extraData) {
-					uni.showToast({
+			// 		uni.showToast({
-						title: '当前通过物理按键返回，未接收到返参，建议自行查询交易结果',
+			// 			title: '当前通过物理按键返回，未接收到返参，建议自行查询交易结果',
-						icon: 'none',
+			// 			icon: 'none',
-						duration: 3000
+			// 			duration: 3000
-					});
+			// 		});
-				} else {
+			// 	} else {
-					if (extraData.code === 'success') {
+			// 		if (extraData.code === 'success') {
-						// 有返回成功标记后，启动轮询查询订单状态
+			// 			// 有返回成功标记后，启动轮询查询订单状态
-						// 1. 优先使用收银台回传的订单号
+			// 			// 1. 优先使用收银台回传的订单号
-						const orderNumberFromExtra =
+			// 			const orderNumberFromExtra =
-							extraData.orderNumber || extraData.reqsn || extraData.orderNo;
+			// 				extraData.orderNumber || extraData.reqsn || extraData.orderNo;
-						// 2. 如果对方没有回传，则使用我们在跳转前自己缓存到本地的订单号
+			// 			// 2. 如果对方没有回传，则使用我们在跳转前自己缓存到本地的订单号
-						const storedOrderNumber = uni.getStorageSync("lastOrderNumber");
+			// 			const storedOrderNumber = uni.getStorageSync("lastOrderNumber");
-						const orderNumber = orderNumberFromExtra || storedOrderNumber;
+			// 			const orderNumber = orderNumberFromExtra || storedOrderNumber;
 
-						if (orderNumber) {
+			// 			if (orderNumber) {
-							this.startOrderStatusPolling(orderNumber);
+			// 				this.startOrderStatusPolling(orderNumber);
-						} else {
+			// 			} else {
-							uni.showToast({
+			// 				uni.showToast({
-								title: '支付返回缺少订单号，请稍后在服务记录中查看',
+			// 					title: '支付返回缺少订单号，请稍后在服务记录中查看',
-								icon: 'none',
+			// 					icon: 'none',
-								duration: 3000
+			// 					duration: 3000
-							});
+			// 				});
-						}
+			// 			}
-					} else if (extraData.code === 'cancel') {
+			// 		} else if (extraData.code === 'cancel') {
-						uni.showToast({
+			// 			uni.showToast({
-							title: '支付已取消',
+			// 				title: '支付已取消',
-							icon: 'none'
+			// 				icon: 'none'
-						});
+			// 			});
-					} else {
+			// 		} else {
-						uni.showToast({
+			// 			uni.showToast({
-							title: `支付失败：${extraData.errmsg || '未知错误'}`,
+			// 				title: `支付失败：${extraData.errmsg || '未知错误'}`,
-							icon: 'none',
+			// 				icon: 'none',
-							duration: 3000
+			// 				duration: 3000
-						});
+			// 			});
-					}
+			// 		}
-				}
+			// 	}
-			}
+			// }
 		},
 		onHide: function() {
 			console.log('App Hide')
@@ -102,38 +102,31 @@
 					}, 100)
 				}
 			},
-			// 启动轮询支付状态
+			// 启动轮询支付状态：回到小程序立马查一次，失败则每隔 3 秒再查，最多再查 3 次（共 4 次）
 			startOrderStatusPolling(orderNumber) {
-				// 避免重复轮询
 				if (this._orderStatusTimer) {
 					clearInterval(this._orderStatusTimer);
 					this._orderStatusTimer = null;
 				}
 
 				let times = 0;
-				const maxTimes = 5; // 最多轮询 20 次，大约 1 分钟
+				const maxTimes = 4; // 立即 1 次 + 最多再查 3 次
 
-				this._orderStatusTimer = setInterval(async () => {
+				const doCheck = async () => {
 					times++;
 					try {
 						const res = await updateLuOrderPayStatus({ orderNumber });
-						// 约定：接口有返回数据即认为支付成功
 						if (res) {
 							clearInterval(this._orderStatusTimer);
 							this._orderStatusTimer = null;
-							// 成功后清理本地缓存的订单号
 							uni.removeStorageSync("lastOrderNumber");
-
+							uni.showToast({ title: '支付成功', icon: 'success' });
-							uni.showToast({
-								title: '支付成功',
-								icon: 'success'
-							});
-
-							// 跳转到服务记录页面，默认展示「待核销」tab
 							uni.navigateTo({
 								url: '/pages/profileSub/serviceRecords?tab=pending_verification'
 							});
-						} else if (times >= maxTimes) {
+							return;
+						}
+						if (times >= maxTimes) {
 							clearInterval(this._orderStatusTimer);
 							this._orderStatusTimer = null;
 							uni.showToast({
@@ -149,7 +142,10 @@
 							this._orderStatusTimer = null;
 						}
 					}
-				}, 3000);
+				};
+
+				doCheck(); // 回到小程序立马查一次
+				this._orderStatusTimer = setInterval(doCheck, 3000); // 失败则每 3 秒再查，最多再查 3 次
 			}
 		}
 	}

api/index.js

@@ -4,8 +4,8 @@
  */
 
 // 基础URL配置（注意：末尾不要加斜杠）
-// const BASE_URL = 'https://guangsh.manage.hschengtai.com'
+const BASE_URL = 'https://guangsh.manage.hschengtai.com'
-const BASE_URL = 'http://192.168.5.134:48085'
+// const BASE_URL = 'http://192.168.5.134:48085'
 // 是否正在刷新token（防止并发刷新）
 let isRefreshing = false
 // 等待刷新完成的请求队列
@@ -366,12 +366,15 @@ export function request(options = {}) {
 					uni.hideLoading()
 				}
 
-				// 网络错误处理
+				// 网络错误处理（真机/预览时域名未配置会报 domain 相关错误）
 				let errorMsg = '网络请求失败'
 				if (err.errMsg) {
-					if (err.errMsg.includes('timeout')) {
+					const em = err.errMsg
+					if (em.includes('timeout')) {
 						errorMsg = '请求超时，请检查网络'
-					} else if (err.errMsg.includes('fail')) {
+					} else if (em.includes('domain') || em.includes('url not in')) {
+						errorMsg = '请在小程序后台配置服务器域名'
+					} else if (em.includes('fail')) {
 						errorMsg = '网络连接失败，请检查网络设置'
 					}
 				}

api/service.js

@@ -161,11 +161,16 @@ export function getMyOrderPage(params = {}){
 	})
 }
 
-// 删除订单
+// 删除订单（id 为 Query 参数，拼在 URL 上）
-export function deleteOrder(id){
+export function deleteOrder(params = {}) {
+	const id = params.id
+	const url = id !== undefined && id !== ''
+		? `/app-api/member/lu-order/delete?id=${encodeURIComponent(id)}`
+		: '/app-api/member/lu-order/delete'
 	return request({
-		url: '/app-api/member/lu-order/delete?id='+id,
+		url,
 		method: 'DELETE',
+		data: {},
 	})
 }
 

pages/detail/serviceDetail.vue

@@ -61,7 +61,7 @@
               {{ item.discount }}折
             </view>
           </view>
-          <text class="menu-desc">{{ item.description }}</text>
+          <!-- <text class="menu-desc">{{ item.description }}</text> -->
           <view class="menu-price-row">
             <view class="current-price">
               <view class="price-label">现价¥</view>

pages/profile/profile.vue

@@ -7,11 +7,7 @@
     <!-- 用户资料卡片 -->
     <view
       class="user-card"
-      :style="{
+      :style="{ backgroundImage: userCardBgImage }"
-        backgroundImage: userInfo.level.backgroundUrl
-          ? `url(${userInfo.level.backgroundUrl})`
-          : 'url(/static/profile/member-card-bg.png)',
-      }"
     >
       <view class="user-info">
         <view class="user-level">{{ userInfo.level.name }}</view>
@@ -23,7 +19,7 @@
         >
           <image
             class="avatar"
-            :src="userInfo.avatar || '/static/tabbar/profile.png'"
+            :src="avatarSrc"
             mode="aspectFill"
           ></image>
         </button>
@@ -32,7 +28,7 @@
         <view class="avatar-wrapper" @click="handleChooseAvatar">
           <image
             class="avatar"
-            :src="userInfo.avatar || '/static/tabbar/profile.png'"
+            :src="avatarSrc"
             mode="aspectFill"
           ></image>
         </view>
@@ -43,14 +39,26 @@
           class="avatar-hg"
         ></image>
         <view class="user-details">
-          <text class="login-method">{{
+          <!-- #ifdef MP-WEIXIN -->
-            userInfo.nickname || "微信登录"
+          <input
-          }}</text>
+            type="nickname"
+            class="nickname-input"
+            :value="userInfo.nickname || ''"
+            placeholder="点击设置微信昵称"
+            @blur="handleNicknameBlur"
+          />
+          <!-- #endif -->
+          <!-- #ifndef MP-WEIXIN -->
+          <text
+            class="login-method"
+            @click="handleNicknameClickNonWeixin"
+          >{{ userInfo.nickname || "微信登录" }}</text>
+          <!-- #endif -->
           <text class="user-id">NO.{{ userInfo.id }}</text>
         </view>
       </view>
       <view class="member-benefits-btn" @click="goToMemberBenefits">
-        <image :src="userInfo.level.icon" mode="aspectFill"></image>
+        <image :src="memberLevelIcon" mode="aspectFill"></image>
       </view>
       <view class="user-notice">
         <!-- <text class="user-notice-text">{{ noticeNum }}</text> -->
@@ -128,6 +136,22 @@ export default {
       uploading: false, // 是否正在上传头像
     };
   },
+  computed: {
+    avatarSrc() {
+      const v = this.userInfo.avatar;
+      return (v && typeof v === "string") ? v : "/static/tabbar/profile.png";
+    },
+    memberLevelIcon() {
+      const icon = this.userInfo.level && this.userInfo.level.icon;
+      return (icon && typeof icon === "string") ? icon : "/static/tabbar/profile.png";
+    },
+    userCardBgImage() {
+      const url = this.userInfo.level && this.userInfo.level.backgroundUrl;
+      return (url && typeof url === "string")
+        ? `url(${url})`
+        : "url(/static/profile/member-card-bg.png)";
+    },
+  },
   onLoad() {
     this.getSystemInfo();
     this.updateTime();
@@ -264,12 +288,10 @@ export default {
     // 选择头像（微信小程序使用 chooseAvatar，其他平台使用 chooseImage）
     handleChooseAvatar(e) {
       // #ifdef MP-WEIXIN
-      // 微信小程序新版本使用 chooseAvatar
       if (e.detail && e.detail.avatarUrl) {
-        const avatarUrl = e.detail.avatarUrl;
+        const avatarUrl = typeof e.detail.avatarUrl === "string" ? e.detail.avatarUrl : String(e.detail.avatarUrl || "");
-        // 先显示本地预览
+        if (!avatarUrl) return;
         this.userInfo.avatar = avatarUrl;
-        // 上传头像
         this.uploadAvatar(avatarUrl);
       }
       // #endif
@@ -282,22 +304,43 @@ export default {
         sourceType: ["album", "camera"],
         success: (res) => {
           const tempFilePath = res.tempFilePaths[0];
-          // 先显示本地预览
           this.userInfo.avatar = tempFilePath;
-          // 上传头像
           this.uploadAvatar(tempFilePath);
         },
         fail: (err) => {
           console.error("选择图片失败:", err);
-          uni.showToast({
+          uni.showToast({ title: "选择图片失败", icon: "none" });
-            title: "选择图片失败",
-            icon: "none",
-          });
         },
       });
       // #endif
     },
 
+    // 微信内：昵称输入框失焦时保存昵称（input type="nickname" 会弹出微信昵称选项）
+    handleNicknameBlur(e) {
+      const nickname = (e.detail && e.detail.value) ? String(e.detail.value).trim() : "";
+      if (nickname) {
+        this.userInfo.nickname = nickname;
+        uni.setStorageSync("userInfo", this.userInfo);
+        this.updateUserNickname(nickname);
+        uni.showToast({ title: "昵称已更新", icon: "success" });
+      }
+    },
+    // 非微信环境点击昵称提示
+    handleNicknameClickNonWeixin() {
+      uni.showToast({
+        title: "请在微信中打开以修改昵称",
+        icon: "none",
+      });
+    },
+    // 同步昵称到后端（若后端有更新接口可在此调用）
+    async updateUserNickname(nickname) {
+      try {
+        // 若有更新用户信息接口可在此调用，例如：await updateUserInfo({ nickname });
+      } catch (err) {
+        console.error("更新昵称失败:", err);
+      }
+    },
+
     // 上传头像
     uploadAvatar(filePath) {
       if (this.uploading) {
@@ -365,11 +408,10 @@ export default {
         fail: (err) => {
           uni.hideLoading();
           console.error("上传头像失败:", err);
-          uni.showToast({
+          const msg = (err && err.errMsg && err.errMsg.indexOf("ENOENT") !== -1)
-            title: "上传失败，请检查网络",
+            ? "模拟器暂不支持更换头像，请使用真机预览"
-            icon: "none",
+            : "上传失败，请检查网络";
-          });
+          uni.showToast({ title: msg, icon: "none", duration: 2500 });
-          // 上传失败，恢复原头像
           this.loadUserInfo();
         },
         complete: () => {
@@ -501,6 +543,19 @@ export default {
         color: #333333;
       }
 
+      .nickname-input {
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: bold;
+        font-size: 32rpx;
+        color: #333333;
+        padding: 0;
+        margin: 0;
+        height: 44rpx;
+        line-height: 44rpx;
+        background: transparent;
+        width: 100%;
+      }
+
       .user-id {
         font-family: PingFang-SC, PingFang-SC;
         font-weight: 500;

pages/profileSub/serviceRecords.vue

@@ -90,20 +90,37 @@
               mode="aspectFill"
             ></image>
             <view class="goods-info">
-              <text class="goods-title">{{ goods.couponName || goods.name }}</text>
+              <text class="goods-title">{{
+                goods.couponName || goods.name
+              }}</text>
               <!-- <text class="goods-subtitle">
                 订单号：{{ item.orderNumber }}
               </text> -->
               <view class="goods-meta-row">
-                <text class="goods-price">¥{{ formatFen(goods.salePrice) }}</text>
+                <text class="goods-price"
+                  >¥{{ formatFen(goods.salePrice) }}</text
+                >
                 <text
                   class="goods-count"
-                  v-if="(goods.num || goods.count || goods.quantity || goods.qty) > 1"
+                  v-if="
+                    (goods.num || goods.count || goods.quantity || goods.qty) >
+                    1
+                  "
                 >
                   ×{{ goods.num || goods.count || goods.quantity || goods.qty }}
                 </text>
               </view>
             </view>
+            <view
+              class="qr-code-icon-wrapper"
+              @click.stop="handleQrCode(item, goods)"
+            >
+              <image
+                src="/static/home/qr_code_icon.png"
+                mode="aspectFill"
+                class="qr-code-icon"
+              ></image>
+            </view>
           </view>
         </view>
 
@@ -111,7 +128,9 @@
         <view class="record-footer">
           <view class="total-info">
             <text class="total-label">实付款：</text>
-            <text class="total-amount">¥{{ formatFen(item.payableAmount) }}</text>
+            <text class="total-amount"
+              >¥{{ formatFen(item.payableAmount) }}</text
+            >
           </view>
 
           <!-- 操作按钮区域 -->
@@ -151,7 +170,7 @@
           <view class="record-actions" v-else-if="item.status === 4">
             <button
               class="action-btn detail-btn"
-              @click.stop="handleViewDetail(item)"
+              @click.stop="handleDelete(item)"
             >
               删除
             </button>
@@ -166,12 +185,44 @@
         <text v-else class="load-more-text">上拉加载更多</text>
       </view>
     </scroll-view>
+
+    <!-- 券码二维码弹窗 -->
+    <view
+      class="qr-modal-mask"
+      v-if="qrModalVisible"
+      @click="closeQrModal"
+    ></view>
+    <view class="qr-modal-wrap" v-if="qrModalVisible">
+      <view class="qr-modal" @click.stop>
+        <view class="qr-modal-header">
+          <text class="qr-modal-title">核销码</text>
+          <view
+            class="qr-modal-status"
+            :class="getQrUseStatusClass(qrModalData.useStatus)"
+          >
+            {{ getQrUseStatusText(qrModalData.useStatus) }}
+          </view>
+          <view class="qr-modal-close" @click="closeQrModal">×</view>
+        </view>
+        <view class="qr-modal-body">
+          <view class="qr-code-box" v-if="qrModalData.couponCode">
+            <image
+              class="qr-code-image"
+              :src="qrCodeImageUrl"
+              mode="aspectFit"
+            ></image>
+            <!-- <text class="qr-code-text">{{ qrModalData.couponCode }}</text> -->
+          </view>
+          <text v-else class="qr-code-empty">暂无券码</text>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
 import NavHeader from "@/components/NavHeader/NavHeader.vue";
-import { getLuMyOrderPage, cancelOrder, getPaySign } from "@/api/service";
+import { getLuMyOrderPage, cancelOrder, getPaySign,deleteOrder } from "@/api/service";
 
 export default {
   components: {
@@ -193,12 +244,22 @@ export default {
         completed: [],
         cancelled: [],
       },
+      qrModalVisible: false,
+      qrModalData: {
+        useStatus: 0,
+        couponCode: "",
+      },
     };
   },
   computed: {
     currentList() {
       return this.recordsMap[this.currentTab] || [];
     },
+    qrCodeImageUrl() {
+      const code = this.qrModalData.couponCode || "";
+      if (!code) return "";
+      return `https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=${encodeURIComponent(code)}`;
+    },
   },
   onLoad(options) {
     // 如果通过参数传入 tab，优先使用传入的 tab 值
@@ -238,7 +299,7 @@ export default {
     getStatusValue() {
       const map = {
         pending_payment: 0, // 待支付
-        pending_verification: 1, // 已完成 
+        pending_verification: 1, // 已完成
         chargeback: 3, // 已退款
         cancelled: 4, // 已取消
       };
@@ -286,7 +347,7 @@ export default {
         ? "status-cancelled"
         : "";
     },
-    // 加载数据
+    // 加载数据（真机/预览无数据时请检查：1. 小程序后台「服务器域名」已配置接口域名 2. 真机已登录）
     async loadData(append = false) {
       if (this.loading) return;
       this.loading = true;
@@ -297,7 +358,13 @@ export default {
           pageSize: this.pageSize,
           status,
         });
-        const list = res.list || [];
+        // 兼容多种后端返回结构：list / records / data.list
+        const rawList =
+          res.list ||
+          res.records ||
+          (res.data && (res.data.list || res.data.records)) ||
+          [];
+        const list = Array.isArray(rawList) ? rawList : [];
 
         const currentList = this.recordsMap[this.currentTab] || [];
         this.recordsMap = {
@@ -308,10 +375,12 @@ export default {
         // 是否还有更多
         this.hasMore = list.length >= this.pageSize;
       } catch (e) {
+        const msg = (e && e.message) ? String(e.message) : "";
         console.error("加载服务记录失败:", e);
         uni.showToast({
-          title: "加载服务记录失败",
+          title: msg ? `加载失败：${msg}` : "加载服务记录失败",
           icon: "none",
+          duration: 2500,
         });
       } finally {
         this.loading = false;
@@ -361,6 +430,27 @@ export default {
         },
       });
     },
+    // 删除订单
+    handleDelete(item) {
+      uni.showModal({
+        title: "提示",
+        content: "确定要删除该订单吗？",
+        success: async (res) => {
+          if (res.confirm) {
+            const resData = await deleteOrder({
+              id: item.id,
+            });
+            if (resData) {
+              uni.showToast({
+                title: "订单已删除",
+                icon: "success",
+              });
+              this.loadData();
+            }
+          }
+        },
+      });
+    },
     // 立即支付（与店铺详情页 handlePay 逻辑一致，跳转收银台小程序）
     async handlePay(item) {
       if (!item || !item.orderNumber) {
@@ -448,6 +538,33 @@ export default {
         icon: "none",
       });
     },
+    // 点击二维码图标：打开弹窗，展示券状态 + 根据 couponCode 生成二维码
+    handleQrCode(item, goods) {
+      const useStatus = goods?.useStatus ?? item?.useStatus ?? 0;
+      const couponCode =
+        (goods && (goods.couponCode || goods.couponNo)) ||
+        item?.couponCode ||
+        item?.couponNo ||
+        "";
+      this.qrModalData = { useStatus, couponCode };
+      this.qrModalVisible = true;
+    },
+    getQrUseStatusText(useStatus) {
+      const map = { 0: "未使用", 1: "已使用", 3: "已退款", 4: "已取消" };
+      return map[useStatus] ?? "未使用";
+    },
+    getQrUseStatusClass(useStatus) {
+      const map = {
+        0: "status-unused",
+        1: "status-used",
+        3: "status-refund",
+        4: "status-cancelled",
+      };
+      return map[useStatus] ?? "status-unused";
+    },
+    closeQrModal() {
+      this.qrModalVisible = false;
+    },
   },
 };
 </script>
@@ -717,6 +834,16 @@ export default {
             }
           }
         }
+
+        .qr-code-icon-wrapper {
+          flex-shrink: 0;
+          padding: 12rpx;
+          margin-left: 8rpx;
+        }
+        .qr-code-icon {
+          width: 44rpx;
+          height: 44rpx;
+        }
       }
     }
 
@@ -787,4 +914,122 @@ export default {
     }
   }
 }
+
+/* 券码二维码弹窗 */
+.qr-modal-mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 900;
+}
+.qr-modal-wrap {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 901;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 36rpx;
+  box-sizing: border-box;
+}
+.qr-modal {
+  width: 100%;
+  max-width: 720rpx;
+  background: #ffffff;
+  border-radius: 28rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.15);
+}
+.qr-modal-header {
+  position: relative;
+  padding: 40rpx 32rpx 28rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+.qr-modal-title {
+  font-family: PingFang-SC, PingFang-SC;
+  font-weight: 600;
+  font-size: 36rpx;
+  color: #1a1819;
+}
+.qr-modal-status {
+  padding: 8rpx 20rpx;
+  border-radius: 24rpx;
+  font-family: PingFang-SC, PingFang-SC;
+  font-weight: 500;
+  font-size: 24rpx;
+  &.status-unused {
+    background: rgba(0, 66, 148, 0.1);
+    color: #004294;
+  }
+  &.status-used {
+    background: rgba(158, 158, 158, 0.15);
+    color: #9e9e9e;
+  }
+  &.status-refund {
+    background: rgba(76, 175, 80, 0.1);
+    color: #4caf50;
+  }
+  &.status-cancelled {
+    background: rgba(158, 158, 158, 0.15);
+    color: #9e9e9e;
+  }
+}
+.qr-modal-close {
+  position: absolute;
+  right: 20rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 44rpx;
+  color: #999999;
+  line-height: 1;
+}
+.qr-modal-body {
+  padding: 48rpx 32rpx 56rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.qr-code-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.qr-code-image {
+  width: 520rpx;
+  height: 520rpx;
+  background: #fff;
+  border: 2rpx solid #e8e8e8;
+  border-radius: 20rpx;
+  margin-bottom: 28rpx;
+}
+.qr-code-text {
+  font-family: PingFang-SC, PingFang-SC;
+  font-weight: 500;
+  font-size: 26rpx;
+  color: #333333;
+  word-break: break-all;
+  text-align: center;
+  padding: 0 20rpx;
+}
+.qr-code-empty {
+  font-family: PingFang-SC, PingFang-SC;
+  font-size: 28rpx;
+  color: #999999;
+}
 </style>