修改

src/components/UserMan/buyRecords.vue

+<template>
+  <div class="buyRecords">
+    <div class="head-title">
+      会员购买记录
+    </div>
+    <div class="content">
+      <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
+        <el-table-column prop="UserName" label="会员名称">
+        </el-table-column>
+        <el-table-column prop="Money" label="支付金额">
+        </el-table-column>
+        <el-table-column prop="ExpiryDateStr" label="过期时间">
+        </el-table-column>
+        <el-table-column prop="GradeName" label="等级名称">
+        </el-table-column>
+        <el-table-column prop="PayState" label="支付状态">
+          <template slot-scope="scope">
+            <span v-if="scope.row.PayState==0">未支付</span>
+            <span v-if="scope.row.PayState==1">已支付</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="PayTimeStr" label="支付时间">
+        </el-table-column>
+      </el-table>
+      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
+        layout="prev, pager, next" :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        dataList: [],
+        msg: {
+          pageIndex: 1,
+          pageSize: 15,
+        },
+        total: 0,
+      };
+    },
+    components: {},
+    created() {
+
+    },
+    methods: {
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      getList() {
+        this.loading=true;
+        this.apipost("/api/UserVip/GetVipBuyPageList", this.msg, res => {
+          this.loading=false;
+          if (res.data.resultCode == 1) {
+            this.dataList = res.data.data.pageData;
+            this.total = res.data.data.count;
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+    },
+    mounted() {
+      this.getList();
+    }
+  };
+
+</script>
+<style>
+
+</style>

src/components/UserMan/customSet.vue

@@ -628,8 +628,79 @@
           </div>
         </div>
       </el-tab-pane>
+      <el-tab-pane label="vip购买" name="sixth">
+        <div style="display: flex;">
+          <div class="mobile">
+            <div class="screen">
+              <div flex="main:center cross:center" class="top-bar">
+                <div></div>
+              </div>
+              <div class="content">
+                <div class="vipImgDiv" :style="{backgroundImage:'url(' + getIconLink(vipMsg.BackImage) + ')',backgroundColor:vipMsg.BackColor}">
+                  <div class="vip_kaitong">
+                     <div class="vip_yue">
+                       <div class="vipIcon">
+                         <img :src="getIconLink(vipMsg.VipICO)" alt=""/>
+                       </div>
+                       <div style="margin-top:-8px;">
+                          <div class="vip_Month">×个月<span class="vip_yellow">×</span>元</div>  
+                          <div>送×××××</div>
+                       </div>
+                       <div class="vip_lastDiv">
+                         <div>原价</div>
+                         <div>199元</div>
+                       </div>
+                     </div>
+                     <input type="button" class="my_VipBtn" value="立即开通"/>
+                  </div>
+                  <div class="vip_activeRule">活动规则>></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style="width:100%">
+            <div class="title">图片</div>
+            <el-form style="padding:20px 0;background:#fff" ref="addMsg" label-width="100px">
+              <el-form-item label="背景图片">
+                <el-button @click="openChangeDig(8)" size="mini">选择文件</el-button>
+                <el-button @click="vipMsg.BackImage=vipbackground" size="mini" type="primary">恢复默认</el-button>
+                <div style="position: relative;margin-top:10px;width:80px;cursor: move;">
+                  <img @click="openChangeDig(8)" v-if="vipMsg.BackImage==''" style="width:100px;height:100px"
+                    src="../../assets/img/default.png" alt="">
+                  <div v-else class="app-image"
+                    :style="{backgroundImage:'url(' + getIconLink(vipMsg.BackImage) + ')',backgroundSize:'cover'}">
+                  </div>
+                  <button @click="vipMsg.BackImage=''" type="button"
+                    class="el-button del-btn el-button--danger el-button--mini is-circle"><i
+                      class="el-icon-close"></i></button>
+                </div>
+              </el-form-item>
+              <el-form-item label="vip图标">
+                <el-button @click="openChangeDig(9)" size="mini">选择文件</el-button>
+                <el-button @click="vipMsg.VipICO=vipIcon" size="mini" type="primary">恢复默认</el-button>
+                <div style="position: relative;margin-top:10px;width:80px;cursor: move;">
+                  <img @click="openChangeDig(9)" v-if="vipMsg.VipICO==''" style="width:100px;height:100px"
+                    src="../../assets/img/default.png" alt="">
+                  <div v-else class="app-image"
+                    :style="{backgroundImage:'url(' + getIconLink(vipMsg.VipICO) + ')',backgroundSize:'cover'}">
+                  </div>
+                  <button @click="vipMsg.VipICO=''" type="button"
+                    class="el-button del-btn el-button--danger el-button--mini is-circle"><i
+                      class="el-icon-close"></i></button>
+                </div>
+              </el-form-item>
+              <el-form-item label="背景颜色">
+                  <el-color-picker v-model="vipMsg.BackColor"></el-color-picker>
+              </el-form-item>
+              <el-form-item label="活动规则">
+                  <el-input type="textarea" :rows="4" style="width:60%" v-model="vipMsg.BottomRule"></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </el-tab-pane>
       <div style="padding-left:410px;padding-top:20px">
-        <el-button @click="save" size="small" type="primary">保存</el-button>
+        <el-button @click="saveVip" size="small" type="primary">保存</el-button>
       </div>
     </el-tabs>
     <!-- 选择文件 -->
@@ -683,21 +754,49 @@
         myTeamMoren: this.domainManager().ImageUrl + '/Upload/Set/1587968613000.png',
         //推广二维码默认
         tuiguangCode: this.domainManager().ImageUrl + '/Upload/Set/1587968626000.png',
+        //vip购买默认背景
+        vipbackground: this.domainManager().ImageUrl + '/Upload/Set/vipbg.png',
+        //vip购买默认图标
+        vipIcon: this.domainManager().ImageUrl + '/Upload/Set/vipicon.png',
         imgType: 1,
         changeState: false,
         iconDig: false,
         iconMsg: {
           Name: '',
           Path: '',
+        },
+        //vip购买msg
+        vipMsg:{
+          Id:0,
+          BackImage:'', //背景图片
+          VipICO:'', //vip图标
+          BackColor:'', //背景颜色
+          BottomRule:'' //活动规则
         }
-
       }
     },
     created() {
       this.getData();
+      this.getVipInfo();
     },
     mounted() {},
     methods: {
+      getVipInfo(){
+        this.apipost("/api/UserVip/GetFXGradeCustom", {}, res => {
+          if (res.data.resultCode == 1) {
+            console.log(res,'vip');
+            this.vipMsg=res.data.data;
+          }
+        })
+      },
+      //保存vip购买
+      saveVip(){
+        this.apipost("/api/UserVip/SetFXGradeCustom", this.vipMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.Success(res.data.message);
+          }
+        })
+      },
       openIcon(index, name, path) {
         this.commonIndex = index;
         this.imgType = index;
@@ -783,6 +882,10 @@
           this.addMsg.MyTeamImage = msg.url;
         } else if (this.imgType == 7) {
           this.addMsg.PromoteQRCodeImage = msg.url;
+        } else if(this.imgType==8){
+          this.vipMsg.BackImage=msg.url;
+        }else if(this.imgType==9){
+          this.vipMsg.VipICO=msg.url;
         }
         if (this.imgType > 2) {
           this.iconMsg.Path = msg.url;
@@ -800,6 +903,7 @@
           this.loading = false;
           if (res.data.resultCode == 1) {
             this.addMsg = res.data.data;
+            console.log(this.addMsg,'this.addMsg');
           }
 
         })
