作者 mxd

学员档案:备注信息

1 <template> 1 <template>
2 <view class="wrap_box"> 2 <view class="wrap_box">
3 - <!-- <uParse v-if="datas" :content="datas"></uParse> -->  
4 - <!-- stu_bz_index -->  
5 - <view class="tel_index_bg"></view>  
6 - <view class="bz_box">  
7 - <view class="edit_box">  
8 - <view v-if="options.id" class="edit_tit">  
9 - <text class="edit_type"></text>  
10 - <view class="flex_1">  
11 - <!-- 2022/02/16 16:23:32 --> 3 + <view class="bz-box">
  4 + <view class="edit-box">
  5 + <view class="edit-tit" v-if="options.id" >
  6 + <text class="edit-tit_icon"></text>
  7 + <view class="edit-tit_content">
12 {{time}} 8 {{time}}
13 </view> 9 </view>
14 </view> 10 </view>
15 - <picker v-else @change="bindPickerChange" :value="index" :range="tabs" range-key="title">  
16 - <view class="edit_tit">  
17 - <view class="edit_l"> 11 + <picker @change="bindPickerChange" :value="index" :range="tabs" range-key="title" v-else>
  12 + <view class="cell">
  13 + <view class="cell-label">
18 选择分类 14 选择分类
19 </view> 15 </view>
20 - <view class="edit_r">  
21 - {{tabs[index].title}}<text class="icon icon-xiala"></text> 16 + <view class="cell-content">
  17 + {{tabs[index].title}}
  18 + <view class="icon">
  19 + <u-icon size="24rpx" name="arrow-down"/>
  20 + </view>
22 </view> 21 </view>
23 </view> 22 </view>
24 </picker> 23 </picker>
25 - <view class="edit_bz">  
26 - 备注内容 24 + <view class="cell ">
  25 + <view class="remarks">
  26 + <textarea v-model="content" placeholder="请输入备注的内容" placeholder-class="textarea-placeholder" ></textarea>
  27 + </view>
