添加刷新卡包列表&&同步付费管理和客户管理

src/pages/customerMan/myOrder/index.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="order">
     <div class="warp">
+      <div class="refreshBtn">
+        <el-button
+          class="refresh"
+          type="primary"
+          @click="refreshList"
+          :loading="refresh"
+          >{{ refresh ? "加载中..." : "刷新" }}</el-button
+        >
+      </div>
       <el-tabs type="border-card" @tab-click="changeTab" v-model="activeName">
         <el-tab-pane label="项目订单" name="first">
           <div class="user-list">
@@ -249,10 +258,7 @@ name: "新人体验券"
 status: 2
 type: "全额券" -->
 
-              <el-table-column
-                prop="name"
-                label="卡卷名称"
-              ></el-table-column>
+              <el-table-column prop="name" label="卡卷名称"></el-table-column>
               <el-table-column
                 prop="type"
                 label="卡卷类型"
@@ -271,7 +277,12 @@ type: "全额券" -->
                 width="180"
                 show-overflow-tooltip
               ></el-table-column>
-              <el-table-column width="100" prop="status" label="状态" show-overflow-tooltip>
+              <el-table-column
+                width="100"
+                prop="status"
+                label="状态"
+                show-overflow-tooltip
+              >
                 <template slot-scope="scope">
                   <div :class="'colorA' + scope.row.status">
                     {{ couponStatus[scope.row.status] }}
@@ -284,7 +295,7 @@ type: "全额券" -->
                 width="100"
                 show-overflow-tooltip
               >
-                <template slot-scope="scope" v-if="scope.row.status==0">
+                <template slot-scope="scope" v-if="scope.row.status == 0">
                   <div
                     class="cancleCoupon"
                     @click.stop="cancleCoupon(scope.row)"
@@ -363,7 +374,7 @@ type: "全额券" -->
             </div>
           </div>
         </div>
-        <div class="confirm" @click="confirm">确定</div>
+        <div v-if='cardInfo.card_type == 1' class="confirm" @click="confirm">确定</div>
       </div>
     </mine-pupop>
     <!-- 修改次卡时间 -->
