作者 mxd

学员对我的评分

1 <template> 1 <template>
2 <view class="wrap_box"> 2 <view class="wrap_box">
3 - <!-- <uParse v-if="datas" :content="datas"></uParse> -->  
4 - <view class="kq_box">  
5 - <view class="kq_bg dis_flex aic ju_c">  
6 - <image class="kq_bgimg" src="/static/images/tbbj.png" mode="widthFix"></image>  
7 - <view class="">  
8 - <text>{{all_star}}</text>分  
9 - </view>  
10 - </view>  
11 - <view class="pf_num">  
12 - 共{{total}}人评价  
13 - </view>  
14 - <view class="kq_list_box">  
15 - <view class="kq_list">  
16 - <u-empty v-if="datas.length==0"  
17 - mode="data"  
18 - text="暂无数据"  
19 - icon="/static/images/tch/img_blank.png"  
20 - >  
21 - </u-empty>  
22 - <view v-for="(item,index) in datas" class="kq_li">  
23 - <view class="pj_tit">  
24 - 负责任程度  
25 - </view>  
26 - <view class="pj_star dis_flex aic" style="border-bottom: 0;">  
27 - <view class="flex_1 dis_flex aic">  
28 - <text class="icon icon-star" :class="item.star>index1?'active':''" v-for="(item1,index1) in 10"></text>  
29 - </view>  
30 - <view class="star_text">  
31 - <!-- {{active>7?'优秀':active>5?'良好':active>0?'一般':''}} -->  
32 - {{item.star>7?'优秀':item.star>5?'良好':'一般'}}  
33 - </view>  
34 - </view>  
35 - <view class="pj_tit">  
36 - 专业能力(答疑、讲解、课堂组织能力)  
37 - </view>  
38 - <view class="pj_star dis_flex aic">  
39 - <view class="flex_1 dis_flex aic">  
40 - <text class="icon icon-star" :class="item.star_o>index1?'active':''" v-for="(item1,index1) in 10"></text>  
41 - </view>  
42 - <view class="star_text">  
43 - <!-- {{active2>7?'优秀':active2>5?'良好':active2>0?'一般':''}} -->  
44 - {{item.star_o>7?'优秀':item.star_o>5?'良好':'一般'}}  
45 - </view>  
46 - </view>  
47 - <view class="other_box">  
48 - <text class="other_tit">其他评价及建议:</text><text>{{item.content}}</text>  
49 - </view> </view>  
50 - </view>  
51 - </view> 3 + <view class="head">
  4 + <view class="head-bg">
  5 + <image src="/static/imagesV2/tch_index/bg2.png"></image>
  6 + </view>
  7 +
  8 + <view class="head-box">
  9 + <view class="head-item">
  10 + <view class="head-item_content">
  11 + {{all_star}}
  12 + </view>
  13 + <view class="head-item_label">
  14 + 班主任评分(分)
  15 + </view>
  16 + </view>
  17 + <view class="head-line">
  18 +
  19 + </view>
  20 + <view class="head-item">
  21 + <view class="head-item_content">
  22 + {{total}}
  23 + </view>
  24 + <view class="head-item_label">
  25 + 评价人数(人)
  26 + </view>
  27 + </view>
  28 + </view>
  29 +
  30 + </view>
  31 +
  32 +
  33 + <view class="card" v-for="(item,index) in datas" :key="index">
  34 + <view class="cell">
  35 + <view class="cell-label">
  36 + 专业能力(答疑、讲解、课堂组织能力)
  37 + </view>
  38 + <view class="cell-rate">
  39 + <u-rate
  40 + :count="rate.count"
  41 + :activeColor="rate.activeColor"
  42 + :inactiveColor="rate.inactiveColor"
  43 + :value="item.star_o"
  44 + readonly>
  45 + </u-rate>
  46 + <text class="cell-rate_text">
  47 + {{item.star_o>7?'优秀':item.star_o>5?'良好':'一般'}}
  48 + </text>
  49 + </view>
  50 + </view>
  51 +
  52 + <view class="cell">
  53 + <view class="cell-label">
  54 + 负责任程度
  55 + </view>
  56 + <view class="cell-rate">
  57 + <u-rate
  58 + :count="rate.count"
  59 + :activeColor="rate.activeColor"
  60 + :inactiveColor="rate.inactiveColor"
  61 + :value="item.star"
  62 + readonly>
  63 + </u-rate>
  64 + <text class="cell-rate_text">
  65 + {{item.star>7?'优秀':item.star>5?'良好':'一般'}}
  66 + </text>
  67 + </view>
  68 + </view>
  69 +
  70 +
  71 + <view class="cell">
  72 + <view class="cell-content">
  73 + <text class="label">其他评价及建议:</text>
  74 + {{item.content}}
  75 + </view>
  76 + </view>
  77 +
