Showing
7 changed files
with
119 additions
and
34 deletions
| ... | @@ -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" /> <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 = () => { |
| 35 | - emit('on-click', '') | 31 | + if (props.type === 'C') { // 类型是客户端时,才能查看 |
| 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,25 +24,45 @@ const handle = () => { | ... | @@ -24,25 +24,45 @@ 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 | // 返回首页 |
| 38 | - this.$router.push({ | 46 | + if (this.type === 'B') { // 服务端判断 |
| 39 | - path: '/client/index' | 47 | + this.$router.push({ |
| 40 | - }); | 48 | + path: '/business/index' |
| 49 | + }); | ||
| 50 | + } else { | ||
| 51 | + this.$router.push({ | ||
| 52 | + path: '/client/index' | ||
| 53 | + }); | ||
| 54 | + } | ||
| 41 | }, | 55 | }, |
| 42 | toMe () { | 56 | toMe () { |
| 43 | - this.$router.push({ | 57 | + if (this.type === 'B') { // 服务端判断 |
| 44 | - path: '/me/index' | 58 | + this.$router.push({ |
| 45 | - }); | 59 | + path: '/business/me' |
| 60 | + }); | ||
| 61 | + } else { | ||
| 62 | + this.$router.push({ | ||
| 63 | + path: '/me/index' | ||
| 64 | + }); | ||
| 65 | + } | ||
| 46 | } | 66 | } |
| 47 | } | 67 | } |
| 48 | } | 68 | } | ... | ... |
| ... | @@ -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 }} </span> | ||
| 12 | + <span v-else><van-tag round color="red">{{ item.sum }}</van-tag> </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> | ... | ... |
-
Please register or login to post a comment