作者 mxd

教师端接口对接

1 <template> 1 <template>
2 <view class="evaluationRecords"> 2 <view class="evaluationRecords">
3 - <view class="answer-item2"> 3 + <view
  4 + class="answer-item2"
  5 + v-for="item in list"
  6 + :key="item.id"
  7 + >
4 <view class="answer-item2-star"> 8 <view class="answer-item2-star">
5 - <u-rate :count="5" :readonly="true" :size="18" activeColor="#fc6402" v-model="value"></u-rate>  
6 - <view class="answer-item2-star-l">4.0</view> 9 + <u-rate :count="5" :readonly="true" :size="16" activeColor="#fc6402" v-model="item.score" readonly ></u-rate>
  10 + <view class="answer-item2-star-l">{{item.score}}</view>
7 </view> 11 </view>
8 <view class="myQuestion-2-i-1"> 12 <view class="myQuestion-2-i-1">
9 <view class="myQuestion-2-i-1-l"> 13 <view class="myQuestion-2-i-1-l">
10 - <image class="myQuestion-2-i-1-l-i" src="@/static/images/tx.png" mode="widthFix"></image> 14 + <view class="myQuestion-2-i-1-l-i" >
  15 + <image
  16 + :src="item.img || '/static/images/tx.png'"
  17 + mode="widthFix">
  18 + </view>
  19 + </image>
11 </view> 20 </view>
12 <view class="myQuestion-2-i-1-r"> 21 <view class="myQuestion-2-i-1-r">
13 - <view class="myQuestion-2-i-1-r-1">李晋心</view>  
14 - <view class="myQuestion-2-i-1-r-2">2023-12-10发布</view> 22 + <view class="myQuestion-2-i-1-r-1">{{item.name}}</view>
  23 + <view class="myQuestion-2-i-1-r-2">{{item.create_time}}发布</view>
15 </view> 24 </view>
16 </view> 25 </view>
17 <view class="myQuestion-2-i-2"> 26 <view class="myQuestion-2-i-2">
18 - 老师你好请问工商管理专业的应届生可以报考工商管理  
19 - 内的二级专业吗?比如说会计学,旅游管理? 27 + {{item.content}}
20 </view> 28 </view>
21 - <view class="myQuestion-2-i-4"> 29 + <!-- <view class="myQuestion-2-i-4">
22 <u--image 30 <u--image
23 v-for="(item, index) in []" 31 v-for="(item, index) in []"
24 :key="index" 32 :key="index"
@@ -27,8 +35,16 @@ @@ -27,8 +35,16 @@
27 width="145rpx" 35 width="145rpx"
28 @click.native="seeImg(index)" 36 @click.native="seeImg(index)"
29 :src="item"></u--image> 37 :src="item"></u--image>
  38 + </view> -->
30 </view> 39 </view>
31 - </view> 40 + <u-loadmore :status="status" v-if="!notData"/>
  41 + <u-empty
  42 + v-if="notData"
  43 + mode="data"
  44 + text="暂无数据"
  45 + icon="/static/imagesV2/icon24.png"
  46 + >
  47 + </u-empty>
