hookehuyr

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

...@@ -8,9 +8,18 @@ export const useVideoList = ($route) => { ...@@ -8,9 +8,18 @@ export const useVideoList = ($route) => {
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 + */
15 + const toggleLanguage = (type) => {
16 + if (type === 'mandarin') {
17 + checkMandarin.value = true;
18 + checkLocalism.value = false;
19 + } else {
20 + checkMandarin.value = false;
21 + checkLocalism.value = true;
22 + }
14 // 修改默认语言绑定数据 23 // 修改默认语言绑定数据
15 if (checkLocalism.value) { 24 if (checkLocalism.value) {
16 // tslint:disable-next-line:no-string-literal 25 // tslint:disable-next-line:no-string-literal
...@@ -19,40 +28,45 @@ export const useVideoList = ($route) => { ...@@ -19,40 +28,45 @@ export const useVideoList = ($route) => {
19 chooseLanguage.value = { text: '普通话', val: '普通话' }; 28 chooseLanguage.value = { text: '普通话', val: '普通话' };
20 } 29 }
21 // 切换语言需要更新列表数据 30 // 切换语言需要更新列表数据
22 - offset.value = 0 31 + onReload()
23 - prod_list.value = []
24 - loading.value = true;
25 - finished.value = false;
26 - onLoad()
27 } 32 }
33 +
28 // 方言选择项 34 // 方言选择项
29 const columns = [ 35 const columns = [
30 { text: '所有方言', val: '所有方言' }, 36 { text: '所有方言', val: '所有方言' },
31 - { text: '沪语', val: '沪语' }, 37 + { text: '上海话', val: '上海话' },
32 - { text: '粤语', val: '粤语' }, 38 + { text: '广东话', val: '广东话' },
33 ]; 39 ];
34 40
35 const showPicker = ref(false); 41 const showPicker = ref(false);
36 42
43 + /**
44 + * 选择方言确认后回调
45 + * @param {*} param
46 + */
37 const onConfirm = ({ selectedOptions }) => { 47 const onConfirm = ({ selectedOptions }) => {
38 showPicker.value = false; 48 showPicker.value = false;
39 chooseLanguage.value = { 49 chooseLanguage.value = {
40 text: selectedOptions[0].text, 50 text: selectedOptions[0].text,
41 val: selectedOptions[0].val 51 val: selectedOptions[0].val
42 } 52 }
53 + onReload()
43 }; 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
67 + /**
68 + * 向下滚动查询数据
69 + */
56 const onLoad = () => { 70 const onLoad = () => {
57 // 异步更新数据 71 // 异步更新数据
58 axios.get('/srv/?a=book_info', { 72 axios.get('/srv/?a=book_info', {
...@@ -89,6 +103,17 @@ export const useVideoList = ($route) => { ...@@ -89,6 +103,17 @@ export const useVideoList = ($route) => {
89 }) 103 })
90 }; 104 };
91 105
106 + /**
107 + * 重载刷新程序
108 + */
109 + const onReload = () => {
110 + offset.value = 0
111 + prod_list.value = []
112 + loading.value = true;
113 + finished.value = false;
114 + onLoad()
115 + }
116 +
92 return { 117 return {
93 toggleLanguage, 118 toggleLanguage,
94 onLoad, 119 onLoad,
......
...@@ -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 = () => {
202 + axios.get('/srv/?a=can_upload')
203 + .then(res => {
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 {
176 // 如果没有实名认证需要提示用户实名认证 209 // 如果没有实名认证需要提示用户实名认证
177 showNotice.value = true; 210 showNotice.value = true;
178 - // 实名认证之后直接跳转上传页面 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 {
......