Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
487b9a41 1 parent 2a933e95

fix 评论功能细节调整

Inline Side-by-side
Showing 4 changed files with 172 additions and 77 deletions
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 <van-row> 25 <van-row>
26 <van-col span="16"> 26 <van-col span="16">
27 <p v-if="type === 'comment'" style="padding: 1rem; padding-top: 0;">请写下你友善的留言：</p> 27 <p v-if="type === 'comment'" style="padding: 1rem; padding-top: 0;">请写下你友善的留言：</p>
28 - <p v-else style="padding: 1rem; padding-top: 0;">回复<span style="color: #0B3A72;">@是妮妮吖～：</span></p> 28 + <p v-else style="padding: 1rem; padding-top: 0;">回复<span style="color: #0B3A72;">@{{ replayUser }}：</span></p>
29 </van-col> 29 </van-col>
30 <van-col span="8"> 30 <van-col span="8">
31 <div class="button-primary-comment" @click="submitComment">发送</div> 31 <div class="button-primary-comment" @click="submitComment">发送</div>
...@@ -66,7 +66,7 @@ import { ref, reactive, onMounted } from 'vue' ...@@ -66,7 +66,7 @@ import { ref, reactive, onMounted } from 'vue'
66 66
67 <script> 67 <script>
68 export default { 68 export default {
69 - props: ['showPopup', 'type'], 69 + props: ['showPopup', 'type', 'replayUser'],
70 data () { 70 data () {
71 return { 71 return {
72 show: false, 72 show: false,
......
1 <template> 1 <template>
2 <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: '70%' }"> 2 <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: '70%' }">
3 - <div class="van-hairline--bottom"> 3 + <div style="position: relative;">
4 + <div class="van-hairline--bottom" style="position: fixed; width: 100%; background-color: white; border-radius: 10px; z-index: 999;">
4 <van-row> 5 <van-row>
5 <van-col span="4" @click="onReload"> 6 <van-col span="4" @click="onReload">
6 <div style="padding: 1rem; text-align: center;"> 7 <div style="padding: 1rem; text-align: center;">
7 - <van-icon :name="icon_x" size="1.25rem" /> 8 + <!-- <van-icon :name="icon_x" size="1.25rem" /> -->
8 </div> 9 </div>
9 </van-col> 10 </van-col>
10 <van-col span="16" style="color: #222222; text-align: center; line-height: 3;"> 11 <van-col span="16" style="color: #222222; text-align: center; line-height: 3;">
...@@ -17,6 +18,7 @@ ...@@ -17,6 +18,7 @@
17 </van-col> 18 </van-col>
18 </van-row> 19 </van-row>
19 </div> 20 </div>
21 + <div style="height: 4rem;"></div>
20 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false"> 22 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
21 <template v-for="(item, key) in replyList" :key="key"> 23 <template v-for="(item, key) in replyList" :key="key">
22 <div class="comment-wrapper"> 24 <div class="comment-wrapper">
...@@ -29,7 +31,7 @@ ...@@ -29,7 +31,7 @@
29 <p>{{ item.kg_name }}</p> 31 <p>{{ item.kg_name }}</p>
30 </van-col> 32 </van-col>
31 <van-col span="6" style="text-align: right;"> 33 <van-col span="6" style="text-align: right;">
32 - <p style="color: #333333;">回复</p> 34 + <p @click="setComment(item, 'reply')" style="color: #333333;">回复</p>
33 <p>{{ item.comment_time }}</p> 35 <p>{{ item.comment_time }}</p>
34 </van-col> 36 </van-col>
35 </van-row> 37 </van-row>
...@@ -41,7 +43,8 @@ ...@@ -41,7 +43,8 @@
41 </div> 43 </div>
42 </template> 44 </template>
43 </van-list> 45 </van-list>
44 - <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-close="closeCommentBox"></comment-box> 46 + </div>
47 + <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
45 </van-popup> 48 </van-popup>
46 49
47 50
...@@ -58,73 +61,111 @@ import _ from 'lodash' ...@@ -58,73 +61,111 @@ import _ from 'lodash'
58 import { Toast } from 'vant'; 61 import { Toast } from 'vant';
59 62
60 import { ref, reactive, onMounted } from 'vue' 63 import { ref, reactive, onMounted } from 'vue'
61 -// const props = defineProps({ 64 +// 获取是否实名认证
62 -// showPopup: Boolean 65 +import { idCard } from '@/composables/useValidIdCard.js'
63 -// }) 66 +const validIdCard = idCard();
67 +
68 +const props = defineProps({
69 + showPopup: Boolean,
70 + data: Object
71 +})
64 72
73 +/******** 留言框相关操作 START *******/
65 // 回复评论控件 74 // 回复评论控件
66 const showCommentBoxPopup = ref(false); 75 const showCommentBoxPopup = ref(false);
67 const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复 76 const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
68 -const flag = true; // 后台接口判断是否上传过作品 77 +
69 -// 实际调试时，点击回复需要判断是否上传过作品 78 +/**
70 -const setComment = (v, type) => { // 回复/评论 79 + * 回复/评论 功能
71 - if (flag) { 80 + * @param {*} v 单行评论数据
81 + * @param {*} type 类型 comment 为评论/类型 reply 为回复
82 + */
83 +const commentId = ref('')
84 +const replayUser = ref('')
85 +const setComment = (v, type) => { //
86 + if (validIdCard.can_use) {
72 showCommentBoxPopup.value = true; 87 showCommentBoxPopup.value = true;
73 commentType.value = type; 88 commentType.value = type;
89 + replayUser.value = v.name;
90 + commentId.value = props.data.id;
74 } else { 91 } else {
75 showNotice.value = true; 92 showNotice.value = true;
76 } 93 }
77 } 94 }
78 -const closeCommentBox = (v) => { // 查看更多回复 95 +
96 +/**
97 + * 提交留言回调
98 + * @param {*} note 留言内容
99 + */
100 +const submitCommentBox = (note) => {
101 + let url = '';
102 + let data = {}
103 + // 判断是留言还是回复 动态调整接口名称
104 + if (commentType.value === 'comment') {
105 + url = 'add_comment';
106 + data = {
107 + prod_id: $route.query.prod_id,
108 + note
109 + }
110 + } else {
111 + url = 'add_reply';
112 + data = {
113 + comment_id: commentId.value,
114 + note
115 + }
116 + }
117 + axios.post(`/srv/?a=${url}`, data)
118 + .then(res => {
119 + if (res.data.code === 1) {
120 + showCommentBoxPopup.value = false;
121 + Toast.success('发布成功')
122 + onReload()
123 + } else {
124 + console.warn(res);
125 + Toast({
126 + icon: 'close',
127 + message: res.data.msg
128 + });
129 + }
130 + })
131 + .catch(err => {
132 + console.error(err);
133 + })
134 +}
135 +
136 +const closeCommentBox = (v) => { // 关闭留言框
79 showCommentBoxPopup.value = v; 137 showCommentBoxPopup.value = v;
80 } 138 }
139 +/******** 留言框相关操作 START *******/
81 140
82 onMounted(() => { 141 onMounted(() => {
83 }) 142 })
84 -</script>
85 143
86 -<script> 144 +const show = ref(false);
87 -export default { 145 +const replyList = ref([])
88 - props: ['showPopup', 'data'], 146 +const loading = ref(false)
89 - data() { 147 +const finished = ref(false)
90 - return { 148 +const limit = ref(10)
91 - show: false, 149 +const offset = ref(0)
92 - replyList: [], 150 +
93 - loading: false, 151 +const onLoad = () => {
94 - finished: false,
95 - limit: 10,
96 - offset: 0,
97 - }
98 - },
99 - mounted() {
100 - },
101 - watch: {
102 - showPopup(value, pre) {
103 - if (value) {
104 - this.show = value;
105 - this.onReload()
106 - }
107 - }
108 - },
109 - methods: {
110 - onLoad () {
111 // 异步更新数据 152 // 异步更新数据
112 axios.get('/srv/?a=reply_list', { 153 axios.get('/srv/?a=reply_list', {
113 params: { 154 params: {
114 - comment_id: this.data.id, 155 + comment_id: props.data.id,
115 - limit: this.limit, 156 + limit: limit.value,
116 - offset: this.offset 157 + offset: offset.value
117 } 158 }
118 }) 159 })
119 .then(res => { 160 .then(res => {
120 if (res.data.code === 1) { 161 if (res.data.code === 1) {
121 - this.replyList = _.concat(this.replyList, res.data.data.replylist); 162 + replyList.value = _.concat(replyList.value, res.data.data.replylist);
122 - this.offset = this.replyList.length; 163 + offset.value = replyList.value.length;
123 - this.loading = false; 164 + loading.value = false;
124 // 数据全部加载完成 165 // 数据全部加载完成
125 if (!res.data.data.replylist.length) { 166 if (!res.data.data.replylist.length) {
126 // 加载状态结束 167 // 加载状态结束
127 - this.finished = true; 168 + finished.value = true;
128 } 169 }
129 } else { 170 } else {
130 console.warn(res); 171 console.warn(res);
...@@ -137,15 +178,34 @@ export default { ...@@ -137,15 +178,34 @@ export default {
137 .catch(err => { 178 .catch(err => {
138 console.error(err); 179 console.error(err);
139 }) 180 })
181 +}
182 +const onReload = () => {
183 + replyList.value = [];
184 + offset.value = 0;
185 + onLoad();
186 +}
187 +const onClose = () => {
188 + show.value = false;
189 +}
190 +</script>
191 +
192 +<script>
193 +export default {
194 + data() {
195 + return {
196 + }
140 }, 197 },
141 - onReload () { 198 + mounted() {
142 - this.replyList = [];
143 - this.offset = 0;
144 - this.onLoad();
145 }, 199 },
146 - onClose() { 200 + watch: {
147 - this.show = false; 201 + showPopup(value, pre) {
202 + if (value) {
203 + this.show = value;
204 + this.onReload()
205 + }
206 + }
148 }, 207 },
208 + methods: {
149 closeBtn() { 209 closeBtn() {
150 this.$emit('on-close', false) 210 this.$emit('on-close', false)
151 this.show = false; 211 this.show = false;
......
...@@ -2,12 +2,15 @@ import { createApp } from 'vue'; ...@@ -2,12 +2,15 @@ import { createApp } from 'vue';
2 import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog } from 'vant'; 2 import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog } from 'vant';
3 import router from './router'; 3 import router from './router';
4 import App from './App.vue'; 4 import App from './App.vue';
5 -import axios from './utils/axios'; 5 +// import axios from './utils/axios';
6 +import axios from '@/utils/axios';
6 import { createPinia } from 'pinia'; 7 import { createPinia } from 'pinia';
7 8
8 const pinia = createPinia(); 9 const pinia = createPinia();
9 const app = createApp(App); 10 const app = createApp(App);
10 11
12 +app.config.globalProperties.$http = axios; // 关键语句
13 +
11 app.use(pinia); 14 app.use(pinia);
12 app.use(router); 15 app.use(router);
13 app.use(Button); 16 app.use(Button);
...@@ -39,6 +42,4 @@ app.use(Dialog); ...@@ -39,6 +42,4 @@ app.use(Dialog);
39 42
40 app.use(ConfigProvider); 43 app.use(ConfigProvider);
41 44
42 -app.config.globalProperties.$http = axios; // 关键语句
43 -
44 app.mount('#app'); 45 app.mount('#app');
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 <p v-if="reply.reply_to"><span>{{ reply.name }}</span>&nbsp;回复&nbsp;<span>@{{ reply.reply_to }}：</span><span class="content">{{ reply.note }}</span></p> 28 <p v-if="reply.reply_to"><span>{{ reply.name }}</span>&nbsp;回复&nbsp;<span>@{{ reply.reply_to }}：</span><span class="content">{{ reply.note }}</span></p>
29 <p v-else><span>{{ reply.name }}：</span><span class="content">{{ reply.note }}</span></p> 29 <p v-else><span>{{ reply.name }}：</span><span class="content">{{ reply.note }}</span></p>
30 </template> 30 </template>
31 - <p v-if="item.total !== reply_limit" @click="getMore(item)">共{{ item.total }}条回复 ></p> 31 + <p v-if="item.total >= reply_limit" @click="getReplyList(item)">共{{ item.total }}条回复 ></p>
32 </div> 32 </div>
33 </van-col> 33 </van-col>
34 </van-row> 34 </van-row>
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
41 </div> 41 </div>
42 </div> 42 </div>
43 <comment-list :showPopup="showCommentListPopup" :data="commentData" @on-close="closeCommentList"></comment-list> 43 <comment-list :showPopup="showCommentListPopup" :data="commentData" @on-close="closeCommentList"></comment-list>
44 - <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box> 44 + <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
45 45
46 <!-- 写评论时，如果没有上传作品提示弹框 --> 46 <!-- 写评论时，如果没有上传作品提示弹框 -->
47 <van-overlay :show="showNotice" z-index="1000"> 47 <van-overlay :show="showNotice" z-index="1000">
...@@ -90,13 +90,12 @@ const $route = useRoute(); ...@@ -90,13 +90,12 @@ const $route = useRoute();
90 const $router = useRouter(); 90 const $router = useRouter();
91 91
92 92
93 -// 查询留言接口数据 93 +/******** 留言列表相关操作 START *******/
94 const loading = ref(false); 94 const loading = ref(false);
95 const finished = ref(false); 95 const finished = ref(false);
96 const limit = ref(5) 96 const limit = ref(5)
97 const offset = ref(0) 97 const offset = ref(0)
98 const reply_limit = ref(3) 98 const reply_limit = ref(3)
99 -
100 const commentList = ref([]) 99 const commentList = ref([])
101 100
102 const onLoad = () => { 101 const onLoad = () => {
...@@ -133,8 +132,6 @@ const onLoad = () => { ...@@ -133,8 +132,6 @@ const onLoad = () => {
133 }; 132 };
134 133
135 const onReload = () => { 134 const onReload = () => {
136 - // TODO: 初始化列表数据，会使得列表滚到最上面
137 - // 处理方法只能是插入相应的一条数据，这样就需要后台新增完成后，返回完整数据
138 commentList.value = []; 135 commentList.value = [];
139 offset.value = 0; 136 offset.value = 0;
140 onLoad(); 137 onLoad();
...@@ -160,21 +157,8 @@ const onReload = () => { ...@@ -160,21 +157,8 @@ const onReload = () => {
160 console.error(err); 157 console.error(err);
161 }) 158 })
162 } 159 }
160 +/******** 留言框列表相关操作 END *******/
163 161
164 -// 回复消息列表模块
165 -const showCommentListPopup = ref(false);
166 -const commentData = ref('')
167 -// 查看更多回复
168 -const getMore = (v) => {
169 - showCommentListPopup.value = true;
170 - commentData.value = v;
171 -}
172 -const closeCommentList = (v) => { // 查看更多回复
173 - showCommentListPopup.value = v;
174 -}
175 -// 回复评论控件
176 -const showCommentBoxPopup = ref(false);
177 -const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
178 const showNotice = ref(false) 162 const showNotice = ref(false)
179 const closeNotice = () => { // 关闭提示框回调 163 const closeNotice = () => { // 关闭提示框回调
180 showNotice.value = false; 164 showNotice.value = false;
...@@ -183,16 +167,25 @@ const closeNotice = () => { // 关闭提示框回调 ...@@ -183,16 +167,25 @@ const closeNotice = () => { // 关闭提示框回调
183 }); 167 });
184 } 168 }
185 169
170 +
171 +/******** 留言框相关操作 START *******/
172 +// 回复评论控件
173 +const showCommentBoxPopup = ref(false);
174 +const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
175 +
186 /** 176 /**
187 * 回复/评论 功能 177 * 回复/评论 功能
188 * @param {*} v 单行评论数据 178 * @param {*} v 单行评论数据
189 * @param {*} type 类型 comment 为评论/类型 reply 为回复 179 * @param {*} type 类型 comment 为评论/类型 reply 为回复
190 */ 180 */
191 const commentId = ref('') 181 const commentId = ref('')
182 +const replayUser = ref('')
183 +// TODO: 本人的评论还是应该把回复按钮屏蔽掉，后台要给个字段判断一下，comment_list/reply_list两个接口都要调整
192 const setComment = (v, type) => { // 184 const setComment = (v, type) => { //
193 if (validIdCard.can_use) { 185 if (validIdCard.can_use) {
194 showCommentBoxPopup.value = true; 186 showCommentBoxPopup.value = true;
195 commentType.value = type; 187 commentType.value = type;
188 + replayUser.value = v.name;
196 commentId.value = v.id; 189 commentId.value = v.id;
197 } else { 190 } else {
198 showNotice.value = true; 191 showNotice.value = true;
...@@ -226,7 +219,33 @@ const submitCommentBox = (note) => { ...@@ -226,7 +219,33 @@ const submitCommentBox = (note) => {
226 showCommentBoxPopup.value = false; 219 showCommentBoxPopup.value = false;
227 Toast.success('发布成功') 220 Toast.success('发布成功')
228 // 刷新列表 221 // 刷新列表
229 - // onReload(); 222 + if (commentType.value === 'comment') {
223 + // 留言可以刷新列表
224 + onReload();
225 + } else {
226 + // TODO: 初始化列表数据，会使得列表滚到最上面
227 + // 处理方法只能是插入相应的一条数据，这样就需要后台新增完成后，返回完整数据
228 + // 后端需要返回一个完整结构，我临时写进去
229 + let temp = {
230 + "id": 314178,
231 + "prod_id": 314058,
232 + "pid": 314171,
233 + "reply_to": "王申羽",
234 + "name": "王申羽",
235 + "avatar": "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf033a3cc00e4bb414ad696adbaf90a05f496c00e7210e889cd4ff3e4ea10ef24",
236 + "kg_name": "杨浦科技幼儿园",
237 + "note": "这是一条回复",
238 + "created_by": 314051,
239 + "comment_time": "5-4 07:03"
240 + }
241 +
242 + _.each(commentList.value, comment => {
243 + if (comment.id === commentId.value) {
244 + comment.reply_list.push(temp)
245 + comment.total = comment.total + 1
246 + }
247 + })
248 + }
230 // 不能刷新，只能插入 249 // 不能刷新，只能插入
231 } else { 250 } else {
232 console.warn(res); 251 console.warn(res);
...@@ -244,6 +263,21 @@ const submitCommentBox = (note) => { ...@@ -244,6 +263,21 @@ const submitCommentBox = (note) => {
244 const closeCommentBox = (v) => { // 关闭留言框 263 const closeCommentBox = (v) => { // 关闭留言框
245 showCommentBoxPopup.value = v; 264 showCommentBoxPopup.value = v;
246 } 265 }
266 +/******** 留言框相关操作 START *******/
267 +
268 +
269 +/******** 查看回复列表操作 START *******/
270 +const showCommentListPopup = ref(false);
271 +const commentData = ref({})
272 +// 查看更多回复
273 +const getReplyList = (v) => {
274 + showCommentListPopup.value = true;
275 + commentData.value = v;
276 +}
277 +const closeCommentList = (v) => { // 查看更多回复
278 + showCommentListPopup.value = v;
279 +}
280 +/******** 查看回复列表操作 END *******/
247 281
248 onMounted(() => { 282 onMounted(() => {
249 onLoad(); 283 onLoad();
......