SKU模块选中属性渲染

src/pages/goods/goods.vue

@@ -30,7 +30,7 @@
       <view class="action">
         <view class="item arrow" @tap="isShowSku = true">
           <text class="label">选择</text>
-          <text class="text ellipsis"> 请选择商品规格 </text>
+          <text class="text ellipsis"> {{ selectArrText }} </text>
         </view>
         <view @tap="openPopup('address')" class="item arrow">
           <text class="label">送至</text>
@@ -121,6 +121,12 @@
     :mode="mode"
     add-cart-background-color="#FFA868"
     buy-now-background-color="#27BA9B"
+    ref="skuPopupRef"
+    :actived-style="{
+      color: '#27BA9B',
+      borderColor: '#27BA9B',
+      backgroundColor: '#E9F8F5',
+    }"
   />
 </template>
 
@@ -131,7 +137,10 @@ import type { GoodsResult } from '@/types/goods'
 import { getGoodsByIdAPI } from '@/services/goods'
 import AddressPanel from './components/AddressPanel.vue'
 import ServicePanel from './components/ServicePanel.vue'
-import type { SkuPopupLocaldata } from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
+import type {
+  SkuPopupInstance,
+  SkuPopupLocaldata,
+} from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
 
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
@@ -223,6 +232,14 @@ const openSkuPopup = (val: SkuMode) => {
   // 修改按钮模式
   mode.value = val
 }
+
+// SKU组件实例
+const skuPopupRef = ref<SkuPopupInstance>()
+
+// 计算被选中的值
+const selectArrText = computed(() => {
+  return skuPopupRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'
+})
 </script>
 
 <style lang="scss">
@@ -403,7 +420,7 @@ page {
 /* 同类推荐 */
 .similar {
   .content {
-    padding: 0 20rpx 200rpx;
+    padding: 0 20rpx 20rpx;
     background-color: #f4f4f4;
     display: flex;
     flex-wrap: wrap;
@@ -446,11 +463,11 @@ page {
   position: fixed;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: calc((var(--window-bottom)));
   z-index: 1;
   background-color: #fff;
   height: 100rpx;
-  padding: 0 20rpx var(--window-bottom);
+  padding: 0 20rpx;
   border-top: 1rpx solid #eaeaea;
   display: flex;
   justify-content: space-between;
@@ -469,17 +486,18 @@ page {
     .addcart {
       background-color: #ffa868;
     }
-    .buynow,
     .payment {
       background-color: #27ba9b;
       margin-left: 20rpx;
     }
   }
   .icons {
-    padding-right: 10rpx;
+    padding-right: 20rpx;
     display: flex;
     align-items: center;
     flex: 1;
+    // 兼容 H5 端和 App 端的导航链接样式
+    .navigator-wrap,
     .icons-button {
       flex: 1;
       text-align: center;