27 </view> 28 </view>
28 - <textarea class="edit_content" placeholder="请输入备注的内容" v-model="content"></textarea>  
29 </view> 29 </view>
30 30
31 - <view class="bz_add" > 31 + <view class="bz-btn" >
32 <view class="" @click="save_fuc" data-url="/pagesA/stu_bz_edit/stu_bz_edit"> 32 <view class="" @click="save_fuc" data-url="/pagesA/stu_bz_edit/stu_bz_edit">
33 保存 33 保存
34 </view> 34 </view>
35 </view> 35 </view>
36 </view> 36 </view>
37 - <!-- 阻止滑动 -->  
38 - <!-- <view @touchmove.stop.prevent='test'></view> -->  
39 </view> 37 </view>
40 </template> 38 </template>
41 39
@@ -262,80 +260,85 @@ @@ -262,80 +260,85 @@
262 background: #F8F8F8; 260 background: #F8F8F8;
263 position: relative; 261 position: relative;
264 } 262 }
265 -.tel_index_bg{  
266 - position: absolute;  
267 - top: 0;  
268 - z-index: 1;  
269 - width: 100%;  
270 - min-height: 220rpx;  
271 - background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);  
272 -}  
273 -.bz_box{  
274 - width: 100%;  
275 - position: relative;  
276 - z-index: 2; 263 +.bz-box {
277 padding: 30rpx; 264 padding: 30rpx;
278 -}  
279 -.edit_box{  
280 - width: 100%;  
281 - height: 456rpx;  
282 - background: #FFFFFF;  
283 - border-radius: 10rpx;  
284 - margin-bottom: 50rpx; 265 +
  266 + .edit-box {
285 padding: 0 30rpx; 267 padding: 0 30rpx;
286 - .edit_tit{  
287 - width: 100%;  
288 - height: 100rpx;  
289 - border-bottom: 1px solid #eee; 268 + border-radius: 20rpx;
  269 + background-color: #fff;
  270 + .edit-tit {
  271 + font-size: 30rpx;
  272 + font-family: PingFang SC;
  273 + font-weight: 500;
290 display: flex; 274 display: flex;
291 align-items: center; 275 align-items: center;
292 - justify-content: space-between;  
293 - font-size: 28rpx;  
294 - color: #A9B1C0;  
295 - .edit_type{ 276 + padding: 20rpx 0;
  277 + &_icon {
296 width: 14rpx; 278 width: 14rpx;
297 height: 14rpx; 279 height: 14rpx;
298 background: #2D81FF; 280 background: #2D81FF;
299 border-radius: 50%; 281 border-radius: 50%;
300 - margin-right: 10rpx; 282 + margin-right: 20rpx;
301 } 283 }
302 - .edit_l{  
303 - font-size: 32rpx;  
304 - color: #545D71; 284 + &_content {
  285 + flex: 1;
305 } 286 }
306 - .edit_r{ 287 + }
  288 + .cell {
  289 + display: flex;
  290 + align-items: center;
  291 + padding: 20rpx 0;
  292 + .cell-label {
  293 + width: 150rpx;
307 font-size: 30rpx; 294 font-size: 30rpx;
308 - color: #545D71;  
309 - .icon{  
310 - font-size: 20rpx;  
311 - color: rgba(153, 153, 153, .5); 295 + font-family: PingFang SC;
  296 + font-weight: 500;
312 } 297 }
  298 + .cell-content {
  299 + flex: 1;
  300 + display: flex;
  301 + align-items: center;
  302 + justify-content: flex-end;
  303 + font-size: 28rpx;
  304 + font-family: PingFang SC;
  305 + font-weight: 400;
  306 + .icon {
  307 + margin-left: 10rpx;
313 } 308 }
314 } 309 }
315 - .edit_bz{  
316 - margin-top: 25rpx;  
317 - font-size: 32rpx;  
318 - color: #545D71;  
319 } 310 }
320 - .edit_content{ 311 + .remarks {
  312 + width: 100%;
  313 + height: 350rpx;
  314 + font-size: 28rpx;
  315 +
  316 + textarea {
321 width: 100%; 317 width: 100%;
322 - padding: 10rpx 0;  
323 - height: 230rpx;  
324 - font-size: 32rpx; 318 + height: 100%;
  319 + background: #F5F6F8;
  320 + padding: 20rpx;
  321 + box-sizing: border-box;
  322 + }
  323 + :deep(.textarea-placeholder) {
  324 + color: #979797;
  325 + }
  326 + }
325 } 327 }
326 } 328 }
327 -.bz_add{  
328 - width: 100%;  
329 - view{  
330 - font-size: 32rpx;  
331 - color: #FFFFFF;  
332 - width: 100%;  
333 - height: 90rpx; 329 +
  330 +.bz-btn {
  331 + margin: 30rpx;
  332 + view {
  333 + height: 88rpx;
  334 + line-height: 88rpx;
334 background: #2D81FF; 335 background: #2D81FF;
335 - border-radius: 10rpx;  
336 - display: flex;  
337 - align-items: center;  
338 - justify-content: center; 336 + border-radius: 44rpx;
  337 + font-size: 34rpx;
  338 + font-family: PingFang SC;
  339 + font-weight: 500;
  340 + color: #FFFFFF;
  341 + text-align: center;
339 } 342 }
340 } 343 }
341 </style> 344 </style>
1 <template> 1 <template>
2 <view class="wrap_box"> 2 <view class="wrap_box">
3 - <!-- <uParse v-if="datas" :content="datas"></uParse> -->  
4 - <!-- stu_bz_index -->  
5 - <view class="tel_index_bg"></view>  
6 <view class="bz_box"> 3 <view class="bz_box">
7 <view class="bz_tab"> 4 <view class="bz_tab">
8 - <view v-for="(item,index) in tabs" class="tab_li" :class="{active:active==item.id}" @click="setac_fuc(item.id)"> 5 + <view v-for="(item,index) in tabs" :key="index" class="tab_li" :class="{active:active==item.id}" @click="setac_fuc(item.id)">
9 {{item.title}} 6 {{item.title}}
10 </view> 7 </view>
11 </view> 8 </view>
12 - <view class="bz_list">  
13 - <view class="bz_li" v-for="(item,index) in datas">  
14 - <view class="li_msg">  
15 - <view class="li_time">  
16 - <text></text>{{item.create_time}}  
17 - </view>  
18 - <view class="li_inr"> 9 + <view class="list">
  10 + <view class="item" v-for="(item,index) in datas" :key="index">
  11 + <view class="item-remarks">
19 {{item.content}} 12 {{item.content}}
20 </view> 13 </view>
  14 + <view class="item-footer">
  15 + <view class="time">
  16 + {{item.create_time}}
21 </view> 17 </view>
22 - <view class="li_b">  
23 - <view class="li_btn" @click="del_fuc(item)">  
24 - 删除 18 +
  19 + <view
  20 + class="btn"
  21 + @click="$service.jump"
  22 + :data-url="'/pagesA/stu_bz_edit/stu_bz_edit?id='+item.id+'&time='+item.create_time+'&content='+item.content">
  23 + <view class="icon">
  24 + <image src="/static/imagesV2/tch_index/icon11.png" mode=""></image>
25 </view> 25 </view>
26 - <view class="li_btn" @click="$service.jump" :data-url="'/pagesA/stu_bz_edit/stu_bz_edit?id='+item.id+'&time='+item.create_time+'&content='+item.content">  
27 修改 26 修改
28 </view> 27 </view>
  28 + <view class="btn" @click="showDelModal(item)">
  29 + <view class="icon">
  30 + <image src="/static/imagesV2/tch_index/icon12.png" mode=""></image>
  31 + </view>
  32 + 删除
  33 + </view>
