добавить поле для старой цены у курсов, показывать старую цену зачеркнутой рядом с новой в курсах

api/v1/serializers/course.py

@@ -128,6 +128,7 @@ class CourseCreateSerializer(DispatchContentMixin,
             'from_author',
             'cover',
             'price',
+            'old_price',
             'age',
             'is_infinite',
             'deferred_start_at',
@@ -280,6 +281,7 @@ class CourseSerializer(DynamicFieldsMixin, serializers.ModelSerializer):
             'from_author',
             'cover',
             'price',
+            'old_price',
             'age',
             'is_infinite',
             'deferred_start_at',

apps/course/models.py

@@ -80,6 +80,10 @@ class Course(BaseModel, DeactivatedMixin):
         verbose_name='Обложка курса', on_delete=models.SET_NULL,
         null=True, blank=True,
     )
+    old_price = models.DecimalField(
+        'Старая цена курса',
+        max_digits=10, decimal_places=2, null=True, blank=True
+    )
     price = models.DecimalField(
         'Цена курса', help_text='Если цена не выставлена, то курс бесплатный',
         max_digits=10, decimal_places=2, null=True, blank=True

apps/course/templates/course/_items.html

@@ -50,6 +50,9 @@
     <a class="courses__theme theme {{ theme_color }}"
        href="{% url 'courses' %}?category={{ course.category.id }}">{{ course.category | upper }}</a>
     {% if not course.is_free %}
+      {% if course.old_price %}
+      <div class="courses__old-price"><s>{{ course.old_price|floatformat:"-2" }}₽</s></div>
+      {% endif %}
       <div class="courses__price">{{ course.price|floatformat:"-2" }}₽</div>
     {% endif %}
   </div>

apps/course/templates/course/course.html

@@ -114,13 +114,16 @@
             <div class="meta__title">{{ course.duration | rupluralize:"день,дня,дней" }}</div>
           </a>
           {% if course.price %}
-          <div class="meta__item">
+          <div class="meta__item" title="Цена">
             <div class="meta__icon">
               <svg class="icon icon-money">
                 <use xlink:href="{% static 'img/sprite.svg' %}#icon-money"></use>
               </svg>
             </div>
-            <div class="meta__title">{{ course.price|floatformat:"-2" }}₽</div>
+            <div class="meta__title">
+              <s>{{ course.old_price|floatformat:"-2" }}₽</s>
+              {{ course.price|floatformat:"-2" }}₽
+            </div>
           </div>
           {% endif %}
           <div class="meta__item">

web/src/components/CourseRedactor.vue

@@ -22,6 +22,7 @@
                   <lil-select :value.sync="course.category" :options="categoryOptions"
                                 placeholder="Выберите категорию"/>
                 </div>
+                <div class="courses__old-price" v-if="course.is_paid && course.old_price"><s>{{ course.old_price }}₽</s></div>
                 <div class="courses__price" v-if="course.is_paid && course.price">{{ course.price }}₽</div>
               </div>
               <div class="courses__title field field" v-bind:class="{ error: ($v.course.title.$dirty || showErrors) && $v.course.title.$invalid }">
@@ -92,7 +93,14 @@
                 <div v-if="course.is_paid" class="info__field field">
                   <div class="field__label field__label_gray">СТОИМОСТЬ</div>
                   <div class="field__wrap field__wrap__appended field__wrap__100px">
-                    <input type="text" class="field__input field__input__appended" v-model.number="displayPrice">
+                    <input type="text" class="field__input field__input__appended" v-model.number.lazy="displayPrice">
+                    <button disabled class="field__append">руб.</button>
+                  </div>
+                </div>
+                <div v-if="course.is_paid" class="info__field field">
+                  <div class="field__label field__label_gray">СТОИМОСТЬ БЕЗ СКИДКИ</div>
+                  <div class="field__wrap field__wrap__appended field__wrap__100px">
+                    <input type="text" class="field__input field__input__appended" v-model.number.lazy="displayOldPrice">
                     <button disabled class="field__append">руб.</button>
                   </div>
                 </div>
@@ -263,6 +271,7 @@
                     duration: null,
                     author: null,
                     price: null,
+                    old_price: null,
                     age: 0,
                     url: '',
                     coverImage: '',
@@ -1011,23 +1020,14 @@
                     this.course.price = value || 0;
                 }
             },
-            // userSelect: {
-            //     get() {
-            //         if (!this.users || this.users.length === 0 || !this.course || !this.course.author) {
-            //             return null;
-            //         }
-            //         let value;
-            //         this.users.forEach((user) => {
-            //             if (user.value === this.course.author) {
-            //                 value = user;
-            //             }
-            //         });
-            //         return value;
-            //     },
-            //     set(value) {
-            //         this.course.author = value.value;
-            //     }
-            // },
+            displayOldPrice: {
+                get: function () {
+                    return this.course.is_paid && this.course.old_price ? (this.course.old_price || '') : '';
+                },
+                set: function (value) {
+                    this.course.old_price = value || 0;
+                }
+            },
             courseFullUrl() {
                 if (!this.course.url) {
                     return `https://lil.city/course/${this.course.id}`;
@@ -1194,10 +1194,6 @@
     flex: 1;
   }
 
-  .courses__price {
-    margin-left: 20px;
-  }
-
   .courses__preview {
     .upload {
       position: absolute;

web/src/js/modules/api.js

@@ -108,6 +108,7 @@ export const api = {
             short_description: courseObject.short_description,
             category: courseObject.category,
             price: courseObject.is_paid && courseObject.price || 0,
+            old_price: courseObject.is_paid && courseObject.old_price || 0,
             age: courseObject.age,
             deferred_start_at: deferredStart,
             duration: courseObject.duration || 0,
@@ -186,6 +187,7 @@ export const api = {
             category: courseJSON.category && courseJSON.category.id ? courseJSON.category.id : courseJSON.category,
             author: courseJSON.author && courseJSON.author.id ? courseJSON.author.id : courseJSON.author,
             price: parseFloat(courseJSON.price),
+            old_price: parseFloat(courseJSON.old_price),
             is_paid: parseFloat(courseJSON.price) > 0,
             is_deferred: isDeferred,
             date: deferredDate || courseJSON.date,

web/src/sass/_common.sass

@@ -1760,12 +1760,14 @@ a.grey-link
   &__details
     display: flex
     margin-bottom: 10px
-  &__price
-    margin-left: auto
+  &__price, &__old-price
+    margin-left: 20px
     +fb
     font-size: 12px
     letter-spacing: 2px
     color: $cl
+  &__old-price
+    margin-right: -15px
   &__title
     display: block
     margin-bottom: 10px
@@ -1776,6 +1778,7 @@ a.grey-link
       line-height: 1.33
   &__theme
     text-transform: uppercase
+    flex: 1
   &__user
     margin-top: 20px
   &_two &__item