瀏覽代碼

feat:超级订阅购买页面样式调整,添加提示,每天需要单价计算处理

zhangsiya 1 年之前
父節點
當前提交
b8634f5c14

+ 22 - 8
apps/bigmember_pc/src/views/order/components/vipsubscribe/info.vue

@@ -8,7 +8,7 @@
         cardType="line"
       >
         <div slot="header" class="vip-sub-item-title">购买区域</div>
-        <div class="vip-sub-item-content">
+        <div class="vip-sub-item-content choice-area-content">
           <el-radio-group
             class="radio-selector-group"
             v-model="selectedInfo.radio"
@@ -28,7 +28,7 @@
                 </JStepper>
               </div>
             </el-radio>
-            <el-radio class="radio-selector" label="">
+            <el-radio class="radio-selector" label="" style="margin-left:30px;">
               <div class="radio-content radio-content-text">
                 <span>全国</span>
                 <span class="radio-content-sub-text"
@@ -37,6 +37,7 @@
               </div>
             </el-radio>
           </el-radio-group>
+          <div class="tip-text">支付成功后,可点击“立即订阅”前往设置订阅区域</div>
         </div>
       </SelectorCard>
       <!-- 续费 -->
@@ -929,23 +930,27 @@ export default {
           ? spec.discountPrice
           : spec.originalPrice
       let perDayPrice = 0
+      const giveDay = spec._offers?.time || 0
       switch (cycleType) {
         // 1个月
         case 1:
         case '月': {
-          perDayPrice = (fen2Yuan(price) / 30).toFixed(2)
+          const day = 30 + giveDay
+          perDayPrice = (fen2Yuan(price) / day).toFixed(2)
           break
         }
         // 1个季度
         case 2:
         case '季': {
-          perDayPrice = (fen2Yuan(price) / (30 * 3)).toFixed(2)
+          const day = (30 * 3) + giveDay
+          perDayPrice = (fen2Yuan(price) / day).toFixed(2)
           break
         }
         // 1年
         case 3:
         case '年': {
-          perDayPrice = (fen2Yuan(price) / 365).toFixed(2)
+          const day = 365 + giveDay
+          perDayPrice = (fen2Yuan(price) / day).toFixed(2)
           break
         }
       }
@@ -977,13 +982,14 @@ export default {
 }
 .radio-selector-group {
   display: flex;
-  flex-direction: column;
+  align-items: baseline;
+  flex-direction: row;
 }
 .radio-selector {
   display: flex;
   align-items: center;
   &:not(:last-of-type) {
-    margin-bottom: 24px;
+    margin-bottom: 12px;
   }
   .r-c-label {
     margin-right: 32px;
@@ -1022,10 +1028,18 @@ export default {
   text-decoration: underline;
   cursor: pointer;
 }
-
+.tip-text{
+  font-size: 14px;
+  line-height: 22px;
+  color: #aaa;
+}
 .vip-sub-item-content {
   display: flex;
   align-items: center;
+  &.choice-area-content{
+    align-items: flex-start;
+    flex-direction: column;
+  }
 }
 .vip-sub-tip {
   padding-top: 0 !important;

+ 1 - 1
apps/bigmember_pc/src/views/order/layout.vue

@@ -55,7 +55,7 @@ export default {
 <style lang="scss" scoped>
 .page-create-order {
   &-content {
-    padding-top: 36px;
+    //padding-top: 36px;
     padding-bottom: 126px;
     &.v-w1200 {
       max-width: 1200px !important;