作者 mxd

学员档案:备注信息

<template>
<view class="wrap_box">
<!-- <uParse v-if="datas" :content="datas"></uParse> -->
<!-- stu_bz_index -->
<view class="tel_index_bg"></view>
<view class="bz_box">
<view class="edit_box">
<view v-if="options.id" class="edit_tit">
<text class="edit_type"></text>
<view class="flex_1">
<!-- 2022/02/16 16:23:32 -->
<view class="bz-box">
<view class="edit-box">
<view class="edit-tit" v-if="options.id" >
<text class="edit-tit_icon"></text>
<view class="edit-tit_content">
{{time}}
</view>
</view>
<picker v-else @change="bindPickerChange" :value="index" :range="tabs" range-key="title">
<view class="edit_tit">
<view class="edit_l">
<picker @change="bindPickerChange" :value="index" :range="tabs" range-key="title" v-else>
<view class="cell">
<view class="cell-label">
选择分类
</view>
<view class="edit_r">
{{tabs[index].title}}<text class="icon icon-xiala"></text>
<view class="cell-content">
{{tabs[index].title}}
<view class="icon">
<u-icon size="24rpx" name="arrow-down"/>
</view>
</view>
</view>
</picker>
<view class="edit_bz">
备注内容
<view class="cell ">
<view class="remarks">
<textarea v-model="content" placeholder="请输入备注的内容" placeholder-class="textarea-placeholder" ></textarea>
</view>
</view>
<textarea class="edit_content" placeholder="请输入备注的内容" v-model="content"></textarea>
</view>
<view class="bz_add" >
<view class="bz-btn" >
<view class="" @click="save_fuc" data-url="/pagesA/stu_bz_edit/stu_bz_edit">
保存
</view>
</view>
</view>
<!-- 阻止滑动 -->
<!-- <view @touchmove.stop.prevent='test'></view> -->
</view>
</template>
... ... @@ -262,80 +260,85 @@
background: #F8F8F8;
position: relative;
}
.tel_index_bg{
position: absolute;
top: 0;
z-index: 1;
width: 100%;
min-height: 220rpx;
background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
}
.bz_box{
width: 100%;
position: relative;
z-index: 2;
.bz-box {
padding: 30rpx;
}
.edit_box{
width: 100%;
height: 456rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-bottom: 50rpx;
padding: 0 30rpx;
.edit_tit{
width: 100%;
height: 100rpx;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
color: #A9B1C0;
.edit_type{
width: 14rpx;
height: 14rpx;
background: #2D81FF;
border-radius: 50%;
margin-right: 10rpx;
.edit-box {
padding: 0 30rpx;
border-radius: 20rpx;
background-color: #fff;
.edit-tit {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
display: flex;
align-items: center;
padding: 20rpx 0;
&_icon {
width: 14rpx;
height: 14rpx;
background: #2D81FF;
border-radius: 50%;
margin-right: 20rpx;
}
&_content {
flex: 1;
}
}
.edit_l{
font-size: 32rpx;
color: #545D71;
.cell {
display: flex;
align-items: center;
padding: 20rpx 0;
.cell-label {
width: 150rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
}
.cell-content {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
.icon {
margin-left: 10rpx;
}
}
}
.edit_r{
font-size: 30rpx;
color: #545D71;
.icon{
font-size: 20rpx;
color: rgba(153, 153, 153, .5);
.remarks {
width: 100%;
height: 350rpx;
font-size: 28rpx;
textarea {
width: 100%;
height: 100%;
background: #F5F6F8;
padding: 20rpx;
box-sizing: border-box;
}
:deep(.textarea-placeholder) {
color: #979797;
}
}
}
.edit_bz{
margin-top: 25rpx;
font-size: 32rpx;
color: #545D71;
}
.edit_content{
width: 100%;
padding: 10rpx 0;
height: 230rpx;
font-size: 32rpx;
}
}
.bz_add{
width: 100%;
view{
font-size: 32rpx;
color: #FFFFFF;
width: 100%;
height: 90rpx;
.bz-btn {
margin: 30rpx;
view {
height: 88rpx;
line-height: 88rpx;
background: #2D81FF;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 44rpx;
font-size: 34rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
}
}
</style>
... ...
<template>
<view class="wrap_box">
<!-- <uParse v-if="datas" :content="datas"></uParse> -->
<!-- stu_bz_index -->
<view class="tel_index_bg"></view>
<view class="bz_box">
<view class="bz_tab">
<view v-for="(item,index) in tabs" class="tab_li" :class="{active:active==item.id}" @click="setac_fuc(item.id)">
<view v-for="(item,index) in tabs" :key="index" class="tab_li" :class="{active:active==item.id}" @click="setac_fuc(item.id)">
{{item.title}}
</view>
</view>
<view class="bz_list">
<view class="bz_li" v-for="(item,index) in datas">
<view class="li_msg">
<view class="li_time">
<text></text>{{item.create_time}}
</view>
<view class="li_inr">
{{item.content}}
</view>
<view class="list">
<view class="item" v-for="(item,index) in datas" :key="index">
<view class="item-remarks">
{{item.content}}
</view>
<view class="li_b">
<view class="li_btn" @click="del_fuc(item)">
删除
<view class="item-footer">
<view class="time">
{{item.create_time}}
</view>
<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">
<view
class="btn"
@click="$service.jump"
:data-url="'/pagesA/stu_bz_edit/stu_bz_edit?id='+item.id+'&time='+item.create_time+'&content='+item.content">
<view class="icon">
<image src="/static/imagesV2/tch_index/icon11.png" mode=""></image>
</view>
修改
</view>
<view class="btn" @click="showDelModal(item)">
<view class="icon">
<image src="/static/imagesV2/tch_index/icon12.png" mode=""></image>
</view>
删除
</view>
</view>
</view>
<view class="bz_li" v-if="datas.length==0">
<u-empty
mode="data"
text="暂无记录"
icon="/static/images/tch/img_blank.png"
mode="data"
text="暂无记录"
icon="/static/images/tch/img_blank.png"
>
</u-empty>
</view>
... ... @@ -42,9 +47,19 @@
添加
</view>
</view>
<u-modal
:show="show"
title="提示"
content="是否删除该备注?"
@confirm="del_fuc(current)"
@cancel="show = false"
:asyncClose="true"
:showCancelButton="true"
>
</u-modal>
</view>
<!-- 阻止滑动 -->
<!-- <view @touchmove.stop.prevent='test'></view> -->
</view>
</template>
... ... @@ -76,7 +91,9 @@
id:3
},
],
active:1
active:1,
show: false,
current: null
}
},
computed: {
... ... @@ -102,66 +119,60 @@
that.active=index
that.onRetry()
},
showDelModal(item) {
this.show = true;
this.current = item;
},
del_fuc(item){
uni.showModal({
title: '提示',
content: '是否删除该备注',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
var datas={
id: item.id
}
var jkurl='/teacher/remark_del'
that.$service.P_post(jkurl, datas).then(res => {
that.btnkg = 0
console.log(res)
if (res.code == 1) {
that.htmlReset = 0
var datas = res.data
console.log(typeof datas)
if (typeof datas == 'string') {
datas = JSON.parse(datas)
}
console.log(res)
uni.showToast({
icon:'none',
title:'删除成功'
})
setTimeout(function(){
that.onRetry()
},1000)
} else {
if (res.msg) {
uni.showToast({
icon: 'none',
title: res.msg
})
} else {
uni.showToast({
icon: 'none',
title: '获取数据失败'
})
}
}
}).catch(e => {
that.htmlReset = 1
that.btnkg = 0
// that.$refs.htmlLoading.htmlReset_fuc(1)
console.log(e)
uni.showToast({
icon: 'none',
title: '获取数据失败,请检查您的网络连接'
})
var datas={
id: item.id
}
var jkurl='/teacher/remark_del'
that.$service.P_post(jkurl, datas).then(res => {
this.show = false;
that.btnkg = 0
console.log(res)
if (res.code == 1) {
that.htmlReset = 0
var datas = res.data
console.log(typeof datas)
if (typeof datas == 'string') {
datas = JSON.parse(datas)
}
console.log(res)
uni.showToast({
icon:'none',
title:'删除成功'
})
setTimeout(function(){
that.onRetry()
},1000)
} else {
if (res.msg) {
uni.showToast({
icon: 'none',
title: res.msg
})
} else {
uni.showToast({
icon: 'none',
title: '获取数据失败'
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}).catch(e => {
this.show = false;
that.htmlReset = 1
that.btnkg = 0
// that.$refs.htmlLoading.htmlReset_fuc(1)
console.log(e)
uni.showToast({
icon: 'none',
title: '获取数据失败,请检查您的网络连接'
})
})
},
onRetry(){
that.page=1
... ... @@ -270,95 +281,81 @@
// #endif
background: #F8F8F8;
position: relative;
padding-bottom: 130rpx;
}
.tel_index_bg{
position: absolute;
top: 0;
z-index: 1;
width: 100%;
min-height: 220rpx;
background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
}
.bz_box{
width: 100%;
position: relative;
z-index: 2;
padding: 0 30rpx 30rpx;
}
.bz_tab{
width: 100%;
height: 90rpx;
display: flex;
align-items: center;
justify-content: space-around;
background-color: #fff;
border-top:1rpx solid #f3f4f6;
}
.tab_li{
color: rgba(255, 255, 255, .6);
font-size: 32rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #323232;
padding:30rpx;
position: relative;
padding: 10rpx 0rpx;
&.active{
color: #fff;
color: #2D81FF;
&:after{
content:'';
content: '';
position: absolute;
bottom: 0;
bottom: 8rpx;
left: 50%;
margin-left: -19rpx;
width: 38rpx;
height: 5rpx;
background: #FFFFFF;
border-radius: 3rpx;
background-image: url(@/static/imagesV2/icon23.png);
background-size: 100% 100%;
transform: translateX(-50%);
height: 24rpx;
width: 24rpx;
}
}
}
.bz_list{
width: 100%;
padding-top: 10rpx;
padding-bottom: 130rpx;
.bz_li{
width: 100%;
// height: 285rpx;
background: #FFFFFF;
border-radius: 10rpx;
&+.bz_li{
.list{
margin: 20rpx;
.item {
background-color: #fff;
border-radius: 20rpx;
padding: 30rpx;
& + .item {
margin-top: 20rpx;
}
.li_msg{
width: 100%;
padding: 30rpx;
.li_time{
font-size: 28rpx;
color: #A9B1C0;
display: flex;
align-items: center;
text{
width: 14rpx;
height: 14rpx;
background: #2D81FF;
border-radius: 50%;
margin-right: 10rpx;
}
}
.li_inr{
padding-top: 15rpx;
font-size: 30rpx;
color: #545D71;
line-height: 48rpx;
}
&-remarks {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #323232;
}
.li_b{
width: 100%;
height: 90rpx;
padding: 0 30rpx;
border-top: 1px solid #eee;
&-footer {
display: flex;
align-items: center;
flex-direction: row-reverse;
.li_btn{
font-size: 28rpx;
color: #A9B1C0;
margin-top: 30rpx;
.time {
flex: 1;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
}
.btn {
display: flex;
align-items: center;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #646464;
margin-left: 30rpx;
.icon {
margin-right: 10rpx;
width: 30rpx;
height: 30rpx;
}
}
}
}
... ... @@ -367,20 +364,20 @@
width: 100%;
position: fixed;
bottom: 0;
background: #f8f8f8;
background: #fff;
z-index: 800;
left: 0;
padding: 0 30rpx 30rpx;
view{
font-size: 32rpx;
color: #FFFFFF;
width: 100%;
height: 90rpx;
padding: 16rpx 26rpx;
view {
background: #2D81FF;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 44rpx;
font-size: 34rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
height: 88rpx;
line-height: 88rpx;
text-align: center;
}
}
</style>
... ...