@@ -490,12 +501,27 @@ export default {
       isCancelCoupon: false, //核销优惠券界面
       cancelCouponInfo: "", //核销优惠券名称
       couponRemark: "", //核销优惠券备注信息
+      refresh: false, //刷新页面数据
     };
   },
   computed: {},
   watch: {},
 
   methods: {
+    // 刷新页面数据
+    refreshList() {
+      this.currentPage1 = 1;
+      this.refresh = true;
+      if (this.activeName == "first") {
+        this.getUserProject();
+      } else if (this.activeName == "second") {
+        this.getCardList();
+      } else if (this.activeName == "third") {
+        this.getUserGoods();
+      } else if (this.activeName == "fourth") {
+        this.getUserCoupon();
+      }
+    },
     // 打开核销优惠券界面
     cancleCoupon(e) {
       this.isCancelCoupon = true;
@@ -504,25 +530,27 @@ export default {
     // 关闭核销优惠券页面
     closeCouponPop() {
       this.isCancelCoupon = false;
-      this.couponRemark = ''
+      this.couponRemark = "";
     },
     // 核销优惠券
-    checkCoupon(){
-      if(this.couponRemark==''){
-        this.$message.error('请填写备注信息')
-        return
+    checkCoupon() {
+      if (this.couponRemark == "") {
+        this.$message.error("请填写备注信息");
+        return;
       }
-      api.checkCoupon({
-        id:this.cancelCouponInfo.id,
-        remark:this.couponRemark
-      }).then(res=>{
-        if(res.code==200){
-          this.$message.success('核销成功')
-          this.isCancelCoupon = false;
-          // 刷新优惠券列表
-          this.getUserCoupon()
-        }
-      })
+      api
+        .checkCoupon({
+          id: this.cancelCouponInfo.id,
+          remark: this.couponRemark,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message.success("核销成功");
+            this.isCancelCoupon = false;
+            // 刷新优惠券列表
+            this.getUserCoupon();
+          }
+        });
     },
     // 阻止修改次卡时间时键盘弹出
     forbid() {
@@ -578,6 +606,8 @@ export default {
       api.getUserCoupon(params).then((res) => {
         this.couponData = res.data.list;
         this.total = res.data.total;
+        // 关闭刷新动画
+        this.refresh = false;
       });
     },
     reduce(index) {
@@ -637,6 +667,8 @@ export default {
       api.getUserGoods(params).then((res) => {
         this.goodData = res.data.list;
         this.total = res.data.total;
+        // 关闭刷新动画
+        this.refresh = false;
       });
     },
 
@@ -650,6 +682,8 @@ export default {
       api.getUserProject(params).then((res) => {
         this.projectData = res.data.list;
         this.total = res.data.total;
+        // 关闭刷新动画
+        this.refresh = false;
       });
     },
 
@@ -676,9 +710,10 @@ export default {
       };
       let resp = await api.getCardList(params);
       if (resp.code === 200) {
-        console.log(resp, "asdasdasd");
         this.cardListData = resp.data.list;
         this.total = resp.data.total;
+        // 关闭刷新动画
+        this.refresh = false;
       }
     },
     handleCurrentChange(val) {
@@ -744,6 +779,18 @@ export default {
 .order {
   height: 100%;
   width: 100%;
+  .refreshBtn {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 10px;
+    .refresh {
+      width: 100px;
+      background: #fa7d22;
+      border-radius: 2px;
+      border-color: #fa7d22;
+    }
+  }
   .cancleCoupon {
     width: 50px;
     height: 25px;
@@ -1033,7 +1080,7 @@ export default {
       }
     }
   }
-    .radio {
+  .radio {
     width: 100%;
     display: flex;
     justify-content: space-evenly;

src/pages/historicalOrder/index.vue

@@ -9,13 +9,13 @@
         end-placeholder="结束日期"
       ></el-date-picker>
 
-      <el-input placeholder="请输入项目" class="search" v-model="product">
+      <!-- <el-input placeholder="请输入项目" class="search" v-model="product">
         <i slot="prefix" class="el-input__icon el-icon-search"></i>
       </el-input>
 
       <el-input placeholder="请输入优惠券" class="search" v-model="coupon">
         <i slot="prefix" class="el-input__icon el-icon-search"></i>
-      </el-input>
+      </el-input> -->
 
       <el-input placeholder="请输入内容" class="search" v-model="searchText">
         <i slot="prefix" class="el-input__icon el-icon-search"></i>
@@ -217,7 +217,7 @@ export default {
       ],
       currentPage1: 1,
       multipleSelection: "",
-      nameListAll:[],
+      nameListAll: [],
       nameList: [], //员工列表
       selectNameList: [], //已选员工列表
       level: "", //店员等级
@@ -266,7 +266,7 @@ export default {
     selectType(e) {
       this.selectPup = true;
       this.order_id = e.id;
-      this.nameList = JSON.parse(JSON.stringify(this.nameListAll)) //重置数据
+      this.nameList = JSON.parse(JSON.stringify(this.nameListAll)); //重置数据
       this.selectNameList = []; //重置数据
       // 筛选出已分配的美容师
       if (e.assign) {
@@ -362,7 +362,7 @@ export default {
       api.getStaffList().then((res) => {
         if (res.code == 200) {
           this.nameList = res.data;
-          this.nameListAll = JSON.parse(JSON.stringify(res.data))
+          this.nameListAll = JSON.parse(JSON.stringify(res.data));
         }
       });
     },

src/pages/payUser/myOrder/index.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="order">
     <div class="warp">
+      <div class="refreshBtn">
+        <el-button
+          class="refresh"
+          type="primary"
+          @click="refreshList"
+          :loading="refresh"
+          >{{ refresh ? "加载中..." : "刷新" }}</el-button
+        >
+      </div>
       <el-tabs type="border-card" @tab-click="changeTab" v-model="activeName">
         <el-tab-pane label="项目订单" name="first">
           <div class="user-list">
@@ -96,13 +105,21 @@
                 show-overflow-tooltip
                 align="center"
               >
+                <template slot-scope="{ row }" v-if="row.card_type == 1">{{
+                  row.total_num
+                }}</template>
               </el-table-column>
               <el-table-column
                 prop="num"
                 label="剩余次数"
                 show-overflow-tooltip
                 align="center"
-              ></el-table-column>
+              >
+                <template slot-scope="{ row }" v-if="row.card_type == 1">{{
+                  row.num
+                }}</template>
+              </el-table-column>
+
               <el-table-column
                 prop="used_num"
                 label="已用次数"
@@ -115,7 +132,13 @@
                 label="过期时间"
                 width="180"
                 show-overflow-tooltip
-              ></el-table-column>
+              >
+                <template slot-scope="{ row }">
+                  <div class="expir_time" @click.stop="amendCardTime(row)">
+                    {{ row.expir_time }}
+                  </div>
+                </template>
+              </el-table-column>
               <el-table-column
                 prop="create_time"
                 label="创建时间"
@@ -264,6 +287,21 @@ type: "全额券" -->
                   </div>
                 </template>
               </el-table-column>
+              <el-table-column
+                prop=""
+                label="操作"
+                width="100"
+                show-overflow-tooltip
+              >
+                <template slot-scope="scope" v-if="scope.row.status == 0">
+                  <div
+                    class="cancleCoupon"
+                    @click.stop="cancleCoupon(scope.row)"
+                  >
+                    操作
+                  </div>
+                </template>
+              </el-table-column>
             </el-table>
 
             <div class="pagin">
@@ -382,7 +420,7 @@ type: "全额券" -->
                 :key="index"
               >
                 <div class="name-text">{{ item.project_name }}</div>
-                <div class="change-num">
+                <div class="change-num" v-if="cardInfo.card_type == 1">
                   <div class="num-content">
                     <div class="content-left" @click="reduce(index)">-</div>
                     <div class="content-num">{{ item.num || 0 }}</div>
@@ -417,7 +455,64 @@ type: "全额券" -->
             </div>
           </div>
         </div>
-        <div class="confirm" @click="confirm">确定</div>
+        <div v-if='cardInfo.card_type == 1' class="confirm" @click="confirm">确定</div>
+      </div>
+    </mine-pupop>
+    <!-- 修改次卡时间 -->
+    <mine-pupop :show="isAmend">
+      <div class="amendTime">
+        <div class="image">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+            @click="closeAmend"
+          />
+        </div>
+        <div class="admendTime-content">
+          <div class="oldTime">
+            次卡过期时间 :<span> {{ amendCardInfo.expir_time }}</span>
+          </div>
+          <div class="newTime">
+            选择更改日期:
+            <el-date-picker
+              class="date"
+              v-model="cardTime"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              @focus="forbid"
+            >
+            </el-date-picker>
+          </div>
+          <div class="radio">
+            <button class="cancelBtn" @click="cancel">取消</button>
+            <button class="affirmBtn" @click="affirm">确定</button>
+          </div>
+        </div>
+      </div>
+    </mine-pupop>
+    <!-- 操作核销优惠券 -->
+    <mine-pupop :show="isCancelCoupon">
+      <div class="CouponPop">
+        <div class="image">
+          <img
+            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+            alt
+            @click="closeCouponPop"
+          />
+        </div>
+        <div class="title">核销优惠券</div>
+        <div class="couponName">
+          <div class="one">优惠券名称:</div>
+          <div>{{ cancelCouponInfo.name }}</div>
+        </div>
+        <div class="couponRemark">
+          <div class="one">备注信息:</div>
+          <el-input v-model.trim="couponRemark"></el-input>
+        </div>
+        <div class="radio">
+          <button class="affirmBtn" @click="checkCoupon">确定</button>
+        </div>
       </div>
     </mine-pupop>
   </div>
@@ -482,12 +577,109 @@ export default {
       cardLogList: [], //次卡消耗记录
       cardListData: [], //用户次卡列表
       balanceListData: [], //用户余额变更记录
+      isAmend: false, //修改次卡时间弹窗
+      amendCardInfo: "", // 要修改次卡的信息
+      cardTime: "", //次卡修改时间(年月日)
+      isCancelCoupon: false, //核销优惠券界面
+      cancelCouponInfo: "", //核销优惠券名称
+      couponRemark: "", //核销优惠券备注信息
+      refresh: false, //刷新页面数据
     };
   },
   computed: {},
   watch: {},
 
   methods: {
+    // 刷新页面数据
+    refreshList() {
+      this.currentPage1 = 1;
+      this.refresh = true;
+      if (this.activeName == "first") {
+        this.getUserProject();
+      } else if (this.activeName == "second") {
+        this.getCardList();
+      } else if (this.activeName == "third") {
+        this.getUserGoods();
+      } else if (this.activeName == "fourth") {
+        this.getUserCoupon();
+      } else if (this.activeName == "five") {
+        this.getBalanceRecord();
+      }
+    },
+    // 打开核销优惠券界面
+    cancleCoupon(e) {
+      this.isCancelCoupon = true;
+      this.cancelCouponInfo = e;
+    },
+    // 关闭核销优惠券页面
+    closeCouponPop() {
+      this.isCancelCoupon = false;
+      this.couponRemark = "";
+    },
+    // 核销优惠券
+    checkCoupon() {
+      if (this.couponRemark == "") {
+        this.$message.error("请填写备注信息");
+        return;
+      }
+      api
+        .checkCoupon({
+          id: this.cancelCouponInfo.id,
+          remark: this.couponRemark,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message.success("核销成功");
+            this.isCancelCoupon = false;
+            // 刷新优惠券列表
+            this.getUserCoupon();
+          }
+        });
+    },
+    // 阻止修改次卡时间时键盘弹出
+    forbid() {
+      //禁止软键盘弹出
+      document.activeElement.blur();
+    },
+    // 修改次卡时间取消
+    cancel() {
+      this.isAmend = false;
+      this.cardTime = "";
+    },
+    // 修改次卡时间确定
+    affirm() {
+      this.amendCardTimeApi();
+    },
+    // 修改次卡时间
+    amendCardTime(e) {
+      this.isAmend = true;
+      this.amendCardInfo = e;
+      console.log(e);
+    },
+    // 关闭修改次卡时间弹窗
+    closeAmend() {
+      this.isAmend = false;
+      this.cardTime = "";
+    },
+    // 发起修改次卡订单请求
+    amendCardTimeApi() {
+      api
+        .amendCardTime({
+          id: this.amendCardInfo.id,
+          expire_date: this.cardTime,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message({
+              message: res.msg,
+              type: "success",
+            });
+            this.isAmend = false;
+            // 更新次卡列表
+            this.getCardList();
+          }
+        });
+    },
     // 获取优惠券订单
     getUserCoupon() {
       let params = {
@@ -498,6 +690,8 @@ export default {
       api.getUserCoupon(params).then((res) => {
         this.couponData = res.data.list;
         this.total = res.data.total;
+        // 关闭刷新动画
+        this.refresh = false;
       });
     },
     reduce(index) {
@@ -511,6 +705,7 @@ export default {
       this.isPore = true;
       api.cardInfo({ id: row.id }).then((res) => {
         if (res.code == 200) {
+          res.data.card_type = row.card_type;
           this.cardInfo = res.data;
         }
       });
@@ -541,7 +736,7 @@ export default {
             this.$message.success("更改成功！");
             this.isPore = false;
             // 刷新次卡列表
-            this.getCardList()
+            this.getCardList();
           }
         });
     },
@@ -556,6 +751,8 @@ export default {
       api.getUserGoods(params).then((res) => {
         this.goodData = res.data.list;
         this.total = res.data.total;
+        // 关闭刷新动画
+        this.refresh = false;
       });
     },
 
@@ -569,6 +766,8 @@ export default {
       api.getUserProject(params).then((res) => {
         this.projectData = res.data.list;
         this.total = res.data.total;
+        // 关闭刷新动画
+        this.refresh = false;
       });
     },
 
@@ -597,6 +796,8 @@ export default {
       if (resp.code === 200) {
         this.cardListData = resp.data.list;
         this.total = resp.data.total;
+        // 关闭刷新动画
+        this.refresh = false;
       }
     },
     // 获取余额变更记录
@@ -610,6 +811,8 @@ export default {
       if (resp.code === 200) {
         this.balanceListData = resp.data.list;
         this.total = resp.data.count;
+        // 关闭刷新动画
+        this.refresh = false;
       }
     },
     handleCurrentChange(val) {
@@ -681,7 +884,6 @@ export default {
     if (this.activeName == "first") {
       this.getUserProject();
     } else if (this.activeName == "second") {
-      // this.getCardOrders();
       this.getCardList();
     } else if (this.activeName == "third") {
       this.getUserGoods();
@@ -700,6 +902,27 @@ export default {
 .order {
   height: 100%;
   width: 100%;
+  .refreshBtn {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 10px;
+    .refresh {
+      width: 100px;
+      background: #fa7d22;
+      border-radius: 2px;
+      border-color: #fa7d22;
+    }
+  }
+  .cancleCoupon {
+    width: 50px;
+    height: 25px;
+    background: #fa7d22;
+    border-radius: 2px;
+    line-height: 25px;
+    text-align: center;
+    color: #fff;
+  }
   .pagin {
     padding: 20px 0;
     .el-pagination {
@@ -731,13 +954,13 @@ export default {
 .color-3 {
   color: #fc3019;
 }
-.colorA1{
+.colorA1 {
   color: #333;
 }
-.colorA2{
+.colorA2 {
   color: #fc3019;
 }
-.colorA0{
+.colorA0 {
   color: #61d09d;
 }
 .priceColor {
@@ -878,4 +1101,128 @@ export default {
     text-align: center;
   }
 }
+// 修改次卡时间
+.amendTime {
+  width: 440px;
+  height: 300px;
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 15px;
+  .image {
+    height: 30px;
+    width: 30px;
+    img {
+      width: 100%;
+    }
+  }
+  .oldTime {
+    color: #333;
+    margin-left: 20px;
+    margin-top: 30px;
+    span {
+      margin-left: 20px;
+    }
+  }
+  .newTime {
+    margin-left: 20px;
+    margin-top: 10px;
+    .time {
+      margin-top: 20px;
+      margin-left: 110px;
+    }
+    .date {
+      margin-top: 20px;
+      margin-left: 20px;
+    }
+  }
+  .radio {
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    button {
+      width: 176px;
+      height: 28px;
+      border-radius: 14px;
+      background-color: #fff;
+      border: none;
+      margin-top: 90px;
+    }
+    .cancelBtn {
+      border: 1px solid #fa7d22;
+      color: #fa7d22;
+    }
+    .affirmBtn {
+      background-color: #fa7d22;
+      color: #fff;
+      margin-left: 15px;
+    }
+  }
+}
+// 核销优惠券
+.CouponPop {
+  width: 440px;
+  height: 300px;
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 15px;
+  .image {
+    height: 30px;
+    width: 30px;
+    img {
+      width: 100%;
+    }
+  }
+  .title {
+    text-align: center;
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 40px;
+  }
+  .couponName {
+    display: flex;
+    margin-bottom: 40px;
+    .one {
+      font-weight: 600;
+      margin-right: 20px;
+      width: 90px;
+    }
+  }
+  .couponRemark {
+    display: flex;
+    align-items: center;
+    .one {
+      margin-right: 22px;
+      font-weight: 600;
+      width: 90px;
+    }
+    .el-input {
+      width: 300px;
+      /deep/.el-input__inner:focus {
+        // el-input输入时设置边框颜色
+        border: #fa7d22 1px solid;
+      }
+    }
+  }
+  .radio {
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    button {
+      width: 176px;
+      height: 28px;
+      border-radius: 14px;
+      background-color: #fff;
+      border: none;
+      margin-top: 50px;
+    }
+    .affirmBtn {
+      background-color: #fa7d22;
+      color: #fff;
+      margin-left: 15px;
+    }
+  }
+}
+.expir_time {
+  color: #3115cc;
+}
 </style>