新增付费管理tab页面

src/components/common/layout/layout.vue

@@ -313,7 +313,7 @@ export default {
     }, 20000)
   },
   mounted () {
-    if(this.$route.path=='/customerMan/details'||this.$route.path=='/testSkin/details'){
+    if(this.$route.path=='/payUser/details'||this.$route.path=='/testSkin/details'){
       this.isback=true
     }
   },

src/components/common/layout/leftMenu.vue

@@ -105,6 +105,13 @@ export default {
             "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unskin.png",
           icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/Skin.png",
         },
+        {
+          name: "付费客户",
+          path: "/payUser",
+          unicon:
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unskin.png",
+          icon: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/Skin.png",
+        },
       ],
       nowIndex: 0,
     };
@@ -122,7 +129,7 @@ export default {
         }
       });
       // 客户管理详情跳转测肤记录修改返回键显示
-      if (from.path == "/customerMan/details") {
+      if (from.path == "/payUser/details") {
         this.$emit("changeIsBack", this.$route.query.isback);
       }
     },

src/config/env.js

@@ -1,6 +1,6 @@
 // 环境配置
 let basePath = 'https://store.api.ijolijoli.com'; 	// api请求地址
-
+let vrsion  = '1.0.0' //版本号
 export {
   basePath,
 }

src/pages/customerMan/details/index.vue

@@ -4,13 +4,13 @@
       <div class="user-info">
         <div class="title">
           <div class="txt">个人信息</div>
-          <!-- <div
+          <div
             class="test-record"
             @click="toTestRecord"
             v-if="userInfo.analysis_id"
           >
             测肤记录
-          </div> -->
+          </div>
         </div>
         <div class="detail-info">
           <div class="user-img">
@@ -21,17 +21,14 @@
               <div class="name">
                 <span>{{ userInfo.nickname | ellipsis(3) }}</span>
               </div>
-              <!-- <div class="skin-type">
-                肤龄：<span>{{ userInfo.age }}</span>
-              </div> -->
               <div class="sex"><img :src="gender" alt="" /></div>
-              <div class="age">
+              <!-- <div class="age">
                 <span>{{ userInfo.skin_age }}</span
                 ><span class="min-size">肤龄</span>
-              </div>
+              </div> -->
             </div>
             <div class="real-name">
-              真实姓名：
+              姓名：
               <span v-show="!nameInpVisible">{{ userInfo.real_name }}</span>
               <el-input
                 size="mini"
@@ -49,116 +46,84 @@
                 srcset=""
               />
             </div>
-
             <div class="skin-type">
-              用户ID:<span> {{ userInfo.user_id }}</span>
+              肤质：<span>{{ userInfo.skin_type }}</span>
+            </div>
+            <div class="skin-type">
+              肤龄：<span>{{ userInfo.age }}</span>
+            </div>
+            <div class="skin-color">
+              肤色：<span>{{ userInfo.skin_color }}</span>
             </div>
-            <!-- <div class="skin-type">
-              上传报告时间:<span> {{ userDetail.create_time }}</span>
-            </div> -->
           </div>
         </div>
       </div>
 
       <div class="personage-data">
         <div class="myDataList">
-          <span class="dataListTitle">出生日期</span> :
-
+          检测时间：
+          <span>{{ userInfo.check_time }}</span>
+        </div>
+        <div class="myDataList">
+          出生日期：
           <span>{{ userInfo.birthday }}</span>
         </div>
         <div class="myDataList">
-          <span class="dataListTitle">联系电话</span> :
+          手机号：
           <span>{{ userInfo.mobile }}</span>
         </div>
 
         <div class="myDataList">
-          <span class="dataListTitle">所在地</span> :
+          所在地：
           <span>{{ userInfo.city }}</span>
         </div>
 
         <div class="myDataList">
-          <span class="dataListTitle">客户来源</span> :
-          <!-- <span>{{ userInfo.store_name }}</span> -->
-          <el-select
-            v-model="sourceValue"
-            placeholder="请选择"
-            size="mini"
-            @change="selectSource"
-          >
-            <el-option
-              v-for="(item, index) in sourceList"
-              :key="index"
-              :label="item"
-              :value="index"
-            >
-            </el-option>
-          </el-select>
+          开卡店铺：
+          <span>{{ userInfo.store_name }}</span>
         </div>
-        <div class="assetInfo">资产信息</div>
 
         <div class="myDataList coupon-num">
-          <span class="dataListTitle">次卡数量</span> :
-          <span class="JEcolor" @click="toOrder(2)">{{ order_total.card_num }}</span>
+          次卡数量：
+          <span @click="toOrder(2)">{{ order_total.card_num }}</span>
         </div>
 
         <div class="myDataList coupon-num">
-          <span class="dataListTitle">优惠券</span> :
-          <span class="JEcolor" @click="toOrder(4)">{{ userInfo.card_num }}</span>
+          优惠券数量：
+          <span @click="toOrder(4)">{{ userInfo.card_num }}</span>
         </div>
 
         <div class="myDataList">
-          <span class="dataListTitle">储值金额</span> :
-          <span class="JEcolor" @click="toOrder(5)"> 
-            ￥<span class="bigSixe">{{ userInfo.amount }}</span>
+          储值金额：
+          <span class="JEcolor">
+            ￥
+            <span class="bigSixe">{{ userInfo.amount }}</span>
             <!-- .00 -->
           </span>
         </div>
         <div class="myDataList">
-          <span class="dataListTitle">积分</span> :
+          积分：
           <span>{{ userInfo.coin }}</span>
         </div>
-        <div class="detectionInfo">
-          <div>检测信息</div>
-          <div @click="goTestSkin">测肤记录</div>
-        </div>  
-        <div class="skin-type">
-          <span class="dataListTitle">肤质</span> :
-          <span class="item" v-if="userDetail.detection">{{
-            skin_type[userDetail.detection.skin_type - 1]
-          }}</span>
-        </div>
-        <!-- <div class="skin-color">
-          <span class="dataListTitle">肤色</span> :
-          <span>{{ userInfo.skin_color }}</span>
-        </div> -->
-        <div class="myDataList">
-          <span class="dataListTitle">测肤时间</span> :
-          <span v-if="userDetail.detection">{{ userDetail.detection.create_time }}</span>
-        </div>
-        <!-- <div class="myDataList" @click="remarkPupopVisible = true">
+        <div class="myDataList" @click="remarkPupopVisible = true">
           备注信息：
           <span>{{ userInfo.remark | ellipsis(20) }}</span>
-        </div> -->
+        </div>
       </div>
     </div>
     <div class="right">
       <div class="right-top">
         <div class="right-top-data">
           <div class="lable">
-            <div class="lable-title" v-if="userDetail.detection">
-              <div>面诊标签</div>
-              <div @click="goTestSkinDetials" v-if='userDetail.detection.id'>执行方案</div>
-            </div>
+            <div class="lable-title">面诊标签</div>
             <div class="problem">
-              <div class="problem-title">问题标签&nbsp;</div>
-              :
+              <div class="problem-title">问题标签</div>
               <div class="problem-lable">
                 <div class="lable-text problem-text">{{ problem }}</div>
               </div>
             </div>
             <div class="problem">
-              <div class="problem-title">面部标签&nbsp;</div>
-              :
+              <div class="problem-title">面部标签</div>
               <div class="problem-lable">
                 <div
                   class="lable-text"
@@ -207,90 +172,54 @@
       </div>
       <div class="right-bottom">
         <div class="programme">
-          <div class="consume">
-            <div class="consume-box">
-              <div class="consume-title">总消费</div>
-              <div class="consume-content">
-                <div class="consume-one">
-                  <div class="consume-type">
-                    总消费金额:<span class="consume-price">{{
-                      userDetail.total_price
-                    }}</span>
-                  </div>
-                  <div class="consume-type">
-                    项目叠加次数:<span class="consume-price">{{
-                      userDetail.overlay
-                    }}</span>
-                  </div>
-                </div>
-                <div class="consume-two">
-                  <div class="consume-type">
-                    总储值金额:<span class="consume-price">{{
-                      userDetail.balance==null?0:userDetail.balance
-                    }}</span>
-                  </div>
-
-                  <div class="consume-type">
-                    转化次数:<span class="consume-price">{{
-                      userDetail.conversion
-                    }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="consume-title">最近消费记录</div>
-            <div class="consume-record">
-              <div class="record-item">
-                <div class="record-title">项目</div>
-                :
-                <div v-if="userDetail.project" class="record-name">
-                  {{ userDetail.project.project_name }}
-                </div>
-                <div v-if="userDetail.project">
-                  {{ userDetail.project.create_time }}
-                </div>
-              </div>
-              <div class="record-item">
-                <div class="record-title">次卡</div>
-                :
-                <div v-if="userDetail.user_card" class="record-name">
-                  {{ userDetail.user_card.card_name }}
-                </div>
-                <div v-if="userDetail.user_card">
-                  {{ userDetail.user_card.create_time }}
-                </div>
-              </div>
-              <div class="record-item">
-                <div class="record-title">美妆产品</div>
-                :
-                <div v-if="userDetail.goods" class="record-name">
-                  {{ userDetail.goods.goods_name }}
-                </div>
-                <div v-if="userDetail.goods">
-                  {{ userDetail.goods.create_time }}
-                </div>
-              </div>
-              <div class="record-item">
-                <div class="record-title">充值</div>
-                :
-                <div v-if="userDetail.recharge" class="record-name">
-                  {{ userDetail.recharge.price }}
-                </div>
-                <div v-if="userDetail.recharge">
-                  {{ userDetail.recharge.create_time }}
+          <div class="tab">
+            <div class="tab-title">执行方案</div>
+          </div>
+          <div class="programmeList" v-if="programmeList.length > 0">
+            <div class="programmeWeek">
+              <div
+                class="programmeItem"
+                v-for="(item, index) in programmeList"
+                :key="index"
+              >
+                <div
+                  :class="selectWeek == index ? 'weekItemSelect' : 'weekItem'"
+                  @click="weekSelect(index)"
+                >
+                  {{ item.name }}
                 </div>
+                <div class="weekLine" v-if="index == 3 ? false : true"></div>
               </div>
             </div>
-            <div class="consume-title">最近消耗</div>
-            <div class="card-record">
-              <div class="record-item">
-                <div class="record-title">消耗次卡</div>
-                :
-                <div v-if="userDetail.time_card" class="record-name">
-                  {{ userDetail.time_card.card_name }}
+            <div class="doTime">{{ programmeList[selectWeek].time }}</div>
+            <div class="weekDetails" v-if="programmeList.length > 0">
+              <div
+                class="contentItem"
+                v-for="(item, index1) in programmeList[selectWeek].list"
+                :key="index1"
+              >
+                <div class="itemTitle">
+                  <div>{{ item.name }}</div>
+                  <div>{{ item.classify_name }}</div>
+                  <!-- <div>{{item.time}}</div> -->
                 </div>
-                <div v-if="userDetail.time_card">
-                  {{ userDetail.time_card.create_time }}
+                <div
+                  class="itemContent"
+                  v-for="(items, index2) in item.list"
+                  :key="index2"
+                >
+                  <img class="itemContent-img" :src="items.cover_url" />
+                  <div class="itemContent-right">
+                    <div class="right-content">
+                      <div class="right-name">
+                        {{ items.name | ellipsis(14) }}
+                      </div>
+                      <div class="right-price">
+                        {{ items.price | doubleNum(2) }}
+                      </div>
+                    </div>
+                    <div class="right-project">{{ items.product_name }}</div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -358,20 +287,6 @@ export default {
       isPupop: false,
       nameInpVisible: false,
       remarkPupopVisible: false,
-      sourceList: [
-        " ",
-        "线下进店",
-        "种子用户",
-        "美团/大众",
-        "抖音",
-        "达人探店",
-        "霸王餐",
-        "老带新/转介绍",
-      ], //客户来源下拉选择
-      sourceValue: "", //客户来源值
-      id: this.$route.id, //用户的id
-      userDetail: [], //客户管理详情
-      skin_type: ["干性肌肤", "中性肌肤", "油性肌肤", "混合型肌肤"], //肤质 (肤质类型 1-干性肌肤 2-中性肌肤 3-油性肌肤 4-混合型肌肤)
     };
   },
   components: { minePupop },
@@ -384,50 +299,8 @@ export default {
     },
   },
   watch: {},
