feat: 发券历史订单客户管理

src/pages/coupon/index.vue

@@ -1,179 +1,152 @@
 <template>
   <div class="mine">
     <div class="table">
-      <el-input class="search-input"
-                placeholder="请输入内容"
-                prefix-icon="el-icon-search"
-                size="mini"
-                v-model="searckItem">
-      </el-input>
+      <el-input
+        class="search-input"
+        placeholder="请输入内容"
+        prefix-icon="el-icon-search"
+        size="mini"
+        v-model="searckItem"
+      ></el-input>
       <div class="search-button">搜索</div>
       <div class="coupon">选择优惠券</div>
-      <el-select class="coupon-select"
-                 v-model="coupon"
-                 size="mini"
-                 placeholder="选择优惠券">
-        <el-option v-for="item in couponList"
-                   :key="item.value"
-                   :label="item.label"
-                   :value="item.value">
-        </el-option>
+      <el-select class="coupon-select" v-model="coupon" size="mini" placeholder="选择优惠券">
+        <el-option v-for="item in couponList" :key="item.id" :label="item.name" :value="item.id"></el-option>
       </el-select>
       <div class="num-tips">数量</div>
       <div class="coupon-num">
-        <div class="reduce"
-             @click="reduceNum">-</div>
+        <div class="reduce" @click="reduceNum">-</div>
         <div class="num">{{couponNum}}</div>
-        <div class="add"
-             @click="couponNum++">+</div>
+        <div class="add" @click="couponNum++">+</div>
       </div>
-      <div class="send-coupon"
-           style="margin-left: 39px;"
-           @click="sendCoupon">发送</div>
+      <div class="send-coupon" style="margin-left: 39px;" @click="sendCoupon">发送</div>
     </div>
     <div class="user-list">
-      <el-table ref="multipleTable"
-                :data="tableData"
-                tooltip-effect="dark"
-                height="454"
-                style="width: 100%;border-radius: 8px;"
-                @selection-change="handleSelectionChange">
-        <el-table-column type="selection"
-                         width="55">
-        </el-table-column>
-        <el-table-column label="头像"
-                         width="120">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        height="354"
+        style="width: 100%;border-radius: 8px;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column label="头像" width="120">
           <template slot-scope="scope">
-            <div class="head-img"><img :src="scope.row.headImg"
-                   alt=""></div>
+            <div class="head-img">
+              <img :src="scope.row.avatar_url" alt />
+            </div>
           </template>
         </el-table-column>
-        <el-table-column prop="name"
-                         label="姓名"
-                         width="120">
-        </el-table-column>
-        <el-table-column prop="phone"
-                         label="联系电话"
-                         show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column prop="date"
-                         label="注册时间"
-                         show-overflow-tooltip>
-        </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="create_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";
+
 export default {
   components: {},
-  data () {
+  data() {
     return {
-      searckItem: '',
-      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'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      }, {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645'
-      },
-      ],
-      multipleSelection: [],//选中的列表
-      coupon: '',
-      couponNum: 1,//优惠券数量
+      searckItem: "",
+      couponList: [],
+      tableData: [],
+      multipleSelection: [], //选中的列表
+      coupon: "",
+      couponNum: 1, //优惠券数量
+      currentPage1: 1
     };
   },
   computed: {},
   watch: {},
 
   methods: {
-    reduceNum () {
-      this.couponNum > 1 ? this.couponNum-- : this.couponNum = 1
+    reduceNum() {
+      this.couponNum > 1 ? this.couponNum-- : (this.couponNum = 1);
     },
-    handleSelectionChange (val) {
+    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;
+      }
+      let params = {
+        id: this.coupon,
+        user_ids: selectIds.substring(1,selectIds.length),
+        num: this.couponNum
+      };
+      api.sendCoupon(params).then(res => {});
+    },
+
+    // 获取订单列表
+    getUserList() {
+      console.log("xxxxxxx");
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        keywords: this.searchText
+      };
+      api.getUserList(params).then(res => {
+        if (res.code == 200) {
+          this.tableData = res.data.list;
+          this.total = res.data.total;
+        }
+      });
     },
-    sendCoupon () { },
-  },
 
-  created () {
+    // 获取优惠券列表
+    getCouponInfo() {
+      console.log("xxxxxxx");
+      let params = {
+        page: this.currentPage1,
+        limit: 100
+      };
+      api.getCouponInfo(params).then(res => {
+        if (res.code == 200) {
+          this.couponList = res.data.list;
+        }
+      });
+    },
 
-  },
+    handleCurrentChange(e) {
+      this.currentPage1 = e;
+      this.getUserList();
+      console.log(e, "eeeeee");
+    },
 
-  mounted () {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    }
+  },
 
+  created() {
+    this.getUserList();
+    this.getCouponInfo();
   },
-}
 
+  mounted() {}
+};
 </script>
 
 <style lang='less' scoped>
