样式调整

components.d.ts

@@ -70,7 +70,4 @@ declare module 'vue' {
     VerifySlide: typeof import('./src/components/Verifition/Verify/VerifySlide.vue')['default']
     WangEditor: typeof import('./src/components/FormUI/wangEditor/index.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

src/views/mall/components/details.vue

@@ -29,8 +29,8 @@
           <div class="title-introduction">{{ state.goodsInfo?.introduction || '--' }}</div>
           <!-- 价格 -->
           <div class="prices my-5">
-            <div class="price mr-3"><span>￥</span>{{ selectedSkuPrice}}</div>
-            <div class="marketPrice" v-if="state.goodsInfo?.marketPrice">{{ selectedSkuMarketPrice}}</div>
+            <div class="price mr-5"><span>￥</span>{{ selectedSkuPrice}}</div>
+            <div class="marketPrice" v-if="selectedSkuMarketPrice && selectedSkuMarketPrice !== selectedSkuPrice">优惠前￥{{ selectedSkuMarketPrice}}</div>
           </div>
           <!-- 销量 -->
           <div class="salesCount mb-5 parameterColor"><span class="l-s-10">已售</span>：{{ state.goodsInfo?.salesCount || 0 }}</div>
@@ -135,9 +135,12 @@ function onSkuChange(e) {
   selectedSkuMarketPrice.value = calcPrice(state.selectedSku?.marketPrice || state.goodsInfo.marketPrice)
 }
 
-const onBuy = async () => {
-  Snackbar.warning('购买功能暂未开放，敬请期待！')
+const selectedSkuInfo = ref(null) // 购买规格信息
+const onBuy = async (info) => {
+  selectedSkuInfo.value = info
+  console.log('购买规格信息:', info)
 }
+// Snackbar.warning('购买功能暂未开放，敬请期待！')
 // function onBuy(sku) {
 //   sheep.$router.go('/pages/order/confirm', {
 //     data: JSON.stringify({
@@ -191,7 +194,7 @@ const onBuy = async () => {
   color: #b7b7b7;
   font-size: 16px;
   line-height: 34px;
-  text-decoration: line-through;
+  // text-decoration: line-through;
 }
 .selectedSkuImgBox {
   position: relative;

src/views/mall/components/details/s-select-sku.vue

@@ -1,46 +1,9 @@
 <template>
   <!-- SKU 信息 -->
   <div>
-    <!-- <div>
-      <div class="header-left ss-m-r-30">
-        <image
-          class="sku-image"
-          :src="state.selectedSku.picUrl || goodsInfo.picUrl"
-          mode="aspectFill"
-        />
-      </div>
-      <div class="header-right ss-flex-col ss-row-between ss-flex-1">
-        <div class="goods-title ss-line-2">{{ goodsInfo.name }}</div>
-        <div class="header-right-bottom ss-flex ss-col-center ss-row-between">
-          <div class="ss-flex">
-            <div class="price-text">
-              {{
-                fen2yuan(
-                  state.selectedSku.promotionPrice || state.selectedSku.price || goodsInfo.price,
-                )
-              }}
-              <text v-if="state.selectedSku.promotionType > 0">
-                <text class="iconBox" v-if="state.selectedSku.promotionType === 4">
-                  限时优惠
-                </text>
-                <text class="iconBox" v-else-if="state.selectedSku.promotionType === 6">
-                  会员价
-                </text>
-                <text class="origin-price-text">
-                  {{ fen2yuan(state.selectedSku.price) }}
-                </text>
-              </text>
-            </div>
-          </div>
-          <div class="stock-text ss-m-l-20">
-            {{ formatStock('exact', state.selectedSku.stock || goodsInfo.stock) }}
-          </div>
-        </div>
-      </div>
-    </div> -->
     <!-- 属性选择 -->
     <div class="d-flex mb-5" v-for="property in propertyList" :key="property.id">
-      <span class="l-s-10 parameterColor mb-1">{{ property.name }}</span>：
+      <span class="parameterColor mb-1">{{ property.name }}</span>：
       <span style="flex: 1;">
         <v-chip
           class="spec-btn mb-1 mr-3"
@@ -63,22 +26,7 @@
       </span>
     </div>
     <!-- 购买数量 -->
-    <!-- <div class="buyCount mb-10">
-      <span class="parameterColor"><span class="l-s-10">数量</span>：</span>
-      <div class="d-flex">
-        <v-btn icon="mdi-minus" size="x-small" :disabled="number<=1" @click="handleReduce"></v-btn>
-        <input
-          v-model="number"
-          class="inputItem mx-2"
-          type="number"
-          :disabled="!goodsInfo.stock"
-          @change="onNumberChange"
-        >
-        <v-btn icon="mdi-plus" size="x-small" :disabled="number >= (state.selectedSku.stock)" @click="handleIncrease"></v-btn>
-      </div>
-      <div class="ml-3" style="color: #b7b7b7; font-size: 14px;">库存：{{ state.selectedSku.stock || props.goodsInfo.stock }}</div>
-    </div> -->
-    <div class="modal-content ss-flex-1">
+    <div class="modal-content">
       <div>
         <div class="buyCount mb-10">
           <span class="parameterColor"><span class="l-s-10">数量</span>：</span>
@@ -342,104 +290,74 @@ const props = defineProps({
     display: flex;
     align-items: center;
   }
-  // 购买
-  .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;
-    }
-
-    .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;
+    border-radius: 30px 30px 0 0;
+    max-height: 1000px;
 
     .modal-header {
       position: relative;
-      padding: 80rpx 20rpx 40rpx;
+      padding: 80px 20px 40px;
 
       .sku-image {
-        width: 160rpx;
-        height: 160rpx;
-        border-radius: 10rpx;
+        width: 160px;
+        height: 160px;
+        border-radius: 10px;
       }
 
       .header-right {
-        height: 160rpx;
+        height: 160px;
       }
 
       .close-icon {
         position: absolute;
-        top: 10rpx;
-        right: 20rpx;
-        font-size: 46rpx;
+        top: 10px;
+        right: 20px;
+        font-size: 46px;
         opacity: 0.2;
       }
 
       .goods-title {
-        font-size: 28rpx;
+        font-size: 28px;
         font-weight: 500;
-        line-height: 42rpx;
+        line-height: 42px;
       }
 
       .score-img {
-        width: 36rpx;
-        height: 36rpx;
-        margin: 0 4rpx;
+        width: 36px;
+        height: 36px;
+        margin: 0 4px;
       }
       .stock-text {
-        font-size: 26rpx;
+        font-size: 26px;
         color: #999999;
       }
     }
 
     .modal-content {
-      padding: 0 20rpx;
+      padding: 0 20px;
 
       .modal-content-scroll {
-        max-height: 600rpx;
+        max-height: 600px;
 
         .label-text {
-          font-size: 26rpx;
+          font-size: 26px;
           font-weight: 500;
         }
 
         .buy-num-box {
-          height: 100rpx;
+          height: 100px;
         }
 
         .spec-btn {
-          height: 60rpx;
-          min-width: 100rpx;
-          padding: 0 30rpx;
+          height: 60px;
+          min-width: 100px;
+          padding: 0 30px;
           background: #f4f4f4;
-          border-radius: 30rpx;
+          border-radius: 30px;
           color: #434343;
-          font-size: 26rpx;
-          margin-right: 10rpx;
-          margin-bottom: 10rpx;
+          font-size: 26px;
+          margin-right: 10px;
+          margin-bottom: 10px;
         }
 
         .disabled-btn {
@@ -454,15 +372,15 @@ const props = defineProps({
   .iconBox {
     width: fit-content;
     height: fit-content;
-    padding: 2rpx 10rpx;
+    padding: 2px 10px;
     background-color: rgb(255, 242, 241);
     color: #ff2621;
-    font-size: 24rpx;
-    margin-left: 5rpx;
+    font-size: 24px;
+    margin-left: 5px;
   }
 
   .origin-price-text {
-    font-size: 26rpx;
+    font-size: 26px;
     font-weight: 400;
     text-decoration: line-through;
     color: gray;