【功能完善】积分商城：完善活动详情页样式

pages/goods/point.vue

@@ -28,29 +28,26 @@
         />
 
         <!-- 价格+标题 -->
-        <view class="title-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34">
+        <view class="title-card detail-card ss-p-y-40 ss-p-x-20">
-          <view class="price-box ss-flex ss-row-between ss-m-b-18">
+          <view class="ss-flex ss-row-between ss-col-center ss-m-b-18">
-            <view class="ss-flex">
+            <view class="price-box ss-flex ss-col-bottom">
-              <view class="price-text ss-m-r-16">
+              <view v-if="getShowPrice.price > 0" class="price-text"> ￥{{ getShowPrice.price }}</view>
-                {{ getShowPriceText }}
+              <text v-if="getShowPrice.price > 0 && getShowPrice.point > 0">+</text>
-              </view>
+              <image
-              <view class="tig ss-flex ss-col-center">
+                :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
-                <view class="tig-icon ss-flex ss-col-center ss-row-center">
+                class="point-img"
-                  <text class="cicon-alarm"></text>
+              ></image>
-                </view>
+              <view class="point-text ss-m-r-16">
-                <view class="tig-title">积分价</view>
+                {{ getShowPrice.point }}
               </view>
             </view>
-          </view>
+            <view class="sales-text">
-          <view class="ss-flex ss-row-between ss-m-b-60">
+              {{ formatExchange(state.goodsInfo.sales_show_type, state.goodsInfo.sales) }}
-            <view class="origin-price ss-flex ss-col-center" v-if="state.goodsInfo.marketPrice">
-              原价
-              <view class="origin-price-text">
-                {{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
-              </view>
             </view>
           </view>
-
+          <view class="origin-price-text ss-m-b-60" v-if="state.goodsInfo.marketPrice">
+            原价：￥{{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
+          </view>
           <view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name || '' }}</view>
           <view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
         </view>
@@ -99,7 +96,7 @@
             :disabled="state.goodsInfo.stock === 0"
           >
             <view class="price-text">
-              {{getShowPriceText}}
+              {{ getShowPriceText }}
             </view>
             <view v-if="state.goodsInfo.stock === 0">已售罄</view>
             <view v-else>立即兑换</view>
@@ -115,7 +112,7 @@
   import { onLoad, onPageScroll } from '@dcloudio/uni-app';
   import sheep from '@/sheep';
   import { isEmpty } from 'lodash-es';
-  import { fen2yuan, formatGoodsSwiper } from '@/sheep/hooks/useGoods';
+  import { fen2yuan, formatExchange, formatGoodsSwiper } 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';
@@ -126,7 +123,7 @@
   import { PromotionActivityTypeEnum } from '@/sheep/util/const';
   import PointApi from '@/sheep/api/promotion/point';
 
-  const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-bg.png');
+  const headerBg = sheep.$url.css('/static/img/shop/goods/score-bg.png');
   const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png');
   const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png');
   const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
@@ -192,13 +189,18 @@
 
   const activity = ref();
 
-  const getShowPriceText = computed(() => {
+  const getShowPrice = computed(() => {
-    let priceText = `${activity.value.point}积分${!activity.value.price ? '' : `+￥${fen2yuan(activity.value.price)}`}`;
     if (!isEmpty(state.selectedSku)) {
       const sku = state.selectedSku;
-      priceText = `${sku.point}积分${!sku.pointPrice ? '' : `+￥${fen2yuan(sku.pointPrice)}`}`;
+      return {
+        point: sku.point,
+        price: !sku.pointPrice ? '' : fen2yuan(sku.pointPrice),
+      };
     }
-    return priceText;
+    return {
+      point: activity.value.point,
+      price: !activity.value.price ? '' : fen2yuan(activity.value.price),
+    };
   });
 
   // 查询活动
@@ -264,102 +266,44 @@
   .title-card {
     width: 710rpx;
     box-sizing: border-box;
-    // height: 320rpx;
     background-size: 100% 100%;
     border-radius: 10rpx;
     background-image: v-bind(headerBg);
     background-repeat: no-repeat;
 
     .price-box {
+      .point-img {
+        width: 36rpx;
+        height: 36rpx;
+        margin: 0 4rpx;
+      }
+      .point-text {
+        font-size: 42rpx;
+        font-weight: 500;
+        color: #ff3000;
+        line-height: 36rpx;
+        font-family: OPPOSANS;
+      }
       .price-text {
-        font-size: 30rpx;
+        font-size: 42rpx;
         font-weight: 500;
-        color: #fff;
+        color: #ff3000;
-        line-height: normal;
+        line-height: 36rpx;
         font-family: OPPOSANS;
       }
     }
-
+    .origin-price-text {
-    .origin-price {
+      font-size: 26rpx;
-      font-size: 24rpx;
       font-weight: 400;
-      color: #fff;
+      text-decoration: line-through;
-      opacity: 0.7;
+      color: $gray-c;
-
+      font-family: OPPOSANS;
-      .origin-price-text {
-        text-decoration: line-through;
-
-        font-family: OPPOSANS;
-
-        &::before {
-          content: '￥';
-        }
-      }
     }
 
-    .tig {
+    .sales-text {
-      border: 2rpx solid #ffffff;
-      border-radius: 4rpx;
-      width: 126rpx;
-      height: 38rpx;
-
-      .tig-icon {
-        width: 40rpx;
-        height: 40rpx;
-        margin-left: -2rpx;
-        background: #ffffff;
-        border-radius: 4rpx 0 0 4rpx;
-
-        .cicon-alarm {
-          font-size: 32rpx;
-          color: #fc6e6f;
-        }
-      }
-
-      .tig-title {
-        width: 86rpx;
-        font-size: 24rpx;
-        font-weight: 500;
-        line-height: normal;
-        color: #ffffff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-
-    .countdown-title {
       font-size: 26rpx;
       font-weight: 500;
-      color: #ffffff;
+      color: $gray-c;
-    }
-
-    .countdown-time {
-      font-size: 26rpx;
-      font-weight: 500;
-      color: #ffffff;
-
-      .countdown-h {
-        font-size: 24rpx;
-        font-family: OPPOSANS;
-        font-weight: 500;
-        color: #ffffff;
-        padding: 0 4rpx;
-        height: 40rpx;
-        background: rgba(#000000, 0.1);
-        border-radius: 6rpx;
-      }
-
-      .countdown-num {
-        font-size: 24rpx;
-        font-family: OPPOSANS;
-        font-weight: 500;
-        color: #ffffff;
-        width: 40rpx;
-        height: 40rpx;
-        background: rgba(#000000, 0.1);
-        border-radius: 6rpx;
-      }
     }
 
     .discounts-box {
@@ -392,15 +336,13 @@
       font-size: 30rpx;
       font-weight: bold;
       line-height: 42rpx;
-      color: #fff;
     }
 
     .subtitle-text {
       font-size: 26rpx;
       font-weight: 400;
-      color: #ffffff;
+      color: $dark-9;
       line-height: 42rpx;
-      opacity: 0.9;
     }
   }
 
@@ -517,9 +459,4 @@
       color: #333333;
     }
   }
-
-  image {
-    width: 100%;
-    height: 100%;
-  }
 </style>