Skip to content

J
jiaxiu-miniapp
Commit fa1d49b6 authored by 彭佳妮（贵阳日报）'s avatar 彭佳妮（贵阳日报）
Browse files
Options

分类

parent d72ef978
Hide whitespace changes
Inline Side-by-side
Showing with 329 additions and 39 deletions
package.json
View file @ fa1d49b6
......@@ -48,7 +48,7 @@
"@vue/runtime-core": "^3.3.11",
"@vue/tsconfig": "^0.1.3",
"add": "^2.0.6",
"rexma-cli": "^1.9.0",
"rexma-cli": "^1.9.3",
"sass": "^1.77.6",
"typescript": "^4.9.4",
"uni-mini-router": "^0.1.6",
......
src/pages.json
View file @ fa1d49b6
......@@ -17,7 +17,8 @@
"path": "pages/classify/index",
"name": "classify",
"style": {
"navigationBarTitleText": "分类"
"navigationBarTitleText": "分类",
"navigationStyle": "custom"
}
},
{
......@@ -78,7 +79,7 @@
"path": "pages/subject/list",
"name": "subject-list",
"style": {
"navigationBarTitleText": "专题"
"navigationBarTitleText": "专题列表"
},
"meta": {
"requireAuth": true
......
src/pages/account/login.vue
View file @ fa1d49b6
......@@ -9,14 +9,14 @@
</div>
</div>
<div class="tab-account">
<ul class="nav nav-tabs login-tabs">
<!-- <li :class="{ active: activeIndex == 0 }" @click="activeIndex = 0">
<!-- <ul class="nav nav-tabs login-tabs">
<li :class="{ active: activeIndex == 0 }" @click="activeIndex = 0">
<a data-toggle="tab">登录</a>
</li> -->
<!-- <li :class="{ active: activeIndex == 1 }" @click="activeIndex = 1">
</li>
<li :class="{ active: activeIndex == 1 }" @click="activeIndex = 1">
<a data-toggle="tab">注册</a>
</li> -->
</ul>
</li>
</ul> -->
<div class="tab-content">
<div class="tab-pane fade" v-if="activeIndex == 0">
<form>
......@@ -35,7 +35,6 @@
v-if="!passwordVisible"></i>
<i class="iconfont xian-mi icon-close-eye" @click="passwordVisible = false" v-else></i>
</div>
<!-- <button type="button" class="conf-btn login-btns" @click="login">登录</button> -->
<div class="login-btns">
<van-button class="btn" type="primary" round @click="login">登录</van-button>
<!-- #ifdef H5-SGY -->
......
src/pages/classify/index.vue
View file @ fa1d49b6
<template>
<div>分类</div>
<div class="bg">
<van-sticky>
<div class="header">
<div class="title">分类</div>
<div class="search">
<div class="s-box">
<van-icon name="search" color="#303030" />
<input class="placeholder" placeholder="请输入关键词" v-model="value" />
</div>
<van-icon v-if="value" name="clear" color="#969696" />
</div>
</div>
</van-sticky>
<div class="content">
<div class="list">
<div class="item" v-for="(item, index) in 20" :key="index">
<img src="/static/image/cover-1.png">
<div class="blurbox">
<div class="bg"></div>
<div class="title">XXX专题</div>
</div>
</div>
<div class="item">
<img src="/static/image/cover-2.png">
<div class="blurbox">
<div class="bg"></div>
<div class="title">XXX专题</div>
</div>
</div>
<div class="item">
<img src="/static/image/cover-3.png">
<div class="blurbox">
<div class="bg"></div>
<div class="title">XXX专题</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const value = ref('')
</script>
<style scoped lang="scss">
.bg {
height: 100vh;
background: linear-gradient(to bottom, #D2E4FF 5%, #fff 25%);
.header {
display: flex;
align-items: center;
padding: 0 20px;
height: 50px;
gap: 15px;
background-color: #D2E4FF;
.title {
font-size: 18px;
font-weight: bold;
}
.search {
width: 45%;
background-color: #F7F8FA;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
opacity: 0.7;
padding: 0 10px;
.s-box {
display: flex;
align-items: center;
gap: 5px;
.placeholder {
color: #303030;
font-size: 14px;
}
}
}
}
.content {
padding: 10px 10px 0 10px;
min-height: 100vh;
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.item {
break-inside: avoid;
background-color: #ffffff;
border-radius: 5px;
margin-bottom: 10px;
width: 32%;
position: relative;
img {
width: 100%;
height: 170px;
object-fit: cover;
border-radius: 5px;
}
.blurbox {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
height: 32px;
width: 100%;
border-radius: 0 0 5px 5px;
.bg {
position: absolute;
border-radius: 0 0 5px 5px;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
}
.title {
font-size: 28rpx;
color: #fff;
font-weight: bold;
z-index: 1;
}
}
}
}
}
}
</style>
src/pages/mine/components/MoreOperations/index.vue
View file @ fa1d49b6
......@@ -66,7 +66,7 @@ defineExpose({
<style lang="scss" scoped>
.more {
padding: 20px;
padding: 10px;
.delete {
color: #E23535;
......
src/pages/mine/components/PictureList.vue
View file @ fa1d49b6
......@@ -41,15 +41,14 @@
</template>
<script setup>
import useUserStore from '@/store/user'
import { selectMinePictureList, selectCollectPictureList, publishPicture } from '@/api/publish'
import { showLoadingToast, closeToast, showToast } from 'vant'
import { selectMinePictureList, selectCollectPictureList } from '@/api/publish'
const props = defineProps({
active: {
type: Number,
default: 0
}
})
const emits = defineEmits(["total", "refresh", "opreation"])
const emits = defineEmits(["total", "refresh", "opreation", "publish"])
const router = useRouter()
const userStore = useUserStore()
const refreshing = ref(false)
......@@ -109,24 +108,8 @@ const handleMore = (e) => {
emits('opreation', e)
}
const handlePublishPicture = async (e) => {
showLoadingToast({
message: '发布中',
forbidClick: true,
duration: 0
})
const data = {
materialId: e.materialId,
organizeId: e.organizeId,
organizeName: e.organizeName,
collect: 1
}
await publishPicture(data)
closeToast()
showToast('发布成功')
handleRefresh()
emits('refresh')
const handlePublishPicture = (e) => {
emits('publish', e)
}
defineExpose({
......
src/pages/mine/components/Publish/index.vue 0 → 100644
View file @ fa1d49b6
<template>
<van-popup v-model:show="showPublish" round position="bottom" closeable>
<div class="popbox">
<div class="title">发布图组</div>
<van-form @submit="handleSubmit" required colon>
<van-field v-model="formData.organizeName" is-link readonly name="picker" label="选择组织"
placeholder="请选择组织" @click="showOrganize = true" :rules="[{ required: true, message: '请选择组织' }]" />
<div class="btn">
<van-button round type="primary" native-type="submit" size="small">立即发布</van-button>
</div>
</van-form>
</div>
</van-popup>
<van-popup v-model:show="showOrganize" round position="bottom">
<van-cascader v-model="formData.organizeName" title="请选择组织" :options="options" :field-names="fieldNames"
@close="showOrganize = false" @finish="onFinish" />
</van-popup>
</template>
<script setup>
import useUserStore from '@/store/user'
import { publishPicture } from '@/api/publish'
import { selectOrganizeList } from '@/api/prefecture'
import { showLoadingToast, closeToast, showToast } from 'vant'
const emits = defineEmits(["refresh"])
const userStore = useUserStore()
const dataList = ref([])
const options = ref([])
const getList = async () => {
const data = {
userId: userStore.userinfo.user.id,
sysCode: import.meta.env.VITE_APP_SYSTEM_CODE,
moduleCode: 'practice-mediaCatalog'
}
const res = await selectOrganizeList(data)
dataList.value = res.data
options.value = buildTree(res.data)
}
const formData = ref({
materialId: null,
organizeId: '',
organizeName: '',
collect: 1
})
const showOrganize = ref(false)
const fieldNames = {
text: 'organName',
value: 'id',
children: 'children',
};
const buildTree = (items) => {
const tree = [{
id: '0',
organName: '无组织',
children: []
}]
const lookup = {}
// 初始化lookup对象，方便后续快速查找
items.forEach(item => {
lookup[item.id] = { ...item, id: item.id.toString(), children: [] };
});
// 构建树
items.forEach(item => {
if (item.superiorId == 0) {
// superiorId=0的项是顶级项
tree.push(lookup[item.id]);
} else {
// 否则，添加到对应父节点的children数组中
if (!lookup[item.superiorId]) {
// 如果父节点不存在（理论上不应该发生，除非数据有误），可以创建一个空的占位符
lookup[item.superiorId] = { children: [] };
}
lookup[item.superiorId].children.push(lookup[item.id]);
}
});
return removeEmptyChildren(tree)
}
const removeEmptyChildren = (nodes) => {
nodes.forEach(node => {
if (node.children.length === 0) {
delete node.children;
} else {
removeEmptyChildren(node.children);
}
});
return nodes
}
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
showOrganize.value = false;
console.log(selectedOptions)
formData.value.organizeId = selectedOptions[selectedOptions.length - 1].id
formData.value.organizeName = selectedOptions[selectedOptions.length - 1].organName
};
const handleSubmit = async () => {
showLoadingToast({
message: '发布中',
forbidClick: true,
duration: 0
})
await publishPicture(formData.value)
closeToast()
showToast('发布成功')
showPublish.value = false
emits('refresh')
}
const showPublish = ref(false)
const open = (e) => {
console.log(e)
formData.value.materialId = e.materialId
showPublish.value = true
getList()
}
const close = () => {
showPublish.value = false
}
defineExpose({
open,
close
})
</script>
<style lang="scss" scoped>
.popbox {
padding: 20px;
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.btn {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
.van-button {
width: 100%;
}
}
}
</style>
\ No newline at end of file
src/pages/mine/index.vue
View file @ fa1d49b6
......@@ -47,7 +47,7 @@
<div class="content">
<van-tabs v-model:active="active" background="#f8f8f8" animated swipeable sticky>
<van-tab title="待发布">
<picture-list :active="0" @total="setTotal" @refresh="handleRefreshPublishPicture"></picture-list>
<picture-list ref="waitingPublishPicture" :active="0" @total="setTotal" @refresh="handleRefreshPublishPicture" @publish="handlePublishPicture"></picture-list>
</van-tab>
<van-tab title="已发布">
<picture-list ref="publishPicture" :active="1" @total="setTotal" @opreation="handleOperation"></picture-list>
......@@ -59,6 +59,7 @@
</div>
</div>
<MoreOperations ref="morePopupRef" @refresh="handleRefreshPublishPicture"></MoreOperations>
<Publish ref="publishPopupRef" @refresh="handleRefreshWaitingPublishPicture"></Publish>
</template>
<script setup>
......@@ -67,6 +68,7 @@ import useUserStore from '@/store/user'
import PictureList from './components/PictureList'
import { useInitScroll } from '@/hooks/useScroll'
import MoreOperations from './components/MoreOperations/index.vue'
import Publish from './components/Publish/index.vue'
useInitScroll()
const router = useRouter()
......@@ -97,6 +99,16 @@ const publishPicture = ref()
const handleRefreshPublishPicture = () => {
publishPicture.value.refresh()
}
const publishPopupRef = ref()
const handlePublishPicture = (e) => {
publishPopupRef.value.open(e)
}
const waitingPublishPicture = ref()
const handleRefreshWaitingPublishPicture = () => {
handleRefreshPublishPicture()
waitingPublishPicture.value.refresh()
}
const logout = () => {
showConfirmDialog({
......
yarn.lock
View file @ fa1d49b6
......@@ -4113,10 +4113,10 @@ reusify@^1.0.4:
resolved "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
rexma-cli@^1.9.0:
version "1.9.1"
resolved "https://registry.npmmirror.com/rexma-cli/-/rexma-cli-1.9.1.tgz#811beb9fec3a453adec7fe758bb1e01e5d6c092d"
integrity sha512-/cjtaQrnkzfUZwpkdJRa6/uVmeGwsPTF6tTnNlEovfRYlPIqrkpdjqdeoDk5K43D+yacN8FxdOXxLU5q+s6iMg==
rexma-cli@^1.9.3:
version "1.9.3"
resolved "https://registry.npmmirror.com/rexma-cli/-/rexma-cli-1.9.3.tgz#3e32146525db962d70ee2c0dd2c760084efa99ef"
integrity sha512-fXDag7i5wXpXUOoXdQ6h8L/kF+1b7OtetPQZJEr2Ucfvgua81h7IB0LkSLffeC2jrxHazT8vy6QP21A2yibUAA==
dependencies:
chalk "4.1.2"
cli-spinners "2.9.2"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment