Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
97e246bb 1 parent 35550544

✨ feat(客户端): 书籍详情页完善主体结构

Inline Side-by-side
Showing 4 changed files with 179 additions and 9 deletions
import { createApp } from 'vue';
import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload } from 'vant';
import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh } from 'vant';
import router from './router';
import App from './App.vue';
import axios from './utils/axios';
......@@ -26,6 +26,8 @@ app.use(Tabs);
app.use(Overlay);
app.use(NumberKeyboard);
app.use(Lazyload);
app.use(List);
app.use(PullRefresh);
app.use(ConfigProvider);
......
......@@ -3,11 +3,7 @@
<div class="modify-top"></div>
<div class="book-detail">
<div style="text-align: center;">
<van-image
width="220"
height="220"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed"
/>
<van-image width="220" height="220" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed" />
</div>
<div class="book-intro">
<p class="book-post">逃家小兔绘本</p>
......@@ -16,17 +12,83 @@
一场爱的捉迷藏就此展开了
</div>
<div v-if="hasToggle">
<div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" name="http://gyzs.onwall.cn/icon-zhankai%402x.png" /></div>
<div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" name="http://gyzs.onwall.cn/icon-guanbi%402x.png" /></div>
<div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" /></div>
<div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" /></div>
</div>
</div>
<div class="book-video-title">
<van-row>
<van-col span="12">
作品演绎
<div style="background-color: #F9D95C; width: 70px; height: 4px;"></div>
</van-col>
<van-col span="12">
<div style="font-size: 1rem; color: #999999; text-align: right;">
<van-icon :name="icon_video" />
54个作品
</div>
</van-col>
</van-row>
</div>
<div class="book-video-language">
<van-row>
<van-col span="6">
<div class="uncheck">普通话</div>
</van-col>
<van-col span="6">
<div class="checked">方言</div>
</van-col>
<van-col span="12">
<div class="choose-wrapper">
<div class="text">
&nbsp;所有方言
</div>
<div class="icon">
<van-icon name="arrow-down" />&nbsp;
</div>
</div>
</van-col>
</van-row>
</div>
<div class="book-video-list">
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad">
<div v-for="item in list" :key="item" style="height: 3rem;" >{{ item }}</div>
</van-list>
</div>
</div>
<div style="height: 5rem;"></div>
<div class="book-bar">
<div class="text">
<van-icon :name="icon_subscribed" size="1.25rem" style="margin: 0 auto;" />
<span style="font-size: 0.85rem;">订阅</span>
</div>
<div class="button">
<my-button type="custom" :custom-style="styleObject1">爱心捐书</my-button>
</div>
<div class="button">
<my-button type="custom" :custom-style="styleObject2">上传作品</my-button>
</div>
</div>
<div style="height: 1rem;"></div>
<to-me @on-click="gotoMe()"></to-me>
</div>
</template>
<script setup>
import MyButton from '@/components/MyButton/index.vue'
import icon_video from '@images/video.png'
import icon_up from '@images/icon-guanbi@2x.png'
import icon_down from '@images/icon-zhankai@2x.png'
import icon_subscribed from '@images/icon-dingyue01@2x.png'
import icon_unsubscribe from '@images/icon-dingyue02@2x.png'
import ToMe from '@/components/ToMe/index.vue'
import tools from '@/common/tool'
import { ref, reactive, onMounted } from 'vue'
......@@ -37,6 +99,18 @@ import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();
// 自定义按钮颜色样式
const styleObject1 = reactive({
backgroundColor: '#FFFFFF',
color: '#713610',
borderColor: '#713610'
})
const styleObject2 = reactive({
backgroundColor: '#F9D95C',
color: '#713610',
borderColor: '#F9D95C'
})
const items = reactive([])
const gotoMe = () => {
......@@ -61,6 +135,29 @@ const $router = useRouter();
})
}
})
// 处理书籍下作品列表
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 20; i++) {
list.value.push(list.value.length + 1);
}
// 加载状态结束
loading.value = false;
// 数据全部加载完成
if (list.value.length >= 100) {
finished.value = true;
}
}, 1000);
};
</script>
<script>
......@@ -110,6 +207,77 @@ export default {
font-size: 1rem;
}
}
.book-video-title {
background-color: #F7F7F7;
padding: 1rem 1.5rem;
}
.book-video-language {
padding: 1rem;
.uncheck {
background: #F7F7F7;
border-radius: 15px;
padding: 0.5rem;
text-align: center;
color: #222222;
margin: 0 0.25rem;
}
.checked {
background: #F9D95C;
border-radius: 15px;
padding: 0.5rem;
text-align: center;
color: #222222;
margin: 0 0.25rem;
}
.choose-wrapper {
background: #F7F7F7;
border-radius: 15px;
padding: 0.5rem;
text-align: center;
color: #B0B0B0;
margin: 0 0.25rem;
.text {
display: inline-block;
text-align: left;
width: 80%;
}
.icon {
display: inline-block;
text-align: right;
width: 20%;
}
}
}
.book-video-list {
height: 20rem;
overflow: scroll;
}
}
.book-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
box-sizing: content-box;
background-color: white;
padding: 1rem;
.text {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 3rem;
color: #713610;
text-align: center;
}
.button {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
padding: 0 0.5rem;
}
}
}
</style>
\ No newline at end of file
......