29 </view> 34 </view>
30 </view> 35 </view>
31 <view class="bz_li" v-if="datas.length==0"> 36 <view class="bz_li" v-if="datas.length==0">
@@ -42,9 +47,19 @@ @@ -42,9 +47,19 @@
42 添加 47 添加
43 </view> 48 </view>
44 </view> 49 </view>
  50 +
  51 + <u-modal
  52 + :show="show"
  53 + title="提示"
  54 + content="是否删除该备注?"
  55 + @confirm="del_fuc(current)"
  56 + @cancel="show = false"
  57 + :asyncClose="true"
  58 + :showCancelButton="true"
  59 + >
  60 + </u-modal>
  61 +
45 </view> 62 </view>
46 - <!-- 阻止滑动 -->  
47 - <!-- <view @touchmove.stop.prevent='test'></view> -->  
48 </view> 63 </view>
49 </template> 64 </template>
50 65
@@ -76,7 +91,9 @@ @@ -76,7 +91,9 @@
76 id:3 91 id:3
77 }, 92 },
78 ], 93 ],
79 - active:1 94 + active:1,
  95 + show: false,
  96 + current: null
80 } 97 }
81 }, 98 },
82 computed: { 99 computed: {
@@ -102,18 +119,17 @@ @@ -102,18 +119,17 @@
102 that.active=index 119 that.active=index
103 that.onRetry() 120 that.onRetry()
104 }, 121 },
  122 + showDelModal(item) {
  123 + this.show = true;
  124 + this.current = item;
  125 + },
105 del_fuc(item){ 126 del_fuc(item){
106 - uni.showModal({  
107 - title: '提示',  
108 - content: '是否删除该备注',  
109 - success: function (res) {  
110 - if (res.confirm) {  
111 - console.log('用户点击确定');  
112 var datas={ 127 var datas={
113 id: item.id 128 id: item.id
114 } 129 }
115 var jkurl='/teacher/remark_del' 130 var jkurl='/teacher/remark_del'
116 that.$service.P_post(jkurl, datas).then(res => { 131 that.$service.P_post(jkurl, datas).then(res => {
  132 + this.show = false;
117 that.btnkg = 0 133 that.btnkg = 0
118 console.log(res) 134 console.log(res)
119 if (res.code == 1) { 135 if (res.code == 1) {
@@ -147,6 +163,7 @@ @@ -147,6 +163,7 @@
147 } 163 }
148 } 164 }
149 }).catch(e => { 165 }).catch(e => {
  166 + this.show = false;
150 that.htmlReset = 1 167 that.htmlReset = 1
151 that.btnkg = 0 168 that.btnkg = 0
152 // that.$refs.htmlLoading.htmlReset_fuc(1) 169 // that.$refs.htmlLoading.htmlReset_fuc(1)
@@ -156,12 +173,6 @@ @@ -156,12 +173,6 @@
156 title: '获取数据失败,请检查您的网络连接' 173 title: '获取数据失败,请检查您的网络连接'
157 }) 174 })
158 }) 175 })
159 -  
160 - } else if (res.cancel) {  
161 - console.log('用户点击取消');  
162 - }  
163 - }  
164 - });  
165 }, 176 },
166 onRetry(){ 177 onRetry(){
167 that.page=1 178 that.page=1
@@ -270,95 +281,81 @@ @@ -270,95 +281,81 @@
270 // #endif 281 // #endif
271 background: #F8F8F8; 282 background: #F8F8F8;
272 position: relative; 283 position: relative;
  284 + padding-bottom: 130rpx;
273 } 285 }
274 -.tel_index_bg{  
275 - position: absolute;  
276 - top: 0;  
277 - z-index: 1;  
278 - width: 100%;  
279 - min-height: 220rpx;  
280 - background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);  
281 -} 286 +
282 .bz_box{ 287 .bz_box{
283 width: 100%; 288 width: 100%;
284 position: relative; 289 position: relative;
285 - z-index: 2;  
286 - padding: 0 30rpx 30rpx;  
287 } 290 }
288 .bz_tab{ 291 .bz_tab{
289 width: 100%; 292 width: 100%;
290 - height: 90rpx;  
291 display: flex; 293 display: flex;
292 align-items: center; 294 align-items: center;
293 justify-content: space-around; 295 justify-content: space-around;
  296 + background-color: #fff;
  297 + border-top:1rpx solid #f3f4f6;
294 } 298 }
295 .tab_li{ 299 .tab_li{
296 - color: rgba(255, 255, 255, .6);  
297 - font-size: 32rpx; 300 + font-size: 28rpx;
  301 + font-family: PingFang SC;
  302 + font-weight: 500;
  303 + color: #323232;
  304 + padding:30rpx;
298 position: relative; 305 position: relative;
299 - padding: 10rpx 0rpx;  
300 &.active{ 306 &.active{
301 - color: #fff; 307 + color: #2D81FF;
302 &:after{ 308 &:after{
303 - content:''; 309 + content: '';
304 position: absolute; 310 position: absolute;
305 - bottom: 0; 311 + bottom: 8rpx;
306 left: 50%; 312 left: 50%;
307 - margin-left: -19rpx;  
308 - width: 38rpx;  
309 - height: 5rpx;  
310 - background: #FFFFFF;  
311 - border-radius: 3rpx; 313 + background-image: url(@/static/imagesV2/icon23.png);
  314 + background-size: 100% 100%;
  315 + transform: translateX(-50%);
  316 + height: 24rpx;
  317 + width: 24rpx;
312 } 318 }
313 } 319 }
314 } 320 }
315 -.bz_list{  
316 - width: 100%;  
317 - padding-top: 10rpx;  
318 - padding-bottom: 130rpx;  
319 - .bz_li{  
320 - width: 100%;  
321 - // height: 285rpx;  
322 - background: #FFFFFF;  
323 - border-radius: 10rpx;  
324 - &+.bz_li{ 321 +.list{
  322 + margin: 20rpx;
  323 + .item {
  324 + background-color: #fff;
  325 + border-radius: 20rpx;
  326 + padding: 30rpx;
  327 + & + .item {
325 margin-top: 20rpx; 328 margin-top: 20rpx;
326 } 329 }
327 - .li_msg{  
328 - width: 100%;  
329 - padding: 30rpx;  
330 - .li_time{  
331 - font-size: 28rpx;  
332 - color: #A9B1C0; 330 + &-remarks {
  331 + font-size: 26rpx;
  332 + font-family: PingFang SC;
  333 + font-weight: 500;
  334 + color: #323232;
  335 + }
  336 + &-footer {
333 display: flex; 337 display: flex;
334 align-items: center; 338 align-items: center;
335 - text{  
336 - width: 14rpx;  
337 - height: 14rpx;  
338 - background: #2D81FF;  
339 - border-radius: 50%;  
340 - margin-right: 10rpx;  
341 - }  
342 - }  
343 - .li_inr{  
344 - padding-top: 15rpx;  
345 - font-size: 30rpx;  
346 - color: #545D71;  
347 - line-height: 48rpx; 339 + margin-top: 30rpx;
  340 + .time {
  341 + flex: 1;
  342 + font-size: 24rpx;
  343 + font-family: PingFang SC;
  344 + font-weight: 400;
348 } 345 }
349 - }  
350 - .li_b{  
351 - width: 100%;  
352 - height: 90rpx;  
353 - padding: 0 30rpx;  
354 - border-top: 1px solid #eee; 346 + .btn {
355 display: flex; 347 display: flex;
356 align-items: center; 348 align-items: center;
357 - flex-direction: row-reverse;  
358 - .li_btn{  
359 - font-size: 28rpx;  
360 - color: #A9B1C0; 349 + font-size: 26rpx;
  350 + font-family: PingFang SC;
  351 + font-weight: 500;
  352 + color: #646464;
361 margin-left: 30rpx; 353 margin-left: 30rpx;
  354 + .icon {
  355 + margin-right: 10rpx;
  356 + width: 30rpx;
  357 + height: 30rpx;
  358 + }
362 } 359 }
363 } 360 }
364 } 361 }
@@ -367,20 +364,20 @@ @@ -367,20 +364,20 @@
367 width: 100%; 364 width: 100%;
368 position: fixed; 365 position: fixed;
369 bottom: 0; 366 bottom: 0;
370 - background: #f8f8f8; 367 + background: #fff;
371 z-index: 800; 368 z-index: 800;
372 left: 0; 369 left: 0;
373 - padding: 0 30rpx 30rpx;  
374 - view{  
375 - font-size: 32rpx;  
376 - color: #FFFFFF;  
377 - width: 100%;  
378 - height: 90rpx; 370 + padding: 16rpx 26rpx;
  371 + view {
379 background: #2D81FF; 372 background: #2D81FF;
380 - border-radius: 10rpx;  
381 - display: flex;  
382 - align-items: center;  
383 - justify-content: center; 373 + border-radius: 44rpx;
  374 + font-size: 34rpx;
  375 + font-family: PingFang SC;
  376 + font-weight: 500;
  377 + color: #FFFFFF;
  378 + height: 88rpx;
  379 + line-height: 88rpx;
  380 + text-align: center;
384 } 381 }
385 } 382 }
386 </style> 383 </style>