查看 | 历史 | 提交 | 提交对比
long
2021-06-11 4ae5fbee7f608cd85d615ee055a075d51de30e59
提交 | 用户 | age
4ae5fb 1 <template>
L 2   <div class="app-container">
3     <!-- 返回按钮和标题 -->
4     <el-page-header class="mb20" :content="objectName+'详情'" @back="$router.go(-1)" />
5
6     <div class="group-title">基本信息</div>
7     <el-row :gutter="22" class="flex-1">
8       <el-col :span="8"><div class="col-tx">公告名称：</div></el-col>
9       <el-col :span="8"><div class="col-tx">订单编号：</div></el-col>
10       <el-col :span="8">
11         <div class="col-tx flex flex-ver">状态：
12           <span v-if="order" class="status-btn" :class="'status'+order.status">{{ statusOptions[order.status].name }}</span>
13         </div>
14       </el-col>
15       <el-col :span="8"><div class="col-tx">采购企业：</div></el-col>
16       <el-col :span="8"><div class="col-tx">到货期限：</div></el-col>
17     </el-row>
18
19     <div class="flex">
20       <div class="flex-1" />
21       <el-row :gutter="10" class="mb8">
22         <el-col :span="1.5">
23           <el-button
24             size="small"
25             type="primary"
26           >重新压缩</el-button>
27         </el-col>
28         <el-col :span="1.5">
29           <el-button
30             size="small"
31             type="danger"
32           >取消订单</el-button>
33         </el-col>
34       </el-row>
35     </div>
36
37     <!-- 占位符 -->
38     <div style="height: 100px" />
39
40     <!-- upload放大图片 -->
41     <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
42       <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
43     </el-dialog>
44
45     <back-to-top :visibility-height="300" :back-position="50" transition-name="fade" />
46   </div>
47 </template>
48
49 <script>
50 import mixin_Upload from '@/mixins/upload.js'
51 import BackToTop from '@/components/BackToTop'
52 export default {
53   name: 'Demo',
54   components: { BackToTop },
55   mixins: [mixin_Upload],
56   data() {
57     return {
58       id: this.$route.query.id || '',
59       showSearch: true, // 是否显示搜索区
60       keyWord: '', // 搜索区字段，可自行扩展其余字段
61
62       // TODO
63       objectName: 'xx', // 对象名称，用于删除提示、启用提示、弹窗标题等
64
65       // 数据
66       detail: '',
67
68       // 表单校验
69       rules: {}
70     }
71   },
72   mounted() {
73     this.init()
74   },
75   methods: {
76     // 初始化
77     init() {
78       this.getDetail()
79     },
80
81     // 获取列表
82     getDetail() {
83       var { id } = this
84       this.postFN({
85         url: 'admin/student/see',
86         params: {
87           id: id
88         },
89         mockData: {
90           code: 100,
91           msg: '',
92           data: {
93             allergyData: '["花生"]',
94             birthday: '2017-07-13',
95             createTime: '2021-06-10 14:49:15',
96             dayStatus: 0,
97             dayTime: null,
98             fatherName: '黄大大',
99             headImg: 'https://phitab20.oss-cn-shenzhen.aliyuncs.com/imagesUrl/IMG/5162a280-6ed5-4cfb-bb3c-02fc90d30209.jpg',
100             id: 'f8b32dc8c9b711ebb79300163e0133f7',
101             inTime: '2021-06-10 00:00:00',
102             isDel: 0,
103             isUp: 1,
104             linkTel1: '15999971794',
105             linkTel2: '13631419717',
106             motherName: '陈晓晓',
107             name: '黄小雯',
108             numberNo: '0000010',
109             outTime: '2023-07-01 00:00:00',
110             remark: '1111',
111             schoolClassId: '1',
112             sexType: 2,
113             status: 0
114           }
115         }
116       }, (inf) => {
117         this.detail = inf
118       })
119     },
120
121     // 删除
122     handleDelete(item) {
123       // 打开二次确认弹窗
124       this.$confirm('是否确认删除该' + this.objectName + '?', '提示', {
125         confirmButtonText: '确定',
126         cancelButtonText: '取消',
127         type: 'warning'
128       }).then(() => {
129         // 确定回调
130         // TODO url
131         this.postFN({
132           url: 'xxx',
133           params: {
134             id: item.id
135           },
136           mockData: {
137             code: 100,
138             msg: '',
139             data: {}
140           }
141         }, () => {
142           this.getList()
143           this.$messageSuc('删除成功')
144         })
145       }).catch(() => {})
146     },
147     // 修改是否上架
148     handleUpChange(item) {
149       const text = item.isUp === 1 ? '上架' : '下架'
150       this.$confirm('确认要' + text + '该' + this.objectName + '吗?', '提示', {
151         confirmButtonText: '确定',
152         cancelButtonText: '取消',
153         type: 'warning'
154       }).then(() => {
155         // TODO url
156         this.postFN({
157           url: 'xxx',
158           params: {
159             id: item.id,
160             isUp: item.isUp
161           },
162           mockData: {
163             code: 100,
164             msg: '',
165             data: {}
166           }
167         }, () => {
168           this.$messageSuc(text + '成功')
169         }, (res) => {
170           item.isUp = item.isUp === 1 ? 0 : 1
171           this.$messageError(res.msg)
172         })
173       }).catch(() => {
174         item.isUp = item.isUp === 1 ? 0 : 1
175       })
176     }
177   }
178 }
179 </script>
180
181 <style lang="scss" scoped>
182 .line{
183   margin: 20px 0;
184   border-bottom: 1px solid #E7E7E7;
185 }
186 .group-title{
187   margin-bottom: 20px;
188   font-size: 18px;
189   line-height: 30px;
190   color: #000000;
191   padding: 10px 0;
192   border-bottom: 1px solid #E7E7E7;
193   font-weight: bold;
194 }
195 .col-tx{
196   margin-bottom: 20px;
197   line-height: 1.4;
198   .light{
199     color: #0DB9B4;
200   }
201   .editbtn{
202     padding: 4px 15px;
203     font-size: 12px;
204     margin-left: 10px;
205   }
206 }
207 .question-item{
208   margin-bottom: 20px;
209   .title{
210     font-size: 14px;
211     font-weight: bold;
212     line-height: 1.4;
213   }
214   .answer{
215     font-size: 14px;
216     line-height: 1.4;
217     padding: 10px 30px 0;
218   }
219 }
220 </style>