客服页面

manifest.json

@@ -1,223 +1,240 @@
 {
-	"name": "江苏赢伟达资产管理有限公司",
-	"appid": "__UNI__F082C69",
-	"description": "基于 uni-app + Vue3 技术驱动的在线商城系统，内含诸多功能与丰富的活动，期待您的使用和反馈。",
-	"versionName": "2.1.0",
-	"versionCode": "183",
-	"transformPx": false,
-	"app-plus": {
-		"usingComponents": true,
-		"nvueCompiler": "uni-app",
-		"nvueStyleCompiler": "uni-app",
-		"compilerVersion": 3,
-		"nvueLaunchMode": "fast",
-		"splashscreen": {
-			"alwaysShowBeforeRender": true,
-			"waiting": true,
-			"autoclose": true,
-			"delay": 0
-		},
-		"safearea": {
-			"bottom": {
-				"offset": "none"
-			}
-		},
-		"modules": {
-			"Payment": {},
-			"Share": {},
-			"VideoPlayer": {},
-			"OAuth": {}
-		},
-		"distribute": {
-			"android": {
-				"permissions": [
-					"<uses-feature android:name=\"android.hardware.camera\"/>",
-					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
-					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
-					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
-					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-					"<uses-permission android:name=\"android.permission.GET_TASKS\"/>",
-					"<uses-permission android:name=\"android.permission.INTERNET\"/>",
-					"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
-					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-					"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
-					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.READ_SMS\"/>",
-					"<uses-permission android:name=\"android.permission.RECEIVE_BOOT_COMPLETED\"/>",
-					"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
-					"<uses-permission android:name=\"android.permission.SEND_SMS\"/>",
-					"<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>",
-					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-					"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
-					"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
-					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
-					"<uses-permission android:name=\"android.permission.WRITE_SMS\"/>",
-					"<uses-permission android:name=\"android.permission.RECEIVE_USER_PRESENT\"/>"
-				],
-				"minSdkVersion": 21,
-				"schemes": "shopro"
-			},
-			"ios": {
-				"urlschemewhitelist": ["baidumap", "iosamap"],
-				"dSYMs": false,
-				"privacyDescription": {
-					"NSPhotoLibraryUsageDescription": "需要同意访问您的相册选取图片才能完善该条目",
-					"NSPhotoLibraryAddUsageDescription": "需要同意访问您的相册才能保存该图片",
-					"NSCameraUsageDescription": "需要同意访问您的摄像头拍摄照片才能完善该条目",
-					"NSUserTrackingUsageDescription": "开启追踪并不会获取您在其它站点的隐私信息,该行为仅用于标识设备,保障服务安全和提升浏览体验"
-				},
-				"urltypes": "shopro",
-				"capabilities": {
-					"entitlements": {
-						"com.apple.developer.associated-domains": ["applinks:shopro.sheepjs.com"]
-					}
-				},
-				"idfa": true
-			},
-			"sdkConfigs": {
-				"speech": {
-					"ifly": {}
-				},
-				"ad": {},
-				"oauth": {
-					"apple": {},
-					"weixin": {
-						"appid": "wxae7a0c156da9383b",
-						"UniversalLinks": "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
-					}
-				},
-				"payment": {
-					"weixin": {
-						"__platform__": ["ios", "android"],
-						"appid": "wxae7a0c156da9383b",
-						"UniversalLinks": "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
-					},
-					"alipay": {
-						"__platform__": ["ios", "android"]
-					}
-				},
-				"share": {
-					"weixin": {
-						"appid": "wxae7a0c156da9383b",
-						"UniversalLinks": "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
-					}
-				}
-			},
-			"orientation": ["portrait-primary"],
-			"splashscreen": {
-				"androidStyle": "common",
-				"iosStyle": "common",
-				"useOriginalMsgbox": true
-			},
-			"icons": {
-				"android": {
-					"hdpi": "unpackage/res/icons/72x72.png",
-					"xhdpi": "unpackage/res/icons/96x96.png",
-					"xxhdpi": "unpackage/res/icons/144x144.png",
-					"xxxhdpi": "unpackage/res/icons/192x192.png"
-				},
-				"ios": {
-					"appstore": "unpackage/res/icons/1024x1024.png",
-					"ipad": {
-						"app": "unpackage/res/icons/76x76.png",
-						"app@2x": "unpackage/res/icons/152x152.png",
-						"notification": "unpackage/res/icons/20x20.png",
-						"notification@2x": "unpackage/res/icons/40x40.png",
-						"proapp@2x": "unpackage/res/icons/167x167.png",
-						"settings": "unpackage/res/icons/29x29.png",
-						"settings@2x": "unpackage/res/icons/58x58.png",
-						"spotlight": "unpackage/res/icons/40x40.png",
-						"spotlight@2x": "unpackage/res/icons/80x80.png"
-					},
-					"iphone": {
-						"app@2x": "unpackage/res/icons/120x120.png",
-						"app@3x": "unpackage/res/icons/180x180.png",
-						"notification@2x": "unpackage/res/icons/40x40.png",
-						"notification@3x": "unpackage/res/icons/60x60.png",
-						"settings@2x": "unpackage/res/icons/58x58.png",
-						"settings@3x": "unpackage/res/icons/87x87.png",
-						"spotlight@2x": "unpackage/res/icons/80x80.png",
-						"spotlight@3x": "unpackage/res/icons/120x120.png"
-					}
-				}
-			}
-		}
-	},
-	"quickapp": {},
-	"quickapp-native": {
-		"icon": "/static/logo.png",
-		"package": "com.example.demo",
-		"features": [{
-			"name": "system.clipboard"
-		}]
-	},
-	"quickapp-webview": {
-		"icon": "/static/logo.png",
-		"package": "com.example.demo",
-		"minPlatformVersion": 1070,
-		"versionName": "1.0.0",
-		"versionCode": 100
-	},
-	"mp-weixin": {
-		"appid": "wx66186af0759f47c9",
-		"setting": {
-			"urlCheck": false,
-			"minified": true,
-			"postcss": false,
-			"es6": true
-		},
-		"optimization": {
-			"subPackages": true
-		},
-		"plugins": {},
-		"lazyCodeLoading": "requiredComponents",
-		"usingComponents": {},
-		"permission": {},
-		"requiredPrivateInfos": ["chooseAddress"]
-	},
-	"mp-alipay": {
-		"usingComponents": true
-	},
-	"mp-baidu": {
-		"usingComponents": true
-	},
-	"mp-toutiao": {
-		"usingComponents": true
-	},
-	"mp-jd": {
-		"usingComponents": true
-	},
-	"h5": {
-		"template": "index.html",
-		"router": {
-			"mode": "history",
-			"base": "/mail"
-		},
-		"sdkConfigs": {
-			"maps": {}
-		},
-		"async": {
-			"timeout": 20000
-		},
-		"title": "江苏赢伟达资产管理有限公司",
-		"optimization": {
-			"treeShaking": {
-				"enable": true
-			}
-		}
-	},
-	"vueVersion": "3",
-	"_spaceID": "192b4892-5452-4e1d-9f09-eee1ece40639",
-	"locale": "zh-Hans",
-	"fallbackLocale": "zh-Hans"
+  "name": "江苏赢伟达资产管理有限公司",
+  "appid": "__UNI__F082C69",
+  "description": "基于 uni-app + Vue3 技术驱动的在线商城系统，内含诸多功能与丰富的活动，期待您的使用和反馈。",
+  "versionName": "2.1.0",
+  "versionCode": "183",
+  "transformPx": false,
+  "app-plus": {
+    "usingComponents": true,
+    "nvueCompiler": "uni-app",
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "nvueLaunchMode": "fast",
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
+    },
+    "safearea": {
+      "bottom": {
+        "offset": "none"
+      }
+    },
+    "modules": {
+      "Payment": {},
+      "Share": {},
+      "VideoPlayer": {},
+      "OAuth": {}
+    },
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.GET_TASKS\"/>",
+          "<uses-permission android:name=\"android.permission.INTERNET\"/>",
+          "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_SMS\"/>",
+          "<uses-permission android:name=\"android.permission.RECEIVE_BOOT_COMPLETED\"/>",
+          "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+          "<uses-permission android:name=\"android.permission.SEND_SMS\"/>",
+          "<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SMS\"/>",
+          "<uses-permission android:name=\"android.permission.RECEIVE_USER_PRESENT\"/>"
+        ],
+        "minSdkVersion": 21,
+        "schemes": "shopro"
+      },
+      "ios": {
+        "urlschemewhitelist": [
+          "baidumap",
+          "iosamap"
+        ],
+        "dSYMs": false,
+        "privacyDescription": {
+          "NSPhotoLibraryUsageDescription": "需要同意访问您的相册选取图片才能完善该条目",
+          "NSPhotoLibraryAddUsageDescription": "需要同意访问您的相册才能保存该图片",
+          "NSCameraUsageDescription": "需要同意访问您的摄像头拍摄照片才能完善该条目",
+          "NSUserTrackingUsageDescription": "开启追踪并不会获取您在其它站点的隐私信息,该行为仅用于标识设备,保障服务安全和提升浏览体验"
+        },
+        "urltypes": "shopro",
+        "capabilities": {
+          "entitlements": {
+            "com.apple.developer.associated-domains": [
+              "applinks:shopro.sheepjs.com"
+            ]
+          }
+        },
+        "idfa": true
+      },
+      "sdkConfigs": {
+        "speech": {
+          "ifly": {}
+        },
+        "ad": {},
+        "oauth": {
+          "apple": {},
+          "weixin": {
+            "appid": "wxae7a0c156da9383b",
+            "UniversalLinks": "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
+          }
+        },
+        "payment": {
+          "weixin": {
+            "__platform__": [
+              "ios",
+              "android"
+            ],
+            "appid": "wxae7a0c156da9383b",
+            "UniversalLinks": "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
+          },
+          "alipay": {
+            "__platform__": [
+              "ios",
+              "android"
+            ]
+          }
+        },
+        "share": {
+          "weixin": {
+            "appid": "wxae7a0c156da9383b",
+            "UniversalLinks": "https://shopro.sheepjs.com/uni-universallinks/__UNI__082C0BA/"
+          }
+        }
+      },
+      "orientation": [
+        "portrait-primary"
+      ],
+      "splashscreen": {
+        "androidStyle": "common",
+        "iosStyle": "common",
+        "useOriginalMsgbox": true
+      },
+      "icons": {
+        "android": {
+          "hdpi": "unpackage/res/icons/72x72.png",
+          "xhdpi": "unpackage/res/icons/96x96.png",
+          "xxhdpi": "unpackage/res/icons/144x144.png",
+          "xxxhdpi": "unpackage/res/icons/192x192.png"
+        },
+        "ios": {
+          "appstore": "unpackage/res/icons/1024x1024.png",
+          "ipad": {
+            "app": "unpackage/res/icons/76x76.png",
+            "app@2x": "unpackage/res/icons/152x152.png",
+            "notification": "unpackage/res/icons/20x20.png",
+            "notification@2x": "unpackage/res/icons/40x40.png",
+            "proapp@2x": "unpackage/res/icons/167x167.png",
+            "settings": "unpackage/res/icons/29x29.png",
+            "settings@2x": "unpackage/res/icons/58x58.png",
+            "spotlight": "unpackage/res/icons/40x40.png",
+            "spotlight@2x": "unpackage/res/icons/80x80.png"
+          },
+          "iphone": {
+            "app@2x": "unpackage/res/icons/120x120.png",
+            "app@3x": "unpackage/res/icons/180x180.png",
+            "notification@2x": "unpackage/res/icons/40x40.png",
+            "notification@3x": "unpackage/res/icons/60x60.png",
+            "settings@2x": "unpackage/res/icons/58x58.png",
+            "settings@3x": "unpackage/res/icons/87x87.png",
+            "spotlight@2x": "unpackage/res/icons/80x80.png",
+            "spotlight@3x": "unpackage/res/icons/120x120.png"
+          }
+        }
+      }
+    }
+  },
+  "quickapp": {},
+  "quickapp-native": {
+    "icon": "/static/logo.png",
+    "package": "com.example.demo",
+    "features": [
+      {
+        "name": "system.clipboard"
+      }
+    ]
+  },
+  "quickapp-webview": {
+    "icon": "/static/logo.png",
+    "package": "com.example.demo",
+    "minPlatformVersion": 1070,
+    "versionName": "1.0.0",
+    "versionCode": 100
+  },
+  "mp-weixin": {
+    "appid": "wx66186af0759f47c9",
+    "setting": {
+      "urlCheck": false,
+      "minified": true,
+      "postcss": false,
+      "es6": true
+    },
+    "optimization": {
+      "subPackages": true
+    },
+    "plugins": {},
+    "lazyCodeLoading": "requiredComponents",
+    "usingComponents": {},
+    "permission": {},
+    "requiredPrivateInfos": [
+      "chooseAddress"
+    ]
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "mp-jd": {
+    "usingComponents": true
+  },
+  "h5": {
+    "template": "index.html",
+    "router": {
+      "mode": "history",
+      "base": "/mail"
+    },
+    "sdkConfigs": {
+      "maps": {}
+    },
+    "async": {
+      "timeout": 20000
+    },
+    "title": "江苏赢伟达资产管理有限公司",
+    "optimization": {
+      "treeShaking": {
+        "enable": true
+      }
+    }
+  },
+  "vueVersion": "3",
+  "_spaceID": "192b4892-5452-4e1d-9f09-eee1ece40639",
+  "locale": "zh-Hans",
+  "fallbackLocale": "zh-Hans"
 }

pages.json

@@ -61,6 +61,18 @@
         "navigationBarTitleText": "登录"
       }
     },
+
+    {
+      "path": "pages/customerService/index",
+      "style": {
+        "navigationBarTitleText": "客服"
+      },
+      "meta": {
+        "sync": true,
+        "title": "客服",
+        "group": "客服"
+      }
+    },
     {
       "path": "pages/ai/index",
       "style": {
@@ -68,8 +80,8 @@
       },
       "meta": {
         "sync": true,
-        "title": "搜索",
-        "group": "商城"
+        "title": "ai",
+        "group": "ai"
       }
     },
     {

pages/customerService/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <s-layout>
+    <view class="customer-service">
+      <view class="title">联系客服</view>
+      <view class="subtitle">我们随时为您服务</view>
+      <view class="qrcode-container">
+        <view class="qrcode-item">
+          <view class="qrcode-wrapper">
+            <image class="qrcode" src="/static/images/qrcode1.jpg" mode="aspectFit"></image>
+          </view>
+          <view class="desc">
+            <text class="name">客服小美</text>
+            <text class="tag">主营业务咨询</text>
+          </view>
+        </view>
+        <view class="qrcode-item">
+          <view class="qrcode-wrapper">
+            <image class="qrcode" src="/static/images/qrcode2.jpg" mode="aspectFit"></image>
+          </view>
+          <view class="desc">
+            <text class="name">客服小丽</text>
+            <text class="tag">售后服务专员</text>
+          </view>
+        </view>
+      </view>
+      <view class="tips">
+        <text class="tips-icon">💡</text>
+        <text>扫描以上二维码添加客服微信</text>
+      </view>
+      <view class="contact-time">服务时间: 周一至周日 9:00-21:00</view>
+    </view>
+  </s-layout>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.customer-service {
+  padding: 40rpx;
+  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
+  // min-height: 100vh;
+
+  .title {
+    font-size: 44rpx;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20rpx;
+    color: #333;
+  }
+
+  .subtitle {
+    font-size: 28rpx;
+    color: #666;
+    text-align: center;
+    margin-bottom: 60rpx;
+  }
+
+  .qrcode-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-bottom: 50rpx;
+
+    .qrcode-item {
+      text-align: center;
+
+      .qrcode-wrapper {
+        background: #fff;
+        padding: 20rpx;
+        border-radius: 20rpx;
+        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
+        margin-bottom: 30rpx;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-5rpx);
+          box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.1);
+        }
+
+        .qrcode {
+          width: 280rpx;
+          height: 280rpx;
+          border-radius: 10rpx;
+        }
+      }
+
+      .desc {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10rpx;
+
+        .name {
+          font-size: 32rpx;
+          color: #333;
+          font-weight: 500;
+        }
+
+        .tag {
+          font-size: 24rpx;
+          color: #666;
+          background: #f5f6f7;
+          padding: 6rpx 20rpx;
+          border-radius: 20rpx;
+        }
+      }
+    }
+  }
+
+  .tips {
+    font-size: 28rpx;
+    color: #666;
+    text-align: center;
+    margin-bottom: 30rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10rpx;
+
+    .tips-icon {
+      font-size: 32rpx;
+    }
+  }
+
+  .contact-time {
+    font-size: 26rpx;
+    color: #999;
+    text-align: center;
+    padding: 20rpx;
+    background: #f8f9fa;
+    border-radius: 10rpx;
+  }
+}
+</style>

