专辑价格

src/views/content_manage/album_manage/CreateAlbum.vue

@@ -37,7 +37,7 @@
             </el-step>
             <el-step
               :title="id ? '编辑内容' : '添加内容'"
-              description="为专辑添加内容"
+              :description="id ? '为专辑编辑内容' : '为专辑添加内容'"
             >
               <svg-icon icon-class="dot" slot="icon" class="svg-dot"></svg-icon>
             </el-step>
@@ -152,7 +152,51 @@
             </el-form-item>
           </el-form>
           <div v-if="stepIndex === 1">
-            <div class="price-setting"></div>
+            <div class="price-setting">
+              <h2>价格设置</h2>
+              <el-divider></el-divider>
+              <div class="price-setting-box">
+                <div class="item1">
+                  <p>基础版</p>
+                </div>
+                <div class="item2">
+                  <h5>累计价格</h5>
+                  <p>专辑中所有内容基础版原价及优惠价累计</p>
+                  <div>
+                    <span
+                      >￥{{
+                        albumPrice.price_discount_content_item_total
+                      }}</span
+                    >
+                    <span class="oldPrice"
+                      >￥{{ albumPrice.price_content_item_total }}</span
+                    >
+                  </div>
+                </div>
+                <div class="item2">
+                  <h5>专辑价格</h5>
+                  <p>专辑价格不可超过累计价格</p>
+                  <el-input
+                    v-model="albumPrice.price"
+                    placeholder="输入"
+                    @blur="blurPrice($event, 'albumPrice', 'price')"
+                    @input="inputPrice($event, 'albumPrice', 'price')"
+                    ><template slot="prepend">￥</template></el-input
+                  >
+                </div>
+                <div class="item2">
+                  <h5>专辑优惠价格</h5>
+                  <p>专辑优惠价格不可高于专辑价格</p>
+                  <el-input
+                    v-model="albumPrice.price_discount"
+                    placeholder="输入"
+                    @blur="blurPrice($event, 'albumPrice', 'price_discount')"
+                    @input="inputPrice($event, 'albumPrice', 'price_discount')"
+                    ><template slot="prepend">￥</template></el-input
+                  >
+                </div>
+              </div>
+            </div>
             <div class="issue-top">
               <h4 class="issue-top-left">内容列表</h4>
               <el-button type="primary" size="small" @click="addGoods"
@@ -209,6 +253,23 @@
                   {{ scope.row.study_phase_name }}
                 </template>
               </el-table-column>
+              <el-table-column
+                prop="price_discount"
+                label="价格"
+                width="154"
+                sortable="custom"
+              >
+                <template slot-scope="scope">
+                  <span class="currectPrice"
+                    >￥{{ scope.row.price_discount | cutMoneyFiter }}</span
+                  >
+                  <span
+                    class="oldPrice"
+                    v-if="scope.row.price !== scope.row.price_discount"
+                    >(￥{{ scope.row.price | cutMoneyFiter }})</span
+                  >
+                </template>
+              </el-table-column>
               <el-table-column fixed="right" label="操作" width="180">
                 <template slot-scope="scope">
                   <el-button
@@ -264,11 +325,15 @@ import Breadcrumb from "../../../components/Breadcrumb.vue";
 import { getLogin } from "@/api/ajax";
 import Upload from "../../../components/Upload.vue";
 import { mapState } from "vuex";
+import { cutMoneyFiter } from "@/utils/defined";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { Header, NavMenu, Breadcrumb, Upload },
   props: {},
+  filters: {
+    cutMoneyFiter,
+  },
   data() {
     //这里存放数据
     const validateValidity = (rule, value, callback) => {
@@ -378,6 +443,12 @@ export default {
       total_count: 0,
       dataSort: {},
       tableData: [],
+      albumPrice: {
+        price_content_item_total: 0,
+        price_discount_content_item_total: 0,
+        price: 0,
+        price_discount: 0,
+      },
       orgList: [],
       goodsTypeList: [
         {
@@ -527,7 +598,6 @@ export default {
     // 上一步下一步
     handleStep(type) {
       if (type == "-") {
-        console.log(this.stepIndex);
         if (this.stepIndex > 0) this.stepIndex--;
       } else {
         if (this.stepIndex === 0) {
@@ -552,8 +622,8 @@ export default {
       let MethodName = "/ShopServer/Manager/AlbumManager/SetAlbumPrice";
       let data = {
         id: this.id ? this.id : this.albumId,
-        price: 99.8,
-        price_discount: 35.99,
+        price: this.albumPrice.price,
+        price_discount: this.albumPrice.price_discount,
       };
       getLogin(MethodName, data)
         .then((res) => {
@@ -644,6 +714,8 @@ export default {
           if (res.status === 1) {
             this.tableData = res.content_item_list;
             this.total_count = res.total_count;
+            this.albumPrice = res.album_info;
+            // this.albumPrice.price_discount_content_item_total = 28.8;
           }
         })
         .catch(() => {
@@ -713,6 +785,33 @@ export default {
           this.loading = false;
         });
     },
+    // 处理教材价格 最多两位小数
+    inputPrice(e, obj, obj1) {
+      e = e.match(/^\d*(\.?\d{0,2})/g)[0] || "";
+      this[obj][obj1] = e;
+    },
+    // 处理教材价格 失去焦点保留两位小数
+    blurPrice(e, obj, obj1) {
+      if (e.target.value) {
+        this[obj][obj1] = Number(e.target.value).toFixed(2);
+        if (
+          obj === "albumPrice" &&
+          obj1 === "price" &&
+          e.target.value > this.albumPrice.price_discount_content_item_total
+        ) {
+          this[obj][obj1] = Number(
+            this.albumPrice.price_discount_content_item_total
+          ).toFixed(2);
+        }
+        if (
+          obj === "albumPrice" &&
+          obj1 === "price_discount" &&
+          e.target.value > this.albumPrice.price
+        ) {
+          this[obj][obj1] = Number(this.albumPrice.price).toFixed(2);
+        }
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -856,6 +955,92 @@ export default {
     }
   }
 }
+.currectPrice {
+  color: #d85555;
+  font-weight: 500;
+  margin-right: 4px;
+}
+.oldPrice {
+  color: #a7a7a7;
+  font-weight: 500;
+}
+.price-setting {
+  margin-bottom: 32px;
+  h2 {
+    color: #1d2129;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+    margin: 0;
+  }
+  :deep .el-divider {
+    margin: 24px 0 16px 0;
+  }
+  &-box {
+    display: flex;
+    column-gap: 64px;
+    .item1 {
+      width: 160px;
+      padding: 8px;
+      color: #000;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      display: flex;
+      align-items: center;
+    }
+    .item2 {
+      flex: 1;
+      h5 {
+        color: #4e5969;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        margin: 0;
+      }
+      p {
+        color: #86909c;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+        margin: 0;
+      }
+      span {
+        color: #f53f3f;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 32px;
+      }
+      .oldPrice {
+        color: #86909c;
+        font-size: 14px;
+        line-height: 22px; /* 157.143% */
+        text-decoration-line: line-through;
+        margin-left: 4px;
+      }
+      .el-input {
+        width: auto;
+      }
+      :deep .el-input-group__prepend {
+        color: #1d2129;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 30px;
+        width: auto;
+        background: none;
+      }
+      :deep .el-input__inner {
+        margin: 0;
+        background: none;
+        color: #1d2129;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 32px;
+        padding: 0;
+      }
+    }
+  }
+}
 </style>
 
 <style lang="scss">