-  // 返回页面缓存客户管理页面
-    beforeRouteLeave(to,from,next){
-    to.meta.keepAlive=true
-    next()
-  },
+
   methods: {
-    // 获取客户管理详情
-    getUserDetail() {
-      api.getUserDetail({ id: this.id }).then((res) => {
-        this.userDetail = res.data;
-        this.sourceValue = this.sourceList[res.data.tag];
-      });
-    },
-    // 编辑客户管理用户标签
-    editSign(tag){
-      api.editSign({
-        tag,
-        id:this.id
-      }).then()
-    },
-    // 选择客户来源
-    selectSource(e) {
-      this.editSign(e)
-    },
-    // 跳转到测肤记录详情
-    goTestSkinDetials() {
-      this.$router.push({
-        path: "/testSkin/details",
-        query: {
-          id: this.userDetail.detection.id,
-          isback:true
-        }
-      });
-    },
-    // 跳转到测肤记录列表
-    goTestSkin() {
-      this.$router.push({
-        path: "/testSkin",
-        query: {
-          isback: true,
-          id:this.id
-        },
-      });
-    },
     getPadUserInfo() {
       api.getPadUserInfo({ id: this.id }).then((res) => {
         console.log(res, "aaaaaaaa");
@@ -504,17 +377,14 @@ export default {
         activeName = "third";
       } else if (index == 2) {
         activeName = "second";
-      } else if (index == 4) {
-        activeName = "fourth";
-      }else if(index==5){
-        activeName = "five";
+      }else if(index==4){
+        activeName = 'fourth'
       }
       this.$router.push({
         path: "/customerMan/projectOrder",
         query: {
           id: this.id,
           activeName: activeName,
-          isback:true
         },
       });
     },
@@ -555,8 +425,6 @@ export default {
   created() {
     let id = this.$route.query.id;
     this.id = id;
-    // 获取客户管理详情
-    this.getUserDetail();
     this.getPadUserInfo();
   },
 
@@ -621,12 +489,11 @@ export default {
             justify-content: space-between;
             .name {
               font-size: 14px;
-              width: 60px;
             }
             .sex {
               img {
-                width: 19px;
-                height: 19px;
+                width: 24px;
+                height: 24px;
               }
             }
             .age {
@@ -662,55 +529,11 @@ export default {
     }
     .personage-data {
       margin-top: 14px;
-      .assetInfo {
-        font-size: 14px;
-        color: #333;
-        font-weight: 600;
-        margin-top: 10px;
-      }
-      .detectionInfo {
-        margin-top: 10px;
-        display: flex;
-        justify-content: space-between;
-        font-size: 14px;
-        font-weight: 600;
-        color: #fa7d22;
-        div:first-child {
-          color: #333333;
-        }
-      }
-      .skin-type {
-        margin-top: 10px;
-        .dataListTitle {
-          display: inline-block;
-          font-size: 13px;
-          color: #999999;
-          width: 55px;
-          text-align: justify;
-          text-justify: distribute-all-lines;
-          text-align-last: justify;
-        }
-        .item{
-          color: #333;
-        }
-      }
-      .skin-color {
-        margin-top: 10px;
-        .dataListTitle {
-          display: inline-block;
-          font-size: 13px;
-          color: #999999;
-          width: 55px;
-          text-align: justify;
-          text-justify: distribute-all-lines;
-          text-align-last: justify;
-        }
-      }
       .myDataList {
-        margin-top: 10px;
+        margin-top: 15px;
         .bigSixe {
           font-size: 18px;
-          color: #ff3007;
+          color: #fa7d22;
         }
         span {
           color: #333333;
@@ -718,21 +541,10 @@ export default {
         .JEcolor {
           color: #fa7d22;
         }
-        .dataListTitle {
-          display: inline-block;
-          font-size: 13px;
-          color: #999999;
-          width: 55px;
-          text-align: justify;
-          text-justify: distribute-all-lines;
-          text-align-last: justify;
-        }
-        /deep/.el-select {
-          width: 150px;
-        }
       }
       .coupon-num {
         span {
+          color: #fa7d22;
           font-size: 16px;
           font-weight: 500;
         }
@@ -799,15 +611,10 @@ export default {
           .lable-title {
             font-size: 14px;
             font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 600;
+            font-weight: 500;
             color: #333333;
             line-height: 20px;
             margin-bottom: 14px;
-            display: flex;
-            justify-content: space-between;
-            div:last-child {
-              color: #fa7d22;
-            }
           }
           .problem {
             display: flex;
@@ -1067,67 +874,16 @@ export default {
             color: #ffc630;
           }
         }
-        .consume {
-          .consume-box {
-            display: flex;
-          }
-          .consume-title {
+        .tab {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .tab-title {
             font-size: 14px;
             font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 700;
+            font-weight: 500;
             color: #333333;
             line-height: 20px;
-            margin-top: 15px;
-          }
-          .consume-title:first-child {
-            margin-top: 0;
-          }
-          .consume-content {
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            .consume-two {
-              margin-left: 90px;
-            }
-            .consume-type {
-              line-height: 25px;
-              width: 160px;
-              font-size: 13px;
-              color: #999999;
-              margin-left: 20px;
-            }
-            .consume-price {
-              font-size: 13px;
-              color: #333333;
-              margin-left: 14px;
-            }
-          }
-          .consume-record,
-          .card-record {
-            .record-item {
-              display: flex;
-              font-size: 13px;
-              color: #666666;
-              margin-top: 15px;
-              .record-title {
-                width: 65px;
-                text-align: justify;
-                text-justify: distribute-all-lines;
-                text-align-last: justify;
-              }
-              .record-name {
-                color: #333333;
-                width: 260px;
-                margin-left: 36px;
-                margin-right: 36px;
-                /* 强制超出不换行 */
-                white-space: nowrap;
-                /* 超出隐藏 */
-                overflow: hidden;
-                /* 文本超出显示成... */
-                text-overflow: ellipsis;
-              }
-            }
           }
         }
         .programme-list {

src/pages/customerMan/index.vue

@@ -7,37 +7,6 @@
       <el-button type="primary" class="searchButton" @click="getUserList()"
         >搜索</el-button
       >
-      <div class="silenceUser">
-        <div class="title">显示沉默付费用户</div>
-        <el-switch
-          v-model="silence"
-          active-color="#fa7d22"
-          inactive-color="#e7e7e7"
-          @change="showSilence"
-        >
-        </el-switch>
-      </div>
-      <div class="faceUser">
-        <div class="title">显示未面诊付费用户</div>
-        <el-switch
-          v-model="face"
-          active-color="#fa7d22"
-          inactive-color="#e7e7e7"
-          @change="showFace"
-        >
-        </el-switch>
-      </div>
-      <div class="filter">
-        <div class="title">筛选</div>
-        <i @click="openFilterPop" class="el-icon-s-operation"></i>
-      </div>
-      <!-- 筛选条件弹窗 -->
-      <select-pop
-        :visible.sync="dialogVisible"
-        @saveSelectList="saveSelectList"
-        :resetPop='resetPop'
-        :key='key'
-      ></select-pop>
     </div>
 
     <div class="user-list">
@@ -56,9 +25,9 @@
             </div>
           </template>
         </el-table-column>
+        <el-table-column prop="id" label="用户ID" width="120"></el-table-column>
         <el-table-column prop="nickname" label="昵称" width="120">
         </el-table-column>
-        <el-table-column prop="id" label="用户ID" width="120"></el-table-column>
         <el-table-column prop="mobile" label="联系电话" show-overflow-tooltip>
         </el-table-column>
         <el-table-column
@@ -67,12 +36,6 @@
           show-overflow-tooltip
         >
         </el-table-column>
-        <el-table-column
-          prop="last_login_time"
-          label="最后登录时间"
-          show-overflow-tooltip
-        >
-        </el-table-column>
       </el-table>
 
       <div class="pagin">
@@ -92,9 +55,8 @@
 
 <script>
 import api from "../../server/home";
-import selectPop from "./selectPop/index.vue";
 export default {
-  components: { selectPop },
+  components: {},
   data() {
     return {
       searchText: "",
@@ -114,87 +76,28 @@ export default {
       currentPage1: 1,
       multipleSelection: "",
       total: 0,
-      face: false, //未面诊用户开关
-      silence: false, //沉默用户开关
-      dialogVisible: false, // 控制筛选弹框
-      // 筛选框内的变量内容
-      customerKey: 0,
-      couponKey: 0,
-      cardKey: 0,
-      latelyKey: 0,
-      superpositionNum: 0,
-      StoredPrice: 0,
-      transitionNum: 0,
-      consumeprice:0,
-      resetPop:false, //设置筛选弹窗开关
-      key:1 //筛选弹框组件刷新加载
     };
   },
   computed: {},
   watch: {},
+
   methods: {
-    // 筛选其他条件
-    saveSelectList(
-      customerKey,
-      couponKey,
-      cardKey,
-      latelyKey,
-      superpositionNum,
-      StoredPrice,
-      transitionNum,
-      consumeprice,
-    ) {
-      (this.customerKey = customerKey),
-        (this.couponKey = couponKey),
-        (this.cardKey = cardKey),
-        (this.latelyKey = latelyKey),
-        (this.superpositionNum = superpositionNum),
-        (this.StoredPrice = StoredPrice),
-        (this.transitionNum = transitionNum),
-        this.consumeprice = consumeprice
-        this.getUserList();
-    },
-    // 筛选沉默用户
-    showSilence(e) {
-      this.getUserList();
-    },
-    // 筛选未面诊用户
-    showFace(e) {
-      this.getUserList();
-    },
-    // 打开筛选条件弹框
-    openFilterPop() {
-      this.dialogVisible = true;
-    },
     // 获取订单列表
     getUserList() {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
         keywords: this.searchText,
-        silence_user: this.silence ? 1 : 0, //沉默付费用户1是显示 0是不显示
-        face_user: this.face ? 1 : 0, //显示未面诊付费用户 1是显示 0是不显示
-        tag: this.customerKey,
-        coupon_days: this.couponKey,
-        card_days: this.cardKey,
-        buying_time: this.latelyKey,
-        project_add: this.superpositionNum,
-        balance_money: this.StoredPrice,
-        change_add: this.transitionNum,
-        consume_money:this.consumeprice
       };
-      api.getUserPayList(params).then((res) => {
+      api.getUserList(params).then((res) => {
         if (res.code == 200) {
           // 将用户手机号中间四位变成****
           res.data.list.map((item) => {
-            if (item.mobile) {
-              item.mobile =
-                item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
-            }
+            item.mobile =
+              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
           });
           this.tableData = res.data.list;
           this.total = res.data.total;
-          console.log(this.tableData);
         }
       });
     },
@@ -220,20 +123,6 @@ export default {
   },
 
   mounted() {},
-  // 不是客户详情页面返回重置数据
-  beforeRouteEnter(to, from, next) {
-    if (from.path != "/customerMan/details") {
-      next((vm)=>{
-        let key = vm.key
-        Object.assign(vm.$data, vm.$options.data());
-        vm.key=key+1 
-        vm.resetPop = true
-        vm.getUserList()
-      })
-    }else{
-      next()
-    }
-  },
 };
 </script>
 
@@ -257,35 +146,6 @@ export default {
       border-radius: 2px;
       border-color: #fa7d22;
     }
-    .silenceUser {
-      display: flex;
-      margin-left: 53px;
-      align-items: center;
-      .title {
-        line-height: 40px;
-        margin-right: 16px;
-      }
-    }
-    .faceUser {
-      display: flex;
-      margin-left: 53px;
-      align-items: center;
-      .title {
-        line-height: 40px;
-        margin-right: 16px;
-      }
-    }
-    .filter {
-      display: flex;
-      align-items: center;
-      margin-left: 53px;
-      .title {
-        margin-right: 17px;
-      }
-      i {
-        font-size: 17px;
-      }
-    }
   }
   .user-list {
     margin-top: 18px;

src/pages/customerMan/myOrder/index.vue

@@ -79,12 +79,7 @@
                   <div>{{ scope.row.card_name | ellipsis(8) }}</div>
                 </template>
               </el-table-column>
-              <el-table-column
-                prop="total_num"
-                label="总次数"
-                show-overflow-tooltip
-                align="center"
-              >
+              <el-table-column prop="total_num" label="总次数" show-overflow-tooltip align="center">
               </el-table-column>
               <el-table-column
                 prop="num"
@@ -263,88 +258,6 @@ type: "全额券" -->
             </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="余额记录" name="five">
-          <div class="user-list">
-            <el-table
-              ref="multipleTable"
-              :data="balanceListData"
-              tooltip-effect="dark"
-              height="354"
-              style="width: 100%; border-radius: 8px"
-            >
-              <el-table-column prop="goods" label="变更时间" width="200">
-                <template slot-scope="scope">
-                  <div>{{ scope.row.create_time }}</div>
-                </template>
-              </el-table-column>
-              <el-table-column prop="goods" label="变更前金额">
-                <template slot-scope="scope">
-                  <div>{{ scope.row.before_amount }}</div>
-                </template>
-              </el-table-column>
-              <el-table-column
-                prop="goods"
-                label="变更后金额"
-                show-overflow-tooltip
-              >
-                <template slot-scope="scope">
-                  <div>{{ scope.row.after_amount }}</div>
-                </template>
-              </el-table-column>
-              <el-table-column
-                prop="price"
-                label="变更金额"
-                show-overflow-tooltip
-              >
-                <template slot-scope="scope">
-                  <div>
-                    {{ scope.row.is_add == 1 ? "+" : "-" }}{{ scope.row.amount }}
-                  </div>
-                </template>
-              </el-table-column>
-              <!-- <el-table-column prop="status" label="状态" show-overflow-tooltip>
-                <template slot-scope="scope">
-                  <div>{{ scope.row.msg }}</div>
-                </template>
-              </el-table-column> -->
-              <!--  余额类型(记录类型，1充值，2充值赠送，3订单退款，5提现驳回，-1消费，-2提现冻结，10客服添加，-10客服扣除) -->
-              <el-table-column prop="status" label="类型" show-overflow-tooltip>
-                <template slot-scope="scope">
-                  <div>
-                    {{
-                      scope.row.type == 1
-                        ? "充值"
-                        : scope.row.type == 2
-                        ? "充值赠送"
-                        : scope.row.type == 3
-                        ? "订单退款"
-                        : scope.row.type == 5
-                        ? "提现驳回"
-                        : scope.row.type == -1
-                        ? "消费"
-                        : scope.row.type == -2
-                        ? "提现冻结"
-                        : scope.row.type == 10
-                        ? "客服添加"
-                        : scope.row.type == -10
-                        ? "客服扣除"
-                        : ""
-                    }}
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-            <div class="pagin">
-              <el-pagination
-                background
-                layout="prev, pager, next"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage1"
-                :total="total"
-              ></el-pagination>
-            </div>
-          </div>
-        </el-tab-pane>
       </el-tabs>
     </div>
     <!-- 次卡详情 -->
@@ -467,7 +380,6 @@ export default {
       cardInfo: {}, //订单详情
       cardLogList: [], //次卡消耗记录
       cardListData: [], //用户次卡列表
-      balanceListData: [], //用户余额变更记录
     };
   },
   computed: {},
@@ -584,20 +496,6 @@ export default {
         this.total = resp.data.total;
       }
     },
-    // 获取余额变更记录
-    async getBalanceRecord() {
-      let params = {
-        page: this.currentPage1,
-        limit: this.limit,
-        id: this.id,
-      };
-      let resp = await api.getBalanceRecord(params);
-      if (resp.code === 200) {
-        console.log(resp, "asdasdasd");
-        this.balanceListData = resp.data.list;
-        this.total = resp.data.count;
-      }
-    },
     handleCurrentChange(val) {
       this.currentPage1 = val;
       if (this.activeName == "first") {
@@ -609,8 +507,6 @@ export default {
         this.getUserGoods();
       } else if (this.activeName == "fourth") {
         this.getUserCoupon();
-      } else if (this.activeName == "five") {
-        this.getBalanceRecord();
       }
     },
     handleSelectionChange(row, column, event) {
@@ -625,7 +521,6 @@ export default {
     submitFrequency() {},
     changeTab(e) {
       this.currentPage1 = 1;
-      console.log(this.currentPage1);
       if (e.index == 0) {
         this.getUserProject();
       } else if (e.index == 1) {
@@ -635,8 +530,6 @@ export default {
         this.getUserGoods();
       } else if (e.index == 3) {
         this.getUserCoupon();
-      } else if (e.index == 4) {
-        this.getBalanceRecord();
       }
     },
   },
@@ -653,28 +546,8 @@ export default {
       this.getCardList();
     } else if (this.activeName == "third") {
       this.getUserGoods();
-    } else if (this.activeName == "fourth") {
-      this.getUserCoupon();
-    } else if (this.activeName == "five") {
-      this.getBalanceRecord();
-    }
-  },
-  activated(){
-    let id = this.$route.query.id;
-    let activeName = this.$route.query.activeName;
-    this.activeName = activeName;
-    this.id = id;
-    if (this.activeName == "first") {
-      this.getUserProject();
-    } else if (this.activeName == "second") {
-      // this.getCardOrders();
-      this.getCardList();
-    } else if (this.activeName == "third") {
-      this.getUserGoods();
-    } else if (this.activeName == "fourth") {
-      this.getUserCoupon();
-    } else if (this.activeName == "five") {
-      this.getBalanceRecord();
+    }else if (this.activeName == 'fourth'){
+      this.getUserCoupon()
     }
   },
 

src/pages/payUser/index.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="mine">
+    <div class="condition">
+      <el-input placeholder="请输入内容" class="search" v-model="searchText">
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
+      </el-input>
+      <el-button type="primary" class="searchButton" @click="getUserList()"
+        >搜索</el-button
+      >
+      <div class="silenceUser">
+        <div class="title">显示沉默付费用户</div>
+        <el-switch
+          v-model="silence"
+          active-color="#fa7d22"
+          inactive-color="#e7e7e7"
+          @change="showSilence"
+        >
+        </el-switch>
+      </div>
+      <div class="faceUser">
+        <div class="title">显示未面诊付费用户</div>
+        <el-switch
+          v-model="face"
+          active-color="#fa7d22"
+          inactive-color="#e7e7e7"
+          @change="showFace"
+        >
+        </el-switch>
+      </div>
+      <div class="filter">
+        <div class="title">筛选</div>
+        <i @click="openFilterPop" class="el-icon-s-operation"></i>
+      </div>
+      <!-- 筛选条件弹窗 -->
+      <select-pop
+        :visible.sync="dialogVisible"
+        @saveSelectList="saveSelectList"
+        :resetPop='resetPop'
+        :key='key'
+      ></select-pop>
+    </div>
+
+    <div class="user-list">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        height="500"
+        style="width: 100%; border-radius: 8px"
+        @row-click="handleSelectionChange"
+      >
+        <el-table-column label="头像" width="120">
+          <template slot-scope="scope">
+            <div class="head-img">
+              <img :src="scope.row.avatar_url" alt="" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="nickname" label="昵称" width="120">
+        </el-table-column>
+        <el-table-column prop="id" label="用户ID" width="120"></el-table-column>
+        <el-table-column prop="mobile" label="联系电话" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column
+          prop="create_time"
+          label="注册时间"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="last_login_time"
+          label="最后登录时间"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </el-table>
+
+      <div class="pagin">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage1"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "../../server/home";
+import selectPop from "./selectPop/index.vue";
+export default {
+  components: { selectPop },
+  data() {
+    return {
+      searchText: "",
+      dates: "",
+      coupon: "",
+      couponList: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+      ],
+      tableData: [],
+      currentPage1: 1,
+      multipleSelection: "",
+      total: 0,
+      face: false, //未面诊用户开关
+      silence: false, //沉默用户开关
+      dialogVisible: false, // 控制筛选弹框
+      // 筛选框内的变量内容
+      customerKey: 0,
+      couponKey: 0,
+      cardKey: 0,
+      latelyKey: 0,
+      superpositionNum: 0,
+      StoredPrice: 0,
+      transitionNum: 0,
+      consumeprice:0,
+      resetPop:false, //设置筛选弹窗开关
+      key:1 //筛选弹框组件刷新加载
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    // 筛选其他条件
+    saveSelectList(
+      customerKey,
+      couponKey,
+      cardKey,
+      latelyKey,
+      superpositionNum,
+      StoredPrice,
+      transitionNum,
+      consumeprice,
+    ) {
+      (this.customerKey = customerKey),
+        (this.couponKey = couponKey),
+        (this.cardKey = cardKey),
+        (this.latelyKey = latelyKey),
+        (this.superpositionNum = superpositionNum),
+        (this.StoredPrice = StoredPrice),
+        (this.transitionNum = transitionNum),
+        this.consumeprice = consumeprice
+        this.getUserList();
+    },
+    // 筛选沉默用户
+    showSilence(e) {
+      this.getUserList();
+    },
+    // 筛选未面诊用户
+    showFace(e) {
+      this.getUserList();
+    },
+    // 打开筛选条件弹框
+    openFilterPop() {
+      this.dialogVisible = true;
+    },
+    // 获取订单列表
+    getUserList() {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        keywords: this.searchText,
+        silence_user: this.silence ? 1 : 0, //沉默付费用户1是显示 0是不显示
+        face_user: this.face ? 1 : 0, //显示未面诊付费用户 1是显示 0是不显示
+        tag: this.customerKey,
+        coupon_days: this.couponKey,
+        card_days: this.cardKey,
+        buying_time: this.latelyKey,
+        project_add: this.superpositionNum,
+        balance_money: this.StoredPrice,
+        change_add: this.transitionNum,
+        consume_money:this.consumeprice
+      };
+      api.getUserPayList(params).then((res) => {
+        if (res.code == 200) {
+          // 将用户手机号中间四位变成****
+          res.data.list.map((item) => {
+            if (item.mobile) {
+              item.mobile =
+                item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
+            }
+          });
+          this.tableData = res.data.list;
+          this.total = res.data.total;
+          console.log(this.tableData);
+        }
+      });
+    },
+
+    handleCurrentChange(e) {
+      this.currentPage1 = e;
+      this.getUserList();
+    },
+
+    handleSizeChange(val) {},
+    handleSelectionChange(row, column, event) {
+      this.$router.push({
+        path: "/payUser/details",
+        query: {
+          id: row.id,
+        },
+      });
+    },
+  },
+
+  created() {
+    this.getUserList();
+  },
+
+  mounted() {},
+  // 不是客户详情页面返回重置数据
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/payUser/details") {
+      next((vm)=>{
+        let key = vm.key
+        Object.assign(vm.$data, vm.$options.data());
+        vm.key=key+1 
+        vm.resetPop = true
+        vm.getUserList()
+      })
+    }else{
+      next()
+    }
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.mine {
+  .condition {
+    display: flex;
+    .coupon-select {
+      width: 174px;
+      margin-left: 18px;
+    }
+    .search {
+      width: 152px;
+      margin-left: 18px;
+    }
+
+    .searchButton {
+      margin-left: 18px;
+      width: 68px;
+      background: #fa7d22;
+      border-radius: 2px;
+      border-color: #fa7d22;
+    }
+    .silenceUser {
+      display: flex;
+      margin-left: 53px;
+      align-items: center;
+      .title {
+        line-height: 40px;
+        margin-right: 16px;
+      }
+    }
+    .faceUser {
+      display: flex;
+      margin-left: 53px;
+      align-items: center;
+      .title {
+        line-height: 40px;
+        margin-right: 16px;
+      }
+    }
+    .filter {
+      display: flex;
+      align-items: center;
+      margin-left: 53px;
+      .title {
+        margin-right: 17px;
+      }
+      i {
+        font-size: 17px;
+      }
+    }
+  }
+  .user-list {
+    margin-top: 18px;
+    padding: 0 12px;
+    width: 100%;
+    background: #ffffff;
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+    border-radius: 8px;
+    .head-img {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .pagin {
+      padding: 20px 0;
+      .el-pagination {
+        text-align: center;
+      }
+    }
+    /deep/ .el-table th > .cell {
+      font-size: 14px !important;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #999999;
+      line-height: 20px;
+    }
+    /deep/ .el-table td,
+    .el-table th.is-leaf {
+      border-bottom: none;
+    }
+  }
+}
+</style>

src/pages/payUser/myOrder/index.vue

@@ -0,0 +1,859 @@
+<template>
+  <div class="order">
+    <div class="warp">
+      <el-tabs type="border-card" @tab-click="changeTab" v-model="activeName">
+        <el-tab-pane label="项目订单" name="first">
+          <div class="user-list">
+            <el-table
+              ref="multipleTable"
+              :data="projectData"
+              tooltip-effect="dark"
+              height="354"
+              style="width: 100%; border-radius: 8px"
+              @row-click="handleSelectionChange"
+            >
+              <el-table-column prop="goods" label="项目名称" width="200">
+                <template slot-scope="scope">
+                  <div v-for="(val, index) in scope.row.goods" :key="index">
+                    <div>{{ val.name }}</div>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goods" label="数量" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <div>{{ scope.row.goods.length }}</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="price"
+                label="总价格"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="order_time"
+                label="预约时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="store_name"
+                label="预约店铺"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <div :class="'color' + scope.row.status">
+                    {{
+                      scope.row.status != 5
+                        ? statusStr[scope.row.status]
+                        : statusStr[statusStr.length - 1]
+                    }}
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagin">
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="handleCurrentChange"
+                :current-page.sync="currentPage1"
+                :total="total"
+              ></el-pagination>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="次卡订单" name="second">
+          <div class="user-list">
+            <el-table
+              ref="multipleTable"
+              :data="cardListData"
+              tooltip-effect="dark"
+              height="354"
+              @row-click="openDetail"
+              style="width: 100%; border-radius: 8px"
+            >
+              <el-table-column prop="card_name" label="卡券名称" width="200">
+                <template slot-scope="scope">
+                  <div>{{ scope.row.card_name | ellipsis(8) }}</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="total_num"
+                label="总次数"
+                show-overflow-tooltip
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="num"
+                label="剩余次数"
+                show-overflow-tooltip
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="used_num"
+                label="已用次数"
+                width="180"
+                show-overflow-tooltip
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="expir_time"
+                label="过期时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="create_time"
+                label="创建时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <div :class="'color' + scope.row.status">
+                    {{
+                      scope.row.status == -1
+                        ? "已过期"
+                        : scope.row.status == -0
+                        ? "已使用"
+                        : "待使用"
+                    }}
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagin">
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="handleCurrentChange"
+                :current-page.sync="currentPage1"
+                :total="total"
+              ></el-pagination>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="商品订单" name="third">
+          <div class="user-list">
+            <el-table
+              ref="multipleTable"
+              :data="goodData"
+              tooltip-effect="dark"
+              height="354"
+              style="width: 100%; border-radius: 8px"
+            >
+              <!-- create_time: "2022-03-19 22:53:40"
+goods: [{order_id: 47, name: "润百颜玻尿酸屏障调理面膜", num: 1}]
+id: 47
+price: "0.01"
+status: 5 -->
+
+              <el-table-column prop="goods" label="商品名称" width="200">
+                <template slot-scope="scope">
+                  <div v-for="(val, index) in scope.row.goods" :key="index">
+                    <div>{{ val.name }}</div>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goods" label="数量" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <div>{{ scope.row.goods.length }}</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="price"
+                label="实付款"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="create_time"
+                label="下单时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <div :class="'classShow' + scope.$index">
+                    {{
+                      scope.row.status == 1 || scope.row.status == 2
+                        ? goodStatus[scope.row.status]
+                        : goodStatus[goodStatus.length - 1]
+                    }}
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagin">
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="handleCurrentChange"
+                :current-page.sync="currentPage1"
+                :total="total"
+              ></el-pagination>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="优惠券" name="fourth">
+          <div class="user-list">
+            <el-table
+              ref="multipleTable"
+              :data="couponData"
+              tooltip-effect="dark"
+              height="354"
+              style="width: 100%; border-radius: 8px"
+            >
+              <!-- create_time: "2022-03-10 10:39:19"
+ex_time: "2022.03.17 23:59"
+id: 2517
+name: "新人体验券"
+status: 2
+type: "全额券" -->
+
+              <el-table-column
+                prop="name"
+                label="卡卷名称"
+                width="200"
+              ></el-table-column>
+              <el-table-column
+                prop="type"
+                label="卡卷类型"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="price"
+                label="总价格"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="create_time"
+                label="到期时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                prop="create_time"
+                label="创建时间"
+                width="180"
+                show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <div :class="'color' + scope.row.status">
+                    {{ couponStatus[scope.row.status] }}
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagin">
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="handleCurrentChange"
+                :current-page.sync="currentPage1"
+                :total="total"
+              ></el-pagination>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="余额记录" name="five">
+          <div class="user-list">
+            <el-table
+              ref="multipleTable"
+              :data="balanceListData"
+              tooltip-effect="dark"
+              height="354"
+              style="width: 100%; border-radius: 8px"
+            >
+              <el-table-column prop="goods" label="变更时间" width="200">
+                <template slot-scope="scope">
+                  <div>{{ scope.row.create_time }}</div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goods" label="变更前金额">
+                <template slot-scope="scope">
+                  <div>{{ scope.row.before_amount }}</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="goods"
+                label="变更后金额"
+                show-overflow-tooltip
+              >
+                <template slot-scope="scope">
+                  <div>{{ scope.row.after_amount }}</div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="price"
+                label="变更金额"
+                show-overflow-tooltip
+              >
+                <template slot-scope="scope">
+                  <div>
+                    {{ scope.row.is_add == 1 ? "+" : "-" }}{{ scope.row.amount }}
+                  </div>
+                </template>
+              </el-table-column>
+              <!-- <el-table-column prop="status" label="状态" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <div>{{ scope.row.msg }}</div>
+                </template>
+              </el-table-column> -->
+              <!--  余额类型(记录类型，1充值，2充值赠送，3订单退款，5提现驳回，-1消费，-2提现冻结，10客服添加，-10客服扣除) -->
+              <el-table-column prop="status" label="类型" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <div>
+                    {{
+                      scope.row.type == 1
+                        ? "充值"
+                        : scope.row.type == 2
+                        ? "充值赠送"
+                        : scope.row.type == 3
+                        ? "订单退款"
+                        : scope.row.type == 5
+                        ? "提现驳回"
+                        : scope.row.type == -1
+                        ? "消费"
+                        : scope.row.type == -2
+                        ? "提现冻结"
+                        : scope.row.type == 10
+                        ? "客服添加"
+                        : scope.row.type == -10
+                        ? "客服扣除"
+                        : ""
+                    }}
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="pagin">
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                @current-change="handleCurrentChange"
+                :current-page.sync="currentPage1"
+                :total="total"
+              ></el-pagination>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <!-- 次卡详情 -->
+    <mine-pupop :show="isPore">
+      <div class="pore-block">
+        <div class="delete-pupop" @click="isPore = false">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+          />
+        </div>
+        <div class="pore-content">
+          <div class="card-title">订单详情</div>
+          <div class="project">
+            <div class="project-title">项目名称：</div>
+            <div class="project-list">
+              <div
+                class="project-info"
+                v-for="(item, index) in cardInfo.project_list"
+                :key="index"
+              >
+                <div class="name-text">{{ item.project_name }}</div>
+                <div class="change-num">
+                  <div class="num-content">
+                    <div class="content-left" @click="reduce(index)">-</div>
+                    <div class="content-num">{{ item.num || 0 }}</div>
+                    <div class="content-right" @click="item.num++">+</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="common">
+            <span class="common-title">支付方式：</span
+            ><span>{{ cardInfo.pay_way }}</span>
+          </div>
+          <div class="common">
+            <span class="common-title">有效期限：</span
+            ><span>{{ cardInfo.ex_time }}</span>
+          </div>
+          <div class="common">
+            <span class="common-title">实付金额：</span
+            ><span>￥{{ cardInfo.price }}</span>
+          </div>
+          <div class="consume-list">
+            <div class="consume-title">消耗信息：</div>
+            <div
+              class="consume-info min-size"
+              v-for="(item, index) in cardLogList"
+              :key="index"
+            >
+              <div class="shop">{{ item.store_name }}</div>
+              <div class="project-tips">{{ item.remark }}</div>
+              <div class="project-ts">{{ item.create_time }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="confirm" @click="confirm">确定</div>
+      </div>
+    </mine-pupop>
+  </div>
+</template>
+
+<script>
+import api from "../../../server/home";
+import minePupop from "../../../components/minePupop/index.vue";
+
+export default {
+  components: {
+    minePupop,
+  },
+  data() {
+    return {
+      couponList: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+      ],
+      tableData: [
+        {
+          date: "2022.04.25  14:30",
+          name: "滴滴滴",
+          headImg:
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
+          phone: "13346783645",
+          numberList: 2,
+          price: 100,
+          shop: "运用店",
+          status: 2,
+        },
+        {
+          date: "2022.04.25  14:30",
+          name: "滴滴滴",
+          headImg:
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
+          phone: "13346783645",
+          numberList: 5,
+          price: 800,
+          shop: "武昌店",
+          status: 1,
+        },
+      ],
+      statusStr: ["未支付", "待使用", "正在使用", "已结算", "已取消"],
+      couponStatus: ["待使用", "已使用", "已过期"],
+      goodStatus: ["未支付", "已支付", "已取货"],
+      activeName: "first",
+      currentPage1: 1,
+      couponData: [],
+      goodData: [],
+      projectData: [],
+      cardOrderData: [],
+      total: 100,
+      limit: 10,
+      isPore: false,
+      cardInfo: {}, //订单详情
+      cardLogList: [], //次卡消耗记录
+      cardListData: [], //用户次卡列表
+      balanceListData: [], //用户余额变更记录
+    };
+  },
+  computed: {},
+  watch: {},
+
+  methods: {
+    // 获取优惠券订单
+    getUserCoupon() {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        id: this.id,
+      };
+      api.getUserCoupon(params).then((res) => {
+        this.couponData = res.data.list;
+        this.total = res.data.total;
+      });
+    },
+    reduce(index) {
+      this.cardInfo.project_list[index].num--;
+      if (this.cardInfo.project_list[index].num < 0) {
+        this.cardInfo.project_list[index].num = 0;
+      }
+    },
+    //次卡订单详情
+    openDetail(row, column, event) {
+      this.isPore = true;
+      api.cardInfo({ id: row.id }).then((res) => {
+        if (res.code == 200) {
+          this.cardInfo = res.data;
+        }
+      });
+      api.cardLog({ id: row.id }).then((res) => {
+        if (res.code == 200) {
+          this.cardLogList = res.data.list;
+        }
+      });
+    },
+    confirm() {
+      // 项目ID，json字符，格式如：[{"project_id":"10","num":5}]，project_id：适用项目ID，num：剩余次数
+      let project_data = [],
+        project_info = {};
+      this.cardInfo.project_list.forEach((res) => {
+        project_info = {
+          project_id: res.id,
+          num: res.num,
+        };
+        project_data.push(project_info);
+      });
+      api
+        .cardUpdate({
+          id: this.cardInfo.id,
+          project_data: JSON.stringify(project_data),
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message.success("更改成功！");
+            this.isPore = false;
+          }
+        });
+    },
+
+    // 获取商品订单
+    getUserGoods() {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        id: this.id,
+      };
+      api.getUserGoods(params).then((res) => {
+        this.goodData = res.data.list;
+        this.total = res.data.total;
+      });
+    },
+
+    // 获取获取项目订单
+    getUserProject() {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        id: this.id,
+      };
+      api.getUserProject(params).then((res) => {
+        this.projectData = res.data.list;
+        this.total = res.data.total;
+      });
+    },
+
+    // 获取卡券订单
+    // async getCardOrders() {
+    //   let params = {
+    //     page: this.currentPage1,
+    //     limit: this.limit,
+    //     id: this.id,
+    //   };
+    //   let resp = await api.getCardOrders(params);
+    //   if (resp.code === 200) {
+    //     console.log(resp, "adadasdasdadsadsadasd");
+    //     this.cardOrderData = resp.data.list;
+    //     this.total = resp.data.total;
+    //   }
+    // },
+    //获取用户次卡列表
+    async getCardList() {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        id: this.id,
+      };
+      let resp = await api.getCardList(params);
+      if (resp.code === 200) {
+        console.log(resp, "asdasdasd");
+        this.cardListData = resp.data.list;
+        this.total = resp.data.total;
+      }
+    },
+    // 获取余额变更记录
+    async getBalanceRecord() {
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        id: this.id,
+      };
+      let resp = await api.getBalanceRecord(params);
+      if (resp.code === 200) {
+        console.log(resp, "asdasdasd");
+        this.balanceListData = resp.data.list;
+        this.total = resp.data.count;
+      }
+    },
+    handleCurrentChange(val) {
+      this.currentPage1 = val;
+      if (this.activeName == "first") {
+        this.getUserProject();
+      } else if (this.activeName == "second") {
+        // this.getCardOrders();
+        this.getCardList();
+      } else if (this.activeName == "third") {
+        this.getUserGoods();
+      } else if (this.activeName == "fourth") {
+        this.getUserCoupon();
+      } else if (this.activeName == "five") {
+        this.getBalanceRecord();
+      }
+    },
+    handleSelectionChange(row, column, event) {
+      this.$router.push({
+        path: "/historicalOrder/details",
+        query: {
+          id: row.id,
+        },
+      });
+    },
+    onSubmit() {},
+    submitFrequency() {},
+    changeTab(e) {
+      this.currentPage1 = 1;
+      console.log(this.currentPage1);
+      if (e.index == 0) {
+        this.getUserProject();
+      } else if (e.index == 1) {
+        // this.getCardOrders();
+        this.getCardList();
+      } else if (e.index == 2) {
+        this.getUserGoods();
+      } else if (e.index == 3) {
+        this.getUserCoupon();
+      } else if (e.index == 4) {
+        this.getBalanceRecord();
+      }
+    },
+  },
+
+  created() {
+    let id = this.$route.query.id;
+    let activeName = this.$route.query.activeName;
+    this.activeName = activeName;
+    this.id = id;
+    if (this.activeName == "first") {
+      this.getUserProject();
+    } else if (this.activeName == "second") {
+      // this.getCardOrders();
+      this.getCardList();
+    } else if (this.activeName == "third") {
+      this.getUserGoods();
+    } else if (this.activeName == "fourth") {
+      this.getUserCoupon();
+    } else if (this.activeName == "five") {
+      this.getBalanceRecord();
+    }
+  },
+  activated(){
+    let id = this.$route.query.id;
+    let activeName = this.$route.query.activeName;
+    this.activeName = activeName;
+    this.id = id;
+    if (this.activeName == "first") {
+      this.getUserProject();
+    } else if (this.activeName == "second") {
+      // this.getCardOrders();
+      this.getCardList();
+    } else if (this.activeName == "third") {
+      this.getUserGoods();
+    } else if (this.activeName == "fourth") {
+      this.getUserCoupon();
+    } else if (this.activeName == "five") {
+      this.getBalanceRecord();
+    }
+  },
+
+  mounted() {},
+};
+</script>
+
+<style lang='less' scoped>
+.order {
+  height: 100%;
+  width: 100%;
+  .pagin {
+    padding: 20px 0;
+    .el-pagination {
+      text-align: center;
+    }
+  }
+  .colorList {
+    color: green;
+  }
+}
+.color0 {
+  color: #fc3019;
+}
+.color1 {
+  color: #3ef3ed;
+}
+.color2 {
+  color: #00eeee;
+}
+.color3 {
+  color: #61d09d;
+}
+.color4 {
+  color: #3115cc;
+}
+.color5 {
+  color: #fc3019;
+}
+.color6 {
+  color: #a999ea;
+}
+
+.priceColor {
+  color: #ff3007;
+}
+.pore-block {
+  width: 540px;
+  height: 400px;
+  background: #ffffff;
+  border-radius: 8px;
+  position: relative;
+  padding: 26px 72px 80px 30px;
+  .delete-pupop {
+    width: 32px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    img {
+      width: 100%;
+    }
+  }
+  .pore-content {
+    overflow: scroll;
+    height: 310px;
+    .card-title {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+      text-align: center;
+    }
+    .project {
+      display: flex;
+      font-size: 13px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 18px;
+      .project-title {
+        color: #999999;
+      }
+      .project-list {
+        flex: 1;
+        .project-info {
+          flex: 1;
+          .change-num {
+            margin-top: 6px;
+            width: 100%;
+            display: flex;
+            justify-content: end;
+            .num-content {
+              width: 104px;
+              height: 28px;
+              background: #ffffff;
+              border-radius: 2px;
+              border: 1px solid #fa7d22;
+              display: flex;
+              align-items: center;
+
+              .content-left,
+              .content-right {
+                width: 28px;
+                height: 100%;
+                background: #fa7d22;
+                font-size: 20px;
+                line-height: 24px;
+                color: #ffffff;
+                text-align: center;
+              }
+              .content-num {
+                flex: 1;
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: rgba(0, 0, 0, 0.65);
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+    }
+    .common {
+      margin-top: 6px;
+      font-size: 13px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 18px;
+      .common-title {
+        color: #999999;
+      }
+    }
+    .consume-list {
+      margin-top: 6px;
+      .consume-title {
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        line-height: 18px;
+      }
+      .consume-info {
+        margin-top: 6px;
+        font-size: 10px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 14px;
+        display: flex;
+        justify-content: space-between;
+        .shop {
+        }
+        .project-tips {
+          flex: 1;
+          margin: 0 10px;
+        }
+        .project-ts {
+        }
+      }
+    }
+  }
+  .confirm {
+    background: #fa7d22;
+    border-radius: 14px;
+    position: absolute;
+    bottom: 42px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 176px;
+    height: 28px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 28px;
+    text-align: center;
+  }
+}
+</style>

src/pages/customerMan/selectPop/index.vue

@@ -86,7 +86,7 @@
             ></el-input-number>
           </div>
           <div class="transition">
-            <div class="transition-title">转换次数</div>
+            <div class="transition-title">转化次数</div>
             <el-input-number
               v-model="transitionNum"
               :min="0"

src/router/map/home.js

@@ -17,6 +17,9 @@ import ConfirmOrderAddOrder from '@/pages/confirmOrder/addOrder'
 import StoreDetection from '@/pages/storeDetection/index'
 import Coupon from '@/pages/coupon/index'
 import projectOrder from '@/pages/customerMan/myOrder'
+import payUser from '@/pages/payUser/index'
+import payUserDetails from '@/pages/payUser/details/index'
+import payUserOrder from '@/pages/payUser/myOrder/index'
 
 export default {
   path: '/layout',
@@ -55,9 +58,6 @@ export default {
   {
     path: '/customerMan',
     component: CustomerMan,
-    meta:{
-      keepAlive:true
-    }
   },
   {
     path: '/customerMan/details',
@@ -72,6 +72,21 @@ export default {
       isback: true,
     },
     component: projectOrder
+  }, 
+  {
+    path: '/payUser',
+    component: payUser,
+    meta: {
+      keepAlive: true
+    }
+  },
+  {
+    path: '/payUser/Details',
+    component: payUserDetails,
+  },
+  {
+    path: '/payUser/Order',
+    component: payUserOrder,
   },
   {
     path: '/historicalOrder',
@@ -111,6 +126,5 @@ export default {
     path: '/coupon',
     component: Coupon
   },
-
   ]
 }

vue.config.js

@@ -4,11 +4,11 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
   // 测试
-  publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/test_pad/dist' :
-    process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
-  // 正式
-  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
+  // publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/test_pad/dist' :
   //   process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
+  // 正式
+  publicPath: process.env.env_config === 'prod' ? 'https://h5-cms-vue.ijolijoli.com/dist' :
+    process.env.env_config === 'test' ? '/vapps/calory/' : '/dist/',
   // 设置跨域
   crossorigin: 'anonymous',
   /**