pages/goods/index.vue

@@ -7,33 +7,17 @@
       <!-- 骨架屏 -->
       <detailSkeleton v-if="state.skeletonLoading" />
       <!-- 下架/售罄提醒 -->
-      <s-empty
-        v-else-if="state.goodsInfo === null"
-        text="商品不存在或已下架"
-        icon="/static/soldout-empty.png"
-        showAction
-        actionText="再逛逛"
-        actionUrl="/pages/goods/list"
-      />
+      <s-empty v-else-if="state.goodsInfo === null" text="商品不存在或已下架" icon="/static/soldout-empty.png" showAction
+        actionText="再逛逛" actionUrl="/pages/goods/list" />
       <block v-else>
         <view class="detail-swiper-selector">
           <!-- 商品轮播图  -->
-          <su-swiper
-            class="ss-m-b-14"
-            isPreview
-            :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
-            otStyle="tag"
-            imageMode="widthFix"
-            dotCur="bg-mask-40"
-            :seizeHeight="750"
-          />
+          <su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)" otStyle="tag"
+            imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
           <!-- 限时折扣/会员价的优惠信息 -->
-          <view
-            class="discount"
-            v-if="
-              state.settlementSku && state.settlementSku.id && state.settlementSku.promotionPrice
-            "
-          >
+          <view class="discount" v-if="
+            state.settlementSku && state.settlementSku.id && state.settlementSku.promotionPrice
+          ">
             <image class="disImg" :src="sheep.$url.static('/static/img/shop/goods/dis.png')" />
             <view class="discountCont">
               <view class="disContT">
@@ -60,16 +44,8 @@
                 </view>
                 <view class="disContB2" v-if="state.settlementSku.promotionEndTime > 0">
                   距结束仅剩
-                  <countDown
-                    :tipText="' '"
-                    :bgColor="bgColor"
-                    :dayText="':'"
-                    :hourText="':'"
-                    :minuteText="':'"
-                    :secondText="' '"
-                    :datatime="state.settlementSku.promotionEndTime / 1000"
-                    :isDay="false"
-                  />
+                  <countDown :tipText="' '" :bgColor="bgColor" :dayText="':'" :hourText="':'" :minuteText="':'"
+                    :secondText="' '" :datatime="state.settlementSku.promotionEndTime / 1000" :isDay="false" />
                 </view>
               </view>
             </view>
@@ -77,10 +53,7 @@
           <!-- 价格+标题 -->
           <view class="title-card detail-card ss-p-y-30 ss-p-x-20">
             <!-- 没有限时折扣/会员价的优惠信息时，展示的价格信息 -->
