Skip to content

liuzhen@situdata.com / yunxiao-admin-fe

Go to a project
Toggle navigation
Toggle navigation pinning
8be3f5e9 by zhen
Options

订单详情完成

1 parent 251ce25d
Inline Side-by-side
Showing 2 changed files with 192 additions and 125 deletions
src/views/monitor.vue
1 <template> 1 <template>
2 <div class="order-list"> 2 <Card>
3 <Card class="order-list-card"> 3 <div class="search">
4 <div class="search"> 4 <el-form
5 <el-form 5 class="count-form"
6 class="count-form" 6 ref="ruleForm"
7 ref="ruleForm" 7 size="mini"
8 size="mini" 8 inline
9 inline 9 :model="ruleForm"
10 :model="ruleForm" 10 >
11 > 11 <el-form-item label="营销员姓名" prop="customName">
12 <el-form-item label="营销员姓名" prop="customName"> 12 <el-input
13 <el-input 13 v-model.trim="ruleForm.customName"
14 v-model.trim="ruleForm.customName" 14 placeholder="请输入营销员姓名"
15 placeholder="请输入营销员姓名" 15 maxlength="21"
16 maxlength="21" 16 >
17 > 17 <i slot="prefix" class="el-icon-search"></i
18 <i slot="prefix" class="el-icon-search"></i 18 ></el-input>
19 ></el-input> 19 </el-form-item>
20 </el-form-item> 20 <el-form-item label="营销员工号" prop="customId">
21 <el-form-item label="营销员工号" prop="customId"> 21 <el-input
22 <el-input 22 v-model.trim="ruleForm.customId"
23 v-model.trim="ruleForm.customId" 23 placeholder="请输入营销员工号"
24 placeholder="请输入营销员工号" 24 maxlength="21"
25 maxlength="21" 25 >
26 > 26 <i slot="prefix" class="el-icon-search"></i
27 <i slot="prefix" class="el-icon-search"></i 27 ></el-input>
28 ></el-input> 28 </el-form-item>
29 </el-form-item> 29 <el-form-item label="展业开始时间" prop="times">
30 <el-form-item label="展业开始时间" prop="times"> 30 <el-date-picker
31 <el-date-picker 31 v-model="ruleForm.times"
32 v-model="ruleForm.times" 32 type="daterange"
33 type="daterange" 33 value-format="yyyy-MM-dd"
34 value-format="yyyy-MM-dd" 34 range-separator="至"
35 range-separator="至" 35 start-placeholder="开始日期"
36 start-placeholder="开始日期" 36 end-placeholder="结束日期"
37 end-placeholder="结束日期" 37 ></el-date-picker>
38 ></el-date-picker> 38 </el-form-item>
39 </el-form-item> 39 </el-form>
40 </el-form> 40 </div>
41 </div> 41 <div class="flex-end mb10">
42 <div class="flex-end mb10"> 42 <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
43 <el-button type="primary" size="mini" @click="onSubmit">查询</el-button> 43 <el-button size="mini" @click="onReset">重置</el-button>
44 <el-button size="mini" @click="onReset">重置</el-button> 44 </div>
45 </div> 45 <el-table
46 <el-table 46 class="mb10"
47 class="mb10" 47 :data="tableData"
48 :data="tableData" 48 border
49 border 49 style="width: 100%"
50 style="width: 100%" 50 v-loading="loading"
51 v-loading="loading" 51 >
52 <el-table-column align="center" prop="orderId" label="序号" fixed>
53 </el-table-column>
54 <el-table-column
55 align="center"
56 prop="createTime"
57 label="客户姓名"
58 width="160"
59 >
60 </el-table-column>
61 <el-table-column
62 align="center"
63 prop="callTime"
64 label="客户手机号"
65 width="160"
52 > 66 >
53 <el-table-column align="center" prop="orderId" label="序号" fixed> 67 </el-table-column>
54 </el-table-column> 68 <el-table-column align="center" prop="partnerDesc" label="管理员姓名">
55 <el-table-column 69 </el-table-column>
56 align="center" 70 <el-table-column align="center" prop="customerName" label="营销员工号">
57 prop="createTime" 71 </el-table-column>
58 label="客户姓名" 72 <el-table-column
59 width="160" 73 align="center"
60 > 74 prop="customerPhoneNo"
61 </el-table-column> 75 label="展业时长"
62 <el-table-column 76 width="160"
63 align="center" 77 >
64 prop="callTime" 78 </el-table-column>
65 label="客户手机号" 79 <el-table-column align="center" prop="callType" label="展业开始时间">
66 width="160" 80 </el-table-column>
67 > 81 <el-table-column align="center" label="操作" fixed="right">
68 </el-table-column> 82 <template v-slot="scope">
69 <el-table-column align="center" prop="partnerDesc" label="管理员姓名"> 83 <div>
70 </el-table-column> 84 <el-button type="text" size="small" @click="handleDetail(scope.row)"
71 <el-table-column align="center" prop="customerName" label="营销员工号"> 85 >查看</el-button
72 </el-table-column> 86 >
73 <el-table-column 87 </div>
74 align="center" 88 </template>
75 prop="customerPhoneNo" 89 </el-table-column>
76 label="展业时长" 90 </el-table>
77 width="160" 91 <FooterPaginationfrom
78 > 92 @pager="handleGetPager"
79 </el-table-column> 93 :total="total"
80 <el-table-column align="center" prop="callType" label="展业开始时间"> 94 ></FooterPaginationfrom>
81 </el-table-column> 95 </Card>
82 <el-table-column align="center" label="操作" fixed="right">
83 <template v-slot="scope">
84 <div>
85 <el-button
86 type="text"
87 size="small"
88 @click="handleDetail(scope.row)"
89 >查看</el-button
90 >
91 </div>
92 </template>
93 </el-table-column>
94 </el-table>
95 <FooterPaginationfrom
96 @pager="handleGetPager"
97 :total="total"
98 ></FooterPaginationfrom>
99 </Card>
100 </div>
101 </template> 96 </template>
102 97
103 <script> 98 <script>
...@@ -164,30 +159,26 @@ export default { ...@@ -164,30 +159,26 @@ export default {
164 </script> 159 </script>
165 160
166 <style lang="scss" scoped> 161 <style lang="scss" scoped>
167 .order-list { 162 .search {
168 .order-list-card { 163 .count-form {
169 .search { 164 margin-top: 20px;
170 .count-form { 165 margin-left: 20px;
171 margin-top: 20px; 166 }
172 margin-left: 20px; 167 }
173 } 168 .status {
174 } 169 display: flex;
175 .status { 170 justify-content: center;
176 display: flex; 171 align-items: center;
177 justify-content: center; 172 .dot {
178 align-items: center; 173 margin-right: 6px;
179 .dot { 174 display: inline-block;
180 margin-right: 6px; 175 width: 4px;
181 display: inline-block; 176 height: 4px;
182 width: 4px; 177 border-radius: 50%;
183 height: 4px; 178 background-color: #34c780;
184 border-radius: 50%; 179 }
185 background-color: #34c780; 180 .yellow {
186 } 181 background-color: #ffaa00;
187 .yellow {
188 background-color: #ffaa00;
189 }
190 }
191 } 182 }
192 } 183 }
193 .flex-end { 184 .flex-end {
......
src/views/monitorDetails.vue
1 <template> 1 <template>
2 <Card>dsads</Card> 2 <div class="details">
3 <div class="top mb10">
4 <Card class="info">
5 <h4 class="mb10">客户信息</h4>
6 <div class="item">姓名：刘非法</div>
7 <div class="item">性别：男</div>
8 <div class="item">证件类型：身份证</div>
9 <div class="item">证件号：232303199101294123</div>
10 <div class="item">微信昵称：</div>
11 <div class="item">状态：交流中</div>
12 <div class="item">年收入：7万</div>
13 <div class="item">地址：北京</div>
14 </Card>
15 <div class="video-wrapper">
16 <VideoPlayer></VideoPlayer>
17 </div>
18 </div>
19 <Card class="mb10">
20 <el-form label-width="50px" :model="form">
21 <el-form-item label="备注">
22 <el-input
23 type="textarea"
24 placeholder="请输入"
25 maxlength="200"
26 show-word-limit
27 :autosize="{ minRows: 4, maxRows: 6 }"
28 v-model.trim="form.remarks"
29 ></el-input>
30 </el-form-item>
31 </el-form>
32 </Card>
33 <div class="bottom">
34 <el-button type="primary" @click="handleSubmit">提交</el-button>
35 </div>
36 </div>
3 </template> 37 </template>
4 38
5 <script> 39 <script>
6 export default {} 40 import VideoPlayer from '@/components/videoPlayer'
41
42 export default {
43 components: {
44 VideoPlayer
45 },
46 data() {
47 return {
48 form: {
49 remarks: ''
50 }
51 }
52 },
53 methods: {
54 handleSubmit() {}
55 }
56 }
7 </script> 57 </script>
8 58
9 <style></style> 59 <style lang="scss" scoped>
60 .details {
61 display: flex;
62 flex-flow: column nowrap;
63 .top {
64 display: flex;
65 flex-flow: row nowrap;
66 .info {
67 width: 330px;
68 margin-right: 10px;
69 .item {
70 margin-bottom: 5px;
71 font-size: 14px;
72 }
73 }
74 .video-wrapper {
75 flex: 1 0 300px;
76 // width: 300px;
77 height: 400px;
78 }
79 }
80 .bottom {
81 display: flex;
82 justify-content: center;
83 }
84 }
85 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!