@@ -859,11 +963,6 @@
     width: 10%;
     min-width: 100px;
   }
-
-  .customSet .share-text {
-    /* margin: 16px 0; */
-  }
-
   .hr {
     width: 100%;
     height: 20px;
@@ -975,11 +1074,6 @@
     margin-right: 10px;
   }
 
-  .customSet .el-tabs__content {
-    /* background: #fff; */
-
-  }
-
   .customSet .el-tabs__nav-scroll {
     background: #fff;
     padding: 0 20px;
@@ -989,4 +1083,63 @@
 
   }
 
+  .customSet .vipImgDiv{
+    width:100%;
+    height:100%;
+    position: relative;
+  }
+  .customSet .vip_kaitong{
+    position: absolute;
+    width:90%;
+    bottom:50px;
+    height:145px;
+    left:20px;
+    border-radius:4px;
+    background-color: #cf65cd;
+  }
+  .customSet .vip_yue{
+    width:75%;
+    margin:20px auto 10px;
+    vertical-align: top;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    color:#fff;
+  }
+  .customSet .vipIcon{
+    width:60px;
+    height:60px;
+  }
+  .customSet .vipIcon img{
+    width:100%;
+  }
+  .customSet .vip_Month{
+    font-size:26px;
+    color:#fff;
+  }
+  .customSet .vip_lastDiv{
+    font-size:12px;
+    color:#fff;
+  }
+  .customSet .vip_yellow{
+    color:#fff100;
+    font-size:30px;
+    font-weight: bold;
+  }
+  .customSet .my_VipBtn{
+    width:90%;
+    height:40px;
+    border:none;
+    margin-left:18px;
+    background-color: #FFF100;
+    color:#510A63;
+    border-radius: 20px;
+  }
+  .customSet .vip_activeRule{
+    width:100%;
+    position: absolute;
+    bottom:15px;
+    text-align: center;
+    color:#DD6ADA;
+  }
 </style>

src/router/index.js

@@ -274,6 +274,12 @@ export default new Router({
           name: 'disWithdrawal',
           component: resolve => require(['@/components/UserMan/disWithdrawal'], resolve),
         },
+        //用户管理 分销商管理 vip购买记录
+        {
+          path: '/buyRecords',
+          name: 'buyRecords',
+          component: resolve => require(['@/components/UserMan/buyRecords'], resolve),
+        },
         // 用户管理 分销订单
         {
           path: '/distributionOrder',