Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2a933e95 1 parent 007e4100

✨ feat(作品详情页): 留言相关API联调

Inline Side-by-side
Showing 5 changed files with 284 additions and 137 deletions
...@@ -53,14 +53,13 @@ ...@@ -53,14 +53,13 @@
53 import icon_x from '@images/x.png' 53 import icon_x from '@images/x.png'
54 import icon_y from '@images/y.png' 54 import icon_y from '@images/y.png'
55 import MyButton from '@/components/MyButton/index.vue' 55 import MyButton from '@/components/MyButton/index.vue'
56 +import { Toast } from 'vant';
56 57
57 import { ref, reactive, onMounted } from 'vue' 58 import { ref, reactive, onMounted } from 'vue'
58 // const props = defineProps({ 59 // const props = defineProps({
59 // showPopup: Boolean 60 // showPopup: Boolean
60 // }) 61 // })
61 62
62 -const message = ref('')
63 -
64 onMounted(() => { 63 onMounted(() => {
65 }) 64 })
66 </script> 65 </script>
...@@ -70,7 +69,8 @@ export default { ...@@ -70,7 +69,8 @@ export default {
70 props: ['showPopup', 'type'], 69 props: ['showPopup', 'type'],
71 data () { 70 data () {
72 return { 71 return {
73 - show: false 72 + show: false,
73 + message: ''
74 } 74 }
75 }, 75 },
76 mounted () { 76 mounted () {
...@@ -92,8 +92,13 @@ export default { ...@@ -92,8 +92,13 @@ export default {
92 this.show = false; 92 this.show = false;
93 }, 93 },
94 submitComment () { 94 submitComment () {
95 - this.$emit('on-close', false) 95 + if (this.message) {
96 - this.show = false; 96 + this.show = false;
97 + this.$emit('on-submit', this.message);
98 + this.message = '';
99 + } else {
100 + Toast.fail('留言不能为空');
101 + }
97 } 102 }
98 } 103 }
99 } 104 }
......
1 <template> 1 <template>
2 - <van-popup 2 + <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: '70%' }">
3 - v-model:show="show"
4 - :close-on-click-overlay="false"
5 - round
6 - position="bottom"
7 - :style="{ height: '70%' }"
8 - >
9 <div class="van-hairline--bottom"> 3 <div class="van-hairline--bottom">
10 <van-row> 4 <van-row>
11 - <van-col span="4" @click="refreshBtn"> 5 + <van-col span="4" @click="onReload">
12 <div style="padding: 1rem; text-align: center;"> 6 <div style="padding: 1rem; text-align: center;">
13 <van-icon :name="icon_x" size="1.25rem" /> 7 <van-icon :name="icon_x" size="1.25rem" />
14 </div> 8 </div>
15 </van-col> 9 </van-col>
16 <van-col span="16" style="color: #222222; text-align: center; line-height: 3;"> 10 <van-col span="16" style="color: #222222; text-align: center; line-height: 3;">
17 - <span>12条回复</span> 11 + <span>{{ data.total }}条回复</span>
18 </van-col> 12 </van-col>
19 <van-col span="4" @click="closeBtn"> 13 <van-col span="4" @click="closeBtn">
20 <div style="padding: 1rem;"> 14 <div style="padding: 1rem;">
...@@ -23,46 +17,30 @@ ...@@ -23,46 +17,30 @@
23 </van-col> 17 </van-col>
24 </van-row> 18 </van-row>
25 </div> 19 </div>
26 - <div class="comment-wrapper"> 20 + <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
27 - <van-row style="font-size: 0.9rem;"> 21 + <template v-for="(item, key) in replyList" :key="key">
28 - <van-col span="4"> 22 + <div class="comment-wrapper">
29 - <van-image round width="3rem" height="3rem" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" /> 23 + <van-row style="font-size: 0.9rem;">
30 - </van-col> 24 + <van-col span="4">
31 - <van-col span="16"> 25 + <van-image round width="3rem" height="3rem" :src="item.avatar" />
32 - <p>是妮妮吖～</p> 26 + </van-col>
33 - <p>杨浦民办科技幼稚园</p> 27 + <van-col span="14">
34 - </van-col> 28 + <p>{{ item.name }}</p>
35 - <van-col span="4" style="text-align: center;"> 29 + <p>{{ item.kg_name }}</p>
36 - <p style="color: #333333;">回复</p> 30 + </van-col>
37 - <p>2-25</p> 31 + <van-col span="6" style="text-align: right;">
38 - </van-col> 32 + <p style="color: #333333;">回复</p>
39 - </van-row> 33 + <p>{{ item.comment_time }}</p>
40 - <van-row> 34 + </van-col>
41 - <van-col offset="4"> 35 + </van-row>
42 - <span style="color: #222222;">瑟日古娜小朋友表演的可真棒，感谢你的精彩演绎，希望有更多的小朋友能够学习到！</span> 36 + <van-row>
43 - </van-col> 37 + <van-col offset="4">
44 - </van-row> 38 + <span style="color: #222222;">{{ item.note }}</span>
45 - </div> 39 + </van-col>
46 - <div class="comment-wrapper" style="background-color: #F7F7F7;"> 40 + </van-row>
47 - <van-row style="font-size: 0.9rem;"> 41 + </div>
48 - <van-col span="4"> 42 + </template>
49 - <van-image round width="3rem" height="3rem" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" /> 43 + </van-list>
50 - </van-col>
51 - <van-col span="16">
52 - <p>是妮妮吖～</p>
53 - <p>杨浦民办科技幼稚园</p>
54 - </van-col>
55 - <van-col span="4" style="text-align: center;" @click="setComment('222', 'reply')">
56 - <p style="color: #333333;">回复</p>
57 - <p>2-25</p>
58 - </van-col>
59 - </van-row>
60 - <van-row>
61 - <van-col offset="4">
62 - <span style="color: #222222;">瑟日古娜小朋友表演的可真棒，感谢你的精彩演绎，希望有更多的小朋友能够学习到！</span>
63 - </van-col>
64 - </van-row>
65 - </div>
66 <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-close="closeCommentBox"></comment-box> 44 <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-close="closeCommentBox"></comment-box>
67 </van-popup> 45 </van-popup>
68 46
...@@ -75,6 +53,10 @@ import CommentBox from '@/components/CommentBox/index.vue' ...@@ -75,6 +53,10 @@ import CommentBox from '@/components/CommentBox/index.vue'
75 import icon_x from '@images/x.png' 53 import icon_x from '@images/x.png'
76 import icon_y from '@images/y.png' 54 import icon_y from '@images/y.png'
77 55
56 +import axios from '@/utils/axios';
57 +import _ from 'lodash'
58 +import { Toast } from 'vant';
59 +
78 import { ref, reactive, onMounted } from 'vue' 60 import { ref, reactive, onMounted } from 'vue'
79 // const props = defineProps({ 61 // const props = defineProps({
80 // showPopup: Boolean 62 // showPopup: Boolean
...@@ -97,33 +79,74 @@ const closeCommentBox = (v) => { // 查看更多回复 ...@@ -97,33 +79,74 @@ const closeCommentBox = (v) => { // 查看更多回复
97 showCommentBoxPopup.value = v; 79 showCommentBoxPopup.value = v;
98 } 80 }
99 81
100 - onMounted(() => { 82 +onMounted(() => {
101 - }) 83 +})
102 </script> 84 </script>
103 85
104 <script> 86 <script>
105 export default { 87 export default {
106 - props: ['showPopup'], 88 + props: ['showPopup', 'data'],
107 - data () { 89 + data() {
108 return { 90 return {
109 - show: false 91 + show: false,
92 + replyList: [],
93 + loading: false,
94 + finished: false,
95 + limit: 10,
96 + offset: 0,
110 } 97 }
111 }, 98 },
112 - mounted () { 99 + mounted() {
113 }, 100 },
114 watch: { 101 watch: {
115 - showPopup (value, pre) { 102 + showPopup(value, pre) {
116 if (value) { 103 if (value) {
117 this.show = value; 104 this.show = value;
105 + this.onReload()
118 } 106 }
119 } 107 }
120 }, 108 },
121 methods: { 109 methods: {
122 - onClose () { 110 + onLoad () {
111 + // 异步更新数据
112 + axios.get('/srv/?a=reply_list', {
113 + params: {
114 + comment_id: this.data.id,
115 + limit: this.limit,
116 + offset: this.offset
117 + }
118 + })
119 + .then(res => {
120 + if (res.data.code === 1) {
121 + this.replyList = _.concat(this.replyList, res.data.data.replylist);
122 + this.offset = this.replyList.length;
123 + this.loading = false;
124 + // 数据全部加载完成
125 + if (!res.data.data.replylist.length) {
126 + // 加载状态结束
127 + this.finished = true;
128 + }
129 + } else {
130 + console.warn(res);
131 + Toast({
132 + icon: 'close',
133 + message: res.data.msg
134 + });
135 + }
136 + })
137 + .catch(err => {
138 + console.error(err);
139 + })
140 + },
141 + onReload () {
142 + this.replyList = [];
143 + this.offset = 0;
144 + this.onLoad();
145 + },
146 + onClose() {
123 this.show = false; 147 this.show = false;
124 }, 148 },
125 - refreshBtn () {}, 149 + closeBtn() {
126 - closeBtn () {
127 this.$emit('on-close', false) 150 this.$emit('on-close', false)
128 this.show = false; 151 this.show = false;
129 } 152 }
......
...@@ -5,13 +5,17 @@ export const mainStore = defineStore('main', { ...@@ -5,13 +5,17 @@ export const mainStore = defineStore('main', {
5 return { 5 return {
6 msg: 'Hello world', 6 msg: 'Hello world',
7 count: 0, 7 count: 0,
8 - auth: false 8 + auth: false,
9 + comment_num: 0
9 }; 10 };
10 }, 11 },
11 getters: {}, 12 getters: {},
12 actions: { 13 actions: {
13 - changeState (state: boolean) { 14 + changeState (state) {
14 this.auth = state; 15 this.auth = state;
16 + },
17 + changeCommentNum (num) {
18 + this.comment_num = num;
15 } 19 }
16 }, 20 },
17 }); 21 });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 <van-tab title="简介" :title-style="tabClass"> 24 <van-tab title="简介" :title-style="tabClass">
25 <div class="intro">{{ videoInfo.note }}</div> 25 <div class="intro">{{ videoInfo.note }}</div>
26 </van-tab> 26 </van-tab>
27 - <van-tab :title="'留言 ' + videoInfo.comment_num" :title-style="tabClass" :to="'/client/videoDetail/comment?prod_id=' + $route.query.prod_id"> 27 + <van-tab :title="'留言 ' + comment_num" :title-style="tabClass" :to="'/client/videoDetail/comment?prod_id=' + $route.query.prod_id">
28 <router-view></router-view> 28 <router-view></router-view>
29 </van-tab> 29 </van-tab>
30 </van-tabs> 30 </van-tabs>
...@@ -37,6 +37,9 @@ ...@@ -37,6 +37,9 @@
37 </template> 37 </template>
38 38
39 <script setup> 39 <script setup>
40 +import { mainStore } from '@/store'
41 +import { storeToRefs } from 'pinia'
42 +
40 import VideoDetail from '@/components/VideoDetail/index.vue' 43 import VideoDetail from '@/components/VideoDetail/index.vue'
41 import { ref, reactive, onMounted, watch } from 'vue' 44 import { ref, reactive, onMounted, watch } from 'vue'
42 import { useRoute, useRouter } from 'vue-router' 45 import { useRoute, useRouter } from 'vue-router'
...@@ -61,6 +64,11 @@ const tabClass = { ...@@ -61,6 +64,11 @@ const tabClass = {
61 fontSize: '1rem' 64 fontSize: '1rem'
62 } 65 }
63 66
67 +// 处理主路由的留言数量问题
68 +const store = mainStore()
69 +// Pinia 解构方法：storeToRefs
70 +const { comment_num } = storeToRefs(store)
71 +
64 const videoInfo = ref(''); 72 const videoInfo = ref('');
65 73
66 onMounted(() => { 74 onMounted(() => {
...@@ -81,6 +89,8 @@ onMounted(() => { ...@@ -81,6 +89,8 @@ onMounted(() => {
81 .then(res => { 89 .then(res => {
82 if (res.data.code === 1) { 90 if (res.data.code === 1) {
83 videoInfo.value = res.data.data; 91 videoInfo.value = res.data.data;
92 + // 动态调整留言数量
93 + store.changeCommentNum(res.data.data.comment_num);
84 } else { 94 } else {
85 console.warn(res); 95 console.warn(res);
86 Toast({ 96 Toast({
......
1 <template> 1 <template>
2 <div class=""> 2 <div class="">
3 - <!-- 回复条数大于20才加载 后端需要给我总条数 --> 3 + <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
4 - <template v-if="sum >= 20"> 4 + <template v-for="(item, key) in commentList" :key="key">
5 - <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 5 + <div class="comment-wrapper">
6 - <div v-for="item in list" :key="item" :title="item"> 6 + <van-row style="font-size: 0.9rem;">
7 - {{ item }} 7 + <van-col span="4">
8 + <van-image round width="3rem" height="3rem" :src="item.avatar" />
9 + </van-col>
10 + <van-col span="14">
11 + <p>{{ item.name }}</p>
12 + <p>{{ item.kg_name }}</p>
13 + </van-col>
14 + <van-col span="6" style="text-align: right;">
15 + <p @click="setComment(item, 'reply')" style="color: #333333;">回复</p>
16 + <p>{{ item.comment_time }}</p>
17 + </van-col>
18 + </van-row>
19 + <van-row>
20 + <van-col offset="4">
21 + <span style="color: #222222;">{{ item.note }}</span>
22 + </van-col>
23 + </van-row>
24 + <van-row>
25 + <van-col offset="4" span="20">
26 + <div v-if="item.total" class="reply-wrapper">
27 + <template v-for="(reply, index) in item.reply_list" :key="index">
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>
30 + </template>
31 + <p v-if="item.total !== reply_limit" @click="getMore(item)">共{{ item.total }}条回复 ></p>
32 + </div>
33 + </van-col>
34 + </van-row>
8 </div> 35 </div>
9 - </van-list> 36 + </template>
10 - </template> 37 + </van-list>
11 - <template v-else>
12 - <div class="comment-wrapper">
13 - <van-row style="font-size: 0.9rem;">
14 - <van-col span="4">
15 - <van-image round width="3rem" height="3rem" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
16 - </van-col>
17 - <van-col span="16">
18 - <p>是妮妮吖～</p>
19 - <p>杨浦民办科技幼稚园</p>
20 - </van-col>
21 - <van-col span="4" style="text-align: center;">
22 - <p @click="setComment('11', 'reply')" style="color: #333333;">回复</p>
23 - <p>2-25</p>
24 - </van-col>
25 - </van-row>
26 - <van-row>
27 - <van-col offset="4">
28 - <span style="color: #222222;">瑟日古娜小朋友表演的可真棒，感谢你的精彩演绎，希望有更多的小朋友能够学习到！</span>
29 - </van-col>
30 - </van-row>
31 - <van-row>
32 - <van-col offset="4">
33 - <div class="reply-wrapper">
34 - <p><span>瑟日古娜（作者）：</span><span class="content">谢谢您的表扬，我会继续加油的！</span></p>
35 - <p><span>阿布日达 </span>回复<span> @瑟日古娜（作者）：</span><span class="content">厉害的呀，棒！！</span></p>
36 - <p @click="getMore()">共12条回复 ></p>
37 - </div>
38 - </van-col>
39 - </van-row>
40 - </div>
41 - </template>
42 <div style="height: 5rem;"></div> 38 <div style="height: 5rem;"></div>
43 - <div class="reply-btn" @click="setComment('222', 'comment')"> 39 + <div class="reply-btn" @click="setComment('', 'comment')">
44 <div class="text">写下你友善的留言</div> 40 <div class="text">写下你友善的留言</div>
45 </div> 41 </div>
46 </div> 42 </div>
47 - <comment-list :showPopup="showCommentListPopup" @on-close="closeCommentList"></comment-list> 43 + <comment-list :showPopup="showCommentListPopup" :data="commentData" @on-close="closeCommentList"></comment-list>
48 - <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-close="closeCommentBox"></comment-box> 44 + <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
49 45
50 <!-- 写评论时，如果没有上传作品提示弹框 --> 46 <!-- 写评论时，如果没有上传作品提示弹框 -->
51 <van-overlay :show="showNotice" z-index="1000"> 47 <van-overlay :show="showNotice" z-index="1000">
...@@ -56,12 +52,14 @@ ...@@ -56,12 +52,14 @@
56 <p style="margin: 1rem; font-size: 1.15rem; font-weight: bold; color: #222222;">温馨提示</p> 52 <p style="margin: 1rem; font-size: 1.15rem; font-weight: bold; color: #222222;">温馨提示</p>
57 </div> 53 </div>
58 <div style="color: #333333;"> 54 <div style="color: #333333;">
59 - <p>您还没有上传作品</p> 55 + <!-- <p>您还没有上传作品</p>
60 <p>请返回书籍详情页，点击 <span style="font-weight: bold; color: #713610;">上传作品</span> 按钮</p> 56 <p>请返回书籍详情页，点击 <span style="font-weight: bold; color: #713610;">上传作品</span> 按钮</p>
61 - <p>上传之后再留言</p> 57 + <p>上传之后再留言</p> -->
58 + <p>您还没有实名认证</p>
59 + <p>请前往个人中心进行实名认证</p>
62 </div> 60 </div>
63 <div style="margin: 3rem 0;"> 61 <div style="margin: 3rem 0;">
64 - <my-button @on-click="closeNotice" type="primary">返回</my-button> 62 + <my-button @on-click="closeNotice" type="primary">前往认证</my-button>
65 </div> 63 </div>
66 </div> 64 </div>
67 </div> 65 </div>
...@@ -69,48 +67,107 @@ ...@@ -69,48 +67,107 @@
69 </template> 67 </template>
70 68
71 <script setup> 69 <script setup>
70 +import { mainStore } from '@/store'
71 +
72 import CommentList from '@/components/CommentList/index.vue' 72 import CommentList from '@/components/CommentList/index.vue'
73 import CommentBox from '@/components/CommentBox/index.vue' 73 import CommentBox from '@/components/CommentBox/index.vue'
74 import MyButton from '@/components/MyButton/index.vue' 74 import MyButton from '@/components/MyButton/index.vue'
75 75
76 -import icon_me from '@images/icon-my@2x.png'
77 import icon_notice from '@images/que-tishi@2x.png' 76 import icon_notice from '@images/que-tishi@2x.png'
78 77
79 import { ref, reactive, onMounted } from 'vue' 78 import { ref, reactive, onMounted } from 'vue'
80 import { useRoute, useRouter } from 'vue-router' 79 import { useRoute, useRouter } from 'vue-router'
81 import axios from '@/utils/axios'; 80 import axios from '@/utils/axios';
82 import $ from 'jquery' 81 import $ from 'jquery'
82 +import _ from 'lodash'
83 import { Toast } from 'vant'; 83 import { Toast } from 'vant';
84 +
85 +// 获取是否实名认证
86 +import { idCard } from '@/composables/useValidIdCard.js'
87 +const validIdCard = idCard();
88 +
84 const $route = useRoute(); 89 const $route = useRoute();
85 const $router = useRouter(); 90 const $router = useRouter();
86 91
87 -const list = ref([]); 92 +
88 -const sum = ref(0); 93 +// 查询留言接口数据
89 const loading = ref(false); 94 const loading = ref(false);
90 const finished = ref(false); 95 const finished = ref(false);
96 +const limit = ref(5)
97 +const offset = ref(0)
98 +const reply_limit = ref(3)
99 +
100 +const commentList = ref([])
91 101
92 const onLoad = () => { 102 const onLoad = () => {
93 // 异步更新数据 103 // 异步更新数据
94 - // setTimeout 仅做示例，真实场景中一般为 ajax 请求 104 + axios.get('/srv/?a=comment_list',{
95 - setTimeout(() => { 105 + params: {
96 - for (let i = 0; i < 10; i++) { 106 + prod_id: $route.query.prod_id,
97 - list.value.push(list.value.length + 1); 107 + limit: limit.value,
108 + offset: offset.value,
109 + reply_limit: reply_limit.value
98 } 110 }
99 - 111 + })
100 - // 加载状态结束 112 + .then(res => {
101 - loading.value = false; 113 + if (res.data.code === 1) {
102 - 114 + commentList.value = _.concat(commentList.value, res.data.data);
103 - // 数据全部加载完成 115 + offset.value = commentList.value.length;
104 - if (list.value.length >= 100) { 116 + loading.value = false;
105 - finished.value = true; 117 + // 数据全部加载完成
118 + if (!res.data.data.length) {
119 + // 加载状态结束
120 + finished.value = true;
121 + }
122 + } else {
123 + console.warn(res);
124 + Toast({
125 + icon: 'close',
126 + message: res.data.msg
127 + });
106 } 128 }
107 - }, 1000); 129 + })
130 + .catch(err => {
131 + console.error(err);
132 + })
108 }; 133 };
109 134
135 +const onReload = () => {
136 + // TODO: 初始化列表数据，会使得列表滚到最上面
137 + // 处理方法只能是插入相应的一条数据，这样就需要后台新增完成后，返回完整数据
138 + commentList.value = [];
139 + offset.value = 0;
140 + onLoad();
141 + const store = mainStore()
142 + // 刷新主路由上面的留言数量
143 + axios.get('/srv/?a=prod_info', {
144 + params: {
145 + prod_id: $route.query.prod_id
146 + }
147 + })
148 + .then(res => {
149 + if (res.data.code === 1) {
150 + store.changeCommentNum(res.data.data.comment_num);
151 + } else {
152 + console.warn(res);
153 + Toast({
154 + icon: 'close',
155 + message: res.data.msg
156 + });
157 + }
158 + })
159 + .catch(err => {
160 + console.error(err);
161 + })
162 +}
163 +
110 // 回复消息列表模块 164 // 回复消息列表模块
111 const showCommentListPopup = ref(false); 165 const showCommentListPopup = ref(false);
112 -const getMore = (v) => { // 查看更多回复 166 +const commentData = ref('')
167 +// 查看更多回复
168 +const getMore = (v) => {
113 showCommentListPopup.value = true; 169 showCommentListPopup.value = true;
170 + commentData.value = v;
114 } 171 }
115 const closeCommentList = (v) => { // 查看更多回复 172 const closeCommentList = (v) => { // 查看更多回复
116 showCommentListPopup.value = v; 173 showCommentListPopup.value = v;
...@@ -122,26 +179,74 @@ const showNotice = ref(false) ...@@ -122,26 +179,74 @@ const showNotice = ref(false)
122 const closeNotice = () => { // 关闭提示框回调 179 const closeNotice = () => { // 关闭提示框回调
123 showNotice.value = false; 180 showNotice.value = false;
124 $router.push({ 181 $router.push({
125 - path: '/client/bookDetail' 182 + path: '/me/index'
126 }); 183 });
127 } 184 }
128 -const flag = true; // 后台接口判断是否上传过作品 185 +
129 -// 实际调试时，点击回复需要判断是否上传过作品 186 +/**
130 -const setComment = (v, type) => { // 回复/评论 187 + * 回复/评论 功能
131 - if (flag) { 188 + * @param {*} v 单行评论数据
189 + * @param {*} type 类型 comment 为评论/类型 reply 为回复
190 + */
191 +const commentId = ref('')
192 +const setComment = (v, type) => { //
193 + if (validIdCard.can_use) {
132 showCommentBoxPopup.value = true; 194 showCommentBoxPopup.value = true;
133 commentType.value = type; 195 commentType.value = type;
196 + commentId.value = v.id;
134 } else { 197 } else {
135 showNotice.value = true; 198 showNotice.value = true;
136 } 199 }
137 } 200 }
138 -const closeCommentBox = (v) => { // 查看更多回复 201 +
139 - showCommentBoxPopup.value = v; 202 +/**
203 + * 提交留言回调
204 + * @param {*} note 留言内容
205 + */
206 +const submitCommentBox = (note) => {
207 + let url = '';
208 + let data = {}
209 + // 判断是留言还是回复 动态调整接口名称
210 + if (commentType.value === 'comment') {
211 + url = 'add_comment';
212 + data = {
213 + prod_id: $route.query.prod_id,
214 + note
215 + }
216 + } else {
217 + url = 'add_reply';
218 + data = {
219 + comment_id: commentId.value,
220 + note
221 + }
222 + }
223 + axios.post(`/srv/?a=${url}`, data)
224 + .then(res => {
225 + if (res.data.code === 1) {
226 + showCommentBoxPopup.value = false;
227 + Toast.success('发布成功')
228 + // 刷新列表
229 + // onReload();
230 + // 不能刷新，只能插入
231 + } else {
232 + console.warn(res);
233 + Toast({
234 + icon: 'close',
235 + message: res.data.msg
236 + });
237 + }
238 + })
239 + .catch(err => {
240 + console.error(err);
241 + })
140 } 242 }
141 243
244 +const closeCommentBox = (v) => { // 关闭留言框
245 + showCommentBoxPopup.value = v;
246 +}
142 247
143 onMounted(() => { 248 onMounted(() => {
144 - sum.value = 10; // 获取评论总条数，判断是否加载控件 249 + onLoad();
145 }) 250 })
146 </script> 251 </script>
147 252
...@@ -156,7 +261,6 @@ export default { ...@@ -156,7 +261,6 @@ export default {
156 } 261 }
157 }, 262 },
158 mounted() { 263 mounted() {
159 -
160 }, 264 },
161 methods: { 265 methods: {
162 266
...@@ -185,9 +289,10 @@ export default { ...@@ -185,9 +289,10 @@ export default {
185 289
186 .reply-btn { 290 .reply-btn {
187 position: fixed; 291 position: fixed;
188 - bottom: 1rem; 292 + bottom: 0;
189 left: 0; 293 left: 0;
190 right: 0; 294 right: 0;
295 + background-color: white;
191 296
192 .text { 297 .text {
193 text-align: center; 298 text-align: center;
......