作者 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;  
285 - padding: 0 30rpx;  
286 - .edit_tit{  
287 - width: 100%;  
288 - height: 100rpx;  
289 - border-bottom: 1px solid #eee;  
290 - display: flex;  
291 - align-items: center;  
292 - justify-content: space-between;  
293 - font-size: 28rpx;  
294 - color: #A9B1C0;  
295 - .edit_type{  
296 - width: 14rpx;  
297 - height: 14rpx;  
298 - background: #2D81FF;  
299 - border-radius: 50%;  
300 - margin-right: 10rpx; 265 +
  266 + .edit-box {
  267 + padding: 0 30rpx;
  268 + border-radius: 20rpx;
  269 + background-color: #fff;
  270 + .edit-tit {
  271 + font-size: 30rpx;
  272 + font-family: PingFang SC;
  273 + font-weight: 500;
  274 + display: flex;
  275 + align-items: center;
  276 + padding: 20rpx 0;
  277 + &_icon {
  278 + width: 14rpx;
  279 + height: 14rpx;
  280 + background: #2D81FF;
  281 + border-radius: 50%;
  282 + margin-right: 20rpx;
  283 + }
  284 + &_content {
  285 + flex: 1;
  286 + }
301 } 287 }
302 - .edit_l{  
303 - font-size: 32rpx;  
304 - color: #545D71; 288 + .cell {
  289 + display: flex;
  290 + align-items: center;
  291 + padding: 20rpx 0;
  292 + .cell-label {
  293 + width: 150rpx;
  294 + font-size: 30rpx;
  295 + font-family: PingFang SC;
  296 + font-weight: 500;
  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;
  308 + }
  309 + }
305 } 310 }
306 - .edit_r{  
307 - font-size: 30rpx;  
308 - color: #545D71;  
309 - .icon{  
310 - font-size: 20rpx;  
311 - color: rgba(153, 153, 153, .5); 311 + .remarks {
  312 + width: 100%;
  313 + height: 350rpx;
  314 + font-size: 28rpx;
  315 +
  316 + textarea {
  317 + width: 100%;
  318 + height: 100%;
  319 + background: #F5F6F8;
  320 + padding: 20rpx;
  321 + box-sizing: border-box;
  322 + }
  323 + :deep(.textarea-placeholder) {
  324 + color: #979797;
312 } 325 }
313 } 326 }
314 } 327 }
315 - .edit_bz{  
316 - margin-top: 25rpx;  
317 - font-size: 32rpx;  
318 - color: #545D71;  
319 - }  
320 - .edit_content{  
321 - width: 100%;  
322 - padding: 10rpx 0;  
323 - height: 230rpx;  
324 - font-size: 32rpx;  
325 - }  
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">  
19 - {{item.content}}  
20 - </view> 9 + <view class="list">
  10 + <view class="item" v-for="(item,index) in datas" :key="index">
  11 + <view class="item-remarks">
  12 + {{item.content}}
21 </view> 13 </view>
22 - <view class="li_b">  
23 - <view class="li_btn" @click="del_fuc(item)">  
24 - 删除 14 + <view class="item-footer">
  15 + <view class="time">
  16 + {{item.create_time}}
25 </view> 17 </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"> 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>
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">
32 <u-empty 37 <u-empty
33 - mode="data"  
34 - text="暂无记录"  
35 - icon="/static/images/tch/img_blank.png" 38 + mode="data"
  39 + text="暂无记录"
  40 + icon="/static/images/tch/img_blank.png"
36 > 41 >
37 </u-empty> 42 </u-empty>
38 </view> 43 </view>
@@ -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,66 +119,60 @@ @@ -102,66 +119,60 @@
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={  
113 - id: item.id  
114 - }  
115 - var jkurl='/teacher/remark_del'  
116 - that.$service.P_post(jkurl, datas).then(res => {  
117 - that.btnkg = 0  
118 - console.log(res)  
119 - if (res.code == 1) {  
120 - that.htmlReset = 0  
121 - var datas = res.data  
122 - console.log(typeof datas)  
123 -  
124 - if (typeof datas == 'string') {  
125 - datas = JSON.parse(datas)  
126 - }  
127 - console.log(res)  
128 - uni.showToast({  
129 - icon:'none',  
130 - title:'删除成功'  
131 - })  
132 - setTimeout(function(){  
133 - that.onRetry()  
134 - },1000)  
135 - } else {  
136 -  
137 - if (res.msg) {  
138 - uni.showToast({  
139 - icon: 'none',  
140 - title: res.msg  
141 - })  
142 - } else {  
143 - uni.showToast({  
144 - icon: 'none',  
145 - title: '获取数据失败'  
146 - })  
147 - }  
148 - }  
149 - }).catch(e => {  
150 - that.htmlReset = 1  
151 - that.btnkg = 0  
152 - // that.$refs.htmlLoading.htmlReset_fuc(1)  
153 - console.log(e)  
154 - uni.showToast({  
155 - icon: 'none',  
156 - title: '获取数据失败,请检查您的网络连接'  
157 - }) 127 + var datas={
  128 + id: item.id
  129 + }
  130 + var jkurl='/teacher/remark_del'
  131 + that.$service.P_post(jkurl, datas).then(res => {
  132 + this.show = false;
  133 + that.btnkg = 0
  134 + console.log(res)
  135 + if (res.code == 1) {
  136 + that.htmlReset = 0
  137 + var datas = res.data
  138 + console.log(typeof datas)
  139 +
  140 + if (typeof datas == 'string') {
  141 + datas = JSON.parse(datas)
  142 + }
  143 + console.log(res)
  144 + uni.showToast({
  145 + icon:'none',
  146 + title:'删除成功'
  147 + })
  148 + setTimeout(function(){
  149 + that.onRetry()
  150 + },1000)
  151 + } else {
  152 +
  153 + if (res.msg) {
  154 + uni.showToast({
  155 + icon: 'none',
  156 + title: res.msg
  157 + })
  158 + } else {
  159 + uni.showToast({
  160 + icon: 'none',
  161 + title: '获取数据失败'
158 }) 162 })
159 -  
160 - } else if (res.cancel) {  
161 - console.log('用户点击取消');  
162 } 163 }
163 } 164 }
164 - }); 165 + }).catch(e => {
  166 + this.show = false;
  167 + that.htmlReset = 1
  168 + that.btnkg = 0
  169 + // that.$refs.htmlLoading.htmlReset_fuc(1)
  170 + console.log(e)
  171 + uni.showToast({
  172 + icon: 'none',
  173 + title: '获取数据失败,请检查您的网络连接'
  174 + })
  175 + })
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;  
333 - display: flex;  
334 - 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;  
348 - } 330 + &-remarks {
  331 + font-size: 26rpx;
  332 + font-family: PingFang SC;
  333 + font-weight: 500;
  334 + color: #323232;
349 } 335 }
350 - .li_b{  
351 - width: 100%;  
352 - height: 90rpx;  
353 - padding: 0 30rpx;  
354 - border-top: 1px solid #eee; 336 + &-footer {
355 display: flex; 337 display: flex;
356 align-items: center; 338 align-items: center;
357 - flex-direction: row-reverse;  
358 - .li_btn{  
359 - font-size: 28rpx;  
360 - color: #A9B1C0; 339 + margin-top: 30rpx;
  340 + .time {
  341 + flex: 1;
  342 + font-size: 24rpx;
  343 + font-family: PingFang SC;
  344 + font-weight: 400;
  345 + }
  346 + .btn {
  347 + display: flex;
  348 + align-items: center;
  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>