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