Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a99dfd57 1 parent 4e251a20

✨ feat(幼儿园选择页，幼儿园书籍列表，书籍详情页): API数据联调

Inline Side-by-side
Showing 9 changed files with 294 additions and 177 deletions
...@@ -2,15 +2,13 @@ ...@@ -2,15 +2,13 @@
2 <div class="book-item van-hairline--bottom" @click="handle"> 2 <div class="book-item van-hairline--bottom" @click="handle">
3 <van-row> 3 <van-row>
4 <van-col span="8"> 4 <van-col span="8">
5 - <van-image width="7rem" height="7rem" :src="item.avatar" style="text-align: center;" /> 5 + <van-image width="7rem" height="7rem" :src="item.cover" style="text-align: center;" />
6 </van-col> 6 </van-col>
7 <van-col class="wrapper" span="16"> 7 <van-col class="wrapper" span="16">
8 - <p class="title van-multi-ellipsis--l2">逃家小兔绘本</p> 8 + <p class="title van-multi-ellipsis--l2">{{ item.name }}</p>
9 - <div v-if="type === 'C'" class="van-multi-ellipsis--l2 content"> 9 + <div v-if="type === 'C'" class="van-multi-ellipsis--l2 content">{{ item.note }}</div>
10 - 从前有一只小兔子，总是想要离家出走。有一天，他对妈妈说如果有大灰狼怎么办，不要把门打开
11 - </div>
12 <div class="sub"> 10 <div class="sub">
13 - <van-icon :name="icon_video" />&nbsp;&nbsp;<span>54个作品</span> 11 + <van-icon :name="icon_video" />&nbsp;&nbsp;<span>{{ item.prod_num }}个作品</span>
14 </div> 12 </div>
15 <div v-if="type === 'B'" class="upload" @click="onUpload(item)">上传视频</div> 13 <div v-if="type === 'B'" class="upload" @click="onUpload(item)">上传视频</div>
16 </van-col> 14 </van-col>
......
1 <template> 1 <template>
2 <div class="video-wrapper"> 2 <div class="video-wrapper">
3 - <div class="video-div" :id="'mui-player-' + item.case_id"></div> 3 + <div class="video-div" :id="'mui-player-' + item.id"></div>
4 <div class="video-bar"> 4 <div class="video-bar">
5 <van-row> 5 <van-row>
6 <van-col span="12" @click="goTo"> 6 <van-col span="12" @click="goTo">
7 - <van-image round width="2rem" height="2rem" style="vertical-align: bottom;" 7 + <van-image round width="2rem" height="2rem" style="vertical-align: middle;" :src="item.avatar" />&nbsp;
8 - src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />&nbsp; 8 + <span style="font-size: 1.05rem;vertical-align: middle;">{{ item.name }}</span>
9 - <span style="font-size: 1.05rem;">王忆慈</span>
10 </van-col> 9 </van-col>
11 <van-col span="12"> 10 <van-col span="12">
12 <div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;"> 11 <div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
13 <span @click="setComment"> 12 <span @click="setComment">
14 <van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" /> 13 <van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
15 - 67 14 + {{ item.comment_num }}
16 </span> 15 </span>
17 &nbsp;&nbsp;&nbsp; 16 &nbsp;&nbsp;&nbsp;
18 <span @click="setLike()"> 17 <span @click="setLike()">
19 - <van-icon v-if="!detail.liked" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" /> 18 + <van-icon v-if="!detail.is_like" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
20 <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" /> 19 <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
21 - 10086 20 + {{ item.favor_num }}
22 </span> 21 </span>
23 </div> 22 </div>
24 </van-col> 23 </van-col>
25 </van-row> 24 </van-row>
26 </div> 25 </div>
27 - <div @click="goTo" style="color: #999999; padding: 0px 1rem 0.5rem;">杨浦民办科技幼稚园 ｜ 藏语</div> 26 + <div @click="goTo" style="color: #999999; padding: 0px 1rem 0.5rem;">{{ item.kg_name }} ｜ {{ item.localism_type }}
27 + </div>
28 </div> 28 </div>
29 </template> 29 </template>
30 30
...@@ -65,26 +65,26 @@ export default { ...@@ -65,26 +65,26 @@ export default {
65 }, 65 },
66 mounted() { 66 mounted() {
67 var mp = new MuiPlayer({ 67 var mp = new MuiPlayer({
68 - container: '#mui-player-' + this.item.case_id, 68 + container: '#mui-player-' + this.item.id,
69 title: this.item.title, 69 title: this.item.title,
70 - src: this.item.video.url, 70 + src: this.item.video,
71 - poster: this.item.cover.url, 71 + poster: this.item.cover,
72 autoFit: false, 72 autoFit: false,
73 videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放 73 videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
74 - {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'}, 74 + { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
75 - {attrKey:'playsinline',attrValue:'playsinline'}, 75 + { attrKey: 'playsinline', attrValue: 'playsinline' },
76 - {attrKey:'x5-video-player-type',attrValue:'h5-page'}, 76 + { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
77 ] 77 ]
78 }) 78 })
79 this.detail = _.cloneDeep(this.item) 79 this.detail = _.cloneDeep(this.item)
80 }, 80 },
81 methods: { 81 methods: {
82 setLike() { 82 setLike() {
83 - this.detail.liked = !this.detail.liked 83 + this.detail.is_like = !this.detail.is_like
84 }, 84 },
85 setComment() { 85 setComment() {
86 console.warn('跳转详情页，移动到留言页'); 86 console.warn('跳转详情页，移动到留言页');
87 - console.warn(this.detail.case_id); 87 + console.warn(this.detail.id);
88 } 88 }
89 } 89 }
90 } 90 }
...@@ -92,18 +92,23 @@ export default { ...@@ -92,18 +92,23 @@ export default {
92 92
93 <style lang="less" scoped> 93 <style lang="less" scoped>
94 .video-wrapper { 94 .video-wrapper {
95 - margin: 1rem; 95 + margin: 1rem;
96 - border-bottom-left-radius: 5px; 96 + border-bottom-left-radius: 5px;
97 - border-bottom-right-radius: 5px; 97 + border-bottom-right-radius: 5px;
98 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13); 98 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
99 +
99 .video-div { 100 .video-div {
100 - border-top-left-radius: 5px; 101 + border-top-left-radius: 5px;
101 border-top-right-radius: 5px; 102 border-top-right-radius: 5px;
102 } 103 }
104 +
103 .video-bar { 105 .video-bar {
104 - color: #713610; 106 + color: #713610;
105 - padding: 1rem; 107 + padding: 1rem;
106 padding-bottom: 0.5rem; 108 padding-bottom: 0.5rem;
109 + .avatar {
110 +
111 + }
107 } 112 }
108 } 113 }
109 </style> 114 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 +import { ref } from 'vue'
2 +import axios from '@/utils/axios';
3 +import _ from 'lodash'
4 +import { Toast } from 'vant';
5 +
6 +export const useVideoList = ($route) => {
7 + // 切换视频语言
8 + const checkMandarin = ref(true); // 普通话选项卡
9 + const checkLocalism = ref(false); // 方言选项卡
10 + const chooseLanguage = ref({ text: '普通话', val: '普通话' }); // 默认选中普通话
11 + const toggleLanguage = () => {
12 + checkMandarin.value = !checkMandarin.value;
13 + checkLocalism.value = !checkLocalism.value;
14 + // 修改默认语言绑定数据
15 + if (checkLocalism.value) {
16 + // tslint:disable-next-line:no-string-literal
17 + chooseLanguage.value = { text: columns[0]['text'], val: columns[0]['val'] }
18 + } else {
19 + chooseLanguage.value = { text: '普通话', val: '普通话' };
20 + }
21 + // 切换语言需要更新列表数据
22 + offset.value = 0
23 + prod_list.value = []
24 + loading.value = true;
25 + finished.value = false;
26 + onLoad()
27 + }
28 + // 方言选择项
29 + const columns = [
30 + { text: '所有方言', val: '所有方言' },
31 + { text: '沪语', val: '沪语' },
32 + { text: '粤语', val: '粤语' },
33 + ];
34 +
35 + const showPicker = ref(false);
36 +
37 + const onConfirm = ({ selectedOptions }) => {
38 + showPicker.value = false;
39 + chooseLanguage.value = {
40 + text: selectedOptions[0].text,
41 + val: selectedOptions[0].val
42 + }
43 + };
44 +
45 + // 绑定页面数据
46 + const bookInfo = ref('');
47 + // tslint:disable-next-line: variable-name
48 + const prod_list = ref([]);
49 + const limit = ref(1)
50 + const offset = ref(0)
51 +
52 + // 处理书籍下作品列表
53 + const loading = ref(false);
54 + const finished = ref(false);
55 +
56 + const onLoad = () => {
57 + // 异步更新数据
58 + axios.get('/srv/?a=book_info', {
59 + params: {
60 + book_id: $route.query.id,
61 + localism_type: chooseLanguage.value.text,
62 + limit: limit.value,
63 + offset: offset.value
64 + }
65 + })
66 + .then(res => {
67 + if (res.data.code === 1) {
68 + bookInfo.value = res.data.data;
69 + prod_list.value = _.concat(prod_list.value, res.data.data.prod_list);
70 + offset.value = prod_list.value.length;
71 + loading.value = false;
72 + // 数据全部加载完成
73 + if (!res.data.data.prod_list.length) {
74 + // 加载状态结束
75 + finished.value = true;
76 + }
77 + } else {
78 + // tslint:disable-next-line: no-console
79 + console.warn(res);
80 + Toast({
81 + icon: 'close',
82 + message: res.data.msg
83 + });
84 + }
85 + })
86 + .catch(err => {
87 + // tslint:disable-next-line: no-console
88 + console.error(err);
89 + })
90 + };
91 +
92 + return {
93 + toggleLanguage,
94 + onLoad,
95 + columns,
96 + prod_list,
97 + finished,
98 + loading,
99 + bookInfo,
100 + showPicker,
101 + checkLocalism,
102 + checkMandarin,
103 + onConfirm,
104 + chooseLanguage
105 + }
106 +}
1 import axios from 'axios'; 1 import axios from 'axios';
2 import router from '../router'; 2 import router from '../router';
3 +import _ from 'lodash'
3 4
4 // 请求拦截器 5 // 请求拦截器
5 axios.interceptors.request.use( 6 axios.interceptors.request.use(
6 config => { 7 config => {
7 // 发送请求前 8 // 发送请求前
9 + if (config.method === 'get') {
10 + // 绑定默认请求头
11 + config.params = _.merge(config.params, {
12 + f: 'voice',
13 + client_id: '313939',
14 + })
15 + }
8 return config; 16 return config;
9 }, 17 },
10 error => { 18 error => {
......
...@@ -3,15 +3,11 @@ ...@@ -3,15 +3,11 @@
3 <div class="modify-top"></div> 3 <div class="modify-top"></div>
4 <div class="book-detail"> 4 <div class="book-detail">
5 <div style="text-align: center;"> 5 <div style="text-align: center;">
6 - <van-image width="220" height="220" 6 + <van-image width="220" height="220" :src="bookInfo.cover" />
7 - src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed" />
8 </div> 7 </div>
9 <div class="book-intro"> 8 <div class="book-intro">
10 - <p class="book-post">逃家小兔绘本</p> 9 + <p class="book-post">{{ bookInfo.name }}</p>
11 - <div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }"> 10 + <div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">{{ bookInfo.note }}</div>
12 - 从前有一只小兔子，总是想要离家出走。有一天他对妈妈说：“我要跑走啦！”“如果你跑走了我就去追你，因为你是我的小宝贝呀！”妈妈说。
13 - 一场爱的捉迷藏就此展开了
14 - </div>
15 <div v-if="hasToggle"> 11 <div v-if="hasToggle">
16 <div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp; 12 <div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;
17 <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" /> 13 <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
...@@ -32,7 +28,7 @@ ...@@ -32,7 +28,7 @@
32 <van-col span="12"> 28 <van-col span="12">
33 <div style="font-size: 1rem; color: #999999; text-align: right;"> 29 <div style="font-size: 1rem; color: #999999; text-align: right;">
34 <van-icon :name="icon_video" /> 30 <van-icon :name="icon_video" />
35 - 54个作品 31 + {{ bookInfo.total }}个作品
36 </div> 32 </div>
37 </van-col> 33 </van-col>
38 </van-row> 34 </van-row>
...@@ -40,12 +36,12 @@ ...@@ -40,12 +36,12 @@
40 <div class="book-video-language"> 36 <div class="book-video-language">
41 <van-row> 37 <van-row>
42 <van-col span="6"> 38 <van-col span="6">
43 - <div @click="toggleLanguage" :class="[check_mandarin ? 'checked' : 'uncheck']">普通话</div> 39 + <div @click="toggleLanguage" :class="[checkMandarin ? 'checked' : 'uncheck']">普通话</div>
44 </van-col> 40 </van-col>
45 <van-col span="6"> 41 <van-col span="6">
46 - <div @click="toggleLanguage" :class="[check_localism ? 'checked' : 'uncheck']">方言</div> 42 + <div @click="toggleLanguage" :class="[checkLocalism ? 'checked' : 'uncheck']">方言</div>
47 </van-col> 43 </van-col>
48 - <van-col span="12" v-if="check_localism" @click="showPicker = true"> 44 + <van-col span="12" v-if="checkLocalism" @click="showPicker = true">
49 <div class="choose-wrapper"> 45 <div class="choose-wrapper">
50 <div class="text"> 46 <div class="text">
51 &nbsp;{{ chooseLanguage.text }} 47 &nbsp;{{ chooseLanguage.text }}
...@@ -65,7 +61,7 @@ ...@@ -65,7 +61,7 @@
65 61
66 <div class="book-video-list"> 62 <div class="book-video-list">
67 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 63 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
68 - <template v-for="item in dataList" :key="item" style="height: 3rem;"> 64 + <template v-for="item in prod_list" :key="item" style="height: 3rem;">
69 <video-card :item="item"></video-card> 65 <video-card :item="item"></video-card>
70 </template> 66 </template>
71 </van-list> 67 </van-list>
...@@ -92,14 +88,18 @@ ...@@ -92,14 +88,18 @@
92 <van-overlay :show="showNotice" z-index="1000"> 88 <van-overlay :show="showNotice" z-index="1000">
93 <div class="wrapper" @click.stop> 89 <div class="wrapper" @click.stop>
94 <div class="block"> 90 <div class="block">
95 - <div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;"><van-icon name="close" color="#FFFFFF" @click="closeNotice" /></div> 91 + <div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;">
92 + <van-icon name="close" color="#FFFFFF" @click="closeNotice" />
93 + </div>
96 <div> 94 <div>
97 <van-image width="100" height="100" :src="icon_notice" /> 95 <van-image width="100" height="100" :src="icon_notice" />
98 <p style="margin: 1rem; font-size: 1.15rem; font-weight: bold; color: #222222;">温馨提示</p> 96 <p style="margin: 1rem; font-size: 1.15rem; font-weight: bold; color: #222222;">温馨提示</p>
99 </div> 97 </div>
100 <div style="color: #333333;"> 98 <div style="color: #333333;">
101 <p>您还没有实名认证</p> 99 <p>您还没有实名认证</p>
102 - <p>请点击 <van-icon :name="icon_me" /> 进行实名认证</p> 100 + <p>请点击
101 + <van-icon :name="icon_me" /> 进行实名认证
102 + </p>
103 <p>实名认证之后再上传</p> 103 <p>实名认证之后再上传</p>
104 </div> 104 </div>
105 <div style="margin: 3rem 0;"> 105 <div style="margin: 3rem 0;">
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
111 </template> 111 </template>
112 112
113 <script setup> 113 <script setup>
114 -import dataList from '@/mock/video_list' 114 +import { useVideoList } from '@/composables/useVideoList.js'
115 115
116 import MyButton from '@/components/MyButton/index.vue' 116 import MyButton from '@/components/MyButton/index.vue'
117 import VideoCard from '@/components/VideoCard/index.vue' 117 import VideoCard from '@/components/VideoCard/index.vue'
...@@ -135,7 +135,7 @@ import { Toast } from 'vant'; ...@@ -135,7 +135,7 @@ import { Toast } from 'vant';
135 const $route = useRoute(); 135 const $route = useRoute();
136 const $router = useRouter(); 136 const $router = useRouter();
137 137
138 -const items = reactive([]) 138 +const { toggleLanguage, onLoad, columns, prod_list, finished, loading, bookInfo, showPicker, checkLocalism, checkMandarin, onConfirm, chooseLanguage } = useVideoList($route);
139 139
140 const gotoMe = () => { 140 const gotoMe = () => {
141 console.warn('跳转我的地址'); 141 console.warn('跳转我的地址');
...@@ -149,73 +149,13 @@ const onToggle = (v) => { // 展开/折叠 ...@@ -149,73 +149,13 @@ const onToggle = (v) => { // 展开/折叠
149 isToggle.value = v 149 isToggle.value = v
150 } 150 }
151 151
152 -// 切换视频语言
153 -const check_mandarin = ref(true);
154 -const check_localism = ref(false);
155 -const chooseLanguage = ref({ text: '普通话', val: '00' }); // 默认选中普通话
156 -const toggleLanguage = () => {
157 - check_mandarin.value = !check_mandarin.value;
158 - check_localism.value = !check_localism.value;
159 - // 修改默认语言绑定数据
160 - if (check_localism.value) {
161 - chooseLanguage.value = { text: columns[0]['text'], val: columns[0]['val'] }
162 - } else {
163 - chooseLanguage.value = { text: '普通话', val: '00' };
164 - }
165 -}
166 -// 方言选择项
167 -const columns = [
168 - { text: '所有方言', val: '00' },
169 - { text: '沪语', val: '01' },
170 - { text: '粤语', val: '02' },
171 -];
172 -
173 -const showPicker = ref(false);
174 -
175 -const onConfirm = ({ selectedOptions }) => {
176 - showPicker.value = false;
177 - chooseLanguage.value = {
178 - text: selectedOptions[0].text,
179 - val: selectedOptions[0].val
180 - }
181 -};
182 -
183 onMounted(() => { 152 onMounted(() => {
184 // 判断是否显示简介的展开图标 153 // 判断是否显示简介的展开图标
185 nextTick(() => { 154 nextTick(() => {
186 hasToggle.value = tools.hasEllipsis('book-intro'); 155 hasToggle.value = tools.hasEllipsis('book-intro');
187 }) 156 })
188 - for (let index = 0; index < 20; index++) {
189 - items.push({
190 - id: index,
191 - avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
192 - })
193 - }
194 }) 157 })
195 158
196 -// 处理书籍下作品列表
197 -const list = ref([]);
198 -const loading = ref(false);
199 -const finished = ref(false);
200 -
201 -const onLoad = () => {
202 - // 异步更新数据
203 - // setTimeout 仅做示例，真实场景中一般为 ajax 请求
204 - setTimeout(() => {
205 - for (let i = 0; i < 20; i++) {
206 - list.value.push(list.value.length + 1);
207 - }
208 -
209 - // 加载状态结束
210 - loading.value = false;
211 -
212 - // 数据全部加载完成
213 - if (list.value.length >= 100) {
214 - finished.value = true;
215 - }
216 - }, 1000);
217 -};
218 -
219 // 书籍订阅 159 // 书籍订阅
220 let is_subscribe = ref(false); 160 let is_subscribe = ref(false);
221 const onSubscribe = () => { 161 const onSubscribe = () => {
...@@ -250,20 +190,11 @@ export default { ...@@ -250,20 +190,11 @@ export default {
250 mixins: [mixin.init], 190 mixins: [mixin.init],
251 data() { 191 data() {
252 return { 192 return {
253 -
254 } 193 }
255 }, 194 },
256 created() { 195 created() {
257 - this.getList()
258 }, 196 },
259 methods: { 197 methods: {
260 - getList() {
261 - _.each(this.dataList, item => {
262 - let video = item.video && item.video.url ? item.video.url : 'http://static.smartisanos.cn/common/video/t1-ui.mp4';
263 - let cover = item.cover && item.cover.url ? item.cover.url : 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg';
264 - item.options = { video: transCaseList(video, cover), autoplay: false, preload: 'none' }
265 - })
266 - }
267 } 198 }
268 } 199 }
269 </script> 200 </script>
......
...@@ -2,10 +2,13 @@ ...@@ -2,10 +2,13 @@
2 <div class="choose-book-page content-bg"> 2 <div class="choose-book-page content-bg">
3 <div class="modify-top"></div> 3 <div class="modify-top"></div>
4 <div class="belong-school"> 4 <div class="belong-school">
5 - <van-image round width="2rem" height="2rem" lazy-load src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" style="vertical-align: text-bottom;" > 5 + <template v-if="kg_id">
6 - <template v-slot:error>加载失败</template> 6 + <van-image round width="2rem" height="2rem" lazy-load :src="kindergartenInfo.logo"
7 - </van-image> 7 + style="vertical-align: text-bottom;">
8 - <p class="title">杨浦民办科技幼稚园</p> 8 + <template v-slot:error>加载失败</template>
9 + </van-image>
10 + <p class="title">{{ kindergartenInfo.name }}</p>
11 + </template>
9 </div> 12 </div>
10 <div style="position: relative;"> 13 <div style="position: relative;">
11 <div class="ding left"></div> 14 <div class="ding left"></div>
...@@ -21,7 +24,7 @@ ...@@ -21,7 +24,7 @@
21 <div class="ding right"></div> 24 <div class="ding right"></div>
22 </div> 25 </div>
23 <div class="book-list"> 26 <div class="book-list">
24 - <template v-for="(item, key) in items" :key="key"> 27 + <template v-for="(item, key) in kindergartenInfo.book_list" :key="key">
25 <book-card type="C" :item="item" @on-click="onClick(item)"></book-card> 28 <book-card type="C" :item="item" @on-click="onClick(item)"></book-card>
26 </template> 29 </template>
27 </div> 30 </div>
...@@ -34,23 +37,74 @@ ...@@ -34,23 +37,74 @@
34 import MyButton from '@/components/MyButton/index.vue' 37 import MyButton from '@/components/MyButton/index.vue'
35 import BookCard from '@/components/BookCard/index.vue' 38 import BookCard from '@/components/BookCard/index.vue'
36 import ShortcutFixed from '@/components/ShortcutFixed/index.vue' 39 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
37 -
38 import { ref, reactive, onMounted } from 'vue' 40 import { ref, reactive, onMounted } from 'vue'
39 import { useRoute, useRouter } from 'vue-router' 41 import { useRoute, useRouter } from 'vue-router'
40 import axios from '@/utils/axios'; 42 import axios from '@/utils/axios';
43 +import _ from 'lodash'
41 import $ from 'jquery' 44 import $ from 'jquery'
42 import { Toast } from 'vant'; 45 import { Toast } from 'vant';
43 const $route = useRoute(); 46 const $route = useRoute();
44 const $router = useRouter(); 47 const $router = useRouter();
48 +
45 // 自定义按钮颜色样式 49 // 自定义按钮颜色样式
46 const styleObject = reactive({ 50 const styleObject = reactive({
47 - backgroundColor: '#F4675A', 51 + backgroundColor: '#F4675A',
48 - color: '#FFFFFF', 52 + color: '#FFFFFF',
49 borderColor: '#F4675A' 53 borderColor: '#F4675A'
50 }) 54 })
51 -const items = reactive([]) 55 +
56 +// 页面数据绑定
57 +const kg_id = $route.query.kg_id ? $route.query.kg_id : '';
58 +const kindergartenInfo = ref({
59 + id: '',
60 + logo: '',
61 + name: '',
62 + book_list: []
63 +});
64 +onMounted(() => {
65 + if (kg_id) { // 从学校列表进入
66 + axios.get('/srv/?a=kg_book_list', {
67 + params: {
68 + kg_id
69 + }
70 + })
71 + .then(res => {
72 + if (res.data.code === 1) {
73 + kindergartenInfo.value = res.data.data;
74 + } else {
75 + console.warn(res);
76 + Toast({
77 + icon: 'close',
78 + message: res.data.msg
79 + });
80 + }
81 + })
82 + .catch(err => {
83 + console.error(err);
84 + })
85 + } else { // 从访客进入
86 + axios.get('/srv/?a=book_list')
87 + .then(res => {
88 + if (res.data.code === 1) {
89 + kindergartenInfo.value = {
90 + book_list: res.data.data
91 + }
92 + } else {
93 + console.warn(res);
94 + Toast({
95 + icon: 'close',
96 + message: res.data.msg
97 + });
98 + }
99 + })
100 + .catch(err => {
101 + console.error(err);
102 + })
103 + }
104 +})
105 +
106 +// 跳转书籍详情页
52 const onClick = (item) => { 107 const onClick = (item) => {
53 - // 调整书籍详情页
54 $router.push({ 108 $router.push({
55 path: '/client/bookDetail', 109 path: '/client/bookDetail',
56 query: { 110 query: {
...@@ -58,17 +112,10 @@ const onClick = (item) => { ...@@ -58,17 +112,10 @@ const onClick = (item) => {
58 } 112 }
59 }); 113 });
60 } 114 }
115 +
61 const gotoMe = () => { 116 const gotoMe = () => {
62 console.warn('跳转我的地址'); 117 console.warn('跳转我的地址');
63 } 118 }
64 - onMounted(() => {
65 - for (let index = 0; index < 20; index++) {
66 - items.push({
67 - id: index,
68 - avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
69 - })
70 - }
71 - })
72 </script> 119 </script>
73 120
74 <script> 121 <script>
...@@ -76,12 +123,12 @@ import mixin from 'common/mixin'; ...@@ -76,12 +123,12 @@ import mixin from 'common/mixin';
76 123
77 export default { 124 export default {
78 mixins: [mixin.init], 125 mixins: [mixin.init],
79 - data () { 126 + data() {
80 return { 127 return {
81 128
82 } 129 }
83 }, 130 },
84 - mounted () { 131 + mounted() {
85 132
86 }, 133 },
87 methods: { 134 methods: {
...@@ -92,40 +139,46 @@ export default { ...@@ -92,40 +139,46 @@ export default {
92 139
93 <style lang="less" scoped> 140 <style lang="less" scoped>
94 @import url('@css/content-bg.less'); 141 @import url('@css/content-bg.less');
95 - .choose-book-page { 142 +
96 - .belong-school { 143 +.choose-book-page {
97 - padding: 1.5rem; 144 + .belong-school {
98 - .title { 145 + padding: 1.5rem;
99 - color: #222222; 146 +
100 - display: inline-block; 147 + .title {
101 - vertical-align: super; 148 + color: #222222;
102 - margin-left: 1rem; 149 + display: inline-block;
103 - } 150 + vertical-align: super;
104 - 151 + margin-left: 1rem;
105 } 152 }
106 - .book-list { 153 +
107 - margin: 1rem; 154 + }
108 - margin-top: 1.25rem; 155 +
109 - padding-top: 1rem; 156 + .book-list {
110 - border-radius: 10px; 157 + margin: 1rem;
111 - background-color: rgba(255, 255, 255, 1); 158 + margin-top: 1.25rem;
112 - box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13); 159 + padding-top: 1rem;
160 + border-radius: 10px;
161 + background-color: rgba(255, 255, 255, 1);
162 + box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
163 + }
164 +
165 + .ding {
166 + z-index: 69;
167 + position: absolute;
168 + top: 2.5rem;
169 + width: 1rem;
170 + height: 3rem;
171 + background-image: url('@images/ding-left@2x.png');
172 + background-size: contain;
173 + background-repeat: no-repeat;
174 +
175 + &.left {
176 + left: 8rem;
113 } 177 }
114 - .ding { 178 +
115 - z-index: 69; 179 + &.right {
116 - position: absolute; 180 + right: 8rem;
117 - top: 2.5rem;
118 - width: 1rem;
119 - height: 3rem;
120 - background-image: url('@images/ding-left@2x.png');
121 - background-size: contain;
122 - background-repeat: no-repeat;
123 - &.left {
124 - left: 8rem;
125 - }
126 - &.right {
127 - right: 8rem;
128 - }
129 } 181 }
130 } 182 }
183 +}
131 </style> 184 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <template v-for="(item, key) in schoolList" :key="key"> 5 <template v-for="(item, key) in schoolList" :key="key">
6 <right-side-list 6 <right-side-list
7 @on-click="onClick(item)" 7 @on-click="onClick(item)"
8 - :avatar="item.avatar"> 8 + :avatar="item.logo">
9 {{ item.name }} 9 {{ item.name }}
10 </right-side-list> 10 </right-side-list>
11 </template> 11 </template>
...@@ -15,26 +15,41 @@ ...@@ -15,26 +15,41 @@
15 15
16 <script setup> 16 <script setup>
17 import RightSideList from '@/components/RightSideList/index.vue' 17 import RightSideList from '@/components/RightSideList/index.vue'
18 -import { reactive, onMounted } from 'vue'; 18 +import { ref, onMounted } from 'vue';
19 +import axios from '@/utils/axios';
19 import $ from 'jquery' 20 import $ from 'jquery'
20 import { useRoute, useRouter } from 'vue-router' 21 import { useRoute, useRouter } from 'vue-router'
21 import { Toast } from 'vant'; 22 import { Toast } from 'vant';
22 const $route = useRoute(); 23 const $route = useRoute();
23 const $router = useRouter(); 24 const $router = useRouter();
24 -const schoolList = reactive([]) 25 +const schoolList = ref([])
26 +
25 onMounted(() => { 27 onMounted(() => {
26 - for (let index = 0; index < 20; index++) { 28 + // 获取幼儿园列表页
27 - schoolList.push({ 29 + axios.get('/srv/?a=kg_list')
28 - id: index, 30 + .then(res => {
29 - avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg', 31 + if (res.data.code === 1) {
30 - name: '中国福利会托儿所' 32 + schoolList.value = res.data.data;
31 - }) 33 + } else {
32 - } 34 + console.warn(res);
35 + Toast({
36 + icon: 'close',
37 + message: res.data.msg
38 + });
39 + }
40 + })
41 + .catch(err => {
42 + console.error(err);
43 + })
33 }) 44 })
34 45
46 +// 跳转幼儿园爱心书籍列表页
35 const onClick = (item) => { 47 const onClick = (item) => {
36 $router.push({ 48 $router.push({
37 - path: '/client/chooseBook' 49 + path: '/client/chooseBook',
50 + query: {
51 + kg_id: item.id
52 + }
38 }); 53 });
39 } 54 }
40 </script> 55 </script>
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
34 "src/**/*.vue", 34 "src/**/*.vue",
35 "tests/**/*.ts", 35 "tests/**/*.ts",
36 "tests/**/*.tsx" 36 "tests/**/*.tsx"
37 -, "src/store/index.ts"], 37 +, "src/store/index.ts", "src/composables/useVideoList.js"],
38 "exclude": [ 38 "exclude": [
39 "node_modules" 39 "node_modules"
40 ] 40 ]
......
...@@ -23,6 +23,7 @@ export default({ command, mode }) => { ...@@ -23,6 +23,7 @@ export default({ command, mode }) => {
23 alias: { // 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。 23 alias: { // 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。
24 "@": path.resolve(__dirname, "src"), 24 "@": path.resolve(__dirname, "src"),
25 "@components": path.resolve(__dirname, "src/components"), 25 "@components": path.resolve(__dirname, "src/components"),
26 + "@composables": path.resolve(__dirname, "src/composables"),
26 "@utils": path.resolve(__dirname, "src/utils"), 27 "@utils": path.resolve(__dirname, "src/utils"),
27 "@images": path.resolve(__dirname, "src/assets/images"), 28 "@images": path.resolve(__dirname, "src/assets/images"),
28 "@css": path.resolve(__dirname, "src/assets/css"), 29 "@css": path.resolve(__dirname, "src/assets/css"),
......