style(theme): 统一应用主题样式并更新组件样式变量

- 在多个页面组件中添加动态主题样式绑定
- 将硬编码的颜色值替换为CSS变量和主题配置
- 引入主题样式计算逻辑到各个页面
- 更新优惠券、地址、订单等页面的主题适配
- 替换线性渐变背景为动态主题颜色
- 移除uni_modules组件中的$set方法调用以优化性能
- 更新README中主题色管理状态为已完成

pages/product/comment.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="comment">
+  <view :style="themeStyle" class="comment">
     <u-navbar
       title="商品评价"
       :fixed="true"
@@ -83,11 +83,15 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { onLoad, onReachBottom } from '@dcloudio/uni-app'
 import * as membersApi from '@/api/members.js'
 import configs from '@/config/config'
-import { noPassByName } from '@/utils/filters.js'
+import { noPassByName } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const status = ref('loadmore')
 const userImage = configs.defaultUserPhoto

pages/product/product/popup/address.vue

@@ -104,10 +104,9 @@ function clickAddress(val: any) {
 <style lang="scss" scoped>
 .light {
   background-image: linear-gradient(
-    135deg,
-    #ffba0d,
-    #ffc30d 69%,
-    #ffcf0d
+    91deg,
+    $light-color 1%,
+    $aider-light-color 99%
   ) !important;
   box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
 }

pages/product/product/promotion/-promotion-coupon.vue

@@ -102,7 +102,7 @@ function getCoupon(item: any, index: number) {
 		display: flex;
 		flex-direction: column;
 		min-height: 230rpx;
-		background: #e9ebfb;
+		background: var(--theme-primary-10, #ffe8e5);
 		margin: 30rpx 0;
 		padding: 10rpx 30rpx;
 		border-radius: 12rpx;
@@ -152,7 +152,7 @@ function getCoupon(item: any, index: number) {
 		.price {
 			width: 33%;
 			justify-content: center;
-			color: #6772e5;
+			color: $price-color;
 			font-size: 40rpx;
 			display: flex;
 			height: 100%;
@@ -196,7 +196,7 @@ function getCoupon(item: any, index: number) {
 				text-align: center;
 				line-height: 56rpx;
 				color: #fff;
-				background: #6772e5;
+				background: $price-color;
 				border-radius: 28rpx;
 				font-size: 24rpx;
 				box-sizing: border-box;

pages/product/product/promotion/group.scss

@@ -89,7 +89,7 @@
 
 .countdown-day {
 	font-size: 22rpx;
-	color: #f71471;
+	color: $price-color;
 	margin-right: 4rpx;
 }
 
@@ -99,13 +99,13 @@
 	padding: 0 4rpx;
 	font-size: 25rpx;
 	color: #fff;
-	background-color: #f71471;
+	background-color: $price-color;
 	border-radius: 4rpx;
 	text-align: center;
 }
 
 .countdown-colon {
 	font-size: 25rpx;
-	color: #f71471;
+	color: $price-color;
 	margin: 0 2rpx;
 }

pages/product/product/style.scss

@@ -44,14 +44,14 @@ page {
     display: flex;
     align-items: center;
     > .to-buy {
-        background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
+        background-image: linear-gradient(135deg, $main-color, $light-color);
     }
     > .to-buy-theme {
         background-image: none;
         background: var(--theme-primary, #ff3c2a);
     }
     > .to-store-car {
-        background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
+        background-image: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
     }
     > .to-store-btn {
         flex: 1;
@@ -426,7 +426,7 @@ page {
 .showBox {
     width: 100%;
     height: 90rpx;
-    background: #ff6262;
+    background: $main-color;
     color: #fff;
     padding: 0 20rpx;
 

pages/product/shopList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :style="themeStyle">
     <u-navbar
       :border="false"
       :fixed="true"
@@ -43,10 +43,14 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, computed } from 'vue'
 import { onReachBottom } from '@dcloudio/uni-app'
 import { getStoreList } from '@/api/store'
 import { unitPrice } from '@/utils/filters.js'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
 const params = reactive({
   pageNumber: 1,

pages/product/shopPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view :style="themeStyle">
     <!-- 楼层装修店铺信息 -->
     <div>
       <!-- 基础店铺：返回 + 搜索；楼层装修无顶部搜索时：仅返回 -->
@@ -243,9 +243,11 @@ import {
   talkIm,
   unitPrice,
 } from '@/utils/filters.js'
-import storage from '@/utils/storage.js'
+import storage from '@/utils/storage.js'
+import { getThemeStyle } from '@/utils/theme'
 
-const store = useStore()
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 const mainColor = computed(() => store.getters.mainColor)
 
 const pageData = ref<{ list: any[] }>({ list: [] })
@@ -753,7 +755,7 @@ onMounted(() => {
 
     .money {
       width: 45%;
-      color: #fd6466;
+      color: $price-color;
       font-weight: 500;
       text-align: center;
 
@@ -808,34 +810,52 @@ onMounted(() => {
   }
 }
 
+.category {
+  padding: 0 20rpx;
+}
+
 .category-item {
   background: #fff;
-  padding: 22rpx;
-  margin: 20rpx 10rpx;
+  border-radius: 16rpx;
+  padding: 0 24rpx;
+  margin: 20rpx 0;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 
   > .flex {
-    color: #666;
+    color: #333;
+    font-size: 28rpx;
+    font-weight: 500;
+    height: 88rpx;
+    align-items: center;
     justify-content: space-between;
   }
 
   > .child-list {
     display: flex;
-    margin: 20rpx 0;
     flex-wrap: wrap;
+    padding-bottom: 8rpx;
 
     > .child {
-      justify-content: center;
-      margin: 1% 0;
-      display: flex;
-      width: 48%;
+      width: 32%;
+      margin-right: 2%;
+      margin-bottom: 16rpx;
+      height: 64rpx;
+      line-height: 64rpx;
+      padding: 0 12rpx;
       font-size: 24rpx;
-      color: #999;
-      margin-right: 1%;
-      border: 1rpx solid #ededed;
+      color: #666;
+      background: #f7f8fa;
+      border: none;
+      border-radius: 8rpx;
       box-sizing: border-box;
-      height: 70rpx;
       text-align: center;
-      line-height: 70rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
     }
   }
 }