Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
57d3caa4 1 parent a2f65c8f

✨ feat(书籍详情页): API联调

Inline Side-by-side
Showing 2 changed files with 166 additions and 106 deletions
...@@ -4,103 +4,128 @@ import _ from 'lodash' ...@@ -4,103 +4,128 @@ import _ from 'lodash'
4 import { Toast } from 'vant'; 4 import { Toast } from 'vant';
5 5
6 export const useVideoList = ($route) => { 6 export const useVideoList = ($route) => {
7 - // 切换视频语言 7 + // 切换视频语言
8 - const checkMandarin = ref(true); // 普通话选项卡 8 + const checkMandarin = ref(true); // 普通话选项卡
9 - const checkLocalism = ref(false); // 方言选项卡 9 + const checkLocalism = ref(false); // 方言选项卡
10 - const chooseLanguage = ref({ text: '普通话', val: '普通话' }); // 默认选中普通话 10 + const chooseLanguage = ref({ text: '普通话', val: '普通话' }); // 默认选中普通话
11 - const toggleLanguage = () => { 11 + /**
12 - checkMandarin.value = !checkMandarin.value; 12 + * 切换视频语言回调
13 - checkLocalism.value = !checkLocalism.value; 13 + * @param {*} type
14 - // 修改默认语言绑定数据 14 + */
15 - if (checkLocalism.value) { 15 + const toggleLanguage = (type) => {
16 - // tslint:disable-next-line:no-string-literal 16 + if (type === 'mandarin') {
17 - chooseLanguage.value = { text: columns[0]['text'], val: columns[0]['val'] } 17 + checkMandarin.value = true;
18 - } else { 18 + checkLocalism.value = false;
19 - chooseLanguage.value = { text: '普通话', val: '普通话' }; 19 + } else {
20 - } 20 + checkMandarin.value = false;
21 - // 切换语言需要更新列表数据 21 + checkLocalism.value = true;
22 - offset.value = 0 22 + }
23 - prod_list.value = [] 23 + // 修改默认语言绑定数据
24 - loading.value = true; 24 + if (checkLocalism.value) {
25 - finished.value = false; 25 + // tslint:disable-next-line:no-string-literal
26 - onLoad() 26 + chooseLanguage.value = { text: columns[0]['text'], val: columns[0]['val'] }
27 + } else {
28 + chooseLanguage.value = { text: '普通话', val: '普通话' };
27 } 29 }
28 - // 方言选择项 30 + // 切换语言需要更新列表数据
29 - const columns = [ 31 + onReload()
30 - { text: '所有方言', val: '所有方言' }, 32 + }
31 - { text: '沪语', val: '沪语' },
32 - { text: '粤语', val: '粤语' },
33 - ];
34 33
35 - const showPicker = ref(false); 34 + // 方言选择项
35 + const columns = [
36 + { text: '所有方言', val: '所有方言' },
37 + { text: '上海话', val: '上海话' },
38 + { text: '广东话', val: '广东话' },
39 + ];
36 40
37 - const onConfirm = ({ selectedOptions }) => { 41 + const showPicker = ref(false);
38 - showPicker.value = false; 42 +
39 - chooseLanguage.value = { 43 + /**
40 - text: selectedOptions[0].text, 44 + * 选择方言确认后回调
41 - val: selectedOptions[0].val 45 + * @param {*} param
42 - } 46 + */
43 - }; 47 + const onConfirm = ({ selectedOptions }) => {
48 + showPicker.value = false;
49 + chooseLanguage.value = {
50 + text: selectedOptions[0].text,
51 + val: selectedOptions[0].val
52 + }
53 + onReload()
54 + };
44 55
45 - // 绑定页面数据 56 + // 绑定页面数据
46 - const bookInfo = ref(''); 57 + const bookInfo = ref('');
47 - // tslint:disable-next-line: variable-name 58 + // tslint:disable-next-line: variable-name
48 - const prod_list = ref([]); 59 + const prod_list = ref([]);
49 - const limit = ref(1) 60 + const limit = ref(10)
50 - const offset = ref(0) 61 + const offset = ref(0)
51 62
52 - // 处理书籍下作品列表 63 + // 处理书籍下作品列表
53 - const loading = ref(false); 64 + const loading = ref(false);
54 - const finished = ref(false); 65 + const finished = ref(false);
55 66
56 - const onLoad = () => { 67 + /**
57 - // 异步更新数据 68 + * 向下滚动查询数据
58 - axios.get('/srv/?a=book_info', { 69 + */
59 - params: { 70 + const onLoad = () => {
60 - book_id: $route.query.id, 71 + // 异步更新数据
61 - localism_type: chooseLanguage.value.text, 72 + axios.get('/srv/?a=book_info', {
62 - limit: limit.value, 73 + params: {
63 - offset: offset.value 74 + book_id: $route.query.id,
64 - } 75 + localism_type: chooseLanguage.value.text,
65 - }) 76 + limit: limit.value,
66 - .then(res => { 77 + offset: offset.value
67 - if (res.data.code === 1) { 78 + }
68 - bookInfo.value = res.data.data; 79 + })
69 - prod_list.value = _.concat(prod_list.value, res.data.data.prod_list); 80 + .then(res => {
70 - offset.value = prod_list.value.length; 81 + if (res.data.code === 1) {
71 - loading.value = false; 82 + bookInfo.value = res.data.data;
72 - // 数据全部加载完成 83 + prod_list.value = _.concat(prod_list.value, res.data.data.prod_list);
73 - if (!res.data.data.prod_list.length) { 84 + offset.value = prod_list.value.length;
74 - // 加载状态结束 85 + loading.value = false;
75 - finished.value = true; 86 + // 数据全部加载完成
76 - } 87 + if (!res.data.data.prod_list.length) {
77 - } else { 88 + // 加载状态结束
78 - // tslint:disable-next-line: no-console 89 + finished.value = true;
79 - console.warn(res);
80 - Toast({
81 - icon: 'close',
82 - message: res.data.msg
83 - });
84 } 90 }
85 - }) 91 + } else {
86 - .catch(err => {
87 // tslint:disable-next-line: no-console 92 // tslint:disable-next-line: no-console
88 - console.error(err); 93 + console.warn(res);
89 - }) 94 + Toast({
90 - }; 95 + icon: 'close',
96 + message: res.data.msg
97 + });
98 + }
99 + })
100 + .catch(err => {
101 + // tslint:disable-next-line: no-console
102 + console.error(err);
103 + })
104 + };
91 105
92 - return { 106 + /**
93 - toggleLanguage, 107 + * 重载刷新程序
94 - onLoad, 108 + */
95 - columns, 109 + const onReload = () => {
96 - prod_list, 110 + offset.value = 0
97 - finished, 111 + prod_list.value = []
98 - loading, 112 + loading.value = true;
99 - bookInfo, 113 + finished.value = false;
100 - showPicker, 114 + onLoad()
101 - checkLocalism, 115 + }
102 - checkMandarin, 116 +
103 - onConfirm, 117 + return {
104 - chooseLanguage 118 + toggleLanguage,
105 - } 119 + onLoad,
120 + columns,
121 + prod_list,
122 + finished,
123 + loading,
124 + bookInfo,
125 + showPicker,
126 + checkLocalism,
127 + checkMandarin,
128 + onConfirm,
129 + chooseLanguage
130 + }
106 } 131 }
......
...@@ -36,10 +36,10 @@ ...@@ -36,10 +36,10 @@
36 <div class="book-video-language"> 36 <div class="book-video-language">
37 <van-row> 37 <van-row>
38 <van-col span="6"> 38 <van-col span="6">
39 - <div @click="toggleLanguage" :class="[checkMandarin ? 'checked' : 'uncheck']">普通话</div> 39 + <div @click="toggleLanguage('mandarin')" :class="[checkMandarin ? 'checked' : 'uncheck']">普通话</div>
40 </van-col> 40 </van-col>
41 <van-col span="6"> 41 <van-col span="6">
42 - <div @click="toggleLanguage" :class="[checkLocalism ? 'checked' : 'uncheck']">方言</div> 42 + <div @click="toggleLanguage('localism')" :class="[checkLocalism ? 'checked' : 'uncheck']">方言</div>
43 </van-col> 43 </van-col>
44 <van-col span="12" v-if="checkLocalism" @click="showPicker = true"> 44 <van-col span="12" v-if="checkLocalism" @click="showPicker = true">
45 <div class="choose-wrapper"> 45 <div class="choose-wrapper">
...@@ -156,10 +156,33 @@ onMounted(() => { ...@@ -156,10 +156,33 @@ onMounted(() => {
156 }) 156 })
157 }) 157 })
158 158
159 -// 书籍订阅 159 +/**
160 + * 书籍订阅
161 + */
160 let is_subscribe = ref(false); 162 let is_subscribe = ref(false);
161 const onSubscribe = () => { 163 const onSubscribe = () => {
162 - is_subscribe.value = !is_subscribe.value 164 + axios.post('/srv/?a=prod_action', {
165 + action_type: 'like',
166 + prod_id: $route.query.id
167 + })
168 + .then(res => {
169 + if (res.data.code === 1) {
170 + if (res.data.msg === 'like-add-OK') {
171 + is_subscribe.value = true;
172 + } else {
173 + is_subscribe.value = false;
174 + }
175 + } else {
176 + console.warn(res);
177 + Toast({
178 + icon: 'close',
179 + message: res.data.msg
180 + });
181 + }
182 + })
183 + .catch(err => {
184 + console.error(err);
185 + })
163 } 186 }
164 187
165 // 爱心捐书 188 // 爱心捐书
...@@ -172,20 +195,37 @@ const showNotice = ref(false) ...@@ -172,20 +195,37 @@ const showNotice = ref(false)
172 const closeNotice = () => { 195 const closeNotice = () => {
173 showNotice.value = false; 196 showNotice.value = false;
174 } 197 }
198 +/**
199 + * 上传作品回调
200 + */
175 const uploadVideo = () => { 201 const uploadVideo = () => {
176 - // 如果没有实名认证需要提示用户实名认证 202 + axios.get('/srv/?a=can_upload')
177 - showNotice.value = true; 203 + .then(res => {
178 - // 实名认证之后直接跳转上传页面 204 + if (res.data.code === 1) {
205 + if (res.data.data.can_upload) {
206 + // 实名认证之后直接跳转上传页面
207 + location.href = 'http://jsj.onwall.cn/f/gZntnp';
208 + } else {
209 + // 如果没有实名认证需要提示用户实名认证
210 + showNotice.value = true;
211 + }
212 + } else {
213 + console.warn(res);
214 + Toast({
215 + icon: 'close',
216 + message: res.data.msg
217 + });
218 + }
219 + })
220 + .catch(err => {
221 + console.error(err);
222 + })
179 } 223 }
180 </script> 224 </script>
181 225
182 <script> 226 <script>
183 import mixin from 'common/mixin'; 227 import mixin from 'common/mixin';
184 228
185 -function transCaseList(url, pic) {
186 - return { url, pic }
187 -}
188 -
189 export default { 229 export default {
190 mixins: [mixin.init], 230 mixins: [mixin.init],
191 data() { 231 data() {
...@@ -283,11 +323,6 @@ export default { ...@@ -283,11 +323,6 @@ export default {
283 } 323 }
284 } 324 }
285 } 325 }
286 -
287 - .book-video-list {
288 - // height: 20rem;
289 - // overflow: scroll;
290 - }
291 } 326 }
292 327
293 .book-bar { 328 .book-bar {
......