hookehuyr

✨ feat(相关页面): 完善C/B端相关组件在页面的功能逻辑

...@@ -2,22 +2,17 @@ ...@@ -2,22 +2,17 @@
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="6"> 4 <van-col span="6">
5 - <van-image 5 + <van-image width="5rem" height="5rem" :src="item.avatar" style="text-align: center;" />
6 - width="5rem"
7 - height="5rem"
8 - :src="item.avatar"
9 - style="text-align: center;"
10 - />
11 </van-col> 6 </van-col>
12 - <van-col span="18" style="padding-left: 1rem;"> 7 + <van-col class="wrapper" span="18">
13 - <p style="font-size: 1.15rem; color: #222222; font-weight: bold;">逃家小兔绘本</p> 8 + <p class="title">逃家小兔绘本</p>
14 - <div style="font-size: 0.85rem; color: #999999; margin: 0.5rem 0;" class="van-multi-ellipsis--l2"> 9 + <div v-if="type === 'C'" class="van-multi-ellipsis--l2 content">
15 从前有一只小兔子,总是想要离家出走。有一天,他对妈妈说如果有大灰狼怎么办,不要把门打开 10 从前有一只小兔子,总是想要离家出走。有一天,他对妈妈说如果有大灰狼怎么办,不要把门打开
16 </div> 11 </div>
17 - <div style="font-size: 0.85rem; color: #999999; margin-top: 0.5rem;"> 12 + <div class="sub">
18 - <van-icon :name="icon_video" /> 13 + <van-icon :name="icon_video" />&nbsp;&nbsp;<span>54个作品</span>
19 - 54个作品
20 </div> 14 </div>
15 + <div v-if="type === 'B'" class="upload" @click="onUpload(item)"> 上传视频 </div>
21 </van-col> 16 </van-col>
22 </van-row> 17 </van-row>
23 </div> 18 </div>
...@@ -28,11 +23,19 @@ import icon_video from '@images/video.png' ...@@ -28,11 +23,19 @@ import icon_video from '@images/video.png'
28 23
29 import { ref, reactive, onMounted } from 'vue' 24 import { ref, reactive, onMounted } from 'vue'
30 const props = defineProps({ 25 const props = defineProps({
31 - item: Object 26 + item: Object,
27 + type: String
32 }) 28 })
33 const emit = defineEmits(['on-click']); 29 const emit = defineEmits(['on-click']);
34 const handle = () => { 30 const handle = () => {
31 + if (props.type === 'C') { // 类型是客户端时,才能查看
35 emit('on-click', '') 32 emit('on-click', '')
33 + }
34 +}
35 +
36 +// 上传视频
37 +const onUpload = (v) => {
38 + console.warn(v);
36 } 39 }
37 onMounted(() => { 40 onMounted(() => {
38 41
...@@ -59,5 +62,33 @@ export default { ...@@ -59,5 +62,33 @@ export default {
59 .book-item { 62 .book-item {
60 margin: 1rem; 63 margin: 1rem;
61 padding: 1rem; 64 padding: 1rem;
65 + .wrapper {
66 + padding-left: 1rem;
67 + .title {
68 + font-size: 1.15rem;
69 + color: #222222;
70 + font-weight: bold;
71 + }
72 + .content {
73 + font-size: 0.85rem;
74 + color: #999999;
75 + margin: 0.5rem 0;
76 + }
77 + .sub {
78 + font-size: 0.85rem;
79 + color: #999999;
80 + margin-top: 0.5rem;
81 + }
82 + .upload {
83 + color: #713610;
84 + background-color: #F9D95C;
85 + border-radius: 15px;
86 + width: 4rem;
87 + padding: 0.25rem 0.5rem;
88 + font-size: 0.8rem;
89 + text-align: center;
90 + margin-top: 1rem;
91 + }
92 + }
62 } 93 }
63 </style> 94 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div> 2 <div>
3 - <img @click="toHome" class="icon-home" referrerpolicy="no-referrer" :src="icon_home" /> 3 + <img v-if="isHome" @click="toHome" class="icon-home" referrerpolicy="no-referrer" :src="icon_home" />
4 - <img @click="toMe" class="icon-me" referrerpolicy="no-referrer" :src="icon_me" /> 4 + <img v-if="isMe" @click="toMe" class="icon-me" referrerpolicy="no-referrer" :src="icon_me" />
5 </div> 5 </div>
6 </template> 6 </template>
7 7
...@@ -10,9 +10,9 @@ import icon_me from '@images/icon-my@2x.png' ...@@ -10,9 +10,9 @@ import icon_me from '@images/icon-my@2x.png'
10 import icon_home from '@images/icon-home@2x.png' 10 import icon_home from '@images/icon-home@2x.png'
11 11
12 import { ref, reactive, onMounted } from 'vue' 12 import { ref, reactive, onMounted } from 'vue'
13 -const props = defineProps({ 13 +// const props = defineProps({
14 - type: String 14 +// type: String
15 -}) 15 +// })
16 const emit = defineEmits(['on-click']); 16 const emit = defineEmits(['on-click']);
17 const handle = () => { 17 const handle = () => {
18 emit('on-click', '') 18 emit('on-click', '')
...@@ -24,27 +24,47 @@ const handle = () => { ...@@ -24,27 +24,47 @@ const handle = () => {
24 24
25 <script> 25 <script>
26 export default { 26 export default {
27 + props: ['type', 'item'],
27 data () { 28 data () {
28 return { 29 return {
29 30
30 } 31 }
31 }, 32 },
33 + computed: {
34 + isHome () {
35 + return this.item.indexOf('home') !== -1 ? true : false
36 + },
37 + isMe () {
38 + return this.item.indexOf('me') !== -1 ? true : false
39 + }
40 + },
32 mounted () { 41 mounted () {
33 -
34 }, 42 },
35 methods: { 43 methods: {
36 toHome () { 44 toHome () {
37 // 返回首页 45 // 返回首页
46 + if (this.type === 'B') { // 服务端判断
47 + this.$router.push({
48 + path: '/business/index'
49 + });
50 + } else {
38 this.$router.push({ 51 this.$router.push({
39 path: '/client/index' 52 path: '/client/index'
40 }); 53 });
54 + }
41 }, 55 },
42 toMe () { 56 toMe () {
57 + if (this.type === 'B') { // 服务端判断
58 + this.$router.push({
59 + path: '/business/me'
60 + });
61 + } else {
43 this.$router.push({ 62 this.$router.push({
44 path: '/me/index' 63 path: '/me/index'
45 }); 64 });
46 } 65 }
47 } 66 }
67 + }
48 } 68 }
49 </script> 69 </script>
50 70
......
...@@ -45,11 +45,11 @@ ...@@ -45,11 +45,11 @@
45 </van-row> 45 </van-row>
46 </div> 46 </div>
47 <template v-for="(item, key) in items" :key="key"> 47 <template v-for="(item, key) in items" :key="key">
48 - <book-card :item="item" @on-click="onClick(item)"></book-card> 48 + <book-card :item="item" type="B" @on-click="onClick(item)"></book-card>
49 </template> 49 </template>
50 </div> 50 </div>
51 <div style="height: 1rem;"></div> 51 <div style="height: 1rem;"></div>
52 - <shortcut-fixed @on-click="gotoMe()"></shortcut-fixed> 52 + <shortcut-fixed type="B" :item="['me']"></shortcut-fixed>
53 </div> 53 </div>
54 </template> 54 </template>
55 55
......
1 <template> 1 <template>
2 - <div class=""></div> 2 + <div style="background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); padding: 1rem; text-align: center;">
3 + <van-image round width="4rem" height="4rem" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng52f007e83aa3baa494a5c9947e8c5bf537f267bce528e54b104995300d55c956" />
4 + <p style="margin-top: 1rem; font-size: 1.05rem; font-weight: bold;">杨浦民办科技幼稚园</p>
5 + </div>
6 + <template v-for="(item, key) in itemList" :key="key">
7 + <div class="van-hairline--bottom item-list" @click="goTo(item.to)">
8 + <van-row>
9 + <van-col span="12">{{ item.name }}</van-col>
10 + <van-col span="12" style="text-align: right; color: #777777;">
11 + <span v-if="!item.tag">{{ item.sum }}&nbsp;&nbsp;</span>
12 + <span v-else><van-tag round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;</span>
13 + <van-icon name="arrow" /></van-col>
14 + </van-row>
15 + </div>
16 + </template>
17 + <shortcut-fixed type="B" :item="['home']"></shortcut-fixed>
3 </template> 18 </template>
4 19
5 <script setup> 20 <script setup>
21 +import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
22 +
6 import { ref, reactive, onMounted } from 'vue' 23 import { ref, reactive, onMounted } from 'vue'
7 import { useRoute, useRouter } from 'vue-router' 24 import { useRoute, useRouter } from 'vue-router'
8 import axios from '@/utils/axios'; 25 import axios from '@/utils/axios';
...@@ -11,6 +28,20 @@ import { Toast } from 'vant'; ...@@ -11,6 +28,20 @@ import { Toast } from 'vant';
11 const $route = useRoute(); 28 const $route = useRoute();
12 const $router = useRouter(); 29 const $router = useRouter();
13 30
31 +const itemList = [
32 + {
33 + name: '幼儿园上传视频',
34 + sum: '5',
35 + to: '/me/donateList'
36 + },
37 + {
38 + name: '家长上传视频',
39 + sum: '2',
40 + tag: true,
41 + to: '/me/message'
42 + },
43 +]
44 +
14 onMounted(() => { 45 onMounted(() => {
15 46
16 }) 47 })
...@@ -36,5 +67,8 @@ export default { ...@@ -36,5 +67,8 @@ export default {
36 </script> 67 </script>
37 68
38 <style lang="less" scoped> 69 <style lang="less" scoped>
39 - 70 +.item-list {
71 + padding: 1rem 0;
72 + margin: 0 1rem;
73 +}
40 </style> 74 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
85 <my-button @on-click="uploadVideo" type="primary">上传作品</my-button> 85 <my-button @on-click="uploadVideo" type="primary">上传作品</my-button>
86 </div> 86 </div>
87 </div> 87 </div>
88 - <shortcut-fixed @on-click="gotoMe()"></shortcut-fixed> 88 + <shortcut-fixed type="C" :item="['home', 'me']"></shortcut-fixed>
89 </div> 89 </div>
90 90
91 <!-- 上传作品时,如果没有实名认证提示弹框 --> 91 <!-- 上传作品时,如果没有实名认证提示弹框 -->
......
...@@ -22,11 +22,11 @@ ...@@ -22,11 +22,11 @@
22 </div> 22 </div>
23 <div class="book-list"> 23 <div class="book-list">
24 <template v-for="(item, key) in items" :key="key"> 24 <template v-for="(item, key) in items" :key="key">
25 - <book-card :item="item" @on-click="onClick(item)"></book-card> 25 + <book-card type="C" :item="item" @on-click="onClick(item)"></book-card>
26 </template> 26 </template>
27 </div> 27 </div>
28 <div style="height: 1rem;"></div> 28 <div style="height: 1rem;"></div>
29 - <shortcut-fixed @on-click="gotoMe()"></shortcut-fixed> 29 + <shortcut-fixed type="C" :item="['home', 'me']"></shortcut-fixed>
30 </div> 30 </div>
31 </template> 31 </template>
32 32
......
1 <template> 1 <template>
2 <div class="book-list"> 2 <div class="book-list">
3 <template v-for="(item, key) in items" :key="key"> 3 <template v-for="(item, key) in items" :key="key">
4 - <book-card :item="item" @on-click="onClick(item)"></book-card> 4 + <book-card type="C" :item="item" @on-click="onClick(item)"></book-card>
5 </template> 5 </template>
6 </div> 6 </div>
7 </template> 7 </template>
......