-            <view
-              class="ss-flex ss-row-between ss-col-center ss-m-b-26"
-              v-if="!state.settlementSku.promotionPrice"
-            >
+            <view class="ss-flex ss-row-between ss-col-center ss-m-b-26" v-if="!state.settlementSku.promotionPrice">
               <view class="price-box ss-flex ss-col-bottom">
                 <view class="price-text ss-m-r-16">
                   {{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
@@ -95,12 +68,8 @@
             </view>
             <view class="discounts-box ss-flex ss-row-between ss-m-b-28">
               <!-- 查看优惠劵的描述 -->
-              <view
-                class="tag ss-m-r-10"
-                v-for="coupon in state.couponInfo.slice(0, 1)"
-                :key="coupon.id"
-                @tap="onOpenActivity"
-              >
+              <view class="tag ss-m-r-10" v-for="coupon in state.couponInfo.slice(0, 1)" :key="coupon.id"
+                @tap="onOpenActivity">
                 [劵]满{{ fen2yuanSimple(coupon.usePrice) }}元{{
                   coupon.discountType === 1
                     ? '减' + fen2yuanSimple(coupon.discountPrice) + '元'
@@ -111,24 +80,17 @@
               <div class="tag-content">
                 <view class="tag-box ss-flex">
                   <!-- 最多打印 3 条，所以需要扣除优惠劵已打印的 -->
-                  <view
-                    v-for="item in getRewardActivityRuleItemDescriptions(
-                      state.rewardActivity,
-                    ).slice(0, 3 - state.couponInfo.slice(0, 1).length)"
-                    :key="item"
-                    class="tag ss-m-r-10"
-                    @tap="onOpenActivity"
-                  >
+                  <view v-for="item in getRewardActivityRuleItemDescriptions(
+                    state.rewardActivity,
+                  ).slice(0, 3 - state.couponInfo.slice(0, 1).length)" :key="item" class="tag ss-m-r-10"
+                    @tap="onOpenActivity">
                     <text>{{ item }}</text>
                   </view>
                 </view>
               </div>
               <!-- 领取优惠劵的按钮 -->
-              <view
-                class="get-coupon-box ss-flex ss-col-center ss-m-l-20"
-                @tap="onOpenActivity"
-                v-if="state.couponInfo.length"
-              >
+              <view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="onOpenActivity"
+                v-if="state.couponInfo.length">
                 <view class="discounts-title ss-m-r-8">领券</view>
                 <text class="cicon-forward"></text>
               </view>
@@ -139,51 +101,30 @@
 
           <!-- 功能卡片 -->
           <view class="detail-cell-card detail-card ss-flex-col">
-            <detail-cell-sku
-              v-model="state.selectedSku.goods_sku_text"
-              :sku="state.selectedSku"
-              @tap="state.showSelectSku = true"
-            />
+            <detail-cell-sku v-model="state.selectedSku.goods_sku_text" :sku="state.selectedSku"
+              @tap="state.showSelectSku = true" />
           </view>
 
           <!-- 规格与数量弹框 -->
-          <s-select-sku
-            :goodsInfo="state.goodsInfo"
-            :show="state.showSelectSku"
-            @addCart="onAddCart"
-            @buy="onBuy"
-            @change="onSkuChange"
-            @close="state.showSelectSku = false"
-          />
+          <s-select-sku :goodsInfo="state.goodsInfo" :show="state.showSelectSku" @addCart="onAddCart" @buy="onBuy"
+            @change="onSkuChange" @close="state.showSelectSku = false" />
         </view>
 
         <!-- 评价 -->
         <detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
         <!-- 详情 -->
-        <detail-content-card
-          class="detail-content-selector"
-          :content="state.goodsInfo.description"
-        />
+        <detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
 
         <!-- 活动跳转：拼团/秒杀/砍价活动 -->
-        <detail-activity-tip
-          v-if="state.activityList.length > 0"
-          :activity-list="state.activityList"
-        />
+        <detail-activity-tip v-if="state.activityList.length > 0" :activity-list="state.activityList" />
 
         <!-- 详情 tabbar -->
         <detail-tabbar v-model="state.goodsInfo">
           <view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
-            <button
-              class="ss-reset-button add-btn ui-Shadow-Main"
-              @tap="state.showSelectSku = true"
-            >
+            <button class="ss-reset-button add-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
               加入购物车
             </button>
-            <button
-              class="ss-reset-button buy-btn ui-Shadow-Main"
-              @tap="state.showSelectSku = true"
-            >
+            <button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
               立即购买
             </button>
           </view>
@@ -193,478 +134,474 @@
         </detail-tabbar>
 
         <!-- 满减送/限时折扣活动弹窗 -->
-        <s-activity-pop
-          v-model="state"
-          :show="state.showActivityModel"
-          @close="state.showActivityModel = false"
-          @get="onTakeCoupon"
-        />
+        <s-activity-pop v-model="state" :show="state.showActivityModel" @close="state.showActivityModel = false"
+          @get="onTakeCoupon" />
       </block>
     </s-layout>
   </view>
 </template>
 
 <script setup>
-  import { reactive, computed, ref, toRaw } from 'vue';
-  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
-  import sheep from '@/sheep';
-  import CouponApi from '@/sheep/api/promotion/coupon';
-  import ActivityApi from '@/sheep/api/promotion/activity';
-  import FavoriteApi from '@/sheep/api/product/favorite';
-  import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
-  import {
-    formatSales,
-    formatGoodsSwiper,
-    fen2yuan,
-    fen2yuanSimple,
-    formatDiscountPercent,
-    getRewardActivityRuleItemDescriptions,
-  } from '@/sheep/hooks/useGoods';
-  import detailNavbar from './components/detail/detail-navbar.vue';
-  import detailCellSku from './components/detail/detail-cell-sku.vue';
-  import detailTabbar from './components/detail/detail-tabbar.vue';
-  import detailSkeleton from './components/detail/detail-skeleton.vue';
-  import detailCommentCard from './components/detail/detail-comment-card.vue';
-  import detailContentCard from './components/detail/detail-content-card.vue';
-  import detailActivityTip from './components/detail/detail-activity-tip.vue';
-  import { isEmpty } from 'lodash-es';
-  import SpuApi from '@/sheep/api/product/spu';
-
-  onPageScroll(() => {});
-  import countDown from '@/sheep/components/countDown/index.vue';
-  import OrderApi from '@/sheep/api/trade/order';
-  import activity from '@/sheep/api/promotion/activity';
-  import { SharePageEnum } from '@/sheep/util/const';
-
-  const bgColor = {
-    bgColor: '#E93323',
-    Color: '#fff',
-    width: '44rpx',
-    timeTxtwidth: '16rpx',
-    isDay: true,
-  };
-  const isLogin = computed(() => sheep.$store('user').isLogin);
-  const state = reactive({
-    goodsId: 0,
-    skeletonLoading: true, // SPU 加载中
-    goodsInfo: {}, // SPU 信息
-    showSelectSku: false, // 是否展示 SKU 选择弹窗
-    selectedSku: {}, // 选中的 SKU
-    settlementSku: {}, // 结算的 SKU：由于 selectedSku 不进行默认选中，所以初始使用结算价格最低的 SKU 作为基础展示
-    showModel: false, // 是否展示 Coupon 优惠劵的弹窗
-    couponInfo: [], // 可领取的 Coupon 优惠劵的列表
-    showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
-    rewardActivity: {}, // 【满减送】活动
-    activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
-  });
-
-  // 规格变更
-  function onSkuChange(e) {
-    state.selectedSku = e;
-    state.settlementSku = e;
+import { reactive, computed, ref, toRaw } from 'vue';
+import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+import sheep from '@/sheep';
+import CouponApi from '@/sheep/api/promotion/coupon';
+import ActivityApi from '@/sheep/api/promotion/activity';
+import FavoriteApi from '@/sheep/api/product/favorite';
+import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
+import {
+  formatSales,
+  formatGoodsSwiper,
+  fen2yuan,
+  fen2yuanSimple,
+  formatDiscountPercent,
+  getRewardActivityRuleItemDescriptions,
+} from '@/sheep/hooks/useGoods';
+import detailNavbar from './components/detail/detail-navbar.vue';
+import detailCellSku from './components/detail/detail-cell-sku.vue';
+import detailTabbar from './components/detail/detail-tabbar.vue';
+import detailSkeleton from './components/detail/detail-skeleton.vue';
+import detailCommentCard from './components/detail/detail-comment-card.vue';
+import detailContentCard from './components/detail/detail-content-card.vue';
+import detailActivityTip from './components/detail/detail-activity-tip.vue';
+import { isEmpty } from 'lodash-es';
+import SpuApi from '@/sheep/api/product/spu';
+
+onPageScroll(() => { });
+import countDown from '@/sheep/components/countDown/index.vue';
+import OrderApi from '@/sheep/api/trade/order';
+import activity from '@/sheep/api/promotion/activity';
+import { SharePageEnum } from '@/sheep/util/const';
+
+const bgColor = {
+  bgColor: '#E93323',
+  Color: '#fff',
+  width: '44rpx',
+  timeTxtwidth: '16rpx',
+  isDay: true,
+};
+const isLogin = computed(() => sheep.$store('user').isLogin);
+const state = reactive({
+  goodsId: 0,
+  skeletonLoading: true, // SPU 加载中
+  goodsInfo: {}, // SPU 信息
+  showSelectSku: false, // 是否展示 SKU 选择弹窗
+  selectedSku: {}, // 选中的 SKU
+  settlementSku: {}, // 结算的 SKU：由于 selectedSku 不进行默认选中，所以初始使用结算价格最低的 SKU 作为基础展示
+  showModel: false, // 是否展示 Coupon 优惠劵的弹窗
+  couponInfo: [], // 可领取的 Coupon 优惠劵的列表
+  showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
+  rewardActivity: {}, // 【满减送】活动
+  activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
+});
+
+// 规格变更
+function onSkuChange(e) {
+  state.selectedSku = e;
+  state.settlementSku = e;
+}
+
+// 添加购物车
+function onAddCart(e) {
+  if (!e.id) {
+    sheep.$helper.toast('请选择商品规格');
+    return;
   }
-
-  // 添加购物车
-  function onAddCart(e) {
-    if (!e.id) {
-      sheep.$helper.toast('请选择商品规格');
-      return;
-    }
-    sheep.$store('cart').add(e);
+  sheep.$store('cart').add(e);
+}
+
+// 立即购买
+function onBuy(e) {
+  if (!e.id) {
+    sheep.$helper.toast('请选择商品规格');
+    return;
   }
-
-  // 立即购买
-  function onBuy(e) {
-    if (!e.id) {
-      sheep.$helper.toast('请选择商品规格');
-      return;
-    }
-    sheep.$router.go('/pages/order/confirm', {
-      data: JSON.stringify({
-        items: [
-          {
-            skuId: e.id,
-            count: e.goods_num,
-            categoryId: state.goodsInfo.categoryId,
-          },
-        ],
-      }),
-    });
+  sheep.$router.go('/pages/order/confirm', {
+    data: JSON.stringify({
+      items: [
+        {
+          skuId: e.id,
+          count: e.goods_num,
+          categoryId: state.goodsInfo.categoryId,
+        },
+      ],
+    }),
+  });
+}
+
+// 打开营销弹窗
+function onOpenActivity() {
+  state.showActivityModel = true;
+}
+
+// 立即领取优惠劵
+async function onTakeCoupon(id) {
+  const { code } = await CouponApi.takeCoupon(id);
+  if (code !== 0) {
+    return;
   }
-
-  // 打开营销弹窗
-  function onOpenActivity() {
-    state.showActivityModel = true;
+  uni.showToast({
+    title: '领取成功',
+  });
+  setTimeout(() => {
+    getCoupon();
+  }, 1000);
+}
+
+const shareInfo = computed(() => {
+  if (isEmpty(state.goodsInfo)) return {};
+  return sheep.$platform.share.getShareInfo(
+    {
+      title: state.goodsInfo.name,
+      image: sheep.$url.cdn(state.goodsInfo.picUrl),
+      desc: state.goodsInfo.introduction,
+      params: {
+        page: SharePageEnum.GOODS.value,
+        query: state.goodsInfo.id,
+      },
+    },
+    {
+      type: 'goods', // 商品海报
+      title: state.goodsInfo.name, // 商品名称
+      image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
+      price: fen2yuan(state.goodsInfo.price), // 商品价格
+      original_price: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
+    },
+  );
+});
+
+async function getCoupon() {
+  const { code, data } = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
+  if (code === 0) {
+    state.couponInfo = data;
   }
+}
 
-  // 立即领取优惠劵
-  async function onTakeCoupon(id) {
-    const { code } = await CouponApi.takeCoupon(id);
-    if (code !== 0) {
-      return;
-    }
-    uni.showToast({
-      title: '领取成功',
-    });
-    setTimeout(() => {
-      getCoupon();
-    }, 1000);
+async function getSettlementByIds(ids) {
+  let { data, code } = await OrderApi.getSettlementProduct(ids);
+  if (code !== 0 || data.length !== 1) {
+    return;
   }
-
-  const shareInfo = computed(() => {
-    if (isEmpty(state.goodsInfo)) return {};
-    return sheep.$platform.share.getShareInfo(
-      {
-        title: state.goodsInfo.name,
-        image: sheep.$url.cdn(state.goodsInfo.picUrl),
-        desc: state.goodsInfo.introduction,
-        params: {
-          page: SharePageEnum.GOODS.value,
-          query: state.goodsInfo.id,
-        },
-      },
-      {
-        type: 'goods', // 商品海报
-        title: state.goodsInfo.name, // 商品名称
-        image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
-        price: fen2yuan(state.goodsInfo.price), // 商品价格
-        original_price: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
-      },
-    );
+  data = data[0];
+
+  // 补充 SKU 的价格信息
+  state.goodsInfo.skus.forEach((sku) => {
+    data.skus.forEach((item) => {
+      if (sku.id === item.id) {
+        sku.promotionType = item.promotionType;
+        sku.promotionPrice = item.promotionPrice;
+        sku.promotionId = item.promotionId;
+        sku.promotionEndTime = item.promotionEndTime;
+      }
+    });
   });
 
-  async function getCoupon() {
-    const { code, data } = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
-    if (code === 0) {
-      state.couponInfo = data;
-    }
+  // 选择有 promotionPrice 且最小的
+  state.settlementSku = state.goodsInfo.skus
+    .filter((sku) => sku.stock > 0 && sku.promotionPrice > 0)
+    .reduce((prev, curr) => (prev.promotionPrice < curr.promotionPrice ? prev : curr), []);
+
+  // 设置满减送活动
+  if (data.rewardActivity) {
+    state.rewardActivity = data.rewardActivity;
+    //获取活动时间
+    getActivityTime(state.rewardActivity.id);
+  }
+}
+
+//获取活动时间
+async function getActivityTime(id) {
+  const { code, data } = await RewardActivityApi.getRewardActivity(id);
+  if (code === 0) {
+    // console.log('获取到的活动 数据', data)
+    state.rewardActivity.startTime = data.startTime;
+    state.rewardActivity.endTime = data.endTime;
   }
+}
 
-  async function getSettlementByIds(ids) {
-    let { data, code } = await OrderApi.getSettlementProduct(ids);
-    if (code !== 0 || data.length !== 1) {
+onLoad((options) => {
+  // 非法参数
+  if (!options.id) {
+    state.goodsInfo = null;
+    return;
+  }
+  state.goodsId = options.id;
+  // 1. 加载商品信息
+  SpuApi.getSpuDetail(state.goodsId).then((res) => {
+    // 未找到商品
+    if (res.code !== 0 || !res.data) {
+      state.goodsInfo = null;
       return;
     }
-    data = data[0];
-
-    // 补充 SKU 的价格信息
-    state.goodsInfo.skus.forEach((sku) => {
-      data.skus.forEach((item) => {
-        if (sku.id === item.id) {
-          sku.promotionType = item.promotionType;
-          sku.promotionPrice = item.promotionPrice;
-          sku.promotionId = item.promotionId;
-          sku.promotionEndTime = item.promotionEndTime;
+    // 加载到商品
+    state.skeletonLoading = false;
+    state.goodsInfo = res.data;
+    // 加载是否收藏
+    if (isLogin.value) {
+      FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => {
+        if (res.code !== 0) {
+          return;
         }
+        state.goodsInfo.favorite = res.data;
       });
-    });
-
-    // 选择有 promotionPrice 且最小的
-    state.settlementSku = state.goodsInfo.skus
-      .filter((sku) => sku.stock > 0 && sku.promotionPrice > 0)
-      .reduce((prev, curr) => (prev.promotionPrice < curr.promotionPrice ? prev : curr), []);
-
-    // 设置满减送活动
-    if (data.rewardActivity) {
-      state.rewardActivity = data.rewardActivity;
-      //获取活动时间
-      getActivityTime(state.rewardActivity.id);
     }
-  }
+  });
 
-  //获取活动时间
-  async function getActivityTime(id) {
-    const { code, data } = await RewardActivityApi.getRewardActivity(id);
-    if (code === 0) {
-      // console.log('获取到的活动 数据', data)
-      state.rewardActivity.startTime = data.startTime;
-      state.rewardActivity.endTime = data.endTime;
-    }
-  }
+  // 2. 加载优惠劵信息
+  getCoupon();
 
-  onLoad((options) => {
-    // 非法参数
-    if (!options.id) {
-      state.goodsInfo = null;
+  // 3. 加载营销活动信息
+  ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
+    if (res.code !== 0) {
       return;
     }
-    state.goodsId = options.id;
-    // 1. 加载商品信息
-    SpuApi.getSpuDetail(state.goodsId).then((res) => {
-      // 未找到商品
-      if (res.code !== 0 || !res.data) {
-        state.goodsInfo = null;
-        return;
-      }
-      // 加载到商品
-      state.skeletonLoading = false;
-      state.goodsInfo = res.data;
-      // 加载是否收藏
-      if (isLogin.value) {
-        FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => {
-          if (res.code !== 0) {
-            return;
-          }
-          state.goodsInfo.favorite = res.data;
-        });
-      }
-    });
-
-    // 2. 加载优惠劵信息
-    getCoupon();
-
-    // 3. 加载营销活动信息
-    ActivityApi.getActivityListBySpuId(state.goodsId).then((res) => {
-      if (res.code !== 0) {
-        return;
-      }
-      state.activityList = res.data;
-    });
-    //获取结算信息
-    getSettlementByIds(state.goodsId);
+    state.activityList = res.data;
   });
+  //获取结算信息
+  getSettlementByIds(state.goodsId);
+});
 </script>
 
 <style lang="scss" scoped>
-  .detail-card {
-    background-color: #ffff;
-    margin: 14rpx 20rpx;
-    border-radius: 10rpx;
-    overflow: hidden;
-  }
-
-  // 价格标题卡片
-  .title-card {
-    .price-box {
-      .price-text {
-        font-size: 42rpx;
-        font-weight: 500;
-        color: #ff3000;
-        line-height: 30rpx;
-        font-family: OPPOSANS;
-
-        &::before {
-          content: '￥';
-          font-size: 30rpx;
-        }
-      }
-
-      .origin-price-text {
-        font-size: 26rpx;
-        font-weight: 400;
-        text-decoration: line-through;
-        color: $gray-c;
-        font-family: OPPOSANS;
+.detail-card {
+  background-color: #ffff;
+  margin: 14rpx 20rpx;
+  border-radius: 10rpx;
+  overflow: hidden;
+}
+
+// 价格标题卡片
+.title-card {
+  .price-box {
+    .price-text {
+      font-size: 42rpx;
+      font-weight: 500;
+      color: #ff3000;
+      line-height: 30rpx;
+      font-family: OPPOSANS;
 
-        &::before {
-          content: '￥';
-        }
+      &::before {
+        content: '￥';
+        font-size: 30rpx;
       }
     }
 
-    .sales-text {
+    .origin-price-text {
       font-size: 26rpx;
-      font-weight: 500;
+      font-weight: 400;
+      text-decoration: line-through;
       color: $gray-c;
-    }
-
-    .discounts-box {
-      .tag-content {
-        flex: 1;
-        min-width: 0;
-        white-space: nowrap;
-      }
-
-      .tag-box {
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+      font-family: OPPOSANS;
 
-      .tag {
-        flex-shrink: 0;
-        padding: 4rpx 10rpx;
-        font-size: 24rpx;
-        font-weight: 500;
-        border-radius: 4rpx;
-        color: var(--ui-BG-Main);
-        background: var(--ui-BG-Main-tag);
-      }
-
-      .discounts-title {
-        font-size: 24rpx;
-        font-weight: 500;
-        color: var(--ui-BG-Main);
-        line-height: normal;
-      }
-
-      .cicon-forward {
-        color: var(--ui-BG-Main);
-        font-size: 24rpx;
-        line-height: normal;
-        margin-top: 4rpx;
+      &::before {
+        content: '￥';
       }
     }
+  }
+
+  .sales-text {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: $gray-c;
+  }
 
-    .title-text {
-      font-size: 30rpx;
-      font-weight: bold;
-      line-height: 42rpx;
+  .discounts-box {
+    .tag-content {
+      flex: 1;
+      min-width: 0;
+      white-space: nowrap;
     }
 
-    .subtitle-text {
-      font-size: 26rpx;
-      font-weight: 400;
-      color: $dark-9;
-      line-height: 42rpx;
+    .tag-box {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-  }
 
-  // 购买
-  .buy-box {
-    .add-btn {
-      width: 214rpx;
-      height: 72rpx;
+    .tag {
+      flex-shrink: 0;
+      padding: 4rpx 10rpx;
+      font-size: 24rpx;
       font-weight: 500;
-      font-size: 28rpx;
-      border-radius: 40rpx 0 0 40rpx;
-      background-color: var(--ui-BG-Main-light);
+      border-radius: 4rpx;
       color: var(--ui-BG-Main);
+      background: var(--ui-BG-Main-tag);
     }
 
-    .buy-btn {
-      width: 214rpx;
-      height: 72rpx;
+    .discounts-title {
+      font-size: 24rpx;
       font-weight: 500;
-      font-size: 28rpx;
-
-      border-radius: 0 40rpx 40rpx 0;
-      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
-      color: $white;
+      color: var(--ui-BG-Main);
+      line-height: normal;
     }
 
-    .disabled-btn {
-      width: 428rpx;
-      height: 72rpx;
-      border-radius: 40rpx;
-      background: #999999;
-      color: $white;
+    .cicon-forward {
+      color: var(--ui-BG-Main);
+      font-size: 24rpx;
+      line-height: normal;
+      margin-top: 4rpx;
     }
   }
 
-  .model-box {
-    height: 60vh;
-
-    .model-content {
-      height: 56vh;
-    }
-
-    .title {
-      font-size: 36rpx;
-      font-weight: bold;
-      color: #333333;
-    }
-
-    .subtitle {
-      font-size: 26rpx;
-      font-weight: 500;
-      color: #333333;
-    }
+  .title-text {
+    font-size: 30rpx;
+    font-weight: bold;
+    line-height: 42rpx;
   }
 
-  // 限时折扣
-  .discount {
-    width: 750rpx;
-    height: 100rpx;
-    // background-color: red;
-    overflow: hidden;
-    position: relative;
+  .subtitle-text {
+    font-size: 26rpx;
+    font-weight: 400;
+    color: $dark-9;
+    line-height: 42rpx;
   }
-
-  .disImg {
-    width: 750rpx;
-    height: 100rpx;
-    position: absolute;
-    top: 0;
-    z-index: -1;
+}
+
+// 购买
+.buy-box {
+  .add-btn {
+    width: 214rpx;
+    height: 72rpx;
+    font-weight: 500;
+    font-size: 28rpx;
+    border-radius: 40rpx 0 0 40rpx;
+    background-color: var(--ui-BG-Main-light);
+    color: var(--ui-BG-Main);
   }
 
-  .discountCont {
-    width: 680rpx;
-    height: 90rpx;
-    margin: 10rpx auto 0 auto;
-    // background-color: gold;
-  }
+  .buy-btn {
+    width: 214rpx;
+    height: 72rpx;
+    font-weight: 500;
+    font-size: 28rpx;
 
-  .disContT {
-    width: 680rpx;
-    height: 50rpx;
-    display: flex;
-    justify-content: space-between;
+    border-radius: 0 40rpx 40rpx 0;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    color: $white;
   }
 
-  .disContT1 {
-    width: 400rpx;
-    height: 50rpx;
-    // background-color: green;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
+  .disabled-btn {
+    width: 428rpx;
+    height: 72rpx;
+    border-radius: 40rpx;
+    background: #999999;
+    color: $white;
   }
+}
 
-  .disContT2 {
-    width: 200rpx;
-    height: 50rpx;
-    line-height: 50rpx;
-    // background-color: gold;
-    font-size: 30rpx;
-    text-align: end;
-    color: white;
-    font-weight: bolder;
-    font-style: oblique 20deg;
-    letter-spacing: 0.1rem;
-  }
+.model-box {
+  height: 60vh;
 
-  .disContT1P {
-    color: white;
-    font-weight: bold;
-    font-size: 28rpx;
+  .model-content {
+    height: 56vh;
   }
 
-  .disContT1End {
-    // width: 180rpx;
-    padding: 0 10rpx;
-    height: 30rpx;
-    line-height: 28rpx;
-    text-align: center;
+  .title {
+    font-size: 36rpx;
     font-weight: bold;
-    background-color: white;
-    color: #ff3000;
-    font-size: 23rpx;
-    border-radius: 20rpx;
-    margin-left: 10rpx;
-  }
-
-  .disContB {
-    width: 680rpx;
-    height: 40rpx;
-    display: flex;
-    justify-content: space-between;
-    font-size: 20rpx;
-    color: white;
-    align-items: center;
-  }
-
-  .disContB1 {
-    width: 300rpx;
-    height: 40rpx;
-    line-height: 40rpx;
+    color: #333333;
   }
 
-  .disContB2 {
-    width: 300rpx;
-    height: 40rpx;
-    line-height: 40rpx;
-    display: flex;
-    justify-content: flex-end;
+  .subtitle {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #333333;
   }
+}
+
+// 限时折扣
+.discount {
+  width: 750rpx;
+  height: 100rpx;
+  // background-color: red;
+  overflow: hidden;
+  position: relative;
+}
+
+.disImg {
+  width: 750rpx;
+  height: 100rpx;
+  position: absolute;
+  top: 0;
+  z-index: -1;
+}
+
+.discountCont {
+  width: 680rpx;
+  height: 90rpx;
+  margin: 10rpx auto 0 auto;
+  // background-color: gold;
+}
+
+.disContT {
+  width: 680rpx;
+  height: 50rpx;
+  display: flex;
+  justify-content: space-between;
+}
+
+.disContT1 {
+  width: 400rpx;
+  height: 50rpx;
+  // background-color: green;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.disContT2 {
+  width: 200rpx;
+  height: 50rpx;
+  line-height: 50rpx;
+  // background-color: gold;
+  font-size: 30rpx;
+  text-align: end;
+  color: white;
+  font-weight: bolder;
+  font-style: oblique 20deg;
+  letter-spacing: 0.1rem;
+}
+
+.disContT1P {
+  color: white;
+  font-weight: bold;
+  font-size: 28rpx;
+}
+
+.disContT1End {
+  // width: 180rpx;
+  padding: 0 10rpx;
+  height: 30rpx;
+  line-height: 28rpx;
+  text-align: center;
+  font-weight: bold;
+  background-color: white;
+  color: #ff3000;
+  font-size: 23rpx;
+  border-radius: 20rpx;
+  margin-left: 10rpx;
+}
+
+.disContB {
+  width: 680rpx;
+  height: 40rpx;
+  display: flex;
+  justify-content: space-between;
+  font-size: 20rpx;
+  color: white;
+  align-items: center;
+}
+
+.disContB1 {
+  width: 300rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+}
+
+.disContB2 {
+  width: 300rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>

sheep/components/s-goods-card/s-goods-card.vue

@@ -3,28 +3,13 @@
   <!-- 商品卡片 -->
   <view>
     <!-- 布局1. 单列大图（上图，下内容）-->
-    <view
-      v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length"
-      class="goods-sl-box"
-    >
-      <view
-        class="goods-box"
-        v-for="item in state.goodsList"
-        :key="item.id"
-        :style="[{ marginBottom: data.space * 2 + 'rpx' }]"
-      >
-        <s-goods-column
-          class=""
-          size="sl"
-          :goodsFields="data.fields"
-          :tagStyle="data.badge"
-          :data="item"
-          :titleColor="data.fields.name?.color"
-          :subTitleColor="data.fields.introduction.color"
-          :topRadius="data.borderRadiusTop"
-          :bottomRadius="data.borderRadiusBottom"
-          @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
-        >
+    <view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length" class="goods-sl-box">
+      <view class="goods-box" v-for="item in state.goodsList" :key="item.id"
+        :style="[{ marginBottom: data.space * 2 + 'rpx' }]">
+        <s-goods-column class="" size="sl" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
+          :titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color"
+          :topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
+          @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
           <!-- 购买按钮 -->
           <template v-slot:cart>
             <button class="ss-reset-button cart-btn" :style="[buyStyle]">
@@ -36,31 +21,17 @@
     </view>
 
     <!-- 布局2. 双列（每一列：上图，下内容）-->
-    <view
-      v-if="layoutType === LayoutTypeEnum.TWO_COL && state.goodsList.length"
-      class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
-    >
+    <view v-if="layoutType === LayoutTypeEnum.TWO_COL && state.goodsList.length"
+      class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top">
       <view class="goods-list-box">
-        <view
-          class="left-list"
-          :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
-          v-for="item in state.leftGoodsList"
-          :key="item.id"
-        >
-          <s-goods-column
-            class="goods-md-box"
-            size="md"
-            :goodsFields="data.fields"
-            :tagStyle="data.badge"
-            :data="item"
-            :titleColor="data.fields.name?.color"
-            :subTitleColor="data.fields.introduction.color"
-            :topRadius="data.borderRadiusTop"
-            :bottomRadius="data.borderRadiusBottom"
+        <view class="left-list" :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
+          v-for="item in state.leftGoodsList" :key="item.id">
+          <s-goods-column class="goods-md-box" size="md" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
+            :titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color"
+            :topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
             :titleWidth="330 - marginLeft - marginRight"
             @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
-            @getHeight="calculateGoodsColumn($event, 'left')"
-          >
+            @getHeight="calculateGoodsColumn($event, 'left')">
             <!-- 购买按钮 -->
             <template v-slot:cart>
               <button class="ss-reset-button cart-btn" :style="[buyStyle]">
@@ -71,26 +42,14 @@
         </view>
       </view>
       <view class="goods-list-box">
-        <view
-          class="right-list"
-          :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
-          v-for="item in state.rightGoodsList"
-          :key="item.id"
-        >
-          <s-goods-column
-            class="goods-md-box"
-            size="md"
-            :goodsFields="data.fields"
-            :tagStyle="data.badge"
-            :data="item"
-            :titleColor="data.fields.name?.color"
-            :subTitleColor="data.fields.introduction.color"
-            :topRadius="data.borderRadiusTop"
-            :bottomRadius="data.borderRadiusBottom"
+        <view class="right-list" :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
+          v-for="item in state.rightGoodsList" :key="item.id">
+          <s-goods-column class="goods-md-box" size="md" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
+            :titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color"
+            :topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
             :titleWidth="330 - marginLeft - marginRight"
             @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
-            @getHeight="calculateGoodsColumn($event, 'right')"
-          >
+            @getHeight="calculateGoodsColumn($event, 'right')">
             <!-- 购买按钮 -->
             <template v-slot:cart>
               <button class="ss-reset-button cart-btn" :style="[buyStyle]">
@@ -103,31 +62,16 @@
     </view>
 
     <!-- 布局3. 单列小图（左图，右内容） -->
-    <view
-      v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length"
-      class="goods-lg-box"
-    >
-      <view
-        class="goods-box"
-        :style="[{ marginBottom: data.space + 'px' }]"
-        v-for="item in state.goodsList"
-        :key="item.id"
-      >
-        <s-goods-column
-          class="goods-card"
-          size="lg"
-          :goodsFields="data.fields"
-          :data="item"
-          :tagStyle="data.badge"
-          :titleColor="data.fields.name?.color"
-          :subTitleColor="data.fields.introduction.color"
-          :topRadius="data.borderRadiusTop"
-          :bottomRadius="data.borderRadiusBottom"
-          @tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
-        >
+    <view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length" class="goods-lg-box">
+      <view class="goods-box" :style="[{ marginBottom: data.space + 'px' }]" v-for="item in state.goodsList"
+        :key="item.id">
+        <s-goods-column class="goods-card" size="lg" :goodsFields="data.fields" :data="item" :tagStyle="data.badge"
+          :titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color"
+          :topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
+          @tap="sheep.$router.go('/pages/goods/index', { id: item.id })">
           <!-- 购买按钮 -->
           <template v-slot:cart>
-            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+            <button @click="lxkfClick()" class="ss-reset-button cart-btn" :style="[buyStyle]">
               {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
             </button>
           </template>
@@ -138,169 +82,172 @@
 </template>
 
 <script setup>
-  /**
-   * 商品卡片
-   */
-  import { computed, reactive, onMounted } from 'vue';
-  import sheep from '@/sheep';
-  import SpuApi from '@/sheep/api/product/spu';
-  import OrderApi from '@/sheep/api/trade/order';
-  import { appendSettlementProduct } from '@/sheep/hooks/useGoods';
-
-  // 布局类型
-  const LayoutTypeEnum = {
-    // 单列大图
-    ONE_COL_BIG_IMG: 'oneColBigImg',
-    // 双列
-    TWO_COL: 'twoCol',
-    // 单列小图
-    ONE_COL_SMALL_IMG: 'oneColSmallImg',
-  };
-
-  const state = reactive({
-    goodsList: [],
-    leftGoodsList: [],
-    rightGoodsList: [],
-  });
-  const props = defineProps({
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-    styles: {
-      type: Object,
-      default: () => ({}),
-    },
-  });
-
-  const { layoutType, btnBuy, spuIds } = props.data || {};
-  const { marginLeft, marginRight } = props.styles || {};
-
-  // 购买按钮样式
-  const buyStyle = computed(() => {
-    if (btnBuy.type === 'text') {
-      // 文字按钮：线性渐变背景颜色
-      return {
-        background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
-      };
-    }
-    if (btnBuy.type === 'img') {
-      // 图片按钮
-      return {
-        width: '54rpx',
-        height: '54rpx',
-        background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
-        backgroundSize: '100% 100%',
-      };
-    }
-  });
-
-  //region 商品瀑布流布局
-  // 下一个要处理的商品索引
-  let count = 0;
-  // 左列的高度
-  let leftHeight = 0;
-  // 右列的高度
-  let rightHeight = 0;
-
-  /**
-   * 计算商品在左列还是右列
-   * @param height 商品的高度
-   * @param where 添加到哪一列
-   */
-  function calculateGoodsColumn(height = 0, where = 'left') {
-    // 处理完
-    if (!state.goodsList[count]) return;
-    // 增加列的高度
-    if (where === 'left') leftHeight += height;
-    if (where === 'right') rightHeight += height;
-    // 添加到矮的一列
-    if (leftHeight <= rightHeight) {
-      state.leftGoodsList.push(state.goodsList[count]);
-    } else {
-      state.rightGoodsList.push(state.goodsList[count]);
-    }
-    // 计数
-    count++;
+/**
+ * 商品卡片
+ */
+import { computed, reactive, onMounted } from 'vue';
+import sheep from '@/sheep';
+import SpuApi from '@/sheep/api/product/spu';
+import OrderApi from '@/sheep/api/trade/order';
+import { appendSettlementProduct } from '@/sheep/hooks/useGoods';
+
+// 布局类型
+const LayoutTypeEnum = {
+  // 单列大图
+  ONE_COL_BIG_IMG: 'oneColBigImg',
+  // 双列
+  TWO_COL: 'twoCol',
+  // 单列小图
+  ONE_COL_SMALL_IMG: 'oneColSmallImg',
+};
+
+const state = reactive({
+  goodsList: [],
+  leftGoodsList: [],
+  rightGoodsList: [],
+});
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  styles: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { layoutType, btnBuy, spuIds } = props.data || {};
+const { marginLeft, marginRight } = props.styles || {};
+const lxkfClick = () => {
+  sheep.$router.go('/pages/customerService/index')
+}
+
+// 购买按钮样式
+const buyStyle = computed(() => {
+  if (btnBuy.type === 'text') {
+    // 文字按钮：线性渐变背景颜色
+    return {
+      background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
+    };
   }
-
-  //endregion
-
-  /**
-   * 根据商品编号列表，获取商品列表
-   * @param ids 商品编号列表
-   * @return {Promise<undefined>} 商品列表
-   */
-  async function getGoodsListByIds(ids) {
-    const { data } = await SpuApi.getSpuListByIds(ids);
-    return data;
+  if (btnBuy.type === 'img') {
+    // 图片按钮
+    return {
+      width: '54rpx',
+      height: '54rpx',
+      background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
+      backgroundSize: '100% 100%',
+    };
   }
-
-  // 初始化
-  onMounted(async () => {
-    // 加载商品列表
-    state.goodsList = await getGoodsListByIds(spuIds.join(','));
-    // 拼接结算信息（营销）
-    await OrderApi.getSettlementProduct(state.goodsList.map((item) => item.id).join(',')).then(
-      (res) => {
-        if (res.code !== 0) {
-          return;
-        }
-        appendSettlementProduct(state.goodsList, res.data);
-      },
-    );
-    // 只有双列布局时需要
-    if (layoutType === LayoutTypeEnum.TWO_COL) {
-      // 分列
-      calculateGoodsColumn();
-    }
-  });
+});
+
+//region 商品瀑布流布局
+// 下一个要处理的商品索引
+let count = 0;
+// 左列的高度
+let leftHeight = 0;
+// 右列的高度
+let rightHeight = 0;
+
+/**
+ * 计算商品在左列还是右列
+ * @param height 商品的高度
+ * @param where 添加到哪一列
+ */
+function calculateGoodsColumn(height = 0, where = 'left') {
+  // 处理完
+  if (!state.goodsList[count]) return;
+  // 增加列的高度
+  if (where === 'left') leftHeight += height;
+  if (where === 'right') rightHeight += height;
+  // 添加到矮的一列
+  if (leftHeight <= rightHeight) {
+    state.leftGoodsList.push(state.goodsList[count]);
+  } else {
+    state.rightGoodsList.push(state.goodsList[count]);
+  }
+  // 计数
+  count++;
+}
+
+//endregion
+
+/**
+ * 根据商品编号列表，获取商品列表
+ * @param ids 商品编号列表
+ * @return {Promise<undefined>} 商品列表
+ */
+async function getGoodsListByIds(ids) {
+  const { data } = await SpuApi.getSpuListByIds(ids);
+  return data;
+}
+
+// 初始化
+onMounted(async () => {
+  // 加载商品列表
+  state.goodsList = await getGoodsListByIds(spuIds.join(','));
+  // 拼接结算信息（营销）
+  await OrderApi.getSettlementProduct(state.goodsList.map((item) => item.id).join(',')).then(
+    (res) => {
+      if (res.code !== 0) {
+        return;
+      }
+      appendSettlementProduct(state.goodsList, res.data);
+    },
+  );
+  // 只有双列布局时需要
+  if (layoutType === LayoutTypeEnum.TWO_COL) {
+    // 分列
+    calculateGoodsColumn();
+  }
+});
 </script>
 
 <style lang="scss" scoped>
-  .goods-md-wrap {
-    width: 100%;
-  }
-
-  .goods-list-box {
-    width: 50%;
-    box-sizing: border-box;
+.goods-md-wrap {
+  width: 100%;
+}
 
-    .left-list {
-      &:nth-last-child(1) {
-        margin-bottom: 0 !important;
-      }
-    }
+.goods-list-box {
+  width: 50%;
+  box-sizing: border-box;
 
-    .right-list {
-      &:nth-last-child(1) {
-        margin-bottom: 0 !important;
-      }
+  .left-list {
+    &:nth-last-child(1) {
+      margin-bottom: 0 !important;
     }
   }
 
-  .goods-box {
-    &:nth-last-of-type(1) {
+  .right-list {
+    &:nth-last-child(1) {
       margin-bottom: 0 !important;
     }
   }
+}
 
-  .goods-md-box,
-  .goods-sl-box,
-  .goods-lg-box {
-    position: relative;
-
-    .cart-btn {
-      position: absolute;
-      bottom: 18rpx;
-      right: 20rpx;
-      z-index: 11;
-      height: 50rpx;
-      line-height: 50rpx;
-      padding: 0 20rpx;
-      border-radius: 25rpx;
-      font-size: 24rpx;
-      color: #fff;
-    }
+.goods-box {
+  &:nth-last-of-type(1) {
+    margin-bottom: 0 !important;
+  }
+}
+
+.goods-md-box,
+.goods-sl-box,
+.goods-lg-box {
+  position: relative;
+
+  .cart-btn {
+    position: absolute;
+    bottom: 18rpx;
+    right: 20rpx;
+    z-index: 11;
+    height: 50rpx;
+    line-height: 50rpx;
+    padding: 0 20rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    color: #fff;
   }
+}
 </style>

sheep/components/s-goods-column/s-goods-column.vue

@@ -2,49 +2,30 @@
 <template>
   <view class="ss-goods-wrap">
     <!-- xs卡片：横向紧凑型，一行放两个，图片左内容右边  -->
-    <view
-      v-if="size === 'xs'"
-      class="xs-goods-card ss-flex ss-col-stretch"
-      :style="[elStyles]"
-      @tap="onClick"
-    >
+    <view v-if="size === 'xs'" class="xs-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick">
       <view v-if="tagStyle.show" class="tag-icon-box">
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
       </view>
       <image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit" />
-      <view
-        v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
-        class="xs-goods-content ss-flex-col ss-row-around"
-      >
-        <view
-          v-if="goodsFields.title?.show || goodsFields.name?.show"
-          class="xs-goods-title ss-line-1"
-          :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
-        >
+      <view v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
+        class="xs-goods-content ss-flex-col ss-row-around">
+        <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="xs-goods-title ss-line-1"
+          :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
           {{ data.title || data.name }}
         </view>
         <!-- 活动信息 -->
         <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
           <view class="card" v-if="discountText">{{ discountText }}</view>
-          <view
-            class="card2"
-            v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
-            :key="item"
-          >
+          <view class="card2" v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
+            :key="item">
             {{ item }}
           </view>
         </view>
-        <view
-          v-if="goodsFields.price?.show"
-          class="xs-goods-price font-OPPOSANS"
-          :style="[{ color: goodsFields.price.color }]"
-        >
+        <view v-if="goodsFields.price?.show" class="xs-goods-price font-OPPOSANS"
+          :style="[{ color: goodsFields.price.color }]">
           <!-- 活动价格 -->
           <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
-            <image
-              :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
-              class="point-img"
-            ></image>
+            <image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="point-img"></image>
             <text class="point-text ss-m-r-16">
               {{ data.point }}
               {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
@@ -66,45 +47,26 @@
       <view v-if="tagStyle.show" class="tag-icon-box">
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
       </view>
-      <image
-        class="sm-img-box"
-        :src="sheep.$url.cdn(data.image || data.picUrl)"
-        mode="aspectFill"
-      ></image>
-
-      <view
-        v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
-        class="sm-goods-content"
-        :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
-      >
-        <view
-          v-if="goodsFields.title?.show || goodsFields.name?.show"
-          class="sm-goods-title ss-line-1 ss-m-b-16"
-        >
+      <image class="sm-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
+
+      <view v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show" class="sm-goods-content"
+        :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
+        <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="sm-goods-title ss-line-1 ss-m-b-16">
           {{ data.title || data.name }}
         </view>
         <!-- 活动信息 -->
         <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
           <view class="card" v-if="discountText">{{ discountText }}</view>
-          <view
-            class="card2"
-            v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
-            :key="item"
-          >
+          <view class="card2" v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
+            :key="item">
             {{ item }}
           </view>
         </view>
-        <view
-          v-if="goodsFields.price?.show"
-          class="sm-goods-price font-OPPOSANS"
-          :style="[{ color: goodsFields.price.color }]"
-        >
+        <view v-if="goodsFields.price?.show" class="sm-goods-price font-OPPOSANS"
+          :style="[{ color: goodsFields.price.color }]">
           <!-- 活动价格 -->
           <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
-            <image
-              :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
-              class="point-img"
-            ></image>
+            <image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="point-img"></image>
             <text class="point-text ss-m-r-16">
               {{ data.point }}
               {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
@@ -127,31 +89,19 @@
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" />
       </view>
       <image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix" />
-      <view
-        class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
-        :id="elId"
-      >
-        <view
-          v-if="goodsFields.title?.show || goodsFields.name?.show"
-          class="md-goods-title ss-line-1"
-          :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
-        >
+      <view class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16" :id="elId">
+        <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="md-goods-title ss-line-1"
+          :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
           {{ data.title || data.name }}
         </view>
-        <view
-          v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
+        <view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
           class="md-goods-subtitle ss-m-t-16 ss-line-1"
-          :style="[{ color: subTitleColor, background: subTitleBackground }]"
-        >
+          :style="[{ color: subTitleColor, background: subTitleBackground }]">
           {{ data.subtitle || data.introduction }}
         </view>
         <slot name="activity">
           <view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center">
-            <view
-              class="activity-tag ss-m-r-10 ss-m-t-16"
-              v-for="item in data.promos"
-              :key="item.id"
-            >
+            <view class="activity-tag ss-m-r-10 ss-m-t-16" v-for="item in data.promos" :key="item.id">
               {{ item.title }}
             </view>
           </view>
@@ -159,26 +109,18 @@
         <!-- 活动信息 -->
         <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
           <view class="card" v-if="discountText">{{ discountText }}</view>
-          <view
-            class="card2"
-            v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
-            :key="item"
-          >
+          <view class="card2" v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
+            :key="item">
             {{ item }}
           </view>
         </view>
         <view class="ss-flex ss-col-bottom">
-          <view
-            v-if="goodsFields.price?.show"
-            class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
-            :style="[{ color: goodsFields.price.color }]"
-          >
+          <view v-if="goodsFields.price?.show" class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
+            :style="[{ color: goodsFields.price.color }]">
             <!-- 活动价格 -->
-            <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
-              <image
-                :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
-                class="point-img"
-              ></image>
+            <view class="ss-flex"
+              v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
+              <image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="point-img"></image>
               <text class="point-text ss-m-r-16">
                 {{ data.point }}
                 {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
@@ -192,14 +134,10 @@
               </text>
             </template>
           </view>
-          <view
-            v-if="
-              (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
-              (data.original_price > 0 || data.marketPrice > 0)
-            "
-            class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
-            :style="[{ color: originPriceColor }]"
-          >
+          <view v-if="
+            (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
+            (data.original_price > 0 || data.marketPrice > 0)
+          " class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex" :style="[{ color: originPriceColor }]">
             <text class="price-unit ss-font-20">{{ priceUnit }}</text>
             <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
           </view>
@@ -218,12 +156,7 @@
     </view>
 
     <!-- lg卡片：横向型，一行放一个，图片左内容右边  -->
-    <view
-      v-if="size === 'lg'"
-      class="lg-goods-card ss-flex ss-col-stretch"
-      :style="[elStyles]"
-      @tap="onClick"
-    >
+    <view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick">
       <view v-if="tagStyle.show" class="tag-icon-box">
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
       </view>
@@ -231,25 +164,16 @@
       <view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
         <view class="tag-icon">拼团</view>
       </view>
-      <image
-        class="lg-img-box"
-        :src="sheep.$url.cdn(data.image || data.picUrl)"
-        mode="aspectFill"
-      />
+      <image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill" />
       <view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
         <view>
-          <view
-            v-if="goodsFields.title?.show || goodsFields.name?.show"
-            class="lg-goods-title ss-line-2"
-            :style="[{ color: titleColor }]"
-          >
+          <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="lg-goods-title ss-line-2"
+            :style="[{ color: titleColor }]">
             {{ data.title || data.name }}
           </view>
-          <view
-            v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
+          <view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
             class="lg-goods-subtitle ss-m-t-10 ss-line-1"
-            :style="[{ color: subTitleColor, background: subTitleBackground }]"
-          >
+            :style="[{ color: subTitleColor, background: subTitleBackground }]">
             {{ data.subtitle || data.introduction }}
           </view>
         </view>
@@ -264,22 +188,17 @@
           <!-- 活动信息 -->
           <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
             <view class="card" v-if="discountText">{{ discountText }}</view>
-            <view
-              class="card2"
-              v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
-              :key="item"
-            >
+            <view class="card2" v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
+              :key="item">
               {{ item }}
             </view>
           </view>
           <view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
             <view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
               <!-- 活动价格 -->
-              <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
-                <image
-                  :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
-                  class="point-img"
-                ></image>
+              <view class="ss-flex"
+                v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
+                <image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="point-img"></image>
                 <text class="point-text ss-m-r-16">
                   {{ data.point }}
                   {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
@@ -293,14 +212,10 @@
                 </text>
               </template>
             </view>
-            <view
-              v-if="
-                (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
-                (data.original_price > 0 || data.marketPrice > 0)
-              "
-              class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
-              :style="[{ color: originPriceColor }]"
-            >
+            <view v-if="
+              (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
+              (data.original_price > 0 || data.marketPrice > 0)
+            " class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex" :style="[{ color: originPriceColor }]">
               <text class="price-unit ss-font-20">{{ priceUnit }}</text>
               <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
             </view>
@@ -321,36 +236,22 @@
       <view v-if="tagStyle.show" class="tag-icon-box">
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" />
       </view>
-      <image
-        class="sl-img-box"
-        :src="sheep.$url.cdn(data.image || data.picUrl)"
-        mode="aspectFill"
-      />
+      <image class="sl-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill" />
       <view class="sl-goods-content">
         <view>
-          <view
-            v-if="goodsFields.title?.show || goodsFields.name?.show"
-            class="sl-goods-title ss-line-1"
-            :style="[{ color: titleColor }]"
-          >
+          <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="sl-goods-title ss-line-1"
+            :style="[{ color: titleColor }]">
             {{ data.title || data.name }}
           </view>
-          <view
-            v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
-            class="sl-goods-subtitle ss-m-t-16"
-            :style="[{ color: subTitleColor, background: subTitleBackground }]"
-          >
+          <view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show" class="sl-goods-subtitle ss-m-t-16"
+            :style="[{ color: subTitleColor, background: subTitleBackground }]">
             {{ data.subtitle || data.introduction }}
           </view>
         </view>
         <view>
           <slot name="activity">
             <view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center ss-flex-wrap">
-              <view
-                class="activity-tag ss-m-r-10 ss-m-t-16"
-                v-for="item in data.promos"
-                :key="item.id"
-              >
+              <view class="activity-tag ss-m-r-10 ss-m-t-16" v-for="item in data.promos" :key="item.id">
                 {{ item.title }}
               </view>
             </view>
@@ -358,22 +259,17 @@
           <!-- 活动信息 -->
           <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
             <view class="card" v-if="discountText">{{ discountText }}</view>
-            <view
-              class="card2"
-              v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
-              :key="item"
-            >
+            <view class="card2" v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
+              :key="item">
               {{ item }}
             </view>
           </view>
           <view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
             <view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
               <!-- 活动价格 -->
-              <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
-                <image
-                  :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
-                  class="point-img"
-                ></image>
+              <view class="ss-flex"
+                v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
+                <image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="point-img"></image>
                 <text class="ss-m-r-16">
                   {{ data.point }}
                   {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
@@ -387,14 +283,10 @@
                 </text>
               </template>
             </view>
-            <view
-              v-if="
-                (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
-                (data.original_price > 0 || data.marketPrice > 0)
-              "
-              class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
-              :style="[{ color: originPriceColor }]"
-            >
+            <view v-if="
+              (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
+              (data.original_price > 0 || data.marketPrice > 0)
+            " class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex" :style="[{ color: originPriceColor }]">
               <text class="price-unit ss-font-20">{{ priceUnit }}</text>
               <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
             </view>
@@ -413,546 +305,546 @@
 </template>
 
 <script setup>
-  /**
-   * 商品卡片
-   *
-   * @property {Array} size = [xs | sm | md | lg | sl ] 			 	- 列表数据
-   * @property {String} tag                      - md及以上才有
-   * @property {String} img                      - 图片
-   * @property {String} background                  - 背景色
-   * @property {String} topRadius                  - 上圆角
-   * @property {String} bottomRadius                  - 下圆角
-   * @property {String} title                    - 标题
-   * @property {String} titleColor                  - 标题颜色
-   * @property {Number} titleWidth = 0								- 标题宽度，默认0，单位rpx
-   * @property {String} subTitle                    - 副标题
-   * @property {String} subTitleColor                  - 副标题颜色
-   * @property {String} subTitleBackground              - 副标题背景
-   * @property {String | Number} price                - 价格
-   * @property {String} priceColor                  - 价格颜色
-   * @property {String | Number} originPrice              - 原价/划线价
-   * @property {String} originPriceColor                - 原价颜色
-   * @property {String | Number} sales                - 销售数量
-   * @property {String} salesColor                  - 销售数量颜色
-   *
-   * @slots activity												 	- 活动插槽
-   * @slots cart														- 购物车插槽，默认包含文字，背景色，文字颜色 || 图片 || 行为
-   *
-   * @event {Function()} click                    - 点击卡片
-   *
-   */
-  import { computed, getCurrentInstance, nextTick, onMounted } from 'vue';
-  import sheep from '@/sheep';
-  import {
-    fen2yuan,
-    formatExchange,
-    formatSales,
-    formatStock,
-    getRewardActivityRuleItemDescriptions,
-  } from '@/sheep/hooks/useGoods';
-  import { isArray } from 'lodash-es';
-  import { PromotionActivityTypeEnum } from '@/sheep/util/const';
-
-  // 接收参数
-  const props = defineProps({
-    goodsFields: {
-      type: [Array, Object],
-      default() {
-        return {
-          // 商品价格
-          price: {
-            show: true,
-          },
-          // 库存
-          stock: {
-            show: true,
-          },
-          // 商品名称
-          name: {
-            show: true,
-          },
-          // 商品介绍
-          introduction: {
-            show: true,
-          },
-          // 市场价
-          marketPrice: {
-            show: true,
-          },
-          // 销量
-          salesCount: {
-            show: true,
-          },
-        };
-      },
-    },
-    tagStyle: {
-      type: Object,
-      default: () => ({}),
-    },
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-    size: {
-      type: String,
-      default: 'sl',
-    },
-    background: {
-      type: String,
-      default: '',
-    },
-    topRadius: {
-      type: Number,
-      default: 0,
-    },
-    bottomRadius: {
-      type: Number,
-      default: 0,
-    },
-    titleWidth: {
-      type: Number,
-      default: 0,
-    },
-    titleColor: {
-      type: String,
-      default: '#333',
-    },
-    priceColor: {
-      type: String,
-      default: '',
-    },
-    originPriceColor: {
-      type: String,
-      default: '#C4C4C4',
+/**
+ * 商品卡片
+ *
+ * @property {Array} size = [xs | sm | md | lg | sl ] 			 	- 列表数据
+ * @property {String} tag                      - md及以上才有
+ * @property {String} img                      - 图片
+ * @property {String} background                  - 背景色
+ * @property {String} topRadius                  - 上圆角
+ * @property {String} bottomRadius                  - 下圆角
+ * @property {String} title                    - 标题
+ * @property {String} titleColor                  - 标题颜色
+ * @property {Number} titleWidth = 0								- 标题宽度，默认0，单位rpx
+ * @property {String} subTitle                    - 副标题
+ * @property {String} subTitleColor                  - 副标题颜色
+ * @property {String} subTitleBackground              - 副标题背景
+ * @property {String | Number} price                - 价格
+ * @property {String} priceColor                  - 价格颜色
+ * @property {String | Number} originPrice              - 原价/划线价
+ * @property {String} originPriceColor                - 原价颜色
+ * @property {String | Number} sales                - 销售数量
+ * @property {String} salesColor                  - 销售数量颜色
+ *
+ * @slots activity												 	- 活动插槽
+ * @slots cart														- 购物车插槽，默认包含文字，背景色，文字颜色 || 图片 || 行为
+ *
+ * @event {Function()} click                    - 点击卡片
+ *
+ */
+import { computed, getCurrentInstance, nextTick, onMounted } from 'vue';
+import sheep from '@/sheep';
+import {
+  fen2yuan,
+  formatExchange,
+  formatSales,
+  formatStock,
+  getRewardActivityRuleItemDescriptions,
+} from '@/sheep/hooks/useGoods';
+import { isArray } from 'lodash-es';
+import { PromotionActivityTypeEnum } from '@/sheep/util/const';
+
+// 接收参数
+const props = defineProps({
+  goodsFields: {
+    type: [Array, Object],
+    default() {
+      return {
+        // 商品价格
+        price: {
+          show: true,
+        },
+        // 库存
+        stock: {
+          show: true,
+        },
+        // 商品名称
+        name: {
+          show: true,
+        },
+        // 商品介绍
+        introduction: {
+          show: true,
+        },
+        // 市场价
+        marketPrice: {
+          show: true,
+        },
+        // 销量
+        salesCount: {
+          show: true,
+        },
+      };
     },
-    priceUnit: {
-      type: String,
-      default: '￥',
-    },
-    subTitleColor: {
-      type: String,
-      default: '#999999',
-    },
-    subTitleBackground: {
-      type: String,
-      default: '',
-    },
-    buttonShow: {
-      type: Boolean,
-      default: true,
-    },
-    seckillTag: {
-      type: Boolean,
-      default: false,
-    },
-    grouponTag: {
-      type: Boolean,
-      default: false,
-    },
-  });
-
-  // 优惠文案
-  const discountText = computed(() => {
-    const promotionType = props.data.promotionType;
-    if (promotionType === 4) {
-      return '限时优惠';
-    } else if (promotionType === 6) {
-      return '会员价';
+  },
+  tagStyle: {
+    type: Object,
+    default: () => ({}),
+  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  size: {
+    type: String,
+    default: 'sl',
+  },
+  background: {
+    type: String,
+    default: '',
+  },
+  topRadius: {
+    type: Number,
+    default: 0,
+  },
+  bottomRadius: {
+    type: Number,
+    default: 0,
+  },
+  titleWidth: {
+    type: Number,
+    default: 0,
+  },
+  titleColor: {
+    type: String,
+    default: '#333',
+  },
+  priceColor: {
+    type: String,
+    default: '',
+  },
+  originPriceColor: {
+    type: String,
+    default: '#C4C4C4',
+  },
+  priceUnit: {
+    type: String,
+    default: '￥',
+  },
+  subTitleColor: {
+    type: String,
+    default: '#999999',
+  },
+  subTitleBackground: {
+    type: String,
+    default: '',
+  },
+  buttonShow: {
+    type: Boolean,
+    default: true,
+  },
+  seckillTag: {
+    type: Boolean,
+    default: false,
+  },
+  grouponTag: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 优惠文案
+const discountText = computed(() => {
+  const promotionType = props.data.promotionType;
+  if (promotionType === 4) {
+    return '限时优惠';
+  } else if (promotionType === 6) {
+    return '会员价';
+  }
+  return undefined;
+});
+
+// 组件样式
+const elStyles = computed(() => {
+  return {
+    background: props.background,
+    'border-top-left-radius': props.topRadius + 'px',
+    'border-top-right-radius': props.topRadius + 'px',
+    'border-bottom-left-radius': props.bottomRadius + 'px',
+    'border-bottom-right-radius': props.bottomRadius + 'px',
+  };
+});
+
+// 格式化销量、库存信息
+const salesAndStock = computed(() => {
+  let text = [];
+  if (props.goodsFields.salesCount?.show) {
+    if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
+      text.push(formatExchange(props.data.sales_show_type, (props.data.pointTotalStock || 0) - (props.data.pointStock || 0)));
+    } else {
+      text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
     }
-    return undefined;
-  });
-
-  // 组件样式
-  const elStyles = computed(() => {
-    return {
-      background: props.background,
-      'border-top-left-radius': props.topRadius + 'px',
-      'border-top-right-radius': props.topRadius + 'px',
-      'border-bottom-left-radius': props.bottomRadius + 'px',
-      'border-bottom-right-radius': props.bottomRadius + 'px',
-    };
-  });
-
-  // 格式化销量、库存信息
-  const salesAndStock = computed(() => {
-    let text = [];
-    if (props.goodsFields.salesCount?.show) {
-      if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
-        text.push(formatExchange(props.data.sales_show_type, (props.data.pointTotalStock || 0) - (props.data.pointStock || 0)));
-      } else {
-        text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
-      }
+  }
+  if (props.goodsFields.stock?.show) {
+    if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
+      text.push(formatStock(props.data.stock_show_type, props.data.pointTotalStock));
+    } else {
+      text.push(formatStock(props.data.stock_show_type, props.data.stock));
     }
-    if (props.goodsFields.stock?.show) {
-      if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
-        text.push(formatStock(props.data.stock_show_type, props.data.pointTotalStock));
+  }
+  return text.join(' | ');
+});
+
+// 返回事件
+const emits = defineEmits(['click', 'getHeight']);
+
+const onClick = () => {
+  emits('click');
+};
+
+// 获取卡片实时高度
+const { proxy } = getCurrentInstance();
+const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+
+function getGoodsPriceCardWH() {
+  if (props.size === 'md') {
+    const view = uni.createSelectorQuery().in(proxy);
+    view.select(`#${elId}`).fields({
+      size: true,
+      scrollOffset: true,
+    });
+    view.exec((data) => {
+      let totalHeight = 0;
+      const goodsPriceCard = data[0];
+      if (props.data.image_wh) {
+        totalHeight =
+          (goodsPriceCard.width / props.data.image_wh.w) * props.data.image_wh.h +
+          goodsPriceCard.height;
       } else {
-        text.push(formatStock(props.data.stock_show_type, props.data.stock));
+        totalHeight = goodsPriceCard.width;
       }
-    }
-    return text.join(' | ');
-  });
-
-  // 返回事件
-  const emits = defineEmits(['click', 'getHeight']);
-
-  const onClick = () => {
-    emits('click');
-  };
-
-  // 获取卡片实时高度
-  const { proxy } = getCurrentInstance();
-  const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
-
-  function getGoodsPriceCardWH() {
-    if (props.size === 'md') {
-      const view = uni.createSelectorQuery().in(proxy);
-      view.select(`#${elId}`).fields({
-        size: true,
-        scrollOffset: true,
-      });
-      view.exec((data) => {
-        let totalHeight = 0;
-        const goodsPriceCard = data[0];
-        if (props.data.image_wh) {
-          totalHeight =
-            (goodsPriceCard.width / props.data.image_wh.w) * props.data.image_wh.h +
-            goodsPriceCard.height;
-        } else {
-          totalHeight = goodsPriceCard.width;
-        }
-        emits('getHeight', totalHeight);
-      });
-    }
+      emits('getHeight', totalHeight);
+    });
   }
+}
 
-  onMounted(() => {
-    nextTick(() => {
-      getGoodsPriceCardWH();
-    });
+onMounted(() => {
+  nextTick(() => {
+    getGoodsPriceCardWH();
   });
+});
 </script>
 
 <style lang="scss" scoped>
-  .tag-icon-box {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 2;
-
-    .tag-icon {
-      width: 72rpx;
-      height: 44rpx;
-    }
+.tag-icon-box {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+
+  .tag-icon {
+    width: 72rpx;
+    height: 44rpx;
+  }
+}
+
+.seckill-tag {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  width: 68rpx;
+  height: 38rpx;
+  background: linear-gradient(90deg, #ff5854 0%, #ff2621 100%);
+  border-radius: 10rpx 0px 10rpx 0px;
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 32rpx;
+}
+
+.point-img {
+  width: 30rpx;
+  height: 30rpx;
+  margin: 0 4rpx;
+}
+
+.groupon-tag {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  width: 68rpx;
+  height: 38rpx;
+  background: linear-gradient(90deg, #fe832a 0%, #ff6600 100%);
+  border-radius: 10rpx 0px 10rpx 0px;
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 32rpx;
+}
+
+.goods-img {
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+.price-unit {
+  margin-right: -4px;
+}
+
+.sales-text {
+  display: table;
+  font-size: 24rpx;
+  transform: scale(0.8);
+  margin-left: 0rpx;
+  color: #c4c4c4;
+}
+
+.activity-tag {
+  font-size: 20rpx;
+  color: #ff0000;
+  line-height: 30rpx;
+  padding: 0 10rpx;
+  border: 1px solid rgba(#ff0000, 0.25);
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.goods-origin-price {
+  font-size: 20rpx;
+  color: #c4c4c4;
+  line-height: 36rpx;
+  text-decoration: line-through;
+}
+
+// xs
+.xs-goods-card {
+  overflow: hidden;
+  // max-width: 375rpx;
+  background-color: $white;
+  position: relative;
+
+  .xs-img-box {
+    width: 128rpx;
+    height: 128rpx;
+    margin-right: 20rpx;
   }
 
-  .seckill-tag {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 2;
-    width: 68rpx;
-    height: 38rpx;
-    background: linear-gradient(90deg, #ff5854 0%, #ff2621 100%);
-    border-radius: 10rpx 0px 10rpx 0px;
-    font-size: 24rpx;
+  .xs-goods-title {
+    font-size: 26rpx;
+    color: #333;
     font-weight: 500;
-    color: #ffffff;
-    line-height: 32rpx;
   }
 
-  .point-img {
-    width: 30rpx;
-    height: 30rpx;
-    margin: 0 4rpx;
+  .xs-goods-price {
+    font-size: 30rpx;
+    color: $red;
+  }
+}
+
+// sm
+.sm-goods-card {
+  overflow: hidden;
+  // width: 223rpx;
+  // width: 100%;
+  background-color: $white;
+  position: relative;
+
+  .sm-img-box {
+    // width: 228rpx;
+    width: 100%;
+    height: 208rpx;
   }
 
-  .groupon-tag {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 2;
-    width: 68rpx;
-    height: 38rpx;
-    background: linear-gradient(90deg, #fe832a 0%, #ff6600 100%);
-    border-radius: 10rpx 0px 10rpx 0px;
-    font-size: 24rpx;
-    font-weight: 500;
-    color: #ffffff;
-    line-height: 32rpx;
+  .sm-goods-content {
+    padding: 20rpx 16rpx;
+    box-sizing: border-box;
   }
 
-  .goods-img {
-    width: 100%;
-    height: 100%;
-    background-color: #f5f5f5;
+  .sm-goods-title {
+    font-size: 26rpx;
+    color: #333;
   }
 
-  .price-unit {
-    margin-right: -4px;
+  .sm-goods-price {
+    font-size: 30rpx;
+    color: $red;
+  }
+}
+
+// md
+.md-goods-card {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  background-color: $white;
+  position: relative;
+
+  .md-img-box {
+    width: 100%;
   }
 
-  .sales-text {
-    display: table;
-    font-size: 24rpx;
-    transform: scale(0.8);
-    margin-left: 0rpx;
-    color: #c4c4c4;
+  .md-goods-title {
+    font-size: 26rpx;
+    color: #333;
+    width: 100%;
   }
 
-  .activity-tag {
-    font-size: 20rpx;
-    color: #ff0000;
-    line-height: 30rpx;
-    padding: 0 10rpx;
-    border: 1px solid rgba(#ff0000, 0.25);
-    border-radius: 4px;
-    flex-shrink: 0;
+  .md-goods-subtitle {
+    font-size: 24rpx;
+    font-weight: 400;
+    color: #999999;
   }
 
-  .goods-origin-price {
-    font-size: 20rpx;
-    color: #c4c4c4;
+  .md-goods-price {
+    font-size: 30rpx;
+    color: $red;
     line-height: 36rpx;
-    text-decoration: line-through;
   }
 
-  // xs
-  .xs-goods-card {
-    overflow: hidden;
-    // max-width: 375rpx;
-    background-color: $white;
-    position: relative;
-
-    .xs-img-box {
-      width: 128rpx;
-      height: 128rpx;
-      margin-right: 20rpx;
-    }
-
-    .xs-goods-title {
-      font-size: 26rpx;
-      color: #333;
-      font-weight: 500;
-    }
+  .cart-box {
+    width: 54rpx;
+    height: 54rpx;
+    background: linear-gradient(90deg, #fe8900, #ff5e00);
+    border-radius: 50%;
+    position: absolute;
+    bottom: 50rpx;
+    right: 20rpx;
+    z-index: 2;
 
-    .xs-goods-price {
-      font-size: 30rpx;
-      color: $red;
+    .cart-icon {
+      width: 30rpx;
+      height: 30rpx;
     }
   }
+}
+
+// lg
+.lg-goods-card {
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  background-color: $white;
+  height: 280rpx;
+
+  .lg-img-box {
+    width: 280rpx;
+    height: 280rpx;
+    margin-right: 20rpx;
+  }
 
-  // sm
-  .sm-goods-card {
-    overflow: hidden;
-    // width: 223rpx;
-    // width: 100%;
-    background-color: $white;
-    position: relative;
-
-    .sm-img-box {
-      // width: 228rpx;
-      width: 100%;
-      height: 208rpx;
-    }
+  .lg-goods-title {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #333333;
+    // line-height: 36rpx;
+    // width: 410rpx;
+  }
 
-    .sm-goods-content {
-      padding: 20rpx 16rpx;
-      box-sizing: border-box;
-    }
+  .lg-goods-subtitle {
+    font-size: 24rpx;
+    font-weight: 400;
+    color: #999999;
+    // line-height: 30rpx;
+    // width: 410rpx;
+  }
 
-    .sm-goods-title {
-      font-size: 26rpx;
-      color: #333;
-    }
+  .lg-goods-price {
+    font-size: 30rpx;
+    color: $red;
+    line-height: 36rpx;
+  }
 
-    .sm-goods-price {
-      font-size: 30rpx;
-      color: $red;
-    }
+  .buy-box {
+    position: absolute;
+    bottom: 20rpx;
+    right: 20rpx;
+    z-index: 2;
+    width: 120rpx;
+    height: 50rpx;
+    background: linear-gradient(90deg, #fe8900, #ff5e00);
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    color: #ffffff;
   }
 
-  // md
-  .md-goods-card {
-    overflow: hidden;
+  .tag-box {
     width: 100%;
-    position: relative;
-    z-index: 1;
-    background-color: $white;
-    position: relative;
-
-    .md-img-box {
-      width: 100%;
-    }
-
-    .md-goods-title {
-      font-size: 26rpx;
-      color: #333;
-      width: 100%;
-    }
-
-    .md-goods-subtitle {
-      font-size: 24rpx;
-      font-weight: 400;
-      color: #999999;
-    }
-
-    .md-goods-price {
-      font-size: 30rpx;
-      color: $red;
-      line-height: 36rpx;
-    }
-
-    .cart-box {
-      width: 54rpx;
-      height: 54rpx;
-      background: linear-gradient(90deg, #fe8900, #ff5e00);
-      border-radius: 50%;
-      position: absolute;
-      bottom: 50rpx;
-      right: 20rpx;
-      z-index: 2;
-
-      .cart-icon {
-        width: 30rpx;
-        height: 30rpx;
-      }
-    }
   }
+}
 
-  // lg
-  .lg-goods-card {
-    overflow: hidden;
-    position: relative;
-    z-index: 1;
-    background-color: $white;
-    height: 280rpx;
+// sl
 
-    .lg-img-box {
-      width: 280rpx;
-      height: 280rpx;
-      margin-right: 20rpx;
-    }
-
-    .lg-goods-title {
-      font-size: 28rpx;
-      font-weight: 500;
-      color: #333333;
-      // line-height: 36rpx;
-      // width: 410rpx;
-    }
-
-    .lg-goods-subtitle {
-      font-size: 24rpx;
-      font-weight: 400;
-      color: #999999;
-      // line-height: 30rpx;
-      // width: 410rpx;
-    }
-
-    .lg-goods-price {
-      font-size: 30rpx;
-      color: $red;
-      line-height: 36rpx;
-    }
-
-    .buy-box {
-      position: absolute;
-      bottom: 20rpx;
-      right: 20rpx;
-      z-index: 2;
-      width: 120rpx;
-      height: 50rpx;
-      background: linear-gradient(90deg, #fe8900, #ff5e00);
-      border-radius: 25rpx;
-      font-size: 24rpx;
-      color: #ffffff;
-    }
+.sl-goods-card {
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  background-color: $white;
 
-    .tag-box {
-      width: 100%;
-    }
+  .sl-goods-content {
+    padding: 20rpx 20rpx;
+    box-sizing: border-box;
   }
 
-  // sl
-
-  .sl-goods-card {
-    overflow: hidden;
-    position: relative;
-    z-index: 1;
+  .sl-img-box {
     width: 100%;
-    background-color: $white;
-
-    .sl-goods-content {
-      padding: 20rpx 20rpx;
-      box-sizing: border-box;
-    }
-
-    .sl-img-box {
-      width: 100%;
-      height: 360rpx;
-    }
-
-    .sl-goods-title {
-      font-size: 26rpx;
-      color: #333;
-      font-weight: 500;
-    }
-
-    .sl-goods-subtitle {
-      font-size: 24rpx;
-      font-weight: 400;
-      color: #999999;
-      line-height: 30rpx;
-    }
-
-    .sl-goods-price {
-      font-size: 30rpx;
-      color: $red;
-      line-height: 36rpx;
-    }
+    height: 360rpx;
+  }
 
-    .buy-box {
-      position: absolute;
-      bottom: 20rpx;
-      right: 20rpx;
-      z-index: 2;
-      width: 148rpx;
-      height: 50rpx;
-      background: linear-gradient(90deg, #fe8900, #ff5e00);
-      border-radius: 25rpx;
-      font-size: 24rpx;
-      color: #ffffff;
-    }
+  .sl-goods-title {
+    font-size: 26rpx;
+    color: #333;
+    font-weight: 500;
   }
 
-  .card {
-    width: fit-content;
-    height: fit-content;
-    padding: 2rpx 10rpx;
-    background-color: red;
-    color: #ffffff;
+  .sl-goods-subtitle {
     font-size: 24rpx;
-    margin-top: 5rpx;
+    font-weight: 400;
+    color: #999999;
+    line-height: 30rpx;
   }
 
-  .card2 {
-    width: fit-content;
-    height: fit-content;
-    padding: 2rpx 10rpx;
-    background-color: rgb(255, 242, 241);
-    color: #ff2621;
-    font-size: 24rpx;
-    margin: 5rpx 0 5rpx 5rpx;
+  .sl-goods-price {
+    font-size: 30rpx;
+    color: $red;
+    line-height: 36rpx;
   }
 
-  .iconBox {
-    width: 100%;
-    height: fit-content;
-    margin-top: 10rpx;
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
+  .buy-box {
+    position: absolute;
+    bottom: 20rpx;
+    right: 20rpx;
+    z-index: 2;
+    width: 148rpx;
+    height: 50rpx;
+    background: linear-gradient(90deg, #fe8900, #ff5e00);
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    color: #ffffff;
   }
+}
+
+.card {
+  width: fit-content;
+  height: fit-content;
+  padding: 2rpx 10rpx;
+  background-color: red;
+  color: #ffffff;
+  font-size: 24rpx;
+  margin-top: 5rpx;
+}
+
+.card2 {
+  width: fit-content;
+  height: fit-content;
+  padding: 2rpx 10rpx;
+  background-color: rgb(255, 242, 241);
+  color: #ff2621;
+  font-size: 24rpx;
+  margin: 5rpx 0 5rpx 5rpx;
+}
+
+.iconBox {
+  width: 100%;
+  height: fit-content;
+  margin-top: 10rpx;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
 </style>

sheep/components/s-menu-tools/s-menu-tools.vue

@@ -7,10 +7,7 @@
       <view class="container-list ss-flex ss-flex-wrap">
         <view class="list-item ss-m-b-24" v-for="item in list" :key="item.title">
           <view class="ss-flex-col ss-col-center">
-            <button
-              class="ss-reset-button list-image ss-flex ss-row-center ss-col-center"
-              @tap="onClick(item)"
-            >
+            <button class="ss-reset-button list-image ss-flex ss-row-center ss-col-center" @tap="onClick(item)">
               <image v-if="show" :src="sheep.$url.static(item.icon)" class="list-icon" />
             </button>
             <view class="list-title ss-m-t-20">{{ item.title }}</view>
@@ -22,97 +19,97 @@
 </template>
 
 <script setup>
-  import { reactive, computed } from 'vue';
-  import sheep from '@/sheep';
-  import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
+import { reactive, computed } from 'vue';
+import sheep from '@/sheep';
+import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
 
-  const show = computed(() => sheep.$store('modal').menu);
+const show = computed(() => sheep.$store('modal').menu);
 
-  function onClick(item) {
-    closeMenuTools();
-    if (item.url) sheep.$router.go(item.url);
-  }
+function onClick(item) {
+  closeMenuTools();
+  if (item.url) sheep.$router.go(item.url);
+}
 
-  const list = [
-    {
-      url: '/pages/index/index',
-      icon: '/static/img/shop/tools/home.png',
-      title: '首页',
-    },
-    {
-      url: '/pages/index/search',
-      icon: '/static/img/shop/tools/search.png',
-      title: '搜索',
-    },
-    {
-      url: '/pages/index/user',
-      icon: '/static/img/shop/tools/user.png',
-      title: '个人中心',
-    },
-    {
-      url: '/pages/index/cart',
-      icon: '/static/img/shop/tools/cart.png',
-      title: '购物车',
-    },
-    {
-      url: '/pages/user/goods-log',
-      icon: '/static/img/shop/tools/browse.png',
-      title: '浏览记录',
-    },
-    {
-      url: '/pages/user/goods-collect',
-      icon: '/static/img/shop/tools/collect.png',
-      title: '我的收藏',
-    },
-    {
-      url: '/pages/chat/index',
-      icon: '/static/img/shop/tools/service.png',
-      title: '客服',
-    },
-  ];
+const list = [
+  {
+    url: '/pages/index/index',
+    icon: '/static/img/shop/tools/home.png',
+    title: '首页',
+  },
+  {
+    url: '/pages/index/search',
+    icon: '/static/img/shop/tools/search.png',
+    title: '搜索',
+  },
+  {
+    url: '/pages/index/user',
+    icon: '/static/img/shop/tools/user.png',
+    title: '个人中心',
+  },
+  // {
+  //   url: '/pages/index/cart',
+  //   icon: '/static/img/shop/tools/cart.png',
+  //   title: '购物车',
+  // },
+  // {
+  //   url: '/pages/user/goods-log',
+  //   icon: '/static/img/shop/tools/browse.png',
+  //   title: '浏览记录',
+  // },
+  {
+    url: '/pages/user/goods-collect',
+    icon: '/static/img/shop/tools/collect.png',
+    title: '我的收藏',
+  },
+  {
+    url: '/pages/chat/index',
+    icon: '/static/img/shop/tools/service.png',
+    title: '客服',
+  },
+];
 </script>
 
 <style lang="scss" scoped>
-  .tools-wrap {
-    // background: #F0F0F0;
-    // box-shadow: 0px 0px 28rpx 7rpx rgba(0, 0, 0, 0.13);
-    // opacity: 0.98;
-    // border-radius: 0 0 20rpx 20rpx;
+.tools-wrap {
+  // background: #F0F0F0;
+  // box-shadow: 0px 0px 28rpx 7rpx rgba(0, 0, 0, 0.13);
+  // opacity: 0.98;
+  // border-radius: 0 0 20rpx 20rpx;
 
-    .title {
-      font-size: 36rpx;
-      font-weight: bold;
-      color: #333333;
-    }
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333333;
+  }
 
-    .list-item {
-      width: calc(25vw - 20rpx);
+  .list-item {
+    width: calc(25vw - 20rpx);
 
-      .list-image {
-        width: 104rpx;
-        height: 104rpx;
-        border-radius: 52rpx;
-        background: var(--ui-BG);
+    .list-image {
+      width: 104rpx;
+      height: 104rpx;
+      border-radius: 52rpx;
+      background: var(--ui-BG);
 
-        .list-icon {
-          width: 54rpx;
-          height: 54rpx;
-        }
+      .list-icon {
+        width: 54rpx;
+        height: 54rpx;
       }
+    }
 
-      .list-title {
-        font-size: 26rpx;
-        font-weight: 500;
-        color: #333333;
-      }
+    .list-title {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #333333;
     }
   }
+}
 
-  .uni-popup {
-    top: 0 !important;
-  }
+.uni-popup {
+  top: 0 !important;
+}
 
-  :deep(.button-hover) {
-    background: #fafafa !important;
-  }
+:deep(.button-hover) {
+  background: #fafafa !important;
+}
 </style>

sheep/components/s-select-sku/s-select-sku.vue

@@ -5,11 +5,7 @@
     <view class="ss-modal-box bg-white ss-flex-col">
       <view class="modal-header ss-flex ss-col-center">
         <view class="header-left ss-m-r-30">
-          <image
-            class="sku-image"
-            :src="state.selectedSku.picUrl || goodsInfo.picUrl"
-            mode="aspectFill"
-          />
+          <image class="sku-image" :src="state.selectedSku.picUrl || goodsInfo.picUrl" mode="aspectFill" />
         </view>
         <view class="header-right ss-flex-col ss-row-between ss-flex-1">
           <view class="goods-title ss-line-2">{{ goodsInfo.name }}</view>
@@ -47,34 +43,22 @@
           <view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
             <view class="label-text ss-m-b-20">{{ property.name }}</view>
             <view class="ss-flex ss-col-center ss-flex-wrap">
-              <button
-                class="ss-reset-button spec-btn"
-                v-for="value in property.values"
-                :class="[
-                  {
-                    'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id,
-                  },
-                  {
-                    'disabled-btn': value.disabled === true,
-                  },
-                ]"
-                :key="value.id"
-                :disabled="value.disabled === true"
-                @tap="onSelectSku(property.id, value.id)"
-              >
+              <button class="ss-reset-button spec-btn" v-for="value in property.values" :class="[
+                {
+                  'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id,
+                },
+                {
+                  'disabled-btn': value.disabled === true,
+                },
+              ]" :key="value.id" :disabled="value.disabled === true" @tap="onSelectSku(property.id, value.id)">
                 {{ value.name }}
               </button>
             </view>
           </view>
           <view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
             <view class="label-text">购买数量</view>
-            <su-number-box
-              :min="1"
-              :max="state.selectedSku.stock"
-              :step="1"
-              v-model="state.selectedSku.goods_num"
-              @change="onNumberChange($event)"
-            />
+            <su-number-box :min="1" :max="state.selectedSku.stock" :step="1" v-model="state.selectedSku.goods_num"
+              @change="onNumberChange($event)" />
           </view>
         </scroll-view>
       </view>
@@ -82,9 +66,7 @@
       <!-- 操作区 -->
       <view class="modal-footer border-top">
         <view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
-          <button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart"
-            >加入购物车</button
-          >
+          <button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart">加入购物车</button>
           <button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
         </view>
       </view>
@@ -93,372 +75,372 @@
 </template>
 
 <script setup>
-  import { computed, reactive, watch } from 'vue';
-  import sheep from '@/sheep';
-  import { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
-
-  const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
-  const props = defineProps({
-    goodsInfo: {
-      type: Object,
-      default() {},
-    },
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  });
-
-  const state = reactive({
-    selectedSku: {}, // 选中的 SKU
-    currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
-  });
-
-  const propertyList = convertProductPropertyList(props.goodsInfo.skus);
-  // SKU 列表
-  const skuList = computed(() => {
-    let skuPrices = props.goodsInfo.skus;
-    for (let price of skuPrices) {
-      price.value_id_array = price.properties.map((item) => item.valueId);
-    }
-    return skuPrices;
-  });
-
-  watch(
-    () => state.selectedSku,
-    (newVal) => {
-      emits('change', newVal);
-    },
-    {
-      immediate: true, // 立即执行
-      deep: true, // 深度监听
-    },
-  );
-
-  // 输入框改变数量
-  function onNumberChange(e) {
-    if (e === 0) return;
-    if (state.selectedSku.goods_num === e) return;
-    state.selectedSku.goods_num = e;
+import { computed, reactive, watch } from 'vue';
+import sheep from '@/sheep';
+import { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
+
+const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
+const props = defineProps({
+  goodsInfo: {
+    type: Object,
+    default() { },
+  },
+  show: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const state = reactive({
+  selectedSku: {}, // 选中的 SKU
+  currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
+});
+
+const propertyList = convertProductPropertyList(props.goodsInfo.skus);
+// SKU 列表
+const skuList = computed(() => {
+  let skuPrices = props.goodsInfo.skus;
+  for (let price of skuPrices) {
+    price.value_id_array = price.properties.map((item) => item.valueId);
   }
-
-  // 加入购物车
-  function onAddCart() {
-    if (state.selectedSku.id <= 0) {
-      sheep.$helper.toast('请选择规格');
-      return;
-    }
-    if (state.selectedSku.stock <= 0) {
-      sheep.$helper.toast('库存不足');
-      return;
-    }
-
-    emits('addCart', state.selectedSku);
+  return skuPrices;
+});
+
+watch(
+  () => state.selectedSku,
+  (newVal) => {
+    emits('change', newVal);
+  },
+  {
+    immediate: true, // 立即执行
+    deep: true, // 深度监听
+  },
+);
+
+// 输入框改变数量
+function onNumberChange(e) {
+  if (e === 0) return;
+  if (state.selectedSku.goods_num === e) return;
+  state.selectedSku.goods_num = e;
+}
+
+// 加入购物车
+function onAddCart() {
+  if (state.selectedSku.id <= 0) {
+    sheep.$helper.toast('请选择规格');
+    return;
   }
-
-  // 立即购买
-  function onBuy() {
-    if (state.selectedSku.id <= 0) {
-      sheep.$helper.toast('请选择规格');
-      return;
-    }
-    if (state.selectedSku.stock <= 0) {
-      sheep.$helper.toast('库存不足');
-      return;
-    }
-    emits('buy', state.selectedSku);
+  if (state.selectedSku.stock <= 0) {
+    sheep.$helper.toast('库存不足');
+    return;
   }
 
-  // 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
-  function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
-    let newSkus = []; // 所有可以选择的 sku 数组
-    if (isChecked) {
-      // 情况一：选中 property
-      // 获得当前点击选中 property 的、所有可用 SKU
-      for (let price of skuList.value) {
-        if (price.stock <= 0) {
-          continue;
-        }
-        if (price.value_id_array.indexOf(valueId) >= 0) {
-          newSkus.push(price);
-        }
-      }
-    } else {
-      // 情况二：取消选中 property
-      // 当前所选 property 下，所有可以选择的 SKU
-      newSkus = getCanUseSkuList();
-    }
-
-    // 所有存在并且有库存未选择的 SKU 的 value 属性值 id
-    let noChooseValueIds = [];
-    for (let price of newSkus) {
-      noChooseValueIds = noChooseValueIds.concat(price.value_id_array);
-    }
-    noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重
-
-    if (isChecked) {
-      // 去除当前选中的 value 属性值 id
-      let index = noChooseValueIds.indexOf(valueId);
-      noChooseValueIds.splice(index, 1);
-    } else {
-      // 循环去除当前已选择的 value 属性值 id
-      state.currentPropertyArray.forEach((currentPropertyId) => {
-        if (currentPropertyId.toString() !== '') {
-          return;
-        }
-        // currentPropertyId 为空是反选 填充的
-        let index = noChooseValueIds.indexOf(currentPropertyId);
-        if (index >= 0) {
-          // currentPropertyId 存在于 noChooseValueIds
-          noChooseValueIds.splice(index, 1);
-        }
-      });
-    }
+  emits('addCart', state.selectedSku);
+}
 
-    // 当前已选择的 property 数组
-    let choosePropertyIds = [];
-    if (!isChecked) {
-      // 当前已选择的 property
-      state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
-        if (currentPropertyId !== '') {
-          // currentPropertyId 为空是反选 填充的
-          choosePropertyIds.push(currentValueId);
-        }
-      });
-    } else {
-      // 当前点击选择的 property
-      choosePropertyIds = [propertyId];
-    }
-
-    for (let propertyIndex in propertyList) {
-      // 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
-      if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) {
+// 立即购买
+function onBuy() {
+  if (state.selectedSku.id <= 0) {
+    sheep.$helper.toast('请选择规格');
+    return;
+  }
+  if (state.selectedSku.stock <= 0) {
+    sheep.$helper.toast('库存不足');
+    return;
+  }
+  emits('buy', state.selectedSku);
+}
+
+// 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
+function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
+  let newSkus = []; // 所有可以选择的 sku 数组
+  if (isChecked) {
+    // 情况一：选中 property
+    // 获得当前点击选中 property 的、所有可用 SKU
+    for (let price of skuList.value) {
+      if (price.stock <= 0) {
         continue;
       }
-      // 如果当前 property id 不存在于有库存的 SKU 中，则禁用
-      for (let valueIndex in propertyList[propertyIndex]['values']) {
-        propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
-          noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) < 0; // true 禁用 or false 不禁用
+      if (price.value_id_array.indexOf(valueId) >= 0) {
+        newSkus.push(price);
       }
     }
+  } else {
+    // 情况二：取消选中 property
+    // 当前所选 property 下，所有可以选择的 SKU
+    newSkus = getCanUseSkuList();
   }
 
-  // 当前所选属性下，获取所有有库存的 SKU 们
-  function getCanUseSkuList() {
-    let newSkus = [];
-    for (let sku of skuList.value) {
-      if (sku.stock <= 0) {
-        continue;
+  // 所有存在并且有库存未选择的 SKU 的 value 属性值 id
+  let noChooseValueIds = [];
+  for (let price of newSkus) {
+    noChooseValueIds = noChooseValueIds.concat(price.value_id_array);
+  }
+  noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重
+
+  if (isChecked) {
+    // 去除当前选中的 value 属性值 id
+    let index = noChooseValueIds.indexOf(valueId);
+    noChooseValueIds.splice(index, 1);
+  } else {
+    // 循环去除当前已选择的 value 属性值 id
+    state.currentPropertyArray.forEach((currentPropertyId) => {
+      if (currentPropertyId.toString() !== '') {
+        return;
       }
-      let isOk = true;
-      state.currentPropertyArray.forEach((propertyId) => {
-        // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
-        if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
-          isOk = false;
-        }
-      });
-      if (isOk) {
-        newSkus.push(sku);
+      // currentPropertyId 为空是反选 填充的
+      let index = noChooseValueIds.indexOf(currentPropertyId);
+      if (index >= 0) {
+        // currentPropertyId 存在于 noChooseValueIds
+        noChooseValueIds.splice(index, 1);
       }
-    }
-    return newSkus;
+    });
   }
 
-  // 选择规格
-  function onSelectSku(propertyId, valueId) {
-    // 清空已选择
-    let isChecked = true; // 选中 or 取消选中
-    if (
-      state.currentPropertyArray[propertyId] !== undefined &&
-      state.currentPropertyArray[propertyId] === valueId
-    ) {
-      // 点击已被选中的，删除并填充 ''
-      isChecked = false;
-      state.currentPropertyArray.splice(propertyId, 1, '');
-    } else {
-      // 选中
-      state.currentPropertyArray[propertyId] = valueId;
-    }
-
-    // 选中的 property 大类
-    let choosePropertyId = [];
-    state.currentPropertyArray.forEach((currentPropertyId) => {
+  // 当前已选择的 property 数组
+  let choosePropertyIds = [];
+  if (!isChecked) {
+    // 当前已选择的 property
+    state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
       if (currentPropertyId !== '') {
         // currentPropertyId 为空是反选 填充的
-        choosePropertyId.push(currentPropertyId);
+        choosePropertyIds.push(currentValueId);
       }
     });
+  } else {
+    // 当前点击选择的 property
+    choosePropertyIds = [propertyId];
+  }
 
-    // 当前所选 property 下，所有可以选择的 SKU 们
-    let newSkuList = getCanUseSkuList();
+  for (let propertyIndex in propertyList) {
+    // 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
+    if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) {
+      continue;
+    }
+    // 如果当前 property id 不存在于有库存的 SKU 中，则禁用
+    for (let valueIndex in propertyList[propertyIndex]['values']) {
+      propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
+        noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) < 0; // true 禁用 or false 不禁用
+    }
+  }
+}
+
+// 当前所选属性下，获取所有有库存的 SKU 们
+function getCanUseSkuList() {
+  let newSkus = [];
+  for (let sku of skuList.value) {
+    if (sku.stock <= 0) {
+      continue;
+    }
+    let isOk = true;
+    state.currentPropertyArray.forEach((propertyId) => {
+      // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
+      if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
+        isOk = false;
+      }
+    });
+    if (isOk) {
+      newSkus.push(sku);
+    }
+  }
+  return newSkus;
+}
+
+// 选择规格
+function onSelectSku(propertyId, valueId) {
+  // 清空已选择
+  let isChecked = true; // 选中 or 取消选中
+  if (
+    state.currentPropertyArray[propertyId] !== undefined &&
+    state.currentPropertyArray[propertyId] === valueId
+  ) {
+    // 点击已被选中的，删除并填充 ''
+    isChecked = false;
+    state.currentPropertyArray.splice(propertyId, 1, '');
+  } else {
+    // 选中
+    state.currentPropertyArray[propertyId] = valueId;
+  }
 
-    // 判断所有 property 大类是否选择完成
-    if (choosePropertyId.length === propertyList.length && newSkuList.length) {
-      newSkuList[0].goods_num = state.selectedSku.goods_num || 1;
-      state.selectedSku = newSkuList[0];
-    } else {
-      state.selectedSku = {};
+  // 选中的 property 大类
+  let choosePropertyId = [];
+  state.currentPropertyArray.forEach((currentPropertyId) => {
+    if (currentPropertyId !== '') {
+      // currentPropertyId 为空是反选 填充的
+      choosePropertyId.push(currentPropertyId);
     }
+  });
+
+  // 当前所选 property 下，所有可以选择的 SKU 们
+  let newSkuList = getCanUseSkuList();
 
-    // 改变 property 禁用状态
-    changeDisabled(isChecked, propertyId, valueId);
+  // 判断所有 property 大类是否选择完成
+  if (choosePropertyId.length === propertyList.length && newSkuList.length) {
+    newSkuList[0].goods_num = state.selectedSku.goods_num || 1;
+    state.selectedSku = newSkuList[0];
+  } else {
+    state.selectedSku = {};
   }
 
-  changeDisabled(false);
-  // TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格
+  // 改变 property 禁用状态
+  changeDisabled(isChecked, propertyId, valueId);
+}
+
+changeDisabled(false);
+// TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格
 </script>
 
 <style lang="scss" scoped>
-  // 购买
-  .buy-box {
-    padding: 10rpx 0;
-
-    .add-btn {
-      width: 356rpx;
-      height: 80rpx;
-      border-radius: 40rpx 0 0 40rpx;
-      background-color: var(--ui-BG-Main-light);
-      color: var(--ui-BG-Main);
-    }
+// 购买
+.buy-box {
+  padding: 10rpx 0;
+
+  .add-btn {
+    width: 356rpx;
+    height: 80rpx;
+    border-radius: 40rpx 0 0 40rpx;
+    background-color: var(--ui-BG-Main-light);
+    color: var(--ui-BG-Main);
+  }
 
-    .buy-btn {
-      width: 356rpx;
-      height: 80rpx;
-      border-radius: 0 40rpx 40rpx 0;
-      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
-      color: #fff;
-    }
+  .buy-btn {
+    width: 356rpx;
+    height: 80rpx;
+    border-radius: 0 40rpx 40rpx 0;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    color: #fff;
+  }
 
-    .score-btn {
-      width: 100%;
-      margin: 0 20rpx;
-      height: 80rpx;
-      border-radius: 40rpx;
-      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
-      color: #fff;
-    }
+  .score-btn {
+    width: 100%;
+    margin: 0 20rpx;
+    height: 80rpx;
+    border-radius: 40rpx;
+    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    color: #fff;
   }
+}
 
-  .ss-modal-box {
-    border-radius: 30rpx 30rpx 0 0;
-    max-height: 1000rpx;
+.ss-modal-box {
+  border-radius: 30rpx 30rpx 0 0;
+  max-height: 1000rpx;
 
-    .modal-header {
-      position: relative;
-      padding: 80rpx 20rpx 40rpx;
+  .modal-header {
+    position: relative;
+    padding: 80rpx 20rpx 40rpx;
 
-      .sku-image {
-        width: 160rpx;
-        height: 160rpx;
-        border-radius: 10rpx;
-      }
+    .sku-image {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 10rpx;
+    }
 
-      .header-right {
-        height: 160rpx;
-      }
+    .header-right {
+      height: 160rpx;
+    }
 
-      .close-icon {
-        position: absolute;
-        top: 10rpx;
-        right: 20rpx;
-        font-size: 46rpx;
-        opacity: 0.2;
-      }
+    .close-icon {
+      position: absolute;
+      top: 10rpx;
+      right: 20rpx;
+      font-size: 46rpx;
+      opacity: 0.2;
+    }
 
-      .goods-title {
-        font-size: 28rpx;
-        font-weight: 500;
-        line-height: 42rpx;
-      }
+    .goods-title {
+      font-size: 28rpx;
+      font-weight: 500;
+      line-height: 42rpx;
+    }
 
-      .score-img {
-        width: 36rpx;
-        height: 36rpx;
-        margin: 0 4rpx;
-      }
+    .score-img {
+      width: 36rpx;
+      height: 36rpx;
+      margin: 0 4rpx;
+    }
 
-      .score-text {
+    .score-text {
+      font-size: 30rpx;
+      font-weight: 500;
+      color: $red;
+      font-family: OPPOSANS;
+    }
+
+    .price-text {
+      font-size: 30rpx;
+      font-weight: 500;
+      color: $red;
+      font-family: OPPOSANS;
+
+      &::before {
+        content: '￥';
         font-size: 30rpx;
         font-weight: 500;
         color: $red;
-        font-family: OPPOSANS;
       }
+    }
 
-      .price-text {
-        font-size: 30rpx;
+    .stock-text {
+      font-size: 26rpx;
+      color: #999999;
+    }
+  }
+
+  .modal-content {
+    padding: 0 20rpx;
+
+    .modal-content-scroll {
+      max-height: 600rpx;
+
+      .label-text {
+        font-size: 26rpx;
         font-weight: 500;
-        color: $red;
-        font-family: OPPOSANS;
-
-        &::before {
-          content: '￥';
-          font-size: 30rpx;
-          font-weight: 500;
-          color: $red;
-        }
       }
 
-      .stock-text {
+      .buy-num-box {
+        height: 100rpx;
+      }
+
+      .spec-btn {
+        height: 60rpx;
+        min-width: 100rpx;
+        padding: 0 30rpx;
+        background: #f4f4f4;
+        border-radius: 30rpx;
+        color: #434343;
         font-size: 26rpx;
-        color: #999999;
+        margin-right: 10rpx;
+        margin-bottom: 10rpx;
       }
-    }
 
-    .modal-content {
-      padding: 0 20rpx;
-
-      .modal-content-scroll {
-        max-height: 600rpx;
-
-        .label-text {
-          font-size: 26rpx;
-          font-weight: 500;
-        }
-
-        .buy-num-box {
-          height: 100rpx;
-        }
-
-        .spec-btn {
-          height: 60rpx;
-          min-width: 100rpx;
-          padding: 0 30rpx;
-          background: #f4f4f4;
-          border-radius: 30rpx;
-          color: #434343;
-          font-size: 26rpx;
-          margin-right: 10rpx;
-          margin-bottom: 10rpx;
-        }
-
-        .disabled-btn {
-          font-weight: 400;
-          color: #c6c6c6;
-          background: #f8f8f8;
-        }
+      .disabled-btn {
+        font-weight: 400;
+        color: #c6c6c6;
+        background: #f8f8f8;
       }
     }
   }
-
-  .iconBox {
-    width: fit-content;
-    height: fit-content;
-    padding: 2rpx 10rpx;
-    background-color: rgb(255, 242, 241);
-    color: #ff2621;
-    font-size: 24rpx;
-    margin-left: 5rpx;
-  }
-
-  .origin-price-text {
-    font-size: 26rpx;
-    font-weight: 400;
-    text-decoration: line-through;
-    color: $gray-c;
-    font-family: OPPOSANS;
-
-    &::before {
-      content: '￥';
-    }
+}
+
+.iconBox {
+  width: fit-content;
+  height: fit-content;
+  padding: 2rpx 10rpx;
+  background-color: rgb(255, 242, 241);
+  color: #ff2621;
+  font-size: 24rpx;
+  margin-left: 5rpx;
+}
+
+.origin-price-text {
+  font-size: 26rpx;
+  font-weight: 400;
+  text-decoration: line-through;
+  color: $gray-c;
+  font-family: OPPOSANS;
+
+  &::before {
+    content: '￥';
   }
+}
 </style>

sheep/components/s-tabbar/s-tabbar.vue

@@ -1,27 +1,12 @@
 <template>
   <view class="u-page__item" v-if="tabbar?.items?.length > 0">
-    <su-tabbar
-      :value="path"
-      :fixed="true"
-      :placeholder="true"
-      :safeAreaInsetBottom="true"
-      :inactiveColor="tabbar.style.color"
-      :activeColor="tabbar.style.activeColor"
-      :midTabBar="tabbar.mode === 2"
-      :customStyle="tabbarStyle"
-    >
-      <su-tabbar-item
-        v-for="(item, index) in tabbar.items"
-        :key="item.text"
-        :text="item.text"
-        :name="item.url"
-        :badge="item.badge"
-        :dot="item.dot"
-        :badgeStyle="tabbar.badgeStyle"
-        :isCenter="getTabbarCenter(index)"
-        :centerImage="sheep.$url.cdn(item.iconUrl)"
-        @tap="sheep.$router.go(item.url)"
-      >
+    <su-tabbar :value="path" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
+      :inactiveColor="tabbar.style.color" :activeColor="tabbar.style.activeColor" :midTabBar="tabbar.mode === 2"
+      :customStyle="tabbarStyle">
+      <su-tabbar-item v-for="(item, index) in tabbar.items" :key="item.text" :text="item.text" :name="item.url"
+        :badge="item.badge" :dot="item.dot" :badgeStyle="{ ...tabbar.badgeStyle, paddingTop: '20px' }"
+        :isCenter="getTabbarCenter(index)" :centerImage="sheep.$url.cdn(item.iconUrl)"
+        @tap="sheep.$router.go(item.url)">
         <template v-slot:active-icon>
           <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
         </template>
@@ -34,61 +19,66 @@
 </template>
 
 <script setup>
-  import { computed, unref } from 'vue';
-  import sheep from '@/sheep';
-  import SuTabbar from '@/sheep/ui/su-tabbar/su-tabbar.vue';
+import { computed, unref } from 'vue';
+import sheep from '@/sheep';
+import SuTabbar from '@/sheep/ui/su-tabbar/su-tabbar.vue';
 
-  const tabbar = computed(() => {
-    return sheep.$store('app').template.basic?.tabbar;
-  });
+const tabbar = computed(() => {
+  return sheep.$store('app').template.basic?.tabbar;
+});
 
-  const tabbarStyle = computed(() => {
-    const backgroundStyle = tabbar.value.style;
-    if (backgroundStyle.bgType === 'color') {
-      return { background: backgroundStyle.bgColor };
-    }
-    if (backgroundStyle.bgType === 'img')
-      return {
-        background: `url(${sheep.$url.cdn(
-          backgroundStyle.bgImg,
-        )}) no-repeat top center / 100% auto`,
-      };
-  });
+const tabbarStyle = computed(() => {
+  const backgroundStyle = tabbar.value.style;
+  if (backgroundStyle.bgType === 'color') {
+    return { background: backgroundStyle.bgColor };
+  }
+  if (backgroundStyle.bgType === 'img')
+    return {
+      background: `url(${sheep.$url.cdn(
+        backgroundStyle.bgImg,
+      )}) no-repeat top center / 100% auto`,
+    };
+});
 
-  const getTabbarCenter = (index) => {
-    if (unref(tabbar).mode !== 2) return false;
-    return unref(tabbar).items % 2 > 0
-      ? Math.ceil(unref(tabbar).items.length / 2) === index + 1
-      : false;
-  };
+const getTabbarCenter = (index) => {
+  if (unref(tabbar).mode !== 2) return false;
+  return unref(tabbar).items % 2 > 0
+    ? Math.ceil(unref(tabbar).items.length / 2) === index + 1
+    : false;
+};
 
-  const props = defineProps({
-    path: String,
-    default: '',
-  });
+const props = defineProps({
+  path: String,
+  default: '',
+});
 </script>
 
 <style lang="scss">
-  .u-page {
-    padding: 0;
+.u-page {
+  padding: 0;
 
-    &__item {
-      &__title {
-        color: var(--textSize);
-        background-color: #fff;
-        padding: 15px;
-        font-size: 15px;
+  &__item {
+    &__title {
+      color: var(--textSize);
+      background-color: #fff;
+      padding: 15px;
+      font-size: 15px;
 
-        &__slot-title {
-          color: var(--textSize);
-          font-size: 14px;
-        }
+      &__slot-title {
+        color: var(--textSize);
+        font-size: 14px;
       }
+    }
 
-      &__slot-icon {
-        width: 25px;
-        height: 25px;
-      }
+    &__slot-icon {
+      width: 25px;
+      height: 25px;
     }
   }
+}
+
+:deep(.u-tabbar__content) {
+  padding-top: 10px !important;
+  margin-top: 10px !important;
+}
 </style>

sheep/components/s-user-card/s-user-card.vue

@@ -4,12 +4,12 @@
     <view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
       <view class="left-box ss-flex ss-col-center ss-m-l-36">
         <view class="avatar-box ss-m-r-24">
-          <image class="avatar-img" :src="
+          <imag e class="avatar-img" :src="
               isLogin
                 ? sheep.$url.cdn(userInfo.avatar)
                 : sheep.$url.static('/static/img/shop/default_avatar.png')"
                  mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')">
-          </image>
+          </imag>
         </view>
         <view>
           <view class="nickname-box ss-flex ss-col-center">
@@ -28,7 +28,7 @@
     <view
       class="bind-mobile-box ss-flex ss-row-between ss-col-center"
       v-if="isLogin && !userInfo.mobile"
-    >
+    > 
       <view class="ss-flex">
         <text class="cicon-mobile-o" />
         <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全</view>