feat: 试测

package.json

@@ -16,6 +16,7 @@
     "element-ui": "^2.8.2",
     "js-cookie": "^3.0.1",
     "qrcodejs2": "0.0.2",
+    "vant": "^2.12.47",
     "vue": "^2.6.6",
     "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.0.1",

public/index.html

@@ -16,5 +16,6 @@
   <script src="https://ydcommon.51yund.com/vue/axios.min.js"></script>
   <!-- built files will be auto injected -->
 </body>
+<!-- <script type="text/javascript" src="https://ydcommon.51yund.com/test_web_hd/vendor/vconsole.min.js"></script> -->
 
 </html>

src/common/http.js

@@ -23,7 +23,6 @@ axios.defaults.timeout = 10000;
 
 // post请求头
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
-console.log(store.state.comVal.token, 'this.$store.state.comVal.token111', localStorage.getItem('token'));
 axios.defaults.headers.post['token'] = localStorage.getItem('token') || store.state.comVal.token;
 axios.defaults.headers.get['token'] = localStorage.getItem('token') || store.state.comVal.token;
 
@@ -120,7 +119,6 @@ function get (url, params) {
             type: 'error'
           });
         }
-        console.log(res.data);
         resolve(res.data);
       })
       .catch(err => {
@@ -141,7 +139,6 @@ function post (url, params) {
   return new Promise((resolve, reject) => {
     axios.post(reqUrl, QS.stringify(params))
       .then(res => {
-        console.log(res, 'resres');
         if (res.data.code != 200 && localStorage.getItem('token')) {
           Message({
             message: res.data.msg,
@@ -151,7 +148,6 @@ function post (url, params) {
         resolve(res.data);
       })
       .catch(err => {
-        console.log(err, 'errerrerr');
         reject(err.data)
       })
   });

src/common/utils.js

@@ -5,6 +5,7 @@ const utils = {
   },
   test: function () { },
   isBack: false,
+  //标准时间格式化
   formatTime: function (date, fmt) {
     var date = new Date(date);
     if (/(y+)/.test(fmt)) {
@@ -25,8 +26,6 @@ const utils = {
     }
     return fmt;
   },
-
-
 }
 
 export default () => {

src/components/common/layout/layout.vue

@@ -6,14 +6,17 @@
                  @changeIsBack="changeIsBack"></left-menu>
     </div>
     <div class="content">
-      <header :style="menuIndex==0?'justify-content: space-between;':''">
+      <header>
+
         <div class="back-icon"
              v-if="isback"
              @click="goBack"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/back.png"
                alt=""></div>
-        <div class="left"
-             v-if="menuIndex==0">
-          <div class="address">{{userInfo.store_name}}</div>
+        <div>
+          <div class="left"
+               v-if="menuIndex==0">
+            <div class="address">{{userInfo.store_name}}</div>
+          </div>
         </div>
         <div class="right">
           <div class="news"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png"></div>
@@ -73,7 +76,7 @@ export default {
     },
     loginOut () {
       localStorage.removeItem('token');
-      location.reload();
+      this.$router.replace('/login')
     },
     changeMenu (index) {
       this.menuIndex = index
@@ -138,6 +141,7 @@ export default {
   overflow: hidden;
 
   header {
+    width: 100%;
     line-height: 50px;
     font-size: 16px;
     color: #409eff;
@@ -146,8 +150,7 @@ export default {
     height: 60px;
     display: flex;
     align-items: center;
-    justify-content: right;
-
+    justify-content: space-between;
     position: relative;
     .back-icon {
       position: absolute;

src/components/common/layout/leftMenu.vue

@@ -49,12 +49,14 @@ export default {
           unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unhome.png',
           icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/home.png'
 
-        }, {
-          name: "测肤记录",
-          path: "/testSkin",
-          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',
-        }, {
+        },
+        // {
+        //   name: "测肤记录",
+        //   path: "/testSkin",
+        //   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',
+        // },
+        {
           name: "发券中心",
           path: "/coupon",
           unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/uncoupon.png',
@@ -75,7 +77,7 @@ export default {
         //   path: "/storeDetection",
         //   icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/testing.png',
         //   unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/untesting.png'
-        // }, 
+        // },   
         {
           name: "客户管理",
           path: "/customerMan",
@@ -88,8 +90,9 @@ export default {
   },
   watch: {
     $route (to, from) {
-      let patname = `/${window.location.hash.split('/')[1]}`
-      console.log(patname, 'patname', to);
+      let patname = `/${to.path.split('/')[1]}`
+      console.log(window.location, 'window.location.pathname', to);
+
       this.$emit('changeIsBack', to.meta.isback)
       this.menu.forEach((item, index) => {
         if (patname == item.path) {
@@ -100,8 +103,8 @@ export default {
     }
   },
   mounted () {
-    let patname = `/${window.location.pathname.split('/')[1]}`
-    console.log(patname, 'patname');
+    let patname = `/${window.location.hash.substr(1).split('/')[1]}`
+    console.log(window.location, 'window.location.pathname', patname);
     this.menu.forEach((item, index) => {
       if (patname == item.path) {
         this.nowIndex = index
@@ -143,7 +146,6 @@ export default {
 
 .el-menu-item {
   margin-left: 8px;
-  padding: 0;
   padding-left: 9px !important;
   height: auto;
   line-height: initial;

src/components/modules/helloWorld.vue

@@ -1,40 +1,40 @@
 <template>
-    <div class="hello">
-        <h1>{{ msg }}，样式由less书写</h1>
-        <input type="text" class="common">
-        <button @click="test()">点击</button>
-    </div>
+  <div class="hello">
+    <h1>{{ msg }}，样式由less书写</h1>
+    <input type="text"
+           class="common">
+    <button @click="test()">点击</button>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'HelloWorld',
-    props: {
-        msg: String
-    },
-    data() {
-        return {
-            
-        }
-    },
-    mounted: function () {
-    },
-    created: function () {
-    },
-    methods: {
-        test(){
-            console.log("点击了")
-        }
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data () {
+    return {
+
+    }
+  },
+  mounted: function () {
+  },
+  created: function () {
+  },
+  methods: {
+    test () {
     }
+  }
 }
 </script>
 
 <style lang='less' scoped>
-    @import url(../../style/root.less);
-    h1 {
-        .hei(60px);
-        &:hover {
-            color: #696;
-        }
-    }
+@import url(../../style/root.less);
+h1 {
+  .hei(60px);
+  &:hover {
+    color: #696;
+  }
+}
 </style>

src/pages/confirmOrder/details/index.vue

@@ -84,7 +84,8 @@
       <div class="project">
         <div class="project-title">
           <div>共<span>{{order_data.project_list?order_data.project_list.length:0}}个</span>项目</div>
-          <div class="add-project"
+          <div v-if="order_data.type!='one'"
+               class="add-project"
                @click="addProject">添加</div>
         </div>
         <div class="project-list">
@@ -95,12 +96,12 @@
             <div class="project-content">
               <div class="title-price">
                 <div class="project-tit">{{item.name | ellipsis(14)}}</div>
-                <div class="project-price"><span class="min-size">￥</span>{{item.price}}</div>
+                <div class="project-price"><span class="min-size">￥</span>{{Number(item.price).toFixed(2)}}</div>
               </div>
               <div class="project-tips">{{item.product_names}}</div>
               <div class="project-zoom">
                 <div> <span v-if="item.device_name">{{item.device_name}}（{{item.room}}）{{item.use_time}}分钟</span></div>
-                <div><img @click="eidt(item)"
+                <div v-if="order_data.type!='one'"><img @click="eidt(item)"
                        src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/eidt.png">
                   <img v-if="order_data.project_list.length>1"
                        @click="deleteProject(item)"
@@ -132,7 +133,6 @@
             <div class="on-icon">></div>
           </div>
 
-
           <!-- <div v-if="order_data.coupon_list&&order_data.coupon_list.length>0">
             <div class="coupon-ps"
                  v-for="item,index in order_data.coupon_list"
@@ -147,18 +147,18 @@
                  v-for="item,index in isSelectCoup"
                  :key="index">
               <div>{{item.coupon_name}}</div>
-      <div class="cou-price" v-if="item.type==4?true:false">抵扣{{item.projectName}}</div>
-      <div class="cou-price" v-if="item.type==3?true:false">抵扣全部项目(除升级包)</div>
-      <div class="cou-price" v-if="item.type==2?true:false">¥{{item.price}}</div>
-      <div class="cou-price" v-if="item.type==1?true:false">¥{{item.price}}</div>
-                    <!-- <div class="cou-price">-¥{{price}}</div> -->
+              <div class="cou-price"
+                   v-if="item.type==4?true:false">抵扣{{item.projectName}}</div>
+              <div class="cou-price"
+                   v-if="item.type==3?true:false">抵扣全部项目(除升级包)</div>
+              <div class="cou-price"
+                   v-if="item.type==2?true:false">¥{{item.price}}</div>
+              <div class="cou-price"
+                   v-if="item.type==1?true:false">¥{{item.price}}</div>
+              <!-- <div class="cou-price">-¥{{price}}</div> -->
             </div>
           </div>
 
-
-
-
-
         </div>
         <div class="over-price">
           合计： <span class="price-num"><span class="min-size">￥</span>{{showMoney}}<span class="min-size"></span></span>
@@ -178,7 +178,7 @@
           <li class="coupon-info"
               v-for="item,index in couponList"
               :key="index">
-  <!-- 1: '抵扣券',
+            <!-- 1: '抵扣券',
       2: '满减券',
       3: '全额减免券',
       4: '项目卡券' -->
@@ -332,11 +332,65 @@
         </div>
       </div>
     </mine-pupop>
+    <!-- 支付 -->
+    <mine-pupop :show="choicePayType">
+      <div class="pay-block">
+        <div class="delete-pupop"
+             @click="choicePayType=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+               alt=""></div>
+        <div class="pay-title">选择支付方式</div>
+        <div class="pay-price">￥<span>{{showMoney}}</span></div>
+        <div class="pay-list">
+          <div class="pay-info"
+               v-for="item,index in payList"
+               @click="changeType(index)"
+               :style="item.isSelect?'border: 1px solid #FA7D22;':'border: 1px solid #D0D0D0;'"
+               :key="index">
+            <div class="pay-left">
+              <img :src="item.payImg"
+                   alt="">
+              <span>{{item.title}}</span>
+            </div>
+            <div class="pay-right">
+              <img :src="item.isSelect?select:unSelect"
+                   alt="">
+            </div>
+          </div>
+        </div>
+        <div class="pay-button"
+             @click="pay">确认</div>
+      </div>
+    </mine-pupop>
+    <!-- 支付状态 -->
+    <mine-pupop :show="PayStatus">
+      <div class="pay-block">
+        <div class="delete-pupop"
+             @click="PayStatus=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
+               alt=""></div>
+        <div v-if="isPayCode">
+          <div class="pay-title">请扫码支付</div>
+          <div class="pay-price">￥<span>{{showMoney}}</span></div>
+          <div class="banner">
+            <div id="qrCode"
+                 class="qrCode"
+                 ref="qrCodeDiv"></div>
+          </div>
+        </div>
+        <div v-else>
+          <div class="pay-title">支付成功</div>
+          <div class="pay-suc"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/paySuc.png"
+                 alt=""></div>
+          <div class="pay-button"
+               @click="toHome">返回首页</div>
+        </div>
+      </div>
+    </mine-pupop>
   </div>
 </template>
 
 <script>
 import minePupop from '../../../components/minePupop/index.vue'
+import QRCode from 'qrcodejs2'
 import api from '../../../server/home'
 
 export default {
@@ -367,21 +421,6 @@ export default {
       },
       //皮肤状态列表
       poreList: [
-        {
-          medium: 133,
-          small: 344,
-          mini: 242
-        },
-        {
-          medium: 133,
-          small: 344,
-          mini: 242
-        },
-        {
-          medium: 133,
-          small: 344,
-          mini: 242
-        }
       ],
       //优惠券列表
       couponList: [],
@@ -389,6 +428,27 @@ export default {
       selectCouponList: [],
       //已选择优惠券的id（同一个id只能选择一张优惠券）
       selectCouponListId: [],
+      //支付方式
+      payList: [
+        {
+          title: '储值支付',
+          pay_way: 'amount',
+          payImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/savingsPay.png',
+          isSelect: true
+        },
+        {
+          pay_way: 'weixin',
+          title: '微信支付',
+          payImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/weiXinPay.png',
+          isSelect: false
+        },
+        {
+          pay_way: 'alipay',
+          title: '支付宝支付',
+          payImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/zhifubaoPay.png',
+          isSelect: false
+        },
+      ],
       timesInfo: '',
       reservationPrice: 0,//预约费用
       projectInfo: '',
@@ -402,22 +462,23 @@ export default {
       isProject: false,//是否展示选择项目弹窗
       isTs: false,//是否展示选择时间弹窗
       isPore: false,//皮肤状态弹窗
+      choicePayType: false,//支付弹窗
+      PayStatus: false,//支付状态弹窗
+      isPayCode: true,//是否展示支付二维码
       id: 0,//订单id
+      lastProjectPrice: '',//项目已选择的升级包
       isChange: false,//项目是否有改变
       isEditProject: false,//是否编辑项目
+      payStatusInterval: null,//轮循拉支付状态
       page: 1,
       limit: 200,
-
-
-
-
-    needSelect: false,
-    coupSelectType: '',
-    productDiscount: '',
-    isSelectCoup: [], // 选择的优惠券
-    // 下面是支付的数据
-    showMoney: 0, // 价值总额
-    // showRuleText: 10086,
+      needSelect: false,
+      coupSelectType: '',
+      productDiscount: '',
+      isSelectCoup: [], // 选择的优惠券
+      // 下面是支付的数据
+      showMoney: 0, // 价值总额
+      // showRuleText: 10086,
 
     };
   },
@@ -427,6 +488,9 @@ export default {
   watch: {},
 
   methods: {
+    toHome () {
+      this.$router.replace('/home')
+    },
     getOrderInfo () {
       api.getOrderInfo({ id: this.id }).then(res => {
         this.userInfo = res.data.user
@@ -434,7 +498,7 @@ export default {
         this.remarks = res.data.remark
         this.programmeList = res.data.scheme_list
         this.order_data = res.data.order_data
-        this.showMoney=res.data.order_data.price
+        this.showMoney = res.data.order_data.price
         this.poreList = res.data.detail_list
         this.calculationPrice()
       })
@@ -445,13 +509,19 @@ export default {
       })
     },
     getProducts (e) {
-      this.productsInfo = ''
+      // this.productsInfo = ''
       api.getProducts({ id: e }).then(res => {
         this.productsList = res.data.list
+        this.productsList.forEach(item => {
+          if (this.productsInfo == item.id) {
+            this.lastProjectPrice = Number(item.price)
+          }
+        })
       })
     },
     eidt (item) {
       this.projectInfo = item.id
+      this.productsInfo = item.product_ids == '' ? '' : Number(item.product_ids)
       this.getProducts(item.id)
       this.isEditProject = true
       this.isProject = true
@@ -469,6 +539,7 @@ export default {
     },
     addProject () {
       this.projectInfo = ''
+      this.productsInfo = ''
       this.isEditProject = false
       this.isProject = true
     },
@@ -477,16 +548,18 @@ export default {
       // 编辑
       if (this.isEditProject) {
         if (this.productsInfo != '') {
+
           this.order_data.project_list.forEach(e => {
             if (this.projectInfo == e.id) {
               this.productsList.forEach(item => {
-                if (e.product_ids != '') {
-                  e.price = Number(e.price) - Number(item.price)
-                }
                 e.product_ids = this.productsInfo
                 if (item.id == e.product_ids) {
+                  if (e.product_ids != '') {
+                    e.price = Number(e.price) - Number(this.lastProjectPrice)
+                  }
                   this.isChange = true
                   e.product_names = item.name
+                  console.log(Number(e.price), Number(item.price), 'Number(e.price) + Number(item.price)');
                   e.price = Number(e.price) + Number(item.price)
                   this.isProject = false
                   this.isEditProject = false
@@ -524,7 +597,6 @@ export default {
             }
           })
         }
-        console.log(nowProjectInfo, 'nowProjectInfo', productsInfo);
         projectInfo['name'] = nowProjectInfo.name
         projectInfo['id'] = nowProjectInfo.id
         projectInfo['cover_url'] = nowProjectInfo.cover_url
@@ -560,14 +632,12 @@ export default {
         let year = myDate.getFullYear();
         let month = myDate.getMonth() + 1;
         let date = myDate.getDate();
-        console.log(year + "-" + month + "-" + date)
         let str = "周" + "日一二三四五六".charAt(myDate.getDay());
         let tsTableInfo = {}
         tsTableInfo['text'] = i == 0 ? '今天' : i == 1 ? '明天' : str
         tsTableInfo['ts'] = month + "-" + date
         tsTableInfo['order_day'] = year + "-" + month + "-" + date
         tsTableList.push(tsTableInfo)
-        console.log(str)
       }
       this.tsTableList = tsTableList
     },
@@ -580,7 +650,7 @@ export default {
         this.tsTableIndex = 0
         this.isTs = true
       } else {
-        debugger
+        this.choicePayType = true
       }
     },
     //确定时间选择
@@ -593,10 +663,8 @@ export default {
         if (item.product_ids != "") {
           order_data_info['product_id'] = item.product_ids
         }
-        console.log(order_data_info, 'order_data_info');
         order_data.push(order_data_info)
       })
-      console.log(order_data, 'order_data');
       let params = {
         id: this.id,
         order_data: JSON.stringify(order_data),
@@ -620,9 +688,9 @@ export default {
     //获取订单优惠券
     onCoupon () {
 
-      if(this.couponList.length>0){
-         this.isCoupun = true
-         return
+      if (this.couponList.length > 0) {
+        this.isCoupun = true
+        return
       }
 
       let params = {
@@ -640,10 +708,76 @@ export default {
           this.onCoupon()
         }
       })
-      console.log(this.couponList)
       this.isCoupun = true
     },
+    //选择支付方式
+    changeType (i) {
+      this.payList.forEach((res, index) => {
+        if (index == i) {
+          res.isSelect = true
+        } else {
+          res.isSelect = false
+        }
+      })
+    },
+    pay () {
+      let that = this
+      let payWayList = this.payList.filter(res => {
+        return res.isSelect == true
+      })
+      // 卡券，项目券数据包, id：订单项目ID, coupon_id：优惠券ID, 如：[{ "id": 1220, coupon_id: 199 }]isSelectCoup
+      let params = {
+        id: this.id,
+        pay_way: payWayList[0].pay_way
+      }
+
+      let coupon_data = []
+      if (this.isSelectCoup.length > 0) {
+        this.isSelectCoup.forEach(item => {
+          if (item.type != 4) {
+            params['coupon_id'] = item.id
+          } else {
+            let couponInfo = {}
+            couponInfo['id'] = item.projectids
+            couponInfo['coupon_id'] = item.id
+          }
+        })
+      }
+      params['coupon_data'] = coupon_data.length > 0 ? JSON.stringify(coupon_data) : null
+      api.orderPay(params).then(res => {
+        if (res.code == 200) {
+          this.choicePayType = false
+          this.PayStatus = true
+          if (res.data.pay_status == 1) {
+            this.isPayCode = false
+          } else {
+            this.$nextTick(() => {
+              new QRCode(that.$refs.qrCodeDiv, {
+                text: res.data.qr_code_string,
+                width: 140,
+                height: 140,
+                colorDark: "#333333", //二维码颜色
+                colorLight: "#ffffff", //二维码背景色
+                correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
+              })
+            })
+            this.payStatusInterval = setInterval(e => {
+              this.payStatus()
+            }, 1000)
+          }
+        }
+
+      })
+    },
+    payStatus () {
+      api.payStatus({ id: this.id, }).then(res => {
 
+        if (res.data.pay_status == 1) {
+          clearInterval(this.payStatusInterval)
+          this.isPayCode = false
+        }
+      })
+    },
 
     //数组包含关系
     includes (arr1, arr2) {
@@ -661,191 +795,179 @@ export default {
     // },
 
 
-// 不可以用的不显示，如果同时有项目劵、抵扣劵、满减劵，只能用一种类型，其他劵不显示
-// 1、针对单个项目，项目劵可以多选
-// 2、抵扣劵、满减劵针对的是整个订单，当用户已使用了单个项目劵时，抵扣劵、满减劵就不能使用
-// 3、优惠劵可以给多个项目抵扣,
-// 4、默认抵扣金额最高的
-// 5、优惠劵排序，到期时间倒叙
+    // 不可以用的不显示，如果同时有项目劵、抵扣劵、满减劵，只能用一种类型，其他劵不显示
+    // 1、针对单个项目，项目劵可以多选
+    // 2、抵扣劵、满减劵针对的是整个订单，当用户已使用了单个项目劵时，抵扣劵、满减劵就不能使用
+    // 3、优惠劵可以给多个项目抵扣,
+    // 4、默认抵扣金额最高的
+    // 5、优惠劵排序，到期时间倒叙
 
 
-/**
-   * 点击使用按钮、勾选按钮
-   */
-  selectPupop: function (item, index) {
+    /**
+       * 点击使用按钮、勾选按钮
+       */
+    selectPupop: function (item, index) {
 
 
-    let CouPonIndex = this.couponList
+      let CouPonIndex = this.couponList
 
-    let selectIndex = index
-    let curreValue = !CouPonIndex[selectIndex].isSelect
-    let project_list = this.order_data.project_list //这里是项目列表
+      let selectIndex = index
+      let curreValue = !CouPonIndex[selectIndex].isSelect
+      let project_list = this.order_data.project_list //这里是项目列表
 
-    // 判断是否是不相同的项目券
-    if (this.couponList[selectIndex].type != 4) {
-      for (let i = 0; i < CouPonIndex.length; i++) {
-        CouPonIndex[i].isSelect = false
-      }
-      for (let i = 0; i < project_list.length; i++) {
-        project_list[i].cardId = ''
-      }
+      // 判断是否是不相同的项目券
+      if (this.couponList[selectIndex].type != 4) {
+        for (let i = 0; i < CouPonIndex.length; i++) {
+          CouPonIndex[i].isSelect = false
+        }
+        for (let i = 0; i < project_list.length; i++) {
+          project_list[i].cardId = ''
+        }
 
-    } else if (this.coupSelectType != 4) {
-      for (let i = 0; i < CouPonIndex.length; i++) {
-        CouPonIndex[i].isSelect = false
-      }
-      for (let i = 0; i < project_list.length; i++) {
-        project_list[i].cardId = ''
-      }
-    } else {
-      let numberSelect = 0
-      for (let i = 0; i < CouPonIndex.length; i++) {
-        if (CouPonIndex[i].isSelect) {
-          numberSelect = numberSelect + 1
+      } else if (this.coupSelectType != 4) {
+        for (let i = 0; i < CouPonIndex.length; i++) {
+          CouPonIndex[i].isSelect = false
+        }
+        for (let i = 0; i < project_list.length; i++) {
+          project_list[i].cardId = ''
+        }
+      } else {
+        let numberSelect = 0
+        for (let i = 0; i < CouPonIndex.length; i++) {
+          if (CouPonIndex[i].isSelect) {
+            numberSelect = numberSelect + 1
+          }
+        }
+        if (numberSelect == this.order_data.project_list.length && curreValue) {
+          this.$message.error('最多选择' + this.order_data.project_list.length + '项目券!');
+          return
         }
       }
-      console.log('numberSelect')
-      console.log(numberSelect)
-      if (numberSelect == this.order_data.project_list.length && curreValue) {
-            this.$message.error('最多选择' + this.order_data.project_list.length + '项目券!');
-        return
-      }
-    }
-    // 判断是否是取消选择项目券
-    CouPonIndex[selectIndex].isSelect = curreValue
-    if (!curreValue) {
-      for (let j = 0; j < project_list.length; j++) {
-        if (project_list[j].cardId && project_list[j].cardId == this.couponList[selectIndex].id) { // 如果是取消选择，那么也要取消绑定项目的id
-          project_list[j].cardId = ''
+      // 判断是否是取消选择项目券
+      CouPonIndex[selectIndex].isSelect = curreValue
+      if (!curreValue) {
+        for (let j = 0; j < project_list.length; j++) {
+          if (project_list[j].cardId && project_list[j].cardId == this.couponList[selectIndex].id) { // 如果是取消选择，那么也要取消绑定项目的id
+            project_list[j].cardId = ''
+          }
         }
+        CouPonIndex[selectIndex].projectids = ''
       }
-      CouPonIndex[selectIndex].projectids = ''
-    }
-    let orderDetails1 = this.order_data
-    orderDetails1.project_list = project_list
+      let orderDetails1 = this.order_data
+      orderDetails1.project_list = project_list
 
 
-      this.order_data=orderDetails1
-      this.couponList=CouPonIndex
-      this.coupSelectType=this.couponList[selectIndex].type
+      this.order_data = orderDetails1
+      this.couponList = CouPonIndex
+      this.coupSelectType = this.couponList[selectIndex].type
 
-    console.log(this.order_data)
-    console.log(this.couponList)
 
-    this.selectCoup()
+      this.selectCoup()
 
-  },
+    },
 
-// 选择项目进行绑定
-  selectCoup() {
-    let that = this
-    let isSelectCoups = []
-    for (let i = 0; i < this.couponList.length; i++) {
-      if (this.couponList[i].isSelect) {
-        let selectCoup = that.couponList[i]
-        isSelectCoups.push(selectCoup)
+    // 选择项目进行绑定
+    selectCoup () {
+      let that = this
+      let isSelectCoups = []
+      for (let i = 0; i < this.couponList.length; i++) {
+        if (this.couponList[i].isSelect) {
+          let selectCoup = that.couponList[i]
+          isSelectCoups.push(selectCoup)
+        }
       }
-    }
-      this.isSelectCoup=isSelectCoups
-    console.log(this.isSelectCoup)
+      this.isSelectCoup = isSelectCoups
 
-    // 抵扣顺序按照项目金额计算
-    that.theMoneyBest()
-  },
+      // 抵扣顺序按照项目金额计算
+      that.theMoneyBest()
+    },
 
-  // 抵扣顺序按照项目金额计算
-  // 卡券，项目券数据包,id：订单项目ID,coupon_id：优惠券ID,如：[{"id":1220,coupon_id:199}]  
-  theMoneyBest() {
-    let that = this
-    let project_list = this.order_data.project_list //这里是项目列表
-    let isSelectCoup = this.isSelectCoup //这里选择了的卡券列表
-    let selectProjectList = [] // 适合的卡券列表
-    // let CouPonIndex = this.CouPonIndex // 卡券选择的Id
-    let productDiscount = this.couponList // 卡券列表
-    console.log(productDiscount)
-    // debugger
-    if (isSelectCoup[0].type == 4) {
-      for (let i = 0; i < isSelectCoup.length; i++) { // 首先遍历卡券
-        if (!isSelectCoup[i].projectids) { // 如果卡券没绑定项目
-          console.log('没绑定过!')
+    // 抵扣顺序按照项目金额计算
+    // 卡券，项目券数据包,id：订单项目ID,coupon_id：优惠券ID,如：[{"id":1220,coupon_id:199}]  
+    theMoneyBest () {
+      let that = this
+      let project_list = this.order_data.project_list //这里是项目列表
+      let isSelectCoup = this.isSelectCoup //这里选择了的卡券列表
+      let selectProjectList = [] // 适合的卡券列表
+      // let CouPonIndex = this.CouPonIndex // 卡券选择的Id
+      let productDiscount = this.couponList // 卡券列表
+        (productDiscount)
+      // debugger
+      if (isSelectCoup[0].type == 4) {
+        for (let i = 0; i < isSelectCoup.length; i++) { // 首先遍历卡券
+          if (!isSelectCoup[i].projectids) { // 如果卡券没绑定项目
 
-          let selectIndexMoney = 0 // 初始值
-          let selectIndex = 111 // 初始金额
-          for (let j = 0; j < project_list.length; j++) { // 遍历项目
-            if (isSelectCoup[i].project_ids.indexOf(project_list[j].id) != -1 && !project_list[j].cardId) { // 如果卡券能够使用这个项目并且这个项目没有被绑定过
-              console.log('project_list[j].price')
-              console.log(project_list[j].price)
-              console.log(selectIndexMoney)
-              console.log(project_list[j].price > selectIndexMoney)
-              if (project_list[j].price * 1 > selectIndexMoney * 1) {
-                selectIndex = j
-                selectIndexMoney = project_list[j].price
-                console.log('--' + selectIndexMoney)
+            let selectIndexMoney = 0 // 初始值
+            let selectIndex = 111 // 初始金额
+            for (let j = 0; j < project_list.length; j++) { // 遍历项目
+              if (isSelectCoup[i].project_ids.indexOf(project_list[j].id) != -1 && !project_list[j].cardId) { // 如果卡券能够使用这个项目并且这个项目没有被绑定过
+                if (project_list[j].price * 1 > selectIndexMoney * 1) {
+                  selectIndex = j
+                  selectIndexMoney = project_list[j].price
+                }
+                // selectProjectList.push(project_list[i])
               }
-              // selectProjectList.push(project_list[i])
             }
-          }
-          if (selectIndex != 111) {
-            console.log('走了这里走了这里')
-            isSelectCoup[i].projectids = project_list[selectIndex].id
-            isSelectCoup[i].projectName = project_list[selectIndex].name
-            project_list[selectIndex].cardId = isSelectCoup[i].id
-          } else {
-            for (let k = 0; k < productDiscount.length; k++) {
-              if (productDiscount[k].id == isSelectCoup[i].id) {
-                // isSelectCoup.
-                productDiscount[k].isSelect = false
-                // isSelectCoup.splice(isSelectCoup.length-1,1);
-                this.$message.error('没有适合的项目!');
+            if (selectIndex != 111) {
+              isSelectCoup[i].projectids = project_list[selectIndex].id
+              isSelectCoup[i].projectName = project_list[selectIndex].name
+              project_list[selectIndex].cardId = isSelectCoup[i].id
+            } else {
+              for (let k = 0; k < productDiscount.length; k++) {
+                if (productDiscount[k].id == isSelectCoup[i].id) {
+                  // isSelectCoup.
+                  productDiscount[k].isSelect = false
+                  // isSelectCoup.splice(isSelectCoup.length-1,1);
+                  this.$message.error('没有适合的项目!');
+                }
               }
             }
-          }
 
+          }
         }
+        let orderDetails1 = this.order_data
+        orderDetails1.project_list = project_list
+        this.couponList = productDiscount
+        this.isSelectCoup = isSelectCoup
+        this.order_data = orderDetails1
       }
-      let orderDetails1 = this.order_data
-      orderDetails1.project_list = project_list
-        this.couponList= productDiscount
-        this.isSelectCoup= isSelectCoup
-        this.order_data= orderDetails1
-    }
 
-    this.calculateMoney() //计算总额
-  },
+      this.calculateMoney() //计算总额
+    },
 
-  // 计算总额
-  calculateMoney() {
-    let that = this
-    let money = this.order_data.price
-    let isSelectCoup = this.isSelectCoup
-    let project_list = this.order_data.project_list //这里是项目列表
+    // 计算总额
+    calculateMoney () {
+      let that = this
+      let money = this.order_data.price
+      let isSelectCoup = this.isSelectCoup
+      let project_list = this.order_data.project_list //这里是项目列表
 
-    if (isSelectCoup.length == 0) {
-        this.showMoney=money.toFixed(2)
-      return
-    }
+      if (isSelectCoup.length == 0) {
+        this.showMoney = money.toFixed(2)
+        return
+      }
 
-    // 如果是项目
-    if (isSelectCoup[0].type == 4) {
-      for (let i = 0; i < project_list.length; i++) {
-        if (project_list[i].cardId) {
+      // 如果是项目
+      if (isSelectCoup[0].type == 4) {
+        for (let i = 0; i < project_list.length; i++) {
+          if (project_list[i].cardId) {
+            money = money - project_list[i].price
+          }
+        }
+        this.showMoney = money.toFixed(2)
+      } else if (isSelectCoup[0].type == 3) {
+        for (let i = 0; i < project_list.length; i++) {
           money = money - project_list[i].price
         }
-      }
-        this.showMoney=money.toFixed(2)
-    } else if (isSelectCoup[0].type == 3) {
-      for (let i = 0; i < project_list.length; i++) {
-        money = money - project_list[i].price
-      }
 
-    } else {
-      money = money - isSelectCoup[0].price
-    }
+      } else {
+        money = money - isSelectCoup[0].price
+      }
 
-        this.showMoney=money.toFixed(2)
+      this.showMoney = money.toFixed(2)
 
 
-  },
+    },
 
 
     changeActive (e) {
@@ -899,6 +1021,11 @@ export default {
   mounted () {
 
   },
+  destroyed () {
+    if (this.payStatusInterval) { //如果定时器在运行则关闭
+      clearInterval(this.payStatusInterval)
+    }
+  }
 }
 
 </script>
@@ -1666,5 +1793,112 @@ export default {
       }
     }
   }
+  .pay-block {
+    width: 540px;
+    height: 400px;
+    background: #ffffff;
+    border-radius: 8px;
+    position: relative;
+    padding: 42px;
+    .delete-pupop {
+      width: 32px;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      img {
+        width: 100%;
+      }
+    }
+    .pay-title {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+      text-align: center;
+    }
+    .pay-suc {
+      margin-top: 40px;
+      margin-bottom: 80px;
+      text-align: center;
+      img {
+        width: 140px;
+      }
+    }
+    .pay-price {
+      margin-top: 10px;
+      font-size: 14px;
+      font-family: OPPOSans-B, OPPOSans;
+      font-weight: normal;
+      color: #fa4622;
+      text-align: center;
+      line-height: 31px;
+      span {
+        font-size: 20px;
+      }
+    }
+    .banner {
+      margin-top: 24px;
+      .qrCode {
+        text-align: center;
+      }
+    }
+    .pay-list {
+      width: 338px;
+      margin-top: 8px;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      .pay-info {
+        margin-top: 16px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        height: 44px;
+        border-radius: 35px;
+        border: 1px solid #d0d0d0;
+
+        padding: 0 20px;
+        .pay-left {
+          margin-left: 8px;
+          font-size: 16px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 22px;
+          display: flex;
+          align-items: center;
+          img {
+            width: 24px;
+          }
+          span {
+            margin-left: 20px;
+          }
+        }
+        .pay-right {
+          img {
+            width: 24px;
+          }
+        }
+      }
+    }
+    .pay-button {
+      margin-top: 28px;
+      width: 176px;
+      height: 28px;
+      background: #fa7d22;
+      border-radius: 14px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 28px;
+      text-align: center;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
 }
 </style>

src/pages/coupon/index.vue

@@ -98,11 +98,9 @@ export default {
     },
     handleSelectionChange (val) {
       this.multipleSelection = val;
-      console.log(this.multipleSelection);
     },
     // 发送优惠券
     sendCoupon () {
-      console.log(this.coupon);
       let selectIds = "";
       for (let i = 0; i < this.multipleSelection.length; i++) {
         selectIds = selectIds + "," + this.multipleSelection[i].id;
@@ -117,7 +115,6 @@ export default {
 
     // 获取订单列表
     getUserList () {
-      console.log("xxxxxxx");
       let params = {
         page: this.currentPage1,
         limit: this.limit,
@@ -133,7 +130,6 @@ export default {
 
     // 获取优惠券列表
     getCouponInfo () {
-      console.log("xxxxxxx");
       let params = {
         page: this.currentPage1,
         limit: 100
@@ -148,11 +144,9 @@ export default {
     handleCurrentChange (e) {
       this.currentPage1 = e;
       this.getUserList();
-      console.log(e, "eeeeee");
     },
 
     handleSizeChange (val) {
-      console.log(`每页 ${val} 条`);
     }
   },
 

src/pages/customerMan/index.vue

@@ -85,7 +85,6 @@ export default {
 
     // 获取订单列表
     getUserList () {
-      console.log("xxxxxxx");
       let params = {
         page: this.currentPage1,
         limit: this.limit,
@@ -102,11 +101,9 @@ export default {
     handleCurrentChange (e) {
       this.currentPage1 = e;
       this.getUserList();
-      console.log(e, "eeeeee");
     },
 
     handleSizeChange (val) {
-      console.log(`每页 ${val} 条`);
     },
     handleSelectionChange (row, column, event) {
       this.$router.push({

src/pages/customerMan/myOrder/index.vue

@@ -4,30 +4,42 @@
       <el-tabs type="border-card">
         <el-tab-pane label="项目订单">
           <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">
+            <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 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>
+              <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>
+              <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">{{statusStr[scope.row.status]}}</div>
                 </template>
@@ -35,41 +47,51 @@
             </el-table>
 
             <div class="pagin">
-              <el-pagination
-                background
-                layout="prev, pager, next"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage1"
-                :total="1000"
-              ></el-pagination>
+              <el-pagination background
+                             layout="prev, pager, next"
+                             @size-change="handleSizeChange"
+                             @current-change="handleCurrentChange"
+                             :current-page.sync="currentPage1"
+                             :total="1000"></el-pagination>
             </div>
           </div>
         </el-tab-pane>
         <el-tab-pane label="卡卷订单">
           <div class="user-list">
-            <el-table
-              ref="multipleTable"
-              :data="couponData"
-              tooltip-effect="dark"
-              height="354"
-              style="width: 100%;border-radius: 8px;"
-              @row-click="handleSelectionChange"
-            >
+            <el-table ref="multipleTable"
+                      :data="couponData"
+                      tooltip-effect="dark"
+                      height="354"
+                      style="width: 100%;border-radius: 8px;"
+                      @row-click="handleSelectionChange">
 
-<!-- create_time: "2022-03-10 10:39:19"
+              <!-- 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>
+              <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">{{statusStr[scope.row.status]}}</div>
                 </template>
@@ -77,50 +99,58 @@ type: "全额券" -->
             </el-table>
 
             <div class="pagin">
-              <el-pagination
-                background
-                layout="prev, pager, next"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage1"
-                :total="1000"
-              ></el-pagination>
+              <el-pagination background
+                             layout="prev, pager, next"
+                             @size-change="handleSizeChange"
+                             @current-change="handleCurrentChange"
+                             :current-page.sync="currentPage1"
+                             :total="1000"></el-pagination>
             </div>
           </div>
         </el-tab-pane>
 
         <el-tab-pane label="商品订单">
           <div class="user-list">
-            <el-table
-              ref="multipleTable"
-              :data="goodData"
-              tooltip-effect="dark"
-              height="354"
-              style="width: 100%;border-radius: 8px;"
-              @row-click="handleSelectionChange"
-            >
+            <el-table ref="multipleTable"
+                      :data="goodData"
+                      tooltip-effect="dark"
+                      height="354"
+                      style="width: 100%;border-radius: 8px;"
+                      @row-click="handleSelectionChange">
 
-<!-- create_time: "2022-03-19 22:53:40"
+              <!-- 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">
+              <el-table-column prop="goods"
+                               label="商品名称"
+                               width="200">
                 <template slot-scope="scope">
-                  <div v-for="(val,index) in scope.row.goods" :key="index">
+                  <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>
+              <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>
+              <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">{{statusStr[scope.row.status]}}</div>
                 </template>
@@ -128,14 +158,12 @@ status: 5 -->
             </el-table>
 
             <div class="pagin">
-              <el-pagination
-                background
-                layout="prev, pager, next"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page.sync="currentPage1"
-                :total="1000"
-              ></el-pagination>
+              <el-pagination background
+                             layout="prev, pager, next"
+                             @size-change="handleSizeChange"
+                             @current-change="handleCurrentChange"
+                             :current-page.sync="currentPage1"
+                             :total="1000"></el-pagination>
             </div>
           </div>
         </el-tab-pane>
@@ -148,7 +176,7 @@ status: 5 -->
 import api from "../../../server/home";
 
 export default {
-  data() {
+  data () {
     return {
       couponList: [
         {
@@ -205,7 +233,7 @@ export default {
 
   methods: {
     // 获取优惠券订单
-    getUserCoupon() {
+    getUserCoupon () {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
@@ -218,7 +246,7 @@ export default {
     },
 
     // 获取商品订单
-    getUserGoods() {
+    getUserGoods () {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
@@ -231,7 +259,7 @@ export default {
     },
 
     // 获取获取项目订单
-    getUserProject() {
+    getUserProject () {
       let params = {
         page: this.currentPage1,
         limit: this.limit,
@@ -243,18 +271,16 @@ export default {
       });
     },
 
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+    handleSizeChange (val) {
     },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+    handleCurrentChange (val) {
     },
-    handleSelectionChange(row, column, event) {},
-    onSubmit() {},
-    submitFrequency() {}
+    handleSelectionChange (row, column, event) { },
+    onSubmit () { },
+    submitFrequency () { }
   },
 
-  created() {
+  created () {
     let id = this.$route.query.id;
     this.id = id;
     this.getUserCoupon();
@@ -262,7 +288,7 @@ export default {
     this.getUserProject();
   },
 
-  mounted() {}
+  mounted () { }
 };
 </script>
 

src/pages/historicalOrder/index.vue

@@ -1,48 +1,65 @@
 <template>
   <div class="mine">
     <div class="condition">
-      <el-date-picker
-        v-model="dates"
-        type="daterange"
-        range-separator="->"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-      ></el-date-picker>
+      <el-date-picker v-model="dates"
+                      type="daterange"
+                      range-separator="->"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"></el-date-picker>
 
-      <el-input placeholder="请输入项目" class="search" v-model="product">
-        <i slot="prefix" class="el-input__icon el-icon-search"></i>
+      <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 placeholder="请输入优惠券"
+                class="search"
+                v-model="coupon">
+        <i slot="prefix"
+           class="el-input__icon el-icon-search"></i>
       </el-input>
 
-      <el-input placeholder="请输入内容" class="search" v-model="searchText">
-        <i slot="prefix" class="el-input__icon el-icon-search"></i>
+      <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="getOrderList()">搜索</el-button>
+      <el-button type="primary"
+                 class="searchButton"
+                 @click="getOrderList()">搜索</el-button>
     </div>
 
     <div class="user-list">
-      <el-table
-        ref="multipleTable"
-        :data="tableData"
-        tooltip-effect="dark"
-        height="354"
-        style="width: 100%;border-radius: 8px;"
-        @row-click="handleSelectionChange"
-      >
-        <el-table-column label="头像" width="120">
+      <el-table ref="multipleTable"
+                :data="tableData"
+                tooltip-effect="dark"
+                height="354"
+                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 />
+              <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="mobile" label="联系电话" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="order_time" label="预约时间" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="date" label="状态" show-overflow-tooltip>
+        <el-table-column prop="nickname"
+                         label="昵称"
+                         width="120"></el-table-column>
+        <el-table-column prop="mobile"
+                         label="联系电话"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="order_time"
+                         label="预约时间"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="date"
+                         label="状态"
+                         show-overflow-tooltip>
           <template slot-scope="scope">
             <div :class="'color'+scope.row.status">{{statusStr[scope.row.status]}}</div>
           </template>
@@ -50,14 +67,12 @@
       </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>
+        <el-pagination background
+                       layout="prev, pager, next"
+                       @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       :current-page.sync="currentPage1"
+                       :total="total"></el-pagination>
       </div>
     </div>
   </div>
@@ -68,15 +83,15 @@ import api from "../../server/home";
 
 export default {
   components: {},
-  data() {
+  data () {
     return {
       searchText: "",
       dates: "",
       coupon: "",
       limit: 10,
       total: 0,
-      product:"",
-      coupon:"",
+      product: "",
+      coupon: "",
       statusStr: [
         "已预约",
         "未支付",
@@ -123,21 +138,19 @@ export default {
 
   methods: {
     // 获取订单列表
-    getOrderList() {
-      console.log("xxxxxxx");
+    getOrderList () {
       let start_date = "",
         end_date = "";
       if (this.dates && this.dates.length > 0) {
         start_date = utils.formatTime(this.dates[0], "yyyy-MM-dd");
         end_date = utils.formatTime(this.dates[1], "yyyy-MM-dd");
       }
-      console.log(start_date, end_date, "end_date");
       let params = {
         page: this.currentPage1,
         limit: this.limit,
         keywords: this.searchText,
-        project_name:this.product,
-        coupon_name:this.coupon,
+        project_name: this.product,
+        coupon_name: this.coupon,
         start_date: start_date,
         end_date: end_date
       };
@@ -148,17 +161,15 @@ export default {
         }
       });
     },
-    
-    handleCurrentChange(e) {
+
+    handleCurrentChange (e) {
       this.currentPage1 = e;
       this.getOrderList();
-      console.log(e, "eeeeee");
     },
 
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+    handleSizeChange (val) {
     },
-    handleSelectionChange(row, column, event) {
+    handleSelectionChange (row, column, event) {
       this.$router.push({
         path: "/historicalOrder/details",
         query: {
@@ -168,11 +179,11 @@ export default {
     }
   },
 
-  created() {
+  created () {
     this.getOrderList();
   },
 
-  mounted() {}
+  mounted () { }
 };
 </script>
 
@@ -242,7 +253,7 @@ export default {
     color: #00eeee;
   }
   .color3 {
-    color: #61D09D;
+    color: #61d09d;
   }
   .color4 {
     color: #3115cc;
@@ -251,7 +262,7 @@ export default {
     color: #fc3019;
   }
   .color6 {
-    color: #A999EA;
+    color: #a999ea;
   }
 }
 </style>

src/pages/home/index.vue

@@ -15,44 +15,51 @@
     </div>
     <div class="order-list">
       <div class="title">预约订单列表</div>
-      <div v-if="orderList.length>0"
-           class="list-info">
-        <div class="user-info"
-             v-for="(item,index) in orderList"
-             :key="index"
-             @click="toOrderDetails(item)"
-             :style="index==orderList.length-1?'border-bottom:0px':''">
-          <div class="head-img">
-            <div class="new">新</div><img :src="item.avatar_url"
-                 alt="">
-          </div>
-          <div class="user-information">
-            <div class="name">客户昵称：<span>{{ item.nickname }}</span></div>
-            <div class="name">预约项目时间：<span>{{ item.order_time }}</span></div>
-            <div class="name">预约项目数量：<span>{{ item.project_num }}</span></div>
-          </div>
-          <ul class="product-list">
-            <li class="product-image"
-                v-for="value,i in item.project_list"
-                :key="i"><img :src="value.cover_url"
-                   alt=""></li>
-          </ul>
-          <div class="status"
-               :style="item.status==0?'color: #FC3019':item.status==5?'color: #A999EA':'color: #61D09D;'">
-            {{ item.status==0?'未支付':item.status==5?'已取消':'待使用' }}
+      <div class="list-info">
+        <van-list v-model="loading"
+                  :finished="finished"
+                  finished-text="没有更多了"
+                  @load=" getToday ">
+
+          <div class="user-info"
+               v-for="(item,index) in orderList"
+               :key="index"
+               @click="toOrderDetails(item)"
+               :style="index==orderList.length-1?'border-bottom:0px':''">
+            <div class="head-img">
+              <div class="new">新</div><img :src="item.avatar_url"
+                   alt="">
+            </div>
+            <div class="user-information">
+              <div class="name">客户昵称：<span>{{ item.nickname }}</span></div>
+              <div class="name">预约项目时间：<span>{{ item.order_time }}</span></div>
+              <div class="name">预约项目数量：<span>{{ item.project_num }}</span></div>
+            </div>
+            <ul class="product-list">
+              <li class="product-image"
+                  v-for="value,i in item.project_list"
+                  :key="i"><img :src="value.cover_url"
+                     alt=""></li>
+            </ul>
+            <div class="status"
+                 :style="item.status==0?'color: #FC3019':item.status==5?'color: #A999EA':'color: #61D09D;'">
+              {{ item.status==0?'未支付':item.status==5?'已取消':'待使用' }}
+            </div>
           </div>
-        </div>
+        </van-list>
       </div>
-      <div v-else
+      <!-- <div v-else
            class="empty">
         暂无数据
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script>
 import api from '@/server/home'
+import vanList from 'vant/lib/list';
+import 'vant/lib/list/style';
 
 export default {
   name: 'home',
@@ -77,16 +84,20 @@ export default {
       ],
       orderList: [
       ],
+      loading: false,
+      finished: false,
+      page: 1,
+      limit: 10
 
     }
   },
+  components: { vanList },
   mounted: function () {
 
   },
   created: function () {
     this.getTotal()
-    this.getToday()
-    console.log(this.$store.state.comVal.token, 'this.$store.state.comVal.token');
+    // this.getToday()
   },
   methods: {
     getTotal () {
@@ -96,19 +107,24 @@ export default {
           this.tabList[1].num = res.data.wait_pay_num
           this.tabList[2].num = res.data.cancel_num
         }
-        console.log(res, 'res====');
       })
     },
     getToday () {
-      api.getToday().then(res => {
-        if (res.code = 200) {
-          this.orderList = res.data.list
-        }
-        console.log(res, 'res');
-      })
+      setTimeout(() => {
+        api.getToday({ page: this.page, limit: this.limit }).then(res => {
+          if (res.code = 200) {
+            this.orderList = [...this.orderList, ...res.data.list]
+            this.page++
+            this.loading = false;
+            if (this.orderList.length >= res.data.total) {
+              this.finished = true;
+            }
+          }
+        })
+      }, 1000);
+
     },
     toOrderDetails (e) {
-      console.log(e);
       if (e.status != 0) return
       this.$router.push({
         path: '/confirmOrder/details',
@@ -231,7 +247,6 @@ export default {
         .user-information {
           margin-left: 16px;
           text-align: left;
-          min-width: 260px;
           font-size: 14px;
           font-family: SourceHanSansCN-Regular, SourceHanSansCN;
           font-weight: 400;

src/pages/login/login.vue

@@ -53,7 +53,6 @@ export default {
       api.getToken(params).then(res => {
         if (res.code == 200) {
           this.$store.state.comVal.token = res.data.token
-          console.log(this.$store.state.comVal.token, 'this.$store.');
           localStorage.setItem("token", res.data.token)
           this.$router.push({
             path: '/home'

src/pages/testSkin/index.vue

@@ -76,7 +76,6 @@ export default {
         start_date = utils.formatTime(this.dates[0], 'yyyy-MM-dd')
         end_date = utils.formatTime(this.dates[1], 'yyyy-MM-dd')
       }
-      console.log(start_date, end_date, 'end_date');
       let params = {
         page: this.currentPage1,
         limit: this.limit,
@@ -102,7 +101,6 @@ export default {
     handleCurrentChange (e) {
       this.currentPage1 = e
       this.getSkinList
-      console.log(e, 'eeeeee');
     }
   },
 

src/server/home.js

@@ -60,6 +60,12 @@ export default class Home {
   static getOrderByCode (parms) {
     return $http.get(url.getOrderByCode, parms);
   }
+  static orderPay (parms) {
+    return $http.post(url.orderPay, parms);
+  }
+  static payStatus (parms) {
+    return $http.get(url.payStatus, parms);
+  }
 
   // 获取历史订单
   static getOrderList (parms) {
@@ -95,7 +101,7 @@ export default class Home {
   static getPadUserInfo (parms) {
     return $http.get(url.getPadUserInfo, parms);
   }
-  
+
   // 获取优惠券订单
   static getUserCoupon (parms) {
     return $http.get(url.getUserCoupon, parms);

src/server/urls.js

@@ -33,6 +33,10 @@ export default {
   checkCode: '/v2/pad/order/check_code',
   //通过授权码获取未支付订单
   getOrderByCode: '/v2/pad/order/get_order_by_code',
+  //支付
+  orderPay: '/v2/pad/order/pay',
+  //支付状态
+  payStatus: '/v2/pad/order/pay_status',
 
   /**
    *  by ListKer