4 コミット 6815e54c6e ... 0beeefc7b6

作者 SHA1 メッセージ 日付
  listKer 0beeefc7b6 feat: 添加用户管理界面 2 年 前
  lihai c52dce9512 feat: ** 2 年 前
  lihai cb4bad79c6 feat: 更新 2 年 前
  lihai eea3b7cc55 feat: 确定订单 2 年 前

+ 1 - 1
.gitignore

@@ -1,4 +1,4 @@
1
-.DS_Store
1
+  .DS_Store
2 2
 /node_modules
3 3
 /dist/
4 4
 npm-debug.log*

File diff suppressed because it is too large
+ 21207 - 37
package-lock.json


+ 8 - 6
src/components/common/layout/leftMenu.vue

@@ -68,12 +68,14 @@ export default {
68 68
           path: "/confirmOrder",
69 69
           unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unconfirmOrder.png',
70 70
           icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/confirmOrder.png'
71
-        }, {
72
-          name: "门店检测",
73
-          path: "/storeDetection",
74
-          icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/testing.png',
75
-          unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/untesting.png'
76
-        }, {
71
+        },
72
+        //  {
73
+        //   name: "门店检测",
74
+        //   path: "/storeDetection",
75
+        //   icon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/testing.png',
76
+        //   unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/untesting.png'
77
+        // }, 
78
+        {
77 79
           name: "客户管理",
78 80
           path: "/customerMan",
79 81
           unicon: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/unskin.png',

+ 14 - 14
src/config/env.js

@@ -2,11 +2,11 @@
2 2
 let appId = 102;       //sso登录服务的appid,传0表示走老的授权登录
3 3
 let appVersion = 1;    //sso登录服务的版本,默认为第一版
4 4
 let logFlag = {
5
-	dev: false,    			// 开发和测试环境是否上报log
6
-	from: false,   			// 是否上传页面来源
7
-	packageName: 'web-init'
8
-}; 
9
-let basePath = 'https://api.51yund.com'; 	// api请求地址
5
+  dev: false,    			// 开发和测试环境是否上报log
6
+  from: false,   			// 是否上传页面来源
7
+  packageName: 'web-init'
8
+};
9
+let basePath = 'https://store.api.ijolijoli.com/'; 	// api请求地址
10 10
 let ssoPath = 'https://sso.51yund.com';		// 授权登录地址
11 11
 let localPath = 'https://51yund.com';       // 获取定位地址
12 12
 let logPath = 'https://api.51yund.com';     // 上传日志地址
@@ -14,13 +14,13 @@ let jumpPath = 'https://d.51yund.com';		// 跳转登录地址
14 14
 let filterErr = ['sskey过期'];  //过滤掉某些错不上报
15 15
 
16 16
 export {
17
-	basePath,
18
-	ssoPath,
19
-	localPath,
20
-	jumpPath,
21
-	logPath,
22
-	logFlag,
23
-	appId,
24
-	appVersion,
25
-	filterErr
17
+  basePath,
18
+  ssoPath,
19
+  localPath,
20
+  jumpPath,
21
+  logPath,
22
+  logFlag,
23
+  appId,
24
+  appVersion,
25
+  filterErr
26 26
 }

File diff suppressed because it is too large
+ 1224 - 0
src/pages/confirmOrder/details/index.vue


+ 24 - 6
src/pages/confirmOrder/index.vue

@@ -1,13 +1,16 @@
1 1
 <template>
2
-  <div>
3
-    ConfirmOrder
2
+  <div class="mine">
3
+    <div class="qr-code">
4
+      <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/orderQrCode.png"
5
+           alt="">
6
+    </div>
4 7
   </div>
5 8
 </template>
6 9
 
7 10
 <script>
8 11
 export default {
9 12
   components: {},
10
-  data() {
13
+  data () {
11 14
     return {};
12 15
   },
13 16
   computed: {},
@@ -15,11 +18,11 @@ export default {
15 18
 
16 19
   methods: {},
17 20
 
18
-  created() {
21
+  created () {
19 22
 
20 23
   },
21 24
 
22
-  mounted() {
25
+  mounted () {
23 26
 
24 27
   },
25 28
 }
@@ -27,5 +30,20 @@ export default {
27 30
 </script>
28 31
 
29 32
 <style lang='less' scoped>
30
-
33
+.mine {
34
+  width: 100%;
35
+  height: 100%;
36
+  display: flex;
37
+  justify-content: center;
38
+  align-items: center;
39
+  background: #ffffff;
40
+  box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
41
+  border-radius: 8px;
42
+  .qr-code {
43
+    width: 200px;
44
+    img {
45
+      width: 100%;
46
+    }
47
+  }
48
+}
31 49
 </style>

+ 244 - 7
src/pages/coupon/index.vue

@@ -1,25 +1,175 @@
1 1
 <template>
2
-  <div>
3
-    coupon
2
+  <div class="mine">
3
+    <div class="table">
4
+      <el-input class="search-input"
5
+                placeholder="请输入内容"
6
+                prefix-icon="el-icon-search"
7
+                size="mini"
8
+                v-model="searckItem">
9
+      </el-input>
10
+      <div class="search-button">搜索</div>
11
+      <div class="coupon">选择优惠券</div>
12
+      <el-select class="coupon-select"
13
+                 v-model="coupon"
14
+                 size="mini"
15
+                 placeholder="选择优惠券">
16
+        <el-option v-for="item in couponList"
17
+                   :key="item.value"
18
+                   :label="item.label"
19
+                   :value="item.value">
20
+        </el-option>
21
+      </el-select>
22
+      <div class="num-tips">数量</div>
23
+      <div class="coupon-num">
24
+        <div class="reduce"
25
+             @click="reduceNum">-</div>
26
+        <div class="num">{{couponNum}}</div>
27
+        <div class="add"
28
+             @click="couponNum++">+</div>
29
+      </div>
30
+      <div class="send-coupon"
31
+           style="margin-left: 39px;"
32
+           @click="sendCoupon">发送</div>
33
+    </div>
34
+    <div class="user-list">
35
+      <el-table ref="multipleTable"
36
+                :data="tableData"
37
+                tooltip-effect="dark"
38
+                height="454"
39
+                style="width: 100%;border-radius: 8px;"
40
+                @selection-change="handleSelectionChange">
41
+        <el-table-column type="selection"
42
+                         width="55">
43
+        </el-table-column>
44
+        <el-table-column label="头像"
45
+                         width="120">
46
+          <template slot-scope="scope">
47
+            <div class="head-img"><img :src="scope.row.headImg"
48
+                   alt=""></div>
49
+          </template>
50
+        </el-table-column>
51
+        <el-table-column prop="name"
52
+                         label="姓名"
53
+                         width="120">
54
+        </el-table-column>
55
+        <el-table-column prop="phone"
56
+                         label="联系电话"
57
+                         show-overflow-tooltip>
58
+        </el-table-column>
59
+        <el-table-column prop="date"
60
+                         label="注册时间"
61
+                         show-overflow-tooltip>
62
+        </el-table-column>
63
+      </el-table>
64
+    </div>
4 65
   </div>
5 66
 </template>
6 67
 
7 68
 <script>
8 69
 export default {
9 70
   components: {},
10
-  data() {
11
-    return {};
71
+  data () {
72
+    return {
73
+      searckItem: '',
74
+      couponList: [
75
+        {
76
+          value: '选项1',
77
+          label: '黄金糕'
78
+        }, {
79
+          value: '选项2',
80
+          label: '双皮奶'
81
+        }
82
+      ],
83
+      tableData: [{
84
+        date: '2022.04.25  14:30',
85
+        name: '滴滴滴',
86
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
87
+        phone: '13346783645'
88
+      }, {
89
+        date: '2022.04.25  14:30',
90
+        name: '滴滴滴',
91
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
92
+        phone: '13346783645'
93
+      }, {
94
+        date: '2022.04.25  14:30',
95
+        name: '滴滴滴',
96
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
97
+        phone: '13346783645'
98
+      }, {
99
+        date: '2022.04.25  14:30',
100
+        name: '滴滴滴',
101
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
102
+        phone: '13346783645'
103
+      }, {
104
+        date: '2022.04.25  14:30',
105
+        name: '滴滴滴',
106
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
107
+        phone: '13346783645'
108
+      }, {
109
+        date: '2022.04.25  14:30',
110
+        name: '滴滴滴',
111
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
112
+        phone: '13346783645'
113
+      }, {
114
+        date: '2022.04.25  14:30',
115
+        name: '滴滴滴',
116
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
117
+        phone: '13346783645'
118
+      }, {
119
+        date: '2022.04.25  14:30',
120
+        name: '滴滴滴',
121
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
122
+        phone: '13346783645'
123
+      }, {
124
+        date: '2022.04.25  14:30',
125
+        name: '滴滴滴',
126
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
127
+        phone: '13346783645'
128
+      }, {
129
+        date: '2022.04.25  14:30',
130
+        name: '滴滴滴',
131
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
132
+        phone: '13346783645'
133
+      }, {
134
+        date: '2022.04.25  14:30',
135
+        name: '滴滴滴',
136
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
137
+        phone: '13346783645'
138
+      }, {
139
+        date: '2022.04.25  14:30',
140
+        name: '滴滴滴',
141
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
142
+        phone: '13346783645'
143
+      }, {
144
+        date: '2022.04.25  14:30',
145
+        name: '滴滴滴',
146
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
147
+        phone: '13346783645'
148
+      },
149
+      ],
150
+      multipleSelection: [],//选中的列表
151
+      coupon: '',
152
+      couponNum: 1,//优惠券数量
153
+    };
12 154
   },
13 155
   computed: {},
14 156
   watch: {},
15 157
 
16
-  methods: {},
158
+  methods: {
159
+    reduceNum () {
160
+      this.couponNum > 1 ? this.couponNum-- : this.couponNum = 1
161
+    },
162
+    handleSelectionChange (val) {
163
+      this.multipleSelection = val;
164
+    },
165
+    sendCoupon () { },
166
+  },
17 167
 
18
-  created() {
168
+  created () {
19 169
 
20 170
   },
21 171
 
22
-  mounted() {
172
+  mounted () {
23 173
 
24 174
   },
25 175
 }
@@ -27,5 +177,92 @@ export default {
27 177
 </script>
28 178
 
29 179
 <style lang='less' scoped>
180
+.mine {
181
+  .table {
182
+    display: flex;
183
+    align-items: center;
184
+    font-size: 14px;
185
+    font-family: PingFangSC-Regular, PingFang SC;
186
+    font-weight: 400;
187
+    color: #333333;
188
+    line-height: 20px;
189
+    .search-input {
190
+      width: 152px;
191
+    }
192
+    .search-button,
193
+    .send-coupon {
194
+      margin-left: 16px;
195
+      width: 68px;
196
+      height: 28px;
197
+      line-height: 28px;
198
+      background: #fa7d22;
199
+      border-radius: 2px;
200
+      font-size: 14px;
201
+      font-family: PingFangSC-Medium, PingFang SC;
202
+      font-weight: 500;
203
+      color: #ffffff;
204
+      text-align: center;
205
+    }
206
+    .coupon {
207
+      margin-left: 40px;
208
+    }
209
+    .coupon-select {
210
+      margin-left: 12px;
211
+      width: 174px;
212
+    }
213
+    .num-tips {
214
+      margin-left: 40px;
215
+    }
216
+    .coupon-num {
217
+      margin-left: 12px;
218
+      background: #ffffff;
219
+      display: flex;
220
+      div {
221
+        width: 28px;
222
+        height: 28px;
223
+        line-height: 28px;
224
+        text-align: center;
225
+      }
226
+      .reduce,
227
+      .add {
228
+        border: 1px solid #d9d9d9;
229
+        line-height: 26px;
230
+        font-size: 18px;
231
+      }
232
+      .num {
233
+        border-top: 1px solid #d9d9d9;
234
+        border-bottom: 1px solid #d9d9d9;
235
+      }
236
+    }
237
+  }
238
+  .user-list {
239
+    margin-top: 18px;
240
+    padding: 0 12px;
241
+    width: 100%;
242
+    background: #ffffff;
243
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
244
+    border-radius: 8px;
245
+    .head-img {
246
+      width: 36px;
247
+      height: 36px;
248
+      border-radius: 50%;
30 249
 
250
+      img {
251
+        width: 100%;
252
+        height: 100%;
253
+      }
254
+    }
255
+    /deep/ .el-table th > .cell {
256
+      font-size: 14px !important;
257
+      font-family: PingFangSC-Regular, PingFang SC;
258
+      font-weight: 400;
259
+      color: #999999;
260
+      line-height: 20px;
261
+    }
262
+    /deep/ .el-table td,
263
+    .el-table th.is-leaf {
264
+      border-bottom: none;
265
+    }
266
+  }
267
+}
31 268
 </style>

+ 508 - 0
src/pages/customerMan/details/index.vue

@@ -0,0 +1,508 @@
1
+<template>
2
+  <div class="mine">
3
+    <div class="left">
4
+      <div class="user-info">
5
+        <div class="user-img"><img :src="userInfo.image"
6
+               alt=""></div>
7
+        <div class="user-span">
8
+          <div class="name">昵称:<span>{{userInfo.name}}</span></div>
9
+          <div class="sex">性别:<span>{{userInfo.sex}}</span></div>
10
+          <div class="age">肤龄:<span>{{userInfo.age}}</span></div>
11
+          <div class="skin-type">肤质:<span>{{userInfo.skinType}}</span></div>
12
+        </div>
13
+        
14
+      </div>
15
+      <div class="personage-data">
16
+           <div class="myDataList">肌肤得分:<span class="bigSixe">56分</span></div>
17
+          <div class="myDataList">皮肤状态:<span>肤质一般</span></div>
18
+          <div class="myDataList">上传检测时间:<span>2022.0418 16:04</span></div>
19
+          <div class="myDataList">出生日期:<span>2000.02.29</span></div>
20
+          <div class="myDataList">联系电话:<span>13334597987</span></div>
21
+
22
+          <div class="myDataList">所在地:<span>广东省,深圳市,南山区</span></div>
23
+
24
+          <div class="myDataList">开卡店铺:<span>JOLIJOLI(西安店)</span></div>
25
+
26
+          <div class="myDataList">卡卷数量:<span>5</span></div>
27
+
28
+          <div class="myDataList">储值金额:<span class="JEcolor">¥<span class="bigSixe">500</span>.00</span></div>
29
+          <div class="myDataList">积分:<span>200</span></div>
30
+
31
+
32
+      </div>
33
+    </div>
34
+    <div class="right"> 
35
+       <div class="right-top">
36
+            <div class="right-top-data">
37
+                <div class="lable">
38
+                    <div class="lable-title">
39
+                        面诊标签
40
+                    </div>
41
+                    <div class="lable-list">
42
+                        <div v-for="(item,index) in lableList"
43
+                            :key="index"
44
+                            class='lable-info'>
45
+                        {{item.text}}
46
+                        </div>
47
+                    </div>
48
+                </div>
49
+                <div class="ps">
50
+                    <div class="ps-title">
51
+                        备注
52
+                    </div>
53
+                    <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
54
+                    </div>
55
+            </div>  
56
+            <div class="right-top-list" @click="toOrder(1)">
57
+                <div class="dataList">
58
+                    <img :src="userInfo.image">
59
+                    <p>项目订单</p>
60
+                    <span>19</span>
61
+                </div>
62
+                <div class="dataList" style="margin:18px 0px">
63
+                     <img :src="userInfo.image">
64
+                    <p>项目订单</p>
65
+                    <span>19</span>
66
+                </div>
67
+                <div class="dataList">
68
+                     <img :src="userInfo.image">
69
+                    <p>项目订单</p>
70
+                    <span>19</span>
71
+                </div>
72
+            </div>
73
+       </div>
74
+       <div class="right-bottom">
75
+           <div class="programme">
76
+        <div class="tab">
77
+          <div class="tab-title">执行方案</div>
78
+        </div>
79
+        <div class="programme-list">
80
+          <div :class="['programme-info',item.onSelect?'programme-active':'']"
81
+               v-for="(item,index) in programmeList"
82
+               :key="index"
83
+               @click="onOperation(index)">
84
+            <div class="programme-left">
85
+              <div class="programme-img"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
86
+                     alt=""></div>
87
+              <div class="programme-tips">
88
+                <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
89
+                <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
90
+                <div class="tips-title">仪器:<span>{{'无创水光'|ellipsis(9)}}</span></div>
91
+              </div>
92
+            </div>
93
+            <div class="programme-right">
94
+              <div class="frequency">执行频率:<span>一周一次</span></div>
95
+              <div class="duration">持续时长:<span>28天</span></div>
96
+            </div>
97
+            <div class="operation"
98
+                 v-if="item.onSelect">
99
+              <div class="edit">编辑</div>
100
+              <div class="delete">删除</div>
101
+            </div>
102
+          </div>
103
+        </div>
104
+      </div>
105
+       </div>
106
+    </div>
107
+      
108
+  </div>
109
+</template>
110
+
111
+<script>
112
+
113
+export default {
114
+  data () {
115
+    return {
116
+      userInfo: {
117
+        image: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
118
+        name: '张三',
119
+        sex: '女',
120
+        age: '23',
121
+        skinType: '中性皮肤'
122
+      },
123
+      //面部标签
124
+      lableList: [
125
+        {
126
+          text: '对话框的',
127
+          disabled: false
128
+        },
129
+        {
130
+          text: '对话框的',
131
+          disabled: true
132
+        },
133
+        {
134
+          text: '对话框的',
135
+          disabled: false
136
+        },
137
+        {
138
+          text: '对话框的',
139
+          disabled: false
140
+        },
141
+        {
142
+          text: '对话框的',
143
+          disabled: false
144
+        },
145
+       
146
+      ],
147
+      //执行方案
148
+      programmeList: [
149
+        {
150
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
151
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
152
+          tips: '+润百颜精华',
153
+          zoom: '皮肤综合仪(30号房)',
154
+          ts: '30分钟',
155
+          price: '79.00'
156
+        },
157
+        {
158
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
159
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
160
+          tips: '+润百颜精华',
161
+          zoom: '皮肤综合仪(30号房)',
162
+          ts: '30分钟',
163
+          price: '79.00'
164
+        },
165
+        {
166
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
167
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
168
+          tips: '+润百颜精华',
169
+          zoom: '皮肤综合仪(30号房)',
170
+          ts: '30分钟',
171
+          price: '79.00'
172
+        },
173
+      ],
174
+      //项目列表
175
+      projectList: [{
176
+        value: '选项1',
177
+        label: '黄金糕'
178
+      }, {
179
+        value: '选项2',
180
+        label: '双皮奶'
181
+      }, {
182
+        value: '选项3',
183
+        label: '蚵仔煎'
184
+      }, {
185
+        value: '选项4',
186
+        label: '龙须面'
187
+      }, {
188
+        value: '选项5',
189
+        label: '北京烤鸭'
190
+      }],
191
+      timesInfo: '',
192
+      projectInfo: '',
193
+      weekInfo: '',
194
+      programmeIndex: '',
195
+      remarks: '',
196
+      isPupop: false
197
+    };
198
+  },
199
+  computed: {
200
+
201
+  },
202
+  watch: {},
203
+
204
+  methods: {
205
+    onOperation (index) {
206
+      if (this.programmeList[index].onSelect) {
207
+        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
208
+      } else {
209
+        this.$set(this.programmeList[index], 'onSelect', true)
210
+      }
211
+    },
212
+    toOrder(index){
213
+        if(index === 1){
214
+           this.$router.push({
215
+            path: '/customerMan/projectOrder'
216
+            })
217
+        }
218
+    },
219
+    onSubmit () {
220
+
221
+    },
222
+    submitFrequency () { },
223
+  },
224
+
225
+  created () {
226
+
227
+  },
228
+
229
+  mounted () {
230
+
231
+  },
232
+}
233
+
234
+</script>
235
+
236
+<style lang='less' scoped>
237
+.mine {
238
+  height: 100%;
239
+  display: flex;
240
+  .left {
241
+    width: 276px;
242
+    padding: 12px 12px 0 12px;
243
+    background: #ffffff;
244
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
245
+    border-radius: 8px;
246
+    font-size: 13px;
247
+    font-family: PingFangSC-Regular, PingFang SC;
248
+    font-weight: 400;
249
+    color: #999999;
250
+    line-height: 18px;
251
+    overflow: scroll;
252
+    height: 100%;
253
+    .user-info {
254
+      display: flex;
255
+      align-items: center;
256
+      .user-img {
257
+        width: 98px;
258
+        img {
259
+          width: 100%;
260
+          display: block;
261
+        }
262
+      }
263
+      .user-span {
264
+        margin-left: 12px;
265
+        .sex{
266
+            margin-top: 8px;
267
+        }
268
+         .age{
269
+            margin-top: 8px;
270
+        }
271
+         .skin-type{
272
+            margin-top: 8px;
273
+        }
274
+
275
+        span {
276
+          color: #333333;
277
+        }
278
+      }
279
+    }
280
+    .personage-data{
281
+        margin-top: 30px;
282
+        .myDataList{
283
+          margin-top: 15px;
284
+          .bigSixe{
285
+              font-size: 18px;
286
+              color: #FA7D22;
287
+          }
288
+          span{
289
+             color: #333333;
290
+          }
291
+          .JEcolor{
292
+              color: #FA7D22;
293
+          }
294
+        }
295
+    }
296
+  }  
297
+ 
298
+  .right {
299
+    margin-left: 18px;
300
+    position: relative;
301
+    flex: 1;
302
+    .right-top{
303
+        height: 205px;
304
+        // border: 1px solid red;
305
+        display: flex;
306
+        .right-top-list{
307
+            width: 239ppx;
308
+            margin-left: 18px;
309
+            display: flex;
310
+            flex-direction: column;
311
+            .dataList{
312
+                height: 56px;
313
+                // width: 239ppx;
314
+                background: #ffffff;
315
+                box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
316
+                border-radius: 8px;
317
+                padding: 16px 12px 12px 12px;
318
+                display: flex;
319
+                align-items: center;
320
+                img{
321
+                    width: 33px;
322
+                    height: 33px;
323
+                }
324
+                p{
325
+                    font-size: 14px;
326
+                    margin-left:14px;
327
+                    margin-right: 80px;
328
+                }
329
+                span{
330
+                    font-size: 16px;
331
+                    margin-right: 20px;
332
+                }
333
+            }
334
+
335
+        }
336
+        .right-top-data{
337
+            background: #ffffff;
338
+            box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
339
+            border-radius: 8px;
340
+            padding: 16px 12px 12px 12px;
341
+            width: 310px;
342
+            height: 100%;
343
+            .lable {
344
+            //   margin-top: 23px;
345
+                width: 100%;
346
+                overflow: scroll;
347
+                background: #ffffff;
348
+            .lable-title {
349
+            font-size: 14px;
350
+            font-family: PingFangSC-Medium, PingFang SC;
351
+            font-weight: 500;
352
+            color: #333333;
353
+            line-height: 20px;
354
+            margin-bottom: 14px;
355
+            }
356
+            .lable-list {
357
+            width: 100%;
358
+            min-height: 105rpx;
359
+            .lable-info {
360
+                display: inline-block;
361
+                padding: 0 12px;
362
+                margin-left: 10px;
363
+                height: 24px;
364
+                line-height: 24px;
365
+                border-radius: 2px;
366
+                border: 1px solid #d6d6d6;
367
+                margin-bottom: 10px;
368
+            }
369
+            .add-lable {
370
+                display: inline-block;
371
+                width: 27px;
372
+                height: 24px;
373
+                line-height: 24px;
374
+                font-size: 12px;
375
+                font-family: PingFang-SC-Regular, PingFang-SC;
376
+                font-weight: 400;
377
+                color: #333333;
378
+                text-align: center;
379
+                margin-left: 10px;
380
+                border-radius: 2px;
381
+                border: 1px solid #d6d6d6;
382
+            }
383
+            }
384
+            .remarks {
385
+            /deep/ .el-textarea__inner:focus {
386
+                border-color: #fa852f;
387
+            }
388
+            }
389
+    }
390
+    .ps {
391
+      font-size: 14px;
392
+      font-family: PingFangSC-Medium, PingFang SC;
393
+      font-weight: 500;
394
+      color: #333333;
395
+      line-height: 20px;
396
+      .ps-text {
397
+        margin-top: 10px;
398
+        font-size: 12px;
399
+        font-weight: 400;
400
+        color: #666666;
401
+        line-height: 17px;
402
+      }
403
+    }
404
+        }
405
+    }
406
+   .right-bottom{
407
+      margin-top: 18px;
408
+      background: #ffffff;
409
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
410
+      border-radius: 8px;
411
+      padding: 16px 61px 12px 12px;
412
+      .programme {
413
+    //   margin-top: 20px;
414
+      width: 100%;
415
+      background: #ffffff;
416
+      border-radius: 8px;
417
+        
418
+      .tab {
419
+        display: flex;
420
+        align-items: center;
421
+        justify-content: space-between;
422
+        .tab-title {
423
+          font-size: 14px;
424
+          font-family: PingFangSC-Medium, PingFang SC;
425
+          font-weight: 500;
426
+          color: #333333;
427
+          line-height: 20px;
428
+        }
429
+      }
430
+      .programme-list {
431
+        margin-top: 10px;
432
+        position: relative;
433
+        z-index: 1;
434
+        .programme-info {
435
+          position: relative;
436
+          margin-bottom: 10px;
437
+          border-radius: 4px;
438
+          border: 1px solid #f5f5f5;
439
+          display: flex;
440
+          justify-content: space-between;
441
+          padding: 8px 8px 8px 10px;
442
+          align-items: center;
443
+          .programme-left {
444
+            display: flex;
445
+            align-items: center;
446
+            .programme-img {
447
+              width: 48px;
448
+              display: inline-block;
449
+              img {
450
+                width: 100%;
451
+                display: block;
452
+              }
453
+            }
454
+            .programme-tips {
455
+              display: inline-block;
456
+              margin-left: 10px;
457
+              font-size: 10px;
458
+              font-family: PingFangSC-Regular, PingFang SC;
459
+              font-weight: 400;
460
+              color: #999999;
461
+              line-height: 14px;
462
+              zoom: 0.83;
463
+            }
464
+          }
465
+          .programme-right {
466
+            font-size: 12px;
467
+            font-family: PingFangSC-Regular, PingFang SC;
468
+            font-weight: 400;
469
+            color: #333333;
470
+            line-height: 17px;
471
+            .duration {
472
+              margin-top: 14px;
473
+            }
474
+          }
475
+          .operation {
476
+            position: absolute;
477
+            left: 50%;
478
+            transform: translateX(-50%);
479
+            top: 10px;
480
+            z-index: 10;
481
+            width: 44px;
482
+            background: #ffffff;
483
+            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
484
+              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
485
+              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
486
+            border-radius: 2px;
487
+            padding: 10px;
488
+            font-size: 12px;
489
+            font-family: PingFangSC-Regular, PingFang SC;
490
+            font-weight: 400;
491
+            color: #333333;
492
+            line-height: 17px;
493
+            .delete {
494
+              margin-top: 20px;
495
+            }
496
+          }
497
+        }
498
+        .programme-active {
499
+          border: 1px solid #fa852f;
500
+        }
501
+      }
502
+    }
503
+   }
504
+   
505
+
506
+  }
507
+}
508
+</style>

+ 156 - 7
src/pages/customerMan/index.vue

@@ -1,25 +1,119 @@
1 1
 <template>
2
-  <div>
3
-客户管理
2
+  <div class="mine">
3
+    <div class="condition">
4
+      <el-input placeholder="请输入内容"
5
+                class="search"
6
+                v-model="searchText">
7
+        <i slot="prefix"
8
+           class="el-input__icon el-icon-search"></i>
9
+      </el-input>
10
+      <el-button type="primary"
11
+                 class="searchButton"
12
+                 @click="search">搜索</el-button>
13
+    </div>
14
+
15
+    <div class="user-list">
16
+      <el-table ref="multipleTable"
17
+                :data="tableData"
18
+                tooltip-effect="dark"
19
+                height="354"
20
+                style="width: 100%;border-radius: 8px;"
21
+                @row-click="handleSelectionChange">
22
+        <el-table-column label="头像"
23
+                         width="120">
24
+          <template slot-scope="scope">
25
+            <div class="head-img"><img :src="scope.row.headImg"
26
+                   alt=""></div>
27
+          </template>
28
+        </el-table-column>
29
+        <el-table-column prop="name"
30
+                         label="昵称"
31
+                         width="120">
32
+        </el-table-column>
33
+        <el-table-column prop="phone"
34
+                         label="联系电话"
35
+                         show-overflow-tooltip>
36
+        </el-table-column>
37
+        <el-table-column prop="date"
38
+                         label="注册时间"
39
+                         show-overflow-tooltip>
40
+        </el-table-column>
41
+      </el-table>
42
+
43
+      <div class="pagin">
44
+        <el-pagination background
45
+                       layout="prev, pager, next"
46
+                       @size-change="handleSizeChange"
47
+                       @current-change="handleCurrentChange"
48
+                       :current-page.sync="currentPage1"
49
+                       :total="1000">
50
+        </el-pagination>
51
+      </div>
52
+    </div>
4 53
   </div>
5 54
 </template>
6 55
 
7 56
 <script>
8 57
 export default {
9 58
   components: {},
10
-  data() {
11
-    return {};
59
+  data () {
60
+    return {
61
+      searchText: '',
62
+      dates: '',
63
+      coupon: '',
64
+      couponList: [
65
+        {
66
+          value: '选项1',
67
+          label: '黄金糕'
68
+        }, {
69
+          value: '选项2',
70
+          label: '双皮奶'
71
+        }
72
+      ],
73
+      tableData: [{
74
+        date: '2022.04.25  14:30',
75
+        name: '滴滴滴',
76
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
77
+        phone: '13346783645',
78
+        status: '已完成'
79
+      },
80
+      {
81
+        date: '2022.04.25  14:30',
82
+        name: '滴滴滴',
83
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
84
+        phone: '13346783645',
85
+        status: '已完成'
86
+      },
87
+
88
+      ],
89
+      currentPage1: 1,
90
+      multipleSelection: ''
91
+
92
+    };
12 93
   },
13 94
   computed: {},
14 95
   watch: {},
15 96
 
16
-  methods: {},
97
+  methods: {
98
+    search () { },
99
+    handleSizeChange (val) {
100
+      console.log(`每页 ${val} 条`);
101
+    },
102
+    handleCurrentChange (val) {
103
+      console.log(`当前页: ${val}`);
104
+    },
105
+    handleSelectionChange (row, column, event) {
106
+      this.$router.push({
107
+        path: '/customerMan/details'
108
+      })
109
+    },
110
+  },
17 111
 
18
-  created() {
112
+  created () {
19 113
 
20 114
   },
21 115
 
22
-  mounted() {
116
+  mounted () {
23 117
 
24 118
   },
25 119
 }
@@ -27,5 +121,60 @@ export default {
27 121
 </script>
28 122
 
29 123
 <style lang='less' scoped>
124
+.mine {
125
+  .condition {
126
+    display: flex;
127
+    .coupon-select {
128
+      width: 174px;
129
+      margin-left: 18px;
130
+    }
131
+    .search {
132
+      width: 152px;
133
+      margin-left: 18px;
134
+    }
135
+
136
+    .searchButton {
137
+      margin-left: 18px;
138
+      width: 68px;
139
+      background: #fa7d22;
140
+      border-radius: 2px;
141
+      border-color: #fa7d22;
142
+    }
143
+  }
144
+  .user-list {
145
+    margin-top: 18px;
146
+    padding: 0 12px;
147
+    width: 100%;
148
+    background: #ffffff;
149
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
150
+    border-radius: 8px;
151
+    .head-img {
152
+      width: 36px;
153
+      height: 36px;
154
+      border-radius: 50%;
30 155
 
156
+      img {
157
+        width: 100%;
158
+        height: 100%;
159
+      }
160
+    }
161
+    .pagin {
162
+      padding: 20px 0;
163
+      .el-pagination {
164
+        text-align: center;
165
+      }
166
+    }
167
+    /deep/ .el-table th > .cell {
168
+      font-size: 14px !important;
169
+      font-family: PingFangSC-Regular, PingFang SC;
170
+      font-weight: 400;
171
+      color: #999999;
172
+      line-height: 20px;
173
+    }
174
+    /deep/ .el-table td,
175
+    .el-table th.is-leaf {
176
+      border-bottom: none;
177
+    }
178
+  }
179
+}
31 180
 </style>

+ 201 - 0
src/pages/customerMan/myOrder/index.vue

@@ -0,0 +1,201 @@
1
+<template>
2
+  <div class="order">
3
+    <div class="warp">
4
+      <el-tabs type="border-card">
5
+        <el-tab-pane label="项目订单">
6
+          <div class="user-list">
7
+            <el-table
8
+              ref="multipleTable"
9
+              :data="tableData"
10
+              tooltip-effect="dark"
11
+              height="354"
12
+              style="width: 100%;border-radius: 8px;"
13
+              @row-click="handleSelectionChange"
14
+            >
15
+              <el-table-column prop="name" label="项目名称" width="120"></el-table-column>
16
+              <el-table-column prop="numberList" label="数量" show-overflow-tooltip></el-table-column>
17
+              <el-table-column prop="price" label="总价格" show-overflow-tooltip></el-table-column>
18
+              <el-table-column prop="date" label="预约时间" width="180" show-overflow-tooltip></el-table-column>
19
+              <el-table-column prop="shop" label="预约店铺" show-overflow-tooltip></el-table-column>
20
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
21
+                <template slot-scope="scope">
22
+                  <div :class="'classShow'+scope.$index">{{statusStr[scope.row.status]}}</div>
23
+                </template>
24
+              </el-table-column>
25
+            </el-table>
26
+
27
+            <div class="pagin">
28
+              <el-pagination
29
+                background
30
+                layout="prev, pager, next"
31
+                @size-change="handleSizeChange"
32
+                @current-change="handleCurrentChange"
33
+                :current-page.sync="currentPage1"
34
+                :total="1000"
35
+              ></el-pagination>
36
+            </div>
37
+          </div>
38
+        </el-tab-pane>
39
+        <el-tab-pane label="卡卷订单">
40
+          <div class="user-list">
41
+            <el-table
42
+              ref="multipleTable"
43
+              :data="tableData"
44
+              tooltip-effect="dark"
45
+              height="354"
46
+              style="width: 100%;border-radius: 8px;"
47
+              @row-click="handleSelectionChange"
48
+            >
49
+              <el-table-column prop="name" label="卡卷名称" width="120"></el-table-column>
50
+              <el-table-column prop="numberList" label="卡卷类型" show-overflow-tooltip></el-table-column>
51
+              <el-table-column prop="price" label="总价格" show-overflow-tooltip></el-table-column>
52
+              <el-table-column prop="date" label="到期时间" width="180" show-overflow-tooltip></el-table-column>
53
+              <el-table-column prop="date" label="创建时间" width="180" show-overflow-tooltip></el-table-column>
54
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
55
+                <template slot-scope="scope">
56
+                  <div :class="'classShow'+scope.$index">{{statusStr[scope.row.status]}}</div>
57
+                </template>
58
+              </el-table-column>
59
+            </el-table>
60
+
61
+            <div class="pagin">
62
+              <el-pagination
63
+                background
64
+                layout="prev, pager, next"
65
+                @size-change="handleSizeChange"
66
+                @current-change="handleCurrentChange"
67
+                :current-page.sync="currentPage1"
68
+                :total="1000"
69
+              ></el-pagination>
70
+            </div>
71
+          </div>
72
+        </el-tab-pane>
73
+
74
+        <el-tab-pane label="商品订单">
75
+          <div class="user-list">
76
+            <el-table
77
+              ref="multipleTable"
78
+              :data="tableData"
79
+              tooltip-effect="dark"
80
+              height="354"
81
+              style="width: 100%;border-radius: 8px;"
82
+              @row-click="handleSelectionChange"
83
+            >
84
+              <el-table-column prop="name" label="商品名称" width="120"></el-table-column>
85
+              <el-table-column prop="numberList" label="数量" show-overflow-tooltip></el-table-column>
86
+              <el-table-column prop="price" label="实付款" show-overflow-tooltip></el-table-column>
87
+              <el-table-column prop="date" label="下单时间" width="180" show-overflow-tooltip></el-table-column>
88
+              <el-table-column prop="status" label="状态" show-overflow-tooltip>
89
+                <template slot-scope="scope">
90
+                  <div :class="'classShow'+scope.$index">{{statusStr[scope.row.status]}}</div>
91
+                </template>
92
+              </el-table-column>
93
+            </el-table>
94
+
95
+            <div class="pagin">
96
+              <el-pagination
97
+                background
98
+                layout="prev, pager, next"
99
+                @size-change="handleSizeChange"
100
+                @current-change="handleCurrentChange"
101
+                :current-page.sync="currentPage1"
102
+                :total="1000"
103
+              ></el-pagination>
104
+            </div>
105
+          </div>
106
+        </el-tab-pane>
107
+      </el-tabs>
108
+    </div>
109
+  </div>
110
+</template>
111
+
112
+<script>
113
+export default {
114
+  data() {
115
+    return {
116
+      couponList: [
117
+        {
118
+          value: "选项1",
119
+          label: "黄金糕"
120
+        },
121
+        {
122
+          value: "选项2",
123
+          label: "双皮奶"
124
+        }
125
+      ],
126
+      tableData: [
127
+        {
128
+          date: "2022.04.25  14:30",
129
+          name: "滴滴滴",
130
+          headImg:
131
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
132
+          phone: "13346783645",
133
+          numberList: 2,
134
+          price: 100,
135
+          shop: "运用店",
136
+          status: 2
137
+        },
138
+        {
139
+          date: "2022.04.25  14:30",
140
+          name: "滴滴滴",
141
+          headImg:
142
+            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
143
+          phone: "13346783645",
144
+          numberList: 5,
145
+          price: 800,
146
+          shop: "武昌店",
147
+          status: 1
148
+        }
149
+      ],
150
+      statusStr: ["未完成", "代发货", "代使用", "已完成"],
151
+      currentPage1: 1,
152
+      multipleSelection: ""
153
+    };
154
+  },
155
+  computed: {},
156
+  watch: {},
157
+
158
+  methods: {
159
+    handleSizeChange(val) {
160
+      console.log(`每页 ${val} 条`);
161
+    },
162
+    handleCurrentChange(val) {
163
+      console.log(`当前页: ${val}`);
164
+    },
165
+    handleSelectionChange(row, column, event) {},
166
+    onSubmit() {},
167
+    submitFrequency() {}
168
+  },
169
+
170
+  created() {},
171
+
172
+  mounted() {}
173
+};
174
+</script>
175
+
176
+<style lang='less' scoped>
177
+.order {
178
+  height: 100%;
179
+  width: 100%;
180
+  .pagin {
181
+    padding: 20px 0;
182
+    .el-pagination {
183
+      text-align: center;
184
+    }
185
+  }
186
+  .colorList {
187
+    color: green;
188
+  }
189
+}
190
+.classShow1 {
191
+  color: #00EC67;
192
+}
193
+
194
+.classShow0 {
195
+  color: #FF1818;
196
+}
197
+
198
+.priceColor {
199
+  color: #ff3007;
200
+}
201
+</style>

+ 637 - 0
src/pages/historicalOrder/details/index.vue

@@ -0,0 +1,637 @@
1
+<template>
2
+  <div class="mine">
3
+    <div class="left">
4
+      <div class="user-info">
5
+        <div class="user-img"><img :src="userInfo.image"
6
+               alt=""></div>
7
+        <div class="user-span">
8
+          <div class="name">昵称:<span>{{userInfo.name}}</span></div>
9
+          <div class="sex">性别:<span>{{userInfo.sex}}</span></div>
10
+          <div class="age">肤龄:<span>{{userInfo.age}}</span></div>
11
+          <div class="skin-type">肤质:<span>{{userInfo.skinType}}</span></div>
12
+        </div>
13
+      </div>
14
+      <div class="user-record">
15
+        <div class="fraction">
16
+          <div class="title">肌肤得分</div>
17
+          <div class="num">37分</div>
18
+        </div>
19
+        <div class="status">
20
+          <div class="title">皮肤状态</div>
21
+          <div class="tips">肤质一般</div>
22
+        </div>
23
+        <div class="times">
24
+          <div class="title">上传检测时间</div>
25
+          <div class="ts">2022.04.18 16:04</div>
26
+        </div>
27
+      </div>
28
+      <div class="lable">
29
+        <div class="lable-title">
30
+          面诊标签
31
+        </div>
32
+        <div class="lable-list">
33
+          <div v-for="(item,index) in lableList"
34
+               :key="index"
35
+               class='lable-info'>
36
+            {{item.text}}
37
+          </div>
38
+        </div>
39
+      </div>
40
+      <div class="ps">
41
+        <div class="ps-title">
42
+          备注
43
+        </div>
44
+        <div class="ps-text">{{'富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆富婆' | ellipsis(20)}}</div>
45
+      </div>
46
+      <div class="programme">
47
+        <div class="tab">
48
+          <div class="tab-title">执行方案</div>
49
+        </div>
50
+        <div class="programme-list">
51
+          <div :class="['programme-info',item.onSelect?'programme-active':'']"
52
+               v-for="(item,index) in programmeList"
53
+               :key="index"
54
+               @click="onOperation(index)">
55
+            <div class="programme-left">
56
+              <div class="programme-img"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png"
57
+                     alt=""></div>
58
+              <div class="programme-tips">
59
+                <div class="tips-title">{{'【清洁补水】华熙智慧…'|ellipsis(9)}}</div>
60
+                <div class="tips-title">{{'美白、祛痘、抗皱'|ellipsis(9)}}</div>
61
+                <div class="tips-title">仪器:<span>{{'无创水光'|ellipsis(9)}}</span></div>
62
+              </div>
63
+            </div>
64
+            <div class="programme-right">
65
+              <div class="frequency">执行频率:<span>{{item.frequency}}</span></div>
66
+              <div class="duration">持续时长:<span>{{item.duration}}</span></div>
67
+            </div>
68
+            <div class="operation"
69
+                 v-if="item.onSelect">
70
+              <div class="edit">编辑</div>
71
+              <div class="delete">删除</div>
72
+            </div>
73
+          </div>
74
+        </div>
75
+      </div>
76
+    </div>
77
+    <div class="right">
78
+      <div class="shop-info">
79
+        <div class="shpo-name">预约店铺:<span>JOLIJOLI(西安店)</span></div>
80
+        <div class="shpo-address">门店地址:<span>JOLIJOLI(西安店)</span></div>
81
+        <div class="shpo-ts">美容时间:<span>JOLIJOLI(西安店)</span></div>
82
+      </div>
83
+      <div class="project">
84
+        <div class="project-title">
85
+          共<span>3个</span>项目
86
+        </div>
87
+        <div class="project-list">
88
+          <div class="project-info"
89
+               v-for="(item,index) in programmeList"
90
+               :key="index">
91
+            <div class="project-image"><img :src="item.image"></div>
92
+            <div class="project-content">
93
+              <div class="title-price">
94
+                <div class="project-tit">{{item.title | ellipsis(14)}}</div>
95
+                <div class="project-price"><span class="min-size">¥</span>{{item.price}}</div>
96
+              </div>
97
+              <div class="project-tips">{{item.tips}}</div>
98
+              <div class="project-zoom">{{item.zoom}}{{item.ts}}</div>
99
+            </div>
100
+          </div>
101
+        </div>
102
+      </div>
103
+      <div class="cost">
104
+        <div class="cost-title">
105
+          <div>预约费用</div>
106
+          <div>¥399</div>
107
+        </div>
108
+        <div class="cost-coupon-list">
109
+          <div class="coupon">
110
+            <div class="coupon-tips">
111
+              <div class="coupon-icon"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/couponIcon.png"
112
+                     alt=""></div>
113
+              <div class="coupon-title">优惠卷</div>
114
+              <div class="coupon-tip">已选推荐优惠</div>
115
+            </div>
116
+            <div class="on-icon">></div>
117
+          </div>
118
+          <div class="coupon-ps">
119
+            <div>【敏感维稳】多元修护加乘维稳</div>
120
+            <div class="cou-price">-¥100</div>
121
+          </div>
122
+        </div>
123
+        <div class="over-price">
124
+          合计: <span><span class="min-size">¥</span>399<span class="min-size">.00</span></span>
125
+        </div>
126
+      </div>
127
+    </div>
128
+  </div>
129
+</template>
130
+
131
+<script>
132
+
133
+export default {
134
+  data () {
135
+    return {
136
+      userInfo: {
137
+        image: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png",
138
+        name: '张三',
139
+        sex: '女',
140
+        age: '23',
141
+        skinType: '中性皮肤'
142
+      },
143
+      //面部标签
144
+      lableList: [
145
+        {
146
+          text: '对话框的',
147
+          disabled: false
148
+        },
149
+        {
150
+          text: '对话框的',
151
+          disabled: true
152
+        },
153
+        {
154
+          text: '对话框的',
155
+          disabled: false
156
+        },
157
+        {
158
+          text: '对话框的',
159
+          disabled: false
160
+        },
161
+        {
162
+          text: '对话框的',
163
+          disabled: false
164
+        },
165
+        {
166
+          text: '对话框的',
167
+          disabled: false
168
+        },
169
+        {
170
+          text: '对话框的',
171
+          disabled: false
172
+        },
173
+        {
174
+          text: '对话框的',
175
+          disabled: false
176
+        },
177
+        {
178
+          text: '对话框的',
179
+          disabled: false
180
+        },
181
+        {
182
+          text: '对话框的',
183
+          disabled: false
184
+        },
185
+      ],
186
+      //执行方案
187
+      programmeList: [
188
+        {
189
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
190
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
191
+          tips: '+润百颜精华',
192
+          zoom: '皮肤综合仪(30号房)',
193
+          ts: '30分钟',
194
+          price: '79.00'
195
+        },
196
+        {
197
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
198
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
199
+          tips: '+润百颜精华',
200
+          zoom: '皮肤综合仪(30号房)',
201
+          ts: '30分钟',
202
+          price: '79.00'
203
+        },
204
+        {
205
+          image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png',
206
+          title: '水氧活肤华熙智慧玻尿酸基水氧活肤华熙智慧玻尿酸基底',
207
+          tips: '+润百颜精华',
208
+          zoom: '皮肤综合仪(30号房)',
209
+          ts: '30分钟',
210
+          price: '79.00'
211
+        },
212
+      ],
213
+      //项目列表
214
+      projectList: [{
215
+        value: '选项1',
216
+        label: '黄金糕'
217
+      }, {
218
+        value: '选项2',
219
+        label: '双皮奶'
220
+      }, {
221
+        value: '选项3',
222
+        label: '蚵仔煎'
223
+      }, {
224
+        value: '选项4',
225
+        label: '龙须面'
226
+      }, {
227
+        value: '选项5',
228
+        label: '北京烤鸭'
229
+      }],
230
+      timesInfo: '',
231
+      projectInfo: '',
232
+      weekInfo: '',
233
+      programmeIndex: '',
234
+      remarks: '',
235
+      isPupop: false
236
+    };
237
+  },
238
+  computed: {
239
+
240
+  },
241
+  watch: {},
242
+
243
+  methods: {
244
+    onOperation (index) {
245
+      if (this.programmeList[index].onSelect) {
246
+        this.$set(this.programmeList[index], 'onSelect', !this.programmeList[index].onSelect)
247
+      } else {
248
+        this.$set(this.programmeList[index], 'onSelect', true)
249
+      }
250
+    },
251
+    onSubmit () {
252
+
253
+    },
254
+    submitFrequency () { },
255
+  },
256
+
257
+  created () {
258
+
259
+  },
260
+
261
+  mounted () {
262
+
263
+  },
264
+}
265
+
266
+</script>
267
+
268
+<style lang='less' scoped>
269
+.mine {
270
+  height: 100%;
271
+  display: flex;
272
+  .left {
273
+    width: 318px;
274
+    padding: 12px 12px 0 12px;
275
+    background: #ffffff;
276
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
277
+    border-radius: 8px;
278
+    font-size: 13px;
279
+    font-family: PingFangSC-Regular, PingFang SC;
280
+    font-weight: 400;
281
+    color: #999999;
282
+    line-height: 18px;
283
+    overflow: scroll;
284
+    height: 100%;
285
+    .user-info {
286
+      display: flex;
287
+      align-items: center;
288
+      .user-img {
289
+        width: 96px;
290
+        img {
291
+          width: 100%;
292
+          display: block;
293
+        }
294
+      }
295
+      .user-span {
296
+        margin-left: 12px;
297
+
298
+        span {
299
+          color: #333333;
300
+        }
301
+      }
302
+    }
303
+    .user-record {
304
+      margin-top: 16px;
305
+      display: flex;
306
+      justify-content: space-between;
307
+      .num {
308
+        font-size: 18px;
309
+        font-family: OPPOSans-B, OPPOSans;
310
+        font-weight: normal;
311
+        color: #fa7d22;
312
+        line-height: 29px;
313
+      }
314
+      .tips {
315
+        font-size: 13px;
316
+        font-family: PingFangSC-Regular, PingFang SC;
317
+        font-weight: 400;
318
+        color: #333333;
319
+        line-height: 30px;
320
+      }
321
+      .ts {
322
+        font-size: 13px;
323
+        font-family: PingFangSC-Regular, PingFang SC;
324
+        font-weight: 400;
325
+        color: #333333;
326
+        line-height: 30px;
327
+      }
328
+    }
329
+    .lable {
330
+      margin-top: 23px;
331
+      width: 100%;
332
+      overflow: scroll;
333
+      background: #ffffff;
334
+      .lable-title {
335
+        font-size: 14px;
336
+        font-family: PingFangSC-Medium, PingFang SC;
337
+        font-weight: 500;
338
+        color: #333333;
339
+        line-height: 20px;
340
+        margin-bottom: 14px;
341
+      }
342
+      .lable-list {
343
+        width: 100%;
344
+        min-height: 105rpx;
345
+        .lable-info {
346
+          display: inline-block;
347
+          padding: 0 12px;
348
+          margin-left: 10px;
349
+          height: 24px;
350
+          line-height: 24px;
351
+          border-radius: 2px;
352
+          border: 1px solid #d6d6d6;
353
+          margin-bottom: 10px;
354
+        }
355
+        .add-lable {
356
+          display: inline-block;
357
+          width: 27px;
358
+          height: 24px;
359
+          line-height: 24px;
360
+          font-size: 12px;
361
+          font-family: PingFang-SC-Regular, PingFang-SC;
362
+          font-weight: 400;
363
+          color: #333333;
364
+          text-align: center;
365
+          margin-left: 10px;
366
+          border-radius: 2px;
367
+          border: 1px solid #d6d6d6;
368
+        }
369
+      }
370
+      .remarks {
371
+        /deep/ .el-textarea__inner:focus {
372
+          border-color: #fa852f;
373
+        }
374
+      }
375
+    }
376
+    .ps {
377
+      font-size: 14px;
378
+      font-family: PingFangSC-Medium, PingFang SC;
379
+      font-weight: 500;
380
+      color: #333333;
381
+      line-height: 20px;
382
+      .ps-text {
383
+        margin-top: 10px;
384
+        font-size: 12px;
385
+        font-weight: 400;
386
+        color: #666666;
387
+        line-height: 17px;
388
+      }
389
+    }
390
+    .programme {
391
+      margin-top: 20px;
392
+      width: 100%;
393
+      background: #ffffff;
394
+      border-radius: 8px;
395
+
396
+      .tab {
397
+        display: flex;
398
+        align-items: center;
399
+        justify-content: space-between;
400
+        .tab-title {
401
+          font-size: 14px;
402
+          font-family: PingFangSC-Medium, PingFang SC;
403
+          font-weight: 500;
404
+          color: #333333;
405
+          line-height: 20px;
406
+        }
407
+      }
408
+      .programme-list {
409
+        margin-top: 10px;
410
+        position: relative;
411
+        z-index: 1;
412
+        .programme-info {
413
+          position: relative;
414
+          margin-bottom: 10px;
415
+          border-radius: 4px;
416
+          border: 1px solid #f5f5f5;
417
+          display: flex;
418
+          justify-content: space-between;
419
+          padding: 8px 8px 8px 10px;
420
+          align-items: center;
421
+          .programme-left {
422
+            display: flex;
423
+            align-items: center;
424
+            .programme-img {
425
+              width: 48px;
426
+              display: inline-block;
427
+              img {
428
+                width: 100%;
429
+                display: block;
430
+              }
431
+            }
432
+            .programme-tips {
433
+              display: inline-block;
434
+              margin-left: 10px;
435
+              font-size: 10px;
436
+              font-family: PingFangSC-Regular, PingFang SC;
437
+              font-weight: 400;
438
+              color: #999999;
439
+              line-height: 14px;
440
+              zoom: 0.83;
441
+            }
442
+          }
443
+          .programme-right {
444
+            font-size: 12px;
445
+            font-family: PingFangSC-Regular, PingFang SC;
446
+            font-weight: 400;
447
+            color: #333333;
448
+            line-height: 17px;
449
+            .duration {
450
+              margin-top: 14px;
451
+            }
452
+          }
453
+          .operation {
454
+            position: absolute;
455
+            left: 50%;
456
+            transform: translateX(-50%);
457
+            top: 10px;
458
+            z-index: 10;
459
+            width: 44px;
460
+            background: #ffffff;
461
+            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
462
+              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
463
+              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
464
+            border-radius: 2px;
465
+            padding: 10px;
466
+            font-size: 12px;
467
+            font-family: PingFangSC-Regular, PingFang SC;
468
+            font-weight: 400;
469
+            color: #333333;
470
+            line-height: 17px;
471
+            .delete {
472
+              margin-top: 20px;
473
+            }
474
+          }
475
+        }
476
+        .programme-active {
477
+          border: 1px solid #fa852f;
478
+        }
479
+      }
480
+    }
481
+  }
482
+  .right {
483
+    margin-left: 18px;
484
+    position: relative;
485
+    flex: 1;
486
+    .shop-info {
487
+      background: #ffffff;
488
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
489
+      border-radius: 8px;
490
+      padding: 12px;
491
+      font-size: 13px;
492
+      font-family: PingFangSC-Regular, PingFang SC;
493
+      font-weight: 400;
494
+      color: #999999;
495
+      line-height: 28px;
496
+      span {
497
+        font-weight: 500;
498
+        color: #333333;
499
+      }
500
+    }
501
+    .project {
502
+      margin-top: 18px;
503
+      background: #ffffff;
504
+      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
505
+      border-radius: 8px;
506
+      padding: 16px 12px 12px 12px;
507
+      .project-title {
508
+        font-size: 14px;
509
+        font-family: PingFangSC-Medium, PingFang SC;
510
+        font-weight: 500;
511
+        color: #333333;
512
+        line-height: 20px;
513
+        span {
514
+          color: #fa7d22;
515
+        }
516
+      }
517
+      .project-list {
518
+        padding-top: 10px;
519
+        height: 130px;
520
+        overflow: scroll;
521
+        .project-info {
522
+          margin-bottom: 10px;
523
+          display: flex;
524
+          .project-image {
525
+            width: 60px;
526
+            height: 60px;
527
+            img {
528
+              width: 100%;
529
+              display: block;
530
+            }
531
+          }
532
+          .project-content {
533
+            flex: 1;
534
+            margin-left: 10px;
535
+            .title-price {
536
+              display: flex;
537
+              justify-content: space-between;
538
+              font-size: 14px;
539
+              font-family: PingFangSC-Medium, PingFang SC;
540
+              font-weight: 500;
541
+              color: #292929;
542
+              line-height: 22px;
543
+            }
544
+            .project-tips {
545
+              font-size: 12px;
546
+              font-family: PingFangSC-Regular, PingFang SC;
547
+              font-weight: 400;
548
+              color: #999999;
549
+              line-height: 18px;
550
+            }
551
+            .project-zoom {
552
+              font-size: 12px;
553
+              font-family: PingFangSC-Regular, PingFang SC;
554
+              font-weight: 400;
555
+              color: #fa7d22;
556
+              line-height: 18px;
557
+            }
558
+          }
559
+        }
560
+      }
561
+    }
562
+    .cost {
563
+      height: 186px;
564
+      overflow: scroll;
565
+      background: #ffffff;
566
+      border-radius: 8px;
567
+      margin-top: 18px;
568
+      padding: 10px 19px 11px 12px;
569
+      font-size: 14px;
570
+      font-family: PingFangSC-Regular, PingFang SC;
571
+      font-weight: 400;
572
+      color: #333333;
573
+      line-height: 20px;
574
+      .cost-coupon-list {
575
+        height: 110px;
576
+        overflow: scroll;
577
+        border-bottom: 1px solid #f9f9f9;
578
+      }
579
+      .cost-title {
580
+        display: flex;
581
+        justify-content: space-between;
582
+      }
583
+      .coupon {
584
+        margin-top: 10px;
585
+        display: flex;
586
+        justify-content: space-between;
587
+        .coupon-tips {
588
+          display: flex;
589
+          align-items: center;
590
+          .coupon-icon {
591
+            width: 16px;
592
+            img {
593
+              width: 100%;
594
+              display: block;
595
+            }
596
+          }
597
+          .coupon-title {
598
+            margin-left: 3px;
599
+          }
600
+          .coupon-tip {
601
+            margin-left: 10px;
602
+            background: #ffefeb;
603
+            border-radius: 4px;
604
+            border: 1px solid #ff3007;
605
+            font-size: 10px;
606
+            font-family: PingFangSC-Regular, PingFang SC;
607
+            font-weight: 400;
608
+            color: #ff3007;
609
+            line-height: 14px;
610
+            padding: 2px 6px;
611
+            zoom: 0.83;
612
+          }
613
+        }
614
+      }
615
+      .coupon-ps {
616
+        margin-left: -6px;
617
+        margin-top: 11px;
618
+        display: flex;
619
+        justify-content: space-between;
620
+        font-size: 12px;
621
+        font-family: PingFangSC-Regular, PingFang SC;
622
+        font-weight: 400;
623
+        color: #333333;
624
+        line-height: 17px;
625
+        .cou-price {
626
+          font-weight: 500;
627
+          color: #ff3007;
628
+        }
629
+      }
630
+      .over-price {
631
+        margin-top: 14px;
632
+        text-align: right;
633
+      }
634
+    }
635
+  }
636
+}
637
+</style>

+ 188 - 7
src/pages/historicalOrder/index.vue

@@ -1,25 +1,151 @@
1 1
 <template>
2
-  <div>
3
-    historicalOrder
2
+  <div class="mine">
3
+    <div class="condition">
4
+      <el-date-picker v-model="dates"
5
+                      type="daterange"
6
+                      range-separator="->"
7
+                      start-placeholder="开始日期"
8
+                      end-placeholder="结束日期">
9
+      </el-date-picker>
10
+      <el-select class="coupon-select"
11
+                 v-model="coupon"
12
+                 placeholder="项目名称">
13
+        <el-option v-for="item in couponList"
14
+                   :key="item.value"
15
+                   :label="item.label"
16
+                   :value="item.value">
17
+        </el-option>
18
+      </el-select>
19
+      <el-select class="coupon-select"
20
+                 v-model="coupon"
21
+                 placeholder="卡券名称">
22
+        <el-option v-for="item in couponList"
23
+                   :key="item.value"
24
+                   :label="item.label"
25
+                   :value="item.value">
26
+        </el-option>
27
+      </el-select>
28
+
29
+      <el-input placeholder="请输入内容"
30
+                class="search"
31
+                v-model="searchText">
32
+        <i slot="prefix"
33
+           class="el-input__icon el-icon-search"></i>
34
+      </el-input>
35
+      <el-button type="primary"
36
+                 class="searchButton"
37
+                 @click="search">搜索</el-button>
38
+    </div>
39
+
40
+    <div class="user-list">
41
+      <el-table ref="multipleTable"
42
+                :data="tableData"
43
+                tooltip-effect="dark"
44
+                height="354"
45
+                style="width: 100%;border-radius: 8px;"
46
+                @row-click="handleSelectionChange">
47
+        <el-table-column label="头像"
48
+                         width="120">
49
+          <template slot-scope="scope">
50
+            <div class="head-img"><img :src="scope.row.headImg"
51
+                   alt=""></div>
52
+          </template>
53
+        </el-table-column>
54
+        <el-table-column prop="name"
55
+                         label="昵称"
56
+                         width="120">
57
+        </el-table-column>
58
+        <el-table-column prop="phone"
59
+                         label="联系电话"
60
+                         show-overflow-tooltip>
61
+        </el-table-column>
62
+        <el-table-column prop="date"
63
+                         label="预约时间"
64
+                         show-overflow-tooltip>
65
+        </el-table-column>
66
+        <el-table-column prop="date"
67
+                         label="状态"
68
+                         show-overflow-tooltip>
69
+          <template slot-scope="scope">
70
+            <div>{{scope.row.status}}</div>
71
+          </template>
72
+        </el-table-column>
73
+      </el-table>
74
+
75
+      <div class="pagin">
76
+        <el-pagination background
77
+                       layout="prev, pager, next"
78
+                       @size-change="handleSizeChange"
79
+                       @current-change="handleCurrentChange"
80
+                       :current-page.sync="currentPage1"
81
+                       :total="1000">
82
+        </el-pagination>
83
+      </div>
84
+    </div>
4 85
   </div>
5 86
 </template>
6 87
 
7 88
 <script>
8 89
 export default {
9 90
   components: {},
10
-  data() {
11
-    return {};
91
+  data () {
92
+    return {
93
+      searchText: '',
94
+      dates: '',
95
+      coupon: '',
96
+      couponList: [
97
+        {
98
+          value: '选项1',
99
+          label: '黄金糕'
100
+        }, {
101
+          value: '选项2',
102
+          label: '双皮奶'
103
+        }
104
+      ],
105
+      tableData: [{
106
+        date: '2022.04.25  14:30',
107
+        name: '滴滴滴',
108
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
109
+        phone: '13346783645',
110
+        status: '已完成'
111
+      },
112
+      {
113
+        date: '2022.04.25  14:30',
114
+        name: '滴滴滴',
115
+        headImg: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png',
116
+        phone: '13346783645',
117
+        status: '已完成'
118
+      },
119
+
120
+      ],
121
+      currentPage1: 1,
122
+      multipleSelection: ''
123
+
124
+    };
12 125
   },
13 126
   computed: {},
14 127
   watch: {},
15 128
 
16
-  methods: {},
129
+  methods: {
130
+    search () { },
131
+    handleSizeChange (val) {
132
+      console.log(`每页 ${val} 条`);
133
+    },
134
+    handleCurrentChange (val) {
135
+      console.log(`当前页: ${val}`);
136
+    },
137
+    handleSelectionChange (row, column, event) {
138
+      this.$router.push({
139
+        path: '/historicalOrder/details'
140
+      })
141
+    },
142
+  },
17 143
 
18
-  created() {
144
+  created () {
19 145
 
20 146
   },
21 147
 
22
-  mounted() {
148
+  mounted () {
23 149
 
24 150
   },
25 151
 }
@@ -27,5 +153,60 @@ export default {
27 153
 </script>
28 154
 
29 155
 <style lang='less' scoped>
156
+.mine {
157
+  .condition {
158
+    display: flex;
159
+    .coupon-select {
160
+      width: 174px;
161
+      margin-left: 18px;
162
+    }
163
+    .search {
164
+      width: 152px;
165
+      margin-left: 18px;
166
+    }
30 167
 
168
+    .searchButton {
169
+      margin-left: 18px;
170
+      width: 68px;
171
+      background: #fa7d22;
172
+      border-radius: 2px;
173
+      border-color: #fa7d22;
174
+    }
175
+  }
176
+  .user-list {
177
+    margin-top: 18px;
178
+    padding: 0 12px;
179
+    width: 100%;
180
+    background: #ffffff;
181
+    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
182
+    border-radius: 8px;
183
+    .head-img {
184
+      width: 36px;
185
+      height: 36px;
186
+      border-radius: 50%;
187
+
188
+      img {
189
+        width: 100%;
190
+        height: 100%;
191
+      }
192
+    }
193
+    .pagin {
194
+      padding: 20px 0;
195
+      .el-pagination {
196
+        text-align: center;
197
+      }
198
+    }
199
+    /deep/ .el-table th > .cell {
200
+      font-size: 14px !important;
201
+      font-family: PingFangSC-Regular, PingFang SC;
202
+      font-weight: 400;
203
+      color: #999999;
204
+      line-height: 20px;
205
+    }
206
+    /deep/ .el-table td,
207
+    .el-table th.is-leaf {
208
+      border-bottom: none;
209
+    }
210
+  }
211
+}
31 212
 </style>

+ 159 - 4
src/pages/testSkin/details/index.vue

@@ -77,7 +77,8 @@
77 77
       <div class="programme">
78 78
         <div class="tab">
79 79
           <div class="tab-title">执行方案</div>
80
-          <div class="add">新增</div>
80
+          <div class="add"
81
+               @click="isPupop=true">新增</div>
81 82
         </div>
82 83
         <div class="programme-list">
83 84
           <div :class="['programme-info',item.onSelect?'programme-active':'']"
@@ -109,7 +110,49 @@
109 110
            @click="onSubmit">保存</div>
110 111
     </div>
111 112
     <mine-pupop :show="isPupop">
112
-      <div class=""></div>
113
+      <div class="block">
114
+        <div class="delete-pupop"
115
+             @click="isPupop=false"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
116
+               alt=""></div>
117
+        <div class="pupop-title">
118
+          选择执行方案
119
+        </div>
120
+        <el-select v-model="projectInfo"
121
+                   placeholder="请选择项目"
122
+                   class="project-select"
123
+                   size="mini">
124
+          <el-option v-for="item in projectList"
125
+                     :key="item.value"
126
+                     :label="item.label"
127
+                     :value="item.value">
128
+          </el-option>
129
+        </el-select>
130
+        <div class="frequency">
131
+          <div>执行频率:</div>
132
+          <el-select v-model="weekInfo"
133
+                     class="week-select"
134
+                     size="mini">
135
+            <el-option v-for="item in weekList"
136
+                       :key="item.value"
137
+                       :label="item.label"
138
+                       :value="item.value">
139
+            </el-option>
140
+          </el-select>
141
+          <div>周</div>
142
+          <el-select v-model="timesInfo"
143
+                     class="times-select"
144
+                     size="mini">
145
+            <el-option v-for="item in timesList"
146
+                       :key="item.value"
147
+                       :label="item.label"
148
+                       :value="item.value">
149
+            </el-option>
150
+          </el-select>
151
+          <div>次</div>
152
+        </div>
153
+        <div class="submit-frequency"
154
+             @click="submitFrequency">确定</div>
155
+      </div>
113 156
     </mine-pupop>
114 157
   </div>
115 158
 </template>
@@ -185,9 +228,51 @@ export default {
185 228
           duration: '28天'
186 229
         },
187 230
       ],
231
+      //项目列表
232
+      projectList: [{
233
+        value: '选项1',
234
+        label: '黄金糕'
235
+      }, {
236
+        value: '选项2',
237
+        label: '双皮奶'
238
+      }, {
239
+        value: '选项3',
240
+        label: '蚵仔煎'
241
+      }, {
242
+        value: '选项4',
243
+        label: '龙须面'
244
+      }, {
245
+        value: '选项5',
246
+        label: '北京烤鸭'
247
+      }],
248
+      //周期
249
+      weekList: [
250
+        {
251
+          value: '选项1',
252
+          label: '1'
253
+        },
254
+        {
255
+          value: '选项2',
256
+          label: '2'
257
+        },
258
+      ],
259
+      //次数
260
+      timesList: [
261
+        {
262
+          value: '选项1',
263
+          label: '1'
264
+        },
265
+        {
266
+          value: '选项2',
267
+          label: '2'
268
+        },
269
+      ],
270
+      timesInfo: '',
271
+      projectInfo: '',
272
+      weekInfo: '',
188 273
       programmeIndex: '',
189 274
       remarks: '',
190
-      isPupop: true
275
+      isPupop: false
191 276
     };
192 277
   },
193 278
   computed: {
@@ -205,7 +290,8 @@ export default {
205 290
     },
206 291
     onSubmit () {
207 292
 
208
-    }
293
+    },
294
+    submitFrequency () { },
209 295
   },
210 296
 
211 297
   created () {
@@ -526,5 +612,74 @@ export default {
526 612
       color: #ffffff;
527 613
     }
528 614
   }
615
+  .block {
616
+    width: 540px;
617
+    background: #ffffff;
618
+    border-radius: 8px;
619
+    position: relative;
620
+    padding: 42px;
621
+    .delete-pupop {
622
+      position: absolute;
623
+      width: 32px;
624
+      height: 32px;
625
+      top: 5px;
626
+      right: 5px;
627
+      img {
628
+        width: 100%;
629
+        height: 100%;
630
+        display: block;
631
+      }
632
+    }
633
+    .pupop-title {
634
+      font-size: 14px;
635
+      font-family: PingFangSC-Medium, PingFang SC;
636
+      font-weight: 500;
637
+      color: #333333;
638
+      line-height: 20px;
639
+      text-align: center;
640
+    }
641
+    .project-select {
642
+      margin-top: 26px;
643
+      position: relative;
644
+      left: 50%;
645
+      transform: translateX(-50%);
646
+      width: 300px;
647
+    }
648
+    .frequency {
649
+      margin-top: 20px;
650
+      display: flex;
651
+      justify-content: center;
652
+      align-items: center;
653
+      font-size: 14px;
654
+      font-family: PingFangSC-Regular, PingFang SC;
655
+      font-weight: 400;
656
+      color: #333333;
657
+      line-height: 20px;
658
+      .week-select {
659
+        width: 77px;
660
+        margin-right: 8px;
661
+      }
662
+      .times-select {
663
+        width: 77px;
664
+        margin: 0 8px 0 20px;
665
+      }
666
+    }
667
+    .submit-frequency {
668
+      position: relative;
669
+      left: 50%;
670
+      transform: translateX(-50%);
671
+      margin-top: 158px;
672
+      width: 176px;
673
+      height: 28px;
674
+      text-align: center;
675
+      background: #fa7d22;
676
+      border-radius: 14px;
677
+      font-size: 14px;
678
+      font-family: PingFangSC-Medium, PingFang SC;
679
+      font-weight: 500;
680
+      color: #ffffff;
681
+      line-height: 28px;
682
+    }
683
+  }
529 684
 }
530 685
 </style>

+ 9 - 0
src/router/map/home.js

@@ -6,10 +6,15 @@ import Home from '@/pages/home/index.vue'
6 6
 import TestSkin from '@/pages/testSkin/index'
7 7
 import TestSkinDetails from '@/pages/testSkin/details'
8 8
 import CustomerMan from '@/pages/customerMan/index'
9
+import CustomerManDetails from '@/pages/customerMan/details'
9 10
 import HistoricalOrder from '@/pages/historicalOrder/index'
11
+import HistoricalOrderDetails from '@/pages/historicalOrder/details'
10 12
 import ConfirmOrder from '@/pages/confirmOrder/index'
13
+import ConfirmOrderDetails from '@/pages/confirmOrder/details'
11 14
 import StoreDetection from '@/pages/storeDetection/index'
12 15
 import Coupon from '@/pages/coupon/index'
16
+import projectOrder from '@/pages/customerMan/myOrder'
17
+
13 18
 export default {
14 19
   path: '/',
15 20
   name: '首页',
@@ -19,8 +24,12 @@ export default {
19 24
     { path: '/testSkin', component: TestSkin },
20 25
     { path: '/testSkin/details', component: TestSkinDetails },
21 26
     { path: '/customerMan', component: CustomerMan },
27
+    { path: '/customerMan/details', component: CustomerManDetails },
28
+    { path: '/customerMan/projectOrder', component: projectOrder },
22 29
     { path: '/historicalOrder', component: HistoricalOrder },
30
+    { path: '/historicalOrder/details', component: HistoricalOrderDetails },
23 31
     { path: '/confirmOrder', component: ConfirmOrder },
32
+    { path: '/confirmOrder/details', component: ConfirmOrderDetails },
24 33
     { path: '/storeDetection', component: StoreDetection },
25 34
     { path: '/coupon', component: Coupon },
26 35
 

+ 47 - 10
src/style/index.less

@@ -1,32 +1,69 @@
1
-
2 1
 //elementUI 组件样式覆盖
3 2
 
4
-.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
3
+.el-date-table td.in-range div,
4
+.el-date-table td.in-range div:hover,
5
+.el-date-table.is-week-mode .el-date-table__row.current div,
6
+.el-date-table.is-week-mode .el-date-table__row:hover div {
5 7
   background-color: #FFF0E6;
6 8
 }
7
-.el-date-table td.end-date span, .el-date-table td.start-date span {
8
-  background-color:  #FA7D22 !important;
9
+
10
+.el-date-table td.end-date span,
11
+.el-date-table td.start-date span {
12
+  background-color: #FA7D22 !important;
9 13
   border-radius: 2px;
10 14
 }
11
-.el-date-table td.today span{
15
+
16
+.el-date-table td.today span {
12 17
   border-radius: 2px;
13 18
   border: 1px solid #FA7D22;
14 19
   color: #FA7D22;
15 20
 }
16
- .el-date-table td.start-date div{
21
+
22
+.el-date-editor .el-range-separator {
23
+  color: rgba(0, 0, 0, 0.25);
24
+}
25
+
26
+.el-date-table td.start-date div {
17 27
   border-top-left-radius: 2px;
18 28
   border-bottom-left-radius: 2px;
19 29
 }
20
-.el-date-table td.end-date div{
30
+
31
+.el-date-table td.end-date div {
21 32
   border-top-right-radius: 2px;
22 33
   border-bottom-right-radius: 2px;
23 34
 }
24
-.el-date-editor.el-input, .el-date-editor.el-input__inner{
35
+
36
+.el-date-editor.el-input,
37
+.el-date-editor.el-input__inner {
25 38
   width: 280px;
26 39
 }
27
-.el-date-editor .el-range-separator{
40
+
41
+.el-date-editor .el-range-separator {
28 42
   width: 20px;
29 43
 }
30
-.el-pagination.is-background .el-pager li:not(.disabled).active{
44
+
45
+.el-pagination.is-background .el-pager li:not(.disabled).active {
31 46
   background-color: #FA7D22;
47
+}
48
+
49
+.el-select .el-input.is-focus .el-input__inner {
50
+  border: 1px solid #FA7D22;
51
+}
52
+
53
+.el-select .el-input__inner:focus {
54
+  border: 1px solid #FA7D22;
55
+}
56
+
57
+.el-select-dropdown__item.selected {
58
+  color: #FA7D22;
59
+}
60
+
61
+.el-select-dropdown__item.hover,
62
+.el-select-dropdown__item:hover {
63
+  background: #FFF0E6;
64
+}
65
+
66
+.min-size {
67
+  font-size: 12px;
68
+  zoom: 0.83;
32 69
 }