Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
50b07b03 1 parent c683b675

✨ feat(家长端): （甲方新提需求）选择学校列表功能调整，新增捐赠详情页，新增捐赠项组件

Inline Side-by-side
Showing 4 changed files with 160 additions and 11 deletions
<!--
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-30 10:20:34
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 11:56:24
* @FilePath: /tswj/src/components/RankingList/index.vue
-->
<template>
<!-- TODO: 捐赠排行榜item组件完善 -->
<div style="margin: 1rem 0; background-color: #FFF; position: relative;">
<van-row>
<van-col span="2" style="position: relative;">
<div style="position: absolute; top: 0; left: 20%;">
<van-icon :name="icon_ranking" size="1.25rem" />
</div>
<div style="position: absolute; top: 0; left: 40%;">1</div>
</van-col>
<van-col span="18" style="padding: 1rem 0;">
<!-- 如果多个学校遍历包裹结构 -->
<div style="position: relative; height: 3rem;" @click="go('/client/chooseBook', { kg_id: item.id })">
<van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
<van-col span="4">
<van-image round width="3rem" height="3rem" :src="item.avatar ? item.avatar : icon_avatar" style="vertical-align: text-bottom;" />
</van-col>
<van-col span="20">
<p class="title">{{ item.name }}</p>
</van-col>
</van-row>
</div>
</van-col>
<van-col span="2">
<div style="text-align: center; position: absolute; top: 40%;" @click="go('/client/donateList', { kg_id: item.id })">
<van-icon name="arrow" color="#c5c5c5" size="1.25rem" />3000
</div>
</van-col>
</van-row>
</div>
</template>
<script setup>
import icon_avatar from '@images/que-logo@2x.png'
import icon_ranking from '@images/icon-shoucang02@2x.png'
import { useGo } from '@/hooks/useGo'
const go = useGo()
// eslint-disable-next-line no-unused-vars
const props = defineProps({
item: {
type: Object,
default(rawProps) {
return rawProps
}
}
})
const emit = defineEmits(['on-icon-click']);
const handle = () => {
emit('on-icon-click', '')
}
</script>
<style lang="less" scoped>
.wrapper {
background-color: #fff;
margin: 2rem 0;
height: 3rem;
// overflow: auto;
.avatar {
vertical-align: middle;
}
.title {
color: #222222;
display: inline-block;
vertical-align: super;
margin-left: 2rem;
}
}
</style>
/*
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-25 18:03:54
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 11:59:59
* @FilePath: /tswj/src/router/routes/modules/client/index.js
* @Description: 家长端展示页路由表
*/
const index = [{
path: '/',
name: '首页',
......@@ -25,6 +33,14 @@ const index = [{
},
children: []
}, {
path: '/client/donateList',
name: '幼儿园捐赠人捐赠金额排行榜',
component: () => import('@/views/client/donateList.vue'),
meta: {
title: '捐赠明细'
},
children: []
}, {
path: '/client/chooseBook',
name: '客户端选择爱心书籍',
component: () => import('@/views/client/chooseBook.vue'),
......
<!--
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-04-21 11:21:39
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 11:30:12
* @FilePath: /tswj/src/views/client/chooseSchool.vue
* @Description: 选择学校列表
-->
<template>
<div class="choose-school-page content-bg">
<div class="modify-top" />
<div class="wrapper-content">
<template v-for="(item, key) in schoolList" :key="key">
<right-side-list
:avatar="item.logo"
@on-icon-click="go('/client/chooseBook', { kg_id: item.id })"
>
<span @click="go('/client/chooseBook', { kg_id: item.id })">
{{ item.name }}
</span>
</right-side-list>
<ranking-item :item="item" />
</template>
</div>
</div>
</template>
<script setup>
import RightSideList from '@/components/RightSideList/index'
import { useGo } from '@/hooks/useGo'
import RankingItem from '@/components/RankingItem/index'
// import { useGo } from '@/hooks/useGo'
import { killPages } from '@/hooks/useKeepAlive'
const go = useGo()
// const go = useGo()
// 删除所有的 keep-alive 缓存
killPages();
</script>
......
<!--
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-30 13:51:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 11:28:54
* @FilePath: /tswj/src/views/client/donateList.vue
* @Description: 幼儿园捐赠人捐赠金额排行榜
-->
<template>
<!-- TODO: 排行榜详情列表 -->
<!-- src/components/RankingItem/index.vue 到时候使用这一部分，可能有几个学校 -->
<div class="van-hairline--bottom">
<van-row style="padding: 0.5rem 1rem;">
<van-col span="4">
<van-image v-if="info.avatar" round width="3rem" height="3rem" :src="info.avatar ? info.avatar : icon_avatar" />
</van-col>
<van-col span="6" style="line-height: 3rem;">
<div class="name-info">{{ info.name }}</div>
</van-col>
<van-col span="14" style="text-align: right; font-size: 0.9rem;">
<p style="color: #C5C5C5; line-height: 1.5;">2022-05-27</p>
<p style="color: #222222;">
<span>《逃家小兔绘本》</span>
<van-icon style="vertical-align: middle;" size="1rem" name="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng73a86b62d29d42c2544d9bbb316217575224457db387ef42182b087764cb1fbd" />
<span>&nbsp;x2</span>
</p>
</van-col>
</van-row>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
import { icon_avatar } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const info = ref({
avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
name: '杨妮妮'
})
</script>
<style lang="less" scoped>
</style>