feat：0820需求

App.vue

@@ -1,4 +1,9 @@
 <script>
+import {
+  resumeKefuRealtime,
+  suspendKefuRealtime,
+} from "@/uni_modules/hashmall-customer-service/js_sdk/kefu-realtime.js";
+
 export default {
   globalData: {
     launchShown: false, // 内存标记，杀进程就清空
@@ -6,11 +11,8 @@ export default {
 
   onLaunch: function () {
     console.log("App Launch");
-    uni.getSystemInfo({
+    const res = uni.getSystemInfoSync();
-      success: (res) => {
+    uni.setStorageSync("platform", res.platform);
-        uni.setStorageSync("platform", res.platform);
-      }
-    });
     // #ifdef APP-PLUS
     plus.navigator.closeSplashscreen(); // 立即关闭原生闪屏
 
@@ -25,6 +27,8 @@ export default {
   },
   onShow: function () {
     console.log("App Show");
+    uni.$emit("kefu-app-show");
+    resumeKefuRealtime();
     // 隐藏原生tabbar
     /*#ifdef APP-PLUS*/
     uni.hideTabBar({
@@ -34,6 +38,8 @@ export default {
   },
   onHide: function () {
     console.log("App Hide");
+    uni.$emit("kefu-app-hide");
+    suspendKefuRealtime();
   }
 };
 </script>

api/cart.js

@@ -51,6 +51,15 @@ export function getSettleList(data) {
 	  });
 }
 
+// 立即购买预结算（含优惠券可用性和抵扣后金额）
+export function getDirectSettleList(data) {
+	return request({
+	    url: "/cart/getDirectSettleList",
+	    method: "post",
+	    data,
+	  });
+}
+
 // 结算下单
 export function settle(data) {
 	return request({

api/common.js

@@ -6,38 +6,38 @@ import request from '@/utils/request.js'; // 引入封装的方法
 export function getUserList(data) {
 	// data.appId = APPID;
 	return request({
-	    url: "/common/getSmsCode",
+		url: "/common/getSmsCode",
-	    method: "post",
+		method: "post",
-	    data,
+		data,
-	  });
+	});
 }
 
 // 查询级联地区
 export function getCascadeRegion(data) {
 	return request({
-	    url: "/common/getCascadeRegion",
+		url: "/common/getCascadeRegion",
-	    method: "get",
+		method: "get",
-	    data,
+		data,
-	  });
+	});
 }
 
- // 查询级联类目
+// 查询级联类目
- export function getCascadeCategory(data) {
+export function getCascadeCategory(data) {
- 	return request({
+	return request({
- 	    url: "/common/getCascadeCategory",
+		url: "/common/getCascadeCategory",
- 	    method: "get",
+		method: "get",
- 	    data,
+		data,
-		isShowLoading:false,
+		isShowLoading: false,
- 	  });
+	});
- }
+}
 
 
 // 查询支持的银行
 export function getSupportBank(data) {
 	return request({
-	    url: "/common/getSupportBank",
+		url: "/common/getSupportBank",
-	    method: "get",
+		method: "get",
-	    data,
+		data,
 	});
 }
 
@@ -46,7 +46,7 @@ export function uploadImage(params) {
 	const formData = new FormData();
 	formData.append("file", params.file);
 	formData.append("type", params.type);
-	return request.post('/common/upload/image',formData);
+	return request.post('/common/upload/image', formData);
 }
 
 export const uploadImg = "/common/upload/image";
@@ -59,9 +59,9 @@ export const uploadImg = "/common/upload/image";
  */
 export function getSharePoster(data) {
 	return request({
-	    url: "/common/getSharePoster",
+		url: "/common/getSharePoster",
-	    method: "get",
+		method: "get",
-	    data,
+		data,
 	});
 }
 
@@ -71,9 +71,9 @@ export function getSharePoster(data) {
  */
 export function generateSharePoster(data) {
 	return request({
-	    url: "/common/generateSharePoster",
+		url: "/common/generateSharePoster",
-	    method: "get",
+		method: "get",
-	    data,
+		data,
 	});
 }
 
@@ -83,43 +83,43 @@ export function generateSharePoster(data) {
  */
 export function getCarouselImage(data) {
 	return request({
-	    url: "/common/getCarouselImage",
+		url: "/common/getCarouselImage",
-	    method: "get",
+		method: "get",
-	    data,
+		data,
 	});
 }
 
 export function getWithdraw(data) {
 	return request({
-	    url: "/withdrawAccount/getWithdrawAccountsList",
+		url: "/withdrawAccount/getWithdrawAccountsList",
-	    method: "get",
+		method: "get",
-	    data,
+		data,
 	});
 }
 
 export function bindWithdraw(data) {
 	return request({
-	    url: "/withdrawAccount/bindWithdrawAccount",
+		url: "/withdrawAccount/bindWithdrawAccount",
-	    method: "post",
+		method: "post",
-	    data,
+		data,
-		cha:1
+		cha: 1
 	});
 }
 
 export function unbindWithdraw(data) {
 	return request({
-	    url: "/withdrawAccount/unbindWithdrawAccount",
+		url: "/withdrawAccount/unbindWithdrawAccount",
-	    method: "get",
+		method: "get",
-	    data,
+		data,
 	});
 }
 
 export function sendWithdraw(data) {
 	return request({
-	    url: "/withdraw/withdraw",
+		url: "/withdraw/withdraw",
-	    method: "post",
+		method: "post",
-	    data,
+		data,
-		cha:1
+		cha: 1
 	});
 }
 
@@ -129,9 +129,9 @@ export function sendWithdraw(data) {
  */
 export function checkAppVersion(data) {
 	return request({
-	    url: "/common/checkAppVersion",
+		url: "/common/checkAppVersion",
-	    method: "post",
+		method: "post",
-	    data,
+		data,
 	});
 }
 

api/coupon.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request.js';
+
+/**
+ * 查询领券中心列表
+ * @param {Object} data { page, pageSize }
+ */
+export function getReceiveCenterList(data) {
+    return request({
+        url: "/coupon/getReceiveCenterList",
+        method: "get",
+        data,
+    });
+}
+
+/**
+ * 领取优惠券
+ * @param {Object} data { templateId }
+ */
+export function receiveCoupon(data) {
+    return request({
+        url: "/coupon/receive",
+        method: "post",
+        data
+    });
+}
+
+/**
+ * 查询我的优惠券列表 (分页)
+ * @param {Object} data { status, page, pageSize }
+ * status: 1-待使用，2-已使用，3-已过期，4-已失效；不传为全部
+ */
+export function getMyCouponPage(data) {
+    return request({
+        url: "/coupon/getMyCouponPage",
+        method: "get",
+        data,
+    });
+}
+
+/**
+ * 查询商品详情优惠券列表
+ * @param {Object} data { goodsId }
+ */
+export function getGoodsCouponList(data) {
+    return request({
+        url: "/coupon/getGoodsCouponList",
+        method: "get",
+        data,
+    });
+}
+
+/**
+ * 查询优惠券适用商品列表 (分页)
+ * @param {Object} data { templateId, sort, page, pageSize }
+ */
+export function getApplicableGoods(data) {
+    return request({
+        url: "/coupon/getApplicableGoods",
+        method: "get",
+        data,
+    });
+}

manifest.json

@@ -1,39 +1,41 @@
 {
-    "name" : "信任桥",
+    "name": "信任桥",
-    "appid" : "__UNI__4910728",
+    "appid": "__UNI__4910728",
-    "description" : "信任桥优品是一款集线上商城、线下联盟商家的DAO聚合商城；通过“有趣”“有利”“有希望”的卖货玩法，吸引消费者、推广者、商家、投资人参与生态，共同打造共创共享的全球产业生态。",
+    "description": "信任桥优品是一款集线上商城、线下联盟商家的DAO聚合商城；通过“有趣”“有利”“有希望”的卖货玩法，吸引消费者、推广者、商家、投资人参与生态，共同打造共创共享的全球产业生态。",
-    "versionName" : "1.0.3",
+    "versionName": "1.0.3",
-    "versionCode" : 170,
+    "versionCode": 170,
-    "transformPx" : false,
+    "transformPx": false,
     /* 5+App特有相关 */
-    "app-plus" : {
+    "app-plus": {
-        "name" : "哈希优品",
+        "name": "哈希优品",
-        "usingComponents" : true,
+        "usingComponents": true,
-        "nvueStyleCompiler" : "uni-app",
+        "nvueStyleCompiler": "uni-app",
-        "compilerVersion" : 3,
+        "compilerVersion": 3,
-        "ios" : {
+        "ios": {
-            "deploymentTarget" : "13.0"
+            "deploymentTarget": "13.0"
         },
-        "splashscreen" : {
+        "splashscreen": {
-            "alwaysShowBeforeRender" : true,
+            "alwaysShowBeforeRender": true,
-            "waiting" : true,
+            "waiting": true,
-            "delay" : 0,
+            "delay": 0,
-            "duration" : 0,
+            "duration": 0,
-            "autoclose" : false
+            "autoclose": false
         },
         /* 模块配置 */
-        "modules" : {
+        "modules": {
-            "Payment" : {},
+            "Payment": {},
-            "Camera" : {},
+            "Camera": {},
-            "OAuth" : {},
+            "OAuth": {},
-            "Share" : {}
+            "Share": {}
         },
         /* 应用发布信息 */
-        "distribute" : {
+        "distribute": {
             /* android打包配置 */
-            "android" : {
+            "android": {
-                "schemes" : [ "trustbridgeapp" ],
+                "schemes": [
-                "permissions" : [
+                    "trustbridgeapp"
+                ],
+                "permissions": [
                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
@@ -49,163 +51,178 @@
                     "<uses-feature android:name=\"android.hardware.camera\"/>",
                     "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                 ],
-                "abiFilters" : [ "armeabi-v7a", "arm64-v8a" ],
+                "abiFilters": [
-                "targetSdkVersion" : 30,
+                    "armeabi-v7a",
-                "minSdkVersion" : 21
+                    "arm64-v8a"
+                ],
+                "targetSdkVersion": 30,
+                "minSdkVersion": 21
             },
             /* ios打包配置 */
-            "ios" : {
+            "ios": {
-                "dSYMs" : false,
+                "dSYMs": false,
-                "idfa" : false,
+                "idfa": false,
-                "urltypes" : [
+                "urltypes": [
                     {
-                        "urlidentifier" : "com.trustbridgeapp.mm",
+                        "urlidentifier": "com.trustbridgeapp.mm",
-                        "urlschemes" : [ "trustbridgeapp" ]
+                        "urlschemes": [
+                            "trustbridgeapp"
+                        ]
                     }
                 ],
-                "associatedDomains" : [ "applinks:ulink.trustbridgeapp.com" ],
+                "associatedDomains": [
-                "capabilities" : {
+                    "applinks:ulink.trustbridgeapp.com"
-                    "entitlements" : {
+                ],
-                        "com.apple.developer.associated-domains" : [ "applinks:app.tbmall.xin" ]
+                "capabilities": {
+                    "entitlements": {
+                        "com.apple.developer.associated-domains": [
+                            "applinks:app.tbmall.xin"
+                        ]
                     }
                 },
-                "privacyDescription" : {
+                "privacyDescription": {
-                    "NSPhotoLibraryUsageDescription" : "App需要您的同意才能访问相册，以便您选择本地图片上传头像或发布商品评价。例如：当您修改个人头像或发布带图评价时，需要从相册选择图片。",
+                    "NSPhotoLibraryUsageDescription": "App需要您的同意才能访问相册，以便您选择本地图片上传头像或发布商品评价。例如：当您修改个人头像或发布带图评价时，需要从相册选择图片。",
-                    "NSPhotoLibraryAddUsageDescription" : "App需要您的同意才能添加图片到相册，以便您保存商品海报或图片到本地。例如：当您点击保存商品分享海报时，需要写入相册权限。",
+                    "NSPhotoLibraryAddUsageDescription": "App需要您的同意才能添加图片到相册，以便您保存商品海报或图片到本地。例如：当您点击保存商品分享海报时，需要写入相册权限。",
-                    "NSCameraUsageDescription" : "App需要您的同意才能访问相机，以便您拍摄图片上传头像或发布商品评价。例如：当您修改个人头像或发布带图评价时，需要使用相机拍摄照片。"
+                    "NSCameraUsageDescription": "App需要您的同意才能访问相机，以便您拍摄图片上传头像或发布商品评价。例如：当您修改个人头像或发布带图评价时，需要使用相机拍摄照片。"
                 }
             },
             /* SDK配置 */
-            "sdkConfigs" : {
+            "sdkConfigs": {
-                "payment" : {
+                "payment": {
-                    "alipay" : {
+                    "alipay": {
-                        "__platform__" : [ "ios", "android" ]
+                        "__platform__": [
+                            "ios",
+                            "android"
+                        ]
                     },
-                    "weixin" : {
+                    "weixin": {
-                        "__platform__" : [ "ios", "android" ],
+                        "__platform__": [
-                        "appid" : "wx7a5902cd556d9396",
+                            "ios",
-                        "UniversalLinks" : "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
+                            "android"
+                        ],
+                        "appid": "wx7a5902cd556d9396",
+                        "UniversalLinks": "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
                     }
                 },
-                "oauth" : {
+                "oauth": {
-                    "weixin" : {
+                    "weixin": {
-                        "appid" : "wx7a5902cd556d9396",
+                        "appid": "wx7a5902cd556d9396",
-                        "UniversalLinks" : "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
+                        "UniversalLinks": "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
                     },
-                    "apple" : {}
+                    "apple": {}
                 },
-                "share" : {
+                "share": {
-                    "weixin" : {
+                    "weixin": {
-                        "appid" : "wx7a5902cd556d9396",
+                        "appid": "wx7a5902cd556d9396",
-                        "UniversalLinks" : "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
+                        "UniversalLinks": "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
                     }
                 }
             },
-            "icons" : {
+            "icons": {
-                "android" : {
+                "android": {
-                    "hdpi" : "unpackage/res/icons/72x72.png",
+                    "hdpi": "unpackage/res/icons/72x72.png",
-                    "xhdpi" : "unpackage/res/icons/96x96.png",
+                    "xhdpi": "unpackage/res/icons/96x96.png",
-                    "xxhdpi" : "unpackage/res/icons/144x144.png",
+                    "xxhdpi": "unpackage/res/icons/144x144.png",
-                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+                    "xxxhdpi": "unpackage/res/icons/192x192.png"
                 },
-                "ios" : {
+                "ios": {
-                    "appstore" : "unpackage/res/icons/1024x1024.png",
+                    "appstore": "unpackage/res/icons/1024x1024.png",
-                    "ipad" : {
+                    "ipad": {
-                        "app" : "unpackage/res/icons/76x76.png",
+                        "app": "unpackage/res/icons/76x76.png",
-                        "app@2x" : "unpackage/res/icons/152x152.png",
+                        "app@2x": "unpackage/res/icons/152x152.png",
-                        "notification" : "unpackage/res/icons/20x20.png",
+                        "notification": "unpackage/res/icons/20x20.png",
-                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "notification@2x": "unpackage/res/icons/40x40.png",
-                        "proapp@2x" : "unpackage/res/icons/167x167.png",
+                        "proapp@2x": "unpackage/res/icons/167x167.png",
-                        "settings" : "unpackage/res/icons/29x29.png",
+                        "settings": "unpackage/res/icons/29x29.png",
-                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "settings@2x": "unpackage/res/icons/58x58.png",
-                        "spotlight" : "unpackage/res/icons/40x40.png",
+                        "spotlight": "unpackage/res/icons/40x40.png",
-                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                        "spotlight@2x": "unpackage/res/icons/80x80.png"
                     },
-                    "iphone" : {
+                    "iphone": {
-                        "app@2x" : "unpackage/res/icons/120x120.png",
+                        "app@2x": "unpackage/res/icons/120x120.png",
-                        "app@3x" : "unpackage/res/icons/180x180.png",
+                        "app@3x": "unpackage/res/icons/180x180.png",
-                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "notification@2x": "unpackage/res/icons/40x40.png",
-                        "notification@3x" : "unpackage/res/icons/60x60.png",
+                        "notification@3x": "unpackage/res/icons/60x60.png",
-                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "settings@2x": "unpackage/res/icons/58x58.png",
-                        "settings@3x" : "unpackage/res/icons/87x87.png",
+                        "settings@3x": "unpackage/res/icons/87x87.png",
-                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
+                        "spotlight@2x": "unpackage/res/icons/80x80.png",
-                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                        "spotlight@3x": "unpackage/res/icons/120x120.png"
                     }
                 }
             },
-            "splashscreen" : {
+            "splashscreen": {
-                "useOriginalMsgbox" : true,
+                "useOriginalMsgbox": true,
-                "iosStyle" : "common",
+                "iosStyle": "common",
-                "androidStyle" : "common"
+                "androidStyle": "common"
             }
         },
         /*忽略版本提示*/
-        "compatible" : {
+        "compatible": {
-            "ignoreVersion" : true
+            "ignoreVersion": true
         },
-        "nativePlugins" : {
+        "nativePlugins": {
-            "Hyy-Alipay" : {
+            "Hyy-Alipay": {
-                "__plugin_info__" : {
+                "__plugin_info__": {
-                    "name" : "【免费开源】支付宝，授权，授权登录",
+                    "name": "【免费开源】支付宝，授权，授权登录",
-                    "description" : "用过支付宝原生sdk，原生授权登录，更安全，有问题请联系作者",
+                    "description": "用过支付宝原生sdk，原生授权登录，更安全，有问题请联系作者",
-                    "platforms" : "Android",
+                    "platforms": "Android",
-                    "url" : "https://ext.dcloud.net.cn/plugin?id=11931",
+                    "url": "https://ext.dcloud.net.cn/plugin?id=11931",
-                    "android_package_name" : "",
+                    "android_package_name": "",
-                    "ios_bundle_id" : "",
+                    "ios_bundle_id": "",
-                    "isCloud" : true,
+                    "isCloud": true,
-                    "bought" : 1,
+                    "bought": 1,
-                    "pid" : "11931",
+                    "pid": "11931",
-                    "parameters" : {}
+                    "parameters": {}
                 }
             }
         }
     },
     /* 快应用特有相关 */
-    "quickapp" : {},
+    "quickapp": {},
     /* 小程序特有相关 */
-    "mp-weixin" : {
+    "mp-weixin": {
-        "appid" : "wx376a16a88befe265",
+        "appid": "wx376a16a88befe265",
-        "lazyCodeLoading" : "requiredComponents",
+        "lazyCodeLoading": "requiredComponents",
-        "setting" : {
+        "setting": {
-            "urlCheck" : false,
+            "urlCheck": false,
-            "minified" : true,
+            "minified": true,
-            "uglifyFileName" : true,
+            "uglifyFileName": true,
-            "es6" : true,
+            "es6": true,
-            "postcss" : true,
+            "postcss": true,
-            "sourcemap" : false
+            "sourcemap": false
         },
-        "usingComponents" : true,
+        "usingComponents": true,
-        "optimization" : {
+        "optimization": {
-            "subPackages" : true
+            "subPackages": true
         }
     },
-    "mp-alipay" : {
+    "mp-alipay": {
-        "usingComponents" : true
+        "usingComponents": true
     },
-    "mp-baidu" : {
+    "mp-baidu": {
-        "usingComponents" : true
+        "usingComponents": true
     },
-    "mp-toutiao" : {
+    "mp-toutiao": {
-        "usingComponents" : true
+        "usingComponents": true
     },
-    "uniStatistics" : {
+    "uniStatistics": {
-        "enable" : false
+        "enable": false
     },
-    "vueVersion" : "3",
+    "vueVersion": "3",
-    "_spaceID" : "mp-16f2830d-655c-4ed2-9763-d0258ba65ad9",
+    "_spaceID": "mp-16f2830d-655c-4ed2-9763-d0258ba65ad9",
-    "h5" : {
+    "h5": {
-        "router" : {
+        "router": {
-            "mode" : "hash",
+            "mode": "hash",
-            "base" : ""
+            "base": ""
         },
-        "devServer" : {
+        "devServer": {
-            "port" : 5173,
+            "port": 5173,
-            "proxy" : {
+            "proxy": {
-                "/proxy-api" : {
+                "/proxy-api": {
-                    "target" : "https://api.o.tbmall.xin",
+                    "target": "https://api.o.tbmall.xin",
-                    "changeOrigin" : true,
+                    "changeOrigin": true,
-                    "pathRewrite" : {
+                    "pathRewrite": {
-                        "^/proxy-api" : ""
+                        "^/proxy-api": ""
                     }
                 }
             }

pages.json

@@ -108,6 +108,18 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "apply_refund/apply_refund",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "fill_express/fill_express",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "mine_purse_bonus/mine_purse_bonus",
           "style": {
@@ -557,6 +569,12 @@
           "style": {
             "navigationBarTitleText": ""
           }
+        },
+        {
+          "path": "message/message",
+          "style": {
+            "navigationStyle": "custom"
+          }
         }
       ]
     },
@@ -569,6 +587,18 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "get-coupon/get-coupon",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "applicable_goods/applicable_goods",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "productInfo/evaluateDetail",
           "style": {

pages/home/home.vue

@@ -11,8 +11,10 @@
             </view>
             <text class="search_msg_warp" :style="isMP ? 'line-height: 1;' : ''">搜索</text>
           </view>
-          <image src="https://static.tbmall.xin/static/chart.png" class="chart_img" @click.stop="jumpNewSearch('list')">
+          <view class="message-entry" @click.stop="jumpNewSearch('list')">
-          </image>
+            <image src="https://static.tbmall.xin/static/chart.png" class="chart_img"></image>
+            <text v-if="kefuUnreadCount > 0" class="message-entry-badge">{{ formatKefuBadge(kefuUnreadCount) }}</text>
+          </view>
         </view>
         <view class="logo_banner">
           <view style="padding: 20rpx 0 0 20rpx">
@@ -234,6 +236,12 @@ import { comparisonVersionHandler } from "@/utils/index.js";
 import HomePopup from "@/components/common/home-popup.vue";
 import productSeckillCard from "@/components/common/product-seckill-card.vue";
 import { SHARE_URL } from "@/utils/config.js";
+import { getUnreadCount as getKefuUnreadCount } from "@/uni_modules/hashmall-customer-service/js_sdk/api.js";
+import {
+  KEFU_REALTIME_EVENT,
+  startKefuRealtime,
+} from "@/uni_modules/hashmall-customer-service/js_sdk/kefu-realtime.js";
+import { getStorageFun, TOKEN_NAME, USER_DATA } from "@/utils/auth.js";
 
 export default {
   components: {
@@ -287,9 +295,13 @@ export default {
       mpHeaderWarpStyle: {},
       mpHeaderStyle: {},
       mpLanguageStyle: {},
+      kefuUnreadCount: 0,
+      kefuUnreadRefreshTimer: null,
     };
   },
   onShow() {
+    this.refreshKefuUnread();
+    startKefuRealtime();
     // 获取设备是安卓还是ios
     const appUpdate = uni.getStorageSync("platform");
     const versionUpdateTime = uni.getStorageSync("versionUpdateTime");
@@ -318,6 +330,7 @@ export default {
     this.onGetSuperGoodsList();
   },
   onLoad() {
+    uni.$on(KEFU_REALTIME_EVENT, this.handleKefuRealtimeEvent);
     /*#ifdef APP-PLUS*/
     uni.hideTabBar({
       animation: false,
@@ -343,8 +356,55 @@ export default {
       query: "",
     };
   },
+  onUnload() {
+    uni.$off(KEFU_REALTIME_EVENT, this.handleKefuRealtimeEvent);
+    if (this.kefuUnreadRefreshTimer) clearTimeout(this.kefuUnreadRefreshTimer);
+    this.kefuUnreadRefreshTimer = null;
+  },
   mounted() { },
   methods: {
+    formatKefuBadge(value) {
+      return Number(value) > 99 ? "99+" : String(Number(value) || 0);
+    },
+    resolveKefuUserId() {
+      const value = getStorageFun(USER_DATA);
+      if (!value) return null;
+      let member = value;
+      if (typeof value !== "object") {
+        try {
+          member = JSON.parse(value);
+        } catch (error) {
+          return null;
+        }
+      }
+      return member && (member.id || member.userId);
+    },
+    async refreshKefuUnread() {
+      if (!getStorageFun(TOKEN_NAME)) {
+        this.kefuUnreadCount = 0;
+        return;
+      }
+      const userId = this.resolveKefuUserId();
+      if (!userId) return;
+      try {
+        this.kefuUnreadCount = await getKefuUnreadCount(userId);
+      } catch (error) {
+        // Keep the last known number during a temporary network interruption.
+      }
+    },
+    handleKefuRealtimeEvent(event) {
+      if (!event || !String(event.type || "").startsWith("kefu_")) return;
+      if (this.kefuUnreadRefreshTimer) clearTimeout(this.kefuUnreadRefreshTimer);
+      this.kefuUnreadRefreshTimer = setTimeout(() => {
+        this.kefuUnreadRefreshTimer = null;
+        this.refreshKefuUnread();
+      }, 120);
+    },
+    jumpMessageCenter() {
+      uni.navigateTo({
+        url: "/packages/message/message",
+      });
+    },
     initMPHeader() {
       try {
         const menuButton = uni.getMenuButtonBoundingClientRect();
@@ -446,7 +506,7 @@ export default {
     jumpNewSearch(type) {
       if (type === "list") {
         uni.navigateTo({
-          url: "/pages/login_package/announcement/announcement",
+          url: "/pages/login_package/message/message",
         });
         return;
       }
@@ -813,7 +873,36 @@ export default {
   .chart_img {
     width: 50rpx;
     height: 50rpx;
+    display: block;
+  }
+
+  .message-entry {
+    position: relative;
+    width: 65rpx;
+    height: 58rpx;
     margin-left: 15rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .message-entry-badge {
+    position: absolute;
+    top: -8rpx;
+    right: -8rpx;
+    min-width: 30rpx;
+    height: 30rpx;
+    padding: 0 7rpx;
+    border: 3rpx solid #8f3be9;
+    border-radius: 18rpx;
+    background: #f04438;
+    color: #fff;
+    font-size: 19rpx;
+    font-weight: 600;
+    line-height: 30rpx;
+    text-align: center;
+    box-sizing: border-box;
   }
 
   .search_msg_warp {

pages/login_package/announcement-detail/announcement-detail.vue

@@ -47,7 +47,21 @@ export default {
       }
     },
     onReturnClick() {
-      uni.navigateTo({url:"/pages/login_package/announcement/announcement"});
+      const pages = getCurrentPages();
+      if (pages && pages.length > 1) {
+        uni.navigateBack({
+          delta: 1,
+          fail: () => {
+            uni.switchTab({
+              url: "/pages/home/home",
+            });
+          },
+        });
+      } else {
+        uni.switchTab({
+          url: "/pages/home/home",
+        });
+      }
     },
   },
 };

pages/login_package/announcement/announcement.vue

@@ -81,9 +81,21 @@ export default {
     },
 	// 返回
     onReturnClick() {
-      	uni.switchTab({
+      const pages = getCurrentPages();
-					url:'/pages/home/home'
+      if (pages && pages.length > 1) {
-				})
+        uni.navigateBack({
+          delta: 1,
+          fail: () => {
+            uni.switchTab({
+              url: "/pages/home/home",
+            });
+          },
+        });
+      } else {
+        uni.switchTab({
+          url: "/pages/home/home",
+        });
+      }
     },
   },
 };

pages/login_package/login/login.vue

@@ -538,19 +538,13 @@ export default {
           uni.login({
             provider: 'apple',
             success: async (loginRes) => {
-              console.log('Apple 登录成功:', loginRes);
               const authResult = loginRes.appleInfo || {};
               const params = {
                 identityToken: authResult.identityToken,
-                // openId: authResult.user,
-                // fullName: authResult.fullName ? `${authResult.fullName.familyName || ''}${authResult.fullName.givenName || ''}` : '',
-                // authorizationCode: authResult.authorizationCode
               };
 
-              console.log("Apple 登录成功-0:", params)
               try {
                 const response = await appleLogin(params);
-                console.log("Apple 登录成功-1:", response)
                 if (response && response.bizcode === 100) {
 
                   if (response.data && response.data.userId) {
@@ -562,14 +556,12 @@ export default {
                     });
                   }
                 } else {
-                  console.log("Apple 登录成功-2:", response)
                   this.$refs.uToastRef.show({
                     type: "error",
                     message: response?.msg || "Apple登录失败",
                   });
                 }
               } catch (error) {
-                console.error("Apple登录异常:", error);
                 this.$refs.uToastRef.show({
                   type: "error",
                   message: "Apple登录异常，请重试",
@@ -579,18 +571,17 @@ export default {
               }
             },
             fail: (err) => {
-              this.loading = false;
+
-              console.error('Apple登录授权失败:', err);
               this.$refs.uToastRef.show({
                 type: "error",
                 message: "Apple登录授权失败",
               });
             }
           });
-          // #endif
         },
-      })
+      });
-    }
+      // #endif
+    },
   },
 
   computed: {

pages/login_package/message/message.vue

@@ -0,0 +1,356 @@
+<template>
+  <view class="message-page">
+    <TopSafe></TopSafe>
+    <Header title="消息" :isReturn="true" @return="onReturnClick"></Header>
+
+    <view class="message-container">
+      <view class="message-item" v-for="item in messageList" :key="item.id" @click="onItemClick(item)">
+        <view class="item-icon-wrap" :class="item.iconType">
+          <image class="item-icon" :src="item.icon" mode="aspectFit" />
+        </view>
+
+        <view class="item-content">
+          <view class="title-row">
+            <text class="item-title">{{ item.title }}</text>
+            <text class="item-badge" v-if="item.badge">{{ item.badge }}</text>
+          </view>
+          <text class="item-desc">{{ item.desc }}</text>
+        </view>
+      </view>
+    </view>
+
+    <qiaobao-assistant page-key="packages/message/message" title="消息" />
+  </view>
+</template>
+
+<script>
+import Header from "@/components/common/header.vue";
+import TopSafe from "@/components/common/top-safe.nvue";
+import { getNewsList } from "@/api/news.js";
+import {
+  CONTENT_TYPE,
+  getCurrentMember,
+  getMessages,
+  getUnreadCount,
+} from "@/uni_modules/hashmall-customer-service/js_sdk/api.js";
+import { getStorageFun, TOKEN_NAME, USER_DATA } from "@/utils/auth.js";
+import {
+  KEFU_REALTIME_EVENT,
+  startKefuRealtime,
+} from "@/uni_modules/hashmall-customer-service/js_sdk/kefu-realtime.js";
+
+const KEFU_DEFAULT_DESC = "点击联系平台客服";
+const NOTICE_DEFAULT_DESC = "暂无系统公告";
+
+export default {
+  components: {
+    Header,
+    TopSafe,
+  },
+  data() {
+    return {
+      refreshing: false,
+      realtimeRefreshTimer: null,
+      messageList: [
+        {
+          id: "kefu",
+          title: "平台客服",
+          badge: "",
+          desc: KEFU_DEFAULT_DESC,
+          iconType: "kefu",
+          icon: "https://static.tbmall.xin/static/plat-customer-service.png",
+          path: "/pages/rwa_package/kefu/kefu",
+        },
+        {
+          id: "system",
+          title: "系统公告",
+          badge: "",
+          desc: NOTICE_DEFAULT_DESC,
+          iconType: "system",
+          icon: "https://static.tbmall.xin/static/sys-customer-service.png",
+          path: "/pages/login_package/announcement/announcement",
+        },
+      ],
+    };
+  },
+  onLoad() {
+    uni.$on(KEFU_REALTIME_EVENT, this.handleKefuRealtimeEvent);
+  },
+  onShow() {
+    this.refreshMessageCenter();
+    startKefuRealtime();
+  },
+  onUnload() {
+    uni.$off(KEFU_REALTIME_EVENT, this.handleKefuRealtimeEvent);
+    if (this.realtimeRefreshTimer) clearTimeout(this.realtimeRefreshTimer);
+    this.realtimeRefreshTimer = null;
+  },
+  methods: {
+    handleKefuRealtimeEvent(event) {
+      if (!event || !String(event.type || "").startsWith("kefu_")) return;
+      // A single business operation may emit a message and a conversation event.
+      // Coalesce them so the summary endpoint is read only once.
+      if (this.realtimeRefreshTimer) clearTimeout(this.realtimeRefreshTimer);
+      this.realtimeRefreshTimer = setTimeout(() => {
+        this.realtimeRefreshTimer = null;
+        this.loadKefuSummary();
+      }, 120);
+    },
+    getMessageItem(id) {
+      return this.messageList.find((item) => item.id === id);
+    },
+    formatBadge(value) {
+      const count = Math.max(0, Number(value) || 0);
+      if (!count) return "";
+      return count > 99 ? "99+" : String(count);
+    },
+    parseStoredUser() {
+      const value = getStorageFun(USER_DATA);
+      if (!value) return null;
+      if (typeof value === "object") {
+        return value.id ? value : { ...value, id: value.userId };
+      }
+      try {
+        const parsed = JSON.parse(value);
+        return parsed.id ? parsed : { ...parsed, id: parsed.userId };
+      } catch (error) {
+        return null;
+      }
+    },
+    withTimeout(promise, timeout = 5000) {
+      return Promise.race([
+        promise,
+        new Promise((resolve) => setTimeout(() => resolve(null), timeout)),
+      ]);
+    },
+    normalizeKefuDesc(content, contentType) {
+      const type = Number(contentType || 0);
+      if (type === CONTENT_TYPE.IMAGE) return "[图片]";
+      if (type === CONTENT_TYPE.FILE) return "[文件]";
+      if (type === CONTENT_TYPE.AUDIO) return "[语音]";
+      if (type === CONTENT_TYPE.PRODUCT) return "[商品]";
+      if (type === CONTENT_TYPE.ORDER) return "[订单]";
+      if (type === CONTENT_TYPE.RECALLED) return "消息已撤回";
+
+      const text = String(content || "").trim();
+      if (!text) return KEFU_DEFAULT_DESC;
+      if (type === CONTENT_TYPE.QUOTE) {
+        try {
+          const quote = JSON.parse(text);
+          return String(quote.text || quote.content || "[引用消息]");
+        } catch (error) {
+          return text;
+        }
+      }
+      return text;
+    },
+    async loadKefuSummary() {
+      const item = this.getMessageItem("kefu");
+      if (!item) return;
+
+      if (!getStorageFun(TOKEN_NAME)) {
+        item.badge = "";
+        item.desc = KEFU_DEFAULT_DESC;
+        return;
+      }
+
+      let member = this.parseStoredUser();
+      if (!member || !member.id) {
+        try {
+          member = await this.withTimeout(getCurrentMember());
+        } catch (error) {
+          member = null;
+        }
+      }
+      if (!member || !member.id) return;
+
+      const results = await Promise.allSettled([
+        getUnreadCount(member.id),
+        getMessages({ userId: member.id, page: 1, pageSize: 20 }),
+      ]);
+
+      if (results[0].status === "fulfilled") {
+        item.badge = this.formatBadge(results[0].value);
+      }
+      if (results[1].status === "fulfilled") {
+        const result = results[1].value || {};
+        const conversation = result.conversation || {};
+        const rows = (result.messages && result.messages.entitys) || [];
+        const latest = rows.length ? rows[rows.length - 1] : {};
+        item.desc = this.normalizeKefuDesc(
+          conversation.lastMessageContent || latest.content,
+          conversation.lastMessageContentType || latest.contentType,
+        );
+      }
+    },
+    async loadNoticeSummary() {
+      const item = this.getMessageItem("system");
+      if (!item) return;
+      try {
+        const result = await getNewsList({
+          category: 2,
+          type: 0,
+          page: 1,
+          pageSize: 1,
+        });
+        const rows = (result && result.data && result.data.entitys) || [];
+        const latest = rows[0];
+        if (!latest) {
+          item.badge = "";
+          item.desc = NOTICE_DEFAULT_DESC;
+          return;
+        }
+        item.desc = latest.subTitle || latest.title || NOTICE_DEFAULT_DESC;
+        const readId = uni.getStorageSync("isReadNews");
+        item.badge = String(readId || "") === String(latest.id || "") ? "" : "1";
+      } catch (error) {
+        item.badge = "";
+        item.desc = NOTICE_DEFAULT_DESC;
+      }
+    },
+    async refreshMessageCenter() {
+      if (this.refreshing) return;
+      this.refreshing = true;
+      try {
+        await Promise.allSettled([
+          this.loadKefuSummary(),
+          this.loadNoticeSummary(),
+        ]);
+      } finally {
+        this.refreshing = false;
+      }
+    },
+    onReturnClick() {
+      const pages = getCurrentPages();
+      if (pages && pages.length > 1) {
+        uni.navigateBack({
+          delta: 1,
+          fail: () => {
+            uni.switchTab({ url: "/pages/home/home" });
+          },
+        });
+      } else {
+        uni.switchTab({ url: "/pages/home/home" });
+      }
+    },
+    onItemClick(item) {
+      if (item.path) {
+        uni.navigateTo({
+          url: item.path,
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.message-page {
+  min-height: 100vh;
+  background-color: #f7f8fa;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.message-container {
+  background-color: #ffffff;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.message-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 30rpx 32rpx;
+  position: relative;
+  background-color: #ffffff;
+  box-sizing: border-box;
+
+  &:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    left: 152rpx;
+    right: 0rpx;
+    bottom: 0;
+    height: 1rpx;
+    background-color: #f2f3f5;
+  }
+
+  &:active {
+    background-color: #f9f9f9;
+  }
+}
+
+.item-icon-wrap {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  .item-icon {
+    width: 96rpx;
+    height: 96rpx;
+    display: block;
+  }
+}
+
+
+
+.item-content {
+  flex: 1;
+  min-width: 0;
+  margin-left: 24rpx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.title-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+}
+
+.item-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #1d2129;
+  line-height: 44rpx;
+}
+
+.item-badge {
+  background-color: #f53f3f;
+  color: #ffffff;
+  font-size: 22rpx;
+  font-weight: 500;
+  min-width: 32rpx;
+  height: 32rpx;
+  line-height: 32rpx;
+  border-radius: 16rpx;
+  text-align: center;
+  padding: 0 8rpx;
+  margin-left: 12rpx;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.item-desc {
+  font-size: 26rpx;
+  color: #86909c;
+  line-height: 36rpx;
+  margin-top: 8rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+</style>

pages/mine/mine.vue

@@ -293,12 +293,12 @@ export default {
                     url: 'https://static.tbmall.xin/static/mine/apply_purse.png',
                     path: '/pages/mine_package/mine_purse/mine_purse'
                 },
-                //  {
+                {
-                //   id: 6,
+                    id: 6,
-                //   title: "优惠券",
+                    title: "优惠券",
-                //   url: "https://static.tbmall.xin/static/mine/apply_prize.png",
+                    url: "https://static.tbmall.xin/static/mine/apply_prize.png",
-                //   path: "/pages/other_package/coupon/coupon",
+                    path: "/pages/other_package/coupon/coupon",
-                // },
+                },
                 {
                     id: 2,
                     title: '抽奖',
@@ -390,6 +390,12 @@ export default {
                     title: '财务',
                     url: 'https://static.tbmall.xin/static/mine/tool_cw.png',
                     path: '/pages/rwa_package/insights/finance'
+                },
+                {
+                    id: 13,
+                    title: '领券中心',
+                    url: 'https://static.tbmall.xin/static/mine/coupon.png',
+                    path: '/pages/other_package/get-coupon/get-coupon'
                 }
                 // {
                 //   id: 11,

pages/mine_package/apply_refund/apply_refund.vue

@@ -0,0 +1,882 @@
+<template>
+  <view class="apply-refund-container">
+    <!-- 顶部固定导航栏 -->
+    <view class="navbar-sticky-wrapper" :style="mpWarpStyle">
+      <view class="custom-navbar" :style="mpHeaderStyle">
+        <view class="nav-left" @click="goBack">
+          <view class="back-btn-box">
+            <text class="back-arrow">‹</text>
+          </view>
+        </view>
+        <view class="nav-title">申请退款</view>
+        <view class="nav-right"></view>
+      </view>
+    </view>
+
+    <scroll-view scroll-y class="content-scroll">
+      <view class="main-content">
+        <!-- 1. 商品信息卡片 -->
+        <view class="card product-card">
+          <view class="product-info-row">
+            <image :src="productImage" class="product-img" mode="aspectFill" />
+            <view class="product-details">
+              <view class="product-header">
+                <text class="product-title">{{ productTitle }}</text>
+                <text class="product-price">¥{{ productPrice }}</text>
+              </view>
+              <view class="product-spec-row">
+                <text class="product-spec">规格：{{ productSpec }}</text>
+                <text class="product-num">x {{ productNum }}</text>
+              </view>
+            </view>
+          </view>
+          <view class="product-total-row">
+            <text class="product-total-text">共{{ productNum }}件，合计¥{{ totalPrice }}</text>
+          </view>
+        </view>
+
+        <!-- 2. 退款选项卡片 (退款原因 & 退款金额) -->
+        <view class="card form-card">
+          <!-- 退款原因 -->
+          <view class="form-row" @click="openReasonPopup">
+            <view class="form-label">
+              <text class="required-asterisk">*</text>
+              <text class="label-text">退款原因</text>
+            </view>
+            <view class="select-trigger">
+              <text :class="['select-value', { 'placeholder': !selectedReason }]">
+                {{ selectedReason ? selectedReason.name : '请选择' }}
+              </text>
+              <view class="dashed-arrow-box">
+                <text class="arrow-icon">›</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="row-divider"></view>
+
+          <!-- 退款金额 -->
+          <view class="form-row">
+            <view class="form-label">
+              <text class="label-text">退款金额</text>
+            </view>
+            <view class="amount-value">
+              ¥{{ totalPrice }}
+            </view>
+          </view>
+        </view>
+
+        <!-- 3. 上传凭证卡片 -->
+        <view class="card form-card">
+          <view class="section-title-row">
+            <text class="section-title">上传凭证</text>
+            <text class="section-sub">(选填)</text>
+          </view>
+          <view class="upload-container">
+            <!-- 已上传图片列表 -->
+            <view class="upload-img-item" v-for="(img, index) in fileList" :key="index">
+              <image :src="img" class="upload-img" mode="aspectFill" @click="previewImg(index)"></image>
+              <view class="delete-icon" @click.stop="deleteImg(index)">×</view>
+            </view>
+            <!-- 上传按钮 -->
+            <view class="upload-btn-box" v-if="fileList.length < 6" @click="chooseImage">
+              <text class="plus-icon">+</text>
+              <text class="upload-text">上传图片</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 4. 退款描述卡片 -->
+        <view class="card form-card">
+          <view class="section-title-row">
+            <text class="section-title">退款描述</text>
+            <text class="section-sub">(选填)</text>
+          </view>
+          <view class="textarea-box">
+            <textarea class="desc-input" v-model="remark" placeholder="补充描述，有助于更好的处理售后问题"
+              placeholder-style="color: #CCCCCC; font-size: 28rpx;" maxlength="100" />
+            <view class="char-counter">已输入{{ remark.length }}/100</view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部间距防止按键遮挡 -->
+      <view class="bottom-spacer"></view>
+    </scroll-view>
+
+    <!-- 底部固定提交按钮 -->
+    <view class="fixed-bottom-bar">
+      <button class="submit-btn" @click="submitRefund">提交</button>
+    </view>
+
+    <!-- 退款原因 弹窗 Modal (图二) -->
+    <up-popup :show="showReasonPopup" mode="bottom" :round="16" :closeable="false" @close="showReasonPopup = false">
+      <view class="reason-popup-content">
+        <!-- 弹窗头部 -->
+        <view class="popup-header">
+          <text class="popup-title">退款原因</text>
+          <view class="popup-close-box" @click="showReasonPopup = false">
+            <text class="popup-close-icon">×</text>
+          </view>
+        </view>
+
+        <!-- 原因列表 -->
+        <scroll-view scroll-y class="reason-list-scroll">
+          <view class="reason-list">
+            <view v-for="(item, index) in reasonList" :key="item.id || index" class="reason-item-row"
+              @click="selectReasonItem(item)">
+              <text class="reason-item-name">{{ item.name }}</text>
+              <view :class="['radio-circle', { checked: tempSelectedReason && tempSelectedReason.id === item.id }]">
+                <text v-if="tempSelectedReason && tempSelectedReason.id === item.id" class="check-mark">✓</text>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+
+        <!-- 弹窗底部提交按钮 -->
+        <view class="popup-bottom-bar">
+          <button class="popup-submit-btn" @click="confirmReason">提交</button>
+        </view>
+      </view>
+    </up-popup>
+  </view>
+</template>
+
+<script>
+import { RETURN_REASON_LIST } from "@/pages/mine_package/mine_order/emun/index.js";
+import { getDetail, afterSaleApply } from "@/api/order.js";
+import { BASE_URL, Authorization } from '@/utils/config.js';
+import { getStorageFun, TOKEN_NAME } from '@/utils/auth.js';
+import { uploadImg } from '@/api/common.js';
+import { IMG_TYPE } from '@/utils/enumUtils.js';
+
+export default {
+  data() {
+    return {
+      orderInfo: {},
+      mpWarpStyle: {},
+      mpHeaderStyle: {},
+
+      selectedReason: null,
+      tempSelectedReason: null,
+      showReasonPopup: false,
+      remark: "",
+      fileList: [],
+
+      reasonList: RETURN_REASON_LIST
+    };
+  },
+  computed: {
+    firstItem() {
+      if (this.orderInfo && Array.isArray(this.orderInfo.items) && this.orderInfo.items.length > 0) {
+        return this.orderInfo.items[0];
+      }
+      return {};
+    },
+    productTitle() {
+      return this.firstItem.title || this.orderInfo.title || "";
+    },
+    productPrice() {
+      return this.firstItem.goodsAmount || this.orderInfo.sumAmount || "0";
+    },
+    productSpec() {
+      return this.firstItem.goodsSpece || this.orderInfo.goodsSpece || "";
+    },
+    productNum() {
+      return this.firstItem.buyNum || this.orderInfo.buyNum || 1;
+    },
+    totalPrice() {
+      return this.orderInfo.sumAmount || "0";
+    },
+    productImage() {
+      return this.firstItem.mainGraph || this.orderInfo.mainGraph || "";
+    }
+  },
+  onLoad(options) {
+    // #ifdef MP-WEIXIN || MP
+    this.initMPHeader();
+    // #endif
+
+    let orderId = options ? options.id : null;
+
+    if (options && options.orderData) {
+      try {
+        this.orderInfo = JSON.parse(decodeURIComponent(options.orderData));
+        if (!orderId && this.orderInfo.id) {
+          orderId = this.orderInfo.id;
+        }
+      } catch (e) {
+        console.error("解析订单数据错误:", e);
+      }
+    }
+
+    if (orderId) {
+      this.fetchOrderDetail(orderId);
+    }
+  },
+  methods: {
+    async fetchOrderDetail(id) {
+      if (!id) return;
+      try {
+        const res = await getDetail({ id });
+        if (res && res.bizcode === 100 && res.data) {
+          this.orderInfo = res.data;
+        }
+      } catch (e) {
+        console.error("fetchOrderDetail error:", e);
+      }
+    },
+    initMPHeader() {
+      // #ifdef MP-WEIXIN || MP
+      try {
+        const menuButton = uni.getMenuButtonBoundingClientRect();
+        const systemInfo = uni.getSystemInfoSync();
+        if (menuButton && menuButton.top && menuButton.top > 0) {
+          const menuButtonHeight = menuButton.height || 32;
+          const menuButtonTop = menuButton.top;
+          const menuButtonLeft = menuButton.left;
+          const windowWidth = systemInfo.windowWidth;
+
+          this.mpWarpStyle = {
+            paddingTop: `${menuButtonTop}px`
+          };
+
+          this.mpHeaderStyle = {
+            height: `${menuButtonHeight}px`,
+            paddingRight: `${windowWidth - menuButtonLeft + 10}px`,
+            display: 'flex',
+            alignItems: 'center'
+          };
+        }
+      } catch (e) {
+        console.error("initMPHeader error:", e);
+      }
+      // #endif
+    },
+    goBack() {
+      uni.navigateBack({
+        fail: () => {
+          uni.switchTab({ url: '/pages/mine/mine' });
+        }
+      });
+    },
+    openReasonPopup() {
+      this.tempSelectedReason = this.selectedReason || (this.reasonList.length > 0 ? this.reasonList[0] : null);
+      this.showReasonPopup = true;
+    },
+    selectReasonItem(item) {
+      this.tempSelectedReason = item;
+    },
+    confirmReason() {
+      if (!this.tempSelectedReason) {
+        uni.showToast({ title: '请选择退款原因', icon: 'none' });
+        return;
+      }
+      this.selectedReason = this.tempSelectedReason;
+      this.showReasonPopup = false;
+    },
+    chooseImage() {
+      const that = this;
+      const count = 6 - this.fileList.length;
+      if (count <= 0) return;
+      uni.chooseImage({
+        count: count,
+        sizeType: ["original", "compressed"],
+        sourceType: ["album", "camera"],
+        success: (res) => {
+          if (res.tempFilePaths && res.tempFilePaths.length > 0) {
+            res.tempFilePaths.forEach((filePath) => {
+              that.uploadFile(filePath);
+            });
+          }
+        }
+      });
+    },
+    uploadFile(url) {
+      uni.showLoading({
+        title: "图片上传中..."
+      });
+      const that = this;
+      const token = getStorageFun(TOKEN_NAME);
+      uni.uploadFile({
+        url: BASE_URL + uploadImg,
+        filePath: url,
+        name: "file",
+        formData: {
+          type: IMG_TYPE.COMMON
+        },
+        header: {
+          Authorization: Authorization,
+          "HSM-AUTH": token ? token : ""
+        },
+        success: (uploadFileRes) => {
+          let data;
+          try {
+            data = JSON.parse(uploadFileRes.data);
+          } catch (e) {
+            data = uploadFileRes.data;
+          }
+          if (data && data.bizcode === 100) {
+            that.fileList.push(data.data.accessUrl);
+          } else {
+            uni.showToast({
+              title: (data && data.msg) || "图片上传失败",
+              icon: "none",
+              mask: true,
+              duration: 2000
+            });
+          }
+        },
+        fail: (uploadFileErr) => {
+          uni.showToast({
+            title: "图片上传失败",
+            icon: "none",
+            mask: true,
+            duration: 2000
+          });
+        },
+        complete: (res) => {
+          uni.hideLoading();
+        }
+      });
+    },
+    previewImg(index) {
+      uni.previewImage({
+        current: index,
+        urls: this.fileList
+      });
+    },
+    deleteImg(index) {
+      this.fileList.splice(index, 1);
+    },
+    async submitRefund() {
+      if (!this.selectedReason) {
+        uni.showToast({
+          title: '请选择退款原因',
+          icon: 'none'
+        });
+        return;
+      }
+
+      const params = {
+        id: this.orderInfo.id || 0,
+        itemIds: (this.orderInfo.items && this.orderInfo.items[0]) ? this.orderInfo.items[0].id : '',
+        reason: this.selectedReason.id,
+        remark: this.remark,
+        imgUrls: this.fileList.join(','),
+        type: this.orderInfo?.status === 2 ? 1 : (this.orderInfo?.status === 3 || this.orderInfo?.status === 4) ? 2 : 1
+      };
+      try {
+        uni.showLoading({ title: '提交中...' });
+        const res = await afterSaleApply(params);
+        uni.hideLoading();
+        if (res && res.bizcode === 100) {
+          uni.showToast({
+            title: '申请成功',
+            icon: 'success'
+          });
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 1500);
+        } else {
+          uni.showToast({
+            title: (res && res.msg) || '申请提交成功',
+            icon: 'success'
+          });
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 1500);
+        }
+      } catch (e) {
+        uni.hideLoading();
+        uni.showToast({
+          title: '申请已提交',
+          icon: 'success'
+        });
+        setTimeout(() => {
+          uni.navigateBack();
+        }, 1500);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.apply-refund-container {
+  min-height: 100vh;
+  background-color: #F6F7F9;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  /* 顶部固定导航栏包装器 */
+  .navbar-sticky-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background-color: #FFFFFF;
+    width: 100%;
+  }
+
+  /* 顶部导航栏 */
+  .custom-navbar {
+    height: 88rpx;
+    background-color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24rpx;
+    position: relative;
+    box-sizing: border-box;
+
+    .nav-left {
+      width: 60rpx;
+      display: flex;
+      align-items: center;
+
+      .back-btn-box {
+        width: 44rpx;
+        height: 44rpx;
+        border: 1rpx dashed #C8C9CC;
+        border-radius: 6rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .back-arrow {
+          font-size: 36rpx;
+          color: #333333;
+          line-height: 1;
+          margin-top: -4rpx;
+        }
+      }
+    }
+
+    .nav-title {
+      font-size: 34rpx;
+      font-weight: 600;
+      color: #1A1A1A;
+      text-align: center;
+      flex: 1;
+    }
+
+    .nav-right {
+      width: 60rpx;
+    }
+  }
+
+  /* 主滚动区域 */
+  .content-scroll {
+    flex: 1;
+    height: 0;
+  }
+
+  .main-content {
+    padding: 20rpx 24rpx;
+  }
+
+  /* 通用卡片容器 */
+  .card {
+    background-color: #FFFFFF;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    margin-bottom: 20rpx;
+  }
+
+  /* 1. 商品信息卡片 */
+  .product-card {
+    .product-info-row {
+      display: flex;
+      align-items: flex-start;
+
+      .product-img {
+        width: 140rpx;
+        height: 140rpx;
+        border-radius: 12rpx;
+        background-color: #F2F3F5;
+        flex-shrink: 0;
+        margin-right: 20rpx;
+      }
+
+      .product-details {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 140rpx;
+        overflow: hidden;
+
+        .product-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+
+          .product-title {
+            font-size: 28rpx;
+            font-weight: bold;
+            color: #111111;
+            line-height: 38rpx;
+            flex: 1;
+            margin-right: 16rpx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            word-break: break-all;
+          }
+
+          .product-price {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #111111;
+            flex-shrink: 0;
+          }
+        }
+
+        .product-spec-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 12rpx;
+
+          .product-spec {
+            font-size: 26rpx;
+            color: #999999;
+            flex: 1;
+            margin-right: 16rpx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            word-break: break-all;
+          }
+
+          .product-num {
+            font-size: 26rpx;
+            color: #999999;
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+
+    .product-total-row {
+      text-align: right;
+      margin-top: 20rpx;
+
+      .product-total-text {
+        font-size: 26rpx;
+        color: #999999;
+      }
+    }
+  }
+
+  /* 2. 表单卡片 (退款原因、金额、凭证、描述) */
+  .form-card {
+    .form-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 72rpx;
+
+      .form-label {
+        display: flex;
+        align-items: center;
+
+        .required-asterisk {
+          color: #FF4D4F;
+          font-size: 28rpx;
+          margin-right: 6rpx;
+        }
+
+        .label-text {
+          font-size: 28rpx;
+          color: #666666;
+        }
+      }
+
+      .select-trigger {
+        display: flex;
+        align-items: center;
+
+        .select-value {
+          font-size: 28rpx;
+          color: #333333;
+          margin-right: 12rpx;
+
+          &.placeholder {
+            color: #AAAAAA;
+          }
+        }
+
+        .dashed-arrow-box {
+          width: 32rpx;
+          height: 32rpx;
+          border: 1rpx dashed #C8C9CC;
+          border-radius: 4rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .arrow-icon {
+            font-size: 24rpx;
+            color: #999999;
+            line-height: 1;
+            margin-top: -2rpx;
+          }
+        }
+      }
+
+      .amount-value {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #111111;
+      }
+    }
+
+    .row-divider {
+      height: 1rpx;
+      background-color: #F2F3F5;
+      margin: 20rpx 0;
+    }
+
+    .section-title-row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20rpx;
+
+      .section-title {
+        font-size: 28rpx;
+        color: #333333;
+        font-weight: 500;
+      }
+
+      .section-sub {
+        font-size: 28rpx;
+        color: #999999;
+        margin-left: 8rpx;
+      }
+    }
+
+    /* 上传凭证 */
+    .upload-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20rpx;
+
+      .upload-img-item {
+        width: 160rpx;
+        height: 160rpx;
+        border-radius: 12rpx;
+        position: relative;
+        overflow: hidden;
+
+        .upload-img {
+          width: 100%;
+          height: 100%;
+        }
+
+        .delete-icon {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 36rpx;
+          height: 36rpx;
+          background: rgba(0, 0, 0, 0.5);
+          color: #FFFFFF;
+          font-size: 24rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-bottom-left-radius: 12rpx;
+        }
+      }
+
+      .upload-btn-box {
+        width: 160rpx;
+        height: 160rpx;
+        background-color: #F7F8FA;
+        border-radius: 12rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .plus-icon {
+          font-size: 48rpx;
+          color: #999999;
+          line-height: 1;
+          margin-bottom: 10rpx;
+          font-weight: 300;
+        }
+
+        .upload-text {
+          font-size: 24rpx;
+          color: #999999;
+        }
+      }
+    }
+
+    /* 退款描述 */
+    .textarea-box {
+      background-color: #F7F8FA;
+      border-radius: 12rpx;
+      padding: 20rpx;
+      position: relative;
+
+      .desc-input {
+        width: 100%;
+        height: 160rpx;
+        font-size: 28rpx;
+        color: #333333;
+      }
+
+      .char-counter {
+        text-align: right;
+        font-size: 24rpx;
+        color: #CCCCCC;
+        margin-top: 10rpx;
+      }
+    }
+  }
+
+  .bottom-spacer {
+    height: 140rpx;
+  }
+
+  /* 底部固定提交按钮 */
+  .fixed-bottom-bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #FFFFFF;
+    padding: 20rpx 32rpx;
+    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.03);
+    z-index: 100;
+
+    .submit-btn {
+      height: 90rpx;
+      line-height: 90rpx;
+      background-color: #7934F6;
+      border-radius: 16rpx;
+      color: #FFFFFF;
+      font-size: 32rpx;
+      font-weight: 500;
+      text-align: center;
+      border: none;
+
+      &::after {
+        border: none;
+      }
+    }
+  }
+}
+
+/* 图二: 退款原因 弹窗 */
+.reason-popup-content {
+  background-color: #FFFFFF;
+  padding: 30rpx 32rpx calc(30rpx + env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+
+  .popup-header {
+    position: relative;
+    text-align: center;
+    padding-bottom: 24rpx;
+
+    .popup-title {
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+
+    .popup-close-box {
+      position: absolute;
+      right: 0;
+      top: -4rpx;
+      width: 40rpx;
+      height: 40rpx;
+      border: 1rpx dashed #C8C9CC;
+      border-radius: 6rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .popup-close-icon {
+        font-size: 28rpx;
+        color: #666666;
+        line-height: 1;
+      }
+    }
+  }
+
+  .reason-list-scroll {
+    max-height: 55vh;
+
+    .reason-list {
+      padding: 10rpx 0;
+
+      .reason-item-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24rpx 0;
+
+        .reason-item-name {
+          font-size: 28rpx;
+          color: #333333;
+        }
+
+        .radio-circle {
+          width: 38rpx;
+          height: 38rpx;
+          border-radius: 50%;
+          border: 2rpx solid #DCDCDC;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &.checked {
+            background-color: #7934F6;
+            border-color: #7934F6;
+          }
+
+          .check-mark {
+            color: #FFFFFF;
+            font-size: 22rpx;
+            font-weight: bold;
+            line-height: 1;
+          }
+        }
+      }
+    }
+  }
+
+  .popup-bottom-bar {
+    padding-top: 20rpx;
+
+    .popup-submit-btn {
+      height: 88rpx;
+      line-height: 88rpx;
+      background-color: #7934F6;
+      border-radius: 16rpx;
+      color: #FFFFFF;
+      font-size: 32rpx;
+      font-weight: 500;
+      text-align: center;
+      border: none;
+
+      &::after {
+        border: none;
+      }
+    }
+  }
+}
+</style>

pages/mine_package/fill_express/fill_express.vue

@@ -0,0 +1,654 @@
+<template>
+  <view class="fill-express-container">
+    <!-- 顶部固定导航栏 -->
+    <view class="navbar-sticky-wrapper" :style="mpWarpStyle">
+      <view class="custom-navbar" :style="mpHeaderStyle">
+        <view class="nav-left" @click="goBack">
+          <view class="back-btn-box">
+            <text class="back-arrow">‹</text>
+          </view>
+        </view>
+        <view class="nav-title">填写物流</view>
+        <view class="nav-right"></view>
+      </view>
+    </view>
+
+    <scroll-view scroll-y class="content-scroll">
+      <view class="main-content">
+        <!-- 1. 商品信息卡片 -->
+        <view class="card product-card">
+          <view class="product-info-row">
+            <image :src="productImage" class="product-img" mode="aspectFill" />
+            <view class="product-details">
+              <view class="product-header">
+                <text class="product-title">{{ productTitle }}</text>
+                <text class="product-price">¥{{ productPrice }}</text>
+              </view>
+              <view class="product-spec-row">
+                <text class="product-spec">规格：{{ productSpec }}</text>
+                <text class="product-num">x {{ productNum }}</text>
+              </view>
+            </view>
+          </view>
+          <view class="product-total-row">
+            <text class="product-total-text">共{{ productNum }}件，合计¥{{ totalPrice }}</text>
+          </view>
+        </view>
+
+        <!-- 2. 退货信息卡片 -->
+        <view class="card form-card">
+          <view class="section-title-row">
+            <text class="section-title">退货信息</text>
+            <text class="section-sub-tip">(如无退货信息请联系客服人员)</text>
+          </view>
+
+          <!-- 联系人 -->
+          <view class="info-row">
+            <text class="info-label">联系人</text>
+            <text class="info-val">{{ sellerName }}</text>
+          </view>
+
+          <view class="row-divider"></view>
+
+          <!-- 手机号 -->
+          <view class="info-row">
+            <text class="info-label">手机号</text>
+            <text class="info-val">{{ sellerPhone }}</text>
+          </view>
+
+          <view class="row-divider"></view>
+
+          <!-- 退货地址 -->
+          <view class="info-row align-top">
+            <text class="info-label">退货地址</text>
+            <text class="info-val address-text">{{ sellerAddress }}</text>
+          </view>
+        </view>
+
+        <!-- 3. 物流信息卡片 -->
+        <view class="card form-card">
+          <view class="section-title-row">
+            <text class="section-title">物流信息</text>
+          </view>
+
+          <!-- 物流公司 -->
+          <view class="form-row" @click="openExpressPicker">
+            <view class="form-label">
+              <text class="required-asterisk">*</text>
+              <text class="label-text">物流公司</text>
+            </view>
+            <view class="select-trigger">
+              <text :class="['select-value', { 'placeholder': !expressName }]">
+                {{ expressName || '请选择' }}
+              </text>
+              <view class="dashed-arrow-box">
+                <text class="arrow-icon">›</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="row-divider"></view>
+
+          <!-- 物流单号 -->
+          <view class="form-row">
+            <view class="form-label">
+              <text class="required-asterisk">*</text>
+              <text class="label-text">物流单号</text>
+            </view>
+            <input class="form-input" type="text" v-model="expressNo" placeholder="请输入"
+              placeholder-style="color: #CCCCCC; font-size: 28rpx;" />
+          </view>
+
+          <view class="row-divider"></view>
+
+          <!-- 物流说明 -->
+          <view class="form-row">
+            <view class="form-label">
+              <text class="label-text">物流说明</text>
+            </view>
+            <input class="form-input" type="text" v-model="expressRemark" placeholder="这里展示后台设置的退货地址"
+              placeholder-style="color: #CCCCCC; font-size: 28rpx;" />
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部间距防止遮挡 -->
+      <view class="bottom-spacer"></view>
+    </scroll-view>
+
+    <!-- 底部固定提交按钮 -->
+    <view class="fixed-bottom-bar">
+      <button class="submit-btn" @click="submitLogistics">提交</button>
+    </view>
+
+    <!-- 快递公司选择器 Picker -->
+    <up-picker :show="expressShow" :columns="[expressList]" keyName="name" valueName="id" itemHeight="40"
+      @confirm="onExpressConfirm" @cancel="expressShow = false" @close="expressShow = false"></up-picker>
+  </view>
+</template>
+
+<script>
+import { afterSaleDetail, getExpressCompany, returnGoodsFeedback } from "@/api/order.js";
+
+export default {
+  data() {
+    return {
+      afterData: {},
+      mpWarpStyle: {},
+      mpHeaderStyle: {},
+
+      expressName: "",
+      expressId: "",
+      expressNo: "",
+      expressRemark: "",
+
+      expressList: [],
+      expressShow: false
+    };
+  },
+  computed: {
+    firstItem() {
+      if (this.afterData && Array.isArray(this.afterData.items) && this.afterData.items.length > 0) {
+        return this.afterData.items[0];
+      }
+      return {};
+    },
+    productTitle() {
+      return this.firstItem.title || this.afterData.title || "";
+    },
+    productPrice() {
+      return this.firstItem.goodsAmount || this.afterData.sumAmount || "0";
+    },
+    productSpec() {
+      return this.firstItem.goodsSpece || this.afterData.goodsSpece || "";
+    },
+    productNum() {
+      return this.afterData.buyNum || this.firstItem.buyNum || 1;
+    },
+    totalPrice() {
+      return this.afterData.refundAmount || this.afterData.sumAmount || "0";
+    },
+    productImage() {
+      return this.firstItem.mainGraph || this.afterData.mainGraph || "--";
+    },
+    sellerName() {
+      return this.afterData.name || "--";
+    },
+    sellerPhone() {
+      return this.afterData.phone || "--";
+    },
+    sellerAddress() {
+      return this.afterData.address || "--";
+    }
+  },
+  onLoad(options) {
+    // #ifdef MP-WEIXIN || MP
+    this.initMPHeader();
+    // #endif
+
+    let afterId = options ? (options.afterId || options.id) : null;
+
+    if (options && options.afterData) {
+      try {
+        this.afterData = JSON.parse(decodeURIComponent(options.afterData));
+        if (!afterId && (this.afterData.afterId || this.afterData.id)) {
+          afterId = this.afterData.afterId || this.afterData.id;
+        }
+        if (this.afterData.expressName) this.expressName = this.afterData.expressName;
+        if (this.afterData.expressId) this.expressId = this.afterData.expressId;
+        if (this.afterData.expressNo) this.expressNo = this.afterData.expressNo;
+      } catch (e) {
+        console.error("解析售后数据错误:", e);
+      }
+    }
+
+    if (afterId) {
+      this.fetchAfterDetail(afterId);
+    }
+
+    this.fetchExpressCompany();
+  },
+  methods: {
+    async fetchAfterDetail(afterId) {
+      if (!afterId) return;
+      try {
+        const res = await afterSaleDetail({ id: afterId });
+        if (res && res.bizcode === 100 && res.data) {
+          this.afterData = { ...this.afterData, ...res.data };
+          if (res.data.expressName) this.expressName = res.data.expressName;
+          if (res.data.expressId) this.expressId = res.data.expressId;
+          if (res.data.expressNo) this.expressNo = res.data.expressNo;
+        }
+      } catch (e) {
+        console.error("fetchAfterDetail error:", e);
+      }
+    },
+    initMPHeader() {
+      // #ifdef MP-WEIXIN || MP
+      try {
+        const menuButton = uni.getMenuButtonBoundingClientRect();
+        const systemInfo = uni.getSystemInfoSync();
+        if (menuButton && menuButton.top && menuButton.top > 0) {
+          const menuButtonHeight = menuButton.height || 32;
+          const menuButtonTop = menuButton.top;
+          const menuButtonLeft = menuButton.left;
+          const windowWidth = systemInfo.windowWidth;
+
+          this.mpWarpStyle = {
+            paddingTop: `${menuButtonTop}px`
+          };
+
+          this.mpHeaderStyle = {
+            height: `${menuButtonHeight}px`,
+            paddingRight: `${windowWidth - menuButtonLeft + 10}px`,
+            display: 'flex',
+            alignItems: 'center'
+          };
+        }
+      } catch (e) {
+        console.error("initMPHeader error:", e);
+      }
+      // #endif
+    },
+    goBack() {
+      uni.navigateBack({
+        fail: () => {
+          uni.switchTab({ url: '/pages/mine/mine' });
+        }
+      });
+    },
+    async fetchExpressCompany() {
+      try {
+        const res = await getExpressCompany();
+        if (res && res.data) {
+          this.expressList = res.data;
+        }
+      } catch (e) {
+        console.error("getExpressCompany error:", e);
+      }
+    },
+    openExpressPicker() {
+      this.expressShow = true;
+    },
+    onExpressConfirm(e) {
+      const val = e.value[0];
+      if (val) {
+        this.expressName = val.name;
+        this.expressId = val.id;
+      }
+      this.expressShow = false;
+    },
+    async submitLogistics() {
+      if (!this.expressName) {
+        uni.showToast({ title: '请选择物流公司', icon: 'none' });
+        return;
+      }
+      if (!this.expressNo) {
+        uni.showToast({ title: '请输入物流单号', icon: 'none' });
+        return;
+      }
+
+      const params = {
+        id: this.afterData.afterId || this.afterData.id,
+        expressNo: this.expressNo,
+        expressId: this.expressId,
+        remark: this.expressRemark
+      };
+
+      try {
+        uni.showLoading({ title: '提交中...' });
+        const res = await returnGoodsFeedback(params);
+        uni.hideLoading();
+        if (res && (res.bizcode === 100 || res.code === 200)) {
+          uni.showToast({ title: '提交成功', icon: 'success' });
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 1500);
+        } else {
+          uni.showToast({ title: (res && res.msg) || '提交成功', icon: 'success' });
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 1500);
+        }
+      } catch (e) {
+        uni.hideLoading();
+        uni.showToast({ title: '提交成功', icon: 'success' });
+        setTimeout(() => {
+          uni.navigateBack();
+        }, 1500);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.fill-express-container {
+  height: 100vh;
+  background-color: #F6F7F9;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  /* 顶部固定导航栏包装器 */
+  .navbar-sticky-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background-color: #FFFFFF;
+    width: 100%;
+  }
+
+  /* 顶部导航栏 */
+  .custom-navbar {
+    height: 88rpx;
+    background-color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24rpx;
+    position: relative;
+    box-sizing: border-box;
+
+    .nav-left {
+      width: 60rpx;
+      display: flex;
+      align-items: center;
+
+      .back-btn-box {
+        width: 44rpx;
+        height: 44rpx;
+        border: 1rpx dashed #C8C9CC;
+        border-radius: 6rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .back-arrow {
+          font-size: 36rpx;
+          color: #333333;
+          line-height: 1;
+          margin-top: -4rpx;
+        }
+      }
+    }
+
+    .nav-title {
+      font-size: 34rpx;
+      font-weight: 600;
+      color: #1A1A1A;
+      text-align: center;
+      flex: 1;
+    }
+
+    .nav-right {
+      width: 60rpx;
+    }
+  }
+
+  /* 主滚动区域 */
+  .content-scroll {
+    flex: 1;
+    height: 0;
+  }
+
+  .main-content {
+    padding: 20rpx 24rpx;
+  }
+
+  /* 通用卡片 */
+  .card {
+    background-color: #FFFFFF;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    margin-bottom: 20rpx;
+  }
+
+  /* 1. 商品信息卡片 */
+  .product-card {
+    .product-info-row {
+      display: flex;
+      align-items: flex-start;
+
+      .product-img {
+        width: 140rpx;
+        height: 140rpx;
+        border-radius: 12rpx;
+        background-color: #F2F3F5;
+        flex-shrink: 0;
+        margin-right: 20rpx;
+      }
+
+      .product-details {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 140rpx;
+        overflow: hidden;
+
+        .product-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+
+          .product-title {
+            font-size: 28rpx;
+            font-weight: bold;
+            color: #111111;
+            line-height: 38rpx;
+            flex: 1;
+            margin-right: 16rpx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            word-break: break-all;
+          }
+
+          .product-price {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #111111;
+            flex-shrink: 0;
+          }
+        }
+
+        .product-spec-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 12rpx;
+
+          .product-spec {
+            font-size: 26rpx;
+            color: #999999;
+            flex: 1;
+            margin-right: 16rpx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            word-break: break-all;
+          }
+
+          .product-num {
+            font-size: 26rpx;
+            color: #999999;
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+
+    .product-total-row {
+      text-align: right;
+      margin-top: 20rpx;
+
+      .product-total-text {
+        font-size: 26rpx;
+        color: #999999;
+      }
+    }
+  }
+
+  /* 2. 表单卡片 (退货信息 & 物流信息) */
+  .form-card {
+    .section-title-row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 24rpx;
+
+      .section-title {
+        font-size: 28rpx;
+        color: #333333;
+        font-weight: bold;
+      }
+
+      .section-sub-tip {
+        font-size: 24rpx;
+        color: #999999;
+        font-weight: normal;
+        margin-left: 10rpx;
+      }
+    }
+
+    .info-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 72rpx;
+
+      &.align-top {
+        align-items: flex-start;
+      }
+
+      .info-label {
+        font-size: 28rpx;
+        color: #666666;
+        flex-shrink: 0;
+        width: 160rpx;
+      }
+
+      .info-val {
+        font-size: 28rpx;
+        color: #333333;
+        font-weight: 500;
+        text-align: right;
+        flex: 1;
+
+        &.address-text {
+          line-height: 38rpx;
+          word-break: break-all;
+        }
+      }
+    }
+
+    .form-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 72rpx;
+
+      .form-label {
+        display: flex;
+        align-items: center;
+        width: 180rpx;
+
+        .required-asterisk {
+          color: #FF4D4F;
+          font-size: 28rpx;
+          margin-right: 6rpx;
+        }
+
+        .label-text {
+          font-size: 28rpx;
+          color: #666666;
+        }
+      }
+
+      .select-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex: 1;
+
+        .select-value {
+          font-size: 28rpx;
+          color: #333333;
+          margin-right: 12rpx;
+
+          &.placeholder {
+            color: #AAAAAA;
+          }
+        }
+
+        .dashed-arrow-box {
+          width: 32rpx;
+          height: 32rpx;
+          border: 1rpx dashed #C8C9CC;
+          border-radius: 4rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .arrow-icon {
+            font-size: 24rpx;
+            color: #999999;
+            line-height: 1;
+            margin-top: -2rpx;
+          }
+        }
+      }
+
+      .form-input {
+        flex: 1;
+        text-align: right;
+        font-size: 28rpx;
+        color: #333333;
+      }
+    }
+
+    .row-divider {
+      height: 1rpx;
+      background-color: #F2F3F5;
+      margin: 16rpx 0;
+    }
+  }
+
+  .bottom-spacer {
+    height: 140rpx;
+  }
+
+  /* 底部固定提交按钮 */
+  .fixed-bottom-bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #FFFFFF;
+    padding: 20rpx 32rpx;
+    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.03);
+    z-index: 100;
+
+    .submit-btn {
+      height: 90rpx;
+      line-height: 90rpx;
+      background-color: #7934F6;
+      border-radius: 16rpx;
+      color: #FFFFFF;
+      font-size: 32rpx;
+      font-weight: 500;
+      text-align: center;
+      border: none;
+
+      &::after {
+        border: none;
+      }
+    }
+  }
+}
+</style>

pages/mine_package/mine_order/after-sales/refund-popup.vue

@@ -33,7 +33,7 @@
         </view>
       </view>
 
-      <view class="card_list" v-if="product.status == 8">
+      <view class="card_list" v-if="product.status == 8 || product.status == 4">
         <view class="list_left">未通过原因</view>
         <view>
           {{ product.auditRemark || "--" }}
@@ -59,6 +59,11 @@
           <input class="input-express" type="text" :disabled="status != 2" placeholder="请填写快递单号"
             v-model="product.expressNo" />
         </view>
+        <view class="card_list">
+          <view class="list_left">物流说明</view>
+          <view>{{ product.expressRemark || "--" }}</view>
+        </view>
+
       </view>
     </scroll-view>
 
@@ -301,7 +306,7 @@ export default {
       } else if (this.status == 3) {
         return "您已成功发起退货/退款申请，请耐心等待处理";
       } else if (this.status == 4) {
-        return "退款申请失败";
+        return "退货申请失败";
       } else if (this.status == 5) {
         return "退款成功";
       } else if (this.status == 6) {

pages/mine_package/mine_order/mine_order.vue

@@ -99,7 +99,7 @@
               <view>共{{ item.buyNum }}件,合计￥{{ item.sumAmount }}</view>
             </view> -->
             <view class="collect_msg" v-if="item.buyDeductionValue">共{{ item.buyNum }}件,合计数字积分{{ item.buyDeductionValue
-            }}
+              }}
               +￥{{ item.sumAmount }}</view>
             <view class="collect_msg" v-if="!item.buyDeductionValue">运费:￥{{ item.postage }},商品总价:￥{{ item.sumAmount }}
             </view>
@@ -135,8 +135,8 @@
 
               <!-- 修改地址按钮 (待发货/待收货状态) -->
               <view class="operate_comm operate_but_3" v-if="
-                ([MINE_ORDER_TYPE.UNSHIPPED, MINE_ORDER_TYPE.NOT_RECEIVE].includes(form.type) ||
+                ([MINE_ORDER_TYPE.UNSHIPPED].includes(form.type) ||
-                  [ORDER_TYPE.UNSHIPPED, ORDER_TYPE.NOT_RECEIVE].includes(item.status)) && item.modifyShippingAddressStatus == 0
+                  [ORDER_TYPE.UNSHIPPED].includes(item.status)) && item.modifyShippingAddressStatus == 0
               " @click="changeOrderAddress(item)">
                 修改地址
               </view>
@@ -153,7 +153,7 @@
                 'operate_comm',
                 'operate_but_1'
               ]"
-                v-if="(!item.isAfter && form.type !== MINE_ORDER_TYPE.UNPAID && form.type !== MINE_ORDER_TYPE.AFTER_SALE && item.status !== 5) || item.isAfterOpen"
+                v-if="!item.isAfter && form.type !== MINE_ORDER_TYPE.UNPAID && form.type !== MINE_ORDER_TYPE.AFTER_SALE && item.status !== 5"
                 @click="onSaleAfter(item)">
                 申请售后
               </view>
@@ -223,7 +223,8 @@
             联系售后
             <text class="after-sales-tabs-text">荐</text>
           </view>
-          <view :class="['after-sales-tabs-item', { active: activeIndex === 1 }]" @click="activeIndex = 1">退货退款</view>
+          <view :class="['after-sales-tabs-item', { active: activeIndex === 1 }]" @click="toApplyRefundPage">退货/退款
+          </view>
         </view>
 
         <view class="content_" v-if="activeIndex === 0">
@@ -417,6 +418,7 @@ export default {
       flowId: null,
       signUrl: null,
       downShow: false,
+      tipsShow: false,
       selectItem: null,
       userInfo: null,
       search: "",
@@ -574,18 +576,26 @@ export default {
           this.form.type == MINE_ORDER_TYPE.UNSHIPPED ? 1 : 2;
       }
     },
+    toApplyRefundPage() {
+      this.activeIndex = 1;
+      this.afterShow = false;
+      const orderId = this.aftterSalesProduct ? this.aftterSalesProduct.id : '';
+      uni.navigateTo({
+        url: `/pages/mine_package/apply_refund/apply_refund?id=${orderId}&orderData=${encodeURIComponent(JSON.stringify(this.aftterSalesProduct || {}))}`
+      });
+    },
     // 售后订单详情
     async onAfterSaleDetail(item) {
-      // if (item.status === 8) {
-      //   this.$refs.uToastRef.show({
-      //     type: "success",
-      //     message: "订单已作废",
-      //   });
-      //   return;
-      // }
       const { bizcode, data } = await afterSaleDetail({ id: item.afterId });
       if (bizcode == 100) {
         this.aftterSalesProduct = { ...data, ...{ afterId: item.afterId, status: item.status } };
+        console.log("售后订单详情", this.aftterSalesProduct);
+        if (this.aftterSalesProduct.afterType == 2 && this.aftterSalesProduct.status == 1) {
+          uni.navigateTo({
+            url: `/pages/mine_package/fill_express/fill_express?afterData=${encodeURIComponent(JSON.stringify(this.aftterSalesProduct))}`
+          });
+          return;
+        }
         this.salesServer = 2;
         this.afterShow = true;
       }

pages/order_package/order_submit/coupon-dialog.vue

@@ -2,10 +2,11 @@
   <view class="content">
     <up-popup 
       :show="show" 
+      mode="bottom" 
       :round="20" 
-      :closeOnClickOverlay="false"
+      :closeOnClickOverlay="true" 
       :closeable="true" 
-      :safeAreaInsetBottom="false"
+      :safeAreaInsetBottom="true"
       @close="handleClose"
     >
       <view class="coupon-popup">
@@ -14,13 +15,13 @@
           <text class="title">选择优惠券</text>
         </view>
 
-        <!-- 固定的切换标签 -->
+        <!-- 固定的切换标签 (全部/可使用/不可用) -->
         <view class="tab-container">
           <view 
             v-for="(tab, index) in tabs" 
             :key="index" 
             :class="['tab-item', { active: activeTab === index }]"
-            @click="activeTab = index"
+            @click="switchTab(index)"
           >
             <text class="tab-text">{{ tab.name }}</text>
             <view class="active-line" v-if="activeTab === index"></view>
@@ -28,26 +29,22 @@
         </view>
 
         <!-- 可上下滚动的优惠券列表区域 -->
-        <scroll-view
+        <scroll-view class="coupon-scroll" scroll-y :enhanced="true" :show-scrollbar="false">
-          class="coupon-scroll"
+          <view class="coupon-list" v-if="displayCoupons.length > 0">
-          scroll-y
-          :enhanced="true"
-          :show-scrollbar="false"
-        >
-          <view class="coupon-list">
             <view 
+              v-for="(coupon, index) in displayCoupons" 
+              :key="coupon.couponUserId || coupon.id || coupon.templateId || index"
               class="coupon-card"
-              v-for="(coupon, index) in filteredCoupons"
+              :class="{ 'card-disabled': !isAvailable(coupon), 'card-selected': isSelected(coupon) }"
-              :key="index"
+              @click="isAvailable(coupon) && toggleSelect(coupon)"
-              :class="{ 'disabled': coupon.status === 'expired' }"
             >
               <!-- 左侧：金额与门槛 -->
               <view class="card-left">
                 <view class="price-box">
                   <text class="currency">¥</text>
-                  <text class="amount">{{ coupon.amount }}</text>
+                  <text class="amount">{{ getDiscountAmount(coupon) }}</text>
                 </view>
-                <text class="condition">{{ coupon.condition }}</text>
+                <text class="condition">{{ getThresholdText(coupon) }}</text>
               </view>
 
               <!-- 带有上下半圆凹槽的虚线分割线 -->
@@ -57,29 +54,49 @@
                 <view class="notch bottom-notch"></view>
               </view>
 
-              <!-- 右侧：详细内容 -->
+              <!-- 右侧：详细内容与单选框 -->
               <view class="card-right">
                 <view class="info-content">
-                  <view class="title">{{ coupon.title }}</view>
+                  <view class="coupon-title">{{ coupon.title || '优惠券' }}</view>
-                  <view class="description">{{ coupon.description }}</view>
+                  <view class="tag-row">
-                  
+                    <text class="coupon-tag" :class="{ 'tag-disabled': !isAvailable(coupon) }">
-                  <!-- 状态/倒计时文本 -->
+                      {{ getTagText(coupon) }}
-                  <view v-if="coupon.status === 'active'" class="countdown">
+                    </text>
-                    仅剩 {{ coupon.timeLeft }}
+                    <text class="coupon-scope">{{ getScopeText(coupon) }}</text>
                   </view>
-                  <view v-else class="expired-text">
+                  <view class="coupon-validity">{{ getValidityText(coupon) }}</view>
-                    已失效
+                  <view class="unavailable-reason" v-if="!isAvailable(coupon)">
+                    {{ getUnavailableReason(coupon) }}
                   </view>
                 </view>
 
-                <!-- 按钮：仅在有效状态下显示 -->
+                <!-- 右侧操作区：可使用状态下展示单选框 (Radio Button) -->
-                <view v-if="coupon.status === 'active'" class="use-btn" @click="useCoupon(coupon)">
+                <view class="action-box">
-                  使用
+                  <view v-if="isAvailable(coupon)" class="radio-wrap" @click.stop="toggleSelect(coupon)">
+                    <view class="radio-circle" :class="{ 'checked': isSelected(coupon) }">
+                      <text class="check-icon" v-if="isSelected(coupon)">✓</text>
+                    </view>
+                  </view>
+                  <view v-else class="disabled-tag-text">
+                    不可用
+                  </view>
                 </view>
               </view>
             </view>
           </view>
+
+          <!-- 列表为空的缺省视图 -->
+          <view class="empty-wrap" v-else-if="!isLoading">
+            <text class="empty-text">暂无相关优惠券</text>
+          </view>
         </scroll-view>
+
+        <!-- 底部不使用优惠券按钮 (方便取消选择) -->
+        <view class="popup-footer" v-if="coupons && coupons.length > 0">
+          <view class="no-use-btn" @click="noUseCoupon">
+            不使用优惠券
+          </view>
+        </view>
       </view>
     </up-popup>
   </view>
@@ -93,55 +110,131 @@ export default {
       type: Boolean,
       default: false,
     },
+    goodsId: {
+      type: [Number, String],
+      default: 0,
+    },
+    coupons: {
+      type: Array,
+      default: () => [],
+    },
+    orderAmount: {
+      type: [Number, String],
+      default: 0,
+    },
+    selectedCoupon: {
+      type: Object,
+      default: () => null,
+    },
   },
   data() {
     return {
       activeTab: 0,
       tabs: [
-        { name: "全部", value: "all" },
+        { name: "全部", value: "" },
-        { name: "可使用", value: "active" },
+        { name: "可使用", value: 1 },
-        { name: "已失效", value: "expired" },
+        { name: "不可用", value: 2 },
-      ],
-      coupons: [
-        {
-          amount: 12,
-          condition: "无门槛",
-          title: "限时秒杀优惠券",
-          description: "云南白药牙膏儿膏儿膏儿...",
-          timeLeft: "14:20:55",
-          status: "active"
-        },
-        {
-          amount: 12,
-          condition: "无门槛",
-          title: "限时秒杀优惠券",
-          description: "云南白药牙膏儿膏儿膏儿...",
-          timeLeft: "14:20:55",
-          status: "active"
-        },
       ],
+      isLoading: false,
     };
   },
   computed: {
-    filteredCoupons() {
+    displayCoupons() {
-      if (this.activeTab === 0) {
+      if (this.activeTab === 1) {
-        return this.coupons;
+        return this.coupons.filter((coupon) => this.isAvailable(coupon));
-      } else if (this.activeTab === 1) {
-        return this.coupons.filter(c => c.status === 'active');
-      } else if (this.activeTab === 2) {
-        return [];
-      } else {
-        return this.coupons.filter(c => c.status === 'expired');
       }
-    }
+      if (this.activeTab === 2) {
+        return this.coupons.filter((coupon) => !this.isAvailable(coupon));
+      }
+      return this.coupons;
+    },
   },
   methods: {
+    switchTab(index) {
+      this.activeTab = index;
+    },
+    isAvailable(coupon) {
+      if (coupon.canUse === false) return false;
+      if (coupon.available === false) return false;
+      if (coupon.receiveStatus === 2) return false;
+      if (coupon.status === 2 || coupon.status === 3 || coupon.status === 4) return false;
+      return Number(this.orderAmount || 0) >= Number(coupon.thresholdAmount || 0);
+    },
+    isSelected(coupon) {
+      if (!this.selectedCoupon) return false;
+      const curId = coupon.couponUserId || coupon.id || coupon.templateId;
+      const selId = this.selectedCoupon.couponUserId || this.selectedCoupon.id || this.selectedCoupon.templateId;
+      return curId && selId && String(curId) === String(selId);
+    },
+    toggleSelect(coupon) {
+      if (this.isSelected(coupon)) {
+        this.$emit("select", null);
+      } else {
+        this.$emit("select", coupon);
+      }
+      this.handleClose();
+    },
+    noUseCoupon() {
+      this.$emit("select", null);
+      this.handleClose();
+    },
     handleClose() {
       this.$emit("close");
     },
-    useCoupon(coupon) {
+    // 格式化辅助函数
-      this.$emit("select", coupon);
+    getDiscountAmount(coupon) {
-      this.$emit("close");
+      return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
+    },
+    getThresholdText(coupon) {
+      const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
+      if (threshold === 0) {
+        return "无门槛";
+      }
+      return `满${threshold}元可用`;
+    },
+    getTagText(coupon) {
+      if (coupon.scopeType === 1) return "通用券";
+      if (coupon.scopeType === 2) return "商品券";
+      if (coupon.scopeType === 3 || coupon.scopeType === 4) return "品类券";
+      if (coupon.scopeText && coupon.scopeText.includes("通用")) return "通用券";
+      return "通用券";
+    },
+    getScopeText(coupon) {
+      if (coupon.scopeText) return coupon.scopeText;
+      if (coupon.scopeType === 1) return "所有商品可用";
+      if (coupon.scopeType === 2) return "指定商品可用";
+      if (coupon.scopeType === 3) return "指定类目可用";
+      if (coupon.scopeType === 4) return "指定专区商品可用";
+      return "所有商品可用";
+    },
+    getValidityText(coupon) {
+      if (coupon.useEndTime) {
+        return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
+      }
+      if (coupon.endTime) {
+        return `有效期至 ${this.formatTime(coupon.endTime)}`;
+      }
+      if (coupon.validDays && coupon.validDays > 0) {
+        return `领取之日起${coupon.validDays}天内有效`;
+      }
+      return "长期有效";
+    },
+    getUnavailableReason(coupon) {
+      const threshold = Number(coupon.thresholdAmount || 0);
+      if (Number(this.orderAmount || 0) < threshold) {
+        return `订单金额未满${threshold}元`;
+      }
+      return coupon.unavailableReason || "该优惠券不适用于当前订单";
+    },
+    formatTime(time) {
+      if (!time) return "";
+      if (typeof time === "string" && time.includes("-")) return time;
+      const date = new Date(Number(time));
+      if (isNaN(date.getTime())) return String(time);
+      const y = date.getFullYear();
+      const m = String(date.getMonth() + 1).padStart(2, "0");
+      const d = String(date.getDate()).padStart(2, "0");
+      return `${y}-${m}-${d}`;
     },
   },
 };
@@ -149,11 +242,12 @@ export default {
 
 <style lang="scss" scoped>
 .coupon-popup {
-  height: 85vh;
+  height: 75vh;
-  background-color: #f6f6f6;
+  background-color: #f7f8fa;
-  border-radius: 20rpx 20rpx 0 0;
+  border-radius: 24rpx 24rpx 0 0;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .popup-header {
@@ -161,10 +255,9 @@ export default {
   font-size: 32rpx;
   background-color: #ffffff;
   color: #333333;
-  font-weight: 500;
+  font-weight: bold;
-  padding: 30rpx 0;
+  padding: 30rpx 0 20rpx 0;
   position: relative;
-  border-radius: 20rpx 20rpx 0 0;
 }
 
 .tab-container {
@@ -173,9 +266,10 @@ export default {
   background-color: #ffffff;
   height: 88rpx;
   align-items: center;
-  padding-left: 28rpx;
+  padding-left: 32rpx;
   box-sizing: border-box;
-  border-top: 2rpx solid #f6f6f6;
+  border-top: 1rpx solid #f6f6f6;
+  border-bottom: 1rpx solid #f0f0f0;
 
   .tab-item {
     margin-right: 48rpx;
@@ -189,24 +283,24 @@ export default {
 
     .tab-text {
       font-size: 28rpx;
-      color: #7f7f7f;
+      color: #666666;
-      transition: all 0.2s ease;
+      transition: color 0.2s ease;
     }
 
     &.active {
       .tab-text {
-        color: #7A35F6;
+        color: #7a35f6;
         font-weight: bold;
       }
     }
 
     .active-line {
       position: absolute;
-      bottom: 4rpx;
+      bottom: 6rpx;
       width: 44rpx;
-      height: 4rpx;
+      height: 6rpx;
-      background-color: #7A35F6;
+      background-color: #7a35f6;
-      border-radius: 2rpx;
+      border-radius: 3rpx;
     }
   }
 }
@@ -214,170 +308,267 @@ export default {
 .coupon-scroll {
   flex: 1;
   height: 0;
-  overflow: hidden;
+  padding: 24rpx 24rpx 0 24rpx;
+  box-sizing: border-box;
 }
 
 .coupon-list {
-  padding: 28rpx 28rpx;
-  box-sizing: border-box;
   display: flex;
-  background-color: #ffffff;
   flex-direction: column;
-  gap: 32rpx;
+  padding-bottom: 30rpx;
+}
 
-  .coupon-card {
+/* 高保真优惠券卡片样式 */
-    background: rgba(102,102,102,0.06);
+.coupon-card {
-    border-radius: 16rpx;
+  position: relative;
-    display: flex;
+  display: flex;
-    height: 196rpx;
+  align-items: center;
-    position: relative;
+  background: rgba(253, 28, 36, 0.06);
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease;
+
+  &.card-selected {
+    /* 不加外边框 */
+  }
+
+  &.card-disabled {
+    background: #f5f5f5 !important;
+    border-color: transparent !important;
 
     .card-left {
-      width: 190rpx;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-
       .price-box {
-        display: flex;
+        color: #a0a0a0 !important;
-        align-items: flex-end;
-        color: #ff1224;
-        font-weight: bold;
-        margin-bottom: 10rpx;
-
-        .currency {
-          font-size: 32rpx;
-          margin-right: 2rpx;
-        }
-
-        .amount {
-          font-size: 64rpx;
-          line-height: 64rpx;
-        }
       }
-
       .condition {
-        font-size: 24rpx;
+        color: #999999 !important;
-        color: #ff1224;
-        margin-top: 10rpx;
       }
     }
 
-    .divider-wrapper {
+    .coupon-title {
-      width: 2rpx;
+      color: #333333 !important;
-      position: relative;
-      margin: 10rpx 0;
-      display: flex;
-      justify-content: center;
-
-      .divider-line {
-        width: 0;
-        height: 100%;
-        border-left: 2rpx dashed rgba(253,28,36,0.3);
-      }
-
-      .notch {
-        position: absolute;
-        width: 16rpx;
-        height: 16rpx;
-        background-color: #f7f8fa;
-        border-radius: 50%;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .top-notch {
-        top: -18rpx;
-      }
-      .bottom-notch {
-        bottom: -18rpx;
-      }
     }
+  }
 
-    .card-right {
+  .card-left {
-      flex: 1;
+    width: 170rpx;
-      padding: 26rpx 24rpx 24rpx 36rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24rpx 0;
+    flex-shrink: 0;
+
+    .price-box {
       display: flex;
-      justify-content: space-between;
+      align-items: baseline;
-      align-items: center;
+      color: #ff2442;
-      box-sizing: border-box;
 
-      .info-content {
+      .currency {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        flex: 1;
-        overflow: hidden;
-
-        .title {
-          font-size: 36rpx;
-          color: #2c2c2c;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .description {
-          font-size: 28rpx;
-          color: #6a6a6a;
-          margin-top: 8rpx;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .countdown {
-          font-size: 24rpx;
-          color: #ff5260;
-          margin-top: 14rpx;
-        }
-      }
-
-      .use-btn {
-        width: 116rpx;
-        height: 56rpx;
-        background-color: #FD1C24;
-        color: #ffffff;
         font-size: 28rpx;
-        border-radius: 8rpx;
+        font-weight: bold;
+        margin-right: 2rpx;
+      }
+
+      .amount {
+        font-size: 60rpx;
+        font-weight: 700;
+        line-height: 1;
+      }
+    }
+
+    .condition {
+      font-size: 24rpx;
+      color: #ff2442;
+      margin-top: 10rpx;
+      font-weight: 500;
+    }
+  }
+
+  .divider-wrapper {
+    position: relative;
+    width: 2rpx;
+    align-self: stretch;
+
+    .divider-line {
+      height: 100%;
+      border-left: 2rpx dashed #fca5a5;
+    }
+
+    .notch {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 24rpx;
+      height: 24rpx;
+      background-color: #f7f8fa;
+      border-radius: 50%;
+      z-index: 10;
+    }
+
+    .top-notch {
+      top: -12rpx;
+    }
+
+    .bottom-notch {
+      bottom: -12rpx;
+    }
+  }
+
+  .card-disabled .divider-line {
+    border-left: 2rpx dashed #dddddd !important;
+  }
+
+  .card-right {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20rpx 20rpx 20rpx 24rpx;
+
+    .info-content {
+      flex: 1;
+      min-width: 0;
+      margin-right: 16rpx;
+
+      .coupon-title {
+        font-size: 30rpx;
+        font-weight: bold;
+        color: #1a1a1a;
+        margin-bottom: 10rpx;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .tag-row {
         display: flex;
         align-items: center;
-        justify-content: center;
+        margin-bottom: 10rpx;
-        flex-shrink: 0;
+        white-space: nowrap;
-        margin-left: 16rpx;
-        font-weight: 500;
 
-        &:active {
+        .coupon-tag {
-          opacity: 0.8;
+          display: inline-block;
+          font-size: 20rpx;
+          color: #ff2442;
+          background: #ffe4e6;
+          border: 1px solid #ff99a4;
+          border-radius: 6rpx;
+          padding: 2rpx 10rpx;
+          margin-right: 10rpx;
+          line-height: 1.2;
+          font-weight: 500;
+          flex-shrink: 0;
+          white-space: nowrap;
+
+          &.tag-disabled {
+            color: #888888 !important;
+            background: #eeeeee !important;
+            border: 1px solid #cccccc !important;
+          }
         }
+
+        .coupon-scope {
+          font-size: 22rpx;
+          color: #666666;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .coupon-validity {
+        font-size: 22rpx;
+        color: #999999;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .unavailable-reason {
+        font-size: 20rpx;
+        color: #ff4d4f;
+        margin-top: 6rpx;
       }
     }
 
-    &.disabled {
+    .action-box {
-      background-color: #f4f4f4;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-right: 8rpx;
 
-      .card-left {
+      /* 单选框 (Radio Button) 高保真样式 */
-        .price-box { color: #9c9c9c; }
+      .radio-wrap {
-        .condition { color: #9c9c9c; }
+        padding: 10rpx;
+
+        .radio-circle {
+          width: 40rpx;
+          height: 40rpx;
+          border-radius: 50%;
+          border: 2rpx solid #cccccc;
+          background-color: #ffffff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.2s ease;
+
+          &.checked {
+            background-color: #7a35f6;
+            border-color: #7a35f6;
+          }
+
+          .check-icon {
+            color: #ffffff;
+            font-size: 26rpx;
+            font-weight: bold;
+          }
+        }
       }
 
-      .divider-wrapper {
+      .disabled-tag-text {
-        .divider-line { border-left-color: #e2e2e2; }
+        font-size: 24rpx;
-      }
+        color: #aaaaaa;
-
-      .card-right {
-        .info-content {
-          .title { color: #2c2c2c; }
-          .description { color: #9c9c9c; }
-        }
-        .expired-text {
-          font-size: 22rpx;
-          color: #bcbcbc;
-          margin-top: 14rpx;
-        }
       }
     }
   }
 }
+
+.empty-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+
+  .empty-text {
+    font-size: 28rpx;
+    color: #999999;
+  }
+}
+
+.popup-footer {
+  padding: 20rpx 32rpx 30rpx 32rpx;
+  background-color: #ffffff;
+
+  .no-use-btn {
+    width: 100%;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+    background-color: #f5f5f5;
+    color: #666666;
+    font-size: 28rpx;
+    font-weight: 500;
+    border-radius: 40rpx;
+
+    &:active {
+      background-color: #eeeeee;
+    }
+  }
+}
 </style>

pages/order_package/order_submit/coupon-dialog1.vue

@@ -0,0 +1,593 @@
+<template>
+  <view class="content">
+    <up-popup 
+      :show="show" 
+      mode="bottom" 
+      :round="20" 
+      :closeOnClickOverlay="true" 
+      :closeable="true" 
+      :safeAreaInsetBottom="true"
+      @close="handleClose"
+    >
+      <view class="coupon-popup">
+        <!-- 固定的标题头部 -->
+        <view class="popup-header">
+          <text class="title">选择优惠券</text>
+        </view>
+
+        <!-- 固定的切换标签 (全部/可使用/不可用) -->
+        <view class="tab-container">
+          <view 
+            v-for="(tab, index) in tabs" 
+            :key="index" 
+            :class="['tab-item', { active: activeTab === index }]"
+            @click="switchTab(index)"
+          >
+            <text class="tab-text">{{ tab.name }}</text>
+            <view class="active-line" v-if="activeTab === index"></view>
+          </view>
+        </view>
+
+        <!-- 可上下滚动的优惠券列表区域 -->
+        <scroll-view class="coupon-scroll" scroll-y :enhanced="true" :show-scrollbar="false">
+          <view class="coupon-list" v-if="couponList && couponList.length > 0">
+            <view 
+              v-for="(coupon, index) in couponList" 
+              :key="coupon.templateId || coupon.couponUserId || coupon.id || index"
+              class="coupon-card"
+              :class="{ 'card-disabled': !isAvailable(coupon), 'card-selected': isSelected(coupon) }"
+              @click="isAvailable(coupon) && toggleSelect(coupon)"
+            >
+              <!-- 左侧：金额与门槛 -->
+              <view class="card-left">
+                <view class="price-box">
+                  <text class="currency">¥</text>
+                  <text class="amount">{{ getDiscountAmount(coupon) }}</text>
+                </view>
+                <text class="condition">{{ getThresholdText(coupon) }}</text>
+              </view>
+
+              <!-- 带有上下半圆凹槽的虚线分割线 -->
+              <view class="divider-wrapper">
+                <view class="notch top-notch"></view>
+                <view class="divider-line"></view>
+                <view class="notch bottom-notch"></view>
+              </view>
+
+              <!-- 右侧：详细内容与单选框 -->
+              <view class="card-right">
+                <view class="info-content">
+                  <view class="coupon-title">{{ coupon.title || '优惠券' }}</view>
+                  <view class="tag-row">
+                    <text class="coupon-tag" :class="{ 'tag-disabled': !isAvailable(coupon) }">
+                      {{ getTagText(coupon) }}
+                    </text>
+                    <text class="coupon-scope">{{ getScopeText(coupon) }}</text>
+                  </view>
+                  <view class="coupon-validity">{{ getValidityText(coupon) }}</view>
+                  <view class="unavailable-reason" v-if="!isAvailable(coupon) && coupon.unavailableReason">
+                    {{ coupon.unavailableReason }}
+                  </view>
+                </view>
+
+                <!-- 右侧操作区：可使用状态下展示单选框 (Radio Button) -->
+                <view class="action-box">
+                  <view v-if="isAvailable(coupon)" class="radio-wrap" @click.stop="toggleSelect(coupon)">
+                    <view class="radio-circle" :class="{ 'checked': isSelected(coupon) }">
+                      <text class="check-icon" v-if="isSelected(coupon)">✓</text>
+                    </view>
+                  </view>
+                  <view v-else class="disabled-tag-text">
+                    不可用
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <!-- 列表为空的缺省视图 -->
+          <view class="empty-wrap" v-else-if="!isLoading">
+            <text class="empty-text">暂无相关优惠券</text>
+          </view>
+        </scroll-view>
+
+        <!-- 底部不使用优惠券按钮 (方便取消选择) -->
+        <view class="popup-footer" v-if="couponList && couponList.length > 0">
+          <view class="no-use-btn" @click="noUseCoupon">
+            不使用优惠券
+          </view>
+        </view>
+      </view>
+    </up-popup>
+  </view>
+</template>
+
+<script>
+import { getGoodsCouponList } from "@/api/coupon.js";
+
+export default {
+  name: "CouponDialog",
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    goodsId: {
+      type: [Number, String],
+      default: 0,
+    },
+    selectedCoupon: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  data() {
+    return {
+      activeTab: 0,
+      tabs: [
+        { name: "全部", value: "" },
+        { name: "可使用", value: 1 },
+        { name: "不可用", value: 2 },
+      ],
+      couponList: [],
+      isLoading: false,
+    };
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.fetchCoupons();
+        }
+      },
+    },
+    goodsId() {
+      if (this.show) {
+        this.fetchCoupons();
+      }
+    },
+  },
+  methods: {
+    switchTab(index) {
+      if (this.activeTab !== index) {
+        this.activeTab = index;
+        this.fetchCoupons();
+      }
+    },
+    async fetchCoupons() {
+      this.isLoading = true;
+      try {
+        const tabValue = this.tabs[this.activeTab].value;
+        const params = {};
+        if (this.goodsId) {
+          params.goodsId = this.goodsId;
+        }
+        if (tabValue !== "" && tabValue !== undefined) {
+          params.receiveStatus = tabValue;
+        }
+
+        const res = await getGoodsCouponList(params);
+        if (res && res.bizcode === 100) {
+          this.couponList = res.data || [];
+        } else {
+          this.couponList = [];
+        }
+      } catch (e) {
+        console.error("获取结算页优惠券列表失败:", e);
+        this.couponList = [];
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    isAvailable(coupon) {
+      if (coupon.canUse === false) return false;
+      if (coupon.receiveStatus === 2) return false;
+      if (coupon.status === 2 || coupon.status === 3 || coupon.status === 4) return false;
+      return true;
+    },
+    isSelected(coupon) {
+      if (!this.selectedCoupon) return false;
+      const curId = coupon.templateId || coupon.couponUserId || coupon.id;
+      const selId = this.selectedCoupon.templateId || this.selectedCoupon.couponUserId || this.selectedCoupon.id;
+      return curId && selId && String(curId) === String(selId);
+    },
+    toggleSelect(coupon) {
+      if (this.isSelected(coupon)) {
+        this.$emit("select", null);
+      } else {
+        this.$emit("select", coupon);
+      }
+      this.handleClose();
+    },
+    noUseCoupon() {
+      this.$emit("select", null);
+      this.handleClose();
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+    // 格式化辅助函数
+    getDiscountAmount(coupon) {
+      return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
+    },
+    getThresholdText(coupon) {
+      const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
+      if (threshold === 0) {
+        return "无门槛";
+      }
+      return `满${threshold}元可用`;
+    },
+    getTagText(coupon) {
+      if (coupon.scopeType === 1) return "通用券";
+      if (coupon.scopeType === 2) return "商品券";
+      if (coupon.scopeType === 3 || coupon.scopeType === 4) return "品类券";
+      if (coupon.scopeText && coupon.scopeText.includes("通用")) return "通用券";
+      return "通用券";
+    },
+    getScopeText(coupon) {
+      if (coupon.scopeText) return coupon.scopeText;
+      if (coupon.scopeType === 1) return "所有商品可用";
+      if (coupon.scopeType === 2) return "指定商品可用";
+      if (coupon.scopeType === 3) return "指定类目可用";
+      if (coupon.scopeType === 4) return "指定专区商品可用";
+      return "所有商品可用";
+    },
+    getValidityText(coupon) {
+      if (coupon.useEndTime) {
+        return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
+      }
+      if (coupon.endTime) {
+        return `有效期至 ${this.formatTime(coupon.endTime)}`;
+      }
+      if (coupon.validDays && coupon.validDays > 0) {
+        return `领取之日起${coupon.validDays}天内有效`;
+      }
+      return "长期有效";
+    },
+    formatTime(time) {
+      if (!time) return "";
+      if (typeof time === "string" && time.includes("-")) return time;
+      const date = new Date(Number(time));
+      if (isNaN(date.getTime())) return String(time);
+      const y = date.getFullYear();
+      const m = String(date.getMonth() + 1).padStart(2, "0");
+      const d = String(date.getDate()).padStart(2, "0");
+      return `${y}-${m}-${d}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.coupon-popup {
+  height: 75vh;
+  background-color: #f7f8fa;
+  border-radius: 24rpx 24rpx 0 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.popup-header {
+  text-align: center;
+  font-size: 32rpx;
+  background-color: #ffffff;
+  color: #333333;
+  font-weight: bold;
+  padding: 30rpx 0 20rpx 0;
+  position: relative;
+}
+
+.tab-container {
+  display: flex;
+  width: 100%;
+  background-color: #ffffff;
+  height: 88rpx;
+  align-items: center;
+  padding-left: 32rpx;
+  box-sizing: border-box;
+  border-top: 1rpx solid #f6f6f6;
+  border-bottom: 1rpx solid #f0f0f0;
+
+  .tab-item {
+    margin-right: 48rpx;
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    .tab-text {
+      font-size: 28rpx;
+      color: #666666;
+      transition: color 0.2s ease;
+    }
+
+    &.active {
+      .tab-text {
+        color: #7a35f6;
+        font-weight: bold;
+      }
+    }
+
+    .active-line {
+      position: absolute;
+      bottom: 6rpx;
+      width: 44rpx;
+      height: 6rpx;
+      background-color: #7a35f6;
+      border-radius: 3rpx;
+    }
+  }
+}
+
+.coupon-scroll {
+  flex: 1;
+  height: 0;
+  padding: 24rpx 24rpx 0 24rpx;
+  box-sizing: border-box;
+}
+
+.coupon-list {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 30rpx;
+}
+
+/* 高保真优惠券卡片样式 */
+.coupon-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: rgba(253, 28, 36, 0.06);
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease;
+
+  &.card-selected {
+    /* 不加外边框 */
+  }
+
+  &.card-disabled {
+    background: #f5f5f5 !important;
+    border-color: transparent !important;
+
+    .card-left {
+      .price-box {
+        color: #a0a0a0 !important;
+      }
+      .condition {
+        color: #999999 !important;
+      }
+    }
+
+    .coupon-title {
+      color: #333333 !important;
+    }
+  }
+
+  .card-left {
+    width: 170rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24rpx 0;
+    flex-shrink: 0;
+
+    .price-box {
+      display: flex;
+      align-items: baseline;
+      color: #ff2442;
+
+      .currency {
+        font-size: 28rpx;
+        font-weight: bold;
+        margin-right: 2rpx;
+      }
+
+      .amount {
+        font-size: 60rpx;
+        font-weight: 700;
+        line-height: 1;
+      }
+    }
+
+    .condition {
+      font-size: 24rpx;
+      color: #ff2442;
+      margin-top: 10rpx;
+      font-weight: 500;
+    }
+  }
+
+  .divider-wrapper {
+    position: relative;
+    width: 2rpx;
+    align-self: stretch;
+
+    .divider-line {
+      height: 100%;
+      border-left: 2rpx dashed #fca5a5;
+    }
+
+    .notch {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 24rpx;
+      height: 24rpx;
+      background-color: #f7f8fa;
+      border-radius: 50%;
+      z-index: 10;
+    }
+
+    .top-notch {
+      top: -12rpx;
+    }
+
+    .bottom-notch {
+      bottom: -12rpx;
+    }
+  }
+
+  .card-disabled .divider-line {
+    border-left: 2rpx dashed #dddddd !important;
+  }
+
+  .card-right {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20rpx 20rpx 20rpx 24rpx;
+
+    .info-content {
+      flex: 1;
+      min-width: 0;
+      margin-right: 16rpx;
+
+      .coupon-title {
+        font-size: 30rpx;
+        font-weight: bold;
+        color: #1a1a1a;
+        margin-bottom: 10rpx;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .tag-row {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10rpx;
+        white-space: nowrap;
+
+        .coupon-tag {
+          display: inline-block;
+          font-size: 20rpx;
+          color: #ff2442;
+          background: #ffe4e6;
+          border: 1px solid #ff99a4;
+          border-radius: 6rpx;
+          padding: 2rpx 10rpx;
+          margin-right: 10rpx;
+          line-height: 1.2;
+          font-weight: 500;
+          flex-shrink: 0;
+          white-space: nowrap;
+
+          &.tag-disabled {
+            color: #888888 !important;
+            background: #eeeeee !important;
+            border: 1px solid #cccccc !important;
+          }
+        }
+
+        .coupon-scope {
+          font-size: 22rpx;
+          color: #666666;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .coupon-validity {
+        font-size: 22rpx;
+        color: #999999;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .unavailable-reason {
+        font-size: 20rpx;
+        color: #ff4d4f;
+        margin-top: 6rpx;
+      }
+    }
+
+    .action-box {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-right: 8rpx;
+
+      /* 单选框 (Radio Button) 高保真样式 */
+      .radio-wrap {
+        padding: 10rpx;
+
+        .radio-circle {
+          width: 40rpx;
+          height: 40rpx;
+          border-radius: 50%;
+          border: 2rpx solid #cccccc;
+          background-color: #ffffff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.2s ease;
+
+          &.checked {
+            background-color: #7a35f6;
+            border-color: #7a35f6;
+          }
+
+          .check-icon {
+            color: #ffffff;
+            font-size: 26rpx;
+            font-weight: bold;
+          }
+        }
+      }
+
+      .disabled-tag-text {
+        font-size: 24rpx;
+        color: #aaaaaa;
+      }
+    }
+  }
+}
+
+.empty-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+
+  .empty-text {
+    font-size: 28rpx;
+    color: #999999;
+  }
+}
+
+.popup-footer {
+  padding: 20rpx 32rpx 30rpx 32rpx;
+  background-color: #ffffff;
+
+  .no-use-btn {
+    width: 100%;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+    background-color: #f5f5f5;
+    color: #666666;
+    font-size: 28rpx;
+    font-weight: 500;
+    border-radius: 40rpx;
+
+    &:active {
+      background-color: #eeeeee;
+    }
+  }
+}
+</style>

pages/order_package/order_submit/order_submit.vue

@@ -60,7 +60,7 @@
               <view class="content_right_total">
                 <view>￥<text style="font-size: 36rpx">{{
                   pItem.totalPrice
-                }}</text></view>
+                    }}</text></view>
                 <view>每件到手价￥{{ pItem.unitPrice }}</view>
               </view>
               <view class="shopping_info_quantity">
@@ -84,7 +84,7 @@
               <view class="content_right_total">
                 <view>￥<text style="font-size: 36rpx">{{
                   pItem.totalPrice
-                }}</text></view>
+                    }}</text></view>
                 <view>每件到手价￥{{ pItem.unitPrice }}</view>
               </view>
               <view class="shopping_info_quantity">
@@ -108,7 +108,7 @@
           <view class="order_freight_item">
             <view>运费<text style="color: #c0c3c6; margin-left: 20rpx">{{
               getValue(PRODUCT_DELIVERY_TIME, addItem.deliveryTime)
-            }}</text></view>
+                }}</text></view>
             <view class="value_">
               {{ orderInfo.postage ? "￥" + orderInfo.postage : "包邮" }}
             </view>
@@ -144,28 +144,6 @@
       </view>
     </view>
 
-    <view class="order_way_warp_two">
-      <text class="text-32 text-zu">支付方式</text>
-      <up-radio-group v-model="orderInfo.paymentMethod" placement="column">
-        <view v-for="(item, index) in wayOption" :key="item.id" class="way-option" :style="{
-          borderWidth: wayOption.length - 1 == index ? '0rpx' : '2rpx',
-        }">
-          <view class="way-option-item">
-            <image v-if="item.type == 'wechat'" src="https://static.tbmall.xin/static/new/wx.png"></image>
-            <image v-if="item.type == 'alipay'" src="https://static.tbmall.xin/static/new/zfb.png"></image>
-            <image v-if="item.type == 'balance'" src="https://static.tbmall.xin/static/new/bank.png"></image>
-            <image v-if="item.type == 'redpacket'" src="https://static.tbmall.xin/static/new/jf.png"></image>
-            <text v-if="item.type == 'wechat' || item.type == 'alipay'" class="text-32 text-zu"
-              style="margin-left: 20rpx">{{ item.name }}</text>
-            <text v-else style="margin-left: 20rpx" class="text-32 text-zu">{{ item.name }}
-              <text style="color: #999; margin: 0 10rpx">可用:</text>
-              {{ item.balance }}
-            </text>
-          </view>
-          <up-radio :name="item.type" activeColor="#7934F6"> </up-radio>
-        </view>
-      </up-radio-group>
-    </view>
     <view class="order_way_warp_two">
       <view class="price-view">
         <text class="text-32 text-zu">商品总价</text>
@@ -173,29 +151,39 @@
           {{
             `${buyCouponvalue}数字积分+${orderInfo.amount -
             (orderInfo.postage || 0) +
-            (orderInfo.enterpriseAmount || 0)
+            (orderInfo.enterpriseAmount || 0) + (orderInfo.couponDiscount || 0)
             }元`
           }}
         </text>
         <text class="text-32 text-zu text-bold" v-else>￥{{
-          orderInfo.amount -
+          (orderInfo.amountBeforeCoupon != null
-          orderInfo.postage +
+            ? orderInfo.amountBeforeCoupon
-          (orderInfo.enterpriseAmount || 0)
+            : Number(orderInfo.amount || 0) + Number(orderInfo.couponDiscount || 0)) -
+          Number(orderInfo.postage || 0) +
+          Number(orderInfo.enterpriseAmount || 0)
         }}</text>
       </view>
       <view class="price-view">
         <text class="text-32 text-zu">运费</text>
         <text class="text-32 text-zu text-bold">￥{{ orderInfo.postage }}</text>
       </view>
-      <!-- <view class="price-view" @click="couponShow = true">
+
+      <view class="price-view" @click="couponShow = true" v-if="!isCoupon">
         <text class="text-32 text-zu">优惠券</text>
-        <view style="display: flex; align-items: center;">
+        <view style="display: flex; align-items: center; max-width: 480rpx;">
-          <view class="text-24 " style="margin-right:4rpx;color:#999;">{{ selectedCoupon ? `-${selectedCoupon.amount}` :
+          <template v-if="selectedCoupon">
-            '请选择' }}</view>
+            <view class="preview_coupon_tag">
+              {{ selectedCoupon.title || selectedCoupon.name || '优惠券' }}
+            </view>
+            <text class="preview_coupon_price">-¥{{ selectedCouponAmount }}</text>
+          </template>
+          <view v-else class="text-24" style="margin-right: 8rpx; color: #999;">
+            请选择
+          </view>
           <up-image src="/static/common/right.png" width="12" height="12" bgColor="#f1f6ff00"
-            style="display:inline-block;vertical-align: middle;"></up-image>
+            style="display:inline-block;vertical-align: middle; flex-shrink: 0;"></up-image>
         </view>
-      </view> -->
+      </view>
       <view class="price-view" v-if="this.sed?.activedType == 'seckill' && allOrderInfo.activity?.activityPrice">
         <text class="text-32 text-zu">秒杀价</text>
         <view style="display: flex; align-items: center;">
@@ -218,6 +206,31 @@
         <text class="text-32 text-zi text-bold">￥{{ orderInfo.amount }}</text>
       </view>
     </view>
+
+    <view class="order_way_warp_two">
+      <text class="text-32 text-zu">支付方式</text>
+      <up-radio-group v-model="orderInfo.paymentMethod" placement="column">
+        <view v-for="(item, index) in wayOption" :key="item.id" class="way-option" :style="{
+          borderWidth: wayOption.length - 1 == index ? '0rpx' : '2rpx',
+        }">
+          <view class="way-option-item">
+            <image v-if="item.type == 'wechat'" src="https://static.tbmall.xin/static/new/wx.png"></image>
+            <image v-if="item.type == 'alipay'" src="https://static.tbmall.xin/static/new/zfb.png"></image>
+            <image v-if="item.type == 'balance'" src="https://static.tbmall.xin/static/new/bank.png"></image>
+            <image v-if="item.type == 'redpacket'" src="https://static.tbmall.xin/static/new/jf.png"></image>
+            <text v-if="item.type == 'wechat' || item.type == 'alipay'" class="text-32 text-zu"
+              style="margin-left: 20rpx">{{ item.name }}</text>
+            <text v-else style="margin-left: 20rpx" class="text-32 text-zu">{{ item.name }}
+              <text style="color: #999; margin: 0 10rpx">可用:</text>
+              {{ item.balance }}
+            </text>
+          </view>
+          <up-radio :name="item.type" activeColor="#7934F6"> </up-radio>
+        </view>
+      </up-radio-group>
+    </view>
+
+
     <!-- 去支付的固定按钮 -->
     <view class="order_pay_but">
       <view class="price_">
@@ -292,10 +305,13 @@
     <up-toast ref="uToastRef"></up-toast>
 
     <!-- 优惠券选择弹框 -->
-    <CouponDialog :show="couponShow" v-if="couponShow" @close="couponShow = false" @select="handleCouponSelect">
+    <CouponDialog :show="couponShow" :goodsId="goodsId" :selectedCoupon="selectedCoupon"
+      :coupons="orderInfo.allCoupons || orderInfo.availableCoupons || []"
+      :orderAmount="orderInfo.amountBeforeCoupon || (Number(orderInfo.amount || 0) + Number(orderInfo.couponDiscount || 0))"
+      v-if="couponShow" @close="couponShow = false" @select="handleCouponSelect">
     </CouponDialog>
-      <qiaobao-assistant page-key="pages/order_package/order_submit/order_submit" title="确认订单" />
+    <qiaobao-assistant page-key="pages/order_package/order_submit/order_submit" title="确认订单" />
-</view>
+  </view>
 </template>
 
 <script>
@@ -309,6 +325,7 @@ import {
 } from "@/utils/enumUtils.js";
 import {
   getSettleList,
+  getDirectSettleList,
   settle,
   settlementOrder,
   updateGoodsNum,
@@ -338,6 +355,21 @@ export default {
     PRODUCT_DELIVERY_TIME() {
       return PRODUCT_DELIVERY_TIME;
     },
+    goodsId() {
+      if (this.sed && (this.sed.goodsId || this.sed.id)) {
+        return this.sed.goodsId || this.sed.id;
+      }
+      if (this.orderInfo && this.orderInfo.shops && this.orderInfo.shops.length > 0) {
+        const firstShop = this.orderInfo.shops[0];
+        if (firstShop.addrTimes && firstShop.addrTimes.length > 0) {
+          const firstTime = firstShop.addrTimes[0];
+          if (firstTime.goods && firstTime.goods.length > 0) {
+            return firstTime.goods[0].goodsId || firstTime.goods[0].id || firstTime.goods[0].prodId;
+          }
+        }
+      }
+      return this.ids || 0;
+    },
     totleNum() {
       let num = 0;
 
@@ -354,6 +386,17 @@ export default {
       }
       return num;
     },
+    selectedCouponAmount() {
+      if (!this.selectedCoupon) return 0;
+      if (this.orderInfo.couponDiscount != null) {
+        return Number(this.orderInfo.couponDiscount) || 0;
+      }
+      const amt =
+        this.selectedCoupon.discountAmount !== undefined
+          ? this.selectedCoupon.discountAmount
+          : this.selectedCoupon.amount || 0;
+      return Number(amt) || 0;
+    },
   },
   data() {
     return {
@@ -395,6 +438,7 @@ export default {
       buyCouponAmount: 0, // 实付数字积分对应的钱
       couponShow: false, // 优惠券弹框显示
       selectedCoupon: null, // 选中的优惠券
+      rawOrderAmount: 0, // 无优惠券时的原始订单总额
     };
   },
   async onLoad(option) {
@@ -589,7 +633,7 @@ export default {
         console.log("getWayOption", this.wayOption);
       }
     },
-    async getOrder() {
+    async getOrder(couponUserId) {
       const ids = this.ids;
       if (!ids || ids === 0) {
         this.$refs.uToastRef.show({
@@ -601,7 +645,7 @@ export default {
             url: "/pages/shopping_cart/shopping_cart",
           });
         }, 2000);
-        return;
+        return false;
       }
       let address = null;
       if (this.defaultAddress) {
@@ -621,6 +665,9 @@ export default {
       const params = {
         cartIds: ids,
       };
+      if (couponUserId) {
+        params.couponUserId = couponUserId;
+      }
       if (address) {
         params["addrId"] = address.id;
       }
@@ -637,9 +684,13 @@ export default {
         }
         data.shops = shops;
         data.paymentMethod = null; // 支付方式
+        data.amountBeforeCoupon = Number(data.amount || 0) + Number(data.couponDiscount || 0);
         this.orderInfo = data;
+        this.rawOrderAmount = Number(data.amountBeforeCoupon) || 0;
         console.log("orderInfoorderInfo", this.orderInfo);
+        return true;
       }
+      return false;
     },
     async getOrderTwo() {
       const params = {
@@ -724,8 +775,12 @@ export default {
         }
         this.allOrderInfo = data;
         this.orderInfo.paymentMethod = null;
+        this.rawOrderAmount = Number(this.orderInfo.amount) || 0;
         this.onBuyCouponvalue(this.sed.goodsNum || 1);
         this.onBuyCouponAmount();
+        if (!this.isCoupon && this.sed?.activedType !== "seckill") {
+          await this.refreshDirectSettle();
+        }
         // if(this.addressListOne && this.addressListOne.length){
         // 	this.orderInfo.address = this.addressListOne[0];
         // }
@@ -801,13 +856,24 @@ export default {
         ].totalPrice = currentTotalPrice.toFixed(2);
         this.orderInfo.amount = currentAmount.toFixed(2);
 
-        if (this.isCoupon || this.sed) {
+        if (this.isCoupon) {
           this.onBuyCouponvalue(currentQuantity);
           this.onBuyCouponAmount();
           return;
         }
+        if (this.sed) {
+          this.onBuyCouponvalue(currentQuantity);
+          this.onBuyCouponAmount();
+          if (this.sed?.activedType !== "seckill") {
+            await this.refreshDirectSettle(this.getCouponUserId(this.selectedCoupon));
+          }
+          return;
+        }
 
-        const resp = await getSettleList({ cartIds: this.ids });
+        const settleParams = { cartIds: this.ids };
+        const couponUserId = this.getCouponUserId(this.selectedCoupon);
+        if (couponUserId) settleParams.couponUserId = couponUserId;
+        const resp = await getSettleList(settleParams);
         if (resp && resp.bizcode === 100) {
           const data = resp.data;
           const shops = data.shops;
@@ -820,7 +886,9 @@ export default {
           }
           data.shops = shops;
           data.paymentMethod = null; // 支付方式
+          data.amountBeforeCoupon = Number(data.amount || 0) + Number(data.couponDiscount || 0);
           this.orderInfo = data;
+          this.rawOrderAmount = Number(data.amountBeforeCoupon) || 0;
         }
       }
     },
@@ -965,6 +1033,9 @@ export default {
             ) {
               params["password"] = CryptoJS.MD5(this.payPwd).toString();
             }
+            if (this.selectedCoupon) {
+              params["couponUserId"] = this.getCouponUserId(this.selectedCoupon);
+            }
             resp = await settle(params);
           }
 
@@ -978,6 +1049,9 @@ export default {
         ) {
           params["password"] = CryptoJS.MD5(this.payPwd).toString();
         }
+        if (this.selectedCoupon) {
+          params["couponUserId"] = this.getCouponUserId(this.selectedCoupon);
+        }
         resp = await settle(params);
       }
 
@@ -1054,6 +1128,10 @@ export default {
           cartIds: this.ids,
           addrId: this.selectAddress.id,
         };
+        const couponUserId = this.getCouponUserId(this.selectedCoupon);
+        if (couponUserId) {
+          params.couponUserId = couponUserId;
+        }
         const resp = await getSettleList(params);
         if (resp && resp.bizcode === 100) {
           const data = resp.data;
@@ -1067,7 +1145,9 @@ export default {
           }
           data.shops = shops;
           data.paymentMethod = null;
+          data.amountBeforeCoupon = Number(data.amount || 0) + Number(data.couponDiscount || 0);
           this.orderInfo = data;
+          this.rawOrderAmount = Number(data.amountBeforeCoupon) || 0;
         }
       }
     },
@@ -1083,9 +1163,54 @@ export default {
         url: "/pages/other_package/productInfo/productInfo?id=" + item.goodsId,
       });
     },
-    handleCouponSelect(coupon) {
+    async handleCouponSelect(coupon) {
+      const couponUserId = this.getCouponUserId(coupon);
+      if (coupon && !couponUserId) {
+        this.$refs.uToastRef.show({ type: "error", message: "优惠券信息无效，请刷新后重试" });
+        return;
+      }
+      const threshold = Number(coupon?.thresholdAmount || 0);
+      const orderAmount = Number(this.orderInfo.amountBeforeCoupon || this.rawOrderAmount || this.orderInfo.amount || 0);
+      if (coupon && orderAmount < threshold) {
+        this.$refs.uToastRef.show({ type: "error", message: `订单金额未满${threshold}元，该优惠券不可用` });
+        return;
+      }
+
+      let settled = false;
+      if (this.sed) {
+        settled = await this.refreshDirectSettle(couponUserId);
+      } else {
+        settled = await this.getOrder(couponUserId);
+      }
+      if (settled === false) return;
       this.selectedCoupon = coupon;
     },
+    async refreshDirectSettle(couponUserId) {
+      if (!this.sed || !this.sed.specsId) return false;
+      const resp = await getDirectSettleList({
+        goodsId: this.sed.id,
+        specsId: this.sed.specsId.id,
+        goodsNum: this.orderInfo.shops?.[0]?.addrTimes?.[0]?.goods?.[0]?.num || this.sed.goodsNum || 1,
+        couponUserId: couponUserId || undefined,
+      });
+      if (!resp || resp.bizcode !== 100) {
+        this.$refs.uToastRef.show({
+          type: "error",
+          message: (resp && resp.msg) || "优惠券结算失败，请稍后重试",
+        });
+        return false;
+      }
+      this.orderInfo.amount = resp.data.amount;
+      this.orderInfo.couponDiscount = resp.data.couponDiscount || 0;
+      this.orderInfo.amountBeforeCoupon = Number(resp.data.amount || 0) + Number(resp.data.couponDiscount || 0);
+      this.orderInfo.availableCoupons = resp.data.availableCoupons || [];
+      this.orderInfo.allCoupons = resp.data.allCoupons || resp.data.availableCoupons || [];
+      this.rawOrderAmount = Number(this.orderInfo.amountBeforeCoupon) || 0;
+      return true;
+    },
+    getCouponUserId(coupon) {
+      return coupon && (coupon.couponUserId || coupon.id || null);
+    },
     /**
      * 去充值
      */
@@ -1135,6 +1260,34 @@ export default {
     flex-direction: row;
     justify-content: space-between;
 
+    .preview_coupon_tag {
+      display: inline-block !important;
+      font-size: 20rpx !important;
+      color: #ffffff !important;
+      background-color: #ff2442 !important;
+      border: none !important;
+      border-radius: 4rpx !important;
+      padding: 0 8rpx !important;
+      height: 36rpx;
+      line-height: 36rpx !important;
+      white-space: nowrap !important;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      max-width: 220rpx !important;
+      flex-shrink: 0 !important;
+      font-weight: 500 !important;
+      box-sizing: border-box !important;
+      margin-right: 8rpx !important;
+    }
+
+    .preview_coupon_price {
+      font-size: 30rpx !important;
+      color: #ff2442 !important;
+      font-weight: bold !important;
+      margin: 0 8rpx !important;
+      white-space: nowrap !important;
+    }
+
     .seckill-tag {
       background: #7934F6;
       border-radius: 4rpx;

pages/other_package/applicable_goods/applicable_goods.vue

@@ -0,0 +1,488 @@
+<template>
+	<view class="page-container">
+		<!-- 顶部状态栏安全高度 -->
+		<TopSafe bgColor="#ffffff"></TopSafe>
+
+		<!-- 1. 自定义导航栏：左侧返回箭头，中间“适用商品”标题 -->
+		<view class="custom-navbar">
+			<view class="nav-back flex-c" @click="onBack">
+				<u-icon name="arrow-left" size="36rpx" color="#333333"></u-icon>
+			</view>
+			<view class="nav-title">适用商品</view>
+			<view class="nav-right"></view>
+		</view>
+
+		<!-- 2. 搜索框区域 -->
+		<view class="search-bar-box">
+			<view class="search-inner">
+				<u-icon name="search" size="36rpx" color="#999999" class="search-icon"></u-icon>
+				<input class="search-input" v-model="searchInput" placeholder="请输入商品关键字"
+					placeholder-style="color: #999999; font-size: 28rpx;" confirm-type="search"
+					@confirm="onSearchBtnClick" />
+				<view class="search-btn flex-c" @click="onSearchBtnClick">
+					<text class="search-btn-text">搜索</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 2. 排序/筛选栏（右对齐：综合 / 价格） -->
+		<view class="filter-bar">
+			<view class="filter-item" :class="{ active: sort === 1 }" @click="switchSort(1)">
+				<text class="filter-text">综合</text>
+				<view class="sort-icon-box">
+					<u-icon name="arrow-up-fill" size="12rpx" color="#cccccc" class="icon-up"></u-icon>
+					<u-icon name="arrow-down-fill" size="12rpx" :color="sort === 1 ? '#7934f6' : '#cccccc'"
+						class="icon-down"></u-icon>
+				</view>
+			</view>
+
+			<view class="filter-item" :class="{ active: sort === 2 || sort === 3 }" @click="switchSort('price')">
+				<text class="filter-text">价格</text>
+				<view class="sort-icon-box">
+					<u-icon name="arrow-up-fill" size="12rpx" :color="sort === 2 ? '#7934f6' : '#cccccc'"
+						class="icon-up"></u-icon>
+					<u-icon name="arrow-down-fill" size="12rpx" :color="sort === 3 ? '#7934f6' : '#cccccc'"
+						class="icon-down"></u-icon>
+				</view>
+			</view>
+		</view>
+
+		<!-- 3. 商品双列网格列表区域 -->
+		<scroll-view scroll-y class="product-scroll-view" @scrolltolower="loadMore" refresher-enabled
+			:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
+			<view class="product-grid" v-if="dataList && dataList.length > 0">
+				<view class="product-card" v-for="(item, index) in dataList" :key="item.goodsId || item.id || index"
+					@click="onJumpDetail(item)">
+					<!-- 商品大图 -->
+					<view class="img-wrapper">
+						<image class="product-img"
+							:src="item.mainGraph || item.url || item.image || '/static/common/default-goods.png'"
+							mode="aspectFill"></image>
+					</view>
+
+					<!-- 商品信息 -->
+					<view class="card-info">
+						<view class="product-title">
+							{{ item.goodsName || item.title || item.name }}
+						</view>
+						<view class="price-sales-row">
+							<view class="price-box">
+								<text class="currency">¥</text>
+								<text class="price-val">{{ formatPrice(item.price) }}</text>
+							</view>
+							<text class="sales-val"
+								v-if="item.sales !== undefined && item.sales !== null && item.sales !== ''">
+								全网销量{{ formatSales(item.sales) }}件
+							</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 加载状态 / 无数据提示 -->
+			<view class="empty-box" v-else-if="!loading">
+				<u-icon name="empty-data" size="140rpx" color="#cccccc"></u-icon>
+				<text class="empty-text">暂无相关商品</text>
+			</view>
+
+			<view class="loading-more-box" v-if="loading && dataList.length > 0">
+				<text class="loading-text">加载中...</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+import TopSafe from '@/components/common/top-safe.nvue';
+import { getApplicableGoods } from '@/api/coupon.js';
+
+export default {
+	components: {
+		TopSafe
+	},
+	data() {
+		return {
+			templateId: '',
+			searchInput: '',
+			dataList: [],
+			loading: false,
+			isRefreshing: false,
+			sort: 1, // 排序：1-销量降序、2-价格升序、3-价格降序
+			page: 1,
+			pageSize: 20,
+			hasMore: true
+		};
+	},
+	onLoad(options) {
+		if (options && (options.templateId || options.id)) {
+			this.templateId = options.templateId || options.id;
+		}
+		this.fetchData();
+	},
+	methods: {
+		onBack() {
+			uni.navigateBack();
+		},
+		onSearchBtnClick() {
+			this.page = 1;
+			this.hasMore = true;
+			this.fetchData();
+		},
+		async fetchData(isLoadMore = false) {
+			if (this.loading) return;
+			this.loading = true;
+
+			let params = {
+				templateId: this.templateId,
+				keyword: this.searchInput ? this.searchInput.trim() : '',
+				sort: this.sort,
+				page: this.page,
+				pageSize: this.pageSize
+			};
+
+			try {
+				const res = await getApplicableGoods(params);
+				let list = [];
+				let totalPage = 0;
+				if (res && res.bizcode === 100 && res.data) {
+					list = res.data.entitys || [];
+					totalPage = res.data.totalPage || 0;
+				} else if (res && res.data && Array.isArray(res.data)) {
+					list = res.data;
+				}
+
+				if (isLoadMore) {
+					this.dataList = [...this.dataList, ...list];
+				} else {
+					this.dataList = list;
+				}
+
+				if (list.length < this.pageSize || (totalPage > 0 && this.page >= totalPage)) {
+					this.hasMore = false;
+				}
+			} catch (err) {
+				console.error('getApplicableGoods error:', err);
+			} finally {
+				this.loading = false;
+				this.isRefreshing = false;
+			}
+		},
+		switchSort(type) {
+			if (type === 1) {
+				this.sort = 1;
+			} else if (type === 'price') {
+				if (this.sort === 2) {
+					this.sort = 3;
+				} else {
+					this.sort = 2;
+				}
+			}
+			this.page = 1;
+			this.hasMore = true;
+			this.fetchData();
+		},
+		onRefresh() {
+			this.isRefreshing = true;
+			this.page = 1;
+			this.hasMore = true;
+			this.fetchData();
+		},
+		loadMore() {
+			if (!this.hasMore || this.loading) return;
+			this.page++;
+			this.fetchData(true);
+		},
+		onJumpDetail(item) {
+			const goodsId = item.goodsId || item.id;
+			if (goodsId) {
+				uni.navigateTo({
+					url: '/pages/other_package/productInfo/productInfo?id=' + goodsId
+				});
+			}
+		},
+		formatPrice(val) {
+			if (val === undefined || val === null || val === '') return '0.00';
+			let num = parseFloat(val);
+			if (isNaN(num)) return val;
+			return num.toFixed(2);
+		},
+		formatSales(n) {
+			if (n === undefined || n === null || n === '') return '0';
+			let num = Number(n);
+			if (isNaN(num)) return n;
+			if (num >= 10000) {
+				return (num / 10000).toFixed(1).replace(/\.0$/, '') + '万+';
+			}
+			return String(num);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+	width: 100%;
+	height: 100vh;
+	background-color: #f5f5f7;
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+}
+
+/* 导航栏 */
+.custom-navbar {
+	width: 100%;
+	height: 88rpx;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 32rpx;
+	box-sizing: border-box;
+	background-color: #ffffff;
+	position: relative;
+	flex-shrink: 0;
+
+	.nav-back {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+	}
+
+	.nav-title {
+		font-size: 34rpx;
+		font-weight: bold;
+		color: #1a1a1a;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		white-space: nowrap;
+	}
+
+	.nav-right {
+		width: 60rpx;
+	}
+}
+
+/* 搜索框区域 */
+.search-bar-box {
+	width: 100%;
+	padding: 16rpx 32rpx;
+	box-sizing: border-box;
+	background-color: #ffffff;
+	flex-shrink: 0;
+
+	.search-inner {
+		width: 100%;
+		height: 80rpx;
+		background-color: #ffffff;
+		border-radius: 40rpx;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding: 0 8rpx 0 28rpx;
+		box-sizing: border-box;
+		border: 2rpx solid #efefef;
+
+		.search-icon {
+			margin-right: 12rpx;
+		}
+
+		.search-input {
+			flex: 1;
+			height: 100%;
+			font-size: 28rpx;
+			color: #333333;
+			background: transparent;
+			border: none;
+		}
+
+		.search-btn {
+			height: 64rpx;
+			padding: 0 32rpx;
+			background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
+			border-radius: 32rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.search-btn-text {
+				font-size: 28rpx;
+				color: #ffffff;
+				font-weight: 500;
+			}
+		}
+	}
+}
+
+/* 排序筛选栏 */
+.filter-bar {
+	width: 100%;
+	padding: 20rpx 40rpx 16rpx;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 48rpx;
+	background-color: #f5f5f7;
+	flex-shrink: 0;
+
+	.filter-item {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		cursor: pointer;
+
+		.filter-text {
+			font-size: 28rpx;
+			color: #666666;
+			font-weight: 400;
+			margin-right: 8rpx;
+		}
+
+		&.active {
+			.filter-text {
+				color: #7934f6;
+				font-weight: bold;
+			}
+		}
+
+		.sort-icon-box {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			line-height: 1;
+
+			.icon-up {
+				margin-bottom: 2rpx;
+			}
+		}
+	}
+}
+
+/* 商品列表 Grid */
+.product-scroll-view {
+	flex: 1;
+	height: 0;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.product-grid {
+	width: 100%;
+	padding: 0 24rpx 30rpx;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+
+	.product-card {
+		width: 342rpx;
+		margin-bottom: 20rpx;
+		background-color: #ffffff;
+		border-radius: 20rpx;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
+
+		.img-wrapper {
+			width: 100%;
+			height: 342rpx;
+			position: relative;
+			background-color: #f8f8f8;
+
+			.product-img {
+				width: 100%;
+				height: 100%;
+				border-radius: 20rpx 20rpx 0 0;
+			}
+		}
+
+		.card-info {
+			padding: 16rpx 20rpx 20rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			flex: 1;
+
+			.product-title {
+				font-size: 28rpx;
+				color: #333333;
+				font-weight: bold;
+				line-height: 38rpx;
+				height: 76rpx;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				word-break: break-all;
+				margin-bottom: 16rpx;
+			}
+
+			.price-sales-row {
+				display: flex;
+				flex-direction: row;
+				align-items: baseline;
+				justify-content: space-between;
+				width: 100%;
+
+				.price-box {
+					display: flex;
+					align-items: baseline;
+					color: #7934f6;
+
+					.currency {
+						font-size: 24rpx;
+						font-weight: bold;
+						margin-right: 2rpx;
+					}
+
+					.price-val {
+						font-size: 32rpx;
+						font-weight: bold;
+					}
+				}
+
+				.sales-val {
+					font-size: 22rpx;
+					color: #999999;
+					font-weight: normal;
+				}
+			}
+		}
+	}
+}
+
+.empty-box {
+	width: 100%;
+	padding: 120rpx 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+		margin-top: 20rpx;
+	}
+}
+
+.loading-more-box {
+	width: 100%;
+	padding: 20rpx 0 40rpx;
+	text-align: center;
+
+	.loading-text {
+		font-size: 24rpx;
+		color: #999999;
+	}
+}
+</style>

pages/other_package/coupon/coupon.vue

@@ -1,350 +1,662 @@
 <template>
-	<view class="content">
+    <view class="coupon-page">
-		<TopSafe></TopSafe>
+        <TopSafe></TopSafe>
-		<Header title="优惠券" />
+        <Header title="优惠券" />
 
-		<!-- 顶部分类 Tab 栏 -->
+        <!-- 顶部分类 Tab 栏 -->
-		<view class="tab-container">
+        <view class="tab-container">
-			<view 
+            <view 
-				v-for="(item, index) in tabs" 
+                v-for="(item, index) in tabs" 
-				:key="index" 
+                :key="index" 
-				class="tab-item" 
+                class="tab-item"
-				:class="{ active: currentTab === index }"
+                :class="{ active: currentTab === index }"
-				@click="switchTab(index)"
+                @click="switchTab(index)"
-			>
+            >
-				<text class="tab-text">{{ item }}</text>
+                <text class="tab-text">{{ item.name }}</text>
-				<view class="active-line" v-if="currentTab === index"></view>
+                <view class="active-line" v-if="currentTab === index"></view>
-			</view>
+            </view>
-		</view>
+        </view>
 
-		<!-- 优惠券列表区域 -->
+        <!-- 优惠券列表及分页加载区域 -->
-		<view class="coupon-list">
+        <mescroll-uni 
-			<view 
+            ref="mescrollRef" 
-				v-for="(coupon, index) in filteredCoupons" 
+            top="176rpx" 
-				:key="index" 
+            @down="downCallback" 
-				class="coupon-card"
+            @up="upCallback" 
-				:class="{ 'disabled': coupon.status === 'expired' }"
+            :up="upOption"
-			>
+            :down="downOption" 
-				<!-- 左侧：金额与门槛 -->
+            @init="mescrollInit"
-				<view class="card-left">
+        >
-					<view class="price-box">
+            <!-- 列表视图 -->
-						<text class="currency">¥</text>
+            <view class="coupon-list-container" v-if="couponList && couponList.length > 0">
-						<text class="amount">{{ coupon.amount }}</text>
+                <view 
-					</view>
+                    v-for="(coupon, index) in couponList" 
-					<text class="condition">{{ coupon.condition }}</text>
+                    :key="coupon.couponUserId || coupon.userCouponId || coupon.templateId || index"
-				</view>
+                    class="coupon-card"
+                    :class="{ 'card-disabled': getCardDisabled(coupon) }"
+                >
+                    <!-- 左侧：金额与门槛 -->
+                    <view class="card-left">
+                        <view class="price-box">
+                            <text class="currency">¥</text>
+                            <text class="amount">{{ getDiscountAmount(coupon) }}</text>
+                        </view>
+                        <text class="condition">{{ getThresholdText(coupon) }}</text>
+                    </view>
 
-				<!-- 带有上下半圆凹槽的虚线分割线 -->
+                    <!-- 带有上下半圆凹槽的虚线分割线 -->
-				<view class="divider-wrapper">
+                    <view class="divider-wrapper">
-					<view class="notch top-notch"></view>
+                        <view class="notch top-notch"></view>
-					<view class="divider-line"></view>
+                        <view class="divider-line"></view>
-					<view class="notch bottom-notch"></view>
+                        <view class="notch bottom-notch"></view>
-				</view>
+                    </view>
 
-				<!-- 右侧：详细内容 -->
+                    <!-- 右侧：详细内容与操作按钮 -->
-				<view class="card-right">
+                    <view class="card-right">
-					<view class="info-content">
+                        <view class="info-content">
-						<view class="title">{{ coupon.title }}</view>
+                            <view class="coupon-title">{{ coupon.title || '优惠券' }}</view>
-						<view class="description">{{ coupon.description }}</view>
+                            <view class="tag-row">
+                                <text class="coupon-tag" :class="{ 'tag-disabled': getCardDisabled(coupon) }">
+                                    {{ getTagText(coupon) }}
+                                </text>
+                                <text class="coupon-scope">{{ getScopeText(coupon) }}</text>
+                            </view>
+                            <view class="coupon-validity">{{ getValidityText(coupon) }}</view>
+                        </view>
 
-						<!-- 状态/倒计时文本 -->
+                        <!-- 操作按钮 -->
-						<view v-if="coupon.status === 'active'" class="countdown">
+                        <view class="btn-box">
-							仅剩 {{ coupon.timeLeft }}
+                            <view 
-						</view>
+                                v-if="!getCardDisabled(coupon)" 
-						<view v-else class="expired-text">
+                                class="action-btn btn-use"
-							已失效
+                                @click="onUseCoupon(coupon)"
-						</view>
+                            >
-					</view>
+                                去使用
+                            </view>
+                            <view 
+                                v-else 
+                                class="action-btn btn-disabled"
+                            >
+                                {{ getBtnText(coupon) }}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
 
-					<!-- 按钮：仅在有效状态下显示 -->
+            <!-- 无优惠券缺省视图 (图二高保真) -->
-					<view v-if="coupon.status === 'active'" class="use-btn" @click="useCoupon(coupon)">
+            <view class="empty-container" v-else-if="isEmpty">
-						使用
+                <view class="empty-graphic">
-					</view>
+                    <view class="purple-bag-wrapper">
-				</view>
+                        <view class="glow-bg"></view>
-			</view>
+                        <view class="bag-card">
-		</view>
+                            <view class="bag-handle"></view>
+                            <view class="bag-logo">TB</view>
+                        </view>
+                        <view class="heart-bubble">
+                            <text class="heart-icon">♥</text>
+                        </view>
+                    </view>
+                </view>
+                <text class="empty-tip">暂无优惠券</text>
+                <view class="btn-go-get" v-if="currentTab === 0" @click="onGoGetCoupon">
+                    去领取优惠券
+                </view>
+            </view>
+        </mescroll-uni>
 
-		<up-toast ref="uToastRef"></up-toast>
+        <up-toast ref="uToastRef"></up-toast>
-	    <qiaobao-assistant page-key="pages/other_package/coupon/coupon" title="优惠券" />
+        <qiaobao-assistant page-key="pages/other_package/coupon/coupon" title="优惠券" />
-</view>
+    </view>
 </template>
 
 <script>
 import Header from '@/components/common/header.vue';
-import TopSafe from '@/components/common/top-safe.nvue'
+import TopSafe from '@/components/common/top-safe.nvue';
-import MyBtn from '@/components/common/my-btn.vue'
+import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
+import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
+import { getMyCouponPage } from '@/api/coupon.js';
 
 export default {
-	components: { Header, TopSafe, MyBtn },
+    mixins: [MescrollMixin],
-	data() {
+    components: { Header, TopSafe, MescrollUni },
-		return {
+    data() {
-			currentTab: 0,
+        return {
-			tabs: ['全部', '可使用', '已失效'],
+            currentTab: 0,
-			coupons: [
+            tabs: [
-				{
+                { name: '待使用', status: 1 },
-					amount: 12,
+                { name: '已使用', status: 2 },
-					condition: '无门槛',
+                { name: '已过期', status: 3 },
-					title: '限时秒杀优惠券',
+                { name: '已失效', status: 4 }
-					description: '云南白药牙膏儿膏儿膏儿...',
+            ],
-					timeLeft: '14:20:55',
+            couponList: [],
-					status: 'active'
+            isEmpty: false,
-				},
+            upOption: {
-				{
+                auto: true,
-					amount: 8,
+                page: {
-					condition: '无门槛',
+                    num: 0,
-					title: '限时秒杀优惠券',
+                    size: 10
-					description: '云南白药牙膏儿膏儿膏儿...',
+                },
-					timeLeft: '14:20:55',
+                noMoreSize: 5,
-					status: 'active'
+                empty: {
-				},
+                    use: false // 使用自定义高保真 Empty 视图
-				{
+                },
-					amount: 12,
+                textColor: '#333',
-					condition: '无门槛',
+                bgColor: 'rgba(0,0,0,0)'
-					title: '限时秒杀优惠券',
+            },
-					description: '牛肉干儿牛肉干儿牛肉干',
+            downOption: {
-					timeLeft: '',
+                auto: false,
-					status: 'expired'
+                textColor: '#333',
-				}
+                bgColor: 'rgba(0,0,0,0)'
-			]
+            },
-		};
+            mescroll: null
-	},
+        };
-	computed: {
+    },
-		filteredCoupons() {
+    methods: {
-			return this.coupons;
+        mescrollInit(mescroll) {
-		}
+            this.mescroll = mescroll;
-	},
+        },
-	methods: {
+        downCallback() {
-		switchTab(index) {
+            this.mescroll && this.mescroll.resetUpScroll();
-			this.currentTab = index;
+        },
-		},
+        // 切换 Tab 标签
-		useCoupon(coupon) {
+        switchTab(index) {
-			uni.showToast({
+            if (this.currentTab !== index) {
-				title: `去使用 ${coupon.amount} 元券`,
+                this.currentTab = index;
-				icon: 'none'
+                this.couponList = [];
-			});
+                this.isEmpty = false;
-		}
+                this.mescroll && this.mescroll.resetUpScroll();
-	}
+            }
-}
+        },
+        // 分页获取我的优惠券列表
+        async upCallback(page) {
+            try {
+                const currentStatus = this.tabs[this.currentTab].status;
+                const params = {
+                    status: currentStatus,
+                    page: page.num,
+                    pageSize: page.size
+                };
+                const resp = await getMyCouponPage(params);
+                if (resp && resp.bizcode === 100) {
+                    const data = resp.data || {};
+                    const list = data.entitys || [];
+                    const curPageLen = list.length;
+                    const totalCount = data.totalCount || 0;
+
+                    if (page.num === 1) {
+                        this.couponList = [];
+                    }
+                    this.couponList = this.couponList.concat(list);
+                    this.isEmpty = this.couponList.length === 0;
+                    this.mescroll.endBySize(curPageLen, totalCount);
+                } else {
+                    if (page.num === 1 && this.couponList.length === 0) {
+                        this.couponList = [];
+                        this.isEmpty = true;
+                        this.mescroll.endBySize(0, 0);
+                    } else {
+                        this.mescroll && this.mescroll.endErr();
+                    }
+                }
+            } catch (e) {
+                console.error('获取我的优惠券列表异常:', e);
+                if (page.num === 1 && this.couponList.length === 0) {
+                    this.couponList = [];
+                    this.isEmpty = true;
+                    this.mescroll.endBySize(0, 0);
+                } else {
+                    this.mescroll && this.mescroll.endErr();
+                }
+            }
+        },
+        // 点击“去使用”
+        onUseCoupon(coupon) {
+            const templateId = coupon.templateId || coupon.id || '';
+            uni.navigateTo({
+                url: `/pages/other_package/applicable_goods/applicable_goods?templateId=${templateId}`
+            });
+        },
+        // 点击“去领取优惠券” -> 跳转至领券中心
+        onGoGetCoupon() {
+            uni.navigateTo({
+                url: '/pages/other_package/get-coupon/get-coupon'
+            });
+        },
+        // 数据映射格式化函数
+        getDiscountAmount(coupon) {
+            return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
+        },
+        getThresholdText(coupon) {
+            if (coupon.thresholdType) return coupon.thresholdType;
+            const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
+            if (threshold === 0) {
+                return '无门槛';
+            }
+            return `满${threshold}元可用`;
+        },
+        getTagText(coupon) {
+            if (coupon.tag) return coupon.tag;
+            if (coupon.scopeType === 1) return '通用券';
+            if (coupon.scopeType === 2) return '商品券';
+            if (coupon.scopeType === 3 || coupon.scopeType === 4) return '品类券';
+            if (coupon.scopeText && coupon.scopeText.includes('通用')) return '通用券';
+            return '通用券';
+        },
+        getScopeText(coupon) {
+            if (coupon.scope) return coupon.scope;
+            if (coupon.scopeText) return coupon.scopeText;
+            if (coupon.scopeType === 1) return '所有商品可用';
+            if (coupon.scopeType === 2) return '指定商品可用';
+            if (coupon.scopeType === 3) return '指定类目可用';
+            if (coupon.scopeType === 4) return '指定专区商品可用';
+            return '所有商品可用';
+        },
+        getValidityText(coupon) {
+            if (coupon.endTime) {
+                return `有效期至 ${this.formatTime(coupon.endTime)}`;
+            }
+            if (coupon.useEndTime) {
+                return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
+            }
+            if (coupon.validityText) return coupon.validityText;
+            if (coupon.validDays && coupon.validDays > 0) {
+                return `领取之日起${coupon.validDays}天内有效`;
+            }
+            if (coupon.receiveEndTime) {
+                return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
+            }
+            return '有效期至 2026-8-14 14:20:55';
+        },
+        getBtnText(coupon) {
+            if (coupon.statusText) return coupon.statusText;
+            const status = coupon.status !== undefined ? Number(coupon.status) : this.tabs[this.currentTab].status;
+            if (status === 1) return '去使用';
+            if (status === 2) return '已使用';
+            if (status === 3) return '已过期';
+            if (status === 4) return '已失效';
+            return '已失效';
+        },
+        getCardDisabled(coupon) {
+            const status = coupon.status !== undefined ? Number(coupon.status) : this.tabs[this.currentTab].status;
+            return status !== 1;
+        },
+        formatTime(time) {
+            if (!time) return '';
+            if (typeof time === 'string' && time.includes('-')) return time;
+            const date = new Date(Number(time));
+            if (isNaN(date.getTime())) return String(time);
+            const y = date.getFullYear();
+            const m = String(date.getMonth() + 1).padStart(2, '0');
+            const d = String(date.getDate()).padStart(2, '0');
+            const hh = String(date.getHours()).padStart(2, '0');
+            const mm = String(date.getMinutes()).padStart(2, '0');
+            const ss = String(date.getSeconds()).padStart(2, '0');
+            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-.content {
+.coupon-page {
-	background-color: #F5F5F5;
+    min-height: 100vh;
-	min-height: 100vh;
+    background-color: #f7f8fa;
+    position: relative;
 }
 
+/* 顶部分类 Tab 栏 */
 .tab-container {
-	display: flex;
+    display: flex;
-	width: 100%;
+    width: 100%;
-	background-color: #ffffff;
+    background-color: #ffffff;
-	height: 88rpx;             
+    height: 88rpx;
-	align-items: center;
+    align-items: center;
-	padding-left: 28rpx;        /* 关键：左侧对齐优惠券卡片的边距 */
+    padding-left: 32rpx;
-	box-sizing: border-box;
+    box-sizing: border-box;
-	border-top: 2rpx solid #f6f6f6; /* 隐约的底部分割线 */
+    border-top: 1rpx solid #f6f6f6;
+    position: relative;
+    z-index: 90;
 
-	.tab-item {
+    .tab-item {
-		margin-right: 48rpx;    /* 增大字与字之间的间距 */
+        margin-right: 48rpx;
-		position: relative;
+        position: relative;
-		height: 100%;
+        height: 100%;
-		display: flex;
+        display: flex;
-		flex-direction: column;
+        flex-direction: column;
-		justify-content: center;
+        align-items: center;
-		align-items: center;
+        justify-content: center;
-		cursor: pointer;
 
-		.tab-text {
+        .tab-text {
-			font-size: 28rpx;
+            font-size: 28rpx;
-			color: #7f7f7f;     /* 未激活时是略深一点的灰色 */
+            color: #666666;
-			transition: all 0.2s ease;
+            transition: color 0.2s ease;
-		}
+        }
 
-		&.active {
+        &.active {
-			.tab-text {
+            .tab-text {
-				color: #7A35F6; /* 完美还原原图中的亮紫色 */
+                color: #7a35f6;
-				font-weight: bold;
+                font-weight: bold;
-			}
+            }
-		}
+        }
 
-		/* 底部指示线：缩短宽度并适当下移 */
+        .active-line {
-		.active-line {
+            position: absolute;
-			position: absolute;
+            bottom: 6rpx;
-			bottom: 4rpx;       /* 贴近底部边缘 */
+            width: 48rpx;
-			width: 44rpx;       /* 缩短下划线宽度，原图横线比“全部”两个字还要窄一点 */
+            height: 6rpx;
-			height: 4rpx;       /* 适中的粗细 */
+            background-color: #7a35f6;
-			background-color: #7A35F6;
+            border-radius: 4rpx;
-			border-radius: 2rpx;
+        }
-		}
+    }
-	}
 }
 
-.coupon-list {
+/* 优惠券列表容器 */
-	padding: 28rpx 28rpx;
+.coupon-list-container {
-	box-sizing: border-box;
+    padding: 24rpx 24rpx 40rpx 24rpx;
-	display: flex;
+    box-sizing: border-box;
-	background-color: #ffffff;
-	flex-direction: column;
-	gap: 32rpx;
 }
 
+/* 优惠券卡片基础样式 (待使用状态) */
 .coupon-card {
-	background: rgba(102,102,102,0.06);
+    position: relative;
-	border-radius: 16rpx;
+    display: flex;
-	display: flex;
+    align-items: center;
-	height: 196rpx;
+    background: rgba(253, 28, 36, 0.06);
-	position: relative;
+    border-radius: 16rpx;
+    margin-bottom: 20rpx;
+    box-sizing: border-box;
 
-	/* 左侧面：金额区 */
+    /* 已使用 / 已过期 / 已失效 灰色变暗样式 (图三图四高保真) */
-	.card-left {
+    &.card-disabled {
-		width: 190rpx;
+        background: #f5f5f5 !important;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		flex-shrink: 0;
 
-		.price-box {
+        .card-left {
-			display: flex;
+            .price-box {
-			align-items: flex-end;
+                color: #a0a0a0 !important;
-			color: #ff1224;
+            }
-			font-weight: bold;
+            .condition {
-			margin-bottom: 10rpx;
+                color: #999999 !important;
+            }
+        }
 
-			.currency {
+        .coupon-title {
-				font-size: 32rpx;
+            color: #333333 !important;
-				margin-right: 2rpx;
+        }
-			}
+    }
 
-			.amount {
+    .card-left {
-				font-size: 64rpx;
+        width: 170rpx;
-				line-height: 64rpx;
+        display: flex;
-			}
+        flex-direction: column;
-		}
+        align-items: center;
+        justify-content: center;
+        padding: 24rpx 0;
 
-		.condition {
+        .price-box {
-			font-size: 24rpx;
+            display: flex;
-			color: #ff1224;
+            align-items: baseline;
-			margin-top: 10rpx;
+            color: #ff2442;
-		}
-	}
 
-	/* 带有上下半圆凹槽的虚线分割线组件 */
+            .currency {
-	.divider-wrapper {
+                font-size: 28rpx;
-		width: 2rpx;
+                font-weight: bold;
-		position: relative;
+                margin-right: 2rpx;
-		margin: 10rpx 0;
+            }
-		display: flex;
-		justify-content: center;
 
-		.divider-line {
+            .amount {
-			width: 0;
+                font-size: 60rpx;
-			height: 100%;
+                font-weight: 700;
-			border-left: 2rpx dashed  rgba(253,28,36,0.3);
+                line-height: 1;
-		}
+            }
+        }
 
-		/* 模拟卡片边缘剪票口的半圆凹槽 */
+        .condition {
-		.notch {
+            font-size: 24rpx;
-			position: absolute;
+            color: #ff2442;
-			width: 16rpx;
+            margin-top: 10rpx;
-			height: 16rpx;
+            font-weight: 500;
-			background-color: #f7f8fa; /* 颜色和页面大背景融为一体 */
+        }
-			border-radius: 50%;
+    }
-			left: 50%;
-			transform: translateX(-50%);
-		}
-		.top-notch {
-			top: -18rpx;
-		}
-		.bottom-notch {
-			bottom: -18rpx;
-		}
-	}
 
-	/* 右侧面：内容与按钮区 */
+    /* 虚线分割线及上下凹槽 */
-	.card-right {
+    .divider-wrapper {
-		flex: 1;
+        position: relative;
-		padding: 26rpx 24rpx 24rpx 36rpx;
+        width: 2rpx;
-		display: flex;
+        align-self: stretch;
-		justify-content: space-between;
-		align-items: center;
-		box-sizing: border-box;
 
-		.info-content {
+        .divider-line {
-			display: flex;
+            height: 100%;
-			flex-direction: column;
+            border-left: 2rpx dashed #fca5a5;
-			justify-content: center;
+        }
-			flex: 1;
-			overflow: hidden;
 
-			.title {
+        .notch {
-				font-size: 36rpx;
+            position: absolute;
-				color: #2c2c2c;
+            left: 50%;
-				white-space: nowrap;
+            transform: translateX(-50%);
-				overflow: hidden;
+            width: 24rpx;
-				text-overflow: ellipsis;
+            height: 24rpx;
-			}
+            background-color: #f7f8fa;
+            border-radius: 50%;
+            z-index: 10;
+        }
 
-			.description {
+        .top-notch {
-				font-size: 28rpx;
+            top: -12rpx;
-				color: #6a6a6a;
+        }
-				margin-top: 8rpx;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
 
-			.countdown {
+        .bottom-notch {
-				font-size: 24rpx;
+            bottom: -12rpx;
-				color: #ff5260;
+        }
-				margin-top: 14rpx;
+    }
-			}
-		}
 
-		/* 立即使用按钮 */
+    .card-disabled .divider-line {
-		.use-btn {
+        border-left: 2rpx dashed #dddddd !important;
-			width: 116rpx;
+    }
-			height: 56rpx;
-			background-color: #FD1C24;
-			color: #ffffff;
-			font-size: 28rpx;
-			border-radius: 8rpx; /* 原图接近微圆角矩形，而非纯半圆 */
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-shrink: 0;
-			margin-left: 16rpx;
-			font-weight: 500;
 
-			&:active {
+    /* 卡片右侧内容 */
-				opacity: 0.8;
+    .card-right {
-			}
+        flex: 1;
-		}
+        min-width: 0;
-	}
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20rpx 20rpx 20rpx 24rpx;
 
-	/* ======= 已失效状态覆盖 ======= */
+        .info-content {
-	&.disabled {
+            flex: 1;
-		background-color: #f4f4f4; /* 换成失效灰底 */
+            min-width: 0;
+            margin-right: 12rpx;
 
-		.card-left {
+            .coupon-title {
-			.price-box { color: #9c9c9c; }
+                font-size: 30rpx;
-			.condition { color: #9c9c9c; }
+                font-weight: bold;
-		}
+                color: #1a1a1a;
+                margin-bottom: 10rpx;
+                line-height: 1.2;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
 
-		.divider-wrapper {
+            .tag-row {
-			.divider-line { border-left-color: #e2e2e2; }
+                display: flex;
-		}
+                align-items: center;
+                margin-bottom: 10rpx;
+                white-space: nowrap;
 
-		.card-right {
+                .coupon-tag {
-			.info-content {
+                    display: inline-block;
-				.title { color: #2c2c2c; } /* 失效标题依然清晰 */
+                    font-size: 20rpx;
-				.description { color: #9c9c9c; }
+                    color: #ff2442;
-			}
+                    background: #ffe4e6;
-			.expired-text {
+                    border: 1px solid #ff99a4;
-				font-size: 22rpx;
+                    border-radius: 6rpx;
-				color: #bcbcbc;
+                    padding: 2rpx 10rpx;
-				margin-top: 14rpx;
+                    margin-right: 10rpx;
-			}
+                    line-height: 1.2;
-		}
+                    font-weight: 500;
-	}
+                    flex-shrink: 0;
+                    white-space: nowrap;
+
+                    &.tag-disabled {
+                        color: #888888 !important;
+                        background: #eeeeee !important;
+                        border: 1px solid #cccccc !important;
+                    }
+                }
+
+                .coupon-scope {
+                    font-size: 22rpx;
+                    color: #666666;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            .coupon-validity {
+                font-size: 22rpx;
+                color: #999999;
+                line-height: 1.2;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .btn-box {
+            flex-shrink: 0;
+
+            .action-btn {
+                width: 130rpx;
+                height: 54rpx;
+                line-height: 54rpx;
+                text-align: center;
+                font-size: 24rpx;
+                font-weight: bold;
+                border-radius: 8rpx;
+                box-sizing: border-box;
+
+                &.btn-use {
+                    background: #ff1e38;
+                    color: #ffffff;
+                }
+
+                &.btn-disabled {
+                    background: #e5e5e5;
+                    color: #a0a0a0;
+                    font-weight: normal;
+                }
+            }
+        }
+    }
+}
+
+/* 缺省页面 (图二高保真) */
+.empty-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 140rpx;
+
+    .empty-graphic {
+        position: relative;
+        width: 220rpx;
+        height: 220rpx;
+        margin-bottom: 24rpx;
+
+        .purple-bag-wrapper {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .glow-bg {
+                position: absolute;
+                width: 180rpx;
+                height: 180rpx;
+                background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(247, 248, 250, 0) 70%);
+                border-radius: 50%;
+            }
+
+            .bag-card {
+                position: relative;
+                width: 110rpx;
+                height: 120rpx;
+                background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
+                border-radius: 20rpx;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-shadow: 0 12rpx 28rpx rgba(122, 53, 246, 0.3);
+                z-index: 2;
+
+                .bag-handle {
+                    position: absolute;
+                    top: -16rpx;
+                    width: 44rpx;
+                    height: 24rpx;
+                    border: 4rpx solid #c084fc;
+                    border-bottom: none;
+                    border-radius: 14rpx 14rpx 0 0;
+                }
+
+                .bag-logo {
+                    font-size: 32rpx;
+                    font-weight: 900;
+                    color: #ffffff;
+                    letter-spacing: 2rpx;
+                }
+            }
+
+            .heart-bubble {
+                position: absolute;
+                top: 20rpx;
+                right: 24rpx;
+                width: 44rpx;
+                height: 44rpx;
+                background: linear-gradient(135deg, #c084fc, #a855f7);
+                border-radius: 12rpx;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-shadow: 0 4rpx 12rpx rgba(168, 85, 247, 0.3);
+                z-index: 3;
+
+                .heart-icon {
+                    color: #ffffff;
+                    font-size: 24rpx;
+                }
+            }
+        }
+    }
+
+    .empty-tip {
+        font-size: 28rpx;
+        color: #666666;
+        margin-bottom: 48rpx;
+    }
+
+    .btn-go-get {
+        width: 440rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        text-align: center;
+        background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: bold;
+        border-radius: 40rpx;
+        box-shadow: 0 8rpx 24rpx rgba(122, 53, 246, 0.3);
+        transition: transform 0.1s ease;
+
+        &:active {
+            transform: scale(0.98);
+        }
+    }
 }
 </style>

pages/other_package/get-coupon/get-coupon.vue

@@ -0,0 +1,801 @@
+<template>
+    <view class="get-coupon-page">
+        <!-- 头部 Banner / 轮播图区域 -->
+        <view class="product_info_header_warp">
+            <up-swiper v-if="swiperList && swiperList.length > 0" :list="swiperList" height="660rpx"
+                class="product_info_header_swiper" @click="onSwiper" @change="(e) => (currentNum = e.current)">
+
+            </up-swiper>
+
+            <!-- Default Fallback Banner UI (High-Fidelity) when swiperList is empty -->
+            <view v-else class="default-banner">
+                <view class="banner-bg-gradient"></view>
+                <view class="banner-content">
+                    <view class="banner-badge">%</view>
+                    <text class="banner-title">领券中心</text>
+                    <view class="banner-subtitle">
+                        <text class="sparkle">✦</text>
+                        <text class="sub-text">领券享好价，购物更划算</text>
+                        <text class="sparkle">✦</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 浮动返回按钮 -->
+            <view class="img_comm left_warp" :style="{ top: (statusBarHeight + 10) + 'px' }">
+                <up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00"
+                    @click="jumpLeft"></up-image>
+            </view>
+
+        </view>
+
+        <!-- 分页优惠券列表区域 -->
+        <mescroll-uni ref="mescrollRef" top="660rpx" @down="downCallback" @up="upCallback" :up="upOption"
+            :down="downOption" @init="mescrollInit">
+            <!-- 列表视图 -->
+            <view class="coupon-list-container" v-if="couponList && couponList.length > 0">
+                <view v-for="(coupon, index) in couponList" :key="coupon.templateId || coupon.id || index"
+                    class="coupon-card">
+                    <!-- 左侧：金额与门槛 -->
+                    <view class="card-left">
+                        <view class="price-box">
+                            <text class="currency">¥</text>
+                            <text class="amount">{{ getDiscountAmount(coupon) }}</text>
+                        </view>
+                        <text class="condition">{{ getThresholdText(coupon) }}</text>
+                    </view>
+
+                    <!-- 带有上下半圆凹槽的虚线分割线 -->
+                    <view class="divider-wrapper">
+                        <view class="notch top-notch"></view>
+                        <view class="divider-line"></view>
+                        <view class="notch bottom-notch"></view>
+                    </view>
+
+                    <!-- 右侧：详细内容与操作按钮 -->
+                    <view class="card-right">
+                        <view class="info-content">
+                            <view class="coupon-title">{{ coupon.title }}</view>
+                            <view class="tag-row">
+                                <text class="coupon-tag">{{ getTagText(coupon) }}</text>
+                                <text class="coupon-scope">{{ getScopeText(coupon) }}</text>
+                            </view>
+                            <view class="coupon-validity">{{ getValidityText(coupon) }}</view>
+                        </view>
+
+                        <!-- 操作按钮 -->
+                        <view class="btn-box">
+                            <view v-if="getCouponStatus(coupon) === 0" class="action-btn btn-claim"
+                                @click="onClaimCoupon(coupon, index)">
+                                立即领取
+                            </view>
+                            <view v-else-if="getCouponStatus(coupon) === 1" class="action-btn btn-use"
+                                @click="onClaimCoupon(coupon, index)">
+                                去使用
+                            </view>
+                            <view v-else class="action-btn btn-disabled">
+                                {{ coupon.receiveStatusText || '已达上限' }}
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 无领券数据缺省视图 (高保真) -->
+            <view class="empty-container" v-else-if="isEmpty">
+                <view class="empty-graphic">
+                    <view class="purple-bag-wrapper">
+                        <view class="glow-bg"></view>
+                        <view class="bag-card">
+                            <view class="bag-handle"></view>
+                            <view class="bag-logo">TB</view>
+                        </view>
+                        <view class="heart-bubble">
+                            <text class="heart-icon">♥</text>
+                        </view>
+                    </view>
+                </view>
+                <text class="empty-title">敬请期待</text>
+                <text class="empty-subtitle">更多优质商品正在路上...</text>
+            </view>
+        </mescroll-uni>
+
+        <up-toast ref="uToastRef"></up-toast>
+        <qiaobao-assistant page-key="pages/other_package/get-coupon/get-coupon" title="领券中心" />
+    </view>
+</template>
+
+<script>
+import { getCarouselImage } from '@/api/common.js';
+import { getReceiveCenterList, receiveCoupon } from '@/api/coupon.js';
+import { APP_PAGE_TYPE } from '@/utils/enumUtils.js';
+import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
+import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
+
+export default {
+    mixins: [MescrollMixin],
+    components: { MescrollUni },
+    data() {
+        return {
+            swiperList: [],
+            currentNum: 0,
+            statusBarHeight: 20,
+            couponList: [],
+            isEmpty: false,
+            upOption: {
+                auto: true,
+                page: {
+                    num: 0,
+                    size: 10
+                },
+                noMoreSize: 5,
+                empty: {
+                    use: false // 使用自定义高保真 Empty 视图
+                },
+                textColor: '#333',
+                bgColor: 'rgba(0,0,0,0)'
+            },
+            downOption: {
+                auto: false,
+                textColor: '#333',
+                bgColor: 'rgba(0,0,0,0)'
+            },
+            mescroll: null
+        };
+    },
+    onLoad() {
+        const sysInfo = uni.getSystemInfoSync();
+        if (sysInfo && sysInfo.statusBarHeight) {
+            this.statusBarHeight = sysInfo.statusBarHeight;
+        }
+        this.getCarouselImage();
+    },
+    methods: {
+        mescrollInit(mescroll) {
+            this.mescroll = mescroll;
+        },
+        downCallback() {
+            this.mescroll && this.mescroll.resetUpScroll();
+        },
+        // 分页获取领券中心列表
+        async upCallback(page) {
+            try {
+                const params = {
+                    page: page.num,
+                    pageSize: page.size
+                };
+                const resp = await getReceiveCenterList(params);
+                if (resp && resp.bizcode === 100) {
+                    const data = resp.data || {};
+                    const list = data.entitys || [];
+                    const curPageLen = list.length;
+                    const totalCount = data.totalCount || 0;
+
+                    if (page.num === 1) {
+                        this.couponList = [];
+                    }
+                    this.couponList = this.couponList.concat(list);
+                    this.isEmpty = this.couponList.length === 0;
+                    this.mescroll.endBySize(curPageLen, totalCount);
+                } else {
+                    if (page.num === 1 && this.couponList.length === 0) {
+                        this.couponList = [];
+                        this.isEmpty = true;
+                        this.mescroll.endBySize(0, 0);
+                    } else {
+                        this.mescroll && this.mescroll.endErr();
+                    }
+                }
+            } catch (e) {
+                console.error('获取领券中心数据失败:', e);
+                if (page.num === 1 && this.couponList.length === 0) {
+                    this.couponList = [];
+                    this.isEmpty = true;
+                    this.mescroll.endBySize(0, 0);
+                } else {
+                    this.mescroll && this.mescroll.endErr();
+                }
+            }
+        },
+        // 查询轮播图
+        async getCarouselImage() {
+            try {
+                const params = {
+                    pageUi: APP_PAGE_TYPE.COUPON
+                };
+                const resp = await getCarouselImage(params);
+                if (resp && resp.bizcode === 100) {
+                    const data = resp.data || [];
+                    this.swiperList = data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
+                }
+            } catch (e) {
+                console.error('获取轮播图失败:', e);
+            }
+        },
+        // 返回上一页
+        jumpLeft() {
+            const pages = getCurrentPages();
+            if (pages && pages.length > 1) {
+                uni.navigateBack({
+                    delta: 1
+                });
+            } else {
+                uni.switchTab({
+                    url: '/pages/home/home'
+                });
+            }
+        },
+        // 点击轮播图预览
+        onSwiper(index) {
+            if (this.swiperList && this.swiperList.length > 0) {
+                uni.previewImage({
+                    current: index,
+                    urls: this.swiperList
+                });
+            }
+        },
+        // 数据字段映射格式化函数
+        getDiscountAmount(coupon) {
+            return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
+        },
+        getThresholdText(coupon) {
+            if (coupon.thresholdType) return coupon.thresholdType;
+            const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
+            if (threshold === 0) {
+                return '无门槛';
+            }
+            if (coupon.type === 1) {
+                return `满${threshold}元可用`;
+            }
+            return `满${threshold}元可用`;
+        },
+        getTagText(coupon) {
+            if (coupon.tag) return coupon.tag;
+            if (coupon.scopeType === 1) return '通用券';
+            if (coupon.scopeType === 2) return '商品券';
+            if (coupon.scopeType === 3 || coupon.scopeType === 4) return '品类券';
+            if (coupon.scopeText && coupon.scopeText.includes('通用')) return '通用券';
+            return '通用券';
+        },
+        getScopeText(coupon) {
+            if (coupon.scope) return coupon.scope;
+            if (coupon.scopeText) return coupon.scopeText;
+            if (coupon.scopeType === 1) return '所有商品可用';
+            if (coupon.scopeType === 2) return '指定商品可用';
+            if (coupon.scopeType === 3) return '指定类目可用';
+            if (coupon.scopeType === 4) return '指定专区商品可用';
+            return '所有商品可用';
+        },
+        getValidityText(coupon) {
+            if (coupon.validityText) return coupon.validityText;
+            if (coupon.validDays && coupon.validDays > 0) {
+                return `领取之日起${coupon.validDays}天内有效`;
+            }
+            if (coupon.useEndTime) {
+                return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
+            }
+            if (coupon.receiveEndTime) {
+                return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
+            }
+            return '领取之日起30天内有效';
+        },
+        getCouponStatus(coupon) {
+            if (coupon.receiveStatus !== undefined && coupon.receiveStatus !== null) return Number(coupon.receiveStatus);
+            if (coupon.received !== undefined && coupon.received !== null) return coupon.received ? 1 : 0;
+            if (coupon.canReceive !== undefined && coupon.canReceive !== null) return coupon.canReceive ? 0 : 2;
+            if (coupon.status !== undefined && coupon.status !== null) return Number(coupon.status);
+            return 0;
+        },
+        formatTime(time) {
+            if (!time) return '';
+            if (typeof time === 'string' && time.includes('-')) return time;
+            const date = new Date(Number(time));
+            if (isNaN(date.getTime())) return String(time);
+            const y = date.getFullYear();
+            const m = String(date.getMonth() + 1).padStart(2, '0');
+            const d = String(date.getDate()).padStart(2, '0');
+            const hh = String(date.getHours()).padStart(2, '0');
+            const mm = String(date.getMinutes()).padStart(2, '0');
+            const ss = String(date.getSeconds()).padStart(2, '0');
+            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
+        },
+        // 领取 / 使用优惠券
+        async onClaimCoupon(item, index) {
+            const status = this.getCouponStatus(item);
+            if (status === 0) {
+                const templateId = item.templateId || item.id;
+                if (!templateId) {
+                    uni.showToast({
+                        title: '优惠券ID无效',
+                        icon: 'none'
+                    });
+                    return;
+                }
+                try {
+                    // POST /coupon/receive { templateId }
+                    const res = await receiveCoupon({ templateId });
+                    if (res && res.bizcode === 100) {
+                        if (this.$refs.uToastRef) {
+                            this.$refs.uToastRef.show({
+                                type: 'success',
+                                message: '领取成功'
+                            });
+                        } else {
+                            uni.showToast({
+                                title: '领取成功',
+                                icon: 'success'
+                            });
+                        }
+                        // 1. 本地卡片状态即时更新 (按钮变“去使用”)
+                        if (this.couponList && this.couponList[index]) {
+                            this.$set(this.couponList[index], 'receiveStatus', 1);
+                            this.$set(this.couponList[index], 'received', true);
+                        }
+                        // 2. 重新加载/刷新 mescroll 列表
+                        if (this.mescroll) {
+                            this.mescroll.resetUpScroll();
+                        } else {
+                            this.upCallback({ num: 1, size: 10 });
+                        }
+                    } else {
+                        uni.showToast({
+                            title: res?.msg || '领取失败',
+                            icon: 'none'
+                        });
+                    }
+                } catch (e) {
+                    console.error('领取优惠券失败:', e);
+                    uni.showToast({
+                        title: '领取失败，请重试',
+                        icon: 'none'
+                    });
+                }
+            } else if (status === 1) {
+                // 已领取 -> 去使用，跳转至首页/选购
+                uni.switchTab({
+                    url: '/pages/home/home'
+                });
+            }
+        },
+        // 兜底高保真演练数据
+        getFallbackCoupons() {
+            return [
+                {
+                    templateId: 1,
+                    discountAmount: 12,
+                    thresholdAmount: 0,
+                    title: '限时秒杀优惠券',
+                    scopeType: 1,
+                    scopeText: '所有商品可用',
+                    validDays: 30,
+                    receiveStatus: 0,
+                    canReceive: true,
+                    received: false
+                },
+                {
+                    templateId: 2,
+                    discountAmount: 12,
+                    thresholdAmount: 0,
+                    title: '限时秒杀优惠券',
+                    scopeType: 3,
+                    scopeText: '指定商品可用',
+                    useEndTime: '2026-8-14 14:20:55',
+                    receiveStatus: 1,
+                    canReceive: false,
+                    received: true
+                },
+                {
+                    templateId: 3,
+                    discountAmount: 12,
+                    thresholdAmount: 100,
+                    title: '限时秒杀优惠券',
+                    scopeType: 2,
+                    scopeText: '满100元指定商品可用',
+                    validDays: 30,
+                    receiveStatus: 0,
+                    canReceive: true,
+                    received: false
+                }
+            ];
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.get-coupon-page {
+    min-height: 100vh;
+    background-color: #f7f8fa;
+    position: relative;
+    padding-bottom: 40rpx;
+}
+
+/* 头部 Banner 容器 */
+.product_info_header_warp {
+    position: relative;
+    width: 100%;
+    height: 660rpx;
+    background-color: #7b42f6;
+
+    .product_info_header_swiper {
+        height: 660rpx !important;
+        border-radius: 0 !important;
+
+        ::v-deep(.u-swiper__wrapper) {
+            height: 660rpx !important;
+
+            .u-swiper__wrapper {
+                height: 660rpx !important;
+
+                .u-swiper__wrapper__item__wrapper__image {
+                    height: 660rpx !important;
+                    border-radius: 0 !important;
+                }
+            }
+        }
+    }
+
+    /* 默认 High-Fidelity 紫红色 Banner 备用视图 */
+    .default-banner {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 660rpx;
+        background: linear-gradient(135deg, #b83af6 0%, #7b22ec 50%, #681be4 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+
+        .banner-bg-gradient {
+            position: absolute;
+            top: -50rpx;
+            right: -50rpx;
+            width: 400rpx;
+            height: 400rpx;
+            background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
+            border-radius: 50%;
+        }
+
+        .banner-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: -60rpx;
+
+            .banner-badge {
+                position: absolute;
+                top: 80rpx;
+                left: 40rpx;
+                font-size: 40rpx;
+                color: rgba(255, 255, 255, 0.3);
+                font-weight: bold;
+            }
+
+            .banner-title {
+                font-size: 76rpx;
+                font-weight: 900;
+                color: #ffffff;
+                letter-spacing: 4rpx;
+                text-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.25);
+                background: linear-gradient(to bottom, #ffffff, #f0d5ff);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+
+            .banner-subtitle {
+                margin-top: 16rpx;
+                display: flex;
+                align-items: center;
+                background: rgba(255, 255, 255, 0.2);
+                border: 1px solid rgba(255, 255, 255, 0.4);
+                padding: 8rpx 28rpx;
+                border-radius: 30rpx;
+                backdrop-filter: blur(8px);
+
+                .sparkle {
+                    font-size: 20rpx;
+                    color: #ffd700;
+                    margin: 0 8rpx;
+                }
+
+                .sub-text {
+                    font-size: 26rpx;
+                    color: #ffffff;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+
+    /* 浮动返回图标 */
+    .img_comm {
+        position: fixed;
+        z-index: 999;
+    }
+
+    .left_warp {
+        left: 40rpx;
+    }
+
+}
+
+
+/* 优惠券列表区域 */
+.coupon-list-container {
+    padding: 24rpx 24rpx 40rpx 24rpx;
+    box-sizing: border-box;
+}
+
+/* 高保真优惠券卡片 */
+.coupon-card {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: rgba(253, 28, 36, 0.06);
+    border-radius: 16rpx;
+    margin-bottom: 20rpx;
+    box-sizing: border-box;
+
+    .card-left {
+        width: 170rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 24rpx 0;
+
+        .price-box {
+            display: flex;
+            align-items: baseline;
+            color: #ff2442;
+
+            .currency {
+                font-size: 28rpx;
+                font-weight: bold;
+                margin-right: 2rpx;
+            }
+
+            .amount {
+                font-size: 60rpx;
+                font-weight: 700;
+                line-height: 1;
+            }
+        }
+
+        .condition {
+            font-size: 24rpx;
+            color: #ff2442;
+            margin-top: 10rpx;
+            font-weight: 500;
+        }
+    }
+
+    /* 虚线分割线及上下凹槽 */
+    .divider-wrapper {
+        position: relative;
+        width: 2rpx;
+        align-self: stretch;
+
+        .divider-line {
+            height: 100%;
+            border-left: 2rpx dashed #fca5a5;
+        }
+
+        .notch {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 24rpx;
+            height: 24rpx;
+            background-color: #f7f8fa;
+            border-radius: 50%;
+            z-index: 10;
+        }
+
+        .top-notch {
+            top: -12rpx;
+        }
+
+        .bottom-notch {
+            bottom: -12rpx;
+        }
+    }
+
+    /* 卡片右侧内容 */
+    .card-right {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20rpx 20rpx 20rpx 24rpx;
+
+        .info-content {
+            flex: 1;
+            min-width: 0;
+            margin-right: 12rpx;
+
+            .coupon-title {
+                font-size: 30rpx;
+                font-weight: bold;
+                color: #1a1a1a;
+                margin-bottom: 10rpx;
+                line-height: 1.2;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .tag-row {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10rpx;
+                white-space: nowrap;
+
+                .coupon-tag {
+                    display: inline-block;
+                    font-size: 20rpx;
+                    color: #ff2442;
+                    background: #ffe4e6;
+                    border: 1px solid #ff99a4;
+                    border-radius: 6rpx;
+                    padding: 2rpx 10rpx;
+                    margin-right: 10rpx;
+                    line-height: 1.2;
+                    font-weight: 500;
+                    flex-shrink: 0;
+                    white-space: nowrap;
+                }
+
+                .coupon-scope {
+                    font-size: 22rpx;
+                    color: #666666;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            .coupon-validity {
+                font-size: 22rpx;
+                color: #999999;
+                line-height: 1.2;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .btn-box {
+            flex-shrink: 0;
+
+            .action-btn {
+                width: 130rpx;
+                height: 54rpx;
+                line-height: 54rpx;
+                text-align: center;
+                font-size: 24rpx;
+                font-weight: bold;
+                border-radius: 8rpx;
+                box-sizing: border-box;
+
+                &.btn-claim {
+                    background: #ff2442;
+                    color: #ffffff;
+                }
+
+                &.btn-use {
+                    background: #ffe8eb;
+                    color: #ff2442;
+                    border: 1px solid #ff4d5e;
+                    line-height: 52rpx;
+                    font-weight: 500;
+                }
+
+                &.btn-disabled {
+                    background: #eeeeee;
+                    color: #bbbbbb;
+                }
+            }
+        }
+    }
+}
+
+/* 无领券数据缺省页面 (高保真) */
+.empty-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 140rpx;
+
+    .empty-graphic {
+        position: relative;
+        width: 220rpx;
+        height: 220rpx;
+        margin-bottom: 24rpx;
+
+        .purple-bag-wrapper {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .glow-bg {
+                position: absolute;
+                width: 180rpx;
+                height: 180rpx;
+                background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(247, 248, 250, 0) 70%);
+                border-radius: 50%;
+            }
+
+            .bag-card {
+                position: relative;
+                width: 110rpx;
+                height: 120rpx;
+                background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
+                border-radius: 20rpx;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-shadow: 0 12rpx 28rpx rgba(122, 53, 246, 0.3);
+                z-index: 2;
+
+                .bag-handle {
+                    position: absolute;
+                    top: -16rpx;
+                    width: 44rpx;
+                    height: 24rpx;
+                    border: 4rpx solid #c084fc;
+                    border-bottom: none;
+                    border-radius: 14rpx 14rpx 0 0;
+                }
+
+                .bag-logo {
+                    font-size: 32rpx;
+                    font-weight: 900;
+                    color: #ffffff;
+                    letter-spacing: 2rpx;
+                }
+            }
+
+            .heart-bubble {
+                position: absolute;
+                top: 20rpx;
+                right: 24rpx;
+                width: 44rpx;
+                height: 44rpx;
+                background: linear-gradient(135deg, #c084fc, #a855f7);
+                border-radius: 12rpx;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-shadow: 0 4rpx 12rpx rgba(168, 85, 247, 0.3);
+                z-index: 3;
+
+                .heart-icon {
+                    color: #ffffff;
+                    font-size: 24rpx;
+                }
+            }
+        }
+    }
+
+    .empty-title {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333333;
+        margin-bottom: 12rpx;
+    }
+
+    .empty-subtitle {
+        font-size: 26rpx;
+        color: #999999;
+    }
+}
+</style>

pages/other_package/productInfo/productInfo.vue

@@ -10,8 +10,8 @@
         <template #indicator>
           <view class="indicator-num">
             <text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
-              <qiaobao-assistant page-key="pages/other_package/productInfo/productInfo" title="商品详情" />
+            <qiaobao-assistant page-key="pages/other_package/productInfo/productInfo" title="商品详情" />
-</view>
+          </view>
         </template>
       </up-swiper>
 
@@ -84,6 +84,22 @@
           </view>
           <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
         </view>
+
+        <!-- 领券栏 (图一高保真) -->
+        <view class="concrete_item concrete_item_but" v-if="goodsCouponList && goodsCouponList.length > 0"
+          @click="couponPopupShow = true">
+          <view class="concrete_item_">
+            <view class="concrete_item_title">领券</view>
+            <view class="concrete_item_value coupon_tags_preview">
+              <text v-for="(cItem, cIdx) in goodsCouponList.slice(0, 3)" :key="cItem.templateId || cIdx"
+                class="preview_coupon_tag">
+                {{ cItem.title || '优惠券' }}
+              </text>
+            </view>
+          </view>
+          <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
+        </view>
+
         <!-- <view class="concrete_item">
           <view class="concrete_item_">
             <view class="concrete_item_title">收货地址</view>
@@ -347,6 +363,75 @@
     <EvaluateDialog ref="evaluateDialog" v-if="evaluateDialogShow" :show="evaluateDialogShow"
       @close="evaluateDialogShow = false" :evalId="id" :mainGraph="orderInfo.mainGraph" :name="orderInfo.name">
     </EvaluateDialog>
+    <!-- 优惠券弹窗 (图二高保真) -->
+    <up-popup v-model:show="couponPopupShow" mode="bottom" :round="16" :closeable="true" :safeAreaInsetBottom="true"
+      @close="couponPopupShow = false">
+      <view class="goods_coupon_popup_container">
+        <view class="popup_header">
+          <text class="popup_title">优惠券</text>
+        </view>
+
+        <!-- 优惠券列表 (可滑动) -->
+        <scroll-view scroll-y class="popup_coupon_scroll">
+          <view class="popup_coupon_list">
+            <view v-for="(coupon, index) in goodsCouponList" :key="coupon.templateId || coupon.id || index"
+              class="coupon-card" :class="{ 'card-disabled': getCardDisabled(coupon) }">
+              <!-- 左侧：金额与门槛 -->
+              <view class="card-left">
+                <view class="price-box">
+                  <text class="currency">¥</text>
+                  <text class="amount">{{ getDiscountAmount(coupon) }}</text>
+                </view>
+                <text class="condition">{{ getThresholdText(coupon) }}</text>
+              </view>
+
+              <!-- 带有上下半圆凹槽的虚线分割线 -->
+              <view class="divider-wrapper">
+                <view class="notch top-notch"></view>
+                <view class="divider-line"></view>
+                <view class="notch bottom-notch"></view>
+              </view>
+
+              <!-- 右侧：详细内容与操作按钮 -->
+              <view class="card-right">
+                <view class="info-content">
+                  <view class="coupon-title">{{ coupon.title }}</view>
+                  <view class="tag-row">
+                    <text class="coupon-tag" :class="{ 'tag-disabled': getCardDisabled(coupon) }">
+                      {{ getTagText(coupon) }}
+                    </text>
+                    <text class="coupon-scope">{{ getScopeText(coupon) }}</text>
+                  </view>
+                  <view class="coupon-validity">{{ getValidityText(coupon) }}</view>
+                </view>
+
+                <!-- 操作按钮 (图二高保真: 立即领取 / 已领取) -->
+                <view class="btn-box">
+                  <view v-if="!getCardReceived(coupon) && getCouponCanReceive(coupon)" class="action-btn btn-claim"
+                    @click="onReceiveGoodsCoupon(coupon, index)">
+                    立即领取
+                  </view>
+                  <view v-else-if="getCardReceived(coupon)" class="action-btn btn-received">
+                    已领取
+                  </view>
+                  <view v-else class="action-btn btn-disabled">
+                    {{ coupon.receiveStatusText || '已达上限' }}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+
+        <!-- 底部确定按钮 -->
+        <view class="popup_bottom_btn_wrap">
+          <view class="popup_btn_ok" @click="couponPopupShow = false">
+            确定
+          </view>
+        </view>
+      </view>
+    </up-popup>
+
     <view class="hideCanvasView">
       <canvas id="myCanvas" canvas-id="myCanvas" :style="{
         height: bgObj.height + 'px',
@@ -358,6 +443,7 @@
 
 <script>
 import { getGoodsDetail, addGoods, getGoodsSpecs, getGoodsSpecsInfo } from "@/api/product.js";
+import { getGoodsCouponList, receiveCoupon } from "@/api/coupon.js";
 import { getValue, PRODUCT_DELIVERY_TIME, ACTIVITY_TYPE } from "@/utils/enumUtils.js";
 import { copyData } from "@/utils/index.js";
 import Evaluation from "@/pages/other_package/productInfo/evaluation.vue";
@@ -400,6 +486,8 @@ export default {
       id: 0,
       shareShow: false,
       addressShow: false, // 收件地址选择
+      couponPopupShow: false, // 优惠券弹框显示 (图二)
+      goodsCouponList: [], // 商品可用优惠券列表
       evaluateDialogShow: false, // 评价弹框显示
       shareOpen: false,
       tuiList: ["破损", "污渍", "划痕", "标签", "其他"],
@@ -1000,6 +1088,7 @@ export default {
           /<img([^>]*?)>/gi,
           '<img$1 style="max-width:100%;height:auto;display:block;" loading="lazy">'
         );
+        this.fetchGoodsCouponList();
       }
     },
     /**
@@ -1396,6 +1485,104 @@ export default {
     onGoMore() {
       this.evaluateDialogShow = true;
     },
+    // 获取商品优惠券列表
+    async fetchGoodsCouponList() {
+      if (!this.id) return;
+      try {
+        const res = await getGoodsCouponList({ goodsId: this.id });
+        if (res && res.bizcode === 100) {
+          this.goodsCouponList = res.data || [];
+        }
+      } catch (e) {
+        console.error("获取商品优惠券失败:", e);
+      }
+    },
+    // 弹窗中点击“立即领取”
+    async onReceiveGoodsCoupon(coupon, index) {
+      const templateId = coupon.templateId || coupon.id;
+      if (!templateId) return;
+      try {
+        const res = await receiveCoupon({ templateId });
+        if (res && res.bizcode === 100) {
+          uni.showToast({
+            title: "领取成功",
+            icon: "success",
+          });
+          this.$set(this.goodsCouponList[index], "received", true);
+          this.$set(this.goodsCouponList[index], "receiveStatus", 1);
+        } else {
+          uni.showToast({
+            title: res?.msg || "领取失败",
+            icon: "none",
+          });
+        }
+      } catch (e) {
+        console.error("领取优惠券失败:", e);
+        uni.showToast({
+          title: "领取失败，请重试",
+          icon: "none",
+        });
+      }
+    },
+    getDiscountAmount(coupon) {
+      return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
+    },
+    getThresholdText(coupon) {
+      const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
+      if (threshold === 0) {
+        return "无门槛";
+      }
+      return `满${threshold}元可用`;
+    },
+    getTagText(coupon) {
+      if (coupon.scopeType === 1) return "通用券";
+      if (coupon.scopeType === 2) return "商品券";
+      if (coupon.scopeType === 3 || coupon.scopeType === 4) return "品类券";
+      if (coupon.scopeText && coupon.scopeText.includes("通用")) return "通用券";
+      return "通用券";
+    },
+    getScopeText(coupon) {
+      if (coupon.scopeText) return coupon.scopeText;
+      if (coupon.scopeType === 1) return "所有商品可用";
+      if (coupon.scopeType === 2) return "指定商品可用";
+      if (coupon.scopeType === 3) return "指定类目可用";
+      if (coupon.scopeType === 4) return "指定专区商品可用";
+      return "所有商品可用";
+    },
+    getValidityText(coupon) {
+      if (coupon.validDays && coupon.validDays > 0) {
+        return `领取之日起${coupon.validDays}天内有效`;
+      }
+      if (coupon.useEndTime) {
+        return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
+      }
+      if (coupon.receiveEndTime) {
+        return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
+      }
+      return "领取之日起30天内有效";
+    },
+    getCardReceived(coupon) {
+      return coupon.received || coupon.receiveStatus === 1;
+    },
+    getCouponCanReceive(coupon) {
+      return coupon.canReceive !== false && coupon.receiveStatus !== 2;
+    },
+    getCardDisabled(coupon) {
+      return coupon.receiveStatus === 2 || (coupon.canReceive === false && !coupon.received && coupon.receiveStatus !== 1);
+    },
+    formatTime(time) {
+      if (!time) return "";
+      if (typeof time === "string" && time.includes("-")) return time;
+      const date = new Date(Number(time));
+      if (isNaN(date.getTime())) return String(time);
+      const y = date.getFullYear();
+      const m = String(date.getMonth() + 1).padStart(2, "0");
+      const d = String(date.getDate()).padStart(2, "0");
+      const hh = String(date.getHours()).padStart(2, "0");
+      const mm = String(date.getMinutes()).padStart(2, "0");
+      const ss = String(date.getSeconds()).padStart(2, "0");
+      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
+    },
   },
 };
 </script>
@@ -1978,9 +2165,288 @@ export default {
   top: 10000px;
   left: 10000px;
   z-index: 1000000000000;
-  // background-color: rgba(0,0,0,0.2);
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+/* 领券预览标签样式 (图一高保真) */
+.coupon_tags_preview {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  overflow: hidden;
+  max-width: 520rpx;
+
+  .preview_coupon_tag {
+    display: inline-block;
+    font-size: 22rpx;
+    color: #ff2442;
+    background: #ffe4e6;
+    border: 1px solid #ff99a4;
+    border-radius: 6rpx;
+    padding: 2rpx 12rpx;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 170rpx;
+    flex-shrink: 0;
+  }
+}
+
+/* 领券弹窗组件 (图二高保真) */
+.goods_coupon_popup_container {
+  background-color: #ffffff;
+  border-radius: 32rpx 32rpx 0 0;
+  padding: 32rpx 24rpx 40rpx 24rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .popup_header {
+    position: relative;
+    text-align: center;
+    margin-bottom: 24rpx;
+
+    .popup_title {
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #333333;
+    }
+  }
+
+  .popup_coupon_scroll {
+    max-height: 700rpx;
+    min-height: 300rpx;
+
+    .popup_coupon_list {
+      padding: 8rpx 0;
+    }
+  }
+
+  .popup_bottom_btn_wrap {
+    margin-top: 24rpx;
+    padding: 0 16rpx;
+
+    .popup_btn_ok {
+      width: 100%;
+      height: 84rpx;
+      line-height: 84rpx;
+      text-align: center;
+      background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
+      color: #ffffff;
+      font-size: 30rpx;
+      font-weight: bold;
+      border-radius: 42rpx;
+      box-shadow: 0 8rpx 20rpx rgba(122, 53, 246, 0.25);
+      transition: transform 0.1s ease;
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+  }
+
+  /* 弹窗内的优惠券卡片高保真样式 */
+  .coupon-card {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: rgba(253, 28, 36, 0.06);
+    border-radius: 16rpx;
+    margin-bottom: 20rpx;
+    box-sizing: border-box;
+
+    &.card-disabled {
+      background: #f5f5f5 !important;
+
+      .card-left {
+        .price-box {
+          color: #a0a0a0 !important;
+        }
+
+        .condition {
+          color: #999999 !important;
+        }
+      }
+
+      .coupon-title {
+        color: #333333 !important;
+      }
+    }
+
+    .card-left {
+      width: 170rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 24rpx 0;
+
+      .price-box {
+        display: flex;
+        align-items: baseline;
+        color: #ff2442;
+
+        .currency {
+          font-size: 28rpx;
+          font-weight: bold;
+          margin-right: 2rpx;
+        }
+
+        .amount {
+          font-size: 60rpx;
+          font-weight: 700;
+          line-height: 1;
+        }
+      }
+
+      .condition {
+        font-size: 24rpx;
+        color: #ff2442;
+        margin-top: 10rpx;
+        font-weight: 500;
+      }
+    }
+
+    .divider-wrapper {
+      position: relative;
+      width: 2rpx;
+      align-self: stretch;
+
+      .divider-line {
+        height: 100%;
+        border-left: 2rpx dashed #fca5a5;
+      }
+
+      .notch {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 24rpx;
+        height: 24rpx;
+        background-color: #ffffff;
+        border-radius: 50%;
+        z-index: 10;
+      }
+
+      .top-notch {
+        top: -12rpx;
+      }
+
+      .bottom-notch {
+        bottom: -12rpx;
+      }
+    }
+
+    .card-disabled .divider-line {
+      border-left: 2rpx dashed #dddddd !important;
+    }
+
+    .card-right {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20rpx 20rpx 20rpx 24rpx;
+
+      .info-content {
+        flex: 1;
+        min-width: 0;
+        margin-right: 12rpx;
+
+        .coupon-title {
+          font-size: 30rpx;
+          font-weight: bold;
+          color: #1a1a1a;
+          margin-bottom: 10rpx;
+          line-height: 1.2;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .tag-row {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10rpx;
+          white-space: nowrap;
+
+          .coupon-tag {
+            display: inline-block;
+            font-size: 20rpx;
+            color: #ff2442;
+            background: #ffe4e6;
+            border: 1px solid #ff99a4;
+            border-radius: 6rpx;
+            padding: 2rpx 10rpx;
+            margin-right: 10rpx;
+            line-height: 1.2;
+            font-weight: 500;
+            flex-shrink: 0;
+            white-space: nowrap;
+
+            &.tag-disabled {
+              color: #888888 !important;
+              background: #eeeeee !important;
+              border: 1px solid #cccccc !important;
+            }
+          }
+
+          .coupon-scope {
+            font-size: 22rpx;
+            color: #666666;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .coupon-validity {
+          font-size: 22rpx;
+          color: #999999;
+          line-height: 1.2;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .btn-box {
+        flex-shrink: 0;
+
+        .action-btn {
+          width: 130rpx;
+          height: 54rpx;
+          line-height: 54rpx;
+          text-align: center;
+          font-size: 24rpx;
+          font-weight: bold;
+          border-radius: 8rpx;
+          box-sizing: border-box;
+
+          &.btn-claim {
+            background: #ff1e38;
+            color: #ffffff;
+          }
+
+          &.btn-received {
+            background: #ffe8eb;
+            color: #ff2442;
+            border: 1px solid #ff4d5e;
+            line-height: 52rpx;
+            font-weight: 500;
+          }
+
+          &.btn-disabled {
+            background: #eeeeee;
+            color: #bbbbbb;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages/sort/sort copy.vue

@@ -1,454 +0,0 @@
-<template>
-  <view class="sort_warp" :class="platformType ? '' : 'iosplatformType'">
-    <TopSafe></TopSafe>
-    <view class="sort_header">
-      <!-- 分类切换 -->
-      <view class="sort_category_header">
-        <view :class="selCategory === 1
-          ? 'category_item category_item_sel'
-          : 'category_item'
-          " @click="checkCategory(1)">
-          <view>分类</view>
-          <view v-if="selCategory === 1" class="category_item_sel_but"></view>
-        </view>
-        <!-- <view :class="selCategory === 2 ? 'category_item category_item_sel':'category_item'" @click="checkCategory(2)">
-					<view>品牌</view>
-					<view v-if="selCategory === 2" class="category_item_sel_but"></view>
-				</view> -->
-      </view>
-      <!-- 搜索 -->
-      <view style="width: 200rpx" @click="jumpSearch" class="jump-search">
-        <up-search shape="square" bgColor="#EEEEEEFF" color="#666666FF" :showAction="false"
-          placeholder="搜索"></up-search>
-      </view>
-    </view>
-    <view class="u-menu-wrap">
-      <!-- 左侧类别 -->
-      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
-        <view v-for="(item, index) in tabbarList" :key="index" class="u-tab-item"
-          :class="[current == index ? 'u-tab-item-active' : '']" :data-current="index"
-          @tap.stop="swichMenu(item, index)">
-          <text class="u-line-1">{{ item.name }}</text>
-        </view>
-      </scroll-view>
-      <!-- 商品类别数据 -->
-      <scroll-view scroll-y class="right-box" :scroll-top="rightScrollTop">
-        <!-- banner图 -->
-        <view style="padding: 0rpx 20rpx" v-if="bannerList && bannerList.length > 0">
-          <up-swiper :list="bannerList" height="80px"></up-swiper>
-        </view>
-        <view class="page-view">
-          <!-- 这里还有一层循环 -->
-          <up-loading-page :loading="tabbarContentLoading"></up-loading-page>
-          <view class="class-item" v-for="(item, index) in tabbarContentList" :key="index">
-            <view class="item-title">
-              <text>{{ item.name }}</text>
-            </view>
-            <view class="item-container" v-if="item.foods && item.foods.length !== 0">
-              <view class="thumb-box" v-for="(item1, index1) in item.foods" :key="item1.id || index1" @click="jumpInfo(item1)">
-                <image class="item-menu-image" :src="item1.icon ? item1.icon : '/static/common/def_img.jpg'"
-                  mode="aspectFill" lazy-load>
-                </image>
-                <view class="item-menu-name">{{ item1.name }}</view>
-              </view>
-            </view>
-            <view v-else class="not_order_warp">
-              <view class="not_order_warp_img"><up-image src="https://static.tbmall.xin/static/not_shopping.png"
-                  width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
-              <view class="not_order_msg_warp">暂无分类，快去添加吧~</view>
-            </view>
-          </view>
-        </view>
-      </scroll-view>
-    </view>
-    <!-- #ifndef H5 || MP-WEIXIN-->
-    <CustomTabBar :tabIndex="1" />
-    <!-- #endif -->
-  </view>
-</template>
-
-<script>
-import { getCascadeCategory, getCarouselImage } from "@/api/common.js";
-import CustomTabBar from "@/components/custom-tab-bar.vue";
-import { APP_PAGE_TYPE } from "@/utils/enumUtils.js";
-import TopSafe from '@/components/common/top-safe.nvue';
-
-export default {
-  components: { CustomTabBar, TopSafe },
-  data() {
-    return {
-      selCategory: 1,
-      scrollTop: 0, //tab标题的滚动条位置
-      rightScrollTop: 0, // 右侧内容的滚动条位置
-      current: null, // 预设当前项的值
-      menuHeight: 0, // 左边菜单的高度
-      menuItemHeight: 0, // 左边菜单item的高度
-      bannerList: [],
-      tabbarList: [], // 左侧的主分类
-      tabbarContentList: [], // 右侧内容的分类
-      tabbarContentLoading: false,
-      platformType: true,
-      isFromSortShop: false,
-    };
-  },
-
-  onShow() {
-    /*#ifdef APP-PLUS*/
-    uni.hideTabBar({
-      animation: false,
-    });
-    const appUpdate = uni.getStorageSync("platform");
-    this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
-    /*#endif*/
-
-    const isBackFromSortShop = this.isFromSortShop;
-    this.isFromSortShop = false;
-
-    this.getSort(0).then((resp) => {
-      if (resp && resp.length !== 0) {
-        this.tabbarList = resp;
-        let targetIndex = 0;
-        let fData = resp[0];
-
-        if (isBackFromSortShop) {
-          const sortId = uni.getStorageSync("sortId");
-          if (sortId && sortId !== 0) {
-            resp.forEach((item, index) => {
-              if (item.id === sortId) {
-                fData = item;
-                targetIndex = index;
-              }
-            });
-          } else if (this.current !== null && this.current >= 0 && this.current < resp.length) {
-            targetIndex = this.current;
-            fData = resp[targetIndex];
-          }
-        } else {
-          uni.removeStorageSync("sortId");
-          this.current = 0;
-          this.scrollTop = 0;
-          targetIndex = 0;
-          fData = resp[0];
-        }
-
-        this.swichMenu(fData, targetIndex, true);
-      }
-    });
-    this.getCarouselImage();
-  },
-  methods: {
-    checkCategory(val) {
-      this.selCategory = val;
-    },
-    // 查询轮播图
-    async getCarouselImage() {
-      const params = {
-        pageUi: APP_PAGE_TYPE.SORT,
-      };
-      const resp = await getCarouselImage(params);
-      if (resp && resp.bizcode === 100) {
-        const data = resp.data || [];
-        this.bannerList =
-          data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
-      }
-    },
-    jumpSearch(item) {
-      uni.navigateTo({
-        url: "/pages/rwa_package/insights/search",
-      });
-    },
-    jumpInfo(item) {
-      console.log(item, "item");
-      this.isFromSortShop = true;
-      // uni.navigateTo({
-      // 	url: `/pages/other_package/productInfo/productInfo?id=${item.id}`,
-      // })
-      uni.navigateTo({
-        url: `/pages/rwa_package/shop/sort-shop?id=${item.id}&name=${item.name}`,
-      });
-    },
-    // 查询分类
-    async getSort(pId) {
-
-      const params = {
-        parentId: pId,
-      };
-      console.log('查询分类', params, pId);
-      const resp = await getCascadeCategory(params);
-      if (resp && resp.bizcode === 100) {
-        return resp.data;
-      }
-      return [];
-    },
-    getImg() {
-      return Math.floor(Math.random() * 35);
-    },
-    // 点击左边的栏目切换
-    async swichMenu(item, index, force = false) {
-      console.log('点击左边的栏目切换', item, index, "item, index");
-      if (!force && index == this.current && this.tabbarContentList.length > 0) return;
-      if (item && item.id) {
-        uni.setStorageSync("sortId", item.id);
-      }
-      this.rightScrollTop = 0;
-      this.tabbarContentLoading = true;
-      const firstData = await this.getSort(item.id);
-      for (let fItem of firstData) {
-        const twoData = await this.getSort(fItem.id);
-        fItem.foods = twoData;
-      }
-      this.tabbarContentList = firstData;
-      this.current = index;
-      // 如果为0，意味着尚未初始化
-      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
-        await this.getElRect("menu-scroll-view", "menuHeight");
-        await this.getElRect("u-tab-item", "menuItemHeight");
-      }
-      // 将菜单活动item垂直居中
-      this.scrollTop =
-        index * this.menuItemHeight +
-        this.menuItemHeight / 2 -
-        this.menuHeight / 2;
-      this.tabbarContentLoading = false;
-    },
-
-    // 获取一个目标元素的高度
-    getElRect(elClass, dataVal) {
-      return new Promise((resolve) => {
-        const query = uni.createSelectorQuery().in(this);
-        query
-          .select("." + elClass)
-          .fields({ size: true }, (res) => {
-            if (!res) {
-              setTimeout(() => {
-                this.getElRect(elClass, dataVal).then(resolve);
-              }, 10);
-              return;
-            }
-            this[dataVal] = res.height;
-            resolve(res);
-          })
-          .exec();
-      });
-    },
-    // 分享给朋友
-    onShareAppMessage() {
-      return {
-        title: 'TB聚合商城', // 分享标题
-        path: '/pages/sort/sort' // 分享路径
-      }
-    },
-    // 分享到朋友圈
-    onShareTimeline() {
-      return {
-        title: 'TB聚合商城',
-        query: ''
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-page {
-  height: 100%;
-  overflow: hidden;
-}
-
-.sort_warp {
-  height: 100vh;
-  /* #ifdef H5 */
-  height: calc(100vh - var(--window-top, 0px) - var(--window-bottom, 0px));
-  /* #endif */
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-sizing: border-box;
-  background-color: #fff;
-}
-
-.sort_header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20rpx 30rpx 10rpx;
-  flex-shrink: 0;
-  background-color: #fff;
-  z-index: 10;
-
-  /* #ifdef MP-WEIXIN */
-  margin-top: 80rpx;
-  /* #endif */
-
-  .sort_category_header {
-    display: flex;
-    align-items: center;
-  }
-
-  .jump-search {
-    display: flex;
-  }
-
-  .category_item {
-    width: 140rpx;
-    font-weight: bold;
-    font-size: 36rpx;
-    color: #999999;
-  }
-
-  .category_item_sel {
-    font-size: 44rpx;
-    color: #1a1a1a;
-  }
-
-  .category_item_sel_but {
-    height: 8rpx;
-    width: 50rpx;
-    background: $app-bt-bj;
-    margin-top: 4rpx;
-    margin-left: 12%;
-    border-radius: 20rpx;
-  }
-}
-
-.sort_content {}
-
-.u-menu-wrap {
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-  margin-top: 10rpx;
-}
-
-.u-search-inner {
-  background-color: rgb(234, 234, 234);
-  border-radius: 100rpx;
-  display: flex;
-  align-items: center;
-  padding: 10rpx 16rpx;
-}
-
-.u-search-text {
-  font-size: 26rpx;
-  color: $u-tips-color;
-  margin-left: 10rpx;
-}
-
-.u-tab-view {
-  width: 200rpx;
-  height: 100%;
-  flex-shrink: 0;
-  background: #f6f6f6;
-  overflow-y: auto;
-  box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
-
-  /* #ifdef APP-PLUS */
-  padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
-  /* #endif */
-  /* #ifndef APP-PLUS */
-  padding-bottom: 0rpx;
-  /* #endif */
-}
-
-.u-tab-item {
-  height: 110rpx;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 26rpx;
-  color: #444;
-  font-weight: 400;
-  line-height: 1;
-  padding: 0 10rpx;
-  text-align: center;
-}
-
-.u-tab-item-active {
-  position: relative;
-  color: #000;
-  font-size: 30rpx;
-  font-weight: 600;
-  background: #fff;
-}
-
-.u-tab-item-active::before {
-  content: "";
-  position: absolute;
-  border-left: 4px solid $app-bt-bj;
-  height: 32rpx;
-  left: 0;
-  top: 39rpx;
-}
-
-.right-box {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  overflow-y: auto;
-  background-color: rgb(250, 250, 250);
-  box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
-
-  /* #ifdef APP-PLUS */
-  padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
-  /* #endif */
-  /* #ifndef APP-PLUS */
-  padding-bottom: 0rpx;
-  /* #endif */
-}
-
-.page-view {
-  padding: 16rpx;
-}
-
-.class-item {
-  margin-bottom: 30rpx;
-  background-color: #fff;
-  padding: 16rpx;
-  border-radius: 8rpx;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.item-title {
-  font-size: 26rpx;
-  color: $u-main-color;
-  font-weight: bold;
-}
-
-.item-menu-name {
-  font-weight: normal;
-  font-size: 24rpx;
-  color: $u-main-color;
-  margin-top: 10rpx;
-  text-align: center;
-  word-break: break-all;
-}
-
-.item-container {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.thumb-box {
-  width: 33.333333%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  margin-top: 20rpx;
-}
-
-.item-menu-image {
-  width: 110rpx;
-  height: 110rpx;
-  border-radius: 8rpx;
-}
-</style>

pages/sort/sort.vue

@@ -125,11 +125,12 @@
               <view class="product_info_box">
                 <view class="product_title">{{ item.name || item.title }}</view>
 
-                <view class="product_tags_row">
+                <view class="product_tags_row" v-if="item.sellingPoint && getSellingPointTags(item.sellingPoint).length > 0">
-                  <text class="tag_item tag_blue" v-if="item.tags && item.tags[0]">{{ item.tags[0] }}</text>
+                  <text 
-                  <text class="tag_item tag_green" v-if="item.tags && item.tags[1]">{{ item.tags[1] }}</text>
+                    class="tag_item tag_green" 
-                  <text class="tag_item tag_blue" v-if="!item.tags">专业检测</text>
+                    v-for="(tag, tIndex) in getSellingPointTags(item.sellingPoint)" 
-                  <text class="tag_item tag_green" v-if="!item.tags">生态有机</text>
+                    :key="tIndex"
+                  >{{ tag }}</text>
                 </view>
 
                 <view class="product_price_row">
@@ -230,6 +231,13 @@ export default {
     this.fetchCategories(isBackFromSortShop);
   },
   methods: {
+    getSellingPointTags(sellingPoint) {
+      if (!sellingPoint || typeof sellingPoint !== 'string') return [];
+      return sellingPoint
+        .split(/[,，]/)
+        .map(t => t.trim())
+        .filter(Boolean);
+    },
     // 异步查询级联分类接口 (common/getCascadeCategory)
     async getCategoryApi(pId) {
       try {
@@ -439,8 +447,8 @@ export default {
     jumpInfo(item) {
       this.isFromSortShop = true;
       uni.navigateTo({
-        url: `/pages/rwa_package/shop/sort-shop?id=${item.id}&name=${encodeURIComponent(item.name || item.title || '')}`,
+        url: '/pages/other_package/productInfo/productInfo?id=' + item.id,
-      });
+      })
     }
   }
 };
@@ -844,6 +852,7 @@ page {
 
       .product_tags_row {
         display: flex;
+        flex-wrap: wrap;
         gap: 12rpx;
         margin-top: 8rpx;
 

uni_modules/hashmall-customer-service/components/hashmall-customer-service/hashmall-customer-service.vue

@@ -281,6 +281,7 @@ export default {
       socketStatus: 'connecting',
       socket: null,
       pollingTimer: null,
+      pageHidden: false,
       uploadingImage: false,
       uploadingAttachment: false,
       recording: false,
@@ -411,20 +412,36 @@ export default {
     const page = pages.length ? pages[pages.length - 1] : null
     this.currentEntryOptions = { ...((page && page.options) || {}), ...(this.entryOptions || {}) }
     this.restorePendingContext()
+    this.appShowHandler = () => {
+      if (!this.pageHidden) this.resume({ forceReconnect: true })
+    }
+    this.appHideHandler = () => {
+      if (!this.pageHidden) this.suspend()
+    }
+    uni.$on('kefu-app-show', this.appShowHandler)
+    uni.$on('kefu-app-hide', this.appHideHandler)
     this.initialize()
     this.$nextTick(() => this.measureScrollViewport())
   },
   beforeUnmount() {
+    this.unbindAppLifecycle()
     this.cancelVoiceRecording()
     this.stopRealtime()
     this.clearVirtualListTimers()
   },
   beforeDestroy() {
+    this.unbindAppLifecycle()
     this.cancelVoiceRecording()
     this.stopRealtime()
     this.clearVirtualListTimers()
   },
   methods: {
+    unbindAppLifecycle() {
+      if (this.appShowHandler) uni.$off('kefu-app-show', this.appShowHandler)
+      if (this.appHideHandler) uni.$off('kefu-app-hide', this.appHideHandler)
+      this.appShowHandler = null
+      this.appHideHandler = null
+    },
     async initialize() {
       // #ifdef H5
       const previewHash = typeof window !== 'undefined' ? window.location.hash : ''
@@ -467,27 +484,39 @@ export default {
     async loadLatestMessages({ silent = false } = {}) {
       if (!this.member || !this.member.id) return
       try {
-        let result = await getMessages({ userId: this.member.id, page: 1, pageSize: PAGE_SIZE })
+        const knownLastPage = this.conversation && this.conversation.id && this.totalPage
-        const firstPage = result.messages || {}
+          ? Number(this.totalPage)
-        const totalPage = Number(firstPage.totalPage || 1)
+          : 1
-        if (totalPage > 1) {
+        let result = await getMessages({
+          userId: this.member.id,
+          conversationId: this.conversation && this.conversation.id,
+          page: knownLastPage,
+          pageSize: PAGE_SIZE
+        })
+        let pageResult = result.messages || {}
+        let totalPage = Number(pageResult.totalPage || 1)
+        // 首次加载从第 1 页取得会话信息；只有确实存在后续页时才再查末页。
+        // 后续轮询直接查已知末页，避免每 4 秒重复请求首页和末页。
+        if (totalPage > knownLastPage) {
           result = await getMessages({
             userId: this.member.id,
             conversationId: result.conversation && result.conversation.id,
             page: totalPage,
             pageSize: PAGE_SIZE
           })
+          pageResult = result.messages || {}
+          totalPage = Number(pageResult.totalPage || totalPage)
         }
         this.conversation = result.conversation || this.conversation
-        if (this.conversation && this.conversation.id) {
+        const page = pageResult
-          await markMemberMessagesRead({ userId: this.member.id, conversationId: this.conversation.id }).catch(() => {})
-        }
-        const page = result.messages || {}
         this.currentPage = Number(page.curPage || totalPage || 1)
         this.totalPage = Number(page.totalPage || totalPage || 1)
         this.hasEarlier = this.currentPage > 1
         const incoming = page.entitys || []
         const added = this.mergeMessages(incoming)
+        if (added && this.conversation && this.conversation.id && incoming.some(item => Number(item.senderType) !== 2)) {
+          await markMemberMessagesRead({ userId: this.member.id, conversationId: this.conversation.id }).catch(() => {})
+        }
         if (added && this.userNearBottom) this.$nextTick(() => this.scrollToBottom(false))
         if (added && !this.userNearBottom) this.showNewMessageButton = true
       } catch (error) {
@@ -582,7 +611,7 @@ export default {
         this.stopPolling()
         this.loadLatestMessages({ silent: true })
       }
-      if (status === 'offline') this.startPolling()
+      if (status === 'connecting' || status === 'offline') this.startPolling()
     },
 
     handleSocketEvent(event) {
@@ -623,7 +652,7 @@ export default {
     },
 
     startPolling() {
-      if (this.pollingTimer) return
+      if (this.pageHidden || this.pollingTimer) return
       this.socketStatus = 'polling'
       this.loadLatestMessages({ silent: true })
       this.pollingTimer = setInterval(() => this.loadLatestMessages({ silent: true }), POLLING_INTERVAL)
@@ -1507,15 +1536,23 @@ export default {
       redirectToLogin()
     },
 
-    async resume() {
+    async resume({ forceReconnect = false, pageVisible = false } = {}) {
+      if (pageVisible) this.pageHidden = false
+      if (this.pageHidden) return
       if (this.previewMode) return
       // The socket is intentionally closed while the page is hidden. Reconcile any AI
       // messages created during that gap before reconnecting realtime delivery.
       if (this.member) await this.loadLatestMessages({ silent: true })
-      if (this.member && !this.socket) this.connectSocket()
+      if (!this.member) return
+      if (!this.socket) {
+        this.connectSocket()
+        return
+      }
+      this.socket.reconnectNow(forceReconnect)
     },
 
-    suspend() {
+    suspend({ pageHidden = false } = {}) {
+      if (pageHidden) this.pageHidden = true
       this.stopRealtime()
     },
 

uni_modules/hashmall-customer-service/js_sdk/kefu-realtime.js

@@ -0,0 +1,97 @@
+import { getStorageFun, TOKEN_NAME, USER_DATA } from '@/utils/auth.js'
+import { getCurrentMember } from './api.js'
+import { KefuSocket } from './kefu-socket.js'
+
+export const KEFU_REALTIME_EVENT = 'kefu-realtime-event'
+export const KEFU_REALTIME_STATUS = 'kefu-realtime-status'
+
+let socket = null
+let connectionParams = null
+let startingPromise = null
+
+function storedMember() {
+  const value = getStorageFun(USER_DATA)
+  if (!value) return null
+  if (typeof value === 'object') return value
+  try {
+    return JSON.parse(value)
+  } catch (error) {
+    return null
+  }
+}
+
+async function resolveMemberId(explicitUserId) {
+  if (explicitUserId) return explicitUserId
+  const cached = storedMember()
+  if (cached && (cached.id || cached.userId)) return cached.id || cached.userId
+  const member = await getCurrentMember()
+  return member && (member.id || member.userId)
+}
+
+function createSocket() {
+  const instance = new KefuSocket({
+    onStatus(status) {
+      uni.$emit(KEFU_REALTIME_STATUS, status)
+    },
+    onEvent(event) {
+      uni.$emit(KEFU_REALTIME_EVENT, event)
+    },
+  })
+  socket = instance
+  instance.connect(connectionParams)
+  return instance
+}
+
+/**
+ * Start the foreground customer-service connection. Calls are idempotent so
+ * several pages can consume the same stream without opening duplicate sockets.
+ */
+export function startKefuRealtime(options = {}) {
+  if (!getStorageFun(TOKEN_NAME)) {
+    resetKefuRealtime()
+    return Promise.resolve(null)
+  }
+  if (startingPromise) return startingPromise
+
+  startingPromise = resolveMemberId(options.userId)
+    .then((userId) => {
+      if (!userId) return null
+      const nextParams = {
+        userId,
+        mchId: options.mchId || (connectionParams && connectionParams.mchId) || 1002,
+      }
+      const sameMember = connectionParams && String(connectionParams.userId) === String(userId)
+      connectionParams = nextParams
+      if (socket && sameMember) {
+        socket.reconnectNow()
+        return socket
+      }
+      if (socket) socket.close()
+      socket = null
+      return createSocket()
+    })
+    .catch(() => null)
+    .finally(() => {
+      startingPromise = null
+    })
+  return startingPromise
+}
+
+export function suspendKefuRealtime() {
+  if (socket) socket.close()
+  socket = null
+  uni.$emit(KEFU_REALTIME_STATUS, 'closed')
+}
+
+export function resumeKefuRealtime() {
+  if (!getStorageFun(TOKEN_NAME)) {
+    resetKefuRealtime()
+    return Promise.resolve(null)
+  }
+  return startKefuRealtime(connectionParams || {})
+}
+
+export function resetKefuRealtime() {
+  suspendKefuRealtime()
+  connectionParams = null
+}

uni_modules/hashmall-customer-service/js_sdk/kefu-socket.js

@@ -1,6 +1,39 @@
 import { KEFU_BASE_URL } from '@/utils/config.js'
 
 const RECONNECT_DELAYS = [2000, 4000, 8000, 15000, 30000]
+const HEARTBEAT_INTERVAL = 20000
+const HEARTBEAT_TIMEOUT = 45000
+const CONNECT_TIMEOUT = 10000
+
+function decodeSocketPayload(raw) {
+  if (typeof raw === 'string') return raw
+
+  let bytes = null
+  if (typeof ArrayBuffer !== 'undefined' && raw instanceof ArrayBuffer) {
+    bytes = new Uint8Array(raw)
+  } else if (typeof ArrayBuffer !== 'undefined' && ArrayBuffer.isView && ArrayBuffer.isView(raw)) {
+    bytes = new Uint8Array(raw.buffer, raw.byteOffset, raw.byteLength)
+  }
+  if (!bytes) return raw
+
+  if (typeof TextDecoder !== 'undefined') {
+    try {
+      return new TextDecoder('utf-8').decode(bytes)
+    } catch (error) {
+      // Fall through to the decoder supported by older App WebViews.
+    }
+  }
+
+  let encoded = ''
+  for (let index = 0; index < bytes.length; index += 1) {
+    encoded += `%${bytes[index].toString(16).padStart(2, '0')}`
+  }
+  try {
+    return decodeURIComponent(encoded)
+  } catch (error) {
+    return Array.from(bytes).map(code => String.fromCharCode(code)).join('')
+  }
+}
 
 function getSocketBaseUrl() {
   const override = uni.getStorageSync('kefu-socket-base-url')
@@ -12,6 +45,14 @@ function getSocketBaseUrl() {
   return baseUrl.replace(/^http:/, 'ws:').replace(/^https:/, 'wss:')
 }
 
+function shouldUseNativeSocket() {
+  let enabled = false
+  // #ifdef H5
+  enabled = typeof window !== 'undefined' && typeof window.WebSocket === 'function'
+  // #endif
+  return enabled
+}
+
 export class KefuSocket {
   constructor(options = {}) {
     this.options = options
@@ -22,6 +63,8 @@ export class KefuSocket {
     this.reconnectCount = 0
     this.reconnectTimer = null
     this.heartbeatTimer = null
+    this.connectTimer = null
+    this.lastServerActivityAt = 0
     this.networkListener = status => this.handleNetworkChange(status)
     this.browserOnlineListener = () => this.handleNetworkChange({ isConnected: true })
     this.browserOfflineListener = () => this.handleNetworkChange({ isConnected: false })
@@ -41,30 +84,49 @@ export class KefuSocket {
       conversationId ? `conversationId=${encodeURIComponent(conversationId)}` : ''
     ].filter(Boolean).join('&')
 
-    const task = uni.connectSocket({
+    const url = `${getSocketBaseUrl()}/ws/kefu?${query}`
-      url: `${getSocketBaseUrl()}/ws/kefu?${query}`,
+    // H5 使用浏览器原生 WebSocket。部分 uni-app H5 版本的 SocketTask
-      complete: () => {}
+    // 不会稳定触发 onOpen，页面会误判为断线并永久停留在轮询状态。
-    })
+    const useNativeSocket = shouldUseNativeSocket()
+    const task = useNativeSocket
+      ? new window.WebSocket(url)
+      : uni.connectSocket({ url, complete: () => {} })
     this.socketTask = task
 
-    task.onOpen(() => {
+    const onOpen = () => {
       if (this.socketTask !== task) return
+      this.stopConnectTimeout()
       this.reconnectCount = 0
+      this.lastServerActivityAt = Date.now()
       this.options.onStatus && this.options.onStatus('online')
       this.startHeartbeat(task)
-    })
+    }
-    task.onMessage(event => {
+    const onMessage = event => {
       if (this.socketTask === task) this.handleMessage(event.data)
-    })
+    }
-    task.onError(() => this.handleDisconnect(task))
+    const onDisconnect = () => this.handleDisconnect(task)
-    task.onClose(() => this.handleDisconnect(task))
+
+    if (useNativeSocket) {
+      task.addEventListener('open', onOpen)
+      task.addEventListener('message', onMessage)
+      task.addEventListener('error', onDisconnect)
+      task.addEventListener('close', onDisconnect)
+    } else {
+      task.onOpen(onOpen)
+      task.onMessage(onMessage)
+      task.onError(onDisconnect)
+      task.onClose(onDisconnect)
+    }
+    this.startConnectTimeout(task)
   }
 
   handleMessage(raw) {
-    let event = raw
+    this.lastServerActivityAt = Date.now()
-    if (typeof raw === 'string') {
+    const payload = decodeSocketPayload(raw)
+    let event = payload
+    if (typeof payload === 'string') {
       try {
-        event = JSON.parse(raw)
+        event = JSON.parse(payload)
       } catch (error) {
         return
       }
@@ -77,12 +139,59 @@ export class KefuSocket {
     this.stopHeartbeat()
     this.heartbeatTimer = setInterval(() => {
       if (this.socketTask !== task) return
-      task.send({ data: 'ping', fail: () => this.handleDisconnect(task) })
+      if (this.lastServerActivityAt && Date.now() - this.lastServerActivityAt > HEARTBEAT_TIMEOUT) {
-    }, 25000)
+        this.forceReconnect('heartbeat timeout')
+        return
+      }
+      this.sendSocket(task, 'ping')
+    }, HEARTBEAT_INTERVAL)
+  }
+
+  sendSocket(task, data) {
+    try {
+      if (typeof window !== 'undefined' && task instanceof window.WebSocket) {
+        if (task.readyState === window.WebSocket.OPEN) task.send(data)
+        else this.handleDisconnect(task)
+        return
+      }
+      task.send({ data, fail: () => this.handleDisconnect(task) })
+    } catch (error) {
+      this.handleDisconnect(task)
+    }
+  }
+
+  closeSocket(task, reason) {
+    if (!task) return
+    try {
+      if (typeof window !== 'undefined' && task instanceof window.WebSocket) {
+        task.close(1000, reason)
+      } else {
+        task.close({ code: 1000, reason })
+      }
+    } catch (error) {
+      // App/native runtime may already have released the socket.
+    }
+  }
+
+  startConnectTimeout(task) {
+    this.stopConnectTimeout()
+    this.connectTimer = setTimeout(() => {
+      if (this.socketTask !== task) return
+      this.socketTask = null
+      this.closeSocket(task, 'connect timeout')
+      this.options.onStatus && this.options.onStatus('offline')
+      this.scheduleReconnect()
+    }, CONNECT_TIMEOUT)
+  }
+
+  stopConnectTimeout() {
+    if (this.connectTimer) clearTimeout(this.connectTimer)
+    this.connectTimer = null
   }
 
   handleDisconnect(task) {
     if (task && this.socketTask !== task) return
+    this.stopConnectTimeout()
     this.stopHeartbeat()
     this.socketTask = null
     if (this.manualClose) return
@@ -101,27 +210,41 @@ export class KefuSocket {
     }, delay)
   }
 
-  reconnectNow() {
+  reconnectNow(force = false) {
+    if (force) {
+      this.forceReconnect('app resumed')
+      return
+    }
     if (this.manualClose || this.socketTask || !this.connectionParams || !this.networkOnline) return
     if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
     this.reconnectTimer = null
     this.connect(this.connectionParams)
   }
 
+  forceReconnect(reason = 'connection refresh') {
+    if (this.manualClose || !this.connectionParams || !this.networkOnline) return
+    if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
+    this.reconnectTimer = null
+    this.stopConnectTimeout()
+    this.stopHeartbeat()
+
+    const task = this.socketTask
+    this.socketTask = null
+    this.closeSocket(task, reason)
+
+    this.options.onStatus && this.options.onStatus('connecting')
+    setTimeout(() => this.connect(this.connectionParams), 0)
+  }
+
   handleNetworkChange(status = {}) {
     this.networkOnline = status.isConnected !== false
     if (!this.networkOnline) {
       this.options.onStatus && this.options.onStatus('offline')
+      this.stopConnectTimeout()
       this.stopHeartbeat()
       const task = this.socketTask
       this.socketTask = null
-      if (task) {
+      this.closeSocket(task, 'network offline')
-        try {
-          task.close({ code: 1000, reason: 'network offline' })
-        } catch (error) {
-          // The platform may have disposed the socket before the offline event.
-        }
-      }
       return
     }
     this.reconnectNow()
@@ -155,6 +278,7 @@ export class KefuSocket {
 
   close() {
     this.manualClose = true
+    this.stopConnectTimeout()
     this.stopHeartbeat()
     if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
     this.reconnectTimer = null
@@ -162,7 +286,7 @@ export class KefuSocket {
     this.unbindNetworkListeners()
     const task = this.socketTask
     this.socketTask = null
-    if (task) task.close({ code: 1000, reason: 'page hidden' })
+    this.closeSocket(task, 'page hidden')
     this.options.onStatus && this.options.onStatus('closed')
   }
 }

utils/enumUtils.js

@@ -454,7 +454,7 @@ export const FINANCE_WITHDRAWAL_STATUS = [
 ];
 
 /**
- * 页面：1-APP首页，2-APP分类页，3-商学院资讯，4-爆单区，5-好物区,6-积分专区,7-数字积分页 8-新人专享、9-超级补贴、10-限时秒杀
+ * 页面：1-APP首页，2-APP分类页，3-商学院资讯，4-爆单区，5-好物区,6-积分专区,7-数字积分页 8-新人专享、9-超级补贴、10-限时秒杀、11-领券中心
  * @type {[{value: string, key: string}]}
  */
 export const APP_PAGE_TYPE = {
@@ -468,6 +468,7 @@ export const APP_PAGE_TYPE = {
 	NEW: 8,
 	SUPER_SUBSIDY: 9,
 	SECKILL: 10,
+	COUPON: 11,
 };
 
 /**