32 </view> 48 </view>
33 </template> 49 </template>
34 50
@@ -36,8 +52,73 @@ @@ -36,8 +52,73 @@
36 export default { 52 export default {
37 data() { 53 data() {
38 return { 54 return {
39 - 55 + page: 1,
  56 + list: [],
  57 + // 加载前值为loadmore,加载中为loading,没有数据为nomore
  58 + status: 'loadmore'
40 }; 59 };
  60 + },
  61 + computed: {
  62 + notData() {
  63 + return this.status === 'nomore' && !this.list.length
  64 + }
  65 + },
  66 + onShow() {
  67 + this.onRetry()
  68 + },
  69 + onReachBottom() {
  70 + that.getData()
  71 + },
  72 + methods: {
  73 + onRetry(){
  74 + this.page=1
  75 + this.list = []
  76 + this.getData()
  77 + },
  78 + getData() {
  79 + if(this.status === 'loading') return;
  80 + this.status = 'loading';
  81 + uni.showLoading({
  82 + title: '加载中',
  83 + mask: true
  84 + })
  85 + this.$service.P_get('/lecturer/comment', {
  86 + page: this.page
  87 + }).then(res => {
  88 + uni.hideLoading();
  89 + if (res.code == 1) {
  90 + this.page++;
  91 + this.list = [
  92 + ...this.list,
  93 + ...res.data.data
  94 + ];
  95 + this.status = res.data.data.length < res.data.per_page ? 'nomore' : 'loadmore'
  96 + }else {
  97 + this.status = 'loadmore';
  98 + if (res.msg) {
  99 + uni.showToast({
  100 + icon: 'none',
  101 + title: res.msg
  102 + })
  103 + } else {
  104 + uni.showToast({
  105 + icon: 'none',
  106 + title: '获取数据失败'
  107 + })
  108 + }
  109 + }
  110 +
  111 +
  112 + }).catch(e => {
  113 + this.status = 'loadmore';
  114 + uni.hideLoading()
  115 + uni.showToast({
  116 + icon: 'none',
  117 + title: '获取数据失败,请检查您的网络连接'
  118 + })
  119 + })
  120 + }
  121 +
41 } 122 }
42 } 123 }
43 </script> 124 </script>
@@ -54,8 +135,8 @@ @@ -54,8 +135,8 @@
54 margin-bottom: 20rpx; 135 margin-bottom: 20rpx;
55 .answer-item2-star{ 136 .answer-item2-star{
56 position: absolute; 137 position: absolute;
57 - top: 43rpx;  
58 - right: 29rpx; 138 + top: 30rpx;
  139 + right: 30rpx;
59 display: flex; 140 display: flex;
60 align-items: center; 141 align-items: center;
61 .answer-item2-star-l{ 142 .answer-item2-star-l{
@@ -70,7 +151,8 @@ @@ -70,7 +151,8 @@
70 .myQuestion-2-i-1-l-i{ 151 .myQuestion-2-i-1-l-i{
71 height: 60rpx; 152 height: 60rpx;
72 width: 60rpx; 153 width: 60rpx;
73 - border-radius: 100%; 154 + border-radius: 50%;
  155 + overflow: hidden;
74 } 156 }
75 } 157 }
76 .myQuestion-2-i-1-r{ 158 .myQuestion-2-i-1-r{
1 <template> 1 <template>
2 <view class="onLineDetails"> 2 <view class="onLineDetails">
3 <view class="answer-item2"> 3 <view class="answer-item2">
4 - <view class="answer-item2-star">  
5 - <u-rate :count="5" :readonly="true" :size="18" activeColor="#fc6402" v-model="value"></u-rate>  
6 - <view class="answer-item2-star-l">4.0</view>  
7 - </view> 4 +
8 <view class="myQuestion-2-i-1"> 5 <view class="myQuestion-2-i-1">
9 <view class="myQuestion-2-i-1-l"> 6 <view class="myQuestion-2-i-1-l">
10 - <image class="myQuestion-2-i-1-l-i" src="@/static/images/tx.png" mode="widthFix"></image> 7 + <view class="myQuestion-2-i-1-l-i">
  8 + <image :src="info.img || '/static/images/tx.png'" ></image>
  9 + </view>
11 </view> 10 </view>
  11 +
12 <view class="myQuestion-2-i-1-r"> 12 <view class="myQuestion-2-i-1-r">
13 - <view class="myQuestion-2-i-1-r-1">李晋心</view>  
14 - <view class="myQuestion-2-i-1-r-2">2023-12-10发布</view> 13 + <view class="myQuestion-2-i-1-r-1">
  14 + <view>
  15 + {{info.name || ''}}
  16 + </view>
  17 + <view class="answer-item2-star" v-if="isWatch">
  18 + <u-rate
  19 + :count="5"
  20 + :size="18"
  21 + activeColor="#fc6402"
  22 + :value="3">
  23 + </u-rate>
  24 + <view class="answer-item2-star-l">{{info.score}}</view>
  25 + </view>
  26 + </view>
  27 + <view class="myQuestion-2-i-1-r-2">{{info.create_time || ''}}发布</view>
15 </view> 28 </view>
16 </view> 29 </view>
17 <view class="myQuestion-2-i-2"> 30 <view class="myQuestion-2-i-2">
18 - 老师你好请问工商管理专业的应届生可以报考工商管理  
19 - 内的二级专业吗?比如说会计学,旅游管理? 31 + {{info.question || ''}}
20 </view> 32 </view>
21 - <view class="myQuestion-2-i-4"> 33 + <view class="myQuestion-2-i-4" v-if="info.imgs">
22 <u--image 34 <u--image
23 - v-for="(item, index) in []" 35 + v-for="(item, index) in info.imgs"
24 :key="index" 36 :key="index"
25 radius="15rpx" 37 radius="15rpx"
26 height="145rpx" 38 height="145rpx"
27 width="145rpx" 39 width="145rpx"
28 - @click.native="seeImg(index)" 40 + @click="previewImage(info.imgs,index)"
29 :src="item"></u--image> 41 :src="item"></u--image>
30 </view> 42 </view>
31 - <view class="myQuestion-2-i-3"> 43 + <view class="myQuestion-2-i-3" v-if="isWatch">
32 <view class="myQuestion-2-i-3-c"> 44 <view class="myQuestion-2-i-3-c">
33 <view class="myQuestion-2-i-3-c-1"> 45 <view class="myQuestion-2-i-3-c-1">
34 <view class="myQuestion-2-i-3-c-1-l"> 46 <view class="myQuestion-2-i-3-c-1-l">
35 - <image class="myQuestion-2-i-3-c-1-l-i" src="@/static/images/tx.png" mode="widthFix"></image>  
36 - <text class="myQuestion-2-i-3-c-1-l-t">程菲老师回复</text> 47 + <view class="myQuestion-2-i-3-c-1-l-i">
  48 + <image :src="info.lecturer.img_url || '/static/images/tx.png'" mode="widthFix"></image>
37 </view> 49 </view>
38 - <view class="myQuestion-2-i-3-c-1-r">2023-12-10</view> 50 + <text class="myQuestion-2-i-3-c-1-l-t">{{info.lecturer.title}}老师回复</text>
39 </view> 51 </view>
40 - <view class="myQuestion-2-i-3-c-2">  
41 - 同学你好,这个问题问的好,你说的这些都是不可以报的! 52 + <view class="myQuestion-2-i-3-c-1-r">{{info.answer_time}}</view>
42 </view> 53 </view>
43 - <view style="margin-top: 28rpx;"> 54 + <view style="margin-top: 28rpx;" v-if="isVoiceReply">
44 <VoicePlayback /> 55 <VoicePlayback />
45 </view> 56 </view>
  57 + <view class="myQuestion-2-i-3-c-2" v-else>
  58 + {{info.answer}}
46 </view> 59 </view>
  60 +
47 </view> 61 </view>
48 </view> 62 </view>
49 - <view class="onLineDetails-1"> 63 + </view>
  64 + <view class="onLineDetails-1" v-if="isEdit">
50 <view class="onLineDetails-1-1"> 65 <view class="onLineDetails-1-1">
51 <view class="onLineDetails-1-1-l">解答</view> 66 <view class="onLineDetails-1-1-l">解答</view>
52 <view class="onLineDetails-1-1-r"> 67 <view class="onLineDetails-1-1-r">
@@ -56,17 +71,24 @@ @@ -56,17 +71,24 @@
56 </view> 71 </view>
57 </view> 72 </view>
58 <view class="onLineDetails-1-2" v-if="answerType === MESSAGETYPE.TEXTANSWER"> 73 <view class="onLineDetails-1-2" v-if="answerType === MESSAGETYPE.TEXTANSWER">
59 - <textarea class="onLineDetails-1-2-c" placeholder="请输入" v-model="content_one"></textarea> 74 + <textarea class="onLineDetails-1-2-c" placeholder="请输入" v-model="answer"></textarea>
60 </view> 75 </view>
61 <view v-else> 76 <view v-else>
62 <RecordingDevice /> 77 <RecordingDevice />
63 </view> 78 </view>
64 </view> 79 </view>
  80 +
  81 + <view class="footer" v-if="isEdit">
  82 + <view class="btn" @click="submit">
  83 + 提交
  84 + </view>
  85 + </view>
  86 +
65 </view> 87 </view>
66 </template> 88 </template>
67 89
68 <script> 90 <script>
69 - import { MESSAGETYPE } from "@/emit/index.js" 91 + import { MESSAGETYPE, ANSWERTYPE } from "@/emit/index.js"
70 import RecordingDevice from "@/components/RecordingDevice/index.vue" 92 import RecordingDevice from "@/components/RecordingDevice/index.vue"
71 import VoicePlayback from "@/components/VoicePlayback/index.vue" 93 import VoicePlayback from "@/components/VoicePlayback/index.vue"
72 export default { 94 export default {
@@ -77,16 +99,126 @@ @@ -77,16 +99,126 @@
77 data() { 99 data() {
78 return { 100 return {
79 MESSAGETYPE, 101 MESSAGETYPE,
80 - answerType: MESSAGETYPE.VOICEANSWERS,  
81 - value: 5 102 + id: '',
  103 + answerType: MESSAGETYPE.TEXTANSWER,
  104 + value: 5,
  105 + answer: '',
  106 + info: {}
82 }; 107 };
83 }, 108 },
84 - onHide() {  
85 - 109 + computed: {
  110 + // 是否可编辑
  111 + isEdit() {
  112 + return this.info.answer_type === ANSWERTYPE.TOBEANSWERED
  113 + },
  114 + // 是否查看
  115 + isWatch() {
  116 + return this.info.answer_type === ANSWERTYPE.ANSWERED
  117 + },
  118 + // 是否语音回复
  119 + isVoiceReply() {
  120 + return MESSAGETYPE.VOICEANSWERS === this.info.answer_type
  121 + }
  122 + },
  123 + onLoad(option) {
  124 + this.id = option.id;
  125 + this.getInfo();
86 }, 126 },
87 methods: { 127 methods: {
88 switchItem(type) { 128 switchItem(type) {
89 this.answerType = type 129 this.answerType = type
  130 + },
  131 + previewImage(urls,current) {
  132 + uni.previewImage({
  133 + current,
  134 + urls
  135 + })
  136 + },
  137 + getInfo() {
  138 + uni.showLoading({
  139 + title: '加载中',
  140 + mask: true
  141 + })
  142 + this.$service.P_get('/lecturer/question_info', {
  143 + id: this.id
  144 + }).then(res => {
  145 + uni.hideLoading();
  146 + if (res.code == 1) {
  147 + this.info = res.data;
  148 + }else {
  149 + if (res.msg) {
  150 + uni.showToast({
  151 + icon: 'none',
  152 + title: res.msg
  153 + })
  154 + } else {
  155 + uni.showToast({
  156 + icon: 'none',
  157 + title: '获取数据失败'
  158 + })
  159 + }
  160 + }
  161 +
  162 +
  163 + }).catch(e => {
  164 + uni.hideLoading()
  165 + uni.showToast({
  166 + icon: 'none',
  167 + title: '获取数据失败,请检查您的网络连接'
  168 + })
  169 + })
  170 + },
  171 + // 提交
  172 + submit() {
  173 + uni.showLoading({
  174 + title: '提交中',
  175 + mask: true
  176 + })
  177 + const { answerType, answer, id } = this;
  178 + if(answerType === MESSAGETYPE.TEXTANSWER && !answer) {
  179 + uni.showToast({
  180 + title: '请输入解答内容',
  181 + icon: 'none'
  182 + });
  183 + return false;
  184 + }
  185 +
  186 + this.$service.P_post('/lecturer/answer', {
  187 + answer_type: answerType,
  188 + answer,
  189 + id: id
  190 + }).then(res => {
  191 + uni.hideLoading();
  192 + if (res.code == 1) {
  193 + uni.showToast({
  194 + icon:'none',
  195 + title:'保存成功'
  196 + })
  197 + setTimeout(function(){
  198 + uni.navigateBack()
  199 + },1000)
  200 + }else {
  201 + if (res.msg) {
  202 + uni.showToast({
  203 + icon: 'none',
  204 + title: res.msg
  205 + })
  206 + } else {
  207 + uni.showToast({
  208 + icon: 'none',
  209 + title: '获取数据失败'
  210 + })
  211 + }
  212 + }
  213 +
  214 +
  215 + }).catch(e => {
  216 + uni.hideLoading()
  217 + uni.showToast({
  218 + icon: 'none',
  219 + title: '获取数据失败,请检查您的网络连接'
  220 + })
  221 + })
90 } 222 }
91 } 223 }
92 } 224 }
@@ -94,7 +226,7 @@ @@ -94,7 +226,7 @@
94 226
95 <style lang="scss" scoped> 227 <style lang="scss" scoped>
96 .onLineDetails{ 228 .onLineDetails{
97 - padding: 20rpx 25rpx; 229 + padding: 20rpx 25rpx 140rpx;
98 .answer-item2{ 230 .answer-item2{
99 padding: 30rpx; 231 padding: 30rpx;
100 background-color: #FFFFFF; 232 background-color: #FFFFFF;
@@ -102,11 +234,9 @@ @@ -102,11 +234,9 @@
102 border-radius: 20rpx; 234 border-radius: 20rpx;
103 position: relative; 235 position: relative;
104 .answer-item2-star{ 236 .answer-item2-star{
105 - position: absolute;  
106 - top: 43rpx;  
107 - right: 29rpx;  
108 display: flex; 237 display: flex;
109 align-items: center; 238 align-items: center;
  239 + pointer-events: none;
110 .answer-item2-star-l{ 240 .answer-item2-star-l{
111 font-size: 24rpx; 241 font-size: 24rpx;
112 color: #323232; 242 color: #323232;
@@ -119,15 +249,20 @@ @@ -119,15 +249,20 @@
119 .myQuestion-2-i-1-l-i{ 249 .myQuestion-2-i-1-l-i{
120 height: 60rpx; 250 height: 60rpx;
121 width: 60rpx; 251 width: 60rpx;
122 - border-radius: 100%; 252 + border-radius: 50%;
  253 + overflow: hidden;
123 } 254 }
124 } 255 }
125 .myQuestion-2-i-1-r{ 256 .myQuestion-2-i-1-r{
126 margin-left: 30rpx; 257 margin-left: 30rpx;
  258 + flex: 1;
127 .myQuestion-2-i-1-r-1{ 259 .myQuestion-2-i-1-r-1{
128 font-size: 26rpx; 260 font-size: 26rpx;
129 color: #323232; 261 color: #323232;
130 font-weight: bold; 262 font-weight: bold;
  263 + display: flex;
  264 + align-items: center;
  265 + justify-content: space-between;
131 } 266 }
132 .myQuestion-2-i-1-r-2{ 267 .myQuestion-2-i-1-r-2{
133 font-size: 24rpx; 268 font-size: 24rpx;
@@ -241,4 +376,24 @@ @@ -241,4 +376,24 @@
241 } 376 }
242 } 377 }
243 } 378 }
  379 +
  380 +.footer {
  381 + position: fixed;
  382 + left: 0;
  383 + bottom: 0;
  384 + width: 100%;
  385 + padding: 16rpx 25rpx;
  386 + background-color: #fff;
  387 + .btn {
  388 + height: 88rpx;
  389 + line-height: 88rpx;
  390 + background: #2D81FF;
  391 + border-radius: 44rpx;
  392 + text-align: center;
  393 + font-size: 34rpx;
  394 + font-family: PingFang SC;
  395 + font-weight: 500;
  396 + color: #FFFFFF;
  397 + }
  398 +}
244 </style> 399 </style>