10.23 佣金

src/views/userManagement/memberManagement/index.vue

@@ -3,12 +3,13 @@
     <div>
       <el-button
         class="filter-item"
-        style="margin-bottom: 10px;"
+        style="margin-bottom: 10px"
         @click="newMembershipGrade"
         type="primary"
         icon="edit"
         v-if="memberManagement_btn_add"
-      >添加会员等级</el-button>
+        >添加会员等级</el-button
+      >
     </div>
     <el-table
       :key="tableKey"
@@ -21,12 +22,12 @@
     >
       <el-table-column align="center" label="等级序号">
         <template slot-scope="scope">
-          <span>{{scope.row.level}}</span>
+          <span>{{ scope.row.level }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" label="名称">
         <template slot-scope="scope">
-          <span>{{scope.row.name}}</span>
+          <span>{{ scope.row.name }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" label="图标">
@@ -43,7 +44,7 @@
           </span>
         </template>
       </el-table-column>
-       <el-table-column align="center" label="商品图片">
+      <el-table-column align="center" label="商品图片">
         <template slot-scope="scope">
           <span>
             <img class="image" :src="scope.row.itemImg" />
@@ -52,22 +53,27 @@
       </el-table-column>
       <el-table-column align="center" label="折扣">
         <template slot-scope="scope">
-          <span>{{scope.row.discount}}</span>
+          <span>{{ scope.row.discount }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" label="免费天数">
         <template slot-scope="scope">
-          <span>{{scope.row.number}}</span>
+          <span>{{ scope.row.number }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" label="价格">
         <template slot-scope="scope">
-          <span>{{scope.row.price}}</span>
+          <span>{{ scope.row.price }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="佣金比例">
+        <template slot-scope="scope">
+          <span>{{ scope.row.extract }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" label="有效期">
         <template slot-scope="scope">
-          <span>{{scope.row.endDate}}</span>
+          <span>{{ scope.row.endDate }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" label="操作" fixed="right">
@@ -75,26 +81,42 @@
           <el-button
             size="small"
             class="el-button el-button--text el-button--small"
-            style="color:red"
+            style="color: red"
             @click="delMembership(scope.row)"
             v-if="memberManagement_btn_del"
-          >删除</el-button>
+            >删除</el-button
+          >
           <el-button
             size="small"
             class="el-button el-button--text el-button--small"
             @click="compileShip(scope.row)"
-          >编辑</el-button>
+            >编辑</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <div>
-      <el-dialog :title="vipTitle" :visible.sync="addMembershipGrade" class="mGrade" @close='cllsePop'>
-        <el-form :model="add" :rules="rules" ref="membershipGrade" label-width="110px">
+      <el-dialog
+        :title="vipTitle"
+        :visible.sync="addMembershipGrade"
+        class="mGrade"
+        @close="cllsePop"
+      >
+        <el-form
+          :model="add"
+          :rules="rules"
+          ref="membershipGrade"
+          label-width="110px"
+        >
           <el-row>
             <el-col :span="16">
               <el-form-item label="会员等级名称" prop="name">
-                <el-input type="text" v-model="add.name" placeholder="请填写会员等级名称"></el-input>
+                <el-input
+                  type="text"
+                  v-model="add.name"
+                  placeholder="请填写会员等级名称"
+                ></el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -122,7 +144,7 @@
                   :disabled="forbid"
                 >
                   <el-option
-                    v-for="(val, key, index) in endDatelist "
+                    v-for="(val, key, index) in endDatelist"
                     :key="val.id"
                     :label="val.name"
                     :value="val.id"
@@ -158,6 +180,21 @@
               </el-form-item>
             </el-col>
           </el-row>
+          <el-row>
+            <el-col :span="16">
+              <el-form-item label="佣金比例">
+                <el-input-number
+                  type="number"
+                  :min="0"
+                  :max="100"
+                  :step="1"
+                  :precision="0"
+                  v-model="add.extract"
+                  placeholder="佣金比例"
+                ></el-input-number>
+              </el-form-item>
+            </el-col>
+          </el-row>
           <el-row>
             <el-col :span="16">
               <el-form-item label="价格" prop="price">
@@ -172,11 +209,13 @@
             </el-col>
           </el-row>
           <el-row>
-            <el-form-item label="图标" :style="{display:'block'}">
+            <el-form-item label="图标" :style="{ display: 'block' }">
               <el-upload
                 class="upload-demo"
                 :headers="getHeaderWithToken"
-                :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
+                :action="
+                  BASE_API + '/api/universal/file/app/unauth/admin/upload'
+                "
                 :show-file-list="false"
                 :on-success="handleAvatarSuccess"
                 list-type="picture"
@@ -184,66 +223,93 @@
                 <img
                   v-if="$utils.isString(add.icon) && !$utils.isEmpty(add.icon)"
                   :src="add.icon"
-                  style="width:300px;max-height:300px;"
+                  style="width: 300px; max-height: 300px"
                 />
                 <i
                   v-else
                   class="el-icon-plus avatar-uploader-icon"
-                  style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"
+                  style="
+                    lineheight: 100px;
+                    width: 300px;
+                    height: 100px;
+                    border: 1px dashed #ccc;
+                  "
                 ></i>
               </el-upload>
             </el-form-item>
           </el-row>
           <el-row>
-            <el-form-item label="大图标" :style="{display:'block'}">
+            <el-form-item label="大图标" :style="{ display: 'block' }">
               <el-upload
                 class="upload-demo"
                 :headers="getHeaderWithToken"
-                :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
+                :action="
+                  BASE_API + '/api/universal/file/app/unauth/admin/upload'
+                "
                 :show-file-list="false"
                 :on-success="handleAvatarSuccessBig"
                 list-type="picture"
               >
                 <img
-                  v-if="$utils.isString(add.bigIcon) && !$utils.isEmpty(add.bigIcon)"
+                  v-if="
+                    $utils.isString(add.bigIcon) && !$utils.isEmpty(add.bigIcon)
+                  "
                   :src="add.bigIcon"
-                  style="width:300px;max-height:300px;"
+                  style="width: 300px; max-height: 300px"
                 />
                 <i
                   v-else
                   class="el-icon-plus avatar-uploader-icon"
-                  style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"
+                  style="
+                    lineheight: 100px;
+                    width: 300px;
+                    height: 100px;
+                    border: 1px dashed #ccc;
+                  "
                 ></i>
               </el-upload>
             </el-form-item>
           </el-row>
           <el-row>
-            <el-form-item label="商品图片" :style="{display:'block'}">
+            <el-form-item label="商品图片" :style="{ display: 'block' }">
               <el-upload
                 class="upload-demo"
                 :headers="getHeaderWithToken"
-                :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
+                :action="
+                  BASE_API + '/api/universal/file/app/unauth/admin/upload'
+                "
                 :show-file-list="false"
                 :on-success="product"
                 list-type="picture"
               >
                 <img
-                  v-if="$utils.isString(add.itemImg) && !$utils.isEmpty(add.itemImg)"
+                  v-if="
+                    $utils.isString(add.itemImg) && !$utils.isEmpty(add.itemImg)
+                  "
                   :src="add.itemImg"
-                  style="width:300px;max-height:300px;"
+                  style="width: 300px; max-height: 300px"
                 />
                 <i
                   v-else
                   class="el-icon-plus avatar-uploader-icon"
-                  style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"
+                  style="
+                    lineheight: 100px;
+                    width: 300px;
+                    height: 100px;
+                    border: 1px dashed #ccc;
+                  "
                 ></i>
               </el-upload>
             </el-form-item>
           </el-row>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <el-button @click="cancelSetMemberArea('membershipGrade')">取消</el-button>
-          <el-button type="primary" @click="save('membershipGrade')">确 定</el-button>
+          <el-button @click="cancelSetMemberArea('membershipGrade')"
+            >取消</el-button
+          >
+          <el-button type="primary" @click="save('membershipGrade')"
+            >确 定</el-button
+          >
         </div>
       </el-dialog>
     </div>
@@ -255,7 +321,7 @@ import {
   getMembers,
   delMembershipGrade,
   addMembershipGrade,
-  update
+  update,
 } from "src/api/admin/member/index";
 import { mapGetters } from "vuex";
 import { getToken } from "src/utils/auth";
@@ -271,7 +337,7 @@ export default {
       listLoading: true,
       tableKey: 0,
       addMembershipGrade: false,
-      activeId:'',
+      activeId: "",
       add: {
         level: undefined,
         name: undefined,
@@ -281,7 +347,7 @@ export default {
         endDate: undefined,
         icon: undefined,
         bigIcon: null,
-        itemImg:null
+        itemImg: null,
       },
       endDatelist: [
         { id: 0, name: "永久" },
@@ -290,16 +356,16 @@ export default {
         { id: 3, name: "二年" },
         { id: 4, name: "三年" },
         { id: 5, name: "四年" },
-        { id: 6, name: "五年" }
+        { id: 6, name: "五年" },
       ],
       year: {
         "-1": "永久",
-        "0": "半年",
-        "1": "一年",
-        "2": "二年",
-        "3": "三年",
-        "4": "四年",
-        "5": "五年"
+        0: "半年",
+        1: "一年",
+        2: "二年",
+        3: "三年",
+        4: "四年",
+        5: "五年",
       },
       rules: {
         name: [
@@ -307,31 +373,31 @@ export default {
             type: "string",
             required: true,
             message: "请输入消息内容",
-            trigger: "blur"
+            trigger: "blur",
           },
           {
             min: 0,
             max: 50,
             message: "长度小于 50个字符",
-            trigger: "blur"
-          }
+            trigger: "blur",
+          },
         ],
         level: [
           {
             required: true,
             message: "请输入消息内容",
-            trigger: "blur"
+            trigger: "blur",
           },
           {
             min: 0,
             max: 20,
             message: "长度小于 20个字符",
-            trigger: "blur"
-          }
-        ]
+            trigger: "blur",
+          },
+        ],
       },
       memberManagement_btn_add: false, //添加
-      memberManagement_btn_del: false //删除
+      memberManagement_btn_del: false, //删除
     };
   },
   created() {
@@ -346,12 +412,12 @@ export default {
      */
     getHeaderWithToken() {
       return { Authorization: getToken() };
-    }
+    },
   },
   methods: {
-    cllsePop(){
+    cllsePop() {
       // console.log('0000');
-      this.cancelSetMemberArea('membershipGrade')
+      this.cancelSetMemberArea("membershipGrade");
     },
     //编辑
     compileShip(row) {
@@ -365,16 +431,17 @@ export default {
         discount: row.discount,
         number: row.number,
         price: row.price,
+        extract: row.extract,
         endDate: row.endDate,
         icon: row.icon,
         bigIcon: row.bigIcon,
-        itemImg:row.itemImg
+        itemImg: row.itemImg,
       };
-      this.activeId = row.id
+      this.activeId = row.id;
     },
     getList() {
       this.listLoading = true;
-      getMembers().then(res => {
+      getMembers().then((res) => {
         for (let dataKey of res.data) {
           if (dataKey.endDate == 0) {
             dataKey.endDate = "半年";
@@ -390,16 +457,16 @@ export default {
      * 删除会员等级
      * */
     delMembership(row) {
-      delMembershipGrade(row.id).then(res => {
+      delMembershipGrade(row.id).then((res) => {
         if (res.rel) {
           this.$notify.success({
             title: "成功",
-            message: `success`
+            message: `success`,
           });
         } else {
           this.$notify.warning({
             title: "失败",
-            message: `failed`
+            message: `failed`,
           });
         }
         this.getList();
@@ -426,18 +493,18 @@ export default {
     save(refName) {
       let membership = JSON.parse(JSON.stringify(this.add));
       membership.endDate = membership.endDate - 1;
-      membership.id = this.activeId
+      membership.id = this.activeId;
       if (this.vipTitle == "增加会员等级") {
-        addMembershipGrade(membership).then(res => {
+        addMembershipGrade(membership).then((res) => {
           if (!res.rel) {
             this.$notify.success({
               title: "成功",
-              message: `success`
+              message: `success`,
             });
           } else {
             this.$notify.warning({
               title: "失败",
-              message: `failed`
+              message: `failed`,
             });
           }
           this.getList();
@@ -447,16 +514,16 @@ export default {
           this.addMembershipGrade = false;
         });
       } else {
-        update(membership).then(data => {
+        update(membership).then((data) => {
           if (data.status == 200) {
             this.$notify.success({
               title: "成功",
-              message: `success`
+              message: `success`,
             });
           } else {
             this.$notify.warning({
               title: "失败",
-              message: `failed`
+              message: `failed`,
             });
           }
           this.getList();
@@ -481,8 +548,8 @@ export default {
     //商品展示
     product(res) {
       this.add.itemImg = res.data;
-    }
-  }
+    },
+  },
 };
 </script>
 <style>