@@ -252,6 +225,12 @@ export default {
         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;

src/pages/customerMan/details/index.vue

@@ -2,235 +2,303 @@
   <div class="mine">
     <div class="left">
       <div class="user-info">
-        <div class="user-img"><img :src="userInfo.image"
-               alt=""></div>
+        <div class="user-img">
+          <img :src="userInfo.image" alt />
+        </div>
         <div class="user-span">
-          <div class="name">昵称：<span>{{userInfo.name}}</span></div>
-          <div class="sex">性别：<span>{{userInfo.sex}}</span></div>
-          <div class="age">肤龄：<span>{{userInfo.age}}</span></div>
-          <div class="skin-type">肤质：<span>{{userInfo.skinType}}</span></div>
+          <div class="name">
+            昵称：
+            <span>{{userInfo.name}}</span>
+          </div>
+          <div class="sex">
+            性别：
+            <span>{{userInfo.sex}}</span>
+          </div>
+          <div class="age">
+            肤龄：
+            <span>{{userInfo.age}}</span>
+          </div>
+          <div class="skin-type">
+            肤质：
+            <span>{{userInfo.skinType}}</span>
+          </div>
         </div>
-        
       </div>
       <div class="personage-data">
-           <div class="myDataList">肌肤得分：<span class="bigSixe">56分</span></div>
-          <div class="myDataList">皮肤状态：<span>肤质一般</span></div>
-          <div class="myDataList">上传检测时间：<span>2022.0418 16:04</span></div>
-          <div class="myDataList">出生日期：<span>2000.02.29</span></div>
-          <div class="myDataList">联系电话：<span>13334597987</span></div>
-
-          <div class="myDataList">所在地：<span>广东省，深圳市，南山区</span></div>
-
-          <div class="myDataList">开卡店铺：<span>JOLIJOLI(西安店)</span></div>
+        <div class="myDataList">
+          肌肤得分：
+          <span class="bigSixe">56分</span>
+        </div>
+        <div class="myDataList">
+          皮肤状态：
+          <span>肤质一般</span>
+        </div>
+        <div class="myDataList">
+          上传检测时间：
+          <span>2022.0418 16:04</span>
+        </div>
+        <div class="myDataList">
+          出生日期：
+          <span>2000.02.29</span>
+        </div>
+        <div class="myDataList">
+          联系电话：
+          <span>13334597987</span>
+        </div>
 
-          <div class="myDataList">卡卷数量：<span>5</span></div>
+        <div class="myDataList">
+          所在地：
+          <span>广东省，深圳市，南山区</span>
+        </div>
 
-          <div class="myDataList">储值金额：<span class="JEcolor">￥<span class="bigSixe">500</span>.00</span></div>
-          <div class="myDataList">积分：<span>200</span></div>
+        <div class="myDataList">
+          开卡店铺：
+          <span>JOLIJOLI(西安店)</span>
+        </div>
 
+        <div class="myDataList">
+          卡卷数量：
+          <span>5</span>
+        </div>
 
+        <div class="myDataList">
+          储值金额：
+          <span class="JEcolor">
+            ￥
+            <span class="bigSixe">500</span>.00
+          </span>
+        </div>
+        <div class="myDataList">
+          积分：
+          <span>200</span>
+        </div>
       </div>
     </div>
-    <div class="right"> 
-       <div class="right-top">
-            <div class="right-top-data">
-                <div class="lable">
-                    <div class="lable-title">
-                        面诊标签
-                    </div>
-                    <div class="lable-list">
-                        <div v-for="(item,index) in lableList"
-                            :key="index"
-                            class='lable-info'>
-                        {{item.text}}
-                        </div>
-                    </div>
+    <div class="right">
+      <div class="right-top">
+        <div class="right-top-data">
+          <div class="lable">
+            <div class="lable-title">面诊标签</div>
+            <div class="lable-list">
+              <div v-for="(item,index) in lableList" :key="index" class="lable-info">{{item.text}}</div>
+            </div>
+          </div>
+          <div class="ps">
+            <div class="ps-title">备注</div>
+            <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
+          </div>
+        </div>
+        <div class="right-top-list" @click="toOrder(1)">
+          <div class="dataList">
+            <img :src="userInfo.image" />
+            <p>项目订单</p>
+            <span>19</span>
+          </div>
+          <div class="dataList" style="margin:18px 0px">
+            <img :src="userInfo.image" />
+            <p>项目订单</p>
+            <span>19</span>
+          </div>
+          <div class="dataList">
+            <img :src="userInfo.image" />
+            <p>项目订单</p>
+            <span>19</span>
+          </div>
+        </div>
+      </div>
+      <div class="right-bottom">
+        <div class="programme">
+          <div class="tab">
+            <div class="tab-title">执行方案</div>
+          </div>
+          <div class="programme-list">
+            <div
+              :class="['programme-info',item.onSelect?'programme-active':'']"
+              v-for="(item,index) in programmeList"
+              :key="index"
+              @click="onOperation(index)"
+            >
+              <div class="programme-left">
+                <div class="programme-img">
+                  <img
+                    src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
+                    alt
+                  />
                 </div>
-                <div class="ps">
-                    <div class="ps-title">
-                        备注
-                    </div>
-                    <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
-                    </div>
-            </div>  
-            <div class="right-top-list" @click="toOrder(1)">
-                <div class="dataList">
-                    <img :src="userInfo.image">
-                    <p>项目订单</p>
-                    <span>19</span>
+                <div class="programme-tips">
+                  <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
+                  <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
+                  <div class="tips-title">
+                    仪器：
+                    <span>{{'无创水光'|ellipsis(9)}}</span>
+                  </div>
                 </div>
-                <div class="dataList" style="margin:18px 0px">
-                     <img :src="userInfo.image">
-                    <p>项目订单</p>
-                    <span>19</span>
+              </div>
+              <div class="programme-right">
+                <div class="frequency">
+                  执行频率：
+                  <span>一周一次</span>
                 </div>
-                <div class="dataList">
-                     <img :src="userInfo.image">
-                    <p>项目订单</p>
-                    <span>19</span>
+                <div class="duration">
+                  持续时长：
+                  <span>28天</span>
                 </div>
-            </div>
-       </div>
-       <div class="right-bottom">
-           <div class="programme">
-        <div class="tab">
-          <div class="tab-title">执行方案</div>
-        </div>
-        <div class="programme-list">
-          <div :class="['programme-info',item.onSelect?'programme-active':'']"
-               v-for="(item,index) in programmeList"
-               :key="index"
-               @click="onOperation(index)">
-            <div class="programme-left">
-              <div class="programme-img"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
-                     alt=""></div>
-              <div class="programme-tips">
-                <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
-                <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
-                <div class="tips-title">仪器：<span>{{'无创水光'|ellipsis(9)}}</span></div>
               </div>
-            </div>
-            <div class="programme-right">
-              <div class="frequency">执行频率：<span>一周一次</span></div>
-              <div class="duration">持续时长：<span>28天</span></div>
-            </div>
-            <div class="operation"
-                 v-if="item.onSelect">
-              <div class="edit">编辑</div>
-              <div class="delete">删除</div>
+              <div class="operation" v-if="item.onSelect">
+                <div class="edit">编辑</div>
+                <div class="delete">删除</div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-       </div>
     </div>
-      
   </div>
 </template>
 
 <script>
+import api from "../../../server/home";
 
 export default {
-  data () {
+  data() {
     return {
       userInfo: {
-        image: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
-        name: '张三',
-        sex: '女',
-        age: '23',
-        skinType: '中性皮肤'
+        image:
+          "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
+        name: "张三",
+        sex: "女",
+        age: "23",
+        skinType: "中性皮肤"
       },
       //面部标签
       lableList: [
         {
-          text: '对话框的',
+          text: "对话框的",
           disabled: false
         },
         {
-          text: '对话框的',
+          text: "对话框的",
           disabled: true
         },
         {
-          text: '对话框的',
+          text: "对话框的",
           disabled: false
         },
         {
-          text: '对话框的',
+          text: "对话框的",
           disabled: false
         },
         {
-          text: '对话框的',
+          text: "对话框的",
           disabled: false
-        },
-       
+        }
       ],
       //执行方案
       programmeList: [
         {
-          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
-          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
-          tips: '+润百颜精华',
-          zoom: '皮肤综合仪（30号房）',
-          ts: '30分钟',
-          price: '79.00'
+          image:
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
+          title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
+          tips: "+润百颜精华",
+          zoom: "皮肤综合仪（30号房）",
+          ts: "30分钟",
+          price: "79.00"
         },
         {
-          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
-          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
-          tips: '+润百颜精华',
-          zoom: '皮肤综合仪（30号房）',
-          ts: '30分钟',
-          price: '79.00'
+          image:
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
+          title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
+          tips: "+润百颜精华",
+          zoom: "皮肤综合仪（30号房）",
+          ts: "30分钟",
+          price: "79.00"
         },
         {
-          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
-          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
-          tips: '+润百颜精华',
-          zoom: '皮肤综合仪（30号房）',
-          ts: '30分钟',
-          price: '79.00'
-        },
+          image:
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
+          title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
+          tips: "+润百颜精华",
+          zoom: "皮肤综合仪（30号房）",
+          ts: "30分钟",
+          price: "79.00"
+        }
       ],
       //项目列表
-      projectList: [{
-        value: '选项1',
-        label: '黄金糕'
-      }, {
-        value: '选项2',
-        label: '双皮奶'
-      }, {
-        value: '选项3',
-        label: '蚵仔煎'
-      }, {
-        value: '选项4',
-        label: '龙须面'
-      }, {
-        value: '选项5',
-        label: '北京烤鸭'
-      }],
-      timesInfo: '',
-      projectInfo: '',
-      weekInfo: '',
-      programmeIndex: '',
-      remarks: '',
+      projectList: [
+        {
+          value: "选项1",
+          label: "黄金糕"
+        },
+        {
+          value: "选项2",
+          label: "双皮奶"
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎"
+        },
+        {
+          value: "选项4",
+          label: "龙须面"
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭"
+        }
+      ],
+      timesInfo: "",
+      projectInfo: "",
+      weekInfo: "",
+      programmeIndex: "",
+      remarks: "",
       isPupop: false
     };
   },
-  computed: {
-
-  },
+  computed: {},
   watch: {},
 
   methods: {
-    onOperation (index) {
+    getUserInfo() {
+      api.getUserInfo({ code: this.id }).then(res => {
+        this.userInfo = res.data.user;
+        this.order_data = res.data.order_data;
+        this.lableList = res.data.tags;
+        this.programmeList = res.data.order_data.project_list;
+        this.coupon_list = res.data.order_data.coupon_list;
+        this.remarks = res.data.remark;
+      });
+    },
+
+    onOperation(index) {
       if (this.programmeList[index].onSelect) {
-        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
+        this.$set(
+          this.programmeList[index],
+          "onSelect",
+          !this.programmeList[index].onSelect
+        );
       } else {
-        this.$set(this.programmeList[index], 'onSelect', true)
+        this.$set(this.programmeList[index], "onSelect", true);
       }
     },
-    toOrder(index){
-        if(index === 1){
-           this.$router.push({
-            path: '/customerMan/projectOrder'
-            })
-        }
-    },
-    onSubmit () {
-
+    toOrder(index) {
+      if (index === 1) {
+        this.$router.push({
+          path: "/customerMan/projectOrder"
+        });
+      }
     },
-    submitFrequency () { },
-  },
-
-  created () {
-
+    onSubmit() {},
+    submitFrequency() {}
   },
 
-  mounted () {
-
+  created() {
+    let id = this.$route.query.id;
+    this.id = id;
+    this.getUserInfo();
   },
-}
 
+  mounted() {}
+};
 </script>
 
 <style lang='less' scoped>
@@ -262,14 +330,14 @@ export default {
       }
       .user-span {
         margin-left: 12px;
-        .sex{
-            margin-top: 8px;
+        .sex {
+          margin-top: 8px;
         }
-         .age{
-            margin-top: 8px;
+        .age {
+          margin-top: 8px;
         }
-         .skin-type{
-            margin-top: 8px;
+        .skin-type {
+          margin-top: 8px;
         }
 
         span {
@@ -277,232 +345,229 @@ export default {
         }
       }
     }
-    .personage-data{
-        margin-top: 30px;
-        .myDataList{
-          margin-top: 15px;
-          .bigSixe{
-              font-size: 18px;
-              color: #FA7D22;
-          }
-          span{
-             color: #333333;
-          }
-          .JEcolor{
-              color: #FA7D22;
-          }
+    .personage-data {
+      margin-top: 30px;
+      .myDataList {
+        margin-top: 15px;
+        .bigSixe {
+          font-size: 18px;
+          color: #fa7d22;
+        }
+        span {
+          color: #333333;
         }
+        .JEcolor {
+          color: #fa7d22;
+        }
+      }
     }
-  }  
- 
+  }
+
   .right {
     margin-left: 18px;
     position: relative;
     flex: 1;
-    .right-top{
-        height: 205px;
-        // border: 1px solid red;
+    .right-top {
+      height: 205px;
+      // border: 1px solid red;
+      display: flex;
+      .right-top-list {
+        width: 239ppx;
+        margin-left: 18px;
         display: flex;
-        .right-top-list{
-            width: 239ppx;
-            margin-left: 18px;
-            display: flex;
-            flex-direction: column;
-            .dataList{
-                height: 56px;
-                // width: 239ppx;
-                background: #ffffff;
-                box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
-                border-radius: 8px;
-                padding: 16px 12px 12px 12px;
-                display: flex;
-                align-items: center;
-                img{
-                    width: 33px;
-                    height: 33px;
-                }
-                p{
-                    font-size: 14px;
-                    margin-left:14px;
-                    margin-right: 80px;
-                }
-                span{
-                    font-size: 16px;
-                    margin-right: 20px;
-                }
-            }
-
+        flex-direction: column;
+        .dataList {
+          height: 56px;
+          // width: 239ppx;
+          background: #ffffff;
+          box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+          border-radius: 8px;
+          padding: 16px 12px 12px 12px;
+          display: flex;
+          align-items: center;
+          img {
+            width: 33px;
+            height: 33px;
+          }
+          p {
+            font-size: 14px;
+            margin-left: 14px;
+            margin-right: 80px;
+          }
+          span {
+            font-size: 16px;
+            margin-right: 20px;
+          }
         }
-        .right-top-data{
-            background: #ffffff;
-            box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
-            border-radius: 8px;
-            padding: 16px 12px 12px 12px;
-            width: 310px;
-            height: 100%;
-            .lable {
-            //   margin-top: 23px;
-                width: 100%;
-                overflow: scroll;
-                background: #ffffff;
-            .lable-title {
+      }
+      .right-top-data {
+        background: #ffffff;
+        box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+        border-radius: 8px;
+        padding: 16px 12px 12px 12px;
+        width: 310px;
+        height: 100%;
+        .lable {
+          //   margin-top: 23px;
+          width: 100%;
+          overflow: scroll;
+          background: #ffffff;
+          .lable-title {
             font-size: 14px;
             font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
             color: #333333;
             line-height: 20px;
             margin-bottom: 14px;
-            }
-            .lable-list {
+          }
+          .lable-list {
             width: 100%;
             min-height: 105rpx;
             .lable-info {
-                display: inline-block;
-                padding: 0 12px;
-                margin-left: 10px;
-                height: 24px;
-                line-height: 24px;
-                border-radius: 2px;
-                border: 1px solid #d6d6d6;
-                margin-bottom: 10px;
+              display: inline-block;
+              padding: 0 12px;
+              margin-left: 10px;
+              height: 24px;
+              line-height: 24px;
+              border-radius: 2px;
+              border: 1px solid #d6d6d6;
+              margin-bottom: 10px;
             }
             .add-lable {
-                display: inline-block;
-                width: 27px;
-                height: 24px;
-                line-height: 24px;
-                font-size: 12px;
-                font-family: PingFang-SC-Regular, PingFang-SC;
-                font-weight: 400;
-                color: #333333;
-                text-align: center;
-                margin-left: 10px;
-                border-radius: 2px;
-                border: 1px solid #d6d6d6;
-            }
+              display: inline-block;
+              width: 27px;
+              height: 24px;
+              line-height: 24px;
+              font-size: 12px;
+              font-family: PingFang-SC-Regular, PingFang-SC;
+              font-weight: 400;
+              color: #333333;
+              text-align: center;
+              margin-left: 10px;
+              border-radius: 2px;
+              border: 1px solid #d6d6d6;
             }
-            .remarks {
+          }
+          .remarks {
             /deep/ .el-textarea__inner:focus {
-                border-color: #fa852f;
-            }
+              border-color: #fa852f;
             }
-    }
-    .ps {
-      font-size: 14px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #333333;
-      line-height: 20px;
-      .ps-text {
-        margin-top: 10px;
-        font-size: 12px;
-        font-weight: 400;
-        color: #666666;
-        line-height: 17px;
-      }
-    }
+          }
         }
-    }
-   .right-bottom{
-      margin-top: 18px;
-      background: #ffffff;
-      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
-      border-radius: 8px;
-      padding: 16px 61px 12px 12px;
-      .programme {
-    //   margin-top: 20px;
-      width: 100%;
-      background: #ffffff;
-      border-radius: 8px;
-        
-      .tab {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .tab-title {
+        .ps {
           font-size: 14px;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
           color: #333333;
           line-height: 20px;
+          .ps-text {
+            margin-top: 10px;
+            font-size: 12px;
+            font-weight: 400;
+            color: #666666;
+            line-height: 17px;
+          }
         }
       }
-      .programme-list {
-        margin-top: 10px;
-        position: relative;
-        z-index: 1;
-        .programme-info {
-          position: relative;
-          margin-bottom: 10px;
-          border-radius: 4px;
-          border: 1px solid #f5f5f5;
+    }
+    .right-bottom {
+      margin-top: 18px;
+      background: #ffffff;
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
+      border-radius: 8px;
+      padding: 16px 61px 12px 12px;
+      .programme {
+        //   margin-top: 20px;
+        width: 100%;
+        background: #ffffff;
+        border-radius: 8px;
+
+        .tab {
           display: flex;
-          justify-content: space-between;
-          padding: 8px 8px 8px 10px;
           align-items: center;
-          .programme-left {
+          justify-content: space-between;
+          .tab-title {
+            font-size: 14px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            line-height: 20px;
+          }
+        }
+        .programme-list {
+          margin-top: 10px;
+          position: relative;
+          z-index: 1;
+          .programme-info {
+            position: relative;
+            margin-bottom: 10px;
+            border-radius: 4px;
+            border: 1px solid #f5f5f5;
             display: flex;
+            justify-content: space-between;
+            padding: 8px 8px 8px 10px;
             align-items: center;
-            .programme-img {
-              width: 48px;
-              display: inline-block;
-              img {
-                width: 100%;
-                display: block;
+            .programme-left {
+              display: flex;
+              align-items: center;
+              .programme-img {
+                width: 48px;
+                display: inline-block;
+                img {
+                  width: 100%;
+                  display: block;
+                }
+              }
+              .programme-tips {
+                display: inline-block;
+                margin-left: 10px;
+                font-size: 10px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #999999;
+                line-height: 14px;
+                zoom: 0.83;
               }
             }
-            .programme-tips {
-              display: inline-block;
-              margin-left: 10px;
-              font-size: 10px;
+            .programme-right {
+              font-size: 12px;
               font-family: PingFangSC-Regular, PingFang SC;
               font-weight: 400;
-              color: #999999;
-              line-height: 14px;
-              zoom: 0.83;
+              color: #333333;
+              line-height: 17px;
+              .duration {
+                margin-top: 14px;
+              }
             }
-          }
-          .programme-right {
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #333333;
-            line-height: 17px;
-            .duration {
-              margin-top: 14px;
+            .operation {
+              position: absolute;
+              left: 50%;
+              transform: translateX(-50%);
+              top: 10px;
+              z-index: 10;
+              width: 44px;
+              background: #ffffff;
+              box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
+                0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+                0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+              border-radius: 2px;
+              padding: 10px;
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #333333;
+              line-height: 17px;
+              .delete {
+                margin-top: 20px;
+              }
             }
           }
-          .operation {
-            position: absolute;
-            left: 50%;
-            transform: translateX(-50%);
-            top: 10px;
-            z-index: 10;
-            width: 44px;
-            background: #ffffff;
-            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
-              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
-              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
-            border-radius: 2px;
-            padding: 10px;
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #333333;
-            line-height: 17px;
-            .delete {
-              margin-top: 20px;
-            }
+          .programme-active {
+            border: 1px solid #fa852f;
           }
         }
-        .programme-active {
-          border: 1px solid #fa852f;
-        }
       }
     }
-   }
-   
-
   }
 }
 </style>

src/pages/customerMan/index.vue

@@ -9,7 +9,7 @@
       </el-input>
       <el-button type="primary"
                  class="searchButton"
-                 @click="search">搜索</el-button>
+                 @click="getUserList()">搜索</el-button>
     </div>
 
     <div class="user-list">
@@ -22,19 +22,19 @@
         <el-table-column label="头像"
                          width="120">
           <template slot-scope="scope">
-            <div class="head-img"><img :src="scope.row.headImg"
+            <div class="head-img"><img :src="scope.row.avatar_url"
                    alt=""></div>
           </template>
         </el-table-column>
-        <el-table-column prop="name"
+        <el-table-column prop="nickname"
                          label="昵称"
                          width="120">
         </el-table-column>
-        <el-table-column prop="phone"
+        <el-table-column prop="mobile"
                          label="联系电话"
                          show-overflow-tooltip>
         </el-table-column>
-        <el-table-column prop="date"
+        <el-table-column prop="create_time"
                          label="注册时间"
                          show-overflow-tooltip>
         </el-table-column>
@@ -46,7 +46,7 @@
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage1"
-                       :total="1000">
+                       :total="total">
         </el-pagination>
       </div>
     </div>
@@ -54,6 +54,7 @@
 </template>
 
 <script>
+import api from "../../server/home";
 export default {
   components: {},
   data () {
@@ -70,22 +71,7 @@ export default {
           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',
-        status: '已完成'
-      },
-      {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645',
-        status: '已完成'
-      },
-
-      ],
+      tableData: [],
       currentPage1: 1,
       multipleSelection: ''
 
@@ -95,24 +81,47 @@ export default {
   watch: {},
 
   methods: {
-    search () { },
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`);
+    
+  // 获取订单列表
+    getUserList() {
+      console.log("xxxxxxx");
+      let params = {
+        page: this.currentPage1,
+        limit: this.limit,
+        keywords: this.searchText,
+      };
+      api.getUserList(params).then(res => {
+        if (res.code == 200) {
+          this.tableData = res.data.list;
+          this.total = res.data.total;
+        }
+      });
     },
-    handleCurrentChange (val) {
-      console.log(`当前页: ${val}`);
+    
+    handleCurrentChange(e) {
+      this.currentPage1 = e;
+      this.getUserList();
+      console.log(e, "eeeeee");
     },
-    handleSelectionChange (row, column, event) {
-      this.$router.push({
-        path: '/customerMan/details'
-      })
+
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
     },
+    handleSelectionChange(row, column, event) {
+      this.$router.push({
+        path: '/customerMan/details',
+        query: {
+          id: row.id
+        }
+      });
+    }
   },
 
-  created () {
-
+  created() {
+    this.getUserList();
   },
 
+
   mounted () {
 
   },

src/pages/historicalOrder/details/index.vue

@@ -2,71 +2,87 @@
   <div class="mine">
     <div class="left">
       <div class="user-info">
-        <div class="user-img"><img :src="userInfo.image"
-               alt=""></div>
+        <div class="user-img">
+          <img :src="userInfo.avatar_url" alt />
+        </div>
         <div class="user-span">
-          <div class="name">昵称：<span>{{userInfo.name}}</span></div>
-          <div class="sex">性别：<span>{{userInfo.sex}}</span></div>
-          <div class="age">肤龄：<span>{{userInfo.age}}</span></div>
-          <div class="skin-type">肤质：<span>{{userInfo.skinType}}</span></div>
+          <div class="name">
+            昵称：
+            <span>{{userInfo.nickname}}</span>
+          </div>
+          <div class="sex">
+            性别：
+            <span>{{userInfo.sex==1?'男':'女'}}</span>
+          </div>
+          <div class="age">
+            肤龄：
+            <span>{{userInfo.age}}</span>
+          </div>
+          <div class="skin-type">
+            肤质：
+            <span>{{userInfo.skin}}</span>
+          </div>
         </div>
       </div>
       <div class="user-record">
         <div class="fraction">
           <div class="title">肌肤得分</div>
-          <div class="num">37分</div>
+          <div class="num">{{userInfo.score}}分</div>
         </div>
         <div class="status">
           <div class="title">皮肤状态</div>
-          <div class="tips">肤质一般</div>
+          <div class="tips">{{userInfo.skin_status}}</div>
         </div>
         <div class="times">
           <div class="title">上传检测时间</div>
-          <div class="ts">2022.04.18 16:04</div>
+          <div class="ts">{{userInfo.check_time}}</div>
         </div>
       </div>
       <div class="lable">
-        <div class="lable-title">
-          面诊标签
-        </div>
+        <div class="lable-title">面诊标签</div>
         <div class="lable-list">
-          <div v-for="(item,index) in lableList"
-               :key="index"
-               class='lable-info'>
-            {{item.text}}
-          </div>
+          <div v-for="(item,index) in lableList" :key="index" class="lable-info">{{item.text}}</div>
         </div>
       </div>
       <div class="ps">
-        <div class="ps-title">
-          备注
-        </div>
-        <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
+        <div class="ps-title">备注</div>
+        <div class="ps-text">{{remarks | ellipsis(20)}}</div>
       </div>
       <div class="programme">
         <div class="tab">
           <div class="tab-title">执行方案</div>
         </div>
         <div class="programme-list">
-          <div :class="['programme-info',item.onSelect?'programme-active':'']"
-               v-for="(item,index) in programmeList"
-               :key="index"
-               @click="onOperation(index)">
+          <div
+            :class="['programme-info',item.onSelect?'programme-active':'']"
+            v-for="(item,index) in scheme_list"
+            :key="index"
+            @click="onOperation(index)"
+          >
             <div class="programme-left">
-              <div class="programme-img"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
-                     alt=""></div>
+              <div class="programme-img">
+                <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png" alt />
+              </div>
               <div class="programme-tips">
                 <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
                 <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
-                <div class="tips-title">仪器：<span>{{'无创水光'|ellipsis(9)}}</span></div>
+                <div class="tips-title">
+                  仪器：
+                  <span>{{'无创水光'|ellipsis(9)}}</span>
+                </div>
               </div>
             </div>
             <div class="programme-right">
-              <div class="frequency">执行频率：<span>{{item.frequency}}</span></div>
-              <div class="duration">持续时长：<span>{{item.duration}}</span></div>
+              <div class="frequency">
+                执行频率：
+                <span>{{item.frequency}}</span>
+              </div>
+              <div class="duration">
+                持续时长：
+                <span>{{item.duration}}</span>
+              </div>
             </div>
-            <div class="operation"
-                 v-if="item.onSelect">
+            <div class="operation" v-if="item.onSelect">
               <div class="edit">编辑</div>
               <div class="delete">删除</div>
             </div>
@@ -76,26 +92,39 @@
     </div>
     <div class="right">
       <div class="shop-info">
-        <div class="shpo-name">预约店铺：<span>JOLIJOLI（西安店）</span></div>
-        <div class="shpo-address">门店地址：<span>JOLIJOLI（西安店）</span></div>
-        <div class="shpo-ts">美容时间：<span>JOLIJOLI（西安店）</span></div>
+        <div class="shpo-name">
+          预约店铺：
+          <span>{{order_data.store_name}}</span>
+        </div>
+        <div class="shpo-address">
+          门店地址：
+          <span>{{order_data.address}}</span>
+        </div>
+        <div class="shpo-ts">
+          美容时间：
+          <span>{{order_data.order_time}}</span>
+        </div>
       </div>
       <div class="project">
         <div class="project-title">
-          共<span>3个</span>项目
+          共
+          <span>{{order_data.project_num}}个</span>项目
         </div>
         <div class="project-list">
-          <div class="project-info"
-               v-for="(item,index) in programmeList"
-               :key="index">
-            <div class="project-image"><img :src="item.image"></div>
+          <div class="project-info" v-for="(item,index) in programmeList" :key="index">
+            <div class="project-image">
+              <img :src="item.cover_url" />
+            </div>
             <div class="project-content">
               <div class="title-price">
-                <div class="project-tit">{{item.title | ellipsis(14)}}</div>
-                <div class="project-price"><span class="min-size">￥</span>{{item.price}}</div>
+                <div class="project-tit">{{item.name | ellipsis(14)}}</div>
+                <div class="project-price">
+                  <span class="min-size">￥</span>
+                  {{item.price}}
+                </div>
               </div>
-              <div class="project-tips">{{item.tips}}</div>
-              <div class="project-zoom">{{item.zoom}}{{item.ts}}</div>
+              <div class="project-tips">{{item.product_names}}</div>
+              <div class="project-zoom">{{item.room}}{{item.use_time}}分钟</div>
             </div>
           </div>
         </div>
@@ -103,25 +132,33 @@
       <div class="cost">
         <div class="cost-title">
           <div>预约费用</div>
-          <div>¥399</div>
+          <div>¥{{order_data.original_price}}</div>
         </div>
         <div class="cost-coupon-list">
           <div class="coupon">
             <div class="coupon-tips">
-              <div class="coupon-icon"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/couponIcon.png"
-                     alt=""></div>
+              <div class="coupon-icon">
+                <img
+                  src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/couponIcon.png"
+                  alt
+                />
+              </div>
               <div class="coupon-title">优惠卷</div>
               <div class="coupon-tip">已选推荐优惠</div>
             </div>
             <div class="on-icon">></div>
           </div>
-          <div class="coupon-ps">
-            <div>【敏感维稳】多元修护加乘维稳</div>
-            <div class="cou-price">-¥100</div>
+          <div class="coupon-ps" v-for="(item,index) in coupon_list" :key="index">
+            <div>{{item.coupon_name}}</div>
+            <div class="cou-price">-¥{{item.price}}</div>
           </div>
         </div>
         <div class="over-price">
-          合计： <span><span class="min-size">￥</span>399<span class="min-size">.00</span></span>
+          合计：
+          <span>
+            <span class="min-size">￥</span>{{order_data.price}}
+            <!-- <span class="min-size">.00</span> -->
+          </span>
         </div>
       </div>
     </div>
@@ -129,140 +166,160 @@
 </template>
 
 <script>
-
+import api from "../../../server/home";
 export default {
-  data () {
+  data() {
     return {
       userInfo: {
-        image: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
-        name: '张三',
-        sex: '女',
-        age: '23',
-        skinType: '中性皮肤'
       },
-      //面部标签
-      lableList: [
-        {
-          text: '对话框的',
-          disabled: false
-        },
-        {
-          text: '对话框的',
-          disabled: true
-        },
-        {
-          text: '对话框的',
-          disabled: false
-        },
-        {
-          text: '对话框的',
-          disabled: false
-        },
-        {
-          text: '对话框的',
-          disabled: false
-        },
-        {
-          text: '对话框的',
-          disabled: false
-        },
-        {
-          text: '对话框的',
-          disabled: false
-        },
-        {
-          text: '对话框的',
-          disabled: false
-        },
-        {
-          text: '对话框的',
-          disabled: false
-        },
-        {
-          text: '对话框的',
-          disabled: false
-        },
-      ],
-      //执行方案
-      programmeList: [
-        {
-          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
-          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
-          tips: '+润百颜精华',
-          zoom: '皮肤综合仪（30号房）',
-          ts: '30分钟',
-          price: '79.00'
-        },
-        {
-          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
-          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
-          tips: '+润百颜精华',
-          zoom: '皮肤综合仪（30号房）',
-          ts: '30分钟',
-          price: '79.00'
-        },
-        {
-          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
-          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
-          tips: '+润百颜精华',
-          zoom: '皮肤综合仪（30号房）',
-          ts: '30分钟',
-          price: '79.00'
-        },
-      ],
-      //项目列表
-      projectList: [{
-        value: '选项1',
-        label: '黄金糕'
-      }, {
-        value: '选项2',
-        label: '双皮奶'
-      }, {
-        value: '选项3',
-        label: '蚵仔煎'
-      }, {
-        value: '选项4',
-        label: '龙须面'
-      }, {
-        value: '选项5',
-        label: '北京烤鸭'
-      }],
-      timesInfo: '',
-      projectInfo: '',
-      weekInfo: '',
-      programmeIndex: '',
-      remarks: '',
-      isPupop: false
+      lableList:{},
+      programmeList:{},
+      scheme_list:{},
+      // //面部标签
+      // lableList: [
+      //   {
+      //     text: "对话框的",
+      //     disabled: false
+      //   },
+      //   {
+      //     text: "对话框的",
+      //     disabled: true
+      //   },
+      //   {
+      //     text: "对话框的",
+      //     disabled: false
+      //   },
+      //   {
+      //     text: "对话框的",
+      //     disabled: false
+      //   },
+      //   {
+      //     text: "对话框的",
+      //     disabled: false
+      //   },
+      //   {
+      //     text: "对话框的",
+      //     disabled: false
+      //   },
+      //   {
+      //     text: "对话框的",
+      //     disabled: false
+      //   },
+      //   {
+      //     text: "对话框的",
+      //     disabled: false
+      //   },
+      //   {
+      //     text: "对话框的",
+      //     disabled: false
+      //   },
+      //   {
+      //     text: "对话框的",
+      //     disabled: false
+      //   }
+      // ],
+      // //执行方案
+      // programmeList: [
+      //   {
+      //     image:
+      //       "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
+      //     title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
+      //     tips: "+润百颜精华",
+      //     zoom: "皮肤综合仪（30号房）",
+      //     ts: "30分钟",
+      //     price: "79.00"
+      //   },
+      //   {
+      //     image:
+      //       "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
+      //     title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
+      //     tips: "+润百颜精华",
+      //     zoom: "皮肤综合仪（30号房）",
+      //     ts: "30分钟",
+      //     price: "79.00"
+      //   },
+      //   {
+      //     image:
+      //       "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
+      //     title: "水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底",
+      //     tips: "+润百颜精华",
+      //     zoom: "皮肤综合仪（30号房）",
+      //     ts: "30分钟",
+      //     price: "79.00"
+      //   }
+      // ],
+      // //项目列表
+      // projectList: [
+      //   {
+      //     value: "选项1",
+      //     label: "黄金糕"
+      //   },
+      //   {
+      //     value: "选项2",
+      //     label: "双皮奶"
+      //   },
+      //   {
+      //     value: "选项3",
+      //     label: "蚵仔煎"
+      //   },
+      //   {
+      //     value: "选项4",
+      //     label: "龙须面"
+      //   },
+      //   {
+      //     value: "选项5",
+      //     label: "北京烤鸭"
+      //   }
+      // ],
+      timesInfo: "",
+      projectInfo: "",
+      weekInfo: "",
+      programmeIndex: "",
+      remarks: "",
+      coupon_list:"",
+      order_data:"",
+      isPupop: false,
+      id:""
     };
   },
-  computed: {
-
-  },
+  computed: {},
   watch: {},
 
   methods: {
-    onOperation (index) {
+    getOrderInfo() {
+      api.getOrderInfo({ id: this.id }).then(res => {
+        this.userInfo = res.data.user;
+        this.order_data = res.data.order_data;
+        this.lableList = res.data.tags;
+        this.programmeList = res.data.order_data.project_list;
+        this.coupon_list = res.data.order_data.coupon_list;
+        this.remarks = res.data.remark;
+      });
+    },
+
+    onOperation(index) {
       if (this.programmeList[index].onSelect) {
-        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
+        this.$set(
+          this.programmeList[index],
+          "onSelect",
+          !this.programmeList[index].onSelect
+        );
       } else {
-        this.$set(this.programmeList[index], 'onSelect', true)
+        this.$set(this.programmeList[index], "onSelect", true);
       }
     },
-    onSubmit () {
-
-    },
-    submitFrequency () { },
+    onSubmit() {},
+    submitFrequency() {}
   },
 
-  created () {
-
+  created() {
+    let id = this.$route.query.id;
+    this.id = id;
+    this.getOrderInfo();
   },
 
-  mounted () {
-
-  },
-}
-
+  mounted() {}
+};
 </script>
 
 <style lang='less' scoped>

src/pages/historicalOrder/index.vue

@@ -1,155 +1,183 @@
 <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-select class="coupon-select"
-                 v-model="coupon"
-                 placeholder="项目名称">
-        <el-option v-for="item in couponList"
-                   :key="item.value"
-                   :label="item.label"
-                   :value="item.value">
-        </el-option>
+      <el-date-picker
+        v-model="dates"
+        type="daterange"
+        range-separator="->"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+      <el-select class="coupon-select" v-model="coupon" placeholder="项目名称">
+        <el-option
+          v-for="item in couponList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
       </el-select>
-      <el-select class="coupon-select"
-                 v-model="coupon"
-                 placeholder="卡券名称">
-        <el-option v-for="item in couponList"
-                   :key="item.value"
-                   :label="item.label"
-                   :value="item.value">
-        </el-option>
+      <el-select class="coupon-select" v-model="coupon" placeholder="卡券名称">
+        <el-option
+          v-for="item in couponList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
       </el-select>
 
-      <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="search">搜索</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.headImg"
-                   alt=""></div>
+            <div class="head-img">
+              <img :src="scope.row.avatar_url" alt />
+            </div>
           </template>
         </el-table-column>
-        <el-table-column prop="name"
-                         label="昵称"
-                         width="120">
-        </el-table-column>
-        <el-table-column prop="phone"
-                         label="联系电话"
-                         show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column prop="date"
-                         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>{{scope.row.status}}</div>
+            <div :class="'color'+scope.row.status">{{statusStr[scope.row.status]}}</div>
           </template>
         </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="1000">
-        </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>
 </template>
 
 <script>
+import api from "../../server/home";
+
 export default {
   components: {},
-  data () {
+  data() {
     return {
-      searchText: '',
-      dates: '',
-      coupon: '',
+      searchText: "",
+      dates: "",
+      coupon: "",
+      limit: 10,
+      total: 0,
+      statusStr: [
+        "已预约",
+        "未支付",
+        "已支付",
+        "待使用",
+        "正在使用",
+        "已结算",
+        "已取消"
+      ],
       couponList: [
         {
-          value: '选项1',
-          label: '黄金糕'
-        }, {
-          value: '选项2',
-          label: '双皮奶'
+          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',
-        status: '已完成'
-      },
-      {
-        date: '2022.04.25  14:30',
-        name: '滴滴滴',
-        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
-        phone: '13346783645',
-        status: '已完成'
-      },
-
+      tableData: [
+        {
+          date: "2022.04.25  14:30",
+          name: "滴滴滴",
+          headImg:
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
+          phone: "13346783645",
+          status: "已完成"
+        },
+        {
+          date: "2022.04.25  14:30",
+          name: "滴滴滴",
+          headImg:
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
+          phone: "13346783645",
+          status: "已完成"
+        }
       ],
       currentPage1: 1,
-      multipleSelection: ''
-
+      multipleSelection: ""
     };
   },
   computed: {},
   watch: {},
 
   methods: {
-    search () { },
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange (val) {
-      console.log(`当前页: ${val}`);
+    // 获取订单列表
+    getOrderList() {
+      console.log("xxxxxxx");
+      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,
+        start_date: start_date,
+        end_date: end_date
+      };
+      api.getOrderList(params).then(res => {
+        if (res.code == 200) {
+          this.tableData = res.data.list;
+          this.total = res.data.total;
+        }
+      });
     },
-    handleSelectionChange (row, column, event) {
-      this.$router.push({
-        path: '/historicalOrder/details'
-      })
+    
+    handleCurrentChange(e) {
+      this.currentPage1 = e;
+      this.getOrderList();
+      console.log(e, "eeeeee");
     },
-  },
-
-  created () {
 
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleSelectionChange(row, column, event) {
+      this.$router.push({
+        path: "/historicalOrder/details",
+        query: {
+          id: row.id
+        }
+      });
+    }
   },
 
-  mounted () {
-
+  created() {
+    this.getOrderList();
   },
-}
 
+  mounted() {}
+};
 </script>
 
 <style lang='less' scoped>
@@ -208,5 +236,26 @@ export default {
       border-bottom: none;
     }
   }
+  .color0 {
+    color: #fc3019;
+  }
+  .color1 {
+    color: #3ef3ed;
+  }
+  .color2 {
+    color: #00eeee;
+  }
+  .color3 {
+    color: #61D09D;
+  }
+  .color4 {
+    color: #3115cc;
+  }
+  .color5 {
+    color: #fc3019;
+  }
+  .color6 {
+    color: #A999EA;
+  }
 }
 </style>

src/server/home.js

@@ -30,15 +30,44 @@ export default class Home {
   static getUserInfo (parms) {
     return $http.get(url.getUserInfo, parms);
   }
-  static getOrderInfo (parms) {
-    return $http.get(url.getOrderInfo, parms);
-  }
   static getSkinTags (parms) {
     return $http.get(url.getSkinTags, parms);
   }
   static getSkinUpdate (parms) {
     return $http.post(url.getSkinUpdate, parms);
   }
+
+  // 获取历史订单
+  static getOrderList (parms) {
+    return $http.get(url.getOrderList, parms);
+  }
+
+  // 获取订单详情
+  static getOrderInfo (parms) {
+    return $http.get(url.getOrderInfo, parms);
+  }
+
+  // 获取用户列表
+  static getUserList (parms) {
+    return $http.get(url.getUserList, parms);
+  }
+  
+  // 获取用户详情
+  static getUserInfo (parms) {
+    return $http.get(url.getUserInfo, parms);
+  }
+  
+  // 获取优惠券列表
+  static getCouponInfo (parms) {
+    return $http.get(url.getCouponInfo, parms);
+  }
+
+  // 发送优惠券接口
+  static sendCoupon (parms) {
+    return $http.post(url.sendCoupon, parms);
+  }
+  
+
 }
 
 

src/server/urls.js

@@ -13,10 +13,31 @@ export default {
   getProject: '/v2/pad/scheme/project',
   //获取用户信息
   getUserInfo: '/v2/pad/account/info',
-  //获取订单详情
-  getOrderInfo: '/v2/pad/order/info',
   //后台默认的标签
   getSkinTags: '/v2/pad/skin/tags',
   //保存测肤记录
   getSkinUpdate:'/v2/pad/skin/update',
+
+  /**
+   *  by ListKer
+   */
+
+  // 获取历史订单
+  getOrderList:'/v2/pad/order/list',
+
+  //获取订单详情
+  getOrderInfo: '/v2/pad/order/info',
+
+  // 获取用户列表
+  getUserList:'/v2/pad/user/list',
+  
+  // 获取用户详情
+  getUserInfo:'/v2/pad/user/info',
+  
+  // 获取优惠券列表
+  getCouponInfo:'/v2/pad/coupon/list',
+  
+  // 发送优惠券接口
+  sendCoupon:'/v2/pad/coupon/send',
+
 }