52 </view> 78 </view>
53 79
54 - <!-- 阻止滑动 -->  
55 - <!-- <view @touchmove.stop.prevent='test'></view> -->  
56 </view> 80 </view>
57 </template> 81 </template>
58 82
@@ -67,28 +91,33 @@ @@ -67,28 +91,33 @@
67 data() { 91 data() {
68 return { 92 return {
69 options:'', 93 options:'',
70 - datas:[  
71 - {  
72 - fz:2,  
73 - zy:3  
74 - },  
75 - {  
76 - fz:8,  
77 - zy:9  
78 - },  
79 - {  
80 - fz:5,  
81 - zy:6  
82 - },  
83 - {  
84 - fz:7,  
85 - zy:7  
86 - },  
87 - ],  
88 - allnum:'',  
89 - page:1,  
90 - all_star:0,  
91 - total:0 94 + datas:[
  95 + {
  96 + fz:2,
  97 + zy:3
  98 + },
  99 + {
  100 + fz:8,
  101 + zy:9
  102 + },
  103 + {
  104 + fz:5,
  105 + zy:6
  106 + },
  107 + {
  108 + fz:7,
  109 + zy:7
  110 + },
  111 + ],
  112 + allnum:'',
  113 + page:1,
  114 + all_star:0,
  115 + total:0,
  116 + rate: {
  117 + count: 10,
  118 + activeColor: '#FC7D01',
  119 + inactiveColor: '#D8D8D8'
  120 + }
92 } 121 }
93 }, 122 },
94 computed: { 123 computed: {
@@ -103,81 +132,81 @@ @@ -103,81 +132,81 @@
103 }, 132 },
104 onShow() { 133 onShow() {
105 that.onRetry() 134 that.onRetry()
106 - },  
107 - onReachBottom() {  
108 - that.getdata() 135 + },
  136 + onReachBottom() {
  137 + that.getdata()
109 }, 138 },
110 methods: { 139 methods: {
111 // ...mapMutations(['wxshouquan','login']), 140 // ...mapMutations(['wxshouquan','login']),
112 test(){}, 141 test(){},
113 - onRetry(){  
114 - that.page=1  
115 - that.datas = []  
116 - that.getdata()  
117 - },  
118 - getdata() {  
119 -  
120 - var jkurl="/content/list"  
121 - var datas={  
122 - page:that.page,  
123 - }  
124 - // if(that.data_last == true){  
125 - // return  
126 - // }  
127 - if (that.btnkg == 1) {  
128 - return  
129 - } else {  
130 - that.btnkg = 1  
131 - }  
132 - var page_now=that.page  
133 - that.$service.P_post(jkurl, datas).then(res => {  
134 - that.btnkg = 0  
135 - console.log(res)  
136 - if (res.code == 1) {  
137 - var datas = res.data  
138 - console.log(typeof datas)  
139 -  
140 - if (typeof datas == 'string') {  
141 - datas = JSON.parse(datas)  
142 - }  
143 - that.all_star=datas.all_star||0  
144 - that.total=datas.total||0  
145 - if (page_now == 1) {  
146 -  
147 - that.datas = datas.data  
148 -  
149 - } else {  
150 - if (datas.data.length == 0) {  
151 - that.data_last = true  
152 - return  
153 - }  
154 - that.data_last = false  
155 - that.datas = that.datas.concat(datas.data)  
156 - }  
157 - // that.allnum=datas.allnum  
158 - that.page++  
159 -  
160 - } else {  
161 - if (res.msg) {  
162 - uni.showToast({  
163 - icon: 'none',  
164 - title: res.msg  
165 - })  
166 - } else {  
167 - uni.showToast({  
168 - icon: 'none',  
169 - title: '操作失败'  
170 - })  
171 - }  
172 - }  
173 - }).catch(e => {  
174 - that.btnkg = 0  
175 - console.log(e)  
176 - uni.showToast({  
177 - icon: 'none',  
178 - title: '操作失败'  
179 - })  
180 - }) 142 + onRetry(){
  143 + that.page=1
  144 + that.datas = []
  145 + that.getdata()
  146 + },
  147 + getdata() {
  148 +
  149 + var jkurl="/content/list"
  150 + var datas={
  151 + page:that.page,
  152 + }
  153 + // if(that.data_last == true){
  154 + // return
  155 + // }
  156 + if (that.btnkg == 1) {
  157 + return
  158 + } else {
  159 + that.btnkg = 1
  160 + }
  161 + var page_now=that.page
  162 + that.$service.P_post(jkurl, datas).then(res => {
  163 + that.btnkg = 0
  164 + console.log(res)
  165 + if (res.code == 1) {
  166 + var datas = res.data
  167 + console.log(typeof datas)
  168 +
  169 + if (typeof datas == 'string') {
  170 + datas = JSON.parse(datas)
  171 + }
  172 + that.all_star=datas.all_star||0
  173 + that.total=datas.total||0
  174 + if (page_now == 1) {
  175 +
  176 + that.datas = datas.data
  177 +
  178 + } else {
  179 + if (datas.data.length == 0) {
  180 + that.data_last = true
  181 + return
  182 + }
  183 + that.data_last = false
  184 + that.datas = that.datas.concat(datas.data)
  185 + }
  186 + // that.allnum=datas.allnum
  187 + that.page++
  188 +
  189 + } else {
  190 + if (res.msg) {
  191 + uni.showToast({
  192 + icon: 'none',
  193 + title: res.msg
  194 + })
  195 + } else {
  196 + uni.showToast({
  197 + icon: 'none',
  198 + title: '操作失败'
  199 + })
  200 + }
  201 + }
  202 + }).catch(e => {
  203 + that.btnkg = 0
  204 + console.log(e)
  205 + uni.showToast({
  206 + icon: 'none',
  207 + title: '操作失败'
  208 + })
  209 + })
181 }, 210 },
182 getimg(img){ 211 getimg(img){
183 return service.getimg(img) 212 return service.getimg(img)
@@ -208,111 +237,97 @@ @@ -208,111 +237,97 @@
208 <style lang="scss" scoped> 237 <style lang="scss" scoped>
209 .wrap_box{ 238 .wrap_box{
210 width: 100%; 239 width: 100%;
211 - // padding: 30rpx;  
212 - min-height: 100vh;  
213 - // #ifdef H5  
214 - min-height: calc(100vh - 44px);  
215 - // #endif 240 + padding: 25rpx;
  241 + min-height: 100vh;
  242 + // #ifdef H5
  243 + min-height: calc(100vh - 44px);
  244 + // #endif
216 background: #F8F8F8; 245 background: #F8F8F8;
217 -}  
218 -.kq_box{  
219 - width: 100%;  
220 - position: relative;  
221 - .kq_bg{  
222 - position: relative;  
223 - width: 100%;  
224 - height: 250rpx;  
225 - font-size: 32rpx;  
226 - color: #fff;  
227 - .kq_bgimg{  
228 - position: absolute;  
229 - top: 0;  
230 - z-index: 1;  
231 - width: 100%;  
232 - height: 250rpx;  
233 - font-size: 32rpx;  
234 - color: #fff;  
235 -  
236 -  
237 - }  
238 - view{  
239 - position: relative;  
240 - top: -40rpx;  
241 - z-index: 2;  
242 - text{  
243 - font-size: 72rpx;  
244 - font-weight: bold;  
245 - }  
246 - }  
247 - }  
248 -}  
249 -.kq_list_box{  
250 - width: 100%;  
251 - padding: 30rpx;  
252 - .kq_list{  
253 - width: 100%;  
254 - .kq_li{  
255 - width: 100%;  
256 - padding: 28rpx;  
257 - min-height: 150rpx;  
258 - background: #fff;  
259 - border-radius: 10rpx;  
260 - &+.kq_li{  
261 - // border-top: 1px solid #f8f8f8;  
262 - margin-top: 30rpx;  
263 - }  
264 - .pj_tit{  
265 - font-size: 28rpx;  
266 - font-family: PingFang SC;  
267 - font-weight: 400;  
268 - color: #A9B1C0;  
269 - margin-bottom: 20rpx;  
270 - &.pj_tit1{  
271 - padding-bottom: 34rpx;  
272 - border-bottom: 1px solid #eee;  
273 - }  
274 - }  
275 - .pj_star{  
276 - padding-bottom: 34rpx;  
277 - border-bottom: 1px solid #eee;  
278 - // margin-bottom: 14rpx;  
279 - padding-right: 60rpx;  
280 - text{  
281 - color: #EEEEEE;  
282 - font-size: 36rpx;  
283 - &+text{  
284 - margin-left: 13rpx;  
285 - }  
286 - &.active{  
287 - color: #FF9A18;  
288 - }  
289 - }  
290 - .star_text{  
291 - font-size: 28rpx;  
292 - font-family: PingFang SC;  
293 - font-weight: 400;  
294 - color: #A9B1C0;  
295 - }  
296 - }  
297 - .other_box{  
298 - margin-top: 30rpx;  
299 - font-size: 28rpx;  
300 - font-family: PingFang SC;  
301 - font-weight: 400;  
302 - color: #545D71;  
303 - .other_tit{  
304 - color: #A9B1C0;  
305 - }  
306 - }  
307 - }  
308 - }  
309 -}  
310 -.pf_num{  
311 - font-size: 28rpx;  
312 - font-family: PingFang SC;  
313 - font-weight: 500;  
314 - color: #333333;  
315 - padding: 20rpx 30rpx 0;  
316 - margin-top: -10rpx;  
317 } 246 }
  247 +
  248 +.head {
  249 + position: relative;
  250 + height: 200rpx;
  251 +
  252 + .head-bg {
  253 + width: 100%;
  254 + height: 100%;
  255 + }
  256 + &-box {
  257 + position: absolute;
  258 + top: 0;
  259 + left: 0;
  260 + right: 0;
  261 + bottom: 0;
  262 + display: flex;
  263 + align-items: center;
  264 + }
  265 + &-item {
  266 + flex: 1;
  267 + text-align: center;
  268 + &_label {
  269 + font-size: 26rpx;
  270 + font-family: PingFang SC;
  271 + font-weight: 500;
  272 + color: #FFFFFF;
  273 + }
  274 + &_content {
  275 + font-size: 48rpx;
  276 + font-family: PingFang SC;
  277 + font-weight: bold;
  278 + color: #FFFFFF;
  279 + }
  280 + }
  281 + &-line {
  282 + background: #F2F2F2;
  283 + opacity: 0.2;
  284 + width: 1px;
  285 + height: 50rpx;
  286 + }
  287 +}
  288 +
  289 +.card {
  290 + background: #fff;
  291 + border-radius: 20rpx;
  292 + padding: 30rpx;
  293 + margin-top: 20rpx;
  294 + .cell {
  295 + & + .cell {
  296 + margin-top: 20rpx;
  297 + }
  298 + &-label {
  299 + font-size: 24rpx;
  300 + font-family: PingFang SC;
  301 + font-weight: 500;
  302 + color: #323232;
  303 + }
  304 + &-rate {
  305 + margin-top: 20rpx;
  306 + display: flex;
  307 + align-items: center;
  308 + &_text {
  309 + font-size: 24rpx;
  310 + font-family: PingFang SC;
  311 + font-weight: 500;
  312 + color: #FC5101;
  313 + margin-left: 40rpx;
  314 + }
  315 + }
  316 + &-content {
  317 + background: #F5F6F8;
  318 + border-radius: 20rpx;
  319 + padding: 20rpx;
  320 + font-size: 26rpx;
  321 + font-family: PingFang SC;
  322 + font-weight: 500;
  323 + color: #323232;
  324 + .label {
  325 + color: #979797;
  326 + }
  327 + }
  328 + }
  329 +
  330 +}
  331 +
  332 +
318